From 6e47100bb3ebfe80558a26d2f5aefb9cf6bcce73 Mon Sep 17 00:00:00 2001
From: rrr-marble <rrr@marble.lan>
Date: Sat, 6 Aug 2022 01:37:12 +0300
Subject: [PATCH] add: map click filter

---
 frontend/src/components/MapComponent.vue   | 27 ++++++++++++++++------
 frontend/src/components/OverviewScreen.vue |  2 +-
 frontend/src/views/FrontView.vue           |  4 ++--
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/MapComponent.vue b/frontend/src/components/MapComponent.vue
index 26fa242..23cedd3 100644
--- a/frontend/src/components/MapComponent.vue
+++ b/frontend/src/components/MapComponent.vue
@@ -10,9 +10,10 @@ import maplibregl from "maplibre-gl";
 import { markRaw, onMounted, onUnmounted, shallowRef, } from "vue";
 export default {
     name: "map-component",
-    setup() {
+    setup(_props, context) {
         const mapContainer = shallowRef(null);
         const map = shallowRef(null);
+        let currentFadr = {};
 
         onMounted(() => {
             const apiKey = "pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";
@@ -83,17 +84,29 @@ export default {
                 // Change the cursor style as a UI indicator.
                 map.value.getCanvas().style.cursor = 'pointer';
 
+
+            });
+
+            map.value.on('mouseleave', 'samples-layer', (e) => {
+                map.value.getCanvas().style.cursor = '';
+                popup.remove();
+            });
+
+            map.value.on('click', 'samples-layer', (e) => {
                 // Populate the popup and set its coordinates
                 // based on the feature found.
                 popup
                     .setLngLat(e.lngLat)
                     .setHTML(JSON.stringify(e.features[0].properties))
                     .addTo(map.value);
-            });
-
-            map.value.on('mouseleave', 'samples-layer', (e) => {
-                map.value.getCanvas().style.cursor = '';
-                popup.remove();
+                let fadr = {
+                    "fadr": e.features[0].properties["fadr"]
+                };
+                fadr = currentFadr["fadr"] == fadr["fadr"] ?
+                    { "fadr": "Any" } :
+                    fadr;
+                currentFadr = fadr;
+                context.emit('mapClick', fadr);
             });
         });
 
@@ -104,7 +117,7 @@ export default {
 
 
         return {
-            map, mapContainer
+            map, mapContainer, currentFadr
         }
     }
 }
diff --git a/frontend/src/components/OverviewScreen.vue b/frontend/src/components/OverviewScreen.vue
index 6bc21a7..e366c25 100644
--- a/frontend/src/components/OverviewScreen.vue
+++ b/frontend/src/components/OverviewScreen.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="overview">
         <va-card class="content-container">
-            <map-component />
+            <map-component @mapClick="$emit('mapClick', $event)" />
         </va-card>
         <va-card class="content-container">
             <va-data-table :items="items" :hoverable="true" />
diff --git a/frontend/src/views/FrontView.vue b/frontend/src/views/FrontView.vue
index c368bbe..d0312f6 100644
--- a/frontend/src/views/FrontView.vue
+++ b/frontend/src/views/FrontView.vue
@@ -4,7 +4,7 @@
         <div class="central-view">
             <sidebar @filter="applyFilters" />
             <div class="main-view">
-                <overview-screen :items="items" />
+                <overview-screen :items="items" @mapClick="applyFilters" />
             </div>
         </div>
     </div>
@@ -61,7 +61,7 @@ export default {
             };
 
             this.fetchFiltered(this.currentFilters);
-        }
+        },
     },
     created() {
         this.fetchAllItems()