[PR] compare buildings button on map page

src/components/leftBuildingMenu.vue

@@ -58,5 +58,6 @@ export default {
  opacity: 1;
  justify-content: center;
  z-index: 500;
+ height: 40px;
 }
 </style>

src/components/map/compareButton.vue

@@ -0,0 +1,39 @@
+<template>
+ <button class="bigButton" @click="$emit('startCompare')">Compare Buildings</button>
+</template>
+
+<script>
+export default {
+ name: 'compareButton',
+ props: {},
+ components: {}
+}
+</script>
+<style scoped lang="scss">
+.bigButton {
+ font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
+ sans-serif;
+ display: flex;
+ align-items: center;
+ position: absolute;
+ top: 78px;
+ left: 10px;
+ width: 150px;
+ height: 40px;
+ background-color: white;
+ border: 2px solid rgba(0, 0, 0, 0.2);
+ background-clip: padding-box;
+ border-radius: 4.5px;
+ opacity: 1;
+ justify-content: center;
+ z-index: 500;
+ cursor: pointer;
+ font-size: 15px;
+}
+@media only screen and (max-width: 600px) {
+ .bigButton {
+ width: 170px;
+ left: 0px;
+ }
+}
+</style>

src/components/map/map.vue

@@ -77,6 +77,7 @@
  <div class="mapContainer" ref="mapContainer" v-loading="!mapLoaded">
  <l-map style="height: 100%; width: 100%" :zoom="zoom" :center="center" ref="map">
  <button class="resetMapButton" @click="resetMap()">Reset Map</button>
+ <compareButton @startCompare="startCompare"></compareButton>
  <div @click="resetSearchInput()">
  <leftBuildingMenu class="hideMenuButton" />
  </div>
@@ -91,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>
@@ -101,7 +103,9 @@
 <script>
 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'
@@ -125,9 +129,11 @@ export default {
  sideView,
  LGeoJson,
  prompt,
+ prompt_error,
  compareSide,
  switchButtons,
- leftBuildingMenu
+ leftBuildingMenu,
+ compareButton
  },
  computed: {
  showSide: {
@@ -167,6 +173,7 @@ export default {
  rKey: 1,
  message: this.message,
  askingForComparison: false,
+ building_compare_error: false,
  selected: [
  'Residence',
  'Athletics & Rec',
@@ -301,7 +308,18 @@ export default {
  showComparison: async function ( target ) {
  this.askingForComparison = false
  this.removeAllMarkers()
+ if ( this.compareStories[0] === undefined ) {
+ this.compareStories.shift()
+ if ( this.compareStories[0] === undefined ) {
+ this.showSide = false
+ this.building_compare_error = true
+ }
+ }
  let path = this.$store.getters['map/building']( this.compareStories[0] ).path
+ 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
 
@@ -366,6 +384,13 @@ export default {
  this.compareStories = []
  this.removeAllMarkers()
  },
+ stopCompareError: function () {
+ this.building_compare_error = false
+ this.showSide = true
+ this.askingForComparison = true
+ this.compareStories = []
+ this.removeAllMarkers()
+ },
  isDisplayed: function ( v ) {
  if ( this.selected.indexOf( v ) >= 0 ) {
  return true
@@ -593,11 +618,10 @@ $sideMenu-width: 250px;
 .sideMenu {
  background-color: $--color-black;
  position: absolute;
- left: 0;
  z-index: 2000;
  width: $sideMenu-width - 10px;
  padding-top: 0.5em;
- top: 110px;
+ top: 170px;
 }
 
 ::v-deep .el-menu-item-group__title {
@@ -626,7 +650,7 @@ $sideMenu-width: 250px;
 .hideMenuButton {
  display: flex;
  position: absolute;
- top: 80px;
+ top: 125px;
  left: 10px;
 }
 .side-enter-active,

src/components/map/map_prompt.vue

@@ -45,7 +45,7 @@ export default {
  height: 150px;
  position: absolute;
  top: 20px;
- left: calc(50% - 150px);
+ left: calc(50% - 200px);
  background-color: rgba(0, 0, 0, 0.8);
  color: $--color-white;
  z-index: 402;
@@ -66,4 +66,12 @@ export default {
 .button:active {
  border: solid 1px $--color-white;
 }
+@media only screen and (max-width: 600px) {
+ .stage_prompt {
+ top: 80px;
+ width: 330px;
+ left: 250px;
+ height: 180px;
+ }
+}
 </style>

src/components/map/prompt_error.vue

@@ -0,0 +1,59 @@
+<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-button class="button" type="info" @click="$emit('cancel')">Go back</el-button>
+ </el-col>
+ </el-row>
+ </el-col>
+ </el-row>
+</template>
+<script>
+export default {}
+</script>
+<style lang="scss" scoped>
+.stage_prompt {
+ width: 400px;
+ height: 150px;
+ position: absolute;
+ top: 20px;
+ left: calc(50% - 200px);
+ 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;
+}
+@media only screen and (max-width: 600px) {
+ .stage_prompt {
+ top: 80px;
+ width: 330px;
+ left: 250px;
+ height: 180px;
+ }
+}
+</style>