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

chore: Add vue-markdown-render dependency and update ScenarioExec.vue template

Browse Source
This commit is contained in:
andrea.terzani
2024-08-01 16:46:54 +02:00
parent fa96add05b
commit ac588462d6
3 changed files with 90 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,17 +1,29 @@
<template>
<div v-if="loading">Loading...</div>
<div v-else>
<div v-for="input in scenario.inputs" :key="input.name" class="input-container">
<label :for="input.name"><b>{{ input.name }}</b></label>
<div class="input-wrapper">
<InputText :id="input.name" v-model="value" :placeholder="`Type ${input.name}`" class="full-width-input"/>
<Button label="Send" severity="info" @click="execScenario(input)" class="send-button"></Button>
<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>
</div>
</div>
</div>
<div>
<p>{{ scenario_output }}</p>
<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>
</div>
</div>
</div>
</Flex>
</template>
<script setup>
@@ -19,27 +31,31 @@ import axios from 'axios';
import InputText from 'primevue/inputtext';
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('');
const loading = ref(false);
const scenario_output = ref(null);
const loading = ref(true);
const route = useRoute();
onMounted(async () => {
onMounted(() => {
loading.value = true
const id = route.params.id;
axios.get('http://localhost:8081/scenarios/' + id )
.then(response => {
console.log(response);
loading.value = false
scenario.value = response.data
scenario.value = response.data
});
});
const execScenario = (input) => {
scenario_output.value = null
loading.value = true
const data = {
scenario_id: scenario.value.id,
inputs: {
@@ -51,6 +67,8 @@ const execScenario = (input) => {
axios.post('http://localhost:8081/scenarios/execute', data)
.then(response => {
loading.value = false
console.log(response);
scenario_output.value = response.data.stringOutput
});