From 824b361641b1958720e9177977e5f788a7fdc6e0 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Wed, 4 Oct 2023 17:34:54 -0400
Subject: [PATCH] removing grayscale icons used and updating count

---
 .../binMarkerIcons/greyscale-empty-bin.png      | Bin 380 -> 0 bytes
 .../binMarkerIcons/greyscale-full-bin.png       | Bin 397 -> 0 bytes
 .../binMarkerIcons/greyscale-half-full-bin.png  | Bin 395 -> 0 bytes
 app_vue/src/components/sensorMap.vue            |   4 ++--
 app_vue/src/components/sensorSideBarFilters.vue |  10 +++++-----
 app_vue/src/components/sensorSideBarRoutes.vue  |   2 +-
 app_vue/src/stores/sensors_store.js             |   5 +++++
 app_vue/src/utils/mapMarkerHelper.js            |  16 ++++++----------
 8 files changed, 19 insertions(+), 18 deletions(-)
 delete mode 100644 app_vue/src/assets/images/binMarkerIcons/greyscale-empty-bin.png
 delete mode 100644 app_vue/src/assets/images/binMarkerIcons/greyscale-full-bin.png
 delete mode 100644 app_vue/src/assets/images/binMarkerIcons/greyscale-half-full-bin.png

diff --git a/app_vue/src/assets/images/binMarkerIcons/greyscale-empty-bin.png b/app_vue/src/assets/images/binMarkerIcons/greyscale-empty-bin.png
deleted file mode 100644
index dce3e3984f9c37121c57a74c2ec052b24514ef0d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 380
zcmV-?0fYXDP)<h;3K|Lk000e1NJLTq000&M000~a1^@s6WiL-%00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0TD?=K~#7F?UvDP
zgD?<=|8p3iBQOftpnW6;Mcp8sAk75r22BK^k0ldyg^a)myrXjcV+0RX6Cp|?MdEw$
zolp1MvMt{U&ah9CXNatE0Rf&CQS^Ey2D~RpP>U?-_-#NN+s9>&%qhDZk-`|W3B$0E
zEX(e-u0Jp$wd&kZbd8ZQA}=0P53~=s72M@zY5LiCQZB50zyS7X`qo}PU&`D&8GHeO
zi>ekFib$ZUe(M_i6O-^HJPA+2eeiyp<TtwIkGDiWwl<0$e@<R^$6u;BS1iy2naz&9
zh2uERIpp{Qjj(FT3UEiuXNge^LAx~9XSg$FqcL8U7TI;eRaLFH-p=iOD9mM}va!~#
aPVP6HLt0jCbDjJE0000<MNUMnLSTXt+n197

diff --git a/app_vue/src/assets/images/binMarkerIcons/greyscale-full-bin.png b/app_vue/src/assets/images/binMarkerIcons/greyscale-full-bin.png
deleted file mode 100644
index 2f61ada950887abeaf3bc64d49bea63f5704dee8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 397
zcmV;80doF{P)<h;3K|Lk000e1NJLTq000&M000~a1^@s6WiL-%00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0U}96K~#7F?Uv1P
zgD?<<-^vt_5-0_CkQ^~)oD!T099NKZka)mw46Yz9!6m2!?hM+j#lXRXJsN@!p5Z&d
zu9kg5KO-&S3i~8^2hj#MAmDAWTz+1O0eO-HhG->@-v+p`eca|GIc1kaq?J<JFbp+i
zS@z7v{9r^3^IVDO1|y@0K0GiV#6I9ru#1<a>2Kpvxrm|{3}Bz8U+v<{PMLdWLv}!5
zqs$sZAqtq;Z(XnNn>^107~{hQV{{nD$IIqkVXo^}8N~`N5Pi$@c-gFQCnn)ZcoLq3
zUFbdCYUV<E)Np`ivy-!M9LI&c3jBjcn7Nd5^+_yWt{BD;xJ$EjhMi+6G{(E7iFTcE
rRaI;0Z)g8}D3U9M$~KCk_1XOcZS!MszB)cP00000NkvXXu0mjfOMIV4

diff --git a/app_vue/src/assets/images/binMarkerIcons/greyscale-half-full-bin.png b/app_vue/src/assets/images/binMarkerIcons/greyscale-half-full-bin.png
deleted file mode 100644
index b37c402ebe785e021679a227fa049c2e1cf9a53f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 395
zcmV;60d)R}P)<h;3K|Lk000e1NJLTq000&M000~a1^@s6WiL-%00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0U$|4K~#7F?Uuo9
zgHQ~He?J(YBQQcoAREvlyr8U*PLO7Tc7ry0gdR&K=n5Hu5xAq`nup**5<O9Rh{Sin
z=E=ViHrRwK9F2Ja(GE8t;5k{Z->#eipT>j@(MFu0Kj6*|aGSHlR6`6=sg&Bsaa>ZK
z=Mgu}7iOekUMUgXVP+K3s}JUr*eBczws?7#eRm#JiPle;z%k3-`{GNdto+uH4hZcj
zbBU=Ch0GlEuEIaD2rt58{7W~DF_C0^gahPx=OjrACt;5$l8<Hs2jnOAA(xTxQoKcY
z%*A&5VJ;+N2?yFfb{0<4wC&3Rf1nd)u4Do{h!x0)VN8LCFuP~icPxv>d{dg}FbLOm
py_I|i`{YxRSXor|TI+4={sLdWUsg`#Ew}&x002ovPDHLkV1mF{ok;)y

diff --git a/app_vue/src/components/sensorMap.vue b/app_vue/src/components/sensorMap.vue
index c3ed205..1db37ad 100644
--- a/app_vue/src/components/sensorMap.vue
+++ b/app_vue/src/components/sensorMap.vue
@@ -168,8 +168,8 @@ onDeactivated(() => {
 <style lang="scss" scoped>
 // leaflet css override for mobile views
 :deep img.low-opacity {
-  // class from sensorMapMaker
-  opacity: 0.6;
+  // class from sensorMapMaker that handles filtered out bins opacity
+  opacity: 0.2;
 }
 :deep .leaflet-pane .leaflet-layer {
   // handles map opacity level
diff --git a/app_vue/src/components/sensorSideBarFilters.vue b/app_vue/src/components/sensorSideBarFilters.vue
index a973114..50cbc94 100644
--- a/app_vue/src/components/sensorSideBarFilters.vue
+++ b/app_vue/src/components/sensorSideBarFilters.vue
@@ -12,7 +12,7 @@ const routeStore = useRouteStore();
 
 // sensor store
 const sensorStore = useSensorStore();
-const { sensors, getAllGroupOptions, getAllAssetTags, getAllBinTypes, getAllBinVolumes, getAllMaterialTypes } = storeToRefs(sensorStore);
+const { getAllGroupOptions, getAllAssetTags, getAllBinTypes, getAllBinVolumes, getAllMaterialTypes, getRoutableSensors } = storeToRefs(sensorStore);
 
 // component reactive variables
 const state = reactive({
@@ -27,7 +27,7 @@ const state = reactive({
   binType: [],
   binVolume: [],
   materialType: [],
-  totalSensors: 0,
+  totalSensorsShown: 0,
   showFillLabel: false,
   isCollapsed: false,
   filtersUsedMap: {
@@ -41,8 +41,8 @@ const state = reactive({
 });
 
 // watching for store state updates and updating component variables
-watch(sensors, () => {
-  state.totalSensors = sensorStore.getTotalSensors;
+watch(getRoutableSensors, () => {
+  state.totalSensorsShown = sensorStore.getRoutableSensors.length || 0;
 });
 
 watch(getAllGroupOptions, () => {
@@ -266,7 +266,7 @@ function getFilterCount() {
     </section>
 
     <div class="mb-6">
-      <span class="font-weight-bold">Result: {{ state.totalSensors }} bin{{ state.totalSensors > 1 ? 's' : '' }}</span>
+      <span class="font-weight-bold">Result: {{ state.totalSensorsShown }} bin{{ state.totalSensorsShown > 1 ? 's' : '' }}</span>
       displayed on map
     </div>
   </section>
diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index 654939d..038cc44 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -43,7 +43,7 @@ watch(getHasMappedStartEnd, () => {
 
 async function findRouteClicked() {
   state.isLoadingGoogApi = true;
-  routeStore.setSelectedRouteList(sensorStore.sensors); // store current displayed sensors into route list
+  routeStore.setSelectedRouteList(sensorStore.getRoutableSensors); // store current displayed sensors into route list
 
   if (sensorStore.getTotalSensors === 1) {
     await routeStore.googUpdateRouteStats();
diff --git a/app_vue/src/stores/sensors_store.js b/app_vue/src/stores/sensors_store.js
index a7e17e2..3a5d83a 100644
--- a/app_vue/src/stores/sensors_store.js
+++ b/app_vue/src/stores/sensors_store.js
@@ -14,6 +14,11 @@ export const useSensorStore = defineStore('sensors', {
     getSensors({ sensors }) {
       return sensors;
     },
+    getRoutableSensors({ sensors }) {
+      return sensors.filter((sensor) => {
+        return !sensor.isFilteredOut;
+      });
+    },
     getTotalSensors({ sensors }) {
       return Object.keys(sensors).length;
     },
diff --git a/app_vue/src/utils/mapMarkerHelper.js b/app_vue/src/utils/mapMarkerHelper.js
index 08a3a06..da6907c 100644
--- a/app_vue/src/utils/mapMarkerHelper.js
+++ b/app_vue/src/utils/mapMarkerHelper.js
@@ -1,28 +1,24 @@
 const ICON_NAMES = {
-  GREYSCALE_FULL_BIN: 'greyscale-full-bin',
   FULL_BIN: 'full-bin',
-  GREYSCALE_HALF_FULL_BIN: 'greyscale-half-full-bin',
   HALF_FULL_BIN: 'half-full-bin',
-  GREYSCALE_EMPTY_BIN: 'greyscale-empty-bin',
   EMPTY_BIN: 'empty-bin',
   ERROR_BIN: 'error-bin'
+  // GREYSCALE_EMPTY_BIN: 'greyscale-empty-bin',
+  // GREYSCALE_HALF_FULL_BIN: 'greyscale-half-full-bin',
+  // GREYSCALE_FULL_BIN: 'greyscale-full-bin'
 };
 
+// const IS_FILTERED_OUT = 'isFilteredOut';
+
 export const getBinIconName = (sensor) => {
   const isErrorState = sensor.error;
-  const isFilteredOut = sensor.isFilteredOut;
+  // const isFilteredOut = sensor[IS_FILTERED_OUT];
   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;
 
   if (isErrorState) {
     return ICON_NAMES.ERROR_BIN;
-  } else if (isFilteredOut && isFullState) {
-    return ICON_NAMES.GREYSCALE_FULL_BIN;
-  } else if (isFilteredOut && isHalfFullState) {
-    return ICON_NAMES.GREYSCALE_HALF_FULL_BIN;
-  } else if (isFilteredOut && isEmptyState) {
-    return ICON_NAMES.GREYSCALE_EMPTY_BIN;
   } else if (isFullState) {
     return ICON_NAMES.FULL_BIN;
   } else if (isHalfFullState) {