refactor(examples): simplified adding examples

SoftVarE-Group · Jan 10, 2024 · 4a85a35 · 4a85a35
1 parent 1932dd7
commit 4a85a35
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 40 deletions.
diff --git a/WebSocketClient/src/examples.ts → WebSocketClient/assets/uvlExamples.ts b/WebSocketClient/src/examples.ts → WebSocketClient/assets/uvlExamples.ts
@@ -6,9 +6,9 @@ let globalEditor: editor.IStandaloneCodeEditor|null;
 
 export function initExamples(editor: editor.IStandaloneCodeEditor) {
     globalEditor = editor;
-    loadDefaultExample();
-    loadIceCreamExample();
-    loadComputerExample();
+    initExample("Default", defaultExampleText);
+    initExample("Ice Cream", iceCreamExampleText);
+    initExample("Computer", computerExampleText);
 }
 
 const defaultExampleText = `features
@@ -75,42 +75,17 @@ constraints
     Dedicated => Liquid
     sum(powerConsumption) > 300 => StrongPSU`
 
-function loadDefaultExample() {
-    const button: HTMLButtonElement|null = document.querySelector("#defaultExample");
-    if(button){
+function initExample(name: string, content: string){
+    const dropdown = document.getElementById("examples-dropdown");
+    const button = document.createElement("button");
+    if(dropdown){
+        dropdown.appendChild(button);
+        button.innerText = name; 
         button.onclick = () => {
             const opsModel = globalEditor?.getModel();
             if (opsModel) {
                 const fullModelRange = opsModel.getFullModelRange();
-                const operation: IIdentifiedSingleEditOperation = {text: defaultExampleText, range: fullModelRange};
-                opsModel.applyEdits([operation], false);
-            }
-        }
-    }
-}
-
-function loadIceCreamExample() {
-    const button: HTMLButtonElement|null = document.querySelector("#iceCreamExample");
-    if(button){
-        button.onclick = () => {
-            const opsModel = globalEditor?.getModel();
-            if (opsModel) {
-                const fullModelRange = opsModel.getFullModelRange();
-                const operation: IIdentifiedSingleEditOperation = {text: iceCreamExampleText, range: fullModelRange};
-                opsModel.applyEdits([operation], false);
-            }
-        }
-    }
-}
-
-function loadComputerExample() {
-    const button: HTMLButtonElement|null = document.querySelector("#computerExample");
-    if(button){
-        button.onclick = () => {
-            const opsModel = globalEditor?.getModel();
-            if (opsModel) {
-                const fullModelRange = opsModel.getFullModelRange();
-                const operation: IIdentifiedSingleEditOperation = {text: computerExampleText, range: fullModelRange};
+                const operation: IIdentifiedSingleEditOperation = {text: content, range: fullModelRange};
                 opsModel.applyEdits([operation], false);
             }
         }

diff --git a/WebSocketClient/index.html b/WebSocketClient/index.html
@@ -30,10 +30,7 @@ <h1>UVL Playground</h1>
     <div class="dropdown-wrapper">
         <span>Select an Example</span>
         <button class="dropbtn">›</button>
-        <div class="dropdown-content">
-            <button id="defaultExample">Default</button>
-            <button id="iceCreamExample">Ice Cream</button>
-            <button id="computerExample">Computer</button>
+        <div id="examples-dropdown" class="dropdown-content">
         </div>
     </div>
 </div>

diff --git a/WebSocketClient/src/main.ts b/WebSocketClient/src/main.ts
@@ -29,7 +29,7 @@ import initUvlTutorial from './uvlTutorial.ts';
 import {buildWorkerDefinition} from 'monaco-editor-workers';
 import {initIntroJS} from "./intro.ts";
 import {downloadFile, uploadFile} from "./ImportExportFiles.ts";
-import {initExamples} from "./examples.ts";
+import {initExamples} from "../assets/uvlExamples.ts";
 import {aggregateCharacters, displayEditorError, displayEditorErrorAtContent} from "./util.ts";
 import IIdentifiedSingleEditOperation = editor.IIdentifiedSingleEditOperation;