diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index 7f23e6c..779cb62 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -3,12 +3,9 @@
-

FILES

+

{{ navViewName }}

    -
  • ALL
    • -
  • DISCOVER
    • -
  • COMPARE
    • -
  • DESIGN
    • +
  • {{ item }}
@@ -43,18 +40,21 @@ export default { data() { return { showNavbarBreadcrumb: false, - // 之後優化要模組化 - // navViewData: - // { - // FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN'], - // DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA'] - // }, - // navViewName: '', + navViewData: + { + FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN'], + DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA'] + }, + navViewName: 'FILES', }; }, + watch: { + $route(to){ + this.navViewName = to.name.toUpperCase(); + } + }, setup() { const store = filesStore(); - return { store, } @@ -67,9 +67,6 @@ export default { this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false; }, methods: { - // switchNavView(name) { - // this.navViewName = name; - // }, switchNavItem(event) { this.store.filesTag = event.target.innerText; } diff --git a/src/module/cytoscapeMap.js b/src/module/cytoscapeMap.js index 9b43b8e..ebf246a 100644 --- a/src/module/cytoscapeMap.js +++ b/src/module/cytoscapeMap.js @@ -5,13 +5,20 @@ import TimeLabel from '@/module/timeLabel.js'; // 時間格式轉換器 cytoscape.use( dagre ); -export default function cytoscapeMap(mapData, mapType, dataLayerType, dataLayerOption, curveStyle, rank, graphId) { - // console.log(mapData); - // console.log(mapType); - // console.log(dataLayerType); - // console.log(dataLayerOption); - // console.log(curveStyle); - // console.log(rank); +/** + * @param {object} mapData processMapData | bpmnData + * mapData:{ + * startId: 0, + * endId: 1, + * nodes: [], + * edges: [] + * } + * @param {string} dataLayerType DataLayer's type + * @param {string} dataLayerOption DataLayer's options + * @param {string} curve Curve's type + * @param {string} graphId cytoscape's container + */ +export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, curveStyle, rank, graphId) { // create color Gradient // 設定每個 node, edges 的顏色與樣式 let gradientArray = []; @@ -71,8 +78,7 @@ export default function cytoscapeMap(mapData, mapType, dataLayerType, dataLayerO }, layout: { name: 'dagre', - rankDir: rank, // 直向 TB | 橫向 LR, 'cytoscape-dagre' 裡的變數 - + rankDir: rank, // 直向 TB | 橫向 LR, 'cytoscape-dagre' 套件裡的變數 }, style: [ // 點擊 node 後改變的樣式 diff --git a/src/stores/allMapData.js b/src/stores/allMapData.js index ebcf30c..57753aa 100644 --- a/src/stores/allMapData.js +++ b/src/stores/allMapData.js @@ -1,12 +1,28 @@ import { defineStore } from "pinia"; +import loadingStore from './loading.js'; +import pinia from '@/stores/main.js' +import {useToast} from 'vue-toast-notification'; +import 'vue-toast-notification/dist/theme-sugar.css'; + +const loading = loadingStore(pinia); +const $toast = useToast(); +// Delay loading and toast 待模組化 +let delay = s => new Promise((resolve, reject) => setTimeout(resolve, s)); export default defineStore('allMapDataStore', { state: () => ({ logId: null, - processMap: {}, - bpmn: {}, + allProcessMap: {}, + allBpmn: {}, + httpStatus: 200, }), getters: { + processMap: state => { + return state.allProcessMap; + }, + bpmn: state => { + return state.allBpmn; + } }, actions: { /** @@ -18,9 +34,21 @@ export default defineStore('allMapDataStore', { try { const response = await this.$axios.get(api); - this.processMap = response.data.process_map; - this.bpmn = response.data.bpmn; + this.allProcessMap = response.data.process_map; + this.allBpmn = response.data.bpmn; + + if(this.httpStatus < 300) loading.isLoading = false; } catch(error) { + this.httpStatus = error.request.status; + delay().then(() =>{ + loading.isLoading = true; + return delay(1000); + }).then(()=>{ + loading.isLoading = false; + return delay(500); + }).then(() => { + $toast.default('Failed to load the discover.'); + }) }; }, } diff --git a/src/stores/files.js b/src/stores/files.js index 5595b2b..fc9d06f 100644 --- a/src/stores/files.js +++ b/src/stores/files.js @@ -1,5 +1,5 @@ import { defineStore } from "pinia"; -import loadingStore from './loading.js'; +import loadingStore from './loading.js'; import pinia from '@/stores/main.js' import axios from "axios"; import moment from 'moment'; @@ -61,7 +61,6 @@ export default defineStore('filesStore', { */ async fetchEventLog() { const api = '/api/logs'; - // console.log(this); try { const response = await axios.get(api); diff --git a/src/views/Discover/index.vue b/src/views/Discover/index.vue index 8d68f78..a1e12b1 100644 --- a/src/views/Discover/index.vue +++ b/src/views/Discover/index.vue @@ -48,8 +48,8 @@
  • Data Layer Option: {{ dataLayerOption }}
    • -
    -
    +
    +
    @@ -106,12 +106,11 @@ export default { ], curveStyle:'unbundled-bezier', // unbundled-bezier | taxi mapType: 'processMap', // processMap | bpmn - mapData: {}, dataLayerType: 'freq', // freq | duration dataLayerOption: 'total', selectedFreq: '', selectedDuration: '', - rank: 'LR' // 直向 TB | 橫向 LR + rank: 'LR', // 直向 TB | 橫向 LR } }, methods: { @@ -121,7 +120,7 @@ export default { */ switchMapType(type) { this.mapType = type; - this.executeApi(type); + this.createCy(type); }, /** * switch curve style @@ -129,7 +128,7 @@ export default { */ switchCurveStyles(style) { this.curveStyle = style; - this.executeApi(this.mapType); + this.createCy(this.mapType); }, /** * switch rank @@ -137,7 +136,7 @@ export default { */ switchRank(rank) { this.rank = rank; - this.executeApi(this.mapType); + this.createCy(this.mapType); }, /** * switch Data Layoer Type or Option. @@ -161,7 +160,7 @@ export default { break; }; - this.executeApi(this.mapType); + this.createCy(this.mapType); }, /** * 將 element nodes 資料彙整 @@ -246,7 +245,7 @@ export default { width:100, backgroundColor:'#FFCCCC', bordercolor:'#003366', - shape:"ellipse", + shape:"round-rectangle", freq:node.freq, duration:node.duration, } @@ -287,27 +286,33 @@ export default { }); }, /** - * create cytoscape map - * @param {string} type this.mapType processMap | bpmn - */ - async executeApi(type) { + * get api data + */ + async executeApi() { await this.allMapDataStore.getAllMapData(); - - let graphId = document.getElementById(type); + this.createCy(this.mapType); + }, + /** + * create cytoscape's map + * @param {string} type this.mapType processMap | bpmn + */ + createCy(type) { + let graphId = document.getElementById('cy'); let mapData = type === 'processMap'? this.processMapData: this.bpmnData; - this.setNodesData(mapData); - this.setEdgesData(mapData); - - if(this[type].vertices.length !== 0) cytoscapeMap(mapData, this.mapType, this.dataLayerType, this.dataLayerOption, this.curveStyle, this.rank, graphId); - } + if(this[type].vertices.length !== 0){ + this.setNodesData(mapData); + this.setEdgesData(mapData); + cytoscapeMap(mapData, this.dataLayerType, this.dataLayerOption, this.curveStyle, this.rank, graphId); + }; + }, }, created() { this.allMapDataStore.logId = this.$route.params.logId; }, mounted() { - this.isLoading = false; - this.executeApi(this.mapType); + this.isLoading = true; + this.executeApi(); }, }