From f5aa2f8a3dad890b69da80765ccb02b274e18216 Mon Sep 17 00:00:00 2001
From: Jeff Huang <82061589+solderq35@users.noreply.github.com>
Date: Wed, 4 Oct 2023 18:02:36 -0700
Subject: [PATCH] [PR] Energy Filters Frontend Revamp (#268)

* poc done but css needs work

* final mobile test then feature done

* remove comments, console logs, reset env
---
 .../building_list/building_list.vue           |  5 ++
 src/components/map/map.vue                    | 66 +++++++++++++++----
 2 files changed, 59 insertions(+), 12 deletions(-)

diff --git a/src/components/building_list/building_list.vue b/src/components/building_list/building_list.vue
index c0798a44..b489c12d 100644
--- a/src/components/building_list/building_list.vue
+++ b/src/components/building_list/building_list.vue
@@ -23,6 +23,11 @@
           <el-tabs v-model="openName" class="tab_row" v-if="buildingList" v-loading="this.loading">
             <el-tab-pane v-for="(item, key) in groups" :key="key" :name="key">
               <span slot="label" class="tab_label">{{ key }}</span>
+              <el-radio v-model="search" label="">All</el-radio>
+              <el-radio v-model="search" label="Electricity">Electricity</el-radio>
+              <el-radio v-model="search" label="Steam">Steam</el-radio>
+              <el-radio v-model="search" label="Solar Panel">Solar</el-radio>
+              <el-radio v-model="search" label="Gas">Gas</el-radio>
               <el-row type="flex" justify="left" class="card_flex">
                 <el-col v-for="building in item" :key="building.name" :span="4" class="card_container">
                   <viewCard
diff --git a/src/components/map/map.vue b/src/components/map/map.vue
index 1c7ef0aa..5b61775f 100644
--- a/src/components/map/map.vue
+++ b/src/components/map/map.vue
@@ -50,9 +50,19 @@
           <el-menu-item index="Residence" :class="[isDisplayed('Residence') ? 'active' : 'notactive']"
             ><span class="res swatch"></span>Residence</el-menu-item
           >
-          <el-menu-item index="Solar" :class="[isDisplayed('Solar') ? 'active' : 'notactive']"
-            ><span class="sol swatch"></span>Solar</el-menu-item
+          <el-menu-item index="Operations" :class="[isDisplayed('Operations') ? 'active' : 'notactive']"
+            ><span class="operations swatch"></span>Operations</el-menu-item
           >
+          <div class="energyRadioGroup">
+            <div class="colorByTitle">Energy Type:</div>
+            <div class="energyRadioButtons">
+              <el-radio v-model="selectedOption" label="All">All</el-radio>
+              <el-radio v-model="selectedOption" label="Electricity">Electricity</el-radio>
+              <el-radio v-model="selectedOption" label="Steam">Steam</el-radio>
+              <el-radio v-model="selectedOption" label="Solar Panel">Solar</el-radio>
+              <el-radio v-model="selectedOption" label="Gas">Gas</el-radio>
+            </div>
+          </div>
         </el-menu-item-group>
         <el-menu-item-group v-if="grouping === 'Energy Trend'">
           <el-col class="trendBox">
@@ -157,6 +167,7 @@ export default {
   },
   data () {
     return {
+      selectedOption: 'All',
       searchGroup: [],
       search: '',
       zoom: DEFAULT_ZOOM,
@@ -175,12 +186,12 @@ export default {
       askingForComparison: false,
       building_compare_error: false,
       selected: [
-        'Residence',
         'Athletics & Rec',
         'Dining',
         'Academics',
         'Events & Admin',
-        'Solar',
+        'Operations',
+        'Residence',
         'Stable Trend',
         'Up Trend',
         'Down Trend'
@@ -224,12 +235,12 @@ export default {
             case 'Athletics & Rec':
               color = '#FFB500'
               break
+            case 'Operations':
+              color = '#4169E1'
+              break
             case 'Dining':
               color = '#4A773C'
               break
-            case 'Solar':
-              color = '#4169E1'
-              break
             default:
               break
           }
@@ -448,6 +459,27 @@ export default {
     } )
   },
   watch: {
+    selectedOption ( newVal ) {
+      this.rKey++
+      this.$nextTick( () => {
+        this.map = this.$refs.map.mapObject
+        for ( var layerKey of Object.keys( this.map._layers ) ) {
+          let layer = this.map._layers[layerKey]
+          if ( layer.feature && newVal !== '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 ( newVal.includes( descArray[i] ) ) {
+                descLength += 1
+              }
+            }
+            if ( descLength === 0 ) {
+              this.map.removeLayer( layer )
+            }
+          }
+        }
+      } )
+    },
     grouping: {
       handler: function ( value ) {
         this.search = ''
@@ -462,9 +494,6 @@ export default {
               if ( this.grouping === 'Category' ) {
                 var color = '#000'
                 switch ( layer.feature.properties.group ) {
-                  case 'Residence':
-                    color = '#D3832B'
-                    break
                   case 'Academics':
                     color = '#0D5257'
                     break
@@ -477,9 +506,12 @@ export default {
                   case 'Dining':
                     color = '#4A773C'
                     break
-                  case 'Solar':
+                  case 'Operations':
                     color = '#4169E1'
                     break
+                  case 'Residence':
+                    color = '#D3832B'
+                    break
                   default:
                     break
                 }
@@ -603,6 +635,16 @@ $sideMenu-width: 250px;
   text-align: center;
   font-family: 'stratumno2';
 }
+.energyRadioButtons {
+  margin-left: 20px;
+  margin-top: 15px;
+}
+.energyRadioGroup {
+  margin-top: 20px;
+}
+.el-radio {
+  color: white;
+}
 .stage {
   padding: 0;
   position: absolute;
@@ -715,7 +757,7 @@ $sideMenu-width: 250px;
   background-color: #7a6855b3;
   border-color: #7a6855;
 }
-.active .sol.swatch {
+.active .operations.swatch {
   background-color: #4169e1;
   border-color: #00008b;
 }