From 803782d5a907526de607e427d912c5d023b31f89 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Wed, 4 Oct 2023 11:01:17 +0800
Subject: [PATCH] Issue #34: Done.

---
 src/components/Discover/Map/SidebarView.vue | 28 ++++++++++-----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/Discover/Map/SidebarView.vue b/src/components/Discover/Map/SidebarView.vue
index b93f52c..3770035 100644
--- a/src/components/Discover/Map/SidebarView.vue
+++ b/src/components/Discover/Map/SidebarView.vue
@@ -43,12 +43,8 @@
         <ul class="space-y-2">
           <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'freq')">
             <div class="flex items-center w-1/2">
-              <!-- <input type="radio" id="freq" value="freq" name="dataLayer" class="peer hidden" checked/>
-              <label for="freq" class="inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary">
-              </label>
-              <span class="inline-block ml-2">Frequency</span> -->
-              <RadioButton v-model="dataLayerType" inputId="freq" name="dataLayer" value="freq" class="mr-2"/>
-              <label>Frequency</label>
+              <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'">
@@ -58,11 +54,8 @@
           </li>
           <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'duration')">
             <div class="flex items-center w-1/2">
-              <!-- <input type="radio" id="duration" value="duration" name="dataLayer" class="peer hidden" />
-              <label for="duration" class="inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary"></label>
-              <span class="inline-block ml-2">Duration</span> -->
-              <RadioButton v-model="dataLayerType" inputId="duration" name="dataLayer" value="duration" class="mr-2"/>
-              <label>Duration</label>
+              <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'">
@@ -113,6 +106,9 @@ export default {
     }
   },
   methods: {
+    ttt(e){
+      console.log(e);
+    },
     /**
      * switch map type
      * @param {string} type processMap | bpmn
@@ -143,22 +139,24 @@ export default {
      * @param {string} type freq | duration
      */
     switchDataLayerType(e, type){
-      let value = e.target.type === 'select-one'? e.target.value: 'total';
+      let value = '';
 
+      if(e.target.value !== 'freq' && e.target.value !== 'duration') value = e.target.value;
       switch (type) {
         case 'freq':
+          value = value ? value : this.selectedFreq ? this.selectedFreq : 'total';
           this.dataLayerType = type;
           this.dataLayerOption = value;
           this.selectedFreq = value;
           break;
-
         case 'duration':
+          value = value ? value : this.selectedDuration ? this.selectedDuration : 'total';
           this.dataLayerType = type;
           this.dataLayerOption = value;
           this.selectedDuration = value;
           break;
-      };
-
+      }
+      console.log(type, value);
       this.$emit('switch-data-layer-type', this.dataLayerType, this.dataLayerOption);
     },
   }