lucia-frontend/src/components/Discover/Map/SidebarView.vue

<template>
  <Sidebar :visible="sidebarView" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="false" >
    <template #header>
      <p class="h1">Visualization Setting</p>
    </template>
    <div>
      <!-- View -->
      <div class="my-4 border-b border-neutral-200">
        <p class="h2">View</p>
        <ul class="space-y-3 mb-4">
          <!-- 選擇 bpmn / processmap button -->
          <li class="btn-toggle-content">
            <span class="btn-toggle-item" :class="mapType === 'processMap'?'btn-toggle-show  ':''" @click="onProcessMapClick()">
              Process Map
            </span>
            <span class="btn-toggle-item" :class="mapType === 'bpmn'?'btn-toggle-show':''" @click="onBPMNClick()">
              BPMN Model
            </span>
          </li>
          <!-- 選擇繪畫樣式 bezier / unbundled-bezier button-->
          <li class="btn-toggle-content">
            <span class="btn-toggle-item" :class="curveStyle === 'unbundled-bezier'?'btn-toggle-show  ':''" @click="switchCurveStyles('unbundled-bezier')">
              Curved
            </span>
            <span class="btn-toggle-item" :class="curveStyle === 'taxi'?'btn-toggle-show':''" @click="switchCurveStyles('taxi')">
              Elbow
            </span>
          </li>
          <!-- 直向 TB | 橫向 LR -->
          <li class="btn-toggle-content">
            <span class="btn-toggle-item" :class="rank === 'LR'?'btn-toggle-show  ':''" @click="switchRank('LR')">
              Horizontal
            </span>
            <span class="btn-toggle-item" :class="rank === 'TB'?'btn-toggle-show':''" @click="switchRank('TB')">
              Vertical
            </span>
          </li>
        </ul>
      </div>
      <!-- Data Layer -->
      <div>
        <p class="h2">Data Layer</p>
        <ul class="space-y-2">
          <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'freq')">
            <div class="flex items-center w-1/2">
              <RadioButton v-model="dataLayerType" inputId="freq" name="dataLayer" value="freq" class="mr-2" @click.prevent="switchDataLayerType($event, 'freq')"/>
              <label for="freq">Frequency</label>
            </div>
            <div class="w-1/2">
              <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'duration'">
                <option v-for="(freq, index) in selectFrequency" :key="index" :value="freq.value" :disabled="freq.disabled" :selected="freq.value === selectedFreq">{{ freq.label }}</option>
              </select>
            </div>
          </li>
          <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'duration')">
            <div class="flex items-center w-1/2">
              <RadioButton v-model="dataLayerType" inputId="duration" name="dataLayer" value="duration" class="mr-2" @click.prevent="switchDataLayerType($event, 'duration')"/>
              <label for="duration">Duration</label>
            </div>
            <div class="w-1/2">
              <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'freq'">
                <option v-for="(duration, index) in selectDuration" :key="index" :value="duration.value" :disabled="duration.disabled" :selected="duration.value === selectedDuration">{{ duration.label }}</option>
              </select>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </Sidebar>
</template>

<script>
import MapPathStore from '@/stores/mapPathStore';
import { mapState, mapActions, } from 'pinia';
export default {
  props: {
    sidebarView: {
      type: Boolean,
      require: true,
    },
  },
  data() {
    return {
      selectFrequency: [
        { value:"total", label:"Total", disabled:false, },
        { value:"rel_freq", label:"Relative", disabled:false, },
        { value:"average", label:"Average", disabled:false, },
        { value:"median", label:"Median", disabled:false, },
        { value:"max", label:"Max", disabled:false, },
        { value:"min", label:"Min", disabled:false, },
        { value:"cases", label:"Number of cases", disabled:false, },
      ],
      selectDuration:[
        { value:"total", label:"Total", disabled:false, },
        { value:"rel_duration", label:"Relative", disabled:false, },
        { value:"average", label:"Average", disabled:false, },
        { value:"median", label:"Median", disabled:false, },
        { value:"max", label:"Max", disabled:false, },
        { value:"min", label:"Min", disabled:false, },
      ],
      curveStyle:'unbundled-bezier', // unbundled-bezier | taxi
      mapType: 'processMap', // processMap | bpmn
      dataLayerType: null, // freq | duration
      dataLayerOption: null,
      selectedFreq: '',
      selectedDuration: '',
      rank: 'LR', // 直向 TB | 橫向 LR
    }
  },
  computed: {
    ...mapState(MapPathStore, ['isBPMNOn']),
  },
  methods: {
    /**
     * switch map type
     * @param {string} type 'processMap' | 'bpmn'，可傳入以上任一。
     */
     switchMapType(type) {
       this.mapType = type;
       this.$emit('switch-map-type', this.mapType);
    },
    /**
     * switch curve style
     * @param {string} style 直角 'unbundled-bezier' | 'taxi'，可傳入以上任一。
     */
    switchCurveStyles(style) {
      this.curveStyle = style;
      this.$emit('switch-curve-styles', this.curveStyle);
    },
    /**
     * switch rank
     * @param {string} rank 直向 'TB' | 橫向 'LR'，可傳入以上任一。
     */
    switchRank(rank) {
      this.rank = rank;
      this.$emit('switch-rank', this.rank);
    },
    /**
     * switch Data Layoer Type or Option.
     * @param {string} e 切換時傳入的選項
     * @param {string} type 'freq' | 'duration'，可傳入以上任一。
     */
    switchDataLayerType(e, type){
      let value = '';

      if(e.target.value !== 'freq' && e.target.value !== 'duration') value = e.target.value;
      switch (type) {
        case 'freq':
          value = value || this.selectedFreq || 'total';
          this.dataLayerType = type;
          this.dataLayerOption = value;
          this.selectedFreq = value;
          break;
        case 'duration':
          value = value || this.selectedDuration || 'total';
          this.dataLayerType = type;
          this.dataLayerOption = value;
          this.selectedDuration = value;
          break;
      }
      this.$emit('switch-data-layer-type', this.dataLayerType, this.dataLayerOption);
    },
    onProcessMapClick() {
      this.setIsBPMNOn(false);
      this.switchMapType('processMap');
    },
    onBPMNClick() {
      this.setIsBPMNOn(true);
      this.switchMapType('bpmn');
    },
    ...mapActions(MapPathStore, ['setIsBPMNOn',]),
  },
  mounted() {
    this.dataLayerType = 'freq';
    this.dataLayerOption = 'total';
  }
}
</script>