Fix page routing

src/components/project.vue

@@ -2,15 +2,13 @@
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { Map, NavigationControl, Marker, LngLatBounds, LngLat, Popup } from 'maplibre-gl';
 import { createApp, defineComponent, nextTick, ref, defineCustomElement, provide, inject } from 'vue';
-import simplebar from 'simplebar-vue';
+import Simplebar from 'simplebar-vue';
 
 import autosize from 'autosize';
 import mousewheel from 'jquery-mousewheel';
 import waitforimages from 'jquery.waitforimages';
 import lightbox from '../scripts/lightbox.js';
 
-//import SimpleBar from 'simplebar';
-
 import SpotIcon from './spotIcon.vue';
 import SpotButton from './spotButton.vue';
 import ProjectPost from './projectPost.vue';
@@ -22,7 +20,7 @@ export default {
 		SpotButton,
 		ProjectPost,
 		ProjectPopup,
-		simplebar
+		Simplebar
 	},
 	data() {
 		return {
@@ -35,7 +33,6 @@ export default {
 			settingsPanelOpen: false,
 			markerSize: {width: 32, height: 32},
 			currProject: {},
-			currProjectCodeName: null,
 			modeHisto: false,
 			posts: [],
 			nlFeedbacks: [],
@@ -76,14 +73,11 @@ export default {
 	},
 	watch: {
 		baseMap(sNewBaseMap, sOldBaseMap) {
-			if(sOldBaseMap) this.map.setLayoutProperty(sOldBaseMap, 'visibility', 'none');
-			if(sNewBaseMap) this.map.setLayoutProperty(sNewBaseMap, 'visibility', 'visible');
+			if(this.map.isStyleLoaded()) {
+				if(sOldBaseMap) this.map.setLayoutProperty(sOldBaseMap, 'visibility', 'none');
+				if(sNewBaseMap) this.map.setLayoutProperty(sNewBaseMap, 'visibility', 'visible');
+			}
 		},
-		currProjectCodeName(sNewCodeName, sOldCodeName) {
-			//this.toggleSettingsPanel(false);
-			if(this.$parent.hash.items.length==0) this.$parent.setHash(this.$parent.hash.page, [sNewCodeName]);
-			this.init();
-		}
 	},
 	provide() {
 		return {
@@ -96,7 +90,10 @@ export default {
 			project: this
 		};
 	},
-	inject: ['spot', 'projects', 'user'],
+	inject: ['spot', 'hash', 'projects', 'user'],
+	beforeMount() {
+		if(this.$parent.hash.items.length == 0) this.$parent.hash.items[0] = this.spot.vars('default_project_codename');
+	},
 	mounted() {
 		this.spot.addPage('project', {
 			onResize: () => {
@@ -108,15 +105,25 @@ export default {
 				}
 				*/
 			},
+			onSamePageMove: (asNewHash, asOldHash) => {
+				//this.toggleSettingsPanel(false);
+				//this.quit();
+
+				//Check for project change
+				if(asNewHash.items[0] != asOldHash.items[0]) {
+					console.log('Project change: '+(asOldHash.items[0])+' ->', asNewHash.items[0]);
+					this.init();
+				}
+			},
 			onQuitPage: () => {
-				this.setFeedUpdateTimer(-1);
+				this.quit();
 			}
 		});
 
-		this.currProjectCodeName = (this.$parent.hash.items.length==0)?this.spot.vars('default_project_codename'):this.$parent.hash.items[0];
+		this.init();
 	},
 	beforeUnmount() {
-		this.setFeedUpdateTimer(-1);
+		this.quit();
 	},
 	methods: {
 		init() {
@@ -126,8 +133,14 @@ export default {
 			this.initFeed();
 			this.initMap();
 		},
+		quit() {
+			lightbox.end();
+			this.$refs.feedSimpleBar.scrollElement.removeEventListener('scroll', (oEvent) => {this.onFeedScroll(oEvent);});
+			this.setFeedUpdateTimer(-1);
+			this.map.remove();
+		},
 		initProject() {
-			this.currProject = this.projects[this.currProjectCodeName];
+			this.currProject = this.projects[this.$parent.hash.items[0]];
 			this.modeHisto = (this.currProject.mode == this.spot.consts.modes.histo);
 			this.feed = {loading:false, updatable:true, outOfData:false, refIdFirst:0, refIdLast:0, firstChunk:true};
 			this.posts = [];
@@ -178,7 +191,7 @@ export default {
 			this.messages = aoMarkers.messages;
 			this.lastUpdate = aoMarkers.last_update;
 
-			console.log(this.baseMaps);
+			//console.log(this.baseMaps);
 
 			//Base maps (raster tiles)
 			let asSources = {};
@@ -574,12 +587,12 @@ export default {
 					</div>
 				</div>
 				<div class="settings-sections">
-					<simplebar id="settings-sections-scrollbox">
+					<Simplebar id="settings-sections-scrollbox">
 						<div class="settings-section">
 							<h1><SpotIcon :icon="'project'" :classes="'fa-fw'" :text="spot.lang('hikes')" /></h1>
 							<div class="settings-section-body">
 								<div class="radio" v-for="project in projects">
-									<input type="radio" :id="project.id" :value="project.codename" v-model="currProjectCodeName" />
+									<input type="radio" :id="project.id" :value="project.codename" v-model="$parent.hash.items[0]" />
 									<label :for="project.id">
 										<span>{{ project.name }}</span>
 										<a class="download" :href="project.gpxfilepath" :title="spot.lang('track_download')" @click.stop="()=>{}">
@@ -614,7 +627,7 @@ export default {
 							<a class="button" href="#admin"><SpotIcon :icon="'config'" :text="spot.lang('admin_config')" /></a>
 							<a class="button" href="#upload"><SpotIcon :icon="'upload'" :text="spot.lang('admin_upload')" /></a>
 						</div>
-					</simplebar>
+					</Simplebar>
 				</div>
 				<div class="settings-footer">
 					<a href="https://git.lutran.fr/franzz/spot" :title="spot.lang('credits_git')" target="_blank" rel="noopener">
@@ -635,7 +648,7 @@ export default {
 			</div>
 		</div>
 		<div id="feed" class="map-container map-container-right" ref="feed">
-			<simplebar id="feed-panel" class="map-panel" ref="feedSimpleBar">
+			<Simplebar id="feed-panel" class="map-panel" ref="feedSimpleBar">
 				<div id="feed-header">
 					<ProjectPost v-if="modeHisto" :options="{type: 'archived', headerless: true}" />
 					<ProjectPost v-else :options="{type: 'poster', relative_time: spot.lang('post_new_message')}" />
@@ -646,7 +659,7 @@ export default {
 				<div id="feed-footer" v-if="feed.loading">
 					<ProjectPost :options="{type: 'loading', headerless: true}" />
 				</div>
-			</simplebar>
+			</Simplebar>
 			<div :class="'map-control map-control-icon feed-control map-control-'+(mobile?'bottom':'top')" @click="toggleFeedPanel">
 				<SpotIcon :icon="feedPanelOpen?'next':'post'" />
 			</div>