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

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.");
}