Map Attributes: value type Calendar done, but have event bubbling error.

2023-10-25 17:34:14 +08:00
parent 7700d60546
commit 7eb9b1c63d
3 changed files with 68 additions and 16 deletions
--- a/src/components/Discover/Map/Filter/Attributes.vue
+++ b/src/components/Discover/Map/Filter/Attributes.vue
@@ -54,30 +54,31 @@
          </DataTable>
        </div>
        <!-- type: value -->
-        <div v-else>
+        <div v-else-if="valueTypes.includes(selectedAttName?.type)">
+          <!-- Chart.js -->
          <div class="h-3/5 relative">
-            <!-- <canvas id="chartCanvasId"></canvas> -->
            <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" id="chartCanvasId"/>
            <div id="chart-mask-left" class="absolute bg-neutral-10/50"></div>
            <div id="chart-mask-right" class="absolute bg-neutral-10/50"></div>
          </div>
+          <!-- Slider -->
          <div class="px-2 py-3">
            <Slider v-model="selectArea" :step="1" :min="0" :max="selectRange" range class="mx-2" @change="changeSelectArea($event)"/>
          </div>
          <!-- Calendar group -->
-          <!-- <div class="flex justify-center items-center space-x-2 w-full">
+          <div class="flex justify-center items-center space-x-2 w-full">
            <div>
-                <span class="block mb-2">Start time</span>
-                <Calendar v-model="startTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="startMinDate" :maxDate="startMaxDate" showTime showIcon hourFormat="24" @date-select="sliderTimeRange($event, 'start')" id="startCalendar"/>
+              <span class="block mb-2">Start time</span>
+              <Calendar v-model="startTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="startMinDate" :maxDate="startMaxDate" showTime showIcon hourFormat="24" @date-select="sliderTimeRange($event, 'start')" id="startCalendar" />
            </div>
            <span class="block mt-4">~</span>
            <div>
              <span class="block mb-2">End time</span>
              <Calendar v-model="endTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="endMinDate" :maxDate="endMaxDate" showTime showIcon hourFormat="24" @date-select="sliderTimeRange($event, 'end')" id="endCalendar"/>
            </div>
-          </div> -->
+          </div>
        </div>
-    </div>
+      </div>
    </div>
  </div>
 </section>
@@ -119,6 +120,11 @@ export default {
      headerClass: '!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10',
      bodyModeClass: '!p-2 !border-0',
      bodyClass: 'break-words !py-2 !border-0',
+      panelProps: {
+        onClick: (event) => {
+          event.stopPropagation();
+        },
+      },
    }
  },
  computed: {
@@ -199,11 +205,33 @@ export default {

      return sliderData;
    },
+    // user select time start and end
+    attValueTypeStartEnd: function() {
+      let start = getMoment(this.startTime).format('YYYY-MM-DDTHH:mm:ss');
+      let end = getMoment(this.endTime).format('YYYY-MM-DDTHH:mm:ss');
+      // this.selectTimeFrame = [start, end]; // 傳給後端的資料
+      // this.$emit('on-row-select', e.data);
+
+      return [start, end];
+    },
  },
  methods: {
    onRowSelect(e) {
-      if(this.valueData) this.createChart();
-      // this.$emit('on-row-select', e.data)
+      if(this.valueData) {
+        // 初始化: Calendar
+        this.startMinDate = new Date(getMoment(this.valueData.chart.x_axis.min).format());
+        this.startMaxDate = new Date(getMoment(this.valueData.chart.x_axis.max).format());
+        this.endMinDate = new Date(getMoment(this.valueData.chart.x_axis.min).format());
+        this.endMaxDate = new Date(getMoment(this.valueData.chart.x_axis.max).format());
+        // 初始化: 讓日曆的範圍等於時間軸的範圍
+        this.startTime = this.startMinDate;
+        this.endTime = this.startMaxDate;
+        this.attValueTypeStartEnd;
+        // 建立圖表
+        this.createChart();
+      } else {
+        // this.$emit('on-row-select', e.data);
+      }
    },
    /**
     * set progress bar width
@@ -338,8 +366,6 @@ export default {
          },
        },
      };
-
-
    },
    /**
     * 滑塊改變的時候
@@ -359,11 +385,37 @@ export default {
      // 重新算圖
      this.resizeMask(this.chartComplete);
      // 執行 timeFrameStartEnd 才會改變數據
-      // this.timeFrameStartEnd;
+      this.attValueTypeStartEnd;
+    },
+    /**
+     * 選取開始或結束時間時，要改變滑塊跟圖表
+     * @param {object} e Tue Jan 25 2022 00:00:00 GMT+0800 (台北標準時間)
+     * @param {string} direction start or end
+     */
+     sliderTimeRange(e, direction) {
+      // 找到最鄰近的 index，時間格式: 毫秒時間戳
+      let sliderData = this.sliderData;
+      const targetTime = [new Date(this.attValueTypeStartEnd[0]).getTime(), new Date(this.attValueTypeStartEnd[1]).getTime()];
+      const closestIndexes = targetTime.map(target => {
+        let closestIndex = 0;
+        closestIndex = ((target - sliderData[0])/(sliderData[sliderData.length-1]-sliderData[0])) * sliderData.length;
+        let result = Math.round(Math.abs(closestIndex));
+        result = result > this.selectRange ? this.selectRange : result;
+        return result
+      });
+
+      // 改變滑塊
+      this.selectArea = closestIndexes;
+      // 重新設定 start end 日曆選取範圍
+      if(direction === 'start') this.endMinDate = e;
+      else if(direction === 'end') this.startMaxDate = e;
+      // 重新算圖
+      if(!isNaN(closestIndexes[0]) && !isNaN(closestIndexes[1])) this.resizeMask(this.chartComplete);
+      else return;
    },
  },
  mounted() {
-    // this.setChartData();
+    // Slider
    this.selectArea = [0, this.selectRange]; // 初始化滑塊
  }
 }
--- a/src/components/Discover/Map/Filter/Timeframes.vue
+++ b/src/components/Discover/Map/Filter/Timeframes.vue
@@ -17,8 +17,8 @@
      <!-- Calendar group -->
      <div class="flex justify-center items-center space-x-2 w-full">
        <div>
-            <span class="block mb-2">Start time</span>
-            <Calendar v-model="startTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="startMinDate" :maxDate="startMaxDate" showTime showIcon hourFormat="24" @date-select="sliderTimeRange($event, 'start')" id="startCalendar"/>
+          <span class="block mb-2">Start time</span>
+          <Calendar v-model="startTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="startMinDate" :maxDate="startMaxDate" showTime showIcon hourFormat="24" @date-select="sliderTimeRange($event, 'start')" id="startCalendar"/>
        </div>
        <span class="block mt-4">~</span>
        <div>
--- a/src/components/Discover/Map/SidebarFilter.vue
+++ b/src/components/Discover/Map/SidebarFilter.vue
@@ -1,5 +1,5 @@
 <template>
-  <Sidebar :visible="sidebarFilter" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" :baseZIndex="15" class="!w-11/12 !bg-neutral-100">
+  <Sidebar :visible="sidebarFilter" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" :baseZIndex="15" class="!w-11/12 !bg-neutral-100" >
    <template #header>
      <ul class="flex space-x-4">
        <li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700" @click="switchTab('filter')" :class="tab === 'filter'? 'text-neutral-900': 'text-neutral-500'" id="tabFilter">Filter</li>