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

highlight path

Browse Source
This commit is contained in:
Cindy Chang
2024-08-21 14:25:34 +08:00
parent 4ab0d4765b
commit d56ea98780
4 changed files with 90 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/Discover/Map/SidebarState.vue
View File

@@ -158,14 +158,14 @@
</div>
<div>
<ul class="text-neutral-500 grid grid-cols-2 gap-2 text-center text-sm font-medium mb-2">
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="active1 = 0" :class="active1 === 0? 'text-primary border-primary':''">Self-Loop</li>
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="active1 = 1" :class="active1 === 1? 'text-primary border-primary':''">Short-Loop</li>
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="active1 = 2" :class="active1 === 2? 'text-primary border-primary':''">Shortest Trace</li>
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="active1 = 3" :class="active1 === 3? 'text-primary border-primary':''">Longest Trace</li>
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="active1 = 4" :class="active1 === 4? 'text-primary border-primary':''">Most Frequent Trace</li>
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(0)" :class="activeTrace === 0? 'text-primary border-primary':''">Self-Loop</li>
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(1)" :class="activeTrace === 1? 'text-primary border-primary':''">Short-Loop</li>
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(2)" :class="activeTrace === 2? 'text-primary border-primary':''">Shortest Trace</li>
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(3)" :class="activeTrace === 3? 'text-primary border-primary':''">Longest Trace</li>
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(4)" :class="activeTrace === 4? 'text-primary border-primary':''">Most Frequent Trace</li>
</ul>
<div>
<TabView ref="tabview2" v-model:activeIndex="active1">
<TabView ref="tabview2" v-model:activeIndex="activeTrace">
<TabPanel header="Self-loop" contentClass="text-sm">
<p v-if="insights.self_loops.length === 0">No data</p>
<ul v-else class="ml-6 space-y-1">
@@ -194,13 +194,13 @@
<li v-for="(item, key2) in insights[field]" :key="key2"
class="mb-2 flex bg-neutral-100 p-2 rounded">
<div class="flex left-col mr-1">
<input type="radio" name="customRadio" :value="key2" v-model="selectedPath"
<input type="radio" name="customRadio" :value="key2" v-model="clickedPathListIndex"
class="hidden peer" @click="onPathOptionClick(key2)"
/>
<span @click="onPathOptionClick(key2)"
:class="[
'w-[18px] h-[18px] rounded-full border-2 inline-flex items-center justify-center cursor-pointer bg-[#FFFFFF]',
selectedPath === key2
clickedPathListIndex === key2
? 'border-[#0099FF]'
: 'border-[#CBD5E1]'
]"
@@ -208,7 +208,7 @@
<div
:class="[
'w-[9px] h-[9px] rounded-full transition-opacity cursor-pointer',
selectedPath === key2
clickedPathListIndex === key2
? 'bg-[#0099FF]'
: 'opacity-0'
]"
@@ -238,6 +238,7 @@
<script>
import { computed, ref, } from 'vue';
import PageAdmin from '@/stores/pageAdmin';
import MapPathStore from '@/stores/mapPathStore';
import { getTimeLabel } from '@/module/timeLabel.js';
import getMoment from 'moment';
import i18next from '@/i18n/i18n';
@@ -262,22 +263,30 @@ export default {
},
setup(){
const pageAdmin = PageAdmin();
const mapPathStore = MapPathStore();
const active1 = ref(0);
const activeTrace = ref(0);
const currentMapFile = computed(() => pageAdmin.currentMapFile);
const selectedPath = ref(0);
const clickedPathListIndex = ref(0);
const onActiveTraceClick = (clickedActiveTraceIndex) => {
mapPathStore.clearAllHighlight();
activeTrace.value = clickedActiveTraceIndex;
mapPathStore.highlightClickedPath(clickedActiveTraceIndex, clickedPathListIndex.value);
}
const onPathOptionClick = (clickedPath) => {
selectedPath.value = clickedPath;
clickedPathListIndex.value = clickedPath;
mapPathStore.highlightClickedPath(activeTrace.value, clickedPathListIndex.value);
};
return {
currentMapFile,
i18next,
fieldNamesAndLabelNames,
selectedPath,
clickedPathListIndex,
onPathOptionClick,
active1,
onActiveTraceClick,
activeTrace,
};
},
data() {