Separate project / feed / settings

src/components/projectSettings.vue

@@ -0,0 +1,142 @@
+<script>
+import Simplebar from 'simplebar-vue';
+
+import SpotIcon from '@components/spotIcon';
+import ProjectNewsletter from '@components/projectNewsletter';
+
+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: ''}
+		};
+	},
+	emits: ['update:baseMap', 'update:projectCodeName', 'toggle'],
+	inject: ['api', 'lang', 'user', 'consts', 'isMobile'],
+	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="map-container map-container-left">
+		<div id="settings-panel" class="map-panel">
+			<div class="settings-header">
+				<div class="logo"><img width="289" height="72" src="images/logo_black.png" alt="Spotty" /></div>
+				<div id="last_update" v-if="project?.mode == consts.modes.blog && lastUpdate.unix_time > 0">
+					<p><span><img src="images/spot-logo-only.svg" alt="" /></span><abbr :title="lastUpdate.formatted_time">{{ lang.get('feed.last_update')+' '+lastUpdate.relative_time }}</abbr></p>
+				</div>
+			</div>
+			<div class="settings-sections">
+				<Simplebar id="settings-sections-scrollbox">
+					<div class="settings-section">
+						<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">
+						<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 newsletter">
+						<ProjectNewsletter />
+					</div>
+					<div class="settings-section admin" v-if="user.hasClearance(consts.clearances.admin)">
+						<h1><SpotIcon :icon="'admin'" width="fixed" :text="lang.get('admin.title')" /></h1>
+						<div class="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 class="settings-footer">
+				<a href="https://git.lutran.fr/franzz/spot" :title="lang.get('credits.git')" target="_blank" rel="noopener">
+					<SpotIcon :icon="'credits'" :text="lang.get('credits.project')" />
+				</a>
+				<span>&nbsp;{{ lang.get('credits.license') }}</span>
+			</div>
+		</div>
+		<div :class="'map-control map-control-icon settings-control map-control-'+(isMobile()?'bottom':'top')" @click="toggle">
+			<SpotIcon :icon="isOpen?'prev':'menu'" />
+		</div>
+		<div v-if="project?.id && !isMobile()" id="legend" class="map-control settings-control map-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="'map-control settings-control map-control-'+(isMobile()?'bottom':'top')">
+			<span>{{ project.name }}</span>
+		</div>
+	</div>
+</template>