From b99a6bdb8ec92898232ea118bed3909ee95eebad Mon Sep 17 00:00:00 2001
From: Piotr <ferenc.piotr@outlook.com>
Date: Sun, 28 Apr 2024 18:48:58 +0200
Subject: [PATCH] Add initialization actions to web editor module

The web editor module now includes functions to initialize available actions. This allows the inclusion of action-related suggestions in the editor interface. A script has been added to render diagrams. Changes in the editor content now trigger diagram rendering and the action initiation process. This enhances the functionality and usability of the web editor.
---
 web/modules/editor/editor.go | 27 +++++++++++++++++-
 web/public/views/edytor.html | 53 ++++++++++++++++++++++++------------
 2 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/web/modules/editor/editor.go b/web/modules/editor/editor.go
index 20b67a6..7070665 100644
--- a/web/modules/editor/editor.go
+++ b/web/modules/editor/editor.go
@@ -2,7 +2,10 @@ package editor
 
 import (
 	"encoding/json"
+	"fmt"
 	"github.com/PiotrFerenc/mash2/api/types"
+	"github.com/PiotrFerenc/mash2/internal/configuration"
+	"github.com/PiotrFerenc/mash2/internal/executor"
 	"github.com/labstack/echo/v4"
 	"net/http"
 )
@@ -13,14 +16,36 @@ func CreateEditorHandler() func(c echo.Context) error {
 		if err != nil {
 			return err
 		}
-
+		initActions, err := initActions()
+		if err != nil {
+			return err
+		}
 		data := map[string]interface{}{
 			"Title":       "Edytor",
 			"InitCommand": string(initCommand),
+			"Actions":     initActions,
 		}
 		return c.Render(http.StatusOK, "edytor.html", data)
 	}
 }
+func initActions() (map[string]string, error) {
+	actions := executor.CreateActionMap(&configuration.Config{})
+	result := make(map[string]string, len(actions))
+
+	for name, _ := range actions {
+		jsonString, err := json.MarshalIndent(types.Task{
+			Sequence: 0,
+			Action:   name,
+			Name:     fmt.Sprintf("my-%s", name),
+		}, "", "	")
+		if err != nil {
+			return nil, err
+		}
+		result[name] = string(jsonString)
+
+	}
+	return result, nil
+}
 
 func initCommand() ([]byte, error) {
 	initCommand := types.Pipeline{
diff --git a/web/public/views/edytor.html b/web/public/views/edytor.html
index 4e5d693..578adf0 100644
--- a/web/public/views/edytor.html
+++ b/web/public/views/edytor.html
@@ -21,16 +21,24 @@
         </div>
         <div class="col-6">
 <pre id="mermaid">
-            graph TD
-            asd[Client qwe] -->|tcp_123| B
-            B(Load Balancer)
-            B --> C[Server1]
-            B -->|tcp_456| D[Server2]
+
     </pre>
 
         </div>
     </div>
 </div>
+<script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+
+    mermaid.initialize({startOnLoad: false});
+    window.drawDiagram = async function () {
+        let element = document.querySelector('#mermaid');
+        const graphDefinition = 'graph TB\na-->b';
+        const {svg} = await mermaid.render('graphDiv', graphDefinition);
+        element.innerHTML = svg;
+    };
+
+</script>
 <script>
     const initialPipeline = '{{.InitCommand}}'
 
@@ -47,32 +55,43 @@
                     endColumn: word.endColumn
                 };
 
-                const suggestions = [
-                    {
-                        label: 'myKeyword1',
-                        kind: monaco.languages.CompletionItemKind.Keyword,
-                        insertText: '"myKeyword1"',
-                        range: range
-                    },
+                const suggestions = [];
+
+                {{range $action, $json := .Actions}}
+                suggestions.push(
                     {
-                        label: 'myKeyword2',
+                        label: '{{$action}}',
                         kind: monaco.languages.CompletionItemKind.Keyword,
-                        insertText: '"myKeyword2"',
+                        insertText: '{{$json}}',
                         range: range
                     }
-                ];
+                )
+                {{end}}
+
                 return {suggestions: suggestions};
             }
         });
 
-        monaco.editor.create(document.getElementById('container'), {
+        let editor = monaco.editor.create(document.getElementById('container'), {
             value: initialPipeline,
             language: 'json'
         });
 
+        (async () => {
+            await drawDiagram();
+        })();
+
+        editor.onDidChangeModelContent(function (e) {
+            (async () => {
+                await drawDiagram();
+            })();
+            let code = editor.getValue();
+            let js = JSON.parse(code)
+            console.log(js.Tasks)
+        });
+
     });
 </script>
 {{template "scripts" .}}
-
 </body>
 </html>