Fix page routing

src/Spot.vue

@@ -12,73 +12,85 @@ const aoRoutes = {
 export default {
 	data() {
 		return {
-			hash: {},
+			hash: {page: '', items: []},
 			consts: this.spot.consts,
-			user: this.spot.vars('user')
+			user: this.spot.vars('user'),
+			routes: aoRoutes
 		};
 	},
 	provide() {
 		return {
+			hash: this.hash,
 			projects: this.spot.vars('projects'),
 			consts: this.consts,
 			user: this.user
 		};
 	},
-	inject: ['spot'],
 	computed: {
-		page() {
-			this.spot.vars('page', this.hash.page);
-			return aoRoutes[this.hash.page];
+		route() {
+			return this.routes[this.hash.page];
+		},
+		hashSnapshot() {
+			return JSON.stringify(this.hash);
 		}
 	},
+	inject: ['spot'],
 	created() {
 		//User
 		this.user.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || this.consts.default_timezone;
+
+		//Set initial page
+		let asInitHash = this.getHash();
+		if(!asInitHash.page) this.hash.page = this.spot.consts.default_page;
+		else this.hash = asInitHash;
 	},
 	mounted() {
-		window.addEventListener('hashchange', () => {this.onHashChange();});
-		var oEvent = new Event('hashchange');
-		window.dispatchEvent(oEvent);
+		//Catch browser hash change
+		window.addEventListener('hashchange', this.onHashChange);
 	},
-	methods: {
-		_hash(hash, bReboot) {
-			bReboot = bReboot || false;
-			if(!hash) return window.location.hash.slice(1);
-			else window.location.hash = '#'+hash;
+	watch: {
+		hashSnapshot(jNewHash, jOldHash) {
+			const asNewHash = JSON.parse(jNewHash);
+			const asOldHash = JSON.parse(jOldHash);
+			this.spot.vars('page', this.hash.page); //FIXME remove
 
-			if(bReboot) location.reload();
-		},
-		onHashChange() {
-			let asHash = this.getHash();
-			if(asHash.hash !='' && asHash.page != '') {
-				if(asHash.page == this.hash.page) this.spot.onSamePageMove(asHash);
-				this.hash = asHash;
+			//Sync variable -> #hash
+			if(asNewHash != this.getHash()) {
+				this.setHash(asNewHash.page, asNewHash.items);
 			}
-			else if(!this.hash.page) this.setHash(this.spot.consts.default_page);
-		},
-		getHash() {
-			let sHash = this._hash();
-			let asHash = sHash.split(this.spot.consts.hash_sep);
-			let sPage = asHash.shift() || '';
-			return {hash:sHash, page:sPage, items:asHash};
-		},
-		setHash(sPage, asItems, bReboot) {
-			bReboot = bReboot || false;
-			sPage = sPage || '';
-			asItems = asItems || [];
-			if(typeof asItems == 'string') asItems = [asItems];
 
-			if(sPage != '') {
-				let sItems = (asItems.length > 0)?this.spot.consts.hash_sep+asItems.join(this.spot.consts.hash_sep):'';
-				this._hash(sPage+sItems, bReboot);
+			//Same Page change
+			if(asNewHash != asOldHash && asNewHash.page == asOldHash.page) {
+				this.spot.onSamePageMove(asNewHash, asOldHash);
 			}
 		}
+	},
+	methods: {
+		onHashChange() { //Sync #hash -> variable
+			let asHash = this.getHash();
+			if(asHash != this.hash) this.hash = asHash;
+			this.spot.vars('page', this.hash.page); //FIXME remove
+		},
+		getHash() {
+			let sHash = window.location.hash.slice(1);
+			let asHash = sHash.split(this.spot.consts.hash_sep);
+			let sPage = asHash.shift() || '';
+			return {page: sPage, items: asHash};
+		},
+		setHash(sPage = '', asItems = []) {
+			if(typeof asItems == 'string') asItems = [asItems];
+			const sItems = (asItems.length > 0)?(this.spot.consts.hash_sep + asItems.join(this.spot.consts.hash_sep)):'';
+			window.location.hash = '#' + sPage + sItems;
+		}
+	},
+	beforeUnmount() {
+		window.removeEventListener('hashchange', this.onHashChange)
 	}
 }
 </script>
 <template>
 	<div id="main">
-		<component :is="page" />
+		<component :is="route" />
 	</div>
 	<div id="mobile"></div>
 </template>	

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>

src/components/upload.vue

@@ -58,7 +58,7 @@ export default {
 					(position) => {
 						this.logs.push('Sending position...');
 						this.spot.get2('add_position', {'latitude':position.coords.latitude, 'longitude':position.coords.longitude, 'timestamp':Math.round(position.timestamp / 1000)})
-							.then((asData) => {this.logs.push('Position sent');})
+							.then((asData) => {this.logs.push(self.lang(sMsgId));})
 							.catch((sMsgId) => {this.logs.push(self.lang(sMsgId));});
 					},
 					(error) => {

src/scripts/spot.js

@@ -195,9 +195,9 @@ export default class Spot {
 		else console.log('no init for the page: '+asHash.page);
 	}
 
-	onSamePageMove(asHash) {
+	onSamePageMove(asNewHash, asOldHash) {
 		let sPage = this.vars('page');
-		return (this.pages[sPage] && this.pages[sPage].onSamePageMove)?this.pages[sPage].onSamePageMove(asHash):false;
+		return (this.pages[sPage] && this.pages[sPage].onSamePageMove)?this.pages[sPage].onSamePageMove(asNewHash, asOldHash):false;
 	}
 
 	onQuitPage() {