[PR] Fix comparison graphs (#253)

* initial comparison fix * commit here for reference, two rows for building pic * if else * good enough for now badly formatted code * comparison background pic gaps fix * warning about electricity only for comparison
OSU-Sustainability-Office · Sep 9, 2023 · f52b37c · f52b37c
1 parent 1bf6a19
commit f52b37c
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 44 deletions.
diff --git 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
diff --git a/src/components/extras/heropicture.vue b/src/components/extras/heropicture.vue
@@ -1,9 +1,44 @@
 <template>
  <el-row class="stage">
  <el-col :span="24" class="main">
- <div element-loading-background="rgba(0, 0, 0, 0.3)" class="background" ref="main">
- <div class="title">{{ name }}</div>
- <div class="subtitle">{{ description }}</div>
+ <div v-if="this.media">
+ <div element-loading-background="rgba(0, 0, 0, 0.3)" class="background" ref="main">
+ <div
+ v-if="this.media[0].length <= 1 || this.media.length <= 1"
+ :style="`background-image:linear-gradient(to right bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2)),url(https://osu-energy-images.s3-us-west-2.amazonaws.com/thumbnails/${this.media}); width:calc(100%); height:100%`"
+ :key="media"
+ ></div>
+
+ <div
+ v-else-if="this.mediaArray.length === 2"
+ v-for="(media, index) in this.media"
+ :class="classForIndex(index)"
+ :style="`background-image:linear-gradient(to right bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2)),url(https://osu-energy-images.s3-us-west-2.amazonaws.com/thumbnails/${media}); width:calc(${
+ 100 / 2
+ }% + 19.5px); height:200px`"
+ :key="media + 2"
+ ></div>
+ <div
+ v-else-if="this.mediaArray.length === 3"
+ v-for="(media, index) in this.media"
+ :class="classForIndex(index)"
+ :style="`background-image:linear-gradient(to right bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2)),url(https://osu-energy-images.s3-us-west-2.amazonaws.com/thumbnails/${media}); width:calc(${
+ 100 / 3
+ }% + 26px); height:200px`"
+ :key="media + 3"
+ ></div>
+ <div
+ v-else-if="this.mediaArray.length >= 4"
+ v-for="(media, index) in this.media"
+ :class="classForIndex(index)"
+ :style="`background-image:linear-gradient(to right bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2)),url(https://osu-energy-images.s3-us-west-2.amazonaws.com/thumbnails/${media}); width:calc(${
+ 100 / 4
+ }% + 29px); height:200px`"
+ :key="media + 4"
+ ></div>
+ <div class="title">{{ name }}</div>
+ <div class="subtitle">{{ description }}</div>
+ </div>
  </div>
  </el-col>
  </el-row>
@@ -18,35 +53,19 @@ export default {
  api: process.env.VUE_APP_ROOT_API
  }
  },
- watch: {
- // imageString is a string containing the image filename in the S3 bucket. ie: mcnary_2.jpg
- media: function ( imageString ) {
- this.$refs.main.style.backgroundImage = ''
- if ( imageString ) {
- this.$refs.main.style.backgroundImage =
- 'linear-gradient(to bottom right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2)), url("https://osu-energy-images.s3-us-west-2.amazonaws.com/' +
- imageString +
- '")'
- } else {
- this.$refs.main.style.backgroundColor = 'rgb(26,26,26)'
+ computed: {
+ mediaArray: {
+ get () {
+ if ( this.media[0].length <= 1 ) return
+ return this.media
  }
  }
  },
- mounted () {
- this.$refs.main.style.backgroundImage = ''
-
- if ( this.media ) {
- this.$refs.main.style.backgroundImage =
- 'linear-gradient(to bottom right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2)),url("https://osu-energy-images.s3-us-west-2.amazonaws.com/' +
- this.media +
- '")'
- } else {
- this.$refs.main.style.backgroundColor = 'rgb(26,26,26)'
- }
- },
  methods: {
  classForIndex: function ( index ) {
- if ( this.media.length === 1 ) {
+ if ( !this.mediaArray.length ) {
+ return 'slantImage unCut'
+ } else if ( this.mediaArray.length === 1 ) {
  return 'slantImage unCut'
  } else if ( index === 0 ) {
  return 'slantImage leftEnd'
@@ -82,6 +101,7 @@ export default {
  background-repeat: no-repeat;
  white-space: nowrap;
  overflow: hidden;
+ background-color: rgba(0, 0, 0, 0.3);
 }
 .title {
  font-family: 'StratumNo2';

diff --git a/src/components/map/map_compareside.vue b/src/components/map/map_compareside.vue
@@ -10,19 +10,19 @@
  <el-row class="stage_compareside">
  <el-col :span="24" class="innerContent">
  <el-row class="title">
- <el-col :span="23">
+ <el-col :span="22">
  <span>{{ name }} </span>
  </el-col>
- <el-col :span="1" class="close-box"><i class="fas fa-times" @click="$emit('hide')"></i></el-col>
+ <div class="close-box"><i class="fas fa-times" @click="$emit('hide')"></i></div>
  </el-row>
  <el-row class="pics" v-loading="mediaArray.length < 0" element-loading-background="rgba(0, 0, 0, 0.8)">
  <el-col :span="24" class="nowrap">
  <div
  v-for="(media, index) in mediaArray"
  :class="classForIndex(index)"
- :style="`background-image:url(${api}/image?name=${media}); width:calc(${100 / mediaArray.length}% + ${
- index === 0 ? '22.5px' : '55px'
- });`"
+ :style="`background-image:url(https://osu-energy-images.s3-us-west-2.amazonaws.com/thumbnails/${media}); width:calc(${
+ 100 / mediaArray.length
+ }% + ${index === 0 ? '22.5px' : '55px'});`"
  :key="media"
  ></div>
  </el-col>
@@ -42,7 +42,8 @@
  'margin-right': '10px',
  'margin-left': '10px'
  }"
- :height="300"
+ :height="225"
+ :invertColors="true"
  />
  </el-col>
  </el-row>
@@ -160,13 +161,10 @@ export default {
 .stage_compareside {
  position: absolute;
  top: 0;
- left: 250px;
- width: calc(100% - 250px);
+ left: 29.5%;
+ width: 420px;
  z-index: 401;
- padding-left: 200px;
- padding-right: 20px;
- padding-top: 50px;
- padding-bottom: 50px;
+ padding-top: 10px;
 }
 .innerContent {
  position: relative;

diff --git a/src/components/map/map_prompt.vue b/src/components/map/map_prompt.vue
@@ -10,7 +10,10 @@
  <el-row class="stage_prompt">
  <el-col :span="24">
  <el-row>
- <el-col class="text"> Select buildings to compare </el-col>
+ <el-col class="text">
+ Select buildings to compare. <br /><br />
+ <el-row>NOTE: Only buildings with Electricity data are valid for comparison!</el-row>
+ </el-col>
  </el-row>
  <el-row>
  <el-col>

diff --git a/src/components/view/view.vue b/src/components/view/view.vue
@@ -156,7 +156,7 @@ export default {
  const view = {
  name: '',
  image: [],
- description: 'Electrcity',
+ description: 'Electricity',
  id: -1
  }
  for ( let index in this.compareBuildings ) {
@@ -236,8 +236,12 @@ export default {
  energy absorbed over a time frame, so any range greater than an hour will make ChartJS
  produce a trendline of zero (horizontal line) which isn't particularly useful for anyone.
  */
- const isSolar =
- this.$store.getters[`map/building_${this.$route.params.id}/meterGroups`][0].type === 'Solar Panel'
+ let isSolar = ''
+ if ( this.$store.getters[`map/building_${this.$route.params.id}/meterGroups`] ) {
+ isSolar = this.$store.getters[`map/building_${this.$route.params.id}/meterGroups`][0].type === 'Solar Panel'
+ } else {
+ isSolar = false
+ }
 
  switch ( parseInt( this.$route.params.range ) ) {
  case 1: