Added Cia Scenario Viewer

2024-09-27 09:33:49 +02:00
parent 9067b3f617
commit cd485a0475
15 changed files with 1770 additions and 175 deletions
--- a/src/views/pages/OldScenarioExec.vue
+++ b/src/views/pages/OldScenarioExec.vue
@@ -0,0 +1,154 @@
+<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">
+            
+                <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">
+                    <div class="input-container flex items-center" v-if="!data_loaded">
+                        <div class="flex-grow">
+                            <label ><h2>Execution Id</h2></label>
+                            <div class="input-wrapper">
+                                <InputText v-model="execution_id" class="full-width-input" />
+                            </div>
+                        </div>
+                        <Button label="Find" @click="retrieveScenarioExec" class="mt-9 ml-4" />
+                    </div>
+                    <h1>
+                    {{ scenario.name }}
+                    </h1>
+                </div>
+            </div>
+        </div>
+
+        <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">Hermione 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="card flex flex-col gap-4 w-full">
+                    <div v-if="scenario_output != null">
+                        <!--<MdPreview class="editor" v-model="scenario_output" language="en-US"  />-->
+                        <ChangeImpactOutputViewer :scenario_output="scenario_output" />
+                        
+                    </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>
+    
+            </Dialog>
+        </div>
+</template>
+
+<script setup>
+
+import ChangeImpactOutputViewer from '@/components/ChangeImpactOutputViewer.vue';
+import { ChevronLeftIcon } from '@heroicons/vue/24/solid';
+import axios from 'axios';
+import JsonEditorVue from 'json-editor-vue';
+import 'md-editor-v3/lib/style.css';
+import InputText from 'primevue/inputtext';
+import ProgressSpinner from 'primevue/progressspinner';
+import { ref } from 'vue';
+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)
+const execution_id=ref("");
+
+
+const retrieveScenarioExec = () => {
+    const id = execution_id.value
+    loading.value = true
+
+    axios.get('/execution?id=' + id )
+        .then(response => {
+            loading.value = false
+            scenario.value  = response.data.scenario
+            exec_scenario.value = response.data
+            data_loaded.value = true;
+            scenario_output.value = response.data.execSharedMap.scenario_output;
+            exec_id.value = response.data.scenarioExecution_id      
+        });
+};
+
+   
+
+    
+const back = () => {
+    router.push({ name: 'scenario-list'});
+}
+
+const openDebug = () => {
+    debug_modal.value = true
+}
+</script>
+
+<style scoped>
+    .input-container {
+        margin-bottom: 1em;
+    }
+
+    .input-wrapper {
+        display: flex;
+        align-items: center; 
+        gap: 0.5em; 
+        margin-top: 10px;
+    }
+
+    .full-width-input {
+        width: 100%;
+    }
+
+
+.editor ol {
+    list-style-type: decimal !important;
+}
+
+.editor ul {
+    list-style-type: disc !important;
+}
+ 
+</style>