Introducing layerinfo and placeinfo with router setup

a-thousand-channels · Sep 9, 2024 · 5bf4799 · 5bf4799
1 parent 8e4de4f
commit 5bf4799
Show file tree

Hide file tree

Showing 5 changed files with 233 additions and 6 deletions.
diff --git a/src/components/LayerInfoView.vue b/src/components/LayerInfoView.vue
@@ -0,0 +1,84 @@
+<template>
+    <div class="overlay" v-if="layerData">
+      <h2>{{ layerData.layer.title }}</h2>
+      <p>ID: {{ layerData.layer.id }}</p>
+      <div v-if="layerData.layer.text">{{ layerData.layer.text }}</div>
+
+        <figcaption v-if="layerData.layer.image_link">
+            <img :src="layerData.layer.image_link" alt="layerData.layer.title">
+        </figcaption>
+
+
+
+
+
+      <h4>Places in this layer:</h4>
+      <ul>
+        <li v-for="place in layerData.layer.places" :key="place.id">
+          <router-link :to="{ name: 'placeInfo', params: { layerId, placeId: place.id } }">
+            {{ place.title }}
+          </router-link>
+        </li>
+      </ul>
+      <button @click="closeOverlay">Close</button>
+    </div>
+    <div v-else class="overlay"><p>Loading...</p></div>
+  </template>
+
+  <script>
+  import { ref, onMounted } from 'vue';
+  import { useRouter } from 'vue-router';
+  
+  export default {
+    props: {
+      layerId: {
+        type: String,
+        required: true
+      }
+    },
+    setup(props) {
+      const router = useRouter();
+      const layerData = ref(null);
+  
+      const fetchLayerData = async (id) => {
+        try {
+          // Replace with your actual API call
+          const response = await fetch(`https://orte-backend.a-thousand-channels.xyz/public/maps/histoprojekt-hamburg/layers/${id}`);
+          const data = await response.json();
+          layerData.value = data;
+        } catch (error) {
+          console.error('Error fetching layer data:', error);
+        }
+      };
+  
+      onMounted(() => {
+        fetchLayerData(props.layerId);
+      });
+  
+      const closeOverlay = () => {
+        router.push({ name: 'home' });
+      };
+  
+      return { layerData, closeOverlay };
+    }
+  }
+  </script>
+
+  <style scoped>
+  .overlay {
+    position: fixed;
+    overflow: scroll;
+    top: 5vh;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 48px 18px;
+  }
+  .overlay img {
+    width: 100%;
+    max-width: 300px;
+    height: auto;
+  }
+  </style>
diff --git a/src/components/LeafletMap.vue b/src/components/LeafletMap.vue
@@ -26,6 +26,7 @@
 
 <script>
 import { onMounted, computed, watch, ref } from 'vue'
+import { useRouter } from 'vue-router';
 import TimeSlider from './TimeSlider.vue'
 import { summarize } from '@/helpers/summarize'
 import { filter_and_update } from '@/helpers/filter_and_update'
@@ -48,6 +49,7 @@ export default {
     TimeSlider
   },
   setup() {
+    const router = useRouter();
     const map = ref(null)
     const data = ref([]);
     const minYear = ref(1900);
@@ -170,6 +172,18 @@ export default {
         map.value.setView(defaultCenter, defaultZoom)
       }
     }
+    const openLayerInfo = (layerId) => {
+      console.log('openLayerInfo', layerId)
+      router.push({ name: 'layerInfo', params: { layerId: layerId.toString() } });
+    };
+
+    const openPlaceInfo = (layerId, placeId) => {
+      console.log('openPlaceInfo', layerId, placeId)
+      router.push({ 
+        name: 'placeInfo', 
+        params: { layerId: layerId.toString(), placeId: placeId.toString() } 
+      });
+    };
     const markerclusterSettings = {
       maxClusterRadius: 0,
       showCoverageOnHover: false,
@@ -372,14 +386,38 @@ export default {
           
           
           const popupContent = `
-              <p class="place-layer" style="background-color: ${darkcolor}">${layer.title}</p>
+              <p class="place-layer" style="background-color: ${darkcolor}">
+                <a href="#" class="layer-info" data-layer-id="${layer.id}">
+                  ${layer.title}
+                </a>
+              </p>
+              
               <p class="place-dates">${FormatDateRange(place.startdate, place.enddate)}</p>
               <p class="place-address">${place.location} ${place.address}, ${place.city}</p>
               <h3 title="Place ID ${place.id}">${place.title}</h3>
               <p>${place.subtitle}</p>
               <p>${place.teaser}</p>
+              <p><a href="#" class="place-info" data-layer-id="${layer.id}" data-place-id="${place.id}">Mehr</a>
             `
           marker.bindPopup(popupContent)
+
+          marker.on('popupopen', (e) => {
+            const popup = e.popup;
+            const container = popup.getElement();
+
+            container.querySelector('.place-info').addEventListener('click', (event) => {
+              event.preventDefault();
+              const layerId = event.target.getAttribute('data-layer-id');
+              const placeId = event.target.getAttribute('data-place-id');
+              openPlaceInfo(layerId, placeId);
+            });
+
+            container.querySelector('.layer-info').addEventListener('click', (event) => {
+              event.preventDefault();
+              const layerId = event.target.getAttribute('data-layer-id');
+              openLayerInfo(layerId);
+            });
+          });          
           layer_group.addLayer(marker)
         })
 
@@ -510,6 +548,10 @@ h3 {
   color: white;
   font-weight: bold;
 }
+#map.leaflet-container .leaflet-popup-content p.place-layer a {
+  color: white;
+  text-decoration: none;
+}
 #map.leaflet-container .leaflet-popup-content p.place-dates {
   margin: 0;
   font-weight: bold;

diff --git a/src/components/PlaceView.vue b/src/components/PlaceView.vue
@@ -0,0 +1,72 @@
+
+
+<template>
+  <div class="overlay" v-if="placeData">
+    <h2>{{ placeData.name }}</h2>
+    <p>Place ID: {{ placeData.id }}</p>
+    <p>Layer ID: {{ layerId }}</p>
+    <p>Subtitle: {{ place.subtitle }}</p>
+    <p>Teaser: {{ place.teaser }}</p>
+    <p>Description: {{ place.text }}</p>
+    <p>Source: {{ place.source }}</p>
+    <button @click="closeOverlay">Close</button>
+  </div>
+  <div v-else class="overlay"><p>... (Infos zu einem einzelnen Orte können derzeit noch nicht angezeigt werden.)</p><button @click="closeOverlay">Close</button></div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+export default {
+  props: {
+    layerId: {
+      type: String,
+      required: true
+    },
+    placeId: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const router = useRouter();
+    const placeData = ref(null);
+
+    const fetchPlaceData = async (layerId, placeId) => {
+      try {
+        // Replace with your actual API call
+        const response = await fetch(`https://api.example.com/layer/${layerId}/place/${placeId}`);
+        const data = await response.json();
+        placeData.value = data;
+      } catch (error) {
+        console.error('Error fetching place data:', error);
+      }
+    };
+
+    onMounted(() => {
+      fetchPlaceData(props.layerId, props.placeId);
+    });
+
+    const closeOverlay = () => {
+      router.push({ name: 'home' });
+    };
+
+    return { placeData, closeOverlay };
+  }
+}
+</script>
+
+<style scoped>
+  .overlay {
+    position: fixed;
+    overflow: scroll;
+    top: 5vh;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 48px 18px;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
@@ -1,6 +1,8 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '@/views/HomeView.vue'
 import AboutView from '@/views/AboutView.vue'
+import LayerInfoView from '@/components/LayerInfoView.vue';
+import PlaceView from '@/components/PlaceView.vue';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -14,6 +16,22 @@ const router = createRouter({
       path: '/about',
       name: 'about',
       component: AboutView
+    },
+    { path: '/layer/:id', 
+      name: 'layer', 
+      component: LayerInfoView 
+    },
+    { 
+      path: '/layer/:layerId', 
+      name: 'layerInfo', 
+      component: LayerInfoView,
+      props: true
+    },
+    { 
+      path: '/layer/:layerId/place/:placeId', 
+      name: 'placeInfo', 
+      component: PlaceView,
+      props: true
     }
   ]
 })

diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
@@ -4,15 +4,26 @@
     <p>Credits/Impressum?</p>
     <hr />
     <h2>TODO</h2>
-    <p>Was noch gemacht werden muss:</p>
+    <p>Was erledigt ist, in Arbeit oder noch gemacht werden muss:</p>
     <ul>
       <li><strike>Timeslider Design</strike></li>
       <li><strike>Clusterfärbung nach den Markern dieses Clusters</strike></li>
-      <li>Timeslider Funktionalität</li>
-      <li>Kartenfehler fixen</li>
-      <li>Relations einbauen</li>
+      <li><strike>Kartenfehler/Clusterprobleme fixen</strike></li>
+      <li><strike>Eigenen Kartenhintergrund einbauen</strike></li>
+      <li><strike></strike></li>
+
+      <li>Icon für (Recherche)</li>
+      <li>Filter nach Recherche oder Bericht</li>
+      <li>In Arbeit: Timeslider Funktionalität</li>
+      <li>In Arbeit: Layer Infoseite mit Bild (verlinkt aus den Popups)</li>
       <li>Contentseiten (link aus den Popups)</li>
-      <li>Bilder</li>
+      <li>Impressum/Datenschutz/Credits Seite</li>
+    </ul>
+
+    <p>Vielleicht einen Tick später</p>
+    <ul>
+      <li>Relations einbauen. Einblendung bei Marker click?</li>
+      <li>OpenGraph</li>
     </ul>
   </div>
 </template>