From cb505d9092263ca612288d8cad1589f81f9c50b5 Mon Sep 17 00:00:00 2001 From: Franzz Date: Sun, 12 Apr 2026 00:06:08 +0200 Subject: [PATCH] Fix page routing --- src/Spot.vue | 90 +++++++++++++++++++++----------------- src/components/project.vue | 59 +++++++++++++++---------- src/components/upload.vue | 2 +- src/scripts/spot.js | 4 +- 4 files changed, 90 insertions(+), 65 deletions(-) diff --git a/src/Spot.vue b/src/Spot.vue index 069c516..809084a 100644 --- a/src/Spot.vue +++ b/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) } } \ No newline at end of file + \ No newline at end of file diff --git a/src/components/project.vue b/src/components/project.vue index 08885cc..6a7a2fc 100644 --- a/src/components/project.vue +++ b/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 {
- +

- +
- +
@@ -635,7 +648,7 @@ export default {
- +
@@ -646,7 +659,7 @@ export default { - +
diff --git a/src/components/upload.vue b/src/components/upload.vue index b826ed6..9f3d568 100644 --- a/src/components/upload.vue +++ b/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) => { diff --git a/src/scripts/spot.js b/src/scripts/spot.js index caa0904..b3c9781 100755 --- a/src/scripts/spot.js +++ b/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() {