From 927f369f412d4673a7f33c8e0b601ec358330eb6 Mon Sep 17 00:00:00 2001
From: Jeff Huang <82061589+solderq35@users.noreply.github.com>
Date: Wed, 25 Oct 2023 23:52:12 -0700
Subject: [PATCH] [PR] comparison menu misc bug fixes (#270)
* comparison menu misc bug fixes
* mobile restyle
* little taller
---
src/components/map/map.vue | 94 ++++++++++++++++++++++---------
src/components/map/map_prompt.vue | 8 +--
2 files changed, 72 insertions(+), 30 deletions(-)
diff --git a/src/components/map/map.vue b/src/components/map/map.vue
index 5b61775f..56fa338d 100644
--- a/src/components/map/map.vue
+++ b/src/components/map/map.vue
@@ -307,14 +307,48 @@ export default {
searchResult
.bindTooltip( searchResult.feature.properties.name, { permanent: true, fillColor: '#000', color: '#000' } )
.openTooltip()
+
+ if ( this.askingForComparison && this.compareStories.indexOf( searchResult.feature.properties.id ) < 0 ) {
+ const data =
+ ""
+ const formed = encodeURI( 'data:image/svg+xml,' + data ).replace( /#/g, '%23' )
+ let searchCenter = searchResult.getBounds().getCenter()
+ const checkIcon = L.icon( {
+ iconUrl: formed,
+ iconSize: [20, 20],
+ shadowUrl: ''
+ } )
+ const marker = L.marker( searchCenter, {
+ icon: checkIcon,
+ bubblingMouseEvents: true,
+ interactive: false
+ } ).addTo( this.map )
+ marker.buildingId = searchResult.feature.properties.id
+ this.compareMarkers.push( marker )
+ this.compareStories.push( searchResult.feature.properties.id )
+ } else if ( this.askingForComparison ) {
+ const removingMarkerIndex = this.compareMarkers.findIndex(
+ e => e.buildingId === searchResult.feature.properties.id
+ )
+ if ( removingMarkerIndex === -1 ) {
+ return
+ }
+ const marker = this.compareMarkers.splice( removingMarkerIndex, 1 )[0]
+ this.map.removeLayer( marker )
+ this.compareStories.splice( this.compareStories.indexOf( searchResult.feature.properties.id ), 1 )
+ }
},
resetSearchInput () {
this.search = ''
+ for ( let layer of Object.values( this.map._layers ) ) {
+ layer.unbindTooltip()
+ }
},
removeAllMarkers: function () {
for ( let marker of this.compareMarkers ) {
this.map.removeLayer( marker )
}
+ this.compareMarkers = []
},
showComparison: async function ( target ) {
this.askingForComparison = false
@@ -326,31 +360,39 @@ export default {
this.building_compare_error = true
}
}
- let path = this.$store.getters['map/building']( this.compareStories[0] ).path
- if ( this.$store.getters['map/building']( this.compareStories[0] ).description !== 'Electricity' ) {
- this.showSide = false
- this.building_compare_error = true
- }
- if ( target === 'q' ) {
- let mgId = this.$store.getters[path + '/primaryGroup']( 'Electricity' ).id
- let blockSpace = this.$store.getters[path + '/block']( mgId ).path
- await this.$store.dispatch( blockSpace + '/removeAllModifiers' )
- await this.$store.dispatch( blockSpace + '/addModifier', 'building_compare' )
- await this.$store.dispatch( blockSpace + '/updateModifier', {
- name: 'building_compare',
- data: {
- buildingIds: this.compareStories
+ try {
+ if ( this.building_compare_error === false ) {
+ let path = this.$store.getters['map/building']( this.compareStories[0] ).path
+
+ if ( target === 'q' ) {
+ let mgId = this.$store.getters[path + '/primaryGroup']( 'Electricity' ).id
+
+ let blockSpace = this.$store.getters[path + '/block']( mgId ).path
+ await this.$store.dispatch( blockSpace + '/removeAllModifiers' )
+ await this.$store.dispatch( blockSpace + '/addModifier', 'building_compare' )
+ await this.$store.dispatch( blockSpace + '/updateModifier', {
+ name: 'building_compare',
+ data: {
+ buildingIds: this.compareStories
+ }
+ } )
+ window.vue.$store.dispatch( 'modalController/openModal', {
+ name: 'map_compare_side',
+ path: path
+ } )
+ } else {
+ this.$router.push( {
+ path: `/compare/${encodeURI( JSON.stringify( this.compareStories ) )}/2`
+ } )
}
- } )
- window.vue.$store.dispatch( 'modalController/openModal', {
- name: 'map_compare_side',
- path: path
- } )
- } else {
- this.$router.push( {
- path: `/compare/${encodeURI( JSON.stringify( this.compareStories ) )}/2`
- } )
+ }
+ } catch ( err ) {
+ // uncomment this to see exact errors in debug
+ // console.error(err)
+ this.showSide = false
+ this.building_compare_error = true
+ this.compareStories.shift()
}
},
startCompare: function ( buildingId ) {
@@ -459,17 +501,17 @@ export default {
} )
},
watch: {
- selectedOption ( newVal ) {
+ selectedOption ( energyFilter ) {
this.rKey++
this.$nextTick( () => {
this.map = this.$refs.map.mapObject
for ( var layerKey of Object.keys( this.map._layers ) ) {
let layer = this.map._layers[layerKey]
- if ( layer.feature && newVal !== 'All' ) {
+ if ( layer.feature && energyFilter !== 'All' ) {
let descArray = this.$store.getters['map/building']( layer.feature.properties.id ).description.split( ', ' )
let descLength = 0
for ( let i = 0; i < descArray.length; i++ ) {
- if ( newVal.includes( descArray[i] ) ) {
+ if ( energyFilter.includes( descArray[i] ) ) {
descLength += 1
}
}
diff --git a/src/components/map/map_prompt.vue b/src/components/map/map_prompt.vue
index 083f626a..db8001d3 100644
--- a/src/components/map/map_prompt.vue
+++ b/src/components/map/map_prompt.vue
@@ -11,7 +11,7 @@
- Select buildings to compare.
+ Select buildings by clicking on map or using building menu search bar.
NOTE: Only buildings with Electricity data are valid for comparison!
@@ -53,7 +53,7 @@ export default {
}
.text {
padding: 1.5em;
- font-size: 20px;
+ font-size: 18px;
}
.button {
border: solid 1px $--color-white;
@@ -68,10 +68,10 @@ export default {
}
@media only screen and (max-width: 600px) {
.stage_prompt {
- top: 80px;
+ top: 100px;
width: 330px;
left: 250px;
- height: 180px;
+ height: 200px;
}
}