Merge pull request #101 from button-inc/mk-filtered

Mk filtered

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 that handles filtered out bins opacity
+  opacity: 0.2;
+}
 :deep .leaflet-pane .leaflet-layer {
   // handles map opacity level
   opacity: 0.7 !important;

app_vue/src/components/sensorMapMarker.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { reactive, watch, onBeforeMount } from 'vue';
 import { LPopup, LIcon } from '@vue-leaflet/vue-leaflet';
 import { useRouteStore } from '@/stores/route_store';
 import { storeToRefs } from 'pinia';
-import { getIconAndProgressColor, getMaterialTypeIconURL } from '@/utils/mapMarkerHelper';
+import { getBinIconName, getMaterialTypeIconURL, getVuetifyLinearProgressColor, getIconUrl } from '@/utils/mapMarkerHelper';
 import { getDate12HrTime } from '@/utils/formattingHelper';
 
 const props = defineProps({
@@ -14,43 +14,62 @@ const props = defineProps({
 });
 
 // set html element variables
-const fillPercent = ref(Math.round(props.sensor.fill_level || 0));
-const { iconUrl, linearProgressColor } = getIconAndProgressColor(props.sensor);
-const isAlreadyInRoute = ref(false);
-const isRouteCreated = ref(false);
+const state = reactive({
+  linearProgressColor: '',
+  fillPercent: 0,
+  isAlreadyInRoute: false,
+  showAddRemoveFromRoute: false
+});
 
 // route store
 const routeStore = useRouteStore();
 const { getSelectedRouteList, getShouldDisplayRoute } = storeToRefs(routeStore);
 
+onBeforeMount(() => {
+  const binIconName = getBinIconName(props.sensor);
+  state.linearProgressColor = getVuetifyLinearProgressColor(binIconName);
+  state.fillPercent = Math.round(props.sensor.fill_level || 0);
+});
+
 // watch for changes in stored sensor route array (ie. when a sensor gets added or removed)
 watch(
   getSelectedRouteList,
   () => {
-    isAlreadyInRoute.value = routeStore.isAlreadyInRoute(props.sensor);
+    state.isAlreadyInRoute = isAlreadyInRoute(props.sensor);
   },
   { deep: true }
 );
 
 watch(
   getShouldDisplayRoute,
   () => {
-    isRouteCreated.value = routeStore.getShouldDisplayRoute;
+    const routeList = routeStore.getSelectedRouteList;
+    state.showAddRemoveFromRoute = routeStore.getShouldDisplayRoute && routeList.length > 1;
   },
   { deep: true }
 );
 
+function isAlreadyInRoute(sensor) {
+  const selectedRouteList = routeStore.getSelectedRouteList;
+  if (selectedRouteList.length > 1) {
+    return !!selectedRouteList.find((bin) => bin.id === sensor.id);
+  } else if (selectedRouteList.length === 1) {
+    return true;
+  }
+  return false;
+}
+
 function addBinToRoute(sensor) {
   // only add to route if not already added
-  if (isAlreadyInRoute.value === false) {
+  if (state.isAlreadyInRoute === false) {
     routeStore.addSensorToRoute(sensor);
     routeStore.googOptimizeRoute();
   }
 }
 
 function removeBinFromRoute(sensor) {
   // only remove from route if already added
-  if (isAlreadyInRoute.value === true) {
+  if (state.isAlreadyInRoute === true) {
     routeStore.removeSensorFromRoute(sensor);
     routeStore.googOptimizeRoute();
   }
@@ -59,9 +78,10 @@ function removeBinFromRoute(sensor) {
 
 <template>
   <l-icon
+    :class-name="props.sensor.isFilteredOut ? 'low-opacity' : ''"
     :icon-size="[19, 23]"
     :icon-anchor="[10, 18]"
-    :icon-url="iconUrl"
+    :icon-url="getIconUrl(getBinIconName(props.sensor))"
   />
 
   <l-popup class="popup">
@@ -116,14 +136,14 @@ function removeBinFromRoute(sensor) {
 
       <section class="popup__sidebar">
         <div class="fill-level">
-          <template v-if="fillPercent === null">level not captured</template>
+          <template v-if="!state.fillPercent && state.fillPercent !== 0">level not captured</template>
           <template v-else>
-            <span class="fill-level__percent">{{ fillPercent }}%</span>
+            <span class="fill-level__percent">{{ state.fillPercent }}%</span>
             <v-progress-linear
               class="fill-level__progress-bar"
               style="width: 100px; height: 20px; transform: rotate(270deg); top: unset; left: unset"
-              :model-value="fillPercent"
-              :color="linearProgressColor"
+              :model-value="state.fillPercent"
+              :color="state.linearProgressColor"
               :max="100"
             ></v-progress-linear>
             <div class="fill-level__text">Fill level</div>
@@ -207,20 +227,20 @@ function removeBinFromRoute(sensor) {
     <!-- add to route buttons -->
     <section
       class="bin-details__cta-routes"
-      v-if="isRouteCreated"
+      v-if="state.showAddRemoveFromRoute"
     >
       <v-btn
         variant="flat"
         class="mt-2 mb-2"
         color="#191A1C"
-        :disabled="isAlreadyInRoute"
+        :disabled="state.isAlreadyInRoute"
         @click="addBinToRoute(props.sensor)"
       >
         + Add to route
       </v-btn>
       <v-btn
         variant="tonal"
-        v-if="isAlreadyInRoute"
+        v-if="state.isAlreadyInRoute"
         class="mt-2 mb-2"
         @click="removeBinFromRoute(props.sensor)"
       >

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,10 +27,10 @@ const state = reactive({
   binType: [],
   binVolume: [],
   materialType: [],
-  totalSensors: 0,
+  totalSensorsShown: 0,
   showFillLabel: false,
   isCollapsed: false,
-  filterEnabledMap: {
+  filtersUsedMap: {
     fillRange: false,
     group: false,
     assetTag: false,
@@ -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, () => {
@@ -76,9 +76,9 @@ function updateGroupFilter() {
   updateSensorsShown();
 
   if (state.selectedGroup) {
-    state.filterEnabledMap['group'] = true;
+    state.filtersUsedMap['group'] = true;
   } else {
-    state.filterEnabledMap['group'] = false;
+    state.filtersUsedMap['group'] = false;
   }
 }
 
@@ -87,9 +87,9 @@ function updateAssetTagFilter() {
   updateSensorsShown();
 
   if (state.selectedAssetTag.length > 0) {
-    state.filterEnabledMap['assetTag'] = true;
+    state.filtersUsedMap['assetTag'] = true;
   } else {
-    state.filterEnabledMap['assetTag'] = false;
+    state.filtersUsedMap['assetTag'] = false;
   }
 }
 
@@ -98,9 +98,9 @@ function updateBinTypeFilter() {
   updateSensorsShown();
 
   if (state.selectedBinType.length > 0) {
-    state.filterEnabledMap['binType'] = true;
+    state.filtersUsedMap['binType'] = true;
   } else {
-    state.filterEnabledMap['binType'] = false;
+    state.filtersUsedMap['binType'] = false;
   }
 }
 
@@ -109,9 +109,9 @@ function updateBinVolumeFilter() {
   updateSensorsShown();
 
   if (state.selectedBinVolume) {
-    state.filterEnabledMap['binVolume'] = true;
+    state.filtersUsedMap['binVolume'] = true;
   } else {
-    state.filterEnabledMap['binVolume'] = false;
+    state.filtersUsedMap['binVolume'] = false;
   }
 }
 
@@ -121,9 +121,9 @@ function updateFillRangeFilter() {
 
   const isInitial = state.selectedFillRange[0] === 0 && state.selectedFillRange[1] === 100;
   if (isInitial) {
-    state.filterEnabledMap['fillRange'] = false;
+    state.filtersUsedMap['fillRange'] = false;
   } else {
-    state.filterEnabledMap['fillRange'] = true;
+    state.filtersUsedMap['fillRange'] = true;
   }
 }
 
@@ -132,9 +132,9 @@ function updateMaterialTypeFilter() {
   updateSensorsShown();
 
   if (state.selectedMaterialType.length > 0) {
-    state.filterEnabledMap['materialType'] = true;
+    state.filtersUsedMap['materialType'] = true;
   } else {
-    state.filterEnabledMap['materialType'] = false;
+    state.filtersUsedMap['materialType'] = false;
   }
 }
 
@@ -149,14 +149,14 @@ function clearFilters() {
   state.selectedFillRange = [0, 100];
   state.selectedMaterialType = [];
 
-  Object.keys(state.filterEnabledMap).forEach((key) => {
-    state.filterEnabledMap[key] = false;
+  Object.keys(state.filtersUsedMap).forEach((key) => {
+    state.filtersUsedMap[key] = false;
   });
 }
 
 function getFilterCount() {
   // returns number of filters in use
-  const truthArr = Object.values(state.filterEnabledMap).filter((isEnabled) => isEnabled);
+  const truthArr = Object.values(state.filtersUsedMap).filter((isEnabled) => isEnabled);
   return truthArr.length;
 }
 </script>
@@ -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>

app_vue/src/components/sensorSideBarRoutes.vue

@@ -10,7 +10,7 @@ import { telusUi } from '@/styles/telusUi';
 // stores
 const routeStore = useRouteStore();
 const sensorStore = useSensorStore();
-const { getShouldDisplayRoute, getHasMappedStartEnd } = storeToRefs(routeStore);
+const { getShouldDisplayRoute, getHasMappedStartEnd, getSelectedRouteList } = storeToRefs(routeStore);
 
 const state = reactive({
   startPointAddress: '',
@@ -20,7 +20,8 @@ const state = reactive({
   shouldDisplayRoute: false,
   drag: false,
   isMapInitialized: false,
-  isLoadingGoogApi: false
+  isLoadingGoogApi: false,
+  selectedRouteList: []
 });
 
 onMounted(() => {
@@ -41,11 +42,16 @@ watch(getHasMappedStartEnd, () => {
   state.isMapInitialized = routeStore.getHasMappedStartEnd;
 });
 
+watch(getSelectedRouteList, () => {
+  state.selectedRouteList = routeStore.getSelectedRouteList;
+});
+
 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) {
+  const routeList = routeStore.getSelectedRouteList;
+  if (routeList.length === 1) {
     await routeStore.googUpdateRouteStats();
   } else {
     await routeStore.googOptimizeRoute();
@@ -77,7 +83,7 @@ function updateEndPoint(value) {
     <!-- route info display -->
     <section v-if="state.shouldDisplayRoute">
       <SensorRouteBlock
-        :selectedRouteList="routeStore.getSelectedRouteList"
+        :selectedRouteList="state.selectedRouteList"
         :startPointAddress="routeStore.getStartPointAddress"
         :endPointAddress="routeStore.getEndPointAddress"
       ></SensorRouteBlock>

app_vue/src/stores/route_store.js

@@ -82,12 +82,6 @@ export const useRouteStore = defineStore('route', {
     setIsRouteGenerated(value) {
       this.shouldDisplayRoute = value;
     },
-    isAlreadyInRoute(sensor) {
-      if (this.getSelectedRouteList.length > 0) {
-        return !!this.getSelectedRouteList.find((bin) => bin.id === sensor.id);
-      }
-      return false;
-    },
     async googUpdateRouteStats() {
       const googResponse = await getOptimizedRouteData(this.getSelectedRouteList, this.startPointAddress, this.endPointAddress, false);
       if (googResponse && googResponse.routes && googResponse.routes[0]) {