removing grayscale icons used and updating count

button-inc · Oct 4, 2023 · 824b361 · 824b361
1 parent a5aabaa
commit 824b361
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 18 deletions.
diff --git a/app_vue/src/assets/images/binMarkerIcons/greyscale-empty-bin.png b/app_vue/src/assets/images/binMarkerIcons/greyscale-empty-bin.png
diff --git a/app_vue/src/assets/images/binMarkerIcons/greyscale-full-bin.png b/app_vue/src/assets/images/binMarkerIcons/greyscale-full-bin.png
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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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) {