115 lines
2.3 KiB
Vue
115 lines
2.3 KiB
Vue
<template>
|
|
<div v-if="parsedOuput != null">
|
|
<h1>{{ parsedOuput.title }}</h1>
|
|
<MdPreview class="editor" v-model="parsedOuput.description" language="en-US" />
|
|
<CiaFlowCodeViewer :changes="parsedOuput.changes">
|
|
</CiaFlowCodeViewer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { MdPreview } from 'md-editor-v3';
|
|
import 'md-editor-v3/lib/style.css';
|
|
import { defineProps, onMounted, ref, toRefs } from 'vue';
|
|
import CiaFlowCodeViewer from './CiaFlowCodeViewer.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>
|