From 9a6fd536269f1764aff48246b1f57401ac8640ff Mon Sep 17 00:00:00 2001
From: solderq35 <solderq35@gmail.com>
Date: Sat, 9 Sep 2023 00:32:02 -0700
Subject: [PATCH] good enough for now badly formatted code

---
 src/components/extras/heropicture.vue | 91 ++++++++++++++-------------
 src/components/view/view.vue          |  8 ++-
 2 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/src/components/extras/heropicture.vue b/src/components/extras/heropicture.vue
index 2eff864c..fe94d15e 100644
--- a/src/components/extras/heropicture.vue
+++ b/src/components/extras/heropicture.vue
@@ -1,24 +1,45 @@
 <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"
-        v-if="this.media[0].length <= 1"
-        :style="`background-image:url(https://osu-energy-images.s3-us-west-2.amazonaws.com/thumbnails/${this.media}); width:calc(100%); height:100%`"
-      >
-        <div class="title">{{ name }}</div>
-        <div class="subtitle">{{ description }}</div>
-      </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
-        v-for="(media, index) in this.media"
-        :class="'slantImage leftEnd'"
-        :style="`background-image:url(https://osu-energy-images.s3-us-west-2.amazonaws.com/thumbnails/${media}); width:calc(100%); height:100px`"
-        :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
+            }%); 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
+            }%); 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
+            }%); height:200px`"
+            :key="media + 4"
+          ></div>
+          <div class="title">{{ name }}</div>
+          <div class="subtitle">{{ description }}</div>
+        </div>
+      </div>
     </el-col>
   </el-row>
 </template>
@@ -32,39 +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.length > 0 ) {
-        console.log( this.media )
-        imageString = imageString[0]
-      }
-      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'
diff --git a/src/components/view/view.vue b/src/components/view/view.vue
index b438befd..57a9b245 100644
--- a/src/components/view/view.vue
+++ b/src/components/view/view.vue
@@ -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: