error message

src/components/map/map.vue

@@ -92,6 +92,7 @@
  </l-map>
  </div>
  <prompt v-if="askingForComparison" @cancel="stopCompare" @compare="showComparison" />
+ <prompt_error v-if="building_compare_error" @cancel="stopCompareError" @compare="showComparison" />
  <transition name="side">
  <compareSide v-if="showCompareSide" @hide="showCompareSide = false" :compareStories="compareStories" />
  <sideView ref="sideview" v-if="showSide" @hide="showSide = false" @startCompare="startCompare"></sideView>
@@ -104,6 +105,7 @@ import { LMap, LTileLayer, LGeoJson } from 'vue2-leaflet'
 import sideView from '@/components/map/sideView'
 import compareButton from '@/components/map/compareButton'
 import prompt from '@/components/map/map_prompt'
+import prompt_error from '@/components/map/prompt_error'
 import compareSide from '@/components/map/map_compareside'
 import L from 'leaflet'
 import switchButtons from '@/components/map/switch_buttons'
@@ -127,6 +129,7 @@ export default {
  sideView,
  LGeoJson,
  prompt,
+ prompt_error,
  compareSide,
  switchButtons,
  leftBuildingMenu,
@@ -170,6 +173,7 @@ export default {
  rKey: 1,
  message: this.message,
  askingForComparison: false,
+ building_compare_error: false,
  selected: [
  'Residence',
  'Athletics & Rec',
@@ -307,8 +311,18 @@ export default {
  console.log( this.compareStories[0] )
  if ( this.compareStories[0] === undefined ) {
  this.compareStories.shift()
+ if ( this.compareStories[0] === undefined ) {
+ this.showSide = false
+ this.building_compare_error = true
+ }
  }
+ console.log( this.compareStories[0] )
  let path = this.$store.getters['map/building']( this.compareStories[0] ).path
+ console.log( this.$store.getters['map/building']( this.compareStories[0] ).description )
+ if ( this.$store.getters['map/building']( this.compareStories[0] ).description !== 'Electricity' ) {
+ this.showSide = false
+ this.building_compare_error = true
+ }
  if ( target === 'q' ) {
  let mgId = this.$store.getters[path + '/primaryGroup']( 'Electricity' ).id
 
@@ -373,6 +387,12 @@ export default {
  this.compareStories = []
  this.removeAllMarkers()
  },
+ stopCompareError: function () {
+ this.building_compare_error = false
+ this.showSide = true
+ this.compareStories = []
+ this.removeAllMarkers()
+ },
  isDisplayed: function ( v ) {
  if ( this.selected.indexOf( v ) >= 0 ) {
  return true

src/components/map/prompt_error.vue

@@ -0,0 +1,72 @@
+<!--
+@Author: Brogan Miner <Brogan>
+@Date: 2019-01-03T12:39:57-08:00
+@Email: brogan.miner@oregonstate.edu
+@Last modified by: Brogan
+@Last modified time: 2019-01-27T15:39:07-08:00
+-->
+
+<template>
+ <el-row class="stage_prompt">
+ <el-col :span="24">
+ <el-row>
+ <el-col class="text">
+ ERROR <br />
+ <el-row
+ >You have either not selected any buildings for comparison, or you have included a non-electric
+ building.</el-row
+ >
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col>
+ <el-dropdown split-button type="info" class="button" @click="handle('q')" @command="handle">
+ Compare
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item command="q">Quick Compare</el-dropdown-item>
+ <el-dropdown-item command="d">Compare in FullScreen</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ <el-button class="button" type="info" @click="$emit('cancel')">Cancel</el-button>
+ </el-col>
+ </el-row>
+ </el-col>
+ </el-row>
+</template>
+<script>
+export default {
+ methods: {
+ handle: function ( command ) {
+ this.$emit( 'compare', command )
+ }
+ }
+}
+</script>
+<style lang="scss" scoped>
+.stage_prompt {
+ width: 400px;
+ height: 150px;
+ position: absolute;
+ top: 20px;
+ left: calc(50% - 150px);
+ background-color: rgba(0, 0, 0, 0.8);
+ color: $--color-white;
+ z-index: 402;
+ text-align: center;
+}
+.text {
+ padding: 1.5em;
+ font-size: 20px;
+}
+.button {
+ border: solid 1px $--color-white;
+ border-radius: 5px;
+ margin: 10px;
+}
+.button:hover {
+ border: solid 1px $--color-white;
+}
+.button:active {
+ border: solid 1px $--color-white;
+}
+</style>