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