diff --git a/package-lock.json b/package-lock.json index 3d64734..7ce4e9c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,7 +34,8 @@ "vue-highlight-code": "^0.2.0", "vue-markdown-render": "^2.2.1", "vue-router": "^4.4.0", - "vue3-markdown": "^1.1.9" + "vue3-markdown": "^1.1.9", + "vue3-spinner": "^0.0.17" }, "devDependencies": { "@primevue/auto-import-resolver": "^4.0.1", @@ -6508,6 +6509,17 @@ "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.7.tgz", "integrity": "sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ==" }, + "node_modules/vue3-spinner": { + "version": "0.0.17", + "resolved": "https://registry.npmjs.org/vue3-spinner/-/vue3-spinner-0.0.17.tgz", + "integrity": "sha512-iiOa1rRxMOFWmEExdPYwAgY+EavW21kPa0G3khS3vRVnDxVV2QPXHugBucZxpuyNijMZxR4mq+/ryNV7ziHK2Q==", + "dependencies": { + "vue": "^3.2.41" + }, + "peerDependencies": { + "vue": "^3.2.41" + } + }, "node_modules/w3c-keyname": { "version": "2.2.8", "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz", diff --git a/package.json b/package.json index 5fafa5e..2f6e0f3 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,8 @@ "vue-highlight-code": "^0.2.0", "vue-markdown-render": "^2.2.1", "vue-router": "^4.4.0", - "vue3-markdown": "^1.1.9" + "vue3-markdown": "^1.1.9", + "vue3-spinner": "^0.0.17" }, "devDependencies": { "@primevue/auto-import-resolver": "^4.0.1", diff --git a/src/layout/AppTopbar.vue b/src/layout/AppTopbar.vue index 199c80d..51a4623 100644 --- a/src/layout/AppTopbar.vue +++ b/src/layout/AppTopbar.vue @@ -10,6 +10,7 @@ import { UserPrefStore } from '../stores/UserPrefStore.js'; import { computed, ref, watch } from 'vue'; import { useRoute } from 'vue-router'; +import { JellyfishLoader, RiseLoader } from "vue3-spinner"; import AppConfigurator from './AppConfigurator.vue'; import AppProfileMenu from './AppProfileMenu.vue'; @@ -78,10 +79,12 @@ watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
- - +
+ + + - +
diff --git a/src/main.js b/src/main.js index 35d4217..88ada23 100644 --- a/src/main.js +++ b/src/main.js @@ -20,6 +20,10 @@ import '@/assets/styles.scss'; import '@/assets/tailwind.css'; import { config } from 'md-editor-v3'; +import { LoadingStore } from './stores/LoadingStore.js'; + + + config({ @@ -53,6 +57,9 @@ var auth = createAuth({ }); axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL;//'http://localhost:8081'/// + + + console.log(import.meta.env.VITE_BACKEND_URL); const app = createApp(App); @@ -78,3 +85,21 @@ app.use(auth); app.component('BlockViewer', BlockViewer); app.mount('#app'); + +const loadingStore = LoadingStore() + + +axios.interceptors.request.use(function (config) { + loadingStore.another_loading = true; + return config +}, function (error) { + return Promise.reject(error); + }); + +axios.interceptors.response.use(function (response) { + loadingStore.another_loading = false; + + return response; + }, function (error) { + return Promise.reject(error); + }); diff --git a/src/stores/LoadingStore.js b/src/stores/LoadingStore.js index 59d8a33..f9beed9 100644 --- a/src/stores/LoadingStore.js +++ b/src/stores/LoadingStore.js @@ -8,14 +8,26 @@ export const LoadingStore = defineStore('loading_store', () => { const scenario_loading = ref(false) const user_loading = ref(false) const another_loading = ref(false) + const exectuion_loading = ref(false) const isLoading = computed(() => { - return scenario_loading.value || user_loading.value || another_loading.value + return scenario_loading.value || user_loading.value || another_loading.value || exectuion_loading.value }) + const loadingType = computed(() => { + if(exectuion_loading.value) return 'ai' + + if(scenario_loading.value) return 'data' + if(user_loading.value) return 'data' + if(another_loading.value) return 'data' + return 'none' + }) + return {isLoading, user_loading, scenario_loading, - another_loading + another_loading, + exectuion_loading, + loadingType } }) \ No newline at end of file diff --git a/src/views/pages/ApplicationBrowser.vue b/src/views/pages/ApplicationBrowser.vue index 4c5d76d..95d2c33 100644 --- a/src/views/pages/ApplicationBrowser.vue +++ b/src/views/pages/ApplicationBrowser.vue @@ -27,6 +27,7 @@ import FileFlowViewer from '@/components/FileFlowViewer.vue'; import { ApplicationCodeService } from '@/service/ApplicationCodeService'; +import { LoadingStore } from '@/stores/LoadingStore.js'; import Tree from 'primevue/tree'; import { onMounted, ref, watch } from 'vue'; import { useRouter } from 'vue-router'; @@ -39,6 +40,7 @@ const router = useRouter(); const userPrefStore = UserPrefStore(); //const selectedApp = userPrefStore.getSelApp; //const application=ref(selectedApp.fe_name) +const loadingStore = LoadingStore() onMounted(() => { console.log("Mounted") @@ -46,16 +48,20 @@ onMounted(() => { }) function fetchApplicationData() { - + LoadingStore.another_loading = true; ApplicationCodeService.getApplication(userPrefStore.getSelApp.internal_name) .then(response => { const tmp = [] tmp.push(response.data) nodes.value = tmp expandAll() + LoadingStore.another_loading = false; + }) .catch(error => { console.error("Error fetching application data:", error) + LoadingStore.another_loading = false; + }) } diff --git a/src/views/pages/ScenarioExec.vue b/src/views/pages/ScenarioExec.vue index 401041e..7aa22bb 100644 --- a/src/views/pages/ScenarioExec.vue +++ b/src/views/pages/ScenarioExec.vue @@ -1,8 +1,5 @@
- +
- + +
@@ -95,17 +96,19 @@