zoomto function + icons

src/components/TheEntryForm.vue

@@ -594,7 +594,6 @@ const { map } = useMap();
 const route = useRoute();
 const router = useRouter();
 const { topicHectars } = useTopicIntersections();
-const emit = defineEmits(['schlag']);
 const schlaegeLastModified = ref();
 const { lookup } = useLookup();
 const tempData = ref({ basic: null, programs: null });
@@ -752,7 +751,7 @@ function cancelData() {
 
 watch(schlagInfo, (value) => {
   if (value?.id !== Number(route.params.schlagId)) {
-    tempData.value.basic = schlagInfo.value;
+    tempData.value.basic = JSON.parse(JSON.stringify(schlagInfo.value));
     if (tempData.value.basic) {
       if (tempData.value.programs) {
         if (
@@ -765,9 +764,7 @@ watch(schlagInfo, (value) => {
 
       entry.value.flaechennutzungsart = tempData.value.basic.fnar_code;
       entry.value.flaeche = tempData.value.basic.sl_flaeche_brutto_ha;
-      entry.value.schlaginfo.basic = schlagInfo.value;
-
-      entry.value.extent = tempData.value.basic.extent;
+      entry.value.schlaginfo.basic = JSON.parse(JSON.stringify(schlagInfo.value));
 
       entry.value.jahr = new Date().getFullYear();
 
@@ -778,9 +775,6 @@ watch(schlagInfo, (value) => {
     }
     router.push({ params: { ...route.params, schlagId: value?.id } });
   }
-  if (value && !value.loading) {
-    emit('schlag', true);
-  }
 });
 
 // Area of relevant topics inside the current schlag
@@ -794,7 +788,7 @@ watch(topicHectars, (value) => {
     }
 
     entry.value.flaeche_nitratrisikogebiet = tempData.value.programs.nitrataktionsprogramm;
-    entry.value.schlaginfo.programs = value;
+    entry.value.schlaginfo.programs = JSON.parse(JSON.stringify(value));
 
     entry.value.duengeklasse_grundwasserschutz = '-';
     let currentDuengeklasse = 0;

src/components/TheEntryList.vue

@@ -24,7 +24,14 @@
             >
             <v-col cols="3" class="text-right">
               <v-icon
-                class="mr-2"
+                class="mr-1"
+                size="22"
+                color="grey"
+                icon="mdi-map-marker"
+                @click="zoomTo(i - 1)"
+              />
+              <v-icon
+                class="mr-1"
                 size="22"
                 color="orange"
                 icon="mdi-pencil-circle"
@@ -58,9 +65,23 @@
 </template>
 
 <script setup>
+import { useSchlag } from '../composables/useSchlag.js';
 import { useDataEntries } from '../composables/useDataEntries.js';
+import { watch } from 'vue';
 
 const { allData, emptyEntry, entry } = useDataEntries();
+const { showSchlagParts, removeSchlagParts } = useSchlag();
+
+watch(entry, (value) => {
+  removeSchlagParts();
+  if (!value.schlaginfo?.basic?.parts) {
+    return;
+  }
+  showSchlagParts(value.schlaginfo.basic.parts);
+});
+function zoomTo(nr) {
+  entry.value = JSON.parse(JSON.stringify(allData.value.saved[nr]));
+}
 
 function editEntry(nr) {
   allData.value.current = nr;

src/composables/useDataEntries.js

@@ -23,7 +23,7 @@ import { ref } from 'vue';
  */
 
 /**
- * @typedef dataEntry
+ * @typedef DataEntry
  * @property {number} jahr
  * @property {string} schlagnummer
  * @property {string} feldstuecksname
@@ -80,7 +80,7 @@ export const entry = ref({ ...emptyEntry });
 
 /**
  * @typedef allData
- * @property {Array<dataEntry>} saved
+ * @property {Array<DataEntry>} saved
  * @property {number} current
  * @property {number} datawindow
  */
@@ -97,7 +97,7 @@ export const allData = ref({ saved: [], current: null, datawindow: 0 });
 }
 
 /**
- * @returns {{ allData: import('vue').Ref<allData> , emptyFertilization: fertilization, emptyCulture: culture, emptyEntry: dataEntry, entry: import('vue').Ref<Object> }}
+ * @returns {{ allData: import('vue').Ref<allData> , emptyFertilization: fertilization, emptyCulture: culture, emptyEntry: DataEntry, entry: import('vue').Ref<Object> }}
  */
 export function useDataEntries() {
   return { allData, emptyFertilization, emptyCulture, emptyEntry, entry };

src/composables/useMap.js

@@ -8,7 +8,7 @@ import { apply, applyStyle, getLayer, getSource, renderTransparent } from 'ol-ma
 import { getCenter } from 'ol/extent.js';
 import { shallowRef } from 'vue';
 import VectorTileLayer from 'ol/layer/VectorTile.js';
-import { INITIAL_EXTENT } from '../constants.js';
+import { AGRARATLAS_STYLE_URL, INITIAL_EXTENT } from '../constants.js';
 
 /**
  * @typedef {Object} MapView
@@ -65,7 +65,7 @@ map.on('moveend', () => {
   };
 });
 
-export const mapReady = apply(map, './map/style.json').then(() => {
+export const mapReady = apply(map, AGRARATLAS_STYLE_URL).then(() => {
   const { layers } = map.get('mapbox-style');
   layers.forEach((layer) => {
     const source = getSource(map, layer.source);
@@ -89,7 +89,7 @@ export const filterStyle = mapReady.then(async () => {
     }
   });
   const filterLayer = new VectorTileLayer();
-  await applyStyle(filterLayer, style, 'agrargis', './map/style.json');
+  await applyStyle(filterLayer, style, 'agrargis', AGRARATLAS_STYLE_URL);
   return filterLayer.getStyle();
 });