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

improve_layout + debug_modal

Browse Source
This commit is contained in:
paola.trabucco
2024-08-02 18:54:40 +02:00
parent ac588462d6
commit 2f3652f4a9
6 changed files with 720 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,99 +1,208 @@
<template>
<Flex>
<h1 v-if="!loading">
{{ scenario.name }}
</h1>
<div class="flex mt-6">
<div class="card flex flex-col gap-4 w-full">
<div v-if="!loading" v-for="input in scenario.inputs" :key="input.name" class="input-container">
<label :for="input.name"><b>{{ input.label }}</b></label>
<div class="input-wrapper">
<InputText :id="input.name" v-model="value" class="full-width-input"/>
<Button label="Send" severity="info" @click="execScenario(input)" class="send-button"></Button>
<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 }}
</h1>
<Button
@click="back()"
label="Load"
class="flex items-center text-sm">
<ChevronLeftIcon name="chevron-left" class="w-4 h-5 text-white"/>
<span>Back to Scenarios</span>
</Button>
</div>
<div class="flex mt-6">
<div class="card flex flex-col gap-4 w-full">
<template v-if="scenario.inputs && scenario.inputs.length === 1">
<div class="input-container flex items-center">
<div class="flex-grow">
<label :for="scenario.inputs[0].name"><h2>{{ scenario.inputs[0].label }}</h2></label>
<div class="input-wrapper">
<component
:is="getInputComponent(scenario.inputs[0].type)"
:id="scenario.inputs[0].name"
v-model="formData[scenario.inputs[0].name]"
:options="scenario.inputs[0].options"
class="full-width-input"
/>
</div>
</div>
<Button label="Send" @click="execScenario" class="mt-9 ml-4"/>
</div>
</template>
<template v-else>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div v-for="input in scenario.inputs" :key="input.name" class="input-container">
<label :for="input.name"><b>{{ input.label }}</b></label>
<div class="input-wrapper">
<component
:is="getInputComponent(input.type)"
:id="input.name"
v-model="formData[input.name]"
:options="input.options"
class="full-width-input"
/>
</div>
</div>
</div>
<div class="flex justify-end">
<Button label="Submit" @click="execScenario" class=""/>
</div>
</template>
</div>
</div>
</div>
<div class="flex mt-6">
<div class="card flex flex-col gap-4 w-full">
<div v-if="scenario_output != null">
<vue-markdown :source="scenario_output" />
<div v-if="loading_data" class="flex justify-center">
<ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent"/>
</div>
<div v-if="data_loaded">
<Panel class="mt-6">
<template #header>
<div class="flex items-center gap-2">
<span class="font-bold">AI Response</span>
</div>
</template>
<template #icons>
<div class="flex justify-end">
<Button severity="secondary" rounded @click="openDebug" v-tooltip.left="'View code'">
<i class="pi pi-code"></i>
</Button>
</div>
</template>
<div class="flex mt-2">
<div class="card flex flex-col gap-4 w-full">
<div v-if="scenario_output != null">
<vue-markdown :source="scenario_output" />
</div>
</div>
</div>
</Panel>
<Dialog v-model:visible="debug_modal" maximizable modal :header="scenario.name" :style="{ width: '75%' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
<div class="flex">
<div class="card flex flex-col gap-4 w-full">
<JsonEditorVue
v-model="exec_scenario"
/>
</div>
</div>
</Flex>
</Dialog>
</div>
</template>
<script setup>
import { ChevronLeftIcon } from '@heroicons/vue/24/solid';
import axios from 'axios';
import JsonEditorVue from 'json-editor-vue';
import InputNumber from 'primevue/inputnumber';
import InputText from 'primevue/inputtext';
import ProgressSpinner from 'primevue/progressspinner';
import Select from 'primevue/select';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import VueMarkdown from 'vue-markdown-render'
const value = ref('');
const scenario = ref(null);
const inputs = ref([]);
const scenario_output = ref(null);
const loading = ref(true);
import VueMarkdown from 'vue-markdown-render';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
const value = ref('');
const scenario = ref({});
const scenario_output = ref(null);
const loading = ref(false);
const data_loaded = ref(false);
const loading_data = ref(false);
const formData = ref({});
const exec_id = ref(null);
const exec_scenario = ref({});
const debug_modal = ref(false)
onMounted(() => {
loading.value = true
const id = route.params.id;
const id = route.params.id;
console.log(id)
axios.get('http://localhost:8081/scenarios/' + id )
.then(response => {
console.log(response);
loading.value = false
scenario.value = response.data
});
});
});
const execScenario = (input) => {
scenario_output.value = null
loading.value = true
const data = {
scenario_id: scenario.value.id,
inputs: {
[input.name]: value.value
const getInputComponent = (type) => {
switch (type) {
case 'text':
return InputText;
case 'number':
return InputNumber;
case 'select':
return Select;
default:
return InputText;
}
};
const execScenario = () => {
loading_data.value = true;
data_loaded.value = false;
const data = {
scenario_id: scenario.value.id,
inputs: { ...formData.value }
};
console.log(data);
axios.post('http://localhost:8081/scenarios/execute', data)
.then(response => {
loading_data.value = false;
data_loaded.value = true;
console.log(response);
scenario_output.value = response.data.stringOutput;
exec_id.value = response.data.scenarioExecution_id
})
.catch(error => {
console.error('Error executing scenario:', error);
});
};
const back = () => {
router.push({ name: 'scenario-list'});
}
console.log(data)
const openDebug = () => {
console.log("exec_id", exec_id.value)
axios.get('http://localhost:8081/scenarios/execute/'+ exec_id.value).then(resp =>{
exec_scenario.value = resp.data
console.log(exec_scenario.value)
axios.post('http://localhost:8081/scenarios/execute', data)
.then(response => {
loading.value = false
console.log(response);
scenario_output.value = response.data.stringOutput
});
}
debug_modal.value = true
})
}
</script>
<style scoped>
.input-container {
margin-bottom: 1em;
}
.input-container {
margin-bottom: 1em;
}
.input-wrapper {
display: flex;
align-items: center;
gap: 0.5em;
margin-top: 10px;
}
.input-wrapper {
display: flex;
align-items: center;
gap: 0.5em;
margin-top: 10px;
}
.send-button {
margin-left: 0.5em;
}
.full-width-input {
width: 100%;
}
.full-width-input {
width: 100%;
}
</style>

64
src/views/pages/ScenarioList.vue
View File

@@ -1,5 +1,10 @@
<template>
<div v-if="loading">Loading...</div>
<div>
<h1>Available Scenarios</h1>
</div>
<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>
<DataView :value="scenarios" :layout="layout" paginator :rows="5">
<template #header>
@@ -13,40 +18,37 @@
</template>
<template #list="slotProps">
<div class="flex flex-col">
<div class="flex flex-col space-y-4 mt-2">
<div v-for="(item, index) in slotProps.items" :key="index">
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
<div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
<div class="flex flex-row md:flex-col justify-between items-start gap-2">
<div>
<div class="text-lg font-medium mt-2">{{ item.name }}</div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.description }}</span>
</div>
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4 bg-white dark:bg-gray-800 rounded-lg shadow-md"
:class="{ 'border-t border-gray-200 dark:border-gray-700': index !== 0 }">
<div class="flex flex-col flex-grow">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ item.name }}</h3>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 mt-2">{{ item.description }}</p>
</div>
<div class="flex flex-col md:items-end gap-8">
<div class="flex flex-row-reverse md:flex-row gap-2">
<Button @click="executeScenario(item.id)" label="Load" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
</div>
<div class="mt-auto flex justify-end">
<Button @click="executeScenario(item.id)" label="Load" class="flex-auto md:flex-initial text-white">
<ChevronRightIcon class="w-5 h-10 text-white transition-transform transform hover:translate-x-1"/>
</Button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<template #grid="slotProps">
<div class="grid grid-cols-12 gap-4">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
<div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
<div class="text-lg font-medium mt-2">{{ item.name }}</div>
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.description }}</span>
<div class="pt-6">
<div class="flex flex-col gap-6 mt-6">
<div class="flex gap-2">
<Button @click="executeScenario(item.id)" label="Load" class="flex-auto whitespace-nowrap"></Button>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mt-2">
<div v-for="(item, index) in slotProps.items" :key="index" class="p-2">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md flex flex-col h-full">
<div class="p-4 flex flex-col flex-grow">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ item.name }}</h3>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 mt-2">{{ item.description }}</p>
</div>
<div class="p-2 border-t border-gray-200 dark:border-gray-700 flex justify-end">
<Button @click="executeScenario(item.id)" size="small" label="Load" class="flex-auto md:flex-initial text-white">
<ChevronRightIcon class="w-6 h-5 text-white transition-transform transform hover:translate-x-1"/>
</Button>
</div>
</div>
</div>
@@ -57,17 +59,19 @@
</template>
<script setup>
import { ChevronRightIcon } from '@heroicons/vue/24/solid';
import DataView from 'primevue/dataview';
import ProgressSpinner from 'primevue/progressspinner';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ScenarioService } from '../../service/ScenarioService.js';
const router = useRouter()
const layout = ref('grid');
const options = ref(['list', 'grid']);
const scenarios = ref([])
const loading = ref(false)
const loading = ref(true)
onMounted(() => {
@@ -85,3 +89,5 @@ import { ScenarioService } from '../../service/ScenarioService.js';
router.push({ name: 'scenario-exec', params: { id: id } });
}
</script>
<style scoped></style>