hermione scenarios

src/views/pages/ScenarioExec.vue

@@ -1,6 +1,81 @@
 <template>
-    <div className="card">
-        <h5>Empty Page</h5>
-        <p>Use this page to start from scratch and place your custom content.</p>
+    <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>
+            </div>
+        </div>
+        <div>
+            <p>{{ scenario_output }}</p>
+        </div>
     </div>
 </template>
+
+<script setup>
+import axios from 'axios';
+import InputText from 'primevue/inputtext';
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+const value = ref('');
+const scenario = ref(null);
+const inputs = ref([]);
+const scenario_output = ref('');
+const loading = ref(false); 
+
+const route = useRoute();
+
+onMounted(async () => {
+    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
+        });      
+});
+
+const execScenario = (input) => {
+    const data = {
+        scenario_id: scenario.value.id,
+        inputs: {
+            [input.name]: value.value
+        }
+    }
+
+    console.log(data)
+
+    axios.post('http://localhost:8081/scenarios/execute', data)
+        .then(response => {
+            console.log(response);
+            scenario_output.value = response.data.stringOutput
+        });
+   
+}
+</script>
+
+<style scoped>
+.input-container {
+    margin-bottom: 1em;
+}
+
+.input-wrapper {
+    display: flex;
+    align-items: center; 
+    gap: 0.5em; 
+    margin-top: 10px;
+}
+
+.send-button {
+    margin-left: 0.5em; 
+}
+
+.full-width-input {
+    width: 100%;
+}
+
+</style>