Read place data, print out, add some layer data

a-thousand-channels · Oct 18, 2024 · cd6f665 · cd6f665
1 parent 5bf4799
commit cd6f665
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 16 deletions.
diff --git a/src/components/LeafletMap.vue b/src/components/LeafletMap.vue
@@ -177,11 +177,11 @@ export default {
       router.push({ name: 'layerInfo', params: { layerId: layerId.toString() } });
     };
 
-    const openPlaceInfo = (layerId, placeId) => {
+    const openPlaceInfo = (layerId, layerTitle, layerDarkcolor, placeId) => {
       console.log('openPlaceInfo', layerId, placeId)
       router.push({ 
         name: 'placeInfo', 
-        params: { layerId: layerId.toString(), placeId: placeId.toString() } 
+        params: { layerId: layerId.toString(), layerTitle: layerTitle.toString(), layerDarkcolor: layerDarkcolor.toString(), placeId: placeId.toString() } 
       });
     };
     const markerclusterSettings = {
@@ -397,7 +397,7 @@ export default {
               <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>
+              <p><a href="#" class="place-info" data-layer-id="${layer.id}" data-layer-title="${layer.title}" data-layer-darkcolor="${darkcolor}" data-place-id="${place.id}">Mehr</a>
             `
           marker.bindPopup(popupContent)
 
@@ -408,8 +408,10 @@ export default {
             container.querySelector('.place-info').addEventListener('click', (event) => {
               event.preventDefault();
               const layerId = event.target.getAttribute('data-layer-id');
+              const layerTitle = event.target.getAttribute('data-layer-title');
+              const layerDarkcolor = event.target.getAttribute('data-layer-darkcolor');
               const placeId = event.target.getAttribute('data-place-id');
-              openPlaceInfo(layerId, placeId);
+              openPlaceInfo(layerId, layerTitle, layerDarkcolor, placeId);
             });
 
             container.querySelector('.layer-info').addEventListener('click', (event) => {

diff --git a/src/components/PlaceView.vue b/src/components/PlaceView.vue
@@ -2,16 +2,28 @@
 
 <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>
+    <button @click="closeOverlay">&times;</button>
+    <p class="place-layer" style="background-color: ${layerDarkcolor}">
+      <a href="#" class="layer-info" data-layer-id="${layerId}">
+        ${layerTitle}
+      </a>
+    </p>
+
+    <p>{{ placeData.startdate }}, {{ placeData.enddate }}</p>
+    <header>
+      <h2>{{ placeData.title }}</h2>
+      <p v-if="placeData.subtitle">Subtitle: {{ placeData.subtitle }}</p>
+    </header>
+
+    <p>Location: {{ placeData.location }}, {{ placeData.city }}</p>
+
+    <p>Teaser: {{ placeData.teaser }}</p>
+    <p>Description: {{ placeData.text }}</p>
+    <p>Source: {{ placeData.source }}</p>
+    <a @click="closeOverlay">Zur Karte</a>
+    <p>Place ID: {{ placeData.id }}, Layer ID: {{ layerId }}</p>
   </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>
+  <div v-else class="overlay"><p>... (Infos zu einem einzelnen Orte können derzeit noch nicht angezeigt werden.)</p><p><a @click="closeOverlay">Zur Karte</a></p></div>
 </template>
 
 <script>
@@ -24,6 +36,14 @@ export default {
       type: String,
       required: true
     },
+    layerTitle: {
+      type: String,
+      required: true
+    },
+    layerDarkcolor: {
+      type: String,
+      required: true
+    },
     placeId: {
       type: String,
       required: true
@@ -36,16 +56,16 @@ export default {
     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 response = await fetch(`https://orte-backend.a-thousand-channels.xyz/public/maps/histoprojekt-hamburg/layers/${layerId}/places/${placeId}`);
         const data = await response.json();
-        placeData.value = data;
+        placeData.value = data.place;
       } catch (error) {
         console.error('Error fetching place data:', error);
       }
     };
 
     onMounted(() => {
-      fetchPlaceData(props.layerId, props.placeId);
+      fetchPlaceData(props.layerId, props.layerTitle, props.layerDarkcolor, props.placeId);
     });
 
     const closeOverlay = () => {