Discover: Sidebar visualization setting done.
This commit is contained in:
chiayin
@@ -56,6 +56,17 @@
|
|||||||
@apply text-neutral-700 bg-neutral-100 border border-neutral-500 hover:bg-neutral-500 hover:text-neutral-100 hover:border-neutral-300 focus:outline-none focus:border-neutral-500 focus:ring active:ring
|
@apply text-neutral-700 bg-neutral-100 border border-neutral-500 hover:bg-neutral-500 hover:text-neutral-100 hover:border-neutral-300 focus:outline-none focus:border-neutral-500 focus:ring active:ring
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* button toggle */
|
||||||
|
.btn-toggle-content {
|
||||||
|
@apply flex justify-between items-center w-full rounded-full bg-neutral-100 text-neutral-500
|
||||||
|
}
|
||||||
|
.btn-toggle-item {
|
||||||
|
@apply text-sm leading-5 font-medium text-center justify-center w-1/2 px-7 py-1.5 rounded-full cursor-pointer transition-all duration-200
|
||||||
|
}
|
||||||
|
.btn-toggle-show {
|
||||||
|
@apply bg-primary text-neutral-10 shadow-md
|
||||||
|
}
|
||||||
|
|
||||||
/* invalid */
|
/* invalid */
|
||||||
.is-invalid :invalid{
|
.is-invalid :invalid{
|
||||||
@apply invalid:border-danger focus:ring-danger
|
@apply invalid:border-danger focus:ring-danger
|
||||||
@@ -70,3 +81,11 @@
|
|||||||
nav ul>li {
|
nav ul>li {
|
||||||
@apply px-2 py-3.5 duration-300 hover:bg-neutral-900 hover:text-neutral-10 active:bg-neutral-900 active:text-neutral-10;
|
@apply px-2 py-3.5 duration-300 hover:bg-neutral-900 hover:text-neutral-10 active:bg-neutral-900 active:text-neutral-10;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.h1 {
|
||||||
|
@apply font-bold text-base leading-10
|
||||||
|
}
|
||||||
|
.h2 {
|
||||||
|
@apply font-bold text-sm leading-10
|
||||||
|
}
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ import 'primevue/resources/primevue.min.css'; //core css
|
|||||||
import 'primeicons/primeicons.css'; //icons
|
import 'primeicons/primeicons.css'; //icons
|
||||||
import Sidebar from 'primevue/sidebar';
|
import Sidebar from 'primevue/sidebar';
|
||||||
import Button from 'primevue/button';
|
import Button from 'primevue/button';
|
||||||
|
import Dropdown from 'primevue/dropdown';
|
||||||
|
|
||||||
const emitter = mitt();
|
const emitter = mitt();
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
@@ -51,5 +52,6 @@ app.use(ToastPlugin, { // use `this.$toast` in Vue.js
|
|||||||
app.use(PrimeVue);
|
app.use(PrimeVue);
|
||||||
app.component('Sidebar', Sidebar);
|
app.component('Sidebar', Sidebar);
|
||||||
app.component('Button', Button);
|
app.component('Button', Button);
|
||||||
|
app.component('Dropdown', Dropdown);
|
||||||
|
|
||||||
app.mount("#app");
|
app.mount("#app");
|
||||||
|
|||||||
@@ -1,54 +1,127 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<Sidebar v-model:visible="visibleLeft" :dismissable="true" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left">
|
||||||
<!-- 選擇 bpmn / processmap button -->
|
<template #header>
|
||||||
<ul class="m-3 flex">
|
<p class="h1">Visualization Setting</p>
|
||||||
<li class="rounded-xl p-2 mr-3 cursor-pointer border border-[#F0EFF4] hover:bg-primary" @click="switchMapType('processMap')">Process map</li>
|
</template>
|
||||||
<li class="rounded-xl p-2 cursor-pointer border border-[#F0EFF4] hover:bg-primary" @click="switchMapType('bpmn')">BPMN model</li>
|
<div>
|
||||||
<li class="p-2">map type: {{ mapType }}</li>
|
<!-- View -->
|
||||||
</ul>
|
<div class="my-4 border-b border-neutral-200">
|
||||||
<!-- 選擇繪畫樣式 bezier / unbundled-bezier button-->
|
<p class="h2">View</p>
|
||||||
<ul class="m-3 flex">
|
<ul class="space-y-3 mb-4">
|
||||||
<li class="rounded-xl p-2 mr-3 cursor-pointer border border-[#F0EFF4] hover:bg-primary" @click="switchCurveStyles('unbundled-bezier')">unbundled-bezier</li>
|
<!-- 選擇 bpmn / processmap button -->
|
||||||
<li class="rounded-xl p-2 cursor-pointer border border-[#F0EFF4] hover:bg-primary" @click="switchCurveStyles('taxi')">taxi</li>
|
<li class="btn-toggle-content">
|
||||||
<li class="p-2">curve style: {{ curveStyle }}</li>
|
<span class="btn-toggle-item" :class="mapType === 'processMap'?'btn-toggle-show ':''" @click="switchMapType('processMap')">
|
||||||
</ul>
|
Process map
|
||||||
<!-- 直向 TB | 橫向 LR -->
|
</span>
|
||||||
<ul class="m-3 flex">
|
<span class="btn-toggle-item" :class="mapType === 'bpmn'?'btn-toggle-show':''" @click="switchMapType('bpmn')">
|
||||||
<li class="rounded-xl p-2 mr-3 cursor-pointer border border-[#F0EFF4] hover:bg-primary" @click="switchRank('LR')">LR</li>
|
BPMN Model
|
||||||
<li class="rounded-xl p-2 cursor-pointer border border-[#F0EFF4] hover:bg-primary" @click="switchRank('TB')">TB</li>
|
</span>
|
||||||
<li class="p-2">rank: {{ rank }}</li>
|
</li>
|
||||||
</ul>
|
<!-- 選擇繪畫樣式 bezier / unbundled-bezier button-->
|
||||||
<!-- Data Layer type -->
|
<li class="btn-toggle-content">
|
||||||
<ul class="m-3">
|
<span class="btn-toggle-item" :class="curveStyle === 'unbundled-bezier'?'btn-toggle-show ':''" @click="switchCurveStyles('unbundled-bezier')">
|
||||||
<li class="flex mb-3" @change="switchDataLayerType($event, 'freq')">
|
Curved
|
||||||
<div class="mr-5">
|
</span>
|
||||||
<input type="radio" id="freq" value="freq" name="dataLayer" checked/>
|
<span class="btn-toggle-item" :class="curveStyle === 'taxi'?'btn-toggle-show':''" @click="switchCurveStyles('taxi')">
|
||||||
<label for="freq">Frequency</label>
|
Elbow
|
||||||
</div>
|
</span>
|
||||||
<div>
|
</li>
|
||||||
<select class="border-b" :disabled="dataLayerType === 'duration'">
|
<!-- 直向 TB | 橫向 LR -->
|
||||||
<option v-for="(freq, index) in selectFrequency" :key="index" :value="freq.value" :disabled="freq.disabled" :selected="freq.value === selectedFreq">{{ freq.label }}</option>
|
<li class="btn-toggle-content">
|
||||||
</select>
|
<span class="btn-toggle-item" :class="rank === 'LR'?'btn-toggle-show ':''" @click="switchRank('LR')">
|
||||||
</div>
|
Horizontal
|
||||||
|
</span>
|
||||||
|
<span class="btn-toggle-item" :class="rank === 'TB'?'btn-toggle-show':''" @click="switchRank('TB')">
|
||||||
|
Vertical
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- Data Layer -->
|
||||||
|
<div>
|
||||||
|
<p class="h2">Data Layer</p>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="w-1/2">
|
||||||
|
<select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'duration'">
|
||||||
|
<option v-for="(freq, index) in selectFrequency" :key="index" :value="freq.value" :disabled="freq.disabled" :selected="freq.value === selectedFreq">{{ freq.label }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
<div class="w-1/2">
|
||||||
|
<select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'freq'">
|
||||||
|
<option v-for="(duration, index) in selectDuration" :key="index" :value="duration.value" :disabled="duration.disabled" :selected="duration.value === selectedDuration">{{ duration.label }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 測試用 -->
|
||||||
|
<li class="mt-20">curve style: {{ curveStyle }}</li>
|
||||||
|
<li >map type: {{ mapType }}</li>
|
||||||
|
<li >rank: {{ rank }}</li>
|
||||||
|
<li >Data Layer Type: {{ dataLayerType }}</li>
|
||||||
|
<li >Data Layer Option: {{ dataLayerOption }}</li>
|
||||||
|
</Sidebar>
|
||||||
|
|
||||||
|
<!-- Switch data type Sidebar -->
|
||||||
|
<div class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10" :class="visibleLeft === true? 'bg-neutral-100':''">
|
||||||
|
<ul class="space-y-4 flex flex-col justify-center items-center">
|
||||||
|
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100" @click="visibleLeft = true">
|
||||||
|
<span class="material-symbols-outlined text-2xl text-neutral-500">
|
||||||
|
track_changes
|
||||||
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="flex mb-3" @change="switchDataLayerType($event, 'duration')">
|
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100">
|
||||||
<div class="mr-5">
|
<span class="material-symbols-outlined text-2xl text-neutral-500">
|
||||||
<input type="radio" id="duration" value="duration" name="dataLayer" />
|
tornado
|
||||||
<label for="duration">Duration</label>
|
</span>
|
||||||
</div>
|
</li>
|
||||||
<div>
|
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100">
|
||||||
<select class="border-b" :disabled="dataLayerType === 'freq'">
|
<span class="material-symbols-outlined text-2xl text-neutral-500">
|
||||||
<option v-for="(duration, index) in selectDuration" :key="index" :value="duration.value" :disabled="duration.disabled" :selected="duration.value === selectedDuration">{{ duration.label }}</option>
|
rebase
|
||||||
</select>
|
</span>
|
||||||
</div>
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul class="flex flex-col justify-center items-center">
|
||||||
|
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100">
|
||||||
|
<span class="material-symbols-outlined text-2xl text-neutral-500">
|
||||||
|
highlight
|
||||||
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-3">Data Layer Type: {{ dataLayerType }}</li>
|
|
||||||
<li class="mb-3">Data Layer Option: {{ dataLayerOption }}</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="min-w-full min-h-full">
|
|
||||||
<div id="cy" class="min-w-full min-h-screen border"></div>
|
<!-- cytoscapeMap -->
|
||||||
|
<div class="min-w-full h-screen-main bg-neutral-100 -z-40">
|
||||||
|
<div id="cy" class="min-w-full h-screen-main "></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
|
||||||
|
<ul class="flex flex-col justify-center items-center">
|
||||||
|
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100">
|
||||||
|
<span class="material-symbols-outlined text-2xl text-neutral-500">
|
||||||
|
info
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -109,6 +182,7 @@ export default {
|
|||||||
selectedFreq: '',
|
selectedFreq: '',
|
||||||
selectedDuration: '',
|
selectedDuration: '',
|
||||||
rank: 'LR', // 直向 TB | 橫向 LR
|
rank: 'LR', // 直向 TB | 橫向 LR
|
||||||
|
visibleLeft: false, // SideBar
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -309,8 +383,24 @@ export default {
|
|||||||
this.allMapDataStore.logId = this.$route.params.logId;
|
this.allMapDataStore.logId = this.$route.params.logId;
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.isLoading = true;
|
this.isLoading = false;
|
||||||
this.executeApi();
|
this.executeApi();
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.p-sidebar-left {
|
||||||
|
@apply ml-14
|
||||||
|
}
|
||||||
|
.p-sidebar-mask {
|
||||||
|
height: calc(100vh - 104px) !important;
|
||||||
|
top: 104px !important;
|
||||||
|
}
|
||||||
|
.p-sidebar {
|
||||||
|
@apply !shadow-[1px_0px_4px_rgba(0,0,0,0.25)]
|
||||||
|
}
|
||||||
|
.p-sidebar-header {
|
||||||
|
@apply bg-neutral-200 border-b border-neutral-300 !py-2 !justify-between
|
||||||
|
};
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -50,7 +50,6 @@ export default {
|
|||||||
return {
|
return {
|
||||||
isDisabled: true,
|
isDisabled: true,
|
||||||
showPassword: false,
|
showPassword: false,
|
||||||
visibleLeft: false,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
|
|||||||
Reference in New Issue
Block a user