From 9e025b0fa728eb7f93b504f5a56b97567a4ea1c5 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Fri, 15 Sep 2023 18:21:44 -0700 Subject: [PATCH 1/3] poc code --- .env.development | 2 +- .../building_list/building_list.vue | 50 +++++++++++++++++++ src/components/map/map.vue | 24 ++++++++- 3 files changed, 73 insertions(+), 3 deletions(-) diff --git a/.env.development b/.env.development index 5fee36aa..b02de683 100644 --- a/.env.development +++ b/.env.development @@ -1,2 +1,2 @@ -VUE_APP_ROOT_API=http://localhost:3000 +VUE_APP_ROOT_API=https://api.sustainability.oregonstate.edu/v2/energy VUE_APP_HOST_ADDRESS=http://localhost:8080 \ No newline at end of file diff --git a/src/components/building_list/building_list.vue b/src/components/building_list/building_list.vue index c0798a44..48d9d2cd 100644 --- a/src/components/building_list/building_list.vue +++ b/src/components/building_list/building_list.vue @@ -95,6 +95,9 @@ export default { r['All'] = [building] } if ( r[building.group] ) { + // console.log(r) + // console.log(building.group) + console.log( r[building.group] ) r[building.group].push( building ) r[building.group].sort( ( a, b ) => ( a.name > b.name ? 1 : -1 ) ) } else { @@ -108,6 +111,31 @@ export default { for ( let key of keys ) { if ( key !== 'All' ) r2[key] = r[key] } + console.log( r2 ) + console.log( Object.keys( r2 ) ) + if ( this.buildingList ) { + for ( let i = 0; i < Object.keys( r2 ).length; i++ ) { + if ( Object.keys( r2 )[i] === 'Events & Admin, Solar' ) { + console.log( 'gotcha' ) + console.log( Object.keys( r2 )[i] ) + console.log( Object.keys( r2 )[i].split( ', ' ) ) + for ( let j = 0; j < Object.keys( r2 )[i].split( ', ' ).length; j++ ) { + console.log( Object.keys( r2 )[i].split( ', ' )[j] ) + console.log( r2[Object.keys( r2 )[i].split( ', ' )[j]] ) + console.log( Object.values( r2 )[i] ) + // console.log(r2.Object.keys(r2)[i]) + // console.log(r2['Events & Admin, Solar']) + r2[Object.keys( r2 )[i].split( ', ' )[j]].push( Object.values( r2 )[i][0] ) + console.log( r2[Object.keys( r2 )[i]] ) + console.log( r2[Object.keys( r2 )[i].split( ', ' )[j]] ) + // delete r2[Object.keys(r2)[i]] + // r2[Object.keys(r2)[i].split(', ')[j]].push(Object.values(r2)[i]) + } + delete r2[Object.keys( r2 )[i]] + console.log( Object.values( r2 )[i][0] ) + } + } + } return r2 } else { return this.$store.getters['user/views'] @@ -126,6 +154,28 @@ export default { }, search: function ( v ) { let groups + /* + console.log(this.groups) + console.log(Object.keys(this.groups)) + if (this.buildingList ) { + for (let i = 0; i < Object.keys(this.groups).length; i++) { + if (Object.keys(this.groups)[i] === 'Events & Admin, Solar') { + console.log('gotcha') + console.log(Object.keys(this.groups)[i]) + console.log(Object.keys(this.groups)[i].split(', ')) + for (let j = 0; j < Object.keys(this.groups)[i].split(', ').length; j++) { + console.log(Object.keys(this.groups)[i].split(', ')[j]) + console.log(this.groups[Object.keys(this.groups)[i].split(', ')[j]]) + console.log(Object.values(this.groups)[i]) + this.groups[Object.keys(this.groups)[i].split(', ')[j]].push(Object.values(this.groups)[i][0]) + console.log(this.groups[Object.keys(this.groups)[i].split(', ')[j]]) + // this.groups[Object.keys(this.groups)[i].split(', ')[j]].push(Object.values(this.groups)[i]) + } + console.log(Object.values(this.groups)[i][0]) + } + } + } + */ if ( this.buildingList ) { groups = Object.values( this.groups ).reduce( ( a, c ) => { for ( let d of c ) a.push( d ) diff --git a/src/components/map/map.vue b/src/components/map/map.vue index 1b458990..da31e57d 100644 --- a/src/components/map/map.vue +++ b/src/components/map/map.vue @@ -374,6 +374,8 @@ export default { } }, handleSelect: function ( string ) { + console.log( this.$store.getters['map/buildings'] ) + console.log( this.selected ) if ( this.selected.indexOf( string ) >= 0 ) { this.selected.splice( this.selected.indexOf( string ), 1 ) } else { @@ -556,8 +558,26 @@ export default { for ( var layerKey of Object.keys( this.map._layers ) ) { let layer = this.map._layers[layerKey] if ( layer.feature ) { - if ( !val.includes( layer.feature.properties.group ) && this.grouping === 'Category' ) { - this.map.removeLayer( layer ) + console.log( layer.feature.properties.group ) + console.log( layer.feature.properties.group.split( ', ' ) ) + if ( layer.feature.properties.group.split( ', ' ).length > 1 ) { + let categoryCoverage = 0 + for ( let i = 0; i < layer.feature.properties.group.split( ', ' ).length; i++ ) { + console.log( layer.feature.properties.group.split( ', ' )[i] ) + if ( !val.includes( layer.feature.properties.group.split( ', ' )[i] ) && this.grouping === 'Category' ) { + console.log( layer.feature.properties.group.split( ', ' )[i] ) + categoryCoverage++ + } + } + console.log( categoryCoverage ) + if ( categoryCoverage >= layer.feature.properties.group.split( ', ' ).length ) { + this.map.removeLayer( layer ) + } + console.log( 'here' ) + } else { + if ( !val.includes( layer.feature.properties.group ) && this.grouping === 'Category' ) { + this.map.removeLayer( layer ) + } } } } From 3240bec9409c838a23f13ff0a4e1c5c6b41dae9f Mon Sep 17 00:00:00 2001 From: solderq35 Date: Fri, 15 Sep 2023 18:31:46 -0700 Subject: [PATCH 2/3] remove unused code and fix checking for commas --- .../building_list/building_list.vue | 24 +------------------ 1 file changed, 1 insertion(+), 23 deletions(-) diff --git a/src/components/building_list/building_list.vue b/src/components/building_list/building_list.vue index 48d9d2cd..8e53d1d9 100644 --- a/src/components/building_list/building_list.vue +++ b/src/components/building_list/building_list.vue @@ -115,7 +115,7 @@ export default { console.log( Object.keys( r2 ) ) if ( this.buildingList ) { for ( let i = 0; i < Object.keys( r2 ).length; i++ ) { - if ( Object.keys( r2 )[i] === 'Events & Admin, Solar' ) { + if ( Object.keys( r2 )[i].split( ', ' ).length > 1 ) { console.log( 'gotcha' ) console.log( Object.keys( r2 )[i] ) console.log( Object.keys( r2 )[i].split( ', ' ) ) @@ -154,28 +154,6 @@ export default { }, search: function ( v ) { let groups - /* - console.log(this.groups) - console.log(Object.keys(this.groups)) - if (this.buildingList ) { - for (let i = 0; i < Object.keys(this.groups).length; i++) { - if (Object.keys(this.groups)[i] === 'Events & Admin, Solar') { - console.log('gotcha') - console.log(Object.keys(this.groups)[i]) - console.log(Object.keys(this.groups)[i].split(', ')) - for (let j = 0; j < Object.keys(this.groups)[i].split(', ').length; j++) { - console.log(Object.keys(this.groups)[i].split(', ')[j]) - console.log(this.groups[Object.keys(this.groups)[i].split(', ')[j]]) - console.log(Object.values(this.groups)[i]) - this.groups[Object.keys(this.groups)[i].split(', ')[j]].push(Object.values(this.groups)[i][0]) - console.log(this.groups[Object.keys(this.groups)[i].split(', ')[j]]) - // this.groups[Object.keys(this.groups)[i].split(', ')[j]].push(Object.values(this.groups)[i]) - } - console.log(Object.values(this.groups)[i][0]) - } - } - } - */ if ( this.buildingList ) { groups = Object.values( this.groups ).reduce( ( a, c ) => { for ( let d of c ) a.push( d ) From d2d56208b8ed40e84fee7c6e74250fad21274b3b Mon Sep 17 00:00:00 2001 From: solderq35 Date: Wed, 20 Sep 2023 14:27:46 -0700 Subject: [PATCH 3/3] poc stripes on map --- src/components/map/map.vue | 62 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/src/components/map/map.vue b/src/components/map/map.vue index da31e57d..836d0523 100644 --- a/src/components/map/map.vue +++ b/src/components/map/map.vue @@ -186,6 +186,7 @@ export default { this.polyClick( e.target.feature.properties.id, e.target.feature, layer.getBounds().getCenter() ) } ) layer.on( 'mouseover', function ( e ) { + console.log( e.target ) if ( !e.target.setStyle ) return if ( e.target.feature.id === 'way/1100972272' ) { e.target.feature.properties.name = 'OSU Operations' @@ -239,6 +240,7 @@ export default { }, methods: { polyClick: function ( id, feature, center ) { + console.log( center ) if ( !this.askingForComparison ) { window.vue.$store.dispatch( 'modalController/openModal', { name: 'map_side_view', @@ -278,6 +280,31 @@ export default { for ( let layer of Object.values( this.map._layers ) ) { layer.unbindTooltip() } + L.polygon( + [ + [44.56639145, -123.27533365], + [44.57639145, -123.27533365], + [44.57639145, -123.26533365], + [44.56639145, -123.26533365] + ], + { fillColor: 'url(#stripes)', fillOpacity: 1 } + ).addTo( this.map ) + + let fillPalette = ['orange', 'green', 'blue'] + + let gradientString = ` + + + + + + +` + + let svg = document.getElementsByTagName( 'svg' )[0] + let svgDefs = document.createElementNS( 'http://www.w3.org/2000/svg', 'defs' ) + svgDefs.insertAdjacentHTML( 'afterbegin', gradientString ) + svg.appendChild( svgDefs ) }, getResult ( searchResult ) { for ( let layer of Object.values( this.map._layers ) ) { @@ -557,6 +584,41 @@ export default { this.map = this.$refs.map.mapObject for ( var layerKey of Object.keys( this.map._layers ) ) { let layer = this.map._layers[layerKey] + if ( layer.feature && layer.feature.geometry && layer.feature.geometry.type === 'Polygon' ) { + if ( layer.feature.properties.name === 'OSU 35th Street Solar Field' ) { + console.log( layer.feature.properties.name ) + console.log( layer.feature.geometry.coordinates ) + console.log( layer.feature.geometry.coordinates[0].length ) + let transform2darr = [] + for ( var i = 0; i < layer.feature.geometry.coordinates[0].length; i++ ) { + let latvar = layer.feature.geometry.coordinates[0][i][1] + let longvar = layer.feature.geometry.coordinates[0][i][0] + let tarr = [] + tarr.push( latvar ) + tarr.push( longvar ) + transform2darr.push( tarr ) + } + console.log( transform2darr ) + + L.polygon( transform2darr, { fillColor: 'url(#stripes)', fillOpacity: 1 } ).addTo( this.map ) + + let fillPalette = ['orange', 'green', 'blue'] + + let gradientString = ` + + + + + + + ` + + let svg = document.getElementsByTagName( 'svg' )[0] + let svgDefs = document.createElementNS( 'http://www.w3.org/2000/svg', 'defs' ) + svgDefs.insertAdjacentHTML( 'afterbegin', gradientString ) + svg.appendChild( svgDefs ) + } + } if ( layer.feature ) { console.log( layer.feature.properties.group ) console.log( layer.feature.properties.group.split( ', ' ) )