feat(config-preview): added

closes #96

Signed-off-by: Lukas Mertens <git@lukas-mertens.de>

commit-id:a96808ef

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@fontsource/open-sans-condensed": "^4.5.5",
     "@fontsource/roboto": "5.0.12",
+    "@highlightjs/vue-plugin": "^2.1.0",
     "@json-layout/core": "^0.9.3",
     "@json-layout/vocabulary": "^0.9.1",
     "@koumoul/vjsf": "^3.0.0-beta.3",
@@ -25,6 +26,8 @@
     "ajv-i18n": "^4.2.0",
     "core-js": "^3.34.0",
     "debug": "^4.3.4",
+    "highlight.js": "^11.9.0",
+    "js-yaml": "^4.1.0",
     "just-clone": "^6.2.0",
     "konva": "^8.4.3",
     "markdown-it": "^14.0.0",

src/components/ConfigPreview.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-dialog>
+    <template v-slot:activator="{ props: activatorProps }">
+      <slot name="activator" :activatorProps="activatorProps"></slot>
+    </template>
+    <template v-slot:default="{ isActive }">
+      <v-card title="Config Preview">
+        <v-card-text>
+          <v-tabs v-model="tab">
+            <v-tab value="yaml">
+              YAML
+            </v-tab>
+            <v-tab value="json">
+              JSON
+            </v-tab>
+          </v-tabs>
+          <v-window v-model="tab">
+            <v-window-item value="yaml">
+              <highlightjs language="yaml" :code="yamlCode"></highlightjs>
+            </v-window-item>
+            <v-window-item value="json">
+              <highlightjs language="json" :code="jsonCode"></highlightjs>
+            </v-window-item>
+          </v-window>
+        </v-card-text>
+      </v-card>
+    </template>
+  </v-dialog>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+
+<script lang="ts">
+import hljsVuePlugin from "@highlightjs/vue-plugin";
+
+export default {
+  components: {
+    highlightjs: hljsVuePlugin.component,
+  }
+}
+</script>
+<script setup lang="ts">
+import EVConfigModel from "@/modules/evbc/config_model";
+import {computed, ref} from "vue";
+
+import yaml from 'js-yaml';
+
+
+const props = defineProps<{
+  config: EVConfigModel,
+}>();
+
+const tab = ref('yaml');
+
+const jsonCode = computed(() => JSON.stringify(props.config.serialize(), null, 2));
+const yamlCode = computed(() => yaml.dump(props.config.serialize()));
+
+</script>
+

src/components/EvConfigCanvas.vue

@@ -4,10 +4,19 @@
 <template>
   <v-sheet id="konva-stage-container" width="100%" height="100vh" elevation="0">
     <div id="konva-stage" />
-    <!-- <v-sheet id="config-stage-info" class="pa-2" height="100" width="200" elevation="2" v-if="selected_interface">
-      {{ selected_interface }} <v-btn color="primary" x-small @click="discard_selected_terminal">Discard</v-btn>
-    </v-sheet> -->
     <div id="stage-controls">
+      <config-preview :config="current_config" v-if="current_config">
+        <template v-slot:activator="{ activatorProps }">
+          <v-tooltip location="left">
+            <template v-slot:activator="{ props }">
+              <v-btn id="show-preview-button" color="primary" v-bind="{...activatorProps, ...props}"
+                     prepend-icon="mdi-code-tags" icon="mdi-code-tags">
+              </v-btn>
+            </template>
+            <span>Show config preview</span>
+          </v-tooltip>
+        </template>
+      </config-preview>
       <v-tooltip location="left">
         <template v-slot:activator="{ props }">
           <v-btn id="reset-view-button" icon="mdi-undo" color="primary" @click="reset_view" v-bind="props"></v-btn>
@@ -26,20 +35,25 @@
 </template>
 
 <script lang="ts">
-import {computed, ComputedRef, defineComponent, inject, onMounted, watch} from 'vue';
+import {computed, ComputedRef, defineComponent, inject, onMounted, ref, watch} from 'vue';
 import {useEvbcStore} from '@/store/evbc';
 import ConfigStage from "@/modules/evconf_konva/config_stage";
 import EVConfigModel from "@/modules/evbc/config_model";
 import EVBackendClient from "@/modules/evbc/client";
 import {Notyf} from "notyf";
+import ConfigPreview from "@/components/ConfigPreview.vue";
 
 export default defineComponent({
-  setup() {
+  components: {ConfigPreview},
+  setup()
+  {
     const evbcStore = useEvbcStore();
     const evbc = inject<EVBackendClient>('evbc');
     const selected_interface: string | null = null;
     const notyf = inject<Notyf>('notyf');
 
+    ref(false);
+
     let stage: ConfigStage;
     onMounted(() => {
       stage = new ConfigStage(

src/plugins/index.ts

@@ -6,11 +6,21 @@ import {router} from "@/router";
 import evbcPlugin from "@/plugins/evbc";
 import vuetify from "@/plugins/vuetify";
 import pinia from "@/store";
+import hljs from "highlight.js/lib/core";
+import hljsVuePlugin from "@highlightjs/vue-plugin";
+import 'highlight.js/styles/github-dark.min.css';
+import yaml from 'highlight.js/lib/languages/yaml';
+import json from 'highlight.js/lib/languages/json';
+
+hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('json', json);
+
 
 export function registerPlugins (app: App) {
     app
         .use(pinia)
         .use(evbcPlugin)
         .use(vuetify)
-        .use(router);
+        .use(router)
+        .use(hljsVuePlugin);
 }