[PR] Energy Filters Frontend Revamp (#268)

* poc done but css needs work

* final mobile test then feature done

* remove comments, console logs, reset env

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

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;
 }