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

insight path blue radio button

Browse Source
This commit is contained in:
Cindy Chang
2024-08-19 14:29:43 +08:00
parent 1191d87f93
commit 27d11997bd
1 changed files with 51 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -187,19 +187,44 @@
</li>
</ul>
</TabPanel>
<TabPanel v-for="([field, label], i) in fieldNamesAndLabelNames" :key="i" :header="label" contentClass="text-sm">
<p v-if="insights[field].length === 0">No data</p>
<ul v-else class="ml-6 space-y-1">
<TabPanel v-for="([field, label], i) in fieldNamesAndLabelNames" :key="i" :header="label"
contentClass="text-sm">
<p v-if="insights[field].length === 0" class="bg-neutral-100 p-2 rounded">No data</p>
<ul v-else class="ml-1 space-y-1">
<li v-for="(item, key2) in insights[field]" :key="key2"
class="mb-2">
<span v-for="(value, index) in item" :key="index">
{{ value }}
<span v-if="index !== item.length - 1">
&nbsp;
<span class="material-symbols-outlined !text-lg align-sub">arrow_forward</span>
&nbsp;
</span>
</span>
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"
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
? 'border-[#0099FF]'
: 'border-[#CBD5E1]'
]"
>
<div
:class="[
'w-[9px] h-[9px] rounded-full transition-opacity cursor-pointer',
selectedPath === key2
? 'bg-[#0099FF]'
: 'opacity-0'
]"
></div>
</span>
</div>
<div class="right-col">
<span v-for="(value, index) in item" :key="index">
{{ value }}
<span v-if="index !== item.length - 1">
&nbsp;
<span class="material-symbols-outlined !text-lg align-sub">arrow_forward</span>
&nbsp;
</span>
</span>
</div>
</li>
</ul>
</TabPanel>
@@ -211,18 +236,18 @@
</template>
<script>
import { computed, } from 'vue';
import { computed, ref, } from 'vue';
import PageAdmin from '@/stores/pageAdmin';
import { getTimeLabel } from '@/module/timeLabel.js';
import getMoment from 'moment';
import i18next from '@/i18n/i18n';
const fieldNamesAndLabelNames = [
['self_loops', 'Self-Loop'],
['short_loops', 'Short-Loop'],
['shortest_traces', 'Shortest Trace'],
['longest_traces', 'Longest Trace'],
['most_freq_traces', 'Most Frequent Trace'],
['self_loops', 'Self-Loop'],
['short_loops', 'Short-Loop'],
['shortest_traces', 'Shortest Trace'],
['longest_traces', 'Longest Trace'],
['most_freq_traces', 'Most Frequent Trace'],
];
// 刪除第一個和第二個元素
fieldNamesAndLabelNames.splice(0, 2);
@@ -245,11 +270,18 @@ export default {
const pageAdmin = PageAdmin();
const currentMapFile = computed(() => pageAdmin.currentMapFile);
const selectedPath = ref(0);
const onPathOptionClick = (clickedPath) => {
selectedPath.value = clickedPath;
};
return {
currentMapFile,
i18next,
fieldNamesAndLabelNames,
selectedPath,
onPathOptionClick,
};
},
data() {
@@ -323,7 +355,7 @@ export default {
@apply hidden
}
:deep(.p-tabview-panels) {
@apply !bg-neutral-100 p-2 rounded
@apply p-2 rounded
}
:deep(.p-tabview-panel) {
@apply animate-fadein