From b30b686f5ce79d26321572593a6036c38950712a Mon Sep 17 00:00:00 2001 From: monicakochofar Date: Wed, 4 Oct 2023 15:30:19 -0400 Subject: [PATCH 1/7] adding greyscale icons --- .../{alert-bin.png => error-bin.png} | Bin .../binMarkerIcons/greyscale-empty-bin.png | Bin 0 -> 380 bytes .../binMarkerIcons/greyscale-full-bin.png | Bin 0 -> 397 bytes .../greyscale-half-full-bin.png | Bin 0 -> 395 bytes app_vue/src/stores/sensors_store.js | 34 +++---- app_vue/src/utils/mapMarkerHelper.js | 87 ++++++++++-------- 6 files changed, 64 insertions(+), 57 deletions(-) rename app_vue/src/assets/images/binMarkerIcons/{alert-bin.png => error-bin.png} (100%) create mode 100644 app_vue/src/assets/images/binMarkerIcons/greyscale-empty-bin.png create mode 100644 app_vue/src/assets/images/binMarkerIcons/greyscale-full-bin.png create mode 100644 app_vue/src/assets/images/binMarkerIcons/greyscale-half-full-bin.png diff --git a/app_vue/src/assets/images/binMarkerIcons/alert-bin.png b/app_vue/src/assets/images/binMarkerIcons/error-bin.png similarity index 100% rename from app_vue/src/assets/images/binMarkerIcons/alert-bin.png rename to app_vue/src/assets/images/binMarkerIcons/error-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 new file mode 100644 index 0000000000000000000000000000000000000000..dce3e3984f9c37121c57a74c2ec052b24514ef0d GIT binary patch literal 380 zcmV-?0fYXDP)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@-v+p`eca|GIc1kaq?J2Kpvxrm|{3}Bz8U+v<{PMLdWLv}!5 zqs$sZAqtq;Z(XnNn>^107~{hQV{{nD$IIqkVXo^}8N~`N5Pi$@c-gFQCnn)ZcoLq3 zUFbdCYUV#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$l8d{dg}FbLOm py_I|i`{YxRSXor|TI+4={sLdWUsg`#Ew}&x002ovPDHLkV1mF{ok;)y literal 0 HcmV?d00001 diff --git a/app_vue/src/stores/sensors_store.js b/app_vue/src/stores/sensors_store.js index a80645c8..2ecf173f 100644 --- a/app_vue/src/stores/sensors_store.js +++ b/app_vue/src/stores/sensors_store.js @@ -1,4 +1,4 @@ -import { defineStore } from 'pinia' +import { defineStore } from 'pinia'; export const useSensorStore = defineStore('sensors', { state: () => ({ @@ -8,7 +8,7 @@ export const useSensorStore = defineStore('sensors', { selectedAssetTag: [], selectedBinType: [], selectedBinVolume: null, - selectedFillRange: [0,100], + selectedFillRange: [0, 100], selectedMaterialType: [] }), getters: { @@ -19,19 +19,19 @@ export const useSensorStore = defineStore('sensors', { return Object.keys(sensors).length; }, getAllGroupOptions({ allSensors }) { - return [...new Set(allSensors.flatMap(sensor => sensor.group || []))]; + return [...new Set(allSensors.flatMap((sensor) => sensor.group || []))]; }, getAllAssetTags({ allSensors }) { - return [...new Set(allSensors.flatMap(sensor => sensor.asset_tag || []))]; + return [...new Set(allSensors.flatMap((sensor) => sensor.asset_tag || []))]; }, getAllBinTypes({ allSensors }) { - return [...new Set(allSensors.flatMap(sensor => sensor.bin_type || []))]; + return [...new Set(allSensors.flatMap((sensor) => sensor.bin_type || []))]; }, getAllBinVolumes({ allSensors }) { - return [...new Set(allSensors.flatMap(sensor => sensor.bin_volume || []))]; + return [...new Set(allSensors.flatMap((sensor) => sensor.bin_volume || []))]; }, getAllMaterialTypes({ allSensors }) { - return [...new Set(allSensors.flatMap(sensor => sensor.material_type || []))]; + return [...new Set(allSensors.flatMap((sensor) => sensor.material_type || []))]; } }, actions: { @@ -49,7 +49,7 @@ export const useSensorStore = defineStore('sensors', { this.allSensors = value; }, setSelectedGroup(group) { - this.selectedGroup = group + this.selectedGroup = group; }, setSelectedAssetTag(assetTag) { this.selectedAssetTag = assetTag; @@ -67,7 +67,7 @@ export const useSensorStore = defineStore('sensors', { this.selectedMaterialType = materialType; }, updateSensorsWithFilters() { - this.sensors = this.allSensors.filter(sensor => { + this.sensors.forEach((sensor) => { // filter for fill range const fillRangeFilter = () => { if (this.selectedFillRange && (sensor.fill_level || sensor.fill_level === 0)) { @@ -75,7 +75,7 @@ export const useSensorStore = defineStore('sensors', { } return true; }; - + // filter for group const groupFilter = () => { if (this.selectedGroup && this.selectedGroup.length > 0 && sensor.group) { @@ -83,7 +83,7 @@ export const useSensorStore = defineStore('sensors', { } return true; }; - + // filter for asset tag const assetTagFilter = () => { if (this.selectedAssetTag && this.selectedAssetTag.length > 0 && sensor.asset_tag) { @@ -91,7 +91,7 @@ export const useSensorStore = defineStore('sensors', { } return true; }; - + // filter for bintype const binTypeFilter = () => { if (this.selectedBinType && this.selectedBinType.length > 0 && sensor.bin_type) { @@ -99,7 +99,7 @@ export const useSensorStore = defineStore('sensors', { } return true; }; - + // filter for bin volume const binVolumeFilter = () => { if (this.selectedBinVolume && this.selectedBinVolume.length > 0 && sensor.bin_volume) { @@ -117,8 +117,8 @@ export const useSensorStore = defineStore('sensors', { }; // combining results of all filters together - return fillRangeFilter() && groupFilter() && assetTagFilter() && binTypeFilter() && binVolumeFilter() && materialTypeFilter(); - }) + sensor.keepAfterFiltering = fillRangeFilter() && groupFilter() && assetTagFilter() && binTypeFilter() && binVolumeFilter() && materialTypeFilter(); + }); } - }, -}) + } +}); diff --git a/app_vue/src/utils/mapMarkerHelper.js b/app_vue/src/utils/mapMarkerHelper.js index f5c7e7dd..6b426206 100644 --- a/app_vue/src/utils/mapMarkerHelper.js +++ b/app_vue/src/utils/mapMarkerHelper.js @@ -1,20 +1,38 @@ +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' +}; + const getBinIconName = (sensor) => { const isErrorState = sensor.error; + const isFilteredOut = 'keepAfterFiltering' in sensor && !sensor.keepAfterFiltering; 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) { // shows error icon - return 'error'; + if (isErrorState) { + // shows error icon + 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 'full'; + return ICON_NAMES.FULL_BIN; } else if (isHalfFullState) { - return 'half-full'; + return ICON_NAMES.HALF_FULL_BIN; } else if (isEmptyState) { - return 'empty'; + return ICON_NAMES.EMPTY_BIN; } - return 'empty'; // default -} + return ICON_NAMES.EMPTY_BIN; // default +}; export const getMaterialTypeIconURL = (materialType) => { const directory = 'src/assets/images/materialTypeIcons'; @@ -23,57 +41,46 @@ export const getMaterialTypeIconURL = (materialType) => { return genericMaterialIconPath; } const materialMap = { - 'Cardboard': `${directory}/cardboard.svg`, - 'Plastic': `${directory}/plastic.svg`, - 'Compost': `${directory}/compost.svg`, - 'Garbage': `${directory}/garbage.svg`, + Cardboard: `${directory}/cardboard.svg`, + Plastic: `${directory}/plastic.svg`, + Compost: `${directory}/compost.svg`, + Garbage: `${directory}/garbage.svg`, 'Mixed Recyclables': `${directory}/mixed_recyclables.svg`, - 'Paper': `${directory}/paper.svg`, + Paper: `${directory}/paper.svg`, 'Mixed Containers': `${directory}/mixed_containers.svg`, 'Glass, Metal, Plastic': `${directory}/glass_metal_plastic.svg`, 'Soft Plastic': `${directory}/soft_plastic.svg`, - 'WTE': `${directory}/wte.svg`, - 'Shredding': `${directory}/shredding.svg`, + WTE: `${directory}/wte.svg`, + Shredding: `${directory}/shredding.svg`, 'Scrap Metal': `${directory}/scrap_metal.svg`, - 'Wood': `${directory}/wood.svg`, - 'Construction Waste': `${directory}/construction_waste.svg`, + Wood: `${directory}/wood.svg`, + 'Construction Waste': `${directory}/construction_waste.svg` }; return materialMap[materialType] || genericMaterialIconPath; -} +}; // linearProgressColor -> used by Vuetify to determine progress bar color // iconURL -> used by Vuetify to display bin icon export const getIconAndProgressColor = (sensor) => { // mini-helper function const iconName = getBinIconName(sensor); - let iconUrl = '' + let iconUrl = ''; let linearProgressColor = ''; const RED = '#C92828'; const GREEN = 'green'; const ORANGE = '#F07F2D'; const iconDirectory = 'src/assets/images/binMarkerIcons'; - switch (iconName) { - case 'error': - iconUrl = `${iconDirectory}/alert-bin.png`; - linearProgressColor = RED; - break; - case 'full': - iconUrl = `${iconDirectory}/full-bin.png`; - linearProgressColor = RED; - break; - case 'half-full': - iconUrl = `${iconDirectory}/half-full-bin.png`; - linearProgressColor = ORANGE; - break; - case 'empty': - iconUrl = `${iconDirectory}/empty-bin.png`; - linearProgressColor = GREEN; - break; - default: // default is empty bin - iconUrl = `${iconDirectory}/empty-bin.png`; - linearProgressColor = GREEN; + + iconUrl = `${iconDirectory}/${iconName}.png`; + linearProgressColor = GREEN; + + if (iconName === ICON_NAMES.ERROR_BIN || iconName === ICON_NAMES.FULL_BIN) { + linearProgressColor = RED; + } else if (iconName === ICON_NAMES.HALF_FULL_BIN) { + linearProgressColor = ORANGE; } + return { iconUrl, linearProgressColor }; -} +}; -export default getIconAndProgressColor +export default getIconAndProgressColor; From 6289c0e4942cfc0e0b06a4de327e16fabb37fb90 Mon Sep 17 00:00:00 2001 From: monicakochofar Date: Wed, 4 Oct 2023 15:52:05 -0400 Subject: [PATCH 2/7] separated functions more cleanly --- app_vue/src/components/sensorMapMarker.vue | 46 +++++++++++++--------- app_vue/src/stores/sensors_store.js | 22 +++++------ app_vue/src/utils/mapMarkerHelper.js | 23 +++++------ 3 files changed, 47 insertions(+), 44 deletions(-) diff --git a/app_vue/src/components/sensorMapMarker.vue b/app_vue/src/components/sensorMapMarker.vue index 84d3cb2a..98d37ea9 100644 --- a/app_vue/src/components/sensorMapMarker.vue +++ b/app_vue/src/components/sensorMapMarker.vue @@ -1,9 +1,9 @@ From e6fa2e29a896089d97fa030231159ab794386fa9 Mon Sep 17 00:00:00 2001 From: monicakochofar Date: Wed, 4 Oct 2023 16:31:12 -0400 Subject: [PATCH 4/7] using map to trigger vue reactive property --- app_vue/src/components/sensorMapMarker.vue | 4 +--- app_vue/src/stores/sensors_store.js | 5 +++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/app_vue/src/components/sensorMapMarker.vue b/app_vue/src/components/sensorMapMarker.vue index acedc2dc..358056ef 100644 --- a/app_vue/src/components/sensorMapMarker.vue +++ b/app_vue/src/components/sensorMapMarker.vue @@ -15,7 +15,6 @@ const props = defineProps({ // set html element variables const state = reactive({ - iconUrl: '', linearProgressColor: '', fillPercent: 0, isAlreadyInRoute: false, @@ -28,7 +27,6 @@ const { getSelectedRouteList, getShouldDisplayRoute } = storeToRefs(routeStore); onBeforeMount(() => { const binIconName = getBinIconName(props.sensor); - state.iconUrl = getIconUrl(binIconName); state.linearProgressColor = getVuetifyLinearProgressColor(binIconName); state.fillPercent = Math.round(props.sensor.fill_level || 0); }); @@ -71,7 +69,7 @@ function removeBinFromRoute(sensor) { diff --git a/app_vue/src/stores/sensors_store.js b/app_vue/src/stores/sensors_store.js index b757621f..8491bea0 100644 --- a/app_vue/src/stores/sensors_store.js +++ b/app_vue/src/stores/sensors_store.js @@ -65,7 +65,7 @@ export const useSensorStore = defineStore('sensors', { this.selectedMaterialType = materialType; }, updateSensorsWithFilters() { - this.sensors.forEach((sensor) => { + this.sensors.map((sensor) => { // filter for fill range const fillRangeFilter = () => { if (this.selectedFillRange && (sensor.fill_level || sensor.fill_level === 0)) { @@ -114,8 +114,9 @@ export const useSensorStore = defineStore('sensors', { return true; }; - // combining results of all filters together + // setting up new property sensor.keepAfterFiltering = fillRangeFilter() && groupFilter() && assetTagFilter() && binTypeFilter() && binVolumeFilter() && materialTypeFilter(); + return sensor; }); } } From a5aabaa27b1ba3e1407fc8830ff1c4ff34721853 Mon Sep 17 00:00:00 2001 From: monicakochofar Date: Wed, 4 Oct 2023 17:20:20 -0400 Subject: [PATCH 5/7] 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 6c76ed12..c3ed2057 100644 --- a/app_vue/src/components/sensorMap.vue +++ b/app_vue/src/components/sensorMap.vue @@ -167,7 +167,10 @@ onDeactivated(() => {