multiple energy type graphs for one building multiple time periods. F…

…ix map prompt number of buildings

src/components/map/map.vue

@@ -375,6 +375,11 @@ export default {
  try {
  if (this.building_compare_error === false) {
  let path = this.$store.getters['map/building'](this.compareStories[0]).path
+ if (target !== 'q' && this.compareStories.length === 1) {
+ this.$router.push({
+ path: `/compare/${encodeURI(JSON.stringify(this.compareStories))}/2`
+ })
+ }
  let mgId = this.$store.getters[path + '/primaryGroup']('Electricity').id
  let blockSpace = this.$store.getters[path + '/block'](mgId).path
  await this.$store.dispatch(blockSpace + '/removeAllModifiers')
@@ -391,7 +396,7 @@ export default {
  name: 'map_compare_side',
  path: path
  })
- } else {
+ } else if (target !== 'q' && this.compareStories.length > 1) {
  this.$router.push({
  path: `/compare/${encodeURI(JSON.stringify(this.compareStories))}/2`
  })
@@ -410,7 +415,9 @@ export default {
  this.showSide = false
  this.askingForComparison = true
  this.compareStories = []
- this.compareStories.push(buildingId)
+ if (buildingId !== undefined) {
+ this.compareStories.push(buildingId)
+ }
 
  const data =
  "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><circle cx='256' cy='256' r='246' fill='#D73F09' stroke='#FFF' stroke-width='20'/> <path transform='scale(0.7 0.7) translate(76.8 86.8)' fill='#FFF' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'></path></svg>"

src/components/map/map_prompt.vue

@@ -11,23 +11,36 @@
  <el-col :span="24">
  <el-row>
  <el-col class="text">
- Select buildings by clicking on map or using building menu search bar. <br /><br />
- Select a single building to compare multiple time periods for that building. <br /><br />
- <el-row>NOTE: Only buildings with Electricity data are valid for comparison!</el-row>
+ Select buildings by clicking on map or using building menu search bar.<br /><br />
+ Select one building (Any Energy Type) for comparison across multiple time periods <br /><br />
+ Select multiple buildings (Electricity) to be compared across a single time period<br /><br />
  </el-col>
  </el-row>
  <el-row>
  <el-col>
- <el-dropdown split-button type="info" class="button" @click="handle('q')" @command="handle">
- Compare
+ <el-dropdown
+ split-button
+ type="info"
+ class="button"
+ v-if="compareStories && compareStories.length !== 1"
+ @click="handle('q')"
+ @command="handle"
+ >
+ Compare ({{ Math.min(4, compareStories.length) }} Buildings)
  <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-item v-if="compareStories && compareStories.length <= 2" command="t"
- >Compare Multiple Time Periods
- </el-dropdown-item>
  </el-dropdown-menu>
  </el-dropdown>
+ <el-button
+ type="info"
+ class="button"
+ v-if="compareStories && compareStories.length === 1"
+ @click="handle('d')"
+ @command="handle"
+ >
+ Compare (1 Building)
+ </el-button>
  <el-button class="button" type="info" @click="$emit('cancel')">Cancel</el-button>
  </el-col>
  </el-row>
@@ -80,7 +93,7 @@ export default {
  top: 100px;
  width: 330px;
  left: 250px;
- height: 360px;
+ height: 380px;
  }
 }
 </style>

src/components/map/prompt_error.vue

@@ -5,8 +5,8 @@
  <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
+ >You have either not selected any buildings for comparison, or you have included a non-electric building
+ (for multiple buildings comparison).</el-row
  >
  </el-col>
  </el-row>
@@ -24,7 +24,7 @@ export default {}
 <style lang="scss" scoped>
 .stage_prompt {
  width: 400px;
- height: 150px;
+ height: 170px;
  position: absolute;
  top: 20px;
  left: calc(50% - 200px);
@@ -53,7 +53,7 @@ export default {}
  top: 80px;
  width: 330px;
  left: 250px;
- height: 180px;
+ height: 200px;
  }
 }
 </style>

src/components/view/modals/edit_card.vue

@@ -255,7 +255,7 @@
  v-if="compareOneBuildingView"
  class="item"
  effect="dark"
- content='Click to add time period (not saved until you click "Ok")'
+ content='Add at least 2 time periods to compare. Not saved until you click "Ok"'
  placement="top"
  >
  <el-button @click="timeSave()" type="primary"> Add Time Period </el-button>
@@ -492,6 +492,7 @@ export default {
  },
 
  updateForm: function () {
+ this.cancelTimeSave()
  const blockPath = this.$store.getters['modalController/data'].path
  if (blockPath) {
  this.form.new = false

src/components/view/navdir.vue

@@ -50,7 +50,7 @@
  <span v-if="otherView"> &nbsp; </span>
  </el-col>
  <el-col :span="4" class="buttons">
- <el-tooltip v-if="electricBuilding" content="Click to compare multiple time periods">
+ <el-tooltip v-if="isBuilding" content="Click to compare multiple time periods">
  <i class="fas fa-clock" @click="compareTimePeriods()"></i>
  </el-tooltip>
  <el-tooltip content="Click to copy share link">
@@ -168,14 +168,15 @@ export default {
  return false
  }
  },
- // this checks if the building has electricity data or not
- electricBuilding: {
+ // this checks if page is in /building path
+ isBuilding: {
  get () {
  try {
- let path = this.$store.getters['map/building'](this.$route.params.id).path
- // eslint-disable-next-line
- let mgId = this.$store.getters[path + '/primaryGroup']('Electricity').id
- return true
+ if (this.$store.getters['map/building'](this.$route.params.id).path) {
+ return true
+ } else {
+ return false
+ }
  } catch (err) {
  return false
  }

src/components/view/view.vue

@@ -90,7 +90,7 @@ export default {
  for (let card of this.cards) {
  if (!card.path) return
  this.$nextTick(() => {
- let blockpath = this.cards[0].path
+ let blockpath = card.path
  let searchTerm = 'block_'
  let chartIndex = blockpath.indexOf(searchTerm)
  let blockID = blockpath.slice(chartIndex + searchTerm.length)
@@ -104,33 +104,66 @@ export default {
  handler: async function (buildings) {
  if (this.$route.path.includes('compare')) {
  // this.cards array only has one element in it
- if (this.cards.length > 0 && this.cards[0]) {
- // console.log(buildings.map(building => building.id))
- // console.log(this.cards[0].path)
- await this.$store.dispatch(this.cards[0].path + '/removeAllModifiers')
- // addModifier and updateModifier below call block.module.js, which then calls building_compare.mod.js
- await this.$store.dispatch(this.cards[0].path + '/addModifier', 'building_compare')
+ if (buildings.length > 1) {
+ if (this.cards.length > 0 && this.cards[0]) {
+ // console.log(buildings.map(building => building.id))
+ // console.log(this.cards[0].path)
+ await this.$store.dispatch(this.cards[0].path + '/removeAllModifiers')
+ // addModifier and updateModifier below call block.module.js, which then calls building_compare.mod.js
+ await this.$store.dispatch(this.cards[0].path + '/addModifier', 'building_compare')
 
- // Full call order: view.vue's compareBuildings() > block.module.js's updateModifier >
- // building_compare.mod.js's updateData() > building_compare.mod.js's addCharts() > block.module.js's loadCharts()
+  // Full call order: view.vue's compareBuildings() > block.module.js's updateModifier >
+  // building_compare.mod.js's updateData() > building_compare.mod.js's addCharts() > block.module.js's loadCharts()
 
- // Alternatively (building_compare_mod.js's updateData calls two things):
- // view.vue's compareBuildings() > block.module.js's updateModifier > building_compare.mod.js's updateData() >
- // building_compare.mod.js's removeOldCharts() > block.module.js's unloadChart()
+  // Alternatively (building_compare_mod.js's updateData calls two things):
+  // view.vue's compareBuildings() > block.module.js's updateModifier > building_compare.mod.js's updateData() >
+  // building_compare.mod.js's removeOldCharts() > block.module.js's unloadChart()
 
- // console.log(this.cards[0].path)
- // Example this.cards[0].path: map/building_29/block_79
+  // console.log(this.cards[0].path)
+  // Example this.cards[0].path: map/building_29/block_79
 
- // Example call order: map.module.js's map() getter > building.module.js's building() getter >
- // block.module's updateModifier function (I think)
- await this.$store.dispatch(this.cards[0].path + '/updateModifier', {
- name: 'building_compare',
- data: {
- // buildingIds below defines which buildingId are sent to block.module.js and then building_compare.mod.js,
- // which also affects chartSpace naming (duplicate chart path triggers error)
- buildingIds: buildings.map(building => building.id)
+ // Example call order: map.module.js's map() getter > building.module.js's building() getter >
+ // block.module's updateModifier function (I think)
+ await this.$store.dispatch(this.cards[0].path + '/updateModifier', {
+ name: 'building_compare',
+ data: {
+ // buildingIds below defines which buildingId are sent to block.module.js and then building_compare.mod.js,
+ // which also affects chartSpace naming (duplicate chart path triggers error)
+ buildingIds: buildings.map(building => building.id)
+ }
+ })
+ }
+ } else {
+ for (let i in this.cards) {
+ if (this.cards.length > 0 && this.cards[i]) {
+ // console.log(buildings.map(building => building.id))
+ // console.log(this.cards[0].path)
+ await this.$store.dispatch(this.cards[i].path + '/removeAllModifiers')
+ // addModifier and updateModifier below call block.module.js, which then calls building_compare.mod.js
+ await this.$store.dispatch(this.cards[i].path + '/addModifier', 'building_compare')
+
+ // Full call order: view.vue's compareBuildings() > block.module.js's updateModifier >
+ // building_compare.mod.js's updateData() > building_compare.mod.js's addCharts() > block.module.js's loadCharts()
+
+ // Alternatively (building_compare_mod.js's updateData calls two things):
+ // view.vue's compareBuildings() > block.module.js's updateModifier > building_compare.mod.js's updateData() >
+ // building_compare.mod.js's removeOldCharts() > block.module.js's unloadChart()
+
+ // console.log(this.cards[0].path)
+ // Example this.cards[0].path: map/building_29/block_79
+
+ // Example call order: map.module.js's map() getter > building.module.js's building() getter >
+ // block.module's updateModifier function (I think)
+ await this.$store.dispatch(this.cards[i].path + '/updateModifier', {
+ name: 'building_compare',
+ data: {
+ // buildingIds below defines which buildingId are sent to block.module.js and then building_compare.mod.js,
+ // which also affects chartSpace naming (duplicate chart path triggers error)
+ buildingIds: buildings.map(building => building.id)
+ }
+ })
  }
- })
+ }
  }
  }
  }
@@ -168,7 +201,7 @@ export default {
  for (let card of this.cards) {
  if (!card.path) return
  this.$nextTick(() => {
- let blockpath = this.cards[0].path
+ let blockpath = card.path
  let searchTerm = 'block_'
  let chartIndex = blockpath.indexOf(searchTerm)
  let blockID = blockpath.slice(chartIndex + searchTerm.length)
@@ -238,14 +271,24 @@ export default {
  }
  // unintuituively, this.compareBuildings[0].block_<some number> has all the comparison charts in it, and
  // every other element in this.compareBuildings is ignored
- // console.log(this.compareBuildings)
- let building = this.$store.getters['map/building'](this.compareBuildings[0].id)
- // console.log(building)
- if (!building) return []
- let group = this.$store.getters[building.path + '/primaryGroup']('Electricity')
- let block = this.$store.getters[building.path + '/block'](group.id)
- if (!block) return []
- return [this.$store.getters[building.path + '/block'](group.id)]
+ console.log(this.compareBuildings)
+ if (this.compareBuildings.length > 1) {
+ let building = this.$store.getters['map/building'](this.compareBuildings[0].id)
+ // console.log(building)
+ if (!building) return []
+ let group = this.$store.getters[building.path + '/primaryGroup']('Electricity')
+ let block = this.$store.getters[building.path + '/block'](group.id)
+ if (!block) return []
+ return [this.$store.getters[building.path + '/block'](group.id)]
+ } else {
+ let building = this.$store.getters['map/building'](this.compareBuildings[0].id)
+ // console.log(building)
+ if (!building) return []
+ // let group = this.$store.getters[building.path + '/primaryGroup']('Electricity')
+ // let block = this.$store.getters[building.path + '/block'](group.id)
+ // if (!block) return []
+ return this.$store.getters[building.path + '/blocks']
+ }
  } else {
  if (!this.view || !this.view.id) return []
  return this.$store.getters[this.view.path + '/blocks']