106 lines
2.3 KiB
Vue
106 lines
2.3 KiB
Vue
<template>
|
|
<div v-if="parsedOuput != null">
|
|
<h1>{{ parsedOuput.title }}</h1>
|
|
<MarkdownViewer class="editor" v-model="parsedOuput.description" />
|
|
<CiaFlowCodeViewer :changes="parsedOuput.changes"> </CiaFlowCodeViewer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, onMounted, ref, toRefs } from 'vue';
|
|
import CiaFlowCodeViewer from './CiaFlowCodeViewer.vue';
|
|
import MarkdownViewer from './MarkdownViewer.vue';
|
|
|
|
const parsedOuput = ref(null);
|
|
|
|
//66f55e4b2894530b1c154f69
|
|
const props = defineProps({
|
|
scenario_output: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const { scenario_output } = toRefs(props);
|
|
|
|
onMounted(() => {
|
|
console.log(scenario_output.value.replace('```json', '').replace('```', ''));
|
|
var jsonParsed = JSON.parse(scenario_output.value.replace('```json', '').replace('```', ''));
|
|
console.log(jsonParsed);
|
|
parsedOuput.value = jsonParsed;
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
@import '@vue-flow/core/dist/style.css';
|
|
@import '@vue-flow/core/dist/theme-default.css';
|
|
@import '@vue-flow/controls/dist/style.css';
|
|
@import '@vue-flow/minimap/dist/style.css';
|
|
|
|
.basic-flow {
|
|
height: 90vh;
|
|
width: 100%;
|
|
}
|
|
|
|
.vue-flow__minimap {
|
|
transform: scale(75%);
|
|
transform-origin: bottom right;
|
|
}
|
|
|
|
.basic-flow.dark {
|
|
background: #2d3748;
|
|
color: #fffffb;
|
|
}
|
|
|
|
.basic-flow.dark .vue-flow__node {
|
|
background: #4a5568;
|
|
color: #fffffb;
|
|
}
|
|
|
|
.basic-flow.dark .vue-flow__node.selected {
|
|
background: #333;
|
|
box-shadow: 0 0 0 2px #2563eb;
|
|
}
|
|
|
|
.basic-flow .vue-flow__controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.basic-flow.dark .vue-flow__controls {
|
|
border: 1px solid #fffffb;
|
|
}
|
|
|
|
.basic-flow .vue-flow__controls .vue-flow__controls-button {
|
|
border: none;
|
|
border-right: 1px solid #eee;
|
|
}
|
|
|
|
.basic-flow.dark .vue-flow__controls .vue-flow__controls-button:hover {
|
|
background: #4d4d4d;
|
|
}
|
|
|
|
.basic-flow.dark .vue-flow__edge-textbg {
|
|
fill: #292524;
|
|
}
|
|
|
|
.basic-flow.dark .vue-flow__edge-text {
|
|
fill: #fffffb;
|
|
}
|
|
|
|
.vue-flow__node-class-node {
|
|
border: 1px solid #dc07bc;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
background: #f5f5f5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
max-width: 250px;
|
|
min-width: 200px;
|
|
}
|
|
</style>
|