IMprove/finish click around between map, placeview, layerview

a-thousand-channels · Oct 30, 2024 · df91e18 · df91e18
1 parent 81533db
commit df91e18
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 46 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -48,10 +48,42 @@ button.close {
     text-decoration: none;
     background: transparent;
   }
-
+h2 {
+  margin: 0 0 1rem 0;
+  line-height: 1.2;
+}
 p {
   margin: 0 0 1rem 0;
+  line-height: 1.5;
+}
+p.small {
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.overlay h2 {
+  font-size: 7vw;
+}
+.overlay p {
+  font-size: 4.5vw;
+}
+.overlay p.small {
+  font-size: 3vw;
 }
+
+@media (min-width: 768px) {
+  .overlay h2 {
+    font-size: 7vw;
+  }
+  .overlay p {
+    font-size: 3vw;
+  }
+}
+.source p {
+  font-style: italic;
+}
+
+
 hr {
   margin: 2rem 0 1.5rem;
   height: 1px;

diff --git a/src/components/LayerInfoView.vue b/src/components/LayerInfoView.vue
@@ -1,39 +1,47 @@
 <template>
     <div class="overlay" v-if="layerData">
-      <h2>{{ layerData.layer.title }}</h2>
-      <p>ID: {{ layerData.layer.id }}</p>
-      <div v-if="layerData.layer.text" v-html="layerData.layer.text"></div>
-
+
       <figure v-if="layerData.layer.image_link">
-            <img :src="layerData.layer.image_link" alt="layerData.layer.title">
+        <img :src="layerData.layer.image_link" alt="layerData.layer.title">
       </figure>
 
-      <h4>Einträge zu {{ layerData.layer.title }}:</h4>
+      <h2 :style="{ 'color': layerStore.layerDarkcolor.toString() }">
+        {{ layerData.layer.title }}
+      </h2>
+      <div v-if="layerData.layer.text" v-html="layerData.layer.text"></div>
       <ul>
         <li v-for="place in layerData.layer.places" :key="place.id">
-          <router-link :to="{ name: 'placeInfo', params: { layerId, placeId: place.id } }">
-            {{ place.date_with_qualifier }}  {{ place.title }} 
+          <router-link :to="{ name: 'placeInfo', params: { layerId: layerId, placeId: place.id } }">
+            {{ place.date_with_qualifier }} {{ place.title }} 
           </router-link>
         </li>
       </ul>
-      <button @click="closeOverlay">Zur Karte</button>
+      <p>
+        <button @click="closeOverlay">Zur Karte</button>
+      </p>
     </div>
     <div v-else class="overlay"><p>Loading...</p></div>
   </template>
 
   <script>
   import { ref, onMounted } from 'vue';
   import { useRouter } from 'vue-router';
+  import { useLayerStore } from '@/stores/layerStore';
   
   export default {
     props: {
       layerId: {
         type: String,
         required: true
-      }
+      },
+      placeId: {
+        type: String,
+        required: true
+      }      
     },
     setup(props) {
       const router = useRouter();
+      const layerStore = useLayerStore();      
       const layerData = ref(null);
   
       const fetchLayerData = async (id) => {
@@ -42,6 +50,10 @@
           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;
+          console.log('layerData', layerData.value);
+          console.log('layerTitle', layerData.value.layer.title);
+          console.log('layerDarkcolor', layerData.value.layer.color);
+          layerStore.setLayerData(layerData.value.layer.title, layerData.value.layer.color, layerData.value.layer.id);
         } catch (error) {
           console.error('Error fetching layer data:', error);
         }
@@ -55,7 +67,7 @@
         router.push({ name: 'home' });
       };
   
-      return { layerData, closeOverlay };
+      return { layerData, layerStore, closeOverlay };
     }
   }
   </script>

diff --git a/src/components/LeafletMap.vue b/src/components/LeafletMap.vue
@@ -27,6 +27,7 @@
 <script>
 import { onMounted, computed, watch, ref } from 'vue'
 import { useRouter } from 'vue-router';
+import { useLayerStore } from '@/stores/layerStore';
 import TimeSlider from './TimeSlider.vue'
 import { summarize } from '@/helpers/summarize'
 import { filter_and_update } from '@/helpers/filter_and_update'
@@ -52,6 +53,7 @@ export default {
     const router = useRouter();
     const map = ref(null)
     const data = ref([]);
+    const layerStore = useLayerStore();    
     const minYear = ref(1900);
     const maxYear = ref(2024);
     // Create Metalayer object
@@ -173,15 +175,15 @@ export default {
       }
     }
     const openLayerInfo = (layerId) => {
-      console.log('openLayerInfo', layerId)
+      console.log('openLayerInfo', layerId )
       router.push({ name: 'layerInfo', params: { layerId: layerId.toString() } });
     };
 
-    const openPlaceInfo = (layerId, layerTitle, layerDarkcolor, placeId) => {
+    const openPlaceInfo = (layerId, placeId) => {
       console.log('openPlaceInfo', layerId, placeId)
       router.push({ 
         name: 'placeInfo', 
-        params: { layerId: layerId.toString(), layerTitle: layerTitle.toString(), layerDarkcolor: layerDarkcolor.toString(), placeId: placeId.toString() } 
+        params: { layerId: layerId.toString(), placeId: placeId.toString() } 
       });
     };
     const markerclusterSettings = {
@@ -393,7 +395,7 @@ export default {
               </p>
               
               <p class="place-dates">${FormatDateRange(place.startdate, place.enddate)}</p>
-              <p class="place-address">${place.location} ${place.address}, ${place.city}</p>
+              <p class="place-address">◼ ${place.location} ${place.address}, ${place.city}</p>
               <h3 title="Place ID ${place.id}">
                 <a href="#" class="place-info" data-layer-id="${layer.id}" data-layer-title="${layer.title}" data-layer-darkcolor="${darkcolor}" data-place-id="${place.id}">
                   ${place.title}
@@ -415,12 +417,17 @@ export default {
               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, layerTitle, layerDarkcolor, placeId);
+              layerStore.setLayerData(layerTitle, layerDarkcolor, layerId);
+              openPlaceInfo(layerId, placeId);
             });
 
             container.querySelector('.layer-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');
+              layerStore.setLayerData(layerTitle, layerDarkcolor, layerId);              
               openLayerInfo(layerId);
             });
           });          

diff --git a/src/components/PlaceView.vue b/src/components/PlaceView.vue
@@ -3,9 +3,9 @@
 <template>
   <div class="overlay" v-if="placeData">
     <button class="close" @click="closeOverlay">&times;</button>
-    <p class="place-layer" :style="{ backgroundColor: layerDarkcolor}">
-      <a href="#" class="layer-info" :data-layer-id="layerId">
-        Layer {{ layerTitle }} {{ layerId }} {{layerDarkcolor}}
+    <p class="place-layer" :style="{ backgroundColor: layerStore.layerDarkcolor }">
+      <a @click="openLayerInfo(layerId)" class="layer-info" :data-layer-id="layerId">
+        {{ placeData.layer_title }} 
       </a>
     </p>
 
@@ -15,44 +15,40 @@
       <p v-if="placeData.subtitle">{{ placeData.subtitle }}</p>
     </header>
 
-    <p><span v-if="placeData.location">{{ placeData.location }}, </span>{{ placeData.city }}</p>
+    <p class="place-location">■ <span v-if="placeData.location">{{ placeData.location }}, </span>{{ placeData.city }}</p>
 
     <p v-html="placeData.teaser"></p>
     <p v-html="placeData.text"></p>
     <hr />
-    <p>Quellen: {{ placeData.source }}</p>
+    <div class="source">
+      <p>Quelle: <span v-if="placeData.source">{{ placeData.source }}</span><span v-else>...</span></p>
+      <p class="small">{{ placeData.layer_title }}: {{placeData.title}}. Heike Schader: Lacune Map, 2024/2025</p>
+    </div>
     <p><button @click="closeOverlay">Zur Karte</button></p>
-    <p><small>Place ID: {{ placeData.id }}, Layer ID: {{ layerId }} {{ layerTitle }}</small></p>
   </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>
+  <p><button @click="closeOverlay">Zur Karte</button></p></div>
 </template>
 
 <script>
 import { ref, onMounted } from 'vue';
+import { useLayerStore } from '@/stores/layerStore';
 import { useRouter } from 'vue-router';
 
 export default {
   props: {
     layerId: {
-      type: String,
-      required: true
-    },
-    layerTitle: {
-      type: String,
-      required: true
-    },
-    layerDarkcolor: {
-      type: String,
-      required: true
-    },
-    placeId: {
-      type: String,
-      required: true
-    }
+        type: String,
+        required: true
+      },
+      placeId: {
+        type: String,
+        required: true
+      }  
   },
   setup(props) {
     const router = useRouter();
+    const layerStore = useLayerStore();
     const placeData = ref(null);
 
     const fetchPlaceData = async (layerId, placeId) => {
@@ -65,16 +61,24 @@ export default {
         console.error('Error fetching place data:', error);
       }
     };
+       
+
 
     onMounted(() => {
       fetchPlaceData(props.layerId, props.placeId);
+
+        
     });
 
+    const openLayerInfo = (layerId) => {
+        console.log('openLayerInfo', layerId )
+        router.push({ name: 'layerInfo', params: { layerId: layerId.toString() } });
+      };  
     const closeOverlay = () => {
       router.push({ name: 'home' });
     };
 
-    return { placeData, closeOverlay };
+    return { placeData, layerStore, closeOverlay, openLayerInfo };
   }
 }
 </script>
@@ -91,4 +95,21 @@ export default {
     color: white;
     padding: 48px 18px;
   }
+  p.place-location {
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 3vw;
+  }
+  p.place-layer {
+    display: inline-block;
+    background-color: lightsalmon;
+    padding: 2px 11px;
+    margin: 0 0 6px -11px;
+    border-radius: 2px;
+    color: white;
+    font-weight: bold;
+  }  
+  p.place-layer a {
+    color: white;
+    text-decoration: none;
+  }
 </style>
diff --git a/src/router/index.js b/src/router/index.js
@@ -31,7 +31,12 @@ const router = createRouter({
       path: '/layer/:layerId/place/:placeId', 
       name: 'placeInfo', 
       component: PlaceView,
-      props: true
+      props: route => ({
+        layerId: route.params.layerId,
+        placeId: route.params.placeId,
+        layerTitle: route.params.layerTitle,
+        layerDarkcolor: route.params.layerDarkcolor
+      })
     }
   ]
 })

diff --git a/src/stores/layerStore.js b/src/stores/layerStore.js
@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia';
+
+export const useLayerStore = defineStore('layerStore', {
+  state: () => ({
+    layerId: '',
+    layerTitle: '',
+    layerDarkcolor: '',
+    placeId: ''
+  }),
+  actions: {
+    setLayerData(title, darkcolor, placeId) {
+      this.layerTitle = title;
+      this.layerDarkcolor = darkcolor;
+      this.placeId = placeId;
+    }
+  }
+});
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
@@ -11,13 +11,14 @@
       <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><strike>Layer Infoseite mit Bild (verlinkt aus den Popups)</strike></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>In Arbeit: Inhaltseite zu einem Orte (Link aus den Popups)</li>
+
+      <li>Icon für/anstatt des Hinweis (Recherche)</li>
+      <li>Filter nach den beiden Kategorien Recherche oder Bericht</li>
       <li>Impressum/Datenschutz/Credits Seite</li>
+      <li>Historical Maps 20er, 30er etc</li>
     </ul>
 
     <p>Vielleicht einen Tick später</p>