spot/src/components/projectSettings.vue

<script>
import Simplebar from 'simplebar-vue';

import SpotIcon from '@components/spotIcon';
import ProjectNewsletter from '@components/projectNewsletter';
import logoIconUrl from '@images/icons/favicon.svg';
import logoTitleUrl from '@images/logo_title.svg';

export default {
	components: {
		SpotIcon,
		ProjectNewsletter,
		Simplebar
	},
	props: {
		projects: Array,
		projectCodeName: String,
		baseMaps: Array,
		baseMap: String,
		mapInitializing: Boolean,
		hikes: Object
	},
	data() {
		return {
			isOpen: false,
			lastUpdate: {unix_time: 0, relative_time: '', formatted_time: ''},
			logoIconUrl,
			logoTitleUrl
		};
	},
	emits: ['update:baseMap', 'update:projectCodeName', 'toggle'],
	inject: ['api', 'lang', 'user', 'consts', 'isMobile', 'hash'],
	computed: {
		project() {
			return this.projects.find((project) => project.codename == this.projectCodeName);
		},
		projectCodeNameModel: {
			get() {
				return this.projectCodeName;
			},
			set(sProjectCodeName) {
				this.$emit('update:projectCodeName', sProjectCodeName);
			}
		},
		baseMapModel: {
			get() {
				return this.baseMap;
			},
			set(sBaseMap) {
				this.$emit('update:baseMap', sBaseMap);
			}
		}
	},
	watch: {
		projectCodeName() {
			this.setLastUpdate();
		}
	},
	mounted() {
		this.setLastUpdate();
	},
	methods: {
		async setLastUpdate() {
			if(this.project?.mode == this.consts.modes.blog) {
				this.lastUpdate = await this.api.get('last_update', {id_project: this.project.id});
			}
		},
		toggle(bShow, iAnimDuration=500) {
			this.isOpen = (typeof bShow == 'boolean')?bShow:(!this.isOpen);
			this.$emit('toggle', this.isOpen, iAnimDuration);
			return this.isOpen;
		},
		getWidth() {
			return this.$el.getBoundingClientRect().width;
		}
	}
}
</script>

<template>
	<div id="settings" class="panel panel-left">
		<div id="settings-panel" class="panel-content">
			<div class="settings-header settings-box">
				<img :src="logoIconUrl" class="logo-icon clickable" :title="lang.get('project.overview')" @click="hash.items = []" />
				<img :src="logoTitleUrl" class="logo-title" :alt="consts.title" />
				<div class="last_update" v-if="project?.mode == consts.modes.blog && lastUpdate.unix_time > 0" :title="lastUpdate.formatted_time">
					<SpotIcon icon="find-me-spot" :text="lang.get('feed.last_update')+' '+lastUpdate.relative_time" />
				</div>
			</div>
			<div class="settings-sections">
				<Simplebar id="settings-sections-scrollbox">
					<div class="settings-section settings-box">
						<h1><SpotIcon :icon="'project'" width="fixed" :text="lang.get('project.hikes')" /></h1>
						<div class="settings-section-body">
							<div class="radio" v-for="project in projects" :key="'project-'+project.id">
								<input type="radio" :id="'project-'+project.id" :value="project.codename" v-model="projectCodeNameModel" :disabled="mapInitializing" />
								<label :for="'project-'+project.id">
									<span>{{ project.name }}</span>
									<a v-if="project.gpxfilepath" class="download" :href="project.gpxfilepath" :download="project.codename + '.gpx'" :title="lang.get('track.download')" @click.stop="()=>{}">
										<SpotIcon :icon="'download'" margin="left" />
									</a>
								</label>
							</div>
						</div>
					</div>
					<div class="settings-section settings-box">
						<h1><SpotIcon :icon="'map'" width="fixed" :text="lang.get('map.title')" /></h1>
						<div class="settings-section-body">
							<div class="radio" v-for="bm in baseMaps" :key="'map-'+bm.id_map">
								<input type="radio" :id="'map-'+bm.id_map" :value="bm.codename" v-model="baseMapModel" :disabled="mapInitializing" />
								<label :for="'map-'+bm.id_map">{{ lang.get('map.'+bm.codename) }}</label>
							</div>
						</div>
					</div>
					<div class="settings-section settings-box newsletter">
						<h1><SpotIcon :icon="'newsletter'" width="fixed" :text="lang.get('newsletter.title')" /></h1>
						<div class="settings-section-body">
							<ProjectNewsletter />
						</div>
					</div>
					<div class="settings-section settings-box admin" v-if="user.hasClearance(consts.clearances.admin)">
						<h1><SpotIcon :icon="'admin'" width="fixed" :text="lang.get('admin.title')" /></h1>
						<div class="settings-section-body admin-actions">
							<a class="button" href="#admin"><SpotIcon :icon="'config'" :text="lang.get('admin.config')" /></a>
							<a class="button" href="#upload"><SpotIcon :icon="'upload'" :text="lang.get('admin.upload')" /></a>
						</div>
					</div>
				</Simplebar>
			</div>
			<div v-if="!isMobile()" class="settings-footer">
				<a href="https://git.lutran.fr/franzz/spot" :title="lang.get('credits.git')" target="_blank" rel="noopener">
					<SpotIcon :icon="'credits'" width="auto" :text="lang.get('credits.project', consts.title)" />
				</a>
				<span>&nbsp;{{ lang.get('credits.license') }}</span>
			</div>
		</div>
		<div :class="'panel-control panel-control-icon panel-control-'+(isMobile()?'bottom':'top')" @click="toggle">
			<SpotIcon :icon="isOpen?'prev':'menu'" />
		</div>
		<div v-if="project?.id && !isMobile()" id="legend" class="panel-control panel-control-bottom">
			<div v-for="(color, hikeType) in hikes.colors" class="track">
				<span class="line" :style="'background-color:'+color+'; height:'+hikes.width+'px;'"></span>
				<span class="desc">{{ lang.get('track.'+hikeType) }}</span>
			</div>
		</div>
		<div v-if="project?.id" id="title" :class="'panel-control panel-control-'+(isMobile()?'bottom':'top')">
			<span>{{ project.name }}</span>
		</div>
	</div>
</template>