diff --git a/.eslintrc.js b/.eslintrc.js index efca63aa..3ea9732f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -34,6 +34,6 @@ module.exports = { 'vue/no-use-v-if-with-v-for': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', - 'space-in-parens': [1, 'always'] + 'space-in-parens': [1, 'never'] } } diff --git a/babel.config.js b/babel.config.js index 01aa08c6..0691b57e 100644 --- a/babel.config.js +++ b/babel.config.js @@ -6,15 +6,15 @@ * @Last modified time: 2019-02-01T12:55:07-08:00 */ -module.exports = function ( api ) { - api.cache( true ) +module.exports = function (api) { + api.cache(true) const presets = ['@vue/app'] const plugins = [] // add babel-require hook so web-pack directives don't brick jest - if ( process.env.NODE_ENV === 'test' ) { - plugins.push( 'require-context-hook' ) + if (process.env.NODE_ENV === 'test') { + plugins.push('require-context-hook') } return { diff --git a/src/App.vue b/src/App.vue index 1ba64e7d..1abf62ee 100644 --- a/src/App.vue +++ b/src/App.vue @@ -26,9 +26,9 @@ export default { }, async created () { // On load, grab building/meter/map information from the API. - await this.$store.dispatch( 'map/loadMap' ) + await this.$store.dispatch('map/loadMap') // Also check if user is logged in. - this.$store.dispatch( 'user/user' ) + this.$store.dispatch('user/user') }, data () { return { @@ -46,28 +46,28 @@ export default { }, mounted () { // This is the first-timer pop-up window - if ( !document.cookie.split( ';' ).some( cookieString => cookieString.includes( 'firstTimer' ) ) ) { - this.$msgbox( { + if (!document.cookie.split(';').some(cookieString => cookieString.includes('firstTimer'))) { + this.$msgbox({ title: 'First Timer?', message: 'Take a look at the "FAQ" tab for some info on how to get started!', showCancelButton: true, confirmButtonText: 'OK', cancelButtonText: 'Never Show This Message Again', distinguishCancelAndClose: true, - callback: function ( action ) { - if ( action === 'cancel' ) { + callback: function (action) { + if (action === 'cancel') { const cookieDate = new Date() - cookieDate.setFullYear( new Date().getFullYear() + 10 ) + cookieDate.setFullYear(new Date().getFullYear() + 10) document.cookie = 'firstTimer=true; expires=' + cookieDate.toUTCString() + ';' } } - } ) + }) } }, watch: { - $route: function ( to, from ) { + $route: function (to, from) { // transition in - if ( to.path.length > from.path.length ) { + if (to.path.length > from.path.length) { this.transitionName = 'pageTo' } else { // transition out diff --git a/src/components/building_list/building_list.vue b/src/components/building_list/building_list.vue index b489c12d..feb53ab3 100644 --- a/src/components/building_list/building_list.vue +++ b/src/components/building_list/building_list.vue @@ -66,12 +66,12 @@ export default { } }, async mounted () { - if ( this.buildingList ) { + if (this.buildingList) { await this.$store.getters['map/promise'] - if ( this.$route.params.group && this.groups[this.$route.params.group] ) { + if (this.$route.params.group && this.groups[this.$route.params.group]) { this.openName = this.$route.params.group } else { - this.openName = Object.keys( this.groups )[0] + this.openName = Object.keys(this.groups)[0] } this.loading = false } else { @@ -82,26 +82,26 @@ export default { computed: { buildingList: { get () { - return this.$route.path.includes( 'buildings' ) + return this.$route.path.includes('buildings') } }, groups: { get () { - if ( this.buildingList ) { + if (this.buildingList) { let r = {} // await this.$store.getters['map/promise'] let buildings = this.$store.getters['map/buildings'] - for ( let building of buildings ) { - if ( r['All'] ) { - r['All'].push( building ) - r['All'].sort( ( a, b ) => ( a.name > b.name ? 1 : -1 ) ) + for (let building of buildings) { + if (r['All']) { + r['All'].push(building) + r['All'].sort((a, b) => (a.name > b.name ? 1 : -1)) } else { r['All'] = [building] } - if ( r[building.group] ) { - r[building.group].push( building ) - r[building.group].sort( ( a, b ) => ( a.name > b.name ? 1 : -1 ) ) + if (r[building.group]) { + r[building.group].push(building) + r[building.group].sort((a, b) => (a.name > b.name ? 1 : -1)) } else { r[building.group] = [building] } @@ -109,9 +109,9 @@ export default { let r2 = { All: r['All'] } - let keys = Object.keys( r ).sort() - for ( let key of keys ) { - if ( key !== 'All' ) r2[key] = r[key] + let keys = Object.keys(r).sort() + for (let key of keys) { + if (key !== 'All') r2[key] = r[key] } return r2 } else { @@ -121,37 +121,37 @@ export default { } }, watch: { - groups: function ( value ) { + groups: function (value) { this.search = '' - if ( this.$route.params.group && this.groups[this.$route.params.group] ) { + if (this.$route.params.group && this.groups[this.$route.params.group]) { this.openName = this.$route.params.group } else { - this.openName = Object.keys( this.groups )[0] + this.openName = Object.keys(this.groups)[0] } }, - search: function ( v ) { + search: function (v) { let groups - if ( this.buildingList ) { - groups = Object.values( this.groups ).reduce( ( a, c ) => { - for ( let d of c ) a.push( d ) + if (this.buildingList) { + groups = Object.values(this.groups).reduce((a, c) => { + for (let d of c) a.push(d) return a - }, [] ) + }, []) } else { groups = this.groups } let values = groups .filter( - ( card, index, arr ) => + (card, index, arr) => // Check that the item's name includes query - ( card.name && card.name.toLowerCase().includes( v.toLowerCase() ) ) || + (card.name && card.name.toLowerCase().includes(v.toLowerCase())) || // Check that description includes query - ( card.description && card.description.toLowerCase().includes( v.toLowerCase() ) ) + (card.description && card.description.toLowerCase().includes(v.toLowerCase())) ) - .map( e => { + .map(e => { return e.id - } ) - for ( let card of this.$refs.card ) { - if ( values.indexOf( card.id ) < 0 ) { + }) + for (let card of this.$refs.card) { + if (values.indexOf(card.id) < 0) { card.$el.parentNode.style.display = 'none' } else { card.$el.parentNode.style.display = 'block' diff --git a/src/components/building_list/view_card.vue b/src/components/building_list/view_card.vue index 608bd73d..5db2958b 100644 --- a/src/components/building_list/view_card.vue +++ b/src/components/building_list/view_card.vue @@ -14,7 +14,7 @@ export default { } }, mounted () { - if ( this.media ) { + if (this.media) { this.$refs.card.style.background = 'linear-gradient(to bottom right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2)),url("https://osu-energy-images.s3-us-west-2.amazonaws.com/thumbnails/' + this.media + @@ -27,10 +27,10 @@ export default { computed: { buildingOrStory: { get () { - if ( this.building ) { - return this.$store.getters['map/building']( this.id ) + if (this.building) { + return this.$store.getters['map/building'](this.id) } else { - return this.$store.getters['user/view']( this.id ) + return this.$store.getters['user/view'](this.id) } } }, @@ -52,26 +52,26 @@ export default { }, methods: { - hover: function ( enter ) { - if ( this.$refs.toolbox ) { - if ( enter ) { + hover: function (enter) { + if (this.$refs.toolbox) { + if (enter) { this.$refs.toolbox.style.display = 'block' } else { this.$refs.toolbox.style.display = 'none' } } }, - clicked: function ( event ) { - if ( event.target.parentNode.classList.contains( 'toolbox' ) || event.target.classList.contains( 'toolbox' ) ) { + clicked: function (event) { + if (event.target.parentNode.classList.contains('toolbox') || event.target.classList.contains('toolbox')) { return } - this.$emit( 'click' ) + this.$emit('click') } }, watch: { - selected: function ( value ) { - if ( value ) { + selected: function (value) { + if (value) { this.$refs.card.style.borderColor = 'rgb(215,63,9)' this.$refs.card.style.borderWidth = '4px' } else { diff --git a/src/components/campaigns/campaign_building_list.vue b/src/components/campaigns/campaign_building_list.vue index 30111df9..81b25007 100644 --- a/src/components/campaigns/campaign_building_list.vue +++ b/src/components/campaigns/campaign_building_list.vue @@ -62,101 +62,101 @@ export default { } }, mounted () { - if ( this.path ) { - this.$emit( 'input', this.path + '/block_default' ) + if (this.path) { + this.$emit('input', this.path + '/block_default') } }, computed: { blocks: { get () { let blocks = this.$store.getters[this.path + '/blocks'] - if ( !blocks ) { + if (!blocks) { return [] } - blocks.sort( ( a, b ) => { + blocks.sort((a, b) => { try { - const aPercentage = this.accumulatedPercentage( a.path ) - const bPercentage = this.accumulatedPercentage( b.path ) - if ( aPercentage > bPercentage ) { + const aPercentage = this.accumulatedPercentage(a.path) + const bPercentage = this.accumulatedPercentage(b.path) + if (aPercentage > bPercentage) { return 1 } else { return -1 } - } catch ( error ) { + } catch (error) { return 1 } - } ) + }) // Sort blocks with NaN percentages (no data) to the bottom - blocks.sort( ( a, b ) => { + blocks.sort((a, b) => { try { - const aPercentage = this.accumulatedPercentage( a.path ) - const bPercentage = this.accumulatedPercentage( b.path ) - if ( isNaN( aPercentage ) && !isNaN( bPercentage ) ) { + const aPercentage = this.accumulatedPercentage(a.path) + const bPercentage = this.accumulatedPercentage(b.path) + if (isNaN(aPercentage) && !isNaN(bPercentage)) { return 1 - } else if ( isNaN( aPercentage ) || isNaN( bPercentage ) ) { + } else if (isNaN(aPercentage) || isNaN(bPercentage)) { return -1 } else { return 1 } - } catch ( error ) { + } catch (error) { return 1 } - } ) + }) return blocks } } }, methods: { - buildingClick: function ( building ) { - if ( this.value === building ) { - this.$emit( 'input', this.path + '/block_default' ) + buildingClick: function (building) { + if (this.value === building) { + this.$emit('input', this.path + '/block_default') } else { - this.$emit( 'input', building ) + this.$emit('input', building) } }, - accumulatedPercentage: function ( path ) { - if ( this.$store.getters[path + '/modifierData'] ) { - return this.$store.getters[path + '/modifierData']( 'campaign_linebar' ).accumulatedPercentage + accumulatedPercentage: function (path) { + if (this.$store.getters[path + '/modifierData']) { + return this.$store.getters[path + '/modifierData']('campaign_linebar').accumulatedPercentage } return undefined }, - place: function ( path ) { - return this.blocks.map( b => b.path ).indexOf( path ) + 1 + place: function (path) { + return this.blocks.map(b => b.path).indexOf(path) + 1 }, - computedColor: function ( path ) { - if ( !this.$store.getters[path + '/modifierData']( 'campaign_linebar' ) ) { + computedColor: function (path) { + if (!this.$store.getters[path + '/modifierData']('campaign_linebar')) { return } - const percentage = this.accumulatedPercentage( path ) + const percentage = this.accumulatedPercentage(path) // #d62326 - Bottom Red // #19a23a - Top Green - const redInt = [parseInt( '0xd6', 16 ), parseInt( '0x23', 16 ), parseInt( '0x26', 16 )] - const greenInt = [parseInt( '0x19', 16 ), parseInt( '0xa2', 16 ), parseInt( '0x3a', 16 )] + const redInt = [parseInt('0xd6', 16), parseInt('0x23', 16), parseInt('0x26', 16)] + const greenInt = [parseInt('0x19', 16), parseInt('0xa2', 16), parseInt('0x3a', 16)] const typicalColor = [redInt[0] - greenInt[0], greenInt[1] - redInt[1], greenInt[2] - redInt[2]] - const compare = Math.abs( percentage ) / 7.5 + const compare = Math.abs(percentage) / 7.5 const result = [] - if ( percentage < -7.5 ) { - result.push( greenInt[0] ) - result.push( greenInt[1] ) - result.push( greenInt[2] ) - } else if ( percentage > 7.5 ) { - result.push( redInt[0] ) - result.push( redInt[1] ) - result.push( redInt[2] ) - } else if ( percentage < 0 ) { - result.push( Math.round( typicalColor[0] - redInt[0] * compare ) ) - result.push( Math.round( typicalColor[1] + redInt[1] * compare ) ) - result.push( Math.round( typicalColor[2] + redInt[2] * compare ) ) - } else if ( isNaN( percentage ) ) { - result.push( greenInt[0] ) - result.push( greenInt[0] ) - result.push( greenInt[0] ) + if (percentage < -7.5) { + result.push(greenInt[0]) + result.push(greenInt[1]) + result.push(greenInt[2]) + } else if (percentage > 7.5) { + result.push(redInt[0]) + result.push(redInt[1]) + result.push(redInt[2]) + } else if (percentage < 0) { + result.push(Math.round(typicalColor[0] - redInt[0] * compare)) + result.push(Math.round(typicalColor[1] + redInt[1] * compare)) + result.push(Math.round(typicalColor[2] + redInt[2] * compare)) + } else if (isNaN(percentage)) { + result.push(greenInt[0]) + result.push(greenInt[0]) + result.push(greenInt[0]) } else { - result.push( Math.round( typicalColor[0] + greenInt[0] * compare ) ) - result.push( Math.round( typicalColor[1] - greenInt[1] * compare ) ) - result.push( Math.round( typicalColor[2] - greenInt[2] * compare ) ) + result.push(Math.round(typicalColor[0] + greenInt[0] * compare)) + result.push(Math.round(typicalColor[1] - greenInt[1] * compare)) + result.push(Math.round(typicalColor[2] - greenInt[2] * compare)) } return 'rgb(' + result[0].toString() + ',' + result[1].toString() + ',' + result[2].toString() + ')' } diff --git a/src/components/campaigns/campaign_list.vue b/src/components/campaigns/campaign_list.vue index 58572b93..8783d644 100644 --- a/src/components/campaigns/campaign_list.vue +++ b/src/components/campaigns/campaign_list.vue @@ -39,37 +39,37 @@ export default { } }, async mounted () { - await this.$store.dispatch( 'campaigns/loadCampaigns' ) + await this.$store.dispatch('campaigns/loadCampaigns') this.loaded = true - for ( let camp of this.$store.getters['campaigns/campaigns'] ) { - if ( this.checkDate( camp.dateEnd ) && !camp.name.toLowerCase().startsWith( 'test' ) ) { - console.log( this.checkDate( camp.dateEnd ) ) - this.currentCampaigns.push( camp ) - } else if ( !camp.name.toLowerCase().startsWith( 'test' ) ) { - this.pastCampaigns.push( camp ) + for (let camp of this.$store.getters['campaigns/campaigns']) { + if (this.checkDate(camp.dateEnd) && !camp.name.toLowerCase().startsWith('test')) { + console.log(this.checkDate(camp.dateEnd)) + this.currentCampaigns.push(camp) + } else if (!camp.name.toLowerCase().startsWith('test')) { + this.pastCampaigns.push(camp) } else if ( - this.checkDate( camp.dateEnd ) && - camp.name.toLowerCase().startsWith( 'test' ) && + this.checkDate(camp.dateEnd) && + camp.name.toLowerCase().startsWith('test') && process.env.VUE_APP_HOST_ADDRESS === 'http://localhost:8080' ) { - this.currentCampaigns.push( camp ) + this.currentCampaigns.push(camp) } else if ( - camp.name.toLowerCase().startsWith( 'test' ) && + camp.name.toLowerCase().startsWith('test') && process.env.VUE_APP_HOST_ADDRESS === 'http://localhost:8080' ) { - this.pastCampaigns.push( camp ) + this.pastCampaigns.push(camp) } } - this.currentCampaigns.sort( ( a, b ) => { - return new Date( b.dateEnd ).getTime() - new Date( a.dateEnd ).getTime() - } ) - this.pastCampaigns.sort( ( a, b ) => { - return new Date( b.dateEnd ).getTime() - new Date( a.dateEnd ).getTime() - } ) + this.currentCampaigns.sort((a, b) => { + return new Date(b.dateEnd).getTime() - new Date(a.dateEnd).getTime() + }) + this.pastCampaigns.sort((a, b) => { + return new Date(b.dateEnd).getTime() - new Date(a.dateEnd).getTime() + }) }, methods: { - checkDate: function ( end ) { - return new Date().getTime() < new Date( end ).getTime() + checkDate: function (end) { + return new Date().getTime() < new Date(end).getTime() } } } diff --git a/src/components/campaigns/campaign_list_block.vue b/src/components/campaigns/campaign_list_block.vue index b870532b..3e1c4a70 100644 --- a/src/components/campaigns/campaign_list_block.vue +++ b/src/components/campaigns/campaign_list_block.vue @@ -26,8 +26,8 @@ export default { 'url("https://osu-energy-images.s3-us-west-2.amazonaws.com/' + this.camp.media + '")' }, filters: { - trunc: function ( val ) { - const d = new Date( val ) + trunc: function (val) { + const d = new Date(val) return d.getMonth() + 1 + '/' + d.getDate() + '/' + d.getFullYear() } } diff --git a/src/components/campaigns/main_campaign_view.vue b/src/components/campaigns/main_campaign_view.vue index 2ee2159c..f59881ce 100644 --- a/src/components/campaigns/main_campaign_view.vue +++ b/src/components/campaigns/main_campaign_view.vue @@ -98,26 +98,26 @@ export default { computed: { days: { get () { - if ( !this.campaignPath ) return '' + if (!this.campaignPath) return '' let start = this.campaignStart let end = this.campaignEnd - return Math.floor( ( end - start ) / ( 1000 * 60 * 60 * 24 ) ) + 1 + return Math.floor((end - start) / (1000 * 60 * 60 * 24)) + 1 } }, campaignStart: { get () { - if ( !this.campaignPath ) return '' + if (!this.campaignPath) return '' return this.$store.getters[this.campaignPath + '/dateStart'] } }, campaignEnd: { get () { - if ( !this.campaignPath ) return '' + if (!this.campaignPath) return '' let end = this.$store.getters[this.campaignPath + '/dateEnd'] let current = new Date().getTime() - if ( current < end ) { + if (current < end) { return current } else { return end @@ -126,39 +126,39 @@ export default { }, blocks: { get () { - if ( !this.campaignPath ) return [] + if (!this.campaignPath) return [] // We need to copy this or adding the default block will change the return value of // the store - let blocks = new Array( ...this.$store.getters[this.campaignPath + '/blocks'] ) - blocks.push( this.$store.getters[this.campaignPath + '/defaultBlock'] ) + let blocks = new Array(...this.$store.getters[this.campaignPath + '/blocks']) + blocks.push(this.$store.getters[this.campaignPath + '/defaultBlock']) return blocks } }, campaignPath: { get () { - if ( !this.$store.getters['campaigns/campaign']( this.$route.params.id ) ) { + if (!this.$store.getters['campaigns/campaign'](this.$route.params.id)) { return null } - return this.$store.getters['campaigns/campaign']( this.$route.params.id ).path + return this.$store.getters['campaigns/campaign'](this.$route.params.id).path } }, media: { get () { - if ( !this.campaignPath ) return '' + if (!this.campaignPath) return '' return this.$store.getters[this.campaignPath + '/media'] } }, name: { get () { - if ( !this.campaignPath ) return '' + if (!this.campaignPath) return '' return this.$store.getters[this.campaignPath + '/name'] } } }, async mounted () { this.loaded = false - await this.$store.dispatch( 'campaigns/loadCampaigns' ) - await this.$store.dispatch( this.campaignPath + '/buildBlocks' ) + await this.$store.dispatch('campaigns/loadCampaigns') + await this.$store.dispatch(this.campaignPath + '/buildBlocks') this.blockPath = this.campaignPath + '/block_default' this.loaded = true }, diff --git a/src/components/charts/barchart.js b/src/components/charts/barchart.js index 1be7a688..53bbe27c 100644 --- a/src/components/charts/barchart.js +++ b/src/components/charts/barchart.js @@ -30,26 +30,26 @@ export default { }, tooltips: { callbacks: { - title: function ( item, data ) { - let d = new Date( item[0].xLabel ) + title: function (item, data) { + let d = new Date(item[0].xLabel) let meridiem = 'am' let hours = d.getHours() - if ( hours > 12 ) { + if (hours > 12) { hours -= 12 meridiem = 'pm' - } else if ( hours === 0 ) { + } else if (hours === 0) { hours = 12 } let minutes = d.getMinutes() - if ( minutes < 10 ) { + if (minutes < 10) { minutes = '0' + minutes } - let year = d.getYear().toString().slice( 1 ) + let year = d.getYear().toString().slice(1) const dayCodes = ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'] return ( dayCodes[d.getDay()] + ' ' + - ( d.getMonth() + 1 ).toString() + + (d.getMonth() + 1).toString() + '/' + d.getDate() + '/' + @@ -62,13 +62,13 @@ export default { meridiem ) }, - label: ( item, data ) => { + label: (item, data) => { return ( this.$parent.chartData.datasets[item.datasetIndex].label + ': ' + - parseFloat( item.yLabel ).toFixed( 2 ) + + parseFloat(item.yLabel).toFixed(2) + ' ' + - this.$parent.unit( item.datasetIndex ) + this.$parent.unit(item.datasetIndex) ) } } @@ -87,12 +87,12 @@ export default { fontColor: this.primaryColor, fontFamily: 'Open Sans' }, - onHover: function ( e ) { + onHover: function (e) { e.target.style.cursor = 'pointer' } }, hover: { - onHover: function ( e ) { + onHover: function (e) { e.target.style.cursor = 'default' } }, @@ -117,8 +117,8 @@ export default { color: this.secondaryColor }, scaleLabel: { - display: this.$parent.buildLabel( 'y' ) !== '', - labelString: this.$parent.buildLabel( 'y' ), + display: this.$parent.buildLabel('y') !== '', + labelString: this.$parent.buildLabel('y'), fontSize: 12, fontColor: this.primaryColor, fontFamily: 'Open Sans' @@ -142,8 +142,8 @@ export default { source: 'data' }, scaleLabel: { - display: this.$parent.buildLabel( 'y' ) !== '', - labelString: this.$parent.buildLabel( 'x' ), + display: this.$parent.buildLabel('y') !== '', + labelString: this.$parent.buildLabel('x'), fontSize: 12, fontColor: this.primaryColor, fontFamily: 'Open Sans' @@ -164,7 +164,7 @@ export default { } }, mounted () { - this.renderChart( this.chartData, this.options ) + this.renderChart(this.chartData, this.options) }, watch: { // chartData: function(value) { @@ -172,7 +172,7 @@ export default { // } }, methods: { - setOptions: function ( opts ) { + setOptions: function (opts) { this.options = opts this.$data._chart.options = this.options // this.renderChart(this.chartData, this.options) diff --git a/src/components/charts/chartController.vue b/src/components/charts/chartController.vue index 8571c9be..06b30a1a 100644 --- a/src/components/charts/chartController.vue +++ b/src/components/charts/chartController.vue @@ -99,10 +99,10 @@ export default { piechart }, mounted () { - console.log( this.$route.path ) + console.log(this.$route.path) }, watch: { - path: function ( value ) { + path: function (value) { this.updateChart() } }, @@ -116,10 +116,10 @@ export default { } }, created () { - if ( parseInt( this.randomColors ) === 1 ) { + if (parseInt(this.randomColors) === 1) { // DurstenFeld Shuffle - for ( var i = this.colors.length - 1; i > 0; i-- ) { - var j = Math.floor( Math.random() * ( i + 1 ) ) + for (var i = this.colors.length - 1; i > 0; i--) { + var j = Math.floor(Math.random() * (i + 1)) var temp = this.colors[i] this.colors[i] = this.colors[j] this.colors[j] = temp @@ -127,7 +127,7 @@ export default { } if ( this.path && - ( this.path.split( '/' ).splice( 0, 1 )[0] === 'view' || this.path.split( '/' ).splice( 0, 1 )[0] === 'user' ) + (this.path.split('/').splice(0, 1)[0] === 'view' || this.path.split('/').splice(0, 1)[0] === 'user') ) { /* Building views set the date once the page is loaded. @@ -146,25 +146,25 @@ export default { a mutation path which references our path (url/window.location.hash) indicating we have new data to show. */ - this.unsubscribe = this.$store.subscribe( ( mutation, state ) => { - if ( this.$el.style.display === 'none' ) return - let mutationPath = mutation.type.split( '/' ) + this.unsubscribe = this.$store.subscribe((mutation, state) => { + if (this.$el.style.display === 'none') return + let mutationPath = mutation.type.split('/') let call = mutationPath.pop() - mutationPath = mutationPath.join( '/' ) - if ( mutationPath.includes( this.path ) ) { - if ( call === 'name' ) { + mutationPath = mutationPath.join('/') + if (mutationPath.includes(this.path)) { + if (call === 'name') { return } - clearTimeout( this.watchTimeout ) - this.watchTimeout = setTimeout( () => { + clearTimeout(this.watchTimeout) + this.watchTimeout = setTimeout(() => { this.updateChart() - }, 200 ) + }, 200) } - } ) + }) }, computed: { iframeClass () { - if ( this.$route.path.startsWith( '/map' ) ) { + if (this.$route.path.startsWith('/map')) { return 'scaled-iframe' } else { return 'building-iframe' @@ -187,24 +187,24 @@ export default { }, graphType: { get () { - if ( this.chartData ) { + if (this.chartData) { let noData = true - for ( let set of this.chartData.datasets ) { - if ( set && set.data && set.data.length !== 0 ) { + for (let set of this.chartData.datasets) { + if (set && set.data && set.data.length !== 0) { noData = false break } } - if ( noData ) { + if (noData) { return 100 } } - return parseInt( this.$store.getters[this.path + '/graphType'] ) + return parseInt(this.$store.getters[this.path + '/graphType']) } }, chart: { get () { - switch ( this.graphType ) { + switch (this.graphType) { case 1: return this.$refs.linechart case 2: @@ -224,115 +224,115 @@ export default { }, methods: { updateChart: function () { - if ( !this.path ) return + if (!this.path) return this.loading = true this.$store - .dispatch( this.path + '/getData' ) - .then( data => { + .dispatch(this.path + '/getData') + .then(data => { if ( this.chart && - ( this.graphType === 1 || this.graphType === 2 ) && + (this.graphType === 1 || this.graphType === 2) && data.datasets.length >= 1 && data.datasets[0].data.length >= 1 ) { this.chart.update() let timeDif = - new Date( data.datasets[0].data[data.datasets[0].data.length - 1].x ).getTime() - - new Date( data.datasets[0].data[0].x ).getTime() + new Date(data.datasets[0].data[data.datasets[0].data.length - 1].x).getTime() - + new Date(data.datasets[0].data[0].x).getTime() let dif = 0 - if ( timeDif <= 24 * 60 * 60 * 1000 ) { + if (timeDif <= 24 * 60 * 60 * 1000) { dif = 2 this.chart.options.scales.xAxes[0].time.unit = 'minute' - } else if ( timeDif <= 7 * 24 * 60 * 60 * 1000 ) { + } else if (timeDif <= 7 * 24 * 60 * 60 * 1000) { dif = 1 this.chart.options.scales.xAxes[0].time.unit = 'hour' } else { this.chart.options.scales.xAxes[0].time.unit = 'day' } - this.chart.options.scales.yAxes[0].ticks.maxTicksLimit = ( this.height / 200 ) * 8 - dif + this.chart.options.scales.yAxes[0].ticks.maxTicksLimit = (this.height / 200) * 8 - dif } this.chartData = data - console.log( this.path ) + console.log(this.path) this.loading = false // console.log('done loading!', this.path, data) // this.$store.getters[this.path] - } ) - .catch( err => { - console.log( 'could not load data', err ) + }) + .catch(err => { + console.log('could not load data', err) this.loading = true - } ) + }) }, - unit: function ( index ) { + unit: function (index) { const charts = this.$store.getters[this.path + '/charts'] - if ( index >= charts.length ) { + if (index >= charts.length) { index = 0 } const unit = this.$store.getters[charts[index].path + '/unitString'] return unit }, - colorCodedColor: function ( baseline, current ) { + colorCodedColor: function (baseline, current) { let colors = [] - for ( let i in current ) { - const percentage = ( current[i].y / baseline[i].y ) * 100 - 100 - const redInt = [parseInt( '0xd6', 16 ), parseInt( '0x23', 16 ), parseInt( '0x26', 16 )] - const greenInt = [parseInt( '0x19', 16 ), parseInt( '0xa2', 16 ), parseInt( '0x3a', 16 )] + for (let i in current) { + const percentage = (current[i].y / baseline[i].y) * 100 - 100 + const redInt = [parseInt('0xd6', 16), parseInt('0x23', 16), parseInt('0x26', 16)] + const greenInt = [parseInt('0x19', 16), parseInt('0xa2', 16), parseInt('0x3a', 16)] const typicalColor = [redInt[0] - greenInt[0], greenInt[1] - redInt[1], greenInt[2] - redInt[2]] - const compare = Math.abs( percentage ) / 7.5 + const compare = Math.abs(percentage) / 7.5 const result = [] - if ( percentage < -7.5 ) { - result.push( greenInt[0] ) - result.push( greenInt[1] ) - result.push( greenInt[2] ) - } else if ( percentage > 7.5 ) { - result.push( redInt[0] ) - result.push( redInt[1] ) - result.push( redInt[2] ) - } else if ( percentage < 0 ) { - result.push( Math.round( typicalColor[0] - redInt[0] * compare ) ) - result.push( Math.round( typicalColor[1] + redInt[1] * compare ) ) - result.push( Math.round( typicalColor[2] + redInt[2] * compare ) ) + if (percentage < -7.5) { + result.push(greenInt[0]) + result.push(greenInt[1]) + result.push(greenInt[2]) + } else if (percentage > 7.5) { + result.push(redInt[0]) + result.push(redInt[1]) + result.push(redInt[2]) + } else if (percentage < 0) { + result.push(Math.round(typicalColor[0] - redInt[0] * compare)) + result.push(Math.round(typicalColor[1] + redInt[1] * compare)) + result.push(Math.round(typicalColor[2] + redInt[2] * compare)) } else { - result.push( Math.round( typicalColor[0] + greenInt[0] * compare ) ) - result.push( Math.round( typicalColor[1] - greenInt[1] * compare ) ) - result.push( Math.round( typicalColor[2] - greenInt[2] * compare ) ) + result.push(Math.round(typicalColor[0] + greenInt[0] * compare)) + result.push(Math.round(typicalColor[1] - greenInt[1] * compare)) + result.push(Math.round(typicalColor[2] - greenInt[2] * compare)) } - colors.push( 'rgb(' + result[0].toString() + ',' + result[1].toString() + ',' + result[2].toString() + ')' ) + colors.push('rgb(' + result[0].toString() + ',' + result[1].toString() + ',' + result[2].toString() + ')') } return colors }, // Creates either an X or a Y axis label for a chart, depending on the parameters. - buildLabel: function ( axis ) { + buildLabel: function (axis) { const charts = this.$store.getters[this.path + '/charts'] - if ( axis === 'y' ) { + if (axis === 'y') { // This axis must contain the units for the given chart.point - if ( charts.length <= 0 ) { + if (charts.length <= 0) { return ' ' } let point = '' - for ( let index in charts ) { + for (let index in charts) { const chartPoint = this.$store.getters[charts[index].path + '/pointString'] - if ( !point.includes( chartPoint ) ) { - if ( Number( index ) !== 0 ) { + if (!point.includes(chartPoint)) { + if (Number(index) !== 0) { point += ' / ' } point += chartPoint } } - if ( !point ) { + if (!point) { return ' ' } - if ( this.$parent.$options._componentTag === 'sideView' ) { + if (this.$parent.$options._componentTag === 'sideView') { return ' ' } - if ( point.length > 50 ) { - point = point.substring( 0, 50 ) + '...' + if (point.length > 50) { + point = point.substring(0, 50) + '...' } return point } else { - const date1 = new Date( this.dateStart ) - const date2 = new Date( this.dateEnd ) - if ( date1 && date2 ) { + const date1 = new Date(this.dateStart) + const date2 = new Date(this.dateEnd) + if (date1 && date2) { return date1.toDateString() + ' to ' + date2.toDateString() } else { return ' ' diff --git a/src/components/charts/doughnutchart.js b/src/components/charts/doughnutchart.js index fd8b3409..1bac9563 100644 --- a/src/components/charts/doughnutchart.js +++ b/src/components/charts/doughnutchart.js @@ -26,18 +26,18 @@ export default { }, tooltips: { callbacks: { - title: ( item, data ) => { + title: (item, data) => { return data.labels[item[0].index] // return '' }, - label: ( item, data ) => { - return data.datasets[0].data[item.index] + ' ' + this.$parent.unit( item.index ) + label: (item, data) => { + return data.datasets[0].data[item.index] + ' ' + this.$parent.unit(item.index) }, - footer: ( item, data ) => { - let start = new Date( this.$parent.dateStart ) - let end = new Date( this.$parent.dateEnd ) + footer: (item, data) => { + let start = new Date(this.$parent.dateStart) + let end = new Date(this.$parent.dateEnd) - return this.formatDate( start ) + ' - ' + this.formatDate( end ) + return this.formatDate(start) + ' - ' + this.formatDate(end) } } }, @@ -55,33 +55,33 @@ export default { } }, mounted () { - this.renderChart( this.chartData, this.options ) + this.renderChart(this.chartData, this.options) }, methods: { - setOptions: function ( opts ) { + setOptions: function (opts) { this.options = opts - this.renderChart( this.chartData, this.options ) + this.renderChart(this.chartData, this.options) }, update: function () { this.$data._chart.update() }, - formatDate: function ( d ) { - d.setTime( d.getTime() - d.getTimezoneOffset() * 60 * 1000 ) + formatDate: function (d) { + d.setTime(d.getTime() - d.getTimezoneOffset() * 60 * 1000) let meridiem = 'am' let hours = d.getHours() - if ( hours > 12 ) { + if (hours > 12) { hours -= 12 meridiem = 'pm' - } else if ( hours === 0 ) { + } else if (hours === 0) { hours = 12 } let minutes = d.getMinutes() - if ( minutes < 10 ) { + if (minutes < 10) { minutes = '0' + minutes } - let year = d.getYear().toString().slice( 1 ) + let year = d.getYear().toString().slice(1) return ( - ( d.getMonth() + 1 ).toString() + '/' + d.getDate() + '/' + year + ' ' + hours + ':' + minutes + ' ' + meridiem + (d.getMonth() + 1).toString() + '/' + d.getDate() + '/' + year + ' ' + hours + ':' + minutes + ' ' + meridiem ) } } diff --git a/src/components/charts/linechart.js b/src/components/charts/linechart.js index f9d62902..21a0b460 100644 --- a/src/components/charts/linechart.js +++ b/src/components/charts/linechart.js @@ -30,26 +30,26 @@ export default { }, tooltips: { callbacks: { - title: function ( item, data ) { - let d = new Date( item[0].xLabel ) + title: function (item, data) { + let d = new Date(item[0].xLabel) let meridiem = 'am' let hours = d.getHours() - if ( hours > 12 ) { + if (hours > 12) { hours -= 12 meridiem = 'pm' - } else if ( hours === 0 ) { + } else if (hours === 0) { hours = 12 } let minutes = d.getMinutes() - if ( minutes < 10 ) { + if (minutes < 10) { minutes = '0' + minutes } - let year = d.getYear().toString().slice( 1 ) + let year = d.getYear().toString().slice(1) const dayCodes = ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'] return ( dayCodes[d.getDay()] + ' ' + - ( d.getMonth() + 1 ).toString() + + (d.getMonth() + 1).toString() + '/' + d.getDate() + '/' + @@ -62,13 +62,13 @@ export default { meridiem ) }, - label: ( item, data ) => { + label: (item, data) => { return ( this.$parent.chartData.datasets[item.datasetIndex].label + ': ' + - parseFloat( item.yLabel ).toFixed( 2 ) + + parseFloat(item.yLabel).toFixed(2) + ' ' + - this.$parent.unit( item.datasetIndex ) + this.$parent.unit(item.datasetIndex) ) } } @@ -87,12 +87,12 @@ export default { fontColor: this.primaryColor, fontFamily: 'Open Sans' }, - onHover: function ( e ) { + onHover: function (e) { e.target.style.cursor = 'pointer' } }, hover: { - onHover: function ( e ) { + onHover: function (e) { e.target.style.cursor = 'default' } }, @@ -120,8 +120,8 @@ export default { color: this.secondaryColor }, scaleLabel: { - display: this.$parent.buildLabel( 'y' ) !== '', - labelString: this.$parent.buildLabel( 'y' ), + display: this.$parent.buildLabel('y') !== '', + labelString: this.$parent.buildLabel('y'), fontSize: 12, fontColor: this.primaryColor, fontFamily: 'Open Sans' @@ -145,8 +145,8 @@ export default { source: 'data' }, scaleLabel: { - display: this.$parent.buildLabel( 'y' ) !== '', - labelString: this.$parent.buildLabel( 'x' ), + display: this.$parent.buildLabel('y') !== '', + labelString: this.$parent.buildLabel('x'), fontSize: 12, fontColor: this.primaryColor, fontFamily: 'Open Sans' @@ -167,14 +167,14 @@ export default { } }, mounted () { - this.renderChart( this.chartData, this.options ) + this.renderChart(this.chartData, this.options) }, watch: {}, methods: { update: function () { // Re-render the *entire* graph, so that the labels are also updated. // Potential optimization to be made here in the future but chartJS is scary. - this.renderChart( this.chartData, this.options ) + this.renderChart(this.chartData, this.options) } } } diff --git a/src/components/charts/piechart.js b/src/components/charts/piechart.js index d5ea27ea..2b329064 100644 --- a/src/components/charts/piechart.js +++ b/src/components/charts/piechart.js @@ -26,23 +26,23 @@ export default { }, tooltips: { callbacks: { - title: function ( item, data ) { - let d = new Date( item[0].xLabel ) + title: function (item, data) { + let d = new Date(item[0].xLabel) let meridiem = 'am' let hours = d.getHours() - if ( hours > 12 ) { + if (hours > 12) { hours -= 12 meridiem = 'pm' - } else if ( hours === 0 ) { + } else if (hours === 0) { hours = 12 } let minutes = d.getMinutes() - if ( minutes < 10 ) { + if (minutes < 10) { minutes = '0' + minutes } - let year = d.getYear().toString().slice( 1 ) + let year = d.getYear().toString().slice(1) return ( - ( d.getMonth() + 1 ).toString() + + (d.getMonth() + 1).toString() + '/' + d.getDate() + '/' + @@ -55,7 +55,7 @@ export default { meridiem ) }, - label: ( item, data ) => { + label: (item, data) => { return item.yLabel + ' ' + this.$parent.unit() } } @@ -74,7 +74,7 @@ export default { } }, mounted () { - this.renderChart( this.chartData, this.options ) + this.renderChart(this.chartData, this.options) }, watch: { // chartData: function(value) { @@ -82,9 +82,9 @@ export default { // } }, methods: { - setOptions: function ( opts ) { + setOptions: function (opts) { this.options = opts - this.renderChart( this.chartData, this.options ) + this.renderChart(this.chartData, this.options) }, update: function () { this.$data._chart.update() diff --git a/src/components/extras/heropicture.vue b/src/components/extras/heropicture.vue index d1af6721..0e762136 100644 --- a/src/components/extras/heropicture.vue +++ b/src/components/extras/heropicture.vue @@ -56,20 +56,20 @@ export default { computed: { mediaArray: { get () { - if ( this.media[0].length <= 1 ) return + if (this.media[0].length <= 1) return return this.media } } }, methods: { - classForIndex: function ( index ) { - if ( !this.mediaArray.length ) { + classForIndex: function (index) { + if (!this.mediaArray.length) { return 'slantImage unCut' - } else if ( this.mediaArray.length === 1 ) { + } else if (this.mediaArray.length === 1) { return 'slantImage unCut' - } else if ( index === 0 ) { + } else if (index === 0) { return 'slantImage leftEnd' - } else if ( index + 1 === this.media.length || index >= 3 ) { + } else if (index + 1 === this.media.length || index >= 3) { return 'slantImage rightEnd' } else { return 'slantImage' diff --git a/src/components/extras/media_picker.vue b/src/components/extras/media_picker.vue index db85169e..6769ab9f 100644 --- a/src/components/extras/media_picker.vue +++ b/src/components/extras/media_picker.vue @@ -45,26 +45,26 @@ export default { } }, created () { - this.$store.dispatch( 'map/imageList' ).then( r => { + this.$store.dispatch('map/imageList').then(r => { this.images = [] var index = 0 - for ( var i of r ) { - this.images.push( i ) - if ( i === this.value ) { + for (var i of r) { + this.images.push(i) + if (i === this.value) { this.selected = index } index++ } - } ) + }) }, watch: { - value: function ( value ) { - this.selected = this.images.indexOf( this.value ) + 1 + value: function (value) { + this.selected = this.images.indexOf(this.value) + 1 } }, methods: { - select: function ( image ) { - this.$emit( 'input', image ) + select: function (image) { + this.$emit('input', image) } } } diff --git a/src/components/get_started/commitment.vue b/src/components/get_started/commitment.vue index 9dea4a71..58bf7b02 100644 --- a/src/components/get_started/commitment.vue +++ b/src/components/get_started/commitment.vue @@ -29,17 +29,17 @@ export default { mounted () { var timeout = 100 var i = 0 - while ( i < this.commitments.length - 1 ) { - setTimeout( () => { + while (i < this.commitments.length - 1) { + setTimeout(() => { this.i++ this.keyValue = !this.keyValue - }, timeout ) + }, timeout) timeout += 90 * i i++ } }, filters: { - capatilize: function ( value ) { + capatilize: function (value) { return value.toUpperCase() } } diff --git a/src/components/get_started/feedbackForm.vue b/src/components/get_started/feedbackForm.vue index abc037d5..2617d7fe 100644 --- a/src/components/get_started/feedbackForm.vue +++ b/src/components/get_started/feedbackForm.vue @@ -38,17 +38,17 @@ export default { } }, methods: { - submitForm ( formName ) { - this.$refs[formName].validate( valid => { - if ( valid ) { - alert( 'submit!' ) + submitForm (formName) { + this.$refs[formName].validate(valid => { + if (valid) { + alert('submit!') } else { - console.log( 'error submit!!' ) + console.log('error submit!!') return false } - } ) + }) }, - resetForm ( formName ) { + resetForm (formName) { this.$refs[formName].resetFields() } } diff --git a/src/components/get_started/getStartedBanner.vue b/src/components/get_started/getStartedBanner.vue index 8f4af802..fa6d6595 100644 --- a/src/components/get_started/getStartedBanner.vue +++ b/src/components/get_started/getStartedBanner.vue @@ -20,8 +20,8 @@ export default { } }, methods: { - handleChange ( val ) { - console.log( val ) + handleChange (val) { + console.log(val) } } } diff --git a/src/components/leftBuildingMenu.vue b/src/components/leftBuildingMenu.vue index 3e8ce8a6..2c890f5c 100644 --- a/src/components/leftBuildingMenu.vue +++ b/src/components/leftBuildingMenu.vue @@ -31,12 +31,12 @@ export default { }, methods: { toggleFlag: function () { - if ( this.isSmallScreen ) { + if (this.isSmallScreen) { this.flag2 = !this.flag2 - EventBus.$emit( 'inputData', this.flag2 ) + EventBus.$emit('inputData', this.flag2) } else { this.flag = !this.flag - EventBus.$emit( 'inputData', this.flag ) + EventBus.$emit('inputData', this.flag) } } } diff --git a/src/components/map/map.vue b/src/components/map/map.vue index 7b941e54..75db56b3 100644 --- a/src/components/map/map.vue +++ b/src/components/map/map.vue @@ -151,8 +151,8 @@ export default { return this.$store.getters['modalController/modalName'] === 'map_side_view' }, - set ( value ) { - this.$store.dispatch( 'modalController/closeModal' ) + set (value) { + this.$store.dispatch('modalController/closeModal') } }, showCompareSide: { @@ -160,8 +160,8 @@ export default { return this.$store.getters['modalController/modalName'] === 'map_compare_side' }, - set ( value ) { - this.$store.dispatch( 'modalController/closeModal' ) + set (value) { + this.$store.dispatch('modalController/closeModal') } } }, @@ -171,7 +171,7 @@ export default { searchGroup: [], search: '', zoom: DEFAULT_ZOOM, - center: L.latLng( DEFAULT_LAT, DEFAULT_LON ), + center: L.latLng(DEFAULT_LAT, DEFAULT_LON), url: 'https://api.mapbox.com/styles/v1/jack-woods/cjmi2qpp13u4o2spgb66d07ci/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiamFjay13b29kcyIsImEiOiJjamg2aWpjMnYwMjF0Mnd0ZmFkaWs0YzN0In0.qyiDXCvvSj3O4XvPsSiBkA', attribution: '© OpenStreetMap contributors', map: null, @@ -199,28 +199,28 @@ export default { show: false, mapLoaded: false, buildingOptions: { - onEachFeature: ( feature, layer ) => { - layer.on( 'click', e => { + onEachFeature: (feature, layer) => { + layer.on('click', e => { this.building_compare_error = false - this.polyClick( e.target.feature.properties.id, e.target.feature, layer.getBounds().getCenter() ) - } ) - layer.on( 'mouseover', e => { - if ( !e.target.setStyle ) return + this.polyClick(e.target.feature.properties.id, e.target.feature, layer.getBounds().getCenter()) + }) + layer.on('mouseover', e => { + if (!e.target.setStyle) return e.target.oldStyle = { fillColor: e.target.options.fillColor, color: e.target.options.color } - e.target.setStyle( { fillColor: '#000', color: '#000' } ) - e.target.bindTooltip( this.$store.getters['map/building']( e.target.feature.properties.id ).name ).openTooltip() - } ) - layer.on( 'mouseout', e => { - if ( !e.target.setStyle ) return - e.target.setStyle( { ...e.target.oldStyle } ) - } ) + e.target.setStyle({ fillColor: '#000', color: '#000' }) + e.target.bindTooltip(this.$store.getters['map/building'](e.target.feature.properties.id).name).openTooltip() + }) + layer.on('mouseout', e => { + if (!e.target.setStyle) return + e.target.setStyle({ ...e.target.oldStyle }) + }) }, style: feature => { var color = '#000' - switch ( feature.properties.group ) { + switch (feature.properties.group) { case 'Residence': color = '#D3832B' break @@ -254,138 +254,138 @@ export default { } }, methods: { - polyClick: function ( id, feature, center ) { - if ( !this.askingForComparison ) { - window.vue.$store.dispatch( 'modalController/openModal', { + polyClick: function (id, feature, center) { + if (!this.askingForComparison) { + window.vue.$store.dispatch('modalController/openModal', { name: 'map_side_view', id: id - } ) + }) } else { - if ( this.askingForComparison && this.compareStories.indexOf( id ) < 0 ) { + if (this.askingForComparison && this.compareStories.indexOf(id) < 0) { const data = "" - const formed = encodeURI( 'data:image/svg+xml,' + data ).replace( /#/g, '%23' ) - const checkIcon = L.icon( { + const formed = encodeURI('data:image/svg+xml,' + data).replace(/#/g, '%23') + const checkIcon = L.icon({ iconUrl: formed, iconSize: [20, 20], shadowUrl: '' - } ) - const marker = L.marker( center, { + }) + const marker = L.marker(center, { icon: checkIcon, bubblingMouseEvents: true, interactive: false - } ).addTo( this.map ) + }).addTo(this.map) marker.buildingId = id - this.compareMarkers.push( marker ) - this.compareStories.push( id ) - } else if ( this.askingForComparison ) { - const removingMarkerIndex = this.compareMarkers.findIndex( e => e.buildingId === id ) - if ( removingMarkerIndex === -1 ) { + this.compareMarkers.push(marker) + this.compareStories.push(id) + } else if (this.askingForComparison) { + const removingMarkerIndex = this.compareMarkers.findIndex(e => e.buildingId === id) + if (removingMarkerIndex === -1) { return } - const marker = this.compareMarkers.splice( removingMarkerIndex, 1 )[0] - this.map.removeLayer( marker ) - this.compareStories.splice( this.compareStories.indexOf( id ), 1 ) + const marker = this.compareMarkers.splice(removingMarkerIndex, 1)[0] + this.map.removeLayer(marker) + this.compareStories.splice(this.compareStories.indexOf(id), 1) } } }, resetMap () { - this.map.setView( L.latLng( DEFAULT_LAT, DEFAULT_LON ), DEFAULT_ZOOM ) - for ( let layer of Object.values( this.map._layers ) ) { + this.map.setView(L.latLng(DEFAULT_LAT, DEFAULT_LON), DEFAULT_ZOOM) + for (let layer of Object.values(this.map._layers)) { layer.unbindTooltip() } }, - getResult ( searchResult ) { - for ( let layer of Object.values( this.map._layers ) ) { + getResult (searchResult) { + for (let layer of Object.values(this.map._layers)) { layer.unbindTooltip() } let searchLatLng = searchResult.getBounds().getCenter() searchLatLng.lng = searchLatLng.lng - 0.003 - this.map.setView( L.latLng( searchLatLng ), DEFAULT_ZOOM ) + this.map.setView(L.latLng(searchLatLng), DEFAULT_ZOOM) searchResult - .bindTooltip( searchResult.feature.properties.name, { permanent: true, fillColor: '#000', color: '#000' } ) + .bindTooltip(searchResult.feature.properties.name, { permanent: true, fillColor: '#000', color: '#000' }) .openTooltip() - if ( this.askingForComparison && this.compareStories.indexOf( searchResult.feature.properties.id ) < 0 ) { + if (this.askingForComparison && this.compareStories.indexOf(searchResult.feature.properties.id) < 0) { const data = "" - const formed = encodeURI( 'data:image/svg+xml,' + data ).replace( /#/g, '%23' ) + const formed = encodeURI('data:image/svg+xml,' + data).replace(/#/g, '%23') let searchCenter = searchResult.getBounds().getCenter() - const checkIcon = L.icon( { + const checkIcon = L.icon({ iconUrl: formed, iconSize: [20, 20], shadowUrl: '' - } ) - const marker = L.marker( searchCenter, { + }) + const marker = L.marker(searchCenter, { icon: checkIcon, bubblingMouseEvents: true, interactive: false - } ).addTo( this.map ) + }).addTo(this.map) marker.buildingId = searchResult.feature.properties.id - this.compareMarkers.push( marker ) - this.compareStories.push( searchResult.feature.properties.id ) - } else if ( this.askingForComparison ) { + 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 ) { + 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 ) + 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 ) ) { + for (let layer of Object.values(this.map._layers)) { layer.unbindTooltip() } }, removeAllMarkers: function () { - for ( let marker of this.compareMarkers ) { - this.map.removeLayer( marker ) + for (let marker of this.compareMarkers) { + this.map.removeLayer(marker) } this.compareMarkers = [] }, - showComparison: async function ( target ) { + showComparison: async function (target) { this.askingForComparison = false this.removeAllMarkers() - if ( this.compareStories[0] === undefined ) { + if (this.compareStories[0] === undefined) { this.compareStories.shift() - if ( this.compareStories[0] === undefined ) { + if (this.compareStories[0] === undefined) { this.showSide = false this.building_compare_error = true } } try { - if ( this.building_compare_error === false ) { - let path = this.$store.getters['map/building']( this.compareStories[0] ).path + 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 + 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', { + 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', { + }) + window.vue.$store.dispatch('modalController/openModal', { name: 'map_compare_side', path: path - } ) + }) } else { - this.$router.push( { - path: `/compare/${encodeURI( JSON.stringify( this.compareStories ) )}/2` - } ) + this.$router.push({ + path: `/compare/${encodeURI(JSON.stringify(this.compareStories))}/2` + }) } } - } catch ( err ) { + } catch (err) { // uncomment this to see exact errors in debug // console.error(err) this.showSide = false @@ -393,23 +393,23 @@ export default { this.compareStories.shift() } }, - startCompare: function ( buildingId ) { + startCompare: function (buildingId) { this.building_compare_error = false this.showSide = false this.askingForComparison = true this.compareStories = [] - this.compareStories.push( buildingId ) + this.compareStories.push(buildingId) const data = " " - const formed = encodeURI( 'data:image/svg+xml,' + data ).replace( /#/g, '%23' ) - const checkIcon = L.icon( { + const formed = encodeURI('data:image/svg+xml,' + data).replace(/#/g, '%23') + const checkIcon = L.icon({ iconUrl: formed, iconSize: [20, 20], shadowUrl: '' - } ) + }) let center = null - for ( let layer of Object.values( this.map._layers ) ) { + for (let layer of Object.values(this.map._layers)) { if ( layer.feature && layer.feature.geometry && @@ -419,16 +419,16 @@ export default { center = layer.getBounds().getCenter() } } - if ( !center ) { + if (!center) { return } - const marker = L.marker( center, { + const marker = L.marker(center, { icon: checkIcon, bubblingMouseEvents: true, interactive: false - } ).addTo( this.map ) + }).addTo(this.map) marker.buildingId = buildingId - this.compareMarkers.push( marker ) + this.compareMarkers.push(marker) }, stopCompare: function () { this.askingForComparison = false @@ -443,98 +443,98 @@ export default { this.compareStories = [] this.removeAllMarkers() }, - isDisplayed: function ( v ) { - if ( this.selected.indexOf( v ) >= 0 ) { + isDisplayed: function (v) { + if (this.selected.indexOf(v) >= 0) { return true } else { return false } }, - handleSelect: function ( string ) { - if ( this.selected.indexOf( string ) >= 0 ) { - this.selected.splice( this.selected.indexOf( string ), 1 ) + handleSelect: function (string) { + if (this.selected.indexOf(string) >= 0) { + this.selected.splice(this.selected.indexOf(string), 1) } else { - this.selected.push( string ) + this.selected.push(string) } }, - computedColor: function ( percentage ) { + computedColor: function (percentage) { // #d62326 - Bottom Red // #19a23a - Top Green - const redInt = [parseInt( '0xd6', 16 ), parseInt( '0x23', 16 ), parseInt( '0x26', 16 )] - const greenInt = [parseInt( '0x19', 16 ), parseInt( '0xa2', 16 ), parseInt( '0x3a', 16 )] + const redInt = [parseInt('0xd6', 16), parseInt('0x23', 16), parseInt('0x26', 16)] + const greenInt = [parseInt('0x19', 16), parseInt('0xa2', 16), parseInt('0x3a', 16)] const typicalColor = [redInt[0] - greenInt[0], greenInt[1] - redInt[1], greenInt[2] - redInt[2]] - const compare = Math.abs( percentage ) / 0.01 + const compare = Math.abs(percentage) / 0.01 const result = [] - if ( percentage < -0.01 ) { - result.push( greenInt[0] ) - result.push( greenInt[1] ) - result.push( greenInt[2] ) - } else if ( percentage > 0.01 ) { - result.push( redInt[0] ) - result.push( redInt[1] ) - result.push( redInt[2] ) - } else if ( percentage < 0 ) { - result.push( Math.round( typicalColor[0] - redInt[0] * compare ) ) - result.push( Math.round( typicalColor[1] + redInt[1] * compare ) ) - result.push( Math.round( typicalColor[2] + redInt[2] * compare ) ) + if (percentage < -0.01) { + result.push(greenInt[0]) + result.push(greenInt[1]) + result.push(greenInt[2]) + } else if (percentage > 0.01) { + result.push(redInt[0]) + result.push(redInt[1]) + result.push(redInt[2]) + } else if (percentage < 0) { + result.push(Math.round(typicalColor[0] - redInt[0] * compare)) + result.push(Math.round(typicalColor[1] + redInt[1] * compare)) + result.push(Math.round(typicalColor[2] + redInt[2] * compare)) } else { - result.push( Math.round( typicalColor[0] + greenInt[0] * compare ) ) - result.push( Math.round( typicalColor[1] - greenInt[1] * compare ) ) - result.push( Math.round( typicalColor[2] - greenInt[2] * compare ) ) + result.push(Math.round(typicalColor[0] + greenInt[0] * compare)) + result.push(Math.round(typicalColor[1] - greenInt[1] * compare)) + result.push(Math.round(typicalColor[2] - greenInt[2] * compare)) } return 'rgb(' + result[0].toString() + ',' + result[1].toString() + ',' + result[2].toString() + ')' } }, async created () { - await this.$store.dispatch( 'map/loadGeometry' ) + await this.$store.dispatch('map/loadGeometry') this.mapLoaded = true this.message = window.innerWidth > 844 - EventBus.$on( 'inputData', inputWord => { + EventBus.$on('inputData', inputWord => { this.message = inputWord - } ) - this.map.zoomControl.setPosition( 'topleft' ) + }) + this.map.zoomControl.setPosition('topleft') }, mounted () { - this.$nextTick( () => { + this.$nextTick(() => { this.map = this.$refs.map.mapObject - } ) + }) }, watch: { - selectedOption ( energyFilter ) { + selectedOption (energyFilter) { this.rKey++ - this.$nextTick( () => { + this.$nextTick(() => { this.map = this.$refs.map.mapObject - for ( var layerKey of Object.keys( this.map._layers ) ) { + for (var layerKey of Object.keys(this.map._layers)) { let layer = this.map._layers[layerKey] - if ( layer.feature && energyFilter !== 'All' ) { - let descArray = this.$store.getters['map/building']( layer.feature.properties.id ).description.split( ', ' ) + 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 ( energyFilter.includes( descArray[i] ) ) { + for (let i = 0; i < descArray.length; i++) { + if (energyFilter.includes(descArray[i])) { descLength += 1 } } - if ( descLength === 0 ) { - this.map.removeLayer( layer ) + if (descLength === 0) { + this.map.removeLayer(layer) } } } - } ) + }) }, grouping: { - handler: function ( value ) { + handler: function (value) { this.search = '' this.rKey++ this.mapLoaded = false - this.$nextTick( async () => { + this.$nextTick(async () => { this.map = this.$refs.map.mapObject let promises = [] - for ( var layerKey of Object.keys( this.map._layers ) ) { + for (var layerKey of Object.keys(this.map._layers)) { let layer = this.map._layers[layerKey] - if ( layer.feature ) { - if ( this.grouping === 'Category' ) { + if (layer.feature) { + if (this.grouping === 'Category') { var color = '#000' - switch ( layer.feature.properties.group ) { + switch (layer.feature.properties.group) { case 'Academics': color = '#0D5257' break @@ -556,10 +556,10 @@ export default { default: break } - layer.setStyle( { fillColor: color, color: color } ) - } else if ( this.grouping === 'Energy Trend' ) { + layer.setStyle({ fillColor: color, color: color }) + } else if (this.grouping === 'Energy Trend') { promises.push( - new Promise( async ( resolve, reject ) => { + new Promise(async (resolve, reject) => { /* Ok, it *looks like* each Vuex logical object (building, chart, block, etc.) contains a promise to resolve the data required from the api. Unsure if @@ -567,47 +567,47 @@ export default { */ await this.$store.getters['map/promise'] // Retrieves building object from store using leaflet property id - let building = this.$store.getters['map/building']( layer.feature.properties.id ) + let building = this.$store.getters['map/building'](layer.feature.properties.id) await this.$store.getters[building.path + '/promise'] - let mg = this.$store.getters[building.path + '/primaryGroup']( 'Electricity' ) - if ( mg == null ) { - console.error( building.name, building.path, building ) + let mg = this.$store.getters[building.path + '/primaryGroup']('Electricity') + if (mg == null) { + console.error(building.name, building.path, building) resolve() } - let defaultBlock = this.$store.getters[building.path + '/block']( mg.id ) + let defaultBlock = this.$store.getters[building.path + '/block'](mg.id) await this.$store.getters[defaultBlock.path + '/promise'] let defaultChart = this.$store.getters[defaultBlock.path + '/charts'][0] let currentDate = new Date() - let minus60 = new Date( currentDate.getTime() - 60 * 24 * 60 * 60 * 1000 ) + let minus60 = new Date(currentDate.getTime() - 60 * 24 * 60 * 60 * 1000) const reqPayload = { - dateEnd: parseInt( ( currentDate.getTime() - ( currentDate.getTime() % 900 ) * 1000 ) / 1000 ), - dateStart: parseInt( ( minus60.getTime() - ( minus60.getTime() % 900 ) * 1000 ) / 1000 ), + dateEnd: parseInt((currentDate.getTime() - (currentDate.getTime() % 900) * 1000) / 1000), + dateStart: parseInt((minus60.getTime() - (minus60.getTime() % 900) * 1000) / 1000), intervalUnit: 'day', dateInterval: 1, graphType: 1 } - let data = await this.$store.dispatch( defaultChart.path + '/getData', reqPayload ) + let data = await this.$store.dispatch(defaultChart.path + '/getData', reqPayload) // Below is an algorithm to compute least squares linear regression let meanY = 0 - for ( let index = 0; index < data.data.length; index++ ) { + for (let index = 0; index < data.data.length; index++) { meanY += data.data[index].y } meanY /= data.data.length let meanX = data.data.length / 2 // No need to use date can just use index let accmxx = 0 let accmxxyy = 0 - for ( let index = 0; index < data.data.length; index++ ) { - accmxx += Math.pow( index - meanX, 2 ) // index - meanX - accmxxyy += ( data.data[index].y - meanY ) * ( index - meanX ) + for (let index = 0; index < data.data.length; index++) { + accmxx += Math.pow(index - meanX, 2) // index - meanX + accmxxyy += (data.data[index].y - meanY) * (index - meanX) } // accmxx = let slope = accmxxyy / accmxx let normalizedSlope = slope / meanY // slope /= 30 - layer.setStyle( { - fillColor: this.computedColor( normalizedSlope ), - color: this.computedColor( normalizedSlope ) - } ) + layer.setStyle({ + fillColor: this.computedColor(normalizedSlope), + color: this.computedColor(normalizedSlope) + }) // if (normalizedSlope > 0.001) { // layer.setStyle({ fillColor: '#d62326', color: '#d62326' }) // } else if (normalizedSlope < -0.001) { @@ -616,48 +616,48 @@ export default { // layer.setStyle({ fillColor: '#FFB500', color: '#FFB500' }) // } resolve() - } ) + }) ) } } } - await Promise.all( promises ) + await Promise.all(promises) this.mapLoaded = true - } ) + }) } }, - search: function ( v ) { - if ( v === '' ) { + search: function (v) { + if (v === '') { this.searchGroup = [] return } var searchGroup = [] - for ( let layer of Object.values( this.map._layers ) ) { - if ( layer.feature && layer.feature.geometry && layer.feature.geometry.type === 'Polygon' ) { - layer.feature.properties.name = this.$store.getters['map/building']( layer.feature.properties.id ).name + for (let layer of Object.values(this.map._layers)) { + if (layer.feature && layer.feature.geometry && layer.feature.geometry.type === 'Polygon') { + layer.feature.properties.name = this.$store.getters['map/building'](layer.feature.properties.id).name - if ( layer.feature.properties.name !== undefined ) { - if ( layer.feature.properties.name.toLowerCase().includes( v.toLowerCase() ) ) { - searchGroup.push( layer ) + if (layer.feature.properties.name !== undefined) { + if (layer.feature.properties.name.toLowerCase().includes(v.toLowerCase())) { + searchGroup.push(layer) } } } } this.searchGroup = searchGroup }, - selected: function ( val ) { + selected: function (val) { this.rKey++ - this.$nextTick( () => { + this.$nextTick(() => { this.map = this.$refs.map.mapObject - for ( var layerKey of Object.keys( this.map._layers ) ) { + 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 ) + if (layer.feature) { + if (!val.includes(layer.feature.properties.group) && this.grouping === 'Category') { + this.map.removeLayer(layer) } } } - } ) + }) } } } diff --git a/src/components/map/map_compareside.vue b/src/components/map/map_compareside.vue index 2fa1388f..790faf20 100644 --- a/src/components/map/map_compareside.vue +++ b/src/components/map/map_compareside.vue @@ -88,17 +88,17 @@ export default { }, block: { get () { - let mgId = this.$store.getters[this.path + '/primaryGroup']( 'Electricity' ).id - return this.$store.getters[this.path + '/block']( mgId ) + let mgId = this.$store.getters[this.path + '/primaryGroup']('Electricity').id + return this.$store.getters[this.path + '/block'](mgId) } }, name: { get () { - if ( !this.buildings ) return - let names = this.buildings.map( building => this.$store.getters[building.path + '/name'] ) + if (!this.buildings) return + let names = this.buildings.map(building => this.$store.getters[building.path + '/name']) let r = '' - for ( let index in names ) { - if ( index > 0 ) { + for (let index in names) { + if (index > 0) { r += ' vs ' } r += names[index] @@ -108,16 +108,16 @@ export default { }, buildings: { get () { - if ( !this.block ) return - let buildingIds = this.$store.getters[this.block.path + '/modifierData']( 'building_compare' ).buildingIds - return buildingIds.map( id => this.$store.getters['map/building']( id ) ) + if (!this.block) return + let buildingIds = this.$store.getters[this.block.path + '/modifierData']('building_compare').buildingIds + return buildingIds.map(id => this.$store.getters['map/building'](id)) } }, mediaArray: { get () { - if ( !this.buildings ) return - let buildingImages = this.buildings.map( building => this.$store.getters[building.path + '/image'] ) - while ( buildingImages.length > 4 ) buildingImages.pop() + if (!this.buildings) return + let buildingImages = this.buildings.map(building => this.$store.getters[building.path + '/image']) + while (buildingImages.length > 4) buildingImages.pop() return buildingImages } } @@ -131,24 +131,24 @@ export default { methods: { dateOffset: function () { var d = new Date() - if ( this.currentRange === 0 ) { - d.setDate( d.getDate() - 7 ) - } else if ( this.currentRange === 1 ) { - d.setMonth( d.getMonth() - 1 ) - } else if ( this.currentRange === 2 ) { - d.setFullYear( d.getFullYear() - 1 ) + if (this.currentRange === 0) { + d.setDate(d.getDate() - 7) + } else if (this.currentRange === 1) { + d.setMonth(d.getMonth() - 1) + } else if (this.currentRange === 2) { + d.setFullYear(d.getFullYear() - 1) } return d.toISOString() }, update: function () { this.$refs.lineChartController.parse() }, - classForIndex: function ( index ) { - if ( this.mediaArray.length === 1 ) { + classForIndex: function (index) { + if (this.mediaArray.length === 1) { return 'slantImage unCut' - } else if ( index === 0 ) { + } else if (index === 0) { return 'slantImage leftEnd' - } else if ( index + 1 === this.mediaArray.length || index >= 3 ) { + } else if (index + 1 === this.mediaArray.length || index >= 3) { return 'slantImage rightEnd' } else { return 'slantImage' diff --git a/src/components/map/map_prompt.vue b/src/components/map/map_prompt.vue index db8001d3..96c33dd0 100644 --- a/src/components/map/map_prompt.vue +++ b/src/components/map/map_prompt.vue @@ -33,8 +33,8 @@