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

@@ -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{

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>