admin/hermione-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added spinner and check input

Browse Source
This commit is contained in:
andrea.terzani
2024-11-05 12:32:18 +01:00
parent f71948e888
commit c842ec45e2
7 changed files with 101 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@@ -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",

3
package.json
View File

@@ -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",

9
src/layout/AppTopbar.vue
View File

@@ -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 });
<div class="layout-topbar-actions">
<div class="layout-config-menu">
<ProgressSpinner v-if="loadingStore.isLoading" style="width: 25px; height: 25px; margin-top: 6px" strokeWidth="2" fill="transparent"/>
<div v-if="loadingStore.isLoading">
<!--<ProgressSpinner v-if="loadingStore.loadingType=='data'" style="width: 25px; height: 25px; margin-top: 6px" strokeWidth="2" fill="transparent"/>-->
<JellyfishLoader v-if="loadingStore.loadingType=='ai'" scale="0.5" style="width: 25px; height: 10px; margin-right: 25px; margin-top:-5px" />
<RiseLoader v-if="loadingStore.loadingType=='data'" style="scale: 0.5; height: 10px; margin-top:5px"/>
</div>
<button @click="router.push('/mdcanvas')" class="layout-topbar-action" >
<i class="pi pi-pencil"></i>
</button >

25
src/main.js
View File

@@ -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);
});

16
src/stores/LoadingStore.js
View File

@@ -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
}
})

8
src/views/pages/ApplicationBrowser.vue
View File

@@ -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;
})
}

49
src/views/pages/ScenarioExec.vue
View File

@@ -1,8 +1,5 @@
<template>
<div v-if="loading" class="flex justify-center">
<ProgressSpinner style="width: 50px; height: 50px; margin-top: 50px" strokeWidth="3" fill="transparent"/>
</div>
<div v-else>
<div class="flex items-center justify-between p-2">
<h1>
{{ scenario.name }}
@@ -24,8 +21,10 @@
class="full-width-input"
/>
</div>
</div>
<Button label="Send" @click="execScenario" class="mt-9 ml-4" :disabled="!isInputFilled"/>
</div>
</div>
<div class="flex justify-center">"
<Button :disabled="loadingStore.exectuion_loading || !isInputFilled" label="Execute" @click="execScenario" size="large" iconPos="right" icon="pi pi-cog"></Button>
</div>
</template>
<template v-else>
@@ -39,20 +38,22 @@
v-model="formData[input.name]"
:options="input.options"
class="full-width-input"
:disabled="loadingStore.exectuion_loading"
/>
</div>
</div>
</div>
<div class="flex justify-end">
<Button label="Submit" @click="execScenario" class=""/>
<div class="flex justify-center">"
<Button :disabled="loadingStore.exectuion_loading || !isInputFilled " label="Execute" @click="execScenario" size="large" iconPos="right" icon="pi pi-cog"></Button>
</div>
</template>
</div>
</div>
</div>
<div v-if="loading_data" class="flex justify-center">
<ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent"/>
<jellyfish-loader :loading="loadingStore.exectuion_loading" scale="1" />
<!--<ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent"/>-->
</div>
<div v-if="data_loaded">
<Panel class="mt-6">
@@ -95,17 +96,19 @@
<script setup>
import ChangeImpactOutputViewer from '@/components/ChangeImpactOutputViewer.vue';
import { LoadingStore } from '@/stores/LoadingStore';
import axios from 'axios';
import JsonEditorVue from 'json-editor-vue';
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import InputText from 'primevue/inputtext';
import ProgressSpinner from 'primevue/progressspinner';
import Select from 'primevue/select';
import Textarea from 'primevue/textarea';
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { JellyfishLoader } from "vue3-spinner";
const loadingStore = LoadingStore();
const router = useRouter();
@@ -123,20 +126,29 @@ const debug_modal = ref(false);
let pollingInterval = null;
const isInputFilled = computed(() => {
const inputName = scenario.value.inputs[0]?.name;
return inputName && formData.value[inputName] && formData.value[inputName].length > 0;
var isFilled = true;
if(scenario.value.inputs === undefined) {
return false;
}
scenario.value.inputs.forEach(input => {
if(formData.value[input.name] === undefined || formData.value[input.name] === '') {
isFilled= false;
}
});
return isFilled;
});
onMounted(() => {
loading.value = true
const id = route.params.id;
loadingStore.scenario_loading = true;
axios.get('/scenarios/' + id )
.then(response => {
loading.value = false
loadingStore.scenario_loading = false;
scenario.value = response.data
});
});
@@ -159,6 +171,8 @@ onMounted(() => {
loading_data.value = true;
data_loaded.value = false;
loadingStore.exectuion_loading = true;
const data = {
scenario_id: scenario.value.id,
inputs: { ...formData.value }
@@ -173,6 +187,8 @@ onMounted(() => {
})
.catch(error => {
console.error('Error executing scenario:', error);
loadingStore.exectuion_loading = false;
});
};
@@ -219,6 +235,9 @@ axios.get('/scenarios/getExecutionProgress/'+exec_id.value).then(response => {
// Function to stop polling
function stopPolling() {
clearInterval(pollingInterval);
loadingStore.exectuion_loading = false;
console.log("Polling stopped.");
}