imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Issue #34: Done.

Browse Source
This commit is contained in:
chiayin
2023-10-04 11:01:17 +08:00
parent bee668a3f7
commit 803782d5a9
1 changed files with 13 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Discover/Map/SidebarView.vue
View File

@@ -43,12 +43,8 @@
<ul class="space-y-2"> <ul class="space-y-2">
<li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'freq')"> <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'freq')">
<div class="flex items-center w-1/2"> <div class="flex items-center w-1/2">
<!-- <input type="radio" id="freq" value="freq" name="dataLayer" class="peer hidden" checked/> <RadioButton v-model="dataLayerType" inputId="freq" name="dataLayer" value="freq" class="mr-2" @click.prevent="switchDataLayerType($event, 'freq')"/>
<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 for="freq">Frequency</label>
</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>
</div> </div>
<div class="w-1/2"> <div class="w-1/2">
<select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'duration'"> <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'duration'">
@@ -58,11 +54,8 @@
</li> </li>
<li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'duration')"> <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'duration')">
<div class="flex items-center w-1/2"> <div class="flex items-center w-1/2">
<!-- <input type="radio" id="duration" value="duration" name="dataLayer" class="peer hidden" /> <RadioButton v-model="dataLayerType" inputId="duration" name="dataLayer" value="duration" class="mr-2" @click.prevent="switchDataLayerType($event, 'duration')"/>
<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> <label for="duration">Duration</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>
</div> </div>
<div class="w-1/2"> <div class="w-1/2">
<select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'freq'"> <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: { methods: {
ttt(e){
console.log(e);
},
/** /**
* switch map type * switch map type
* @param {string} type processMap | bpmn * @param {string} type processMap | bpmn
@@ -143,22 +139,24 @@ export default {
* @param {string} type freq | duration * @param {string} type freq | duration
*/ */
switchDataLayerType(e, type){ 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) { switch (type) {
case 'freq': case 'freq':
value = value ? value : this.selectedFreq ? this.selectedFreq : 'total';
this.dataLayerType = type; this.dataLayerType = type;
this.dataLayerOption = value; this.dataLayerOption = value;
this.selectedFreq = value; this.selectedFreq = value;
break; break;
case 'duration': case 'duration':
value = value ? value : this.selectedDuration ? this.selectedDuration : 'total';
this.dataLayerType = type; this.dataLayerType = type;
this.dataLayerOption = value; this.dataLayerOption = value;
this.selectedDuration = value; this.selectedDuration = value;
break; break;
}; }
console.log(type, value);
this.$emit('switch-data-layer-type', this.dataLayerType, this.dataLayerOption); this.$emit('switch-data-layer-type', this.dataLayerType, this.dataLayerOption);
}, },
} }