From d7c3a1b949c29f88d0285b8d35fb038fd582d835 Mon Sep 17 00:00:00 2001
From: Lukas Mertens <git@lukas-mertens.de>
Date: Tue, 19 Mar 2024 17:08:39 +0100
Subject: [PATCH] feat(config-preview): added

closes #96

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

commit-id:a96808ef
---
 package.json                      |  3 ++
 pnpm-lock.yaml                    | 25 ++++++++++++-
 src/components/ConfigPreview.vue  | 61 +++++++++++++++++++++++++++++++
 src/components/EvConfigCanvas.vue | 24 +++++++++---
 src/plugins/index.ts              | 12 +++++-
 5 files changed, 118 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ConfigPreview.vue

diff --git a/package.json b/package.json
index f953c15f..05ac73b2 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 942b818c..ff7a309d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ dependencies:
   '@fontsource/roboto':
     specifier: 5.0.12
     version: 5.0.12
+  '@highlightjs/vue-plugin':
+    specifier: ^2.1.0
+    version: 2.1.0(highlight.js@11.9.0)(vue@3.4.19)
   '@json-layout/core':
     specifier: ^0.9.3
     version: 0.9.3
@@ -47,6 +50,12 @@ dependencies:
   debug:
     specifier: ^4.3.4
     version: 4.3.4
+  highlight.js:
+    specifier: ^11.9.0
+    version: 11.9.0
+  js-yaml:
+    specifier: ^4.1.0
+    version: 4.1.0
   just-clone:
     specifier: ^6.2.0
     version: 6.2.0
@@ -1593,6 +1602,16 @@ packages:
     resolution: {integrity: sha512-x0o17jvgoSSbS9OZnUX2+xJmVRvVCfeaYJjkS7w62iN7CuJWtMf5vJj8LqgC7ibqIkitOHVW+XssRjgrcHn62g==}
     dev: false
 
+  /@highlightjs/vue-plugin@2.1.0(highlight.js@11.9.0)(vue@3.4.19):
+    resolution: { integrity: sha512-E+bmk4ncca+hBEYRV2a+1aIzIV0VSY/e5ArjpuSN9IO7wBJrzUE2u4ESCwrbQD7sAy+jWQjkV5qCCWgc+pu7CQ== }
+    peerDependencies:
+      highlight.js: ^11.0.1
+      vue: ^3
+    dependencies:
+      highlight.js: 11.9.0
+      vue: 3.4.19(typescript@5.3.3)
+    dev: false
+
   /@humanwhocodes/config-array@0.11.14:
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
@@ -3452,6 +3471,11 @@ packages:
     hasBin: true
     dev: true
 
+  /highlight.js@11.9.0:
+    resolution: { integrity: sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw== }
+    engines: { node: '>=12.0.0' }
+    dev: false
+
   /idb@7.1.1:
     resolution: {integrity: sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==}
     dev: true
@@ -3708,7 +3732,6 @@ packages:
     hasBin: true
     dependencies:
       argparse: 2.0.1
-    dev: true
 
   /jsesc@0.5.0:
     resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
diff --git a/src/components/ConfigPreview.vue b/src/components/ConfigPreview.vue
new file mode 100644
index 00000000..7eb60c31
--- /dev/null
+++ b/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>
+
diff --git a/src/components/EvConfigCanvas.vue b/src/components/EvConfigCanvas.vue
index 7ba9d80b..6d658e33 100644
--- a/src/components/EvConfigCanvas.vue
+++ b/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(
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index 407377f4..fc56b378 100644
--- a/src/plugins/index.ts
+++ b/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);
 }