feat: improve configuration management and chart data handling

- Add `save.svg` and `whitecross.svg` icons to the project assets - Implement a `copy` function in `TaskContent.vue` to copy selected charts and their data streams - Update conditions for creating and removing grid sources in `CanvasChartSource1.vue` - Add the config name display and individual config deletion functionality in the configuration module - Include a new function in `Configuration.vue` to remove stored chart data - Change the save icon reference in the configuration module, and handle deletion of a selected config - Modification in `Configuration.vue` and `Library.vue` to load a selected configuration from the config array, and highlight the selected one in the libraries - Improve user experience by providing visual cues for action by changing the background color for selected config. Overall, these changes mostly involve updates to handling configuration and chart data within the project, as well as some user interface improvements for better user experience.
2023-12-15 11:56:16 +08:00
parent 0fab677729
commit bcbe2b94b5
6 changed files with 104 additions and 36 deletions
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 3.66667C0 2.69421 0.386309 1.76158 1.07394 1.07394C1.76158 0.386309 2.69421 1.33214e-07 3.66667 1.33214e-07H16.952C17.5213 -0.000141016 18.085 0.111887 18.611 0.329685C19.1369 0.547482 19.6148 0.86678 20.0173 1.26933L22.7307 3.98267C23.544 4.796 24 5.89867 24 7.048V20.3333C24 21.3058 23.6137 22.2384 22.9261 22.9261C22.2384 23.6137 21.3058 24 20.3333 24H3.66667C2.69421 24 1.76158 23.6137 1.07394 22.9261C0.386309 22.2384 0 21.3058 0 20.3333V3.66667ZM3.66667 2C2.74667 2 2 2.74667 2 3.66667V20.3333C2 21.2533 2.74667 22 3.66667 22H4V15C4 14.2044 4.31607 13.4413 4.87868 12.8787C5.44129 12.3161 6.20435 12 7 12H17C17.7956 12 18.5587 12.3161 19.1213 12.8787C19.6839 13.4413 20 14.2044 20 15V22H20.3333C21.2533 22 22 21.2533 22 20.3333V7.048C22 6.428 21.7547 5.83467 21.316 5.39733L18.6027 2.684C18.2582 2.33896 17.8143 2.11048 17.3333 2.03067V5.66667C17.3333 6.06063 17.2557 6.45074 17.105 6.81472C16.9542 7.17869 16.7332 7.50941 16.4547 7.78799C16.1761 8.06656 15.8454 8.28754 15.4814 8.43831C15.1174 8.58907 14.7273 8.66667 14.3333 8.66667H8.33333C7.53768 8.66667 6.77462 8.3506 6.21201 7.78799C5.6494 7.22538 5.33333 6.46232 5.33333 5.66667V2H3.66667ZM18 22V15C18 14.7348 17.8946 14.4804 17.7071 14.2929C17.5196 14.1054 17.2652 14 17 14H7C6.73478 14 6.48043 14.1054 6.29289 14.2929C6.10536 14.4804 6 14.7348 6 15V22H18ZM7.33333 2V5.66667C7.33333 6.21867 7.78133 6.66667 8.33333 6.66667H14.3333C14.5985 6.66667 14.8529 6.56131 15.0404 6.37377C15.228 6.18624 15.3333 5.93188 15.3333 5.66667V2H7.33333Z" fill="#2C4053"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2132 12.6274L6.97054 8.38479L2.7279 12.6274L1.31369 11.2132L5.55633 6.97058L1.31369 2.72794L2.7279 1.31373L6.97054 5.55637L11.2132 1.31373L12.6274 2.72794L8.38475 6.97058L12.6274 11.2132L11.2132 12.6274Z" fill="#000000" stroke="#B8C3CC" stroke-linejoin="round"/>
+</svg>
@@ -382,6 +382,27 @@ export default {
    },
    copy: async function (selectIndex) {
      console.log('copy', selectIndex)
+      for (const selectID of selectIndex) {
+        const newChart = JSON.parse(JSON.stringify(this.chartData[selectID]))
+        const newUUID = this.GLOBAL.getUUID()
+        newChart.chartID = newUUID
+        this.chartData[newUUID] = newChart
+
+        // register dataStreamBuffer
+        for (const grid of newChart.grid) {
+          for (const gridSource of newChart.gridSource[grid.index]) {
+            dataStreamBuffer.register(newUUID, gridSource.xSource.mac_address, gridSource.xSource.channel)
+            dataStreamBuffer.register(newUUID, gridSource.ySource.mac_address, gridSource.ySource.channel)
+          }
+        }
+      }
+
+      this.taskContentChartPanelKey++
+      this.chartData = Object.assign({}, this.chartData)
+      this.$refs.configuration_ref.updateChart()
+      this.$nextTick(() => {
+        this.$refs.configuration_ref.buildAccordingBlock()
+      })
    },
    test: function () {
      this.$refs.configuration_ref.updateChart()
@@ -28,9 +28,12 @@
              </div>
            </div>
          </va-tree-node>
-          <div>
+          <div v-if="grid.index">
            <va-icon name="fa fa-plus"  color="gray" style="cursor: pointer;" @click.native="createNewGridSource(chartID, grid.index, chartData[chartID].gridSource[grid.index].length)"></va-icon>
          </div>
+          <div v-else>
+            <va-icon name="fa fa-plus"  color="gray" style="cursor: pointer;" @click.native="createNewGridSource(chartID, 0,0)"></va-icon>
+          </div>
        </va-tree-category>
      </va-tree-root>
    </div>
@@ -495,7 +498,9 @@ export default {
      this.products = this.products.filter(productToFilter => productToFilter !== product)
    },
    async saveGrid () {
-      await this.removeGridSource(this.chartID, this.gridIndexSave, this.sourceIndexSave)
+      if (this.gridIndexSave !== 0) {
+        await this.removeGridSource(this.chartID, this.gridIndexSave, this.sourceIndexSave)
+      }
      console.log('saveGrid', this.gridIndexSave)
      console.log(this.deviceSelectX, this.deviceSelectY, this.channelSelectX, this.channelSelectY)
      const deviceXInfo = this.deviceListNew.find(ele => ele.id === this.deviceSelectX.id)
@@ -1,6 +1,7 @@
 <template>
  <div class="px-3 mt-3">
    <div class="d-flex" style="width: 100%; justify-content: flex-end;">
+      <div style="margin-right: auto; align-self: center;">{{  configName }}</div>
      <div class="flex d-flex px-0" style="width: 50%; background-color: #efefef; border-radius: 12px;">
        <div class="d-flex" style="justify-content: space-evenly; border-right: 2.5px white solid;">
          <div style="height: 32px; display: flex; align-items: center;" @click="showLibrary">
@@ -10,7 +11,7 @@
            <img src="@/assets/icons/add-config.svg"/>
          </div>
          <div style="height: 32px; display: flex; align-items: center;" @click="saveConfig">
-            <img src="@/assets/icons/library.svg"/>
+            <img src="@/assets/icons/save.svg"/>
            <div></div>
          </div>
          <div style="height: 32px; display: flex; align-items: center;"  @click="showModal">
@@ -50,20 +51,20 @@
        setInterval
      </va-card>
    </div> -->
-    <div v-for="(chart,index) in chartArray" :key="chart.chartID" class="flex lg12 xl12 sm12 xs12 mt-3" style="background-color: #d9d9d9;">
+    <div v-for="(chart) in chartArray" :key="chart.chartID" class="flex lg12 xl12 sm12 xs12 mt-3" style="background-color: #d9d9d9;">
      <button class="accordion">
        <div style="display: flex; justify-content: space-between; align-items: center; font-size: 18px;">
-          <div>
-            <input type="checkbox" class="mr-3" @click.stop="handleCheckboxClick(index)">
+          <div style="display: flex; margin-right: auto;">
+            <input type="checkbox" class="mr-3" @click.stop="handleCheckboxClick(chart.chartID)">
            <span>{{ chart.cardName }}</span>
          </div>
+          <div style="display: flex; justify-content: flex-end;"><img class="mr-2" src="@/assets/img/project/whitecross.svg" @click.stop="removeChart(chart.chartID)"/></div>
          <div>
-
          </div>
        </div>
      </button>
      <div class="panel" style="height: 100%;">
-        <CanvasChartSource :chartID="chartArray[0].chartID" @detect="detect"></CanvasChartSource>
+        <CanvasChartSource :chartID="chart.chartID" @detect="detect"></CanvasChartSource>
        <div class="time"></div>
      </div>
    </div>
@@ -86,7 +87,7 @@
        <CanvasChartSource :chartID="chart.chartID" @detect="detect"></CanvasChartSource>
      </div>
    </div> -->
-    <Library :ref="'library_modal_ref'" @loadConfig="loadConfig"></Library>
+    <Library :ref="'library_modal_ref'" @loadConfig="loadConfig" @deleteConfig="deleteConfig"></Library>
    <SaveConfigModal :ref="'save_config_modal_ref'" @confirm="saveChart"></SaveConfigModal>
  </div>
 </template>
@@ -137,6 +138,7 @@ export default {
      chartOptions: [],
      chartSelected: {},
      configName: '',
+      selectedConfigID: -1,
      checkboxSelect: [],
    }
  },
@@ -149,12 +151,16 @@ export default {
        this.checkboxSelect.splice(selectIndex, 1)
      }
    },
-    reset: function () {
+    reset: async function () {
      this.$emit('reset')
+      this.selectedConfigID = -1
+      this.configName = ''
+      await localforage.setItem('chartConfig_' + this.controllerID, null)
    },
    showLibrary: function () {
      this.$refs.library_modal_ref.showModal = true
      this.$refs.library_modal_ref.configArray = this.chartOptions
+      this.$refs.library_modal_ref.chartSelectedID = this.chartOptions.findIndex(ele => ele.id === this.selectedConfigID)
    },
    detect: function (device) {
      this.$emit('detect', device)
@@ -173,20 +179,30 @@ export default {
    },
    saveChart: async function (info) {
      const [name, locked] = info
-      const newConfig = await api.configuration.create({ name: name, locked: locked, data: this.chartData })
+      const newConfig = await api.configuration.create({ name: name, locked: locked, data: this.removeSeriesDataFromChart() })
      if (newConfig.status === 200) {
        this.chartOptions.push(newConfig.data)
+        this.selectedConfigID = newConfig.data.id
+        this.configName = newConfig.data.name
+        await localforage.setItem('chartConfig_' + this.controllerID, this.selectedConfigID)
      }
    },
-    saveConfig: async function () {
-      await api.configuration.update(this.chartSelected.id, { data: this.chartData })
+    removeSeriesDataFromChart: function () {
+      const newChartData = JSON.parse(JSON.stringify(this.chartData))
+      for (const data in newChartData) {
+        newChartData[data].series = []
+      }
+      return newChartData
    },
-    loadConfig: async function (id) {
-      console.log('loadConfig1', id)
-      console.log('loadConfig2', this.chartSelected)
-      this.chartSelected = this.chartOptions[id].data
+    saveConfig: async function () {
+      await api.configuration.update(this.selectedConfigID, { data: this.chartData })
+    },
+    loadConfig: async function (index) {
+      this.chartSelected = this.chartOptions[index].data
+      this.configName = this.chartOptions[index].name
+      this.selectedConfigID = this.chartOptions[index].id
      // if (this.chartSelected.id) {
-      this.chartData = JSON.parse(JSON.stringify(this.chartOptions[id].data))
+      this.chartData = JSON.parse(JSON.stringify(this.chartOptions[index].data))

      if (Object.keys(this.chartData).length > 0) {
        for (const _chart of Object.values(this.chartData)) {
@@ -202,17 +218,17 @@ export default {
          }
        }
      }
-      await localforage.setItem('chartConfig_' + this.controllerID, this.chartSelected.id)
+      await localforage.setItem('chartConfig_' + this.controllerID, this.selectedConfigID)
      this.updateChart()
      this.$nextTick(() => {
        this.buildAccordingBlock()
      })
      // }
    },
-    deleteConfig: async function () {
-      await api.configuration.update(this.chartSelected.id, { deleted: true })
+    deleteConfig: async function (id) {
+      await api.configuration.update(id, { deleted: true })
      await api.configuration.clearDel()
-      this.chartOptions = this.chartOptions.filter(ele => ele.id !== this.chartSelected.id)
+      this.chartOptions = this.chartOptions.filter(ele => ele.id !== id)
      this.chartSelected = {}
    },
    updateChart: function () {
@@ -252,9 +268,10 @@ export default {
    const configID = await localforage.getItem('chartConfig_' + this.controllerID)
    window.setTimeout(() => {
      if (configID !== null) {
-        const chartConfig = this.chartOptions.find(ele => ele.id === configID)
-        this.chartSelected = chartConfig
-        this.loadConfig()
+        const configIndex = this.chartOptions.findIndex(ele => ele.id === configID)
+        if (configIndex >= 0) {
+          this.loadConfig(configIndex)
+        }
      }
    }, 500)
  },
@@ -6,14 +6,15 @@
      size="small"
      :title="'Save Config'"
      :okText=" $t('modal.confirm') "
-      @ok="confirm"
+      @ok="loadConfig"
      @cancel="undo"
    >
      <va-list>
-        <va-item v-for="(config, i) in configArray" @click="loadConfig(i)" :key="i">
-          <va-item-section>
+        <va-item v-for="(config, i) in configArray" :class="(chartSelectedID === i) ? 'config-focus': ''" :key="i">
+          <va-item-section @click.native="selectConfig(config,i)">
            {{ config.name }}
          </va-item-section>
+          <va-item-section style="cursor: pointer;" @click.native.stop="deleteConfig(config, i)" side><img class="mr-2" src="@/assets/img/project/delete14_14.svg"/></va-item-section>
        </va-item>
      </va-list>
    </va-modal>
@@ -25,18 +26,20 @@ export default {
  components: {
  },
  props: {
-    configArray: {
-      type: [Array],
-      default: () => {
-        return []
-      },
-    },
+    // configArray: {
+    //   type: [Array],
+    //   default: () => {
+    //     return []
+    //   },
+    // },
  },
  data () {
    return {
      showModal: false,
      inputValue: '',
      lock: false,
+      chartSelectedID: -1,
+      configArray: [],
    }
  },
  methods: {
@@ -52,9 +55,25 @@ export default {
    hide: function () {
      this.showModal = false
    },
-    loadConfig: function (id) {
-      this.$emit('loadConfig', id)
+    deleteConfig: function (config, i) {
+      this.$emit('deleteConfig', config.id)
+      this.configArray.splice(i, 1)
+    },
+    loadConfig: function () {
+      this.$emit('loadConfig', this.chartSelectedID)
+    },
+    selectConfig: function (config, index) {
+      this.chartSelectedID = index
    },
  },
 }
 </script>
+<style>
+  .config-focus {
+    background: #ebedff;
+    border: 1px solid #dbdcf0;
+    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+    border-radius: 5px;
+  }
+</style>