routing over uuid

README.md

@@ -1,5 +1,5 @@
 # Anchors
-Anchors is a tool to create and publish self-hosted, geo-located audio walks.
+Anchors is a tool to create and self-publish, geo-located audio walks.
 
 ## Features
 
@@ -12,13 +12,15 @@ Anchors is a tool to create and publish self-hosted, geo-located audio walks.
 - [x] animated timelines
 - [x] galleries
 - [x] responsive layout
-- [ ] sane data structure
+- [ ] sane data model
 - [ ] proper routing
 - [ ] creator mode
 
 ## Limitations
 
 - number of stations must be less than 10 as to the [material design icons](https://materialdesignicons.com).
+- See [anchors-maplibre-gl](https://github.com/mugraph/anchors-maplibre-gl) for
+  an improved draft version.
 
 ## Screenshots
 
@@ -43,6 +45,3 @@ Anchors is a tool to create and publish self-hosted, geo-located audio walks.
   <figcaption>Gallery chapter example</figcaption>
 </figure>
 
-## Demo
-
-Coming soon...

package.json

@@ -14,6 +14,7 @@
 		"mdi": "^2.2.43",
 		"register-service-worker": "^1.7.1",
 		"roboto-fontface": "*",
+		"uuid": "^9.0.1",
 		"vue": "^2.6.11",
 		"vue-d3-charts": "^0.2.8",
 		"vue-meta": "^2.4.0",

src/App.vue

@@ -60,13 +60,17 @@ export default {
       'contentDrawer',
       'drawerRightWidth',
       'scenes',
+			'scenesIsSet',
+			'subScenes',
+			'subScenesIsSet',
       'currentUUID',
     ]),
   },
   created() {
     // Make store fetch the scenes
     this.$store.dispatch('fetchScenes');
     this.$store.dispatch('fetchGalleries');
+		this.$store.dispatch('fetchJSONLayers')
     //this.$store.dispatch("fetchWeserWaterLevels");
   },
 };

src/components/content/ActiveTabItem.vue

@@ -4,6 +4,7 @@
       {{ currentItem.title }}
     </v-card-title>
     <v-card-subtitle>{{ currentItem.subtitle }}</v-card-subtitle>
+		<v-card-text>{{currentItem.transcript}}</v-card-text>
     <v-card-text
       v-if="currentItem.target === '8808cb18-8334-11eb-8dcd-0242ac130003'"
     >

src/router/router.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import LeafletMap from '../views/LeafletMap.vue';
+import store from '../store/store.js'
 
 Vue.use(VueRouter);
 
@@ -10,6 +11,18 @@ const routes = [
     name: 'LeafletMap',
     component: LeafletMap,
   },
+	{
+    path: '/:uuid',
+    component: LeafletMap,
+		props: true,
+		children: [
+			{
+				path: ':id',
+				component: LeafletMap,
+				props: true
+			}
+		]
+  }
 ];
 
 const router = new VueRouter({
@@ -18,4 +31,9 @@ const router = new VueRouter({
   routes,
 });
 
+router.beforeEach((to, from, next) => {
+	store.commit('setRoute', to)
+	next()
+})
+
 export default router;

src/store/store.js

@@ -6,6 +6,8 @@ import icons from "@/assets/icons.json"
 
 import axios from "axios";
 import { eventBus } from "../main";
+import { validate as isValidUUID } from 'uuid';
+
 const ax = axios.create({
 	baseURL: process.env.BASE_URL,
 });
@@ -14,15 +16,18 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
 	state: {
+		route: null,
 		global: {
 			scenes: {
 				mainScenes: {
 					url: "data/json/scenes.json",
 					data: null,
+					set: false,
 				},
 				subScenes: {
 					url: "data/json/subScenes.json",
 					data: null,
+					set: false,
 				},
 			},
 			galleries: {
@@ -48,6 +53,44 @@ export default new Vuex.Store({
 			colSliderStart: null,
 			colEventPoint: null
 		},
+		JSONLayers: {
+			route: {
+				url: 'data/json/route.json',
+				data: null,
+			},
+			speicherXI: {
+				url: 'data/json/speicherXI.json',
+				data: null,
+			},
+			colonies: {
+				url: 'data/json/countries.json',
+				data: null,
+			},
+			cotton: {
+				url: 'data/json/cotton.json',
+				data: null,
+			},
+			coffeeBremen: {
+				url: 'data/json/coffeeBremen.json',
+				data: null,
+			},
+			coffeeWorld: {
+				url: 'data/json/coffeeWorld.json',
+				data: null,
+			},
+			streets: {
+				url: 'data/json/streets.json',
+				data: null,
+			},
+			ports: {
+				url: 'data/json/ports.json',
+				data: null,
+			},
+			river: {
+				url: 'data/json/river.json',
+				data: null,
+			},
+		},
 		content: {
 			object: null,
 			tabs: {},
@@ -60,21 +103,38 @@ export default new Vuex.Store({
 		}
 	},
 	actions: {
-		// * Global Actions
-		fetchScenes(context) {
-			for (let [key, value] of Object.entries(context.state.global.scenes)) {
-				ax.get(value.url)
-					.then(response => response.data)
-					.then(scenes => {
-						const payload = {
-							scenes,
-							key
-						}
-						context.commit("setScenes", payload)
-					})
-					.catch((err) => {
-						console.log(err);
-					});
+		async fetchScenes({ dispatch }) {
+			// Use Object.entries to iterate through the data object
+			const requests = Object.entries(this.state.global.scenes).map(([key, value]) => {
+				const url = value.url;
+				// Dispatch Axios requests for each entry
+				return dispatch('fetchData', { key, url });
+			});
+
+			// Wait for all Axios requests to complete
+			await Promise.all(requests)
+
+			if (isValidUUID(this.state.route.params.uuid))
+				eventBus.$emit('openScene', this.state.route.params.uuid)
+			// else if (this.state.route.params.uuid) {
+			// 	const feature = this.state.global.scenes.mainScenes.data.features.find(e => e.common_name === this.state.route.params.uuid)
+			// 	console.log(feature);
+			// 	eventBus.$emit('openScene', feature.uuid)
+			// }
+
+
+			// All requests are finished, your state is ready
+			// console.log('All Axios requests completed.');
+		},
+		async fetchData({ commit }, { key, url }) {
+			try {
+				const response = await ax.get(url);
+				// Handle the response as needed, e.g., commit to mutations
+				const fc = response.data
+				commit('setScenes', { key, fc });
+			} catch (error) {
+				// Handle errors here
+				console.error(`Error fetching data for ${key}: ${error.message}`);
 			}
 		},
 		fetchGalleries(context) {
@@ -93,6 +153,26 @@ export default new Vuex.Store({
 					commit('setWeserWaterLevels', response.data)
 				})
 		},
+		async fetchJSONLayers({ commit }) {
+			try {
+				const requests = [];
+
+				for (let key in this.state.JSONLayers) {
+					const response = await ax.get(this.state.JSONLayers[key].url);
+					const fc = response.data
+					commit('setJSONLayers', {key, fc});
+					requests.push(response);
+				}
+
+				// Wait for all Axios requests to complete
+				await Promise.all(requests);
+
+				// console.log('All Axios requests for JSONLayers completed.');
+			} catch (error) {
+				// Handle errors here
+				console.error('Error fetching JSONLayers:', error);
+			}
+		},
 		bottomHeight(context, payload) {
 			context.commit("bottomHeight", payload)
 		},
@@ -136,13 +216,20 @@ export default new Vuex.Store({
 		}
 	},
 	mutations: {
+		setRoute(state, route) {
+			state.route = route;
+		},
 		// * Global Mutations
 		setScenes: (state, payload) => {
-			state.global.scenes[payload.key].data = payload.scenes
+			state.global.scenes[payload.key].data = payload.fc
+			state.global.scenes[payload.key].set = true
 		},
 		setGalleries: (state, payload) => {
 			state.global.galleries.data = payload
 		},
+		setJSONLayers: (state, payload) => {
+			state.JSONLayers[payload.key].data = payload.fc
+		},
 		setWeserWaterLevels: (state, data) => {
 			const features = data.filter((feature) =>
 				feature.agency === "BREMEN" &&
@@ -303,15 +390,24 @@ export default new Vuex.Store({
 		scenes: state => {
 			return state.global.scenes.mainScenes.data
 		},
+		scenesIsSet: state => {
+			return state.global.scenes.mainScenes.set
+		},
 		subScenes: state => {
 			return state.global.scenes.subScenes.data
 		},
+		subScenesIsSet: state => {
+			return state.global.scenes.subScenes.set
+		},
 		galleries: state => {
 			return state.global.galleries.data
 		},
 		waterLevels: state => {
 			return state.global.waterLevels
 		},
+		JSONLayers: state => {
+			return state.JSONLayers
+		},
 		bottomHeight: state => {
 			return state.global.bottomHeight
 		},