working proof of concept with edit menu ui

src/components/extras/heropicture.vue

@@ -6,9 +6,9 @@
  <div
  v-if="this.media[0].length <= 1 || this.media.length <= 1"
  :style="`background-image:linear-gradient(to right bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2)),url(https://osu-energy-images.s3-us-west-2.amazonaws.com/thumbnails/${this.media}); width:calc(100%); height:100%`"
- :key="media"
+ :key="media + 1"
  ></div>
-
+ <!-- Add ":key="media + 1" above to prevent compiler warning -->
  <div
  v-else-if="this.mediaArray.length === 2"
  v-for="(media, index) in this.media"

src/components/view/modals/edit_card.vue

@@ -251,7 +251,18 @@
  Delete
  </el-button>
  <el-button @click="cardSave()" type="primary"> Ok </el-button>
- <el-button @click="visible = false" type="info"> Cancel </el-button>
+ <el-button @click="timeSave()" type="primary" v-if="compareOneBuildingView">
+ Save Time Period {{ this.form.tempMultStart.length + 1 }}</el-button
+ >
+ <el-button
+ @click="
+ visible = false
+ cancelTimeSave()
+ "
+ type="info"
+ >
+ Cancel
+ </el-button>
  </span>
  </el-dialog>
 </template>
@@ -268,7 +279,9 @@ export default {
  end: '',
  intUnit: 1,
  graphType: 1,
- sets: []
+ sets: [],
+ tempMultStart: [],
+ tempMultEnd: []
  }
  }
  },
@@ -289,6 +302,12 @@ export default {
  return this.$route.path.includes('compare')
  }
  },
+ // Check only one building is in comparison, e.g. for "save time period" button
+ compareOneBuildingView: {
+ get () {
+ return this.$route.path.includes('compare') && JSON.parse(JSON.stringify(this.form.sets)).length === 1
+ }
+ },
  personalView: {
  get () {
  let viewPath = this.$store.getters['modalController/data'].path
@@ -352,6 +371,7 @@ export default {
  intervalUnit: this.interval(this.form.intUnit)
  })
  } else {
+ console.log(this.form.start)
  this.$store.dispatch(blockPath + '/update', {
  dateStart: this.form.start,
  dateEnd: this.form.end,
@@ -368,7 +388,12 @@ export default {
  for (let index in this.form.sets) {
  if (index < charts.length) {
  const chartPath = charts[index].path
+ // console.log(chartPath)
+ this.form.sets[0].multStart = this.form.tempMultStart
+ this.form.sets[0].multEnd = this.form.tempMultEnd
+ // console.log(this.form.sets[0])
  this.$store.dispatch(chartPath + '/update', this.form.sets[index])
+ // console.log(this.$store.getters[blockPath + '/charts'])
  // update legend name
  // line below is what "resets" the chart name, maybe comment it out but needs more testing
  this.$store.commit(chartPath + '/name', this.$store.getters[chartPath + '/pointString'])
@@ -385,6 +410,18 @@ export default {
  this.visible = false
  },
 
+ timeSave: function () {
+ // Made a dummy temporary state array because directly pushing to this.form.sets[0].multStart caused
+ // issues with state.getters updating too soon, inconsistencies with converting Unix to English in chart.module.js
+ this.form.tempMultStart.push(this.form.start)
+ this.form.tempMultEnd.push(this.form.end)
+ },
+
+ cancelTimeSave: function () {
+ this.form.tempMultStart = []
+ this.form.tempMultEnd = []
+ },
+
  deleteChart: function () {
  this.form.sets.splice(this.currentIndex, 1)
  this.currentIndex = 0
@@ -406,12 +443,30 @@ export default {
 
  this.form.sets = []
  for (let chart of this.$store.getters[blockPath + '/charts']) {
- const chartSet = {
+ console.log(chart)
+ let chartSet = {
  name: chart.name,
  building: this.$store.getters[chart.meterGroupPath + '/building'],
  meter: chart.meterGroupPath,
  point: chart.point
  }
+ if (this.compareOneBuildingView) {
+ let blockpath = this.$store.getters['modalController/data'].path
+ // console.log(blockpath)
+ let searchTerm = 'block_'
+ let chartIndex = blockpath.indexOf(searchTerm)
+ // console.log(blockpath.slice(chartIndex + searchTerm.length))
+ let blockID = blockpath.slice(chartIndex + searchTerm.length)
+ // console.log(this.$store.getters[blockpath + '/chart_' + blockID + '/multStart'])
+ chartSet = {
+ name: chart.name,
+ building: this.$store.getters[chart.meterGroupPath + '/building'],
+ meter: chart.meterGroupPath,
+ point: chart.point,
+ multStart: this.$store.getters[blockpath + '/chart_' + blockID + '/multStart'],
+ multEnd: this.$store.getters[blockpath + '/chart_' + blockID + '/multEnd']
+ }
+ }
  this.form.sets.push(chartSet)
  }
  } else {

src/components/view/view.vue

@@ -75,6 +75,23 @@ export default {
  this.$store.commit(card.path + '/intervalUnit', this.intervalUnit)
  }
  }
+ // Reset multStart and multEnd variables whenever you are on a comparison page for just 1 building
+ let buildingComparisonNumber = JSON.parse(decodeURI(this.$route.params.buildings)).length
+ if (this.$route.path.includes('compare') && buildingComparisonNumber === 1) {
+ for (let card of this.cards) {
+ if (!card.path) return
+ this.$nextTick(() => {
+ let blockpath = this.cards[0].path
+ let searchTerm = 'block_'
+ let chartIndex = blockpath.indexOf(searchTerm)
+ // console.log(blockpath.slice(chartIndex + searchTerm.length))
+ let blockID = blockpath.slice(chartIndex + searchTerm.length)
+ // console.log(blockpath + '/chart_' + blockID + '/multStart')
+ this.$store.commit(blockpath + '/chart_' + blockID + '/clearAndSetMultStart', [this.dateStart])
+ this.$store.commit(blockpath + '/chart_' + blockID + '/clearAndSetMultEnd', [this.dateEnd])
+ })
+ }
+ }
  }
  },
  compareBuildings: {
@@ -83,7 +100,8 @@ export default {
  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(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')
@@ -95,7 +113,7 @@ export default {
  // 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)
+ // 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 >
@@ -115,6 +133,7 @@ export default {
  view: {
  immediate: true,
  handler: async function (value) {
+ console.log(this.cards)
  if (this.$route.path.includes('building')) {
  for (let card of this.cards) {
  if (!card.path) return
@@ -134,13 +153,31 @@ export default {
  for (let card of this.cards) {
  if (!card.path) return
  this.$nextTick(() => {
- console.log(card)
  this.$store.commit(card.path + '/dateStart', this.dateStart)
  this.$store.commit(card.path + '/dateEnd', this.dateEnd)
  this.$store.commit(card.path + '/dateInterval', this.dateInterval)
  this.$store.commit(card.path + '/intervalUnit', this.intervalUnit)
  })
  }
+ // Reset multStart and multEnd variables whenever you are on a comparison page for just 1 building
+ let buildingComparisonNumber = JSON.parse(decodeURI(this.$route.params.buildings)).length
+ // console.log(buildingComparisonNumber)
+ if (this.$route.path.includes('compare') && buildingComparisonNumber === 1) {
+ for (let card of this.cards) {
+ if (!card.path) return
+ this.$nextTick(() => {
+ let blockpath = this.cards[0].path
+ let searchTerm = 'block_'
+ let chartIndex = blockpath.indexOf(searchTerm)
+ // console.log(blockpath.slice(chartIndex + searchTerm.length))
+ let blockID = blockpath.slice(chartIndex + searchTerm.length)
+ // console.log(blockpath + '/chart_' + blockID + '/multStart')
+ this.$store.commit(blockpath + '/chart_' + blockID + '/clearAndSetMultStart', [this.dateStart])
+ this.$store.commit(blockpath + '/chart_' + blockID + '/clearAndSetMultEnd', [this.dateEnd])
+ // console.log(this.$store.getters)
+ })
+ }
+ }
  }
  }
  }
@@ -200,7 +237,7 @@ export default {
  compareBuildings: {
  get () {
  if (!this.$route.path.includes('compare')) return null
- console.log(this.$route.params.buildings)
+ // console.log(this.$route.params.buildings)
  return JSON.parse(decodeURI(this.$route.params.buildings)).map(id => this.$store.getters['map/building'](id))
  }
  },
@@ -212,9 +249,9 @@ 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)
+ // console.log(this.compareBuildings)
  let building = this.$store.getters['map/building'](this.compareBuildings[0].id)
- console.log(building)
+ // 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)

src/store/block.module.js

@@ -102,6 +102,7 @@ const actions = {
 
  async loadCharts (store, charts) {
  for (let chart of charts) {
+ // 12/23/2023 edit: We can bypass the chartSpace issue by using block.module.js's getData() function.
  // Duplicate chartSpace values trigger VueX getter error, need to fix this to support multiple charts
  let chartSpace = 'chart_' + chart.id
  let moduleSpace = store.getters.path + '/' + chartSpace
@@ -132,6 +133,8 @@ const actions = {
  },
 
  async update (store, payload) {
+ console.log(payload)
+ console.log(store.getters)
  if (
  payload.name === store.getters.name &&
  payload.dateInterval === store.getters.dateInterval &&
@@ -153,6 +156,8 @@ const actions = {
  store.commit('graphType', payload.graphType)
  store.commit('dateStart', payload.dateStart)
  store.commit('dateEnd', payload.dateEnd)
+ console.log(payload)
+ console.log(store.getters)
  if (user && user === this.getters['user/onid']) {
  payload.id = store.getters.id
  payload.dateStart = new Date(store.getters.dateStart).toISOString()
@@ -295,7 +300,7 @@ const actions = {
  labels: [],
  datasets: []
  }
- const reqPayload = {
+ let reqPayload = {
  dateStart: parseInt(store.getters.dateStart / 1000),
  dateEnd: parseInt(store.getters.dateEnd / 1000),
  intervalUnit: store.getters.intervalUnit,
@@ -307,10 +312,34 @@ const actions = {
  for (let mod of store.getters.modifiers) {
  await mod.preData(this, store, reqPayload)
  }
+ console.log(store.getters)
  for (let chart of store.getters.charts) {
  if (!chart.path) continue
- chartDataPromises.push(this.dispatch(chart.path + '/getData', reqPayload))
+ // Section below is called whenever you press "Ok" on the Edit Menu or whenever
+ // you load / reload a page with a graph on it.
+ // This allows putting multiple graphs on the same screen without worrying about the
+ // chartSpace issue
+ let multStartArray = JSON.parse(JSON.stringify(chart.multStart))
+ let multEndArray = JSON.parse(JSON.stringify(chart.multEnd))
+ if (multStartArray.length > 1 && multEndArray.length > 1) {
+ for (let i in multStartArray) {
+ reqPayload = {
+ dateStart: parseInt(multStartArray[i] / 1000),
+ dateEnd: parseInt(multEndArray[i] / 1000),
+ intervalUnit: store.getters.intervalUnit,
+ dateInterval: store.getters.dateInterval,
+ graphType: store.getters.graphType,
+ timeZoneOffset: store.getters.timeZoneOffset,
+ // See chart.module.js file for rest of color stuff. Might be a better way to do this
+ color: store.getters.chartColors[parseInt(i) + 1]
+ }
+ chartDataPromises.push(this.dispatch(chart.path + '/getData', reqPayload))
+ }
+ } else {
+ chartDataPromises.push(this.dispatch(chart.path + '/getData', reqPayload))
+ }
  }
+ console.log(chartDataPromises)
  let chartData = await Promise.all(chartDataPromises)
  if (store.getters.graphType !== 100) {
  if (store.getters.graphType === 3 || store.getters.graphType === 4) {

src/store/block_modifiers/building_compare.mod.js

@@ -64,6 +64,7 @@ export default class CompareModifier {
 
  // Also, see block.module's unloadChart (this function calls unloadChart)
  // Consider moving await out of for loop
+ console.log(mod.getters)
  for (let i in ids) {
  if (parseInt(i) !== 0) {
  let id = ids[i]
@@ -75,7 +76,7 @@ export default class CompareModifier {
  async addCharts (store, mod, ids) {
  // where adding new charts for comparison is handled. Either here or maybe in view.vue we need to rework
  // to handle multiple charts of the same building via different chartname or something
- console.log(mod.getters)
+ // console.log(mod.getters)
  let charts = []
  for (let i in ids) {
  // they ignore index of 0 here due to loadDefault function in block.module.js ("Total Electricity" default block),
@@ -125,8 +126,14 @@ export default class CompareModifier {
  if (this.data.buildingIds[0]) {
  data.datasets[0].label = this.buildingName(store, this.data.buildingIds[0])
  }
- // along with the section in edit_card.vue, this also controls how the chart name is updated.
- // comment it out for now just in case
+ // 12/23/2023 EDIT: The below commented out code as is will throw errors, as one building with multiple time periods
+ // means that this.datasets and this.data.buildingIDs will be different lengths.
+ // Need to handle: multiple buildings same timestamps, one building multiple timestamps, one building same timestamps
+ // Need to add: energy labels (e.g. "Net Energy"), timestamp labels (Date X to Date Y)
+ // For energy labels, you can alter chart.module's chartData object in getData(), to change what is sent to data.datatsets
+ // For timestamp labels, to convert Unix timestamp to English, see chartController toDateString()
+ // Also don't know why block.module.js's loadDefault uses "Total Electricity", which is the same thing as
+ // "Net Energy", but named different.
  /*
  for (let i = 0; i < data.datasets.length;) {
  if (this.data.buildingIds[i]) {