add: map dots filter

frontend/src/components/MapComponent.vue

@@ -7,17 +7,28 @@
 
 <script>
 import maplibregl from "maplibre-gl";
-import { markRaw, onMounted, onUnmounted, reactive, shallowRef, } from "vue";
+import { markRaw, onMounted, onUnmounted, reactive, shallowRef, watch } from "vue";
 export default {
     name: "map-component",
-    setup(_props, context) {
+    props: {
+        idlist: {
+            type: Array,
+            required: true,
+        }
+    },
+    setup(props, context) {
         const mapContainer = shallowRef(null);
         const map = shallowRef(null);
         let currentFadr = reactive({ "fadr": [] });
 
-        onMounted(() => {
-            const apiKey = "pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";
+        const apiKey = "pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";
 
+
+        watch(()=> [...props.idlist], (_currentValue, _oldValue) => {
+            updateSamplesLayer()
+        });
+
+        const buildMap = () => {
             const initialState = { lng: 37.625, lat: 55.751, zoom: 5 };
 
             map.value = markRaw(new maplibregl.Map({
@@ -77,7 +88,8 @@ export default {
                         ],
                         'circle-opacity': 0.8,
                         'circle-radius': 16
-                    }
+                    },
+                    filter: ["match", ["get", "internal_id"], props.idlist, true, false]
                 });
             });
 
@@ -136,6 +148,36 @@ export default {
 
                 context.emit('mapClick', currentFadr);
             });
+
+        };
+
+        const updateSamplesLayer = () => {
+            map.value.removeLayer('samples-layer');
+
+            map.value.addLayer({
+                    'id': 'samples-layer',
+                    'source': 'samples',
+                    'source-layer': 'public.geodata',
+                    'type': 'circle',
+                    'paint': {
+                        'circle-stroke-width': 1,
+                        'circle-stroke-color': '#FFFFFF',
+                        'circle-color': [
+                            'case',
+                            ['boolean', ['feature-state', 'beenClicked'], false],
+                            '#ffff00',
+                            '#1a9641'
+                        ],
+                        'circle-opacity': 0.8,
+                        'circle-radius': 16
+                    },
+                    filter: ["match", ["get", "internal_id"], props.idlist, true, false]
+                });
+
+        };
+
+        onMounted(() => {
+            buildMap()
         });
 
         onUnmounted(() => {

frontend/src/components/OverviewScreen.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="overview">
         <va-card class="content-container">
-            <map-component @mapClick="$emit('mapClick', $event)" />
+            <map-component v-if="itemIdList.length" :idlist="itemIdList" @mapClick="$emit('mapClick', $event)" />
         </va-card>
         <va-card class="content-container">
             <va-data-table :items="items" :columns="columns" :hoverable="true" :clickable="true" :per-page="perPage"
@@ -39,7 +39,11 @@ export default {
             return (this.perPage && this.perPage !== 0) 
             ? Math.ceil(this.items.length / this.perPage)
             : this.items.length
-        }
+        },
+
+        itemIdList(){
+            return this.items.map(item => item.internal_id)
+        },
     },
 
 }