From f52b37c994bf23c5a9efcdcc82dcf08d811c1e7f Mon Sep 17 00:00:00 2001
From: Jeff Huang <82061589+solderq35@users.noreply.github.com>
Date: Sat, 9 Sep 2023 14:52:48 -0700
Subject: [PATCH] [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
---
 .env.development                       |  2 +-
 src/components/extras/heropicture.vue  | 74 ++++++++++++++++----------
 src/components/map/map_compareside.vue | 22 ++++----
 src/components/map/map_prompt.vue      |  5 +-
 src/components/view/view.vue           | 10 ++--
 5 files changed, 69 insertions(+), 44 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/extras/heropicture.vue b/src/components/extras/heropicture.vue
index c1bfb0f0..d1af6721 100644
--- 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
index c3415171..2fa1388f 100644
--- 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
index a83757fa..cc3dab41 100644
--- 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
index 0dd7edd8..57a9b245 100644
--- 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: