From a5aabaa27b1ba3e1407fc8830ff1c4ff34721853 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Wed, 4 Oct 2023 17:20:20 -0400
Subject: [PATCH] updating sensor param

---
 app_vue/src/components/sensorMap.vue       | 5 ++++-
 app_vue/src/components/sensorMapMarker.vue | 1 +
 app_vue/src/stores/sensors_store.js        | 4 +++-
 app_vue/src/utils/mapMarkerHelper.js       | 2 +-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app_vue/src/components/sensorMap.vue b/app_vue/src/components/sensorMap.vue
index 6c76ed1..c3ed205 100644
--- a/app_vue/src/components/sensorMap.vue
+++ b/app_vue/src/components/sensorMap.vue
@@ -167,7 +167,10 @@ onDeactivated(() => {
 
 <style lang="scss" scoped>
 // leaflet css override for mobile views
-
+:deep img.low-opacity {
+  // class from sensorMapMaker
+  opacity: 0.6;
+}
 :deep .leaflet-pane .leaflet-layer {
   // handles map opacity level
   opacity: 0.7 !important;
diff --git a/app_vue/src/components/sensorMapMarker.vue b/app_vue/src/components/sensorMapMarker.vue
index 358056e..6eede71 100644
--- a/app_vue/src/components/sensorMapMarker.vue
+++ b/app_vue/src/components/sensorMapMarker.vue
@@ -67,6 +67,7 @@ function removeBinFromRoute(sensor) {
 
 <template>
   <l-icon
+    :class-name="props.sensor.isFilteredOut ? 'low-opacity' : ''"
     :icon-size="[19, 23]"
     :icon-anchor="[10, 18]"
     :icon-url="getIconUrl(getBinIconName(props.sensor))"
diff --git a/app_vue/src/stores/sensors_store.js b/app_vue/src/stores/sensors_store.js
index 8491bea..a7e17e2 100644
--- a/app_vue/src/stores/sensors_store.js
+++ b/app_vue/src/stores/sensors_store.js
@@ -115,7 +115,9 @@ export const useSensorStore = defineStore('sensors', {
         };
 
         // setting up new property
-        sensor.keepAfterFiltering = fillRangeFilter() && groupFilter() && assetTagFilter() && binTypeFilter() && binVolumeFilter() && materialTypeFilter();
+
+        const keepAfterFiltering = fillRangeFilter() && groupFilter() && assetTagFilter() && binTypeFilter() && binVolumeFilter() && materialTypeFilter();
+        sensor.isFilteredOut = !keepAfterFiltering;
         return sensor;
       });
     }
diff --git a/app_vue/src/utils/mapMarkerHelper.js b/app_vue/src/utils/mapMarkerHelper.js
index 64004b7..08a3a06 100644
--- a/app_vue/src/utils/mapMarkerHelper.js
+++ b/app_vue/src/utils/mapMarkerHelper.js
@@ -10,7 +10,7 @@ const ICON_NAMES = {
 
 export const getBinIconName = (sensor) => {
   const isErrorState = sensor.error;
-  const isFilteredOut = 'keepAfterFiltering' in sensor && !sensor.keepAfterFiltering;
+  const isFilteredOut = sensor.isFilteredOut;
   const isFullState = sensor.fill_level && sensor.fill_level >= 75;
   const isHalfFullState = sensor.fill_level && sensor.fill_level >= 50 && sensor.fill_level < 75;
   const isEmptyState = sensor.fill_level && sensor.fill_level < 50;