WIP different content types

FeniXb3 · Oct 13, 2023 · 4b125e7 · 4b125e7
1 parent c341e20
commit 4b125e7
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 1 deletion.
diff --git a/public/ModalHandler.js b/public/ModalHandler.js
@@ -54,6 +54,16 @@ class ModalHandler {
                 event.preventDefault();
                 this.saveButton.click();
             });
+
+            form.addEventListener('change', (event) => {
+                if (event.target.tagName == "SELECT") {
+                    const target = event.target;
+                    console.log(target);
+                    if (target.classList.contains("data-type")) {
+                        target.parentElement.querySelector('.input-content').innerHTML = this.getInputContentSetterFor(0, target.value)
+                    }
+                }
+            });
         }
 
         this.saveButton.addEventListener('click', () => {
@@ -116,6 +126,9 @@ class ModalHandler {
                             <label for="${this.id}" class="col-form-label">${this.labelText}</label>
                             <input type="text" class="form-control" id="${this.id}">
                         </div>
+                        <div class="form-group" id="content-rows" hidden> 
+                            ${this.getModalRow(0)}
+                        </div>
                     </form>
                 </div>
                 <div class="modal-footer">
@@ -158,6 +171,52 @@ class ModalHandler {
     </div>
 </div>`;
     }
+
+    getModalRow = (rowId) => {
+        return `
+        <div>
+
+
+            <div class="input-group" >
+                <select name="data-type-${rowId}" class="custom-select data-type">
+                    <option value="text">text</option>
+                    <option value="number">number</option>
+                    <option value="bool">bool</option>
+                    <option value="variable">variable</option>
+                </select>
+                <div class="input-group input-content" >
+                    ${this.getInputContentSetterFor(rowId, "text")}
+                </div>
+            </div>
+        </div>
+        `;
+    }
+
+    getInputContentSetterFor = (rowId, inputType) => {
+        switch (inputType) {
+            case "text":
+                return `
+                <span class="input-group-text">"</span>
+                <input type="text" name="input-${rowId}" class="form-control">
+                <span class="input-group-text">"</span>`;
+            case "number":
+                return `
+                <input type="number" step="any" name="input-${rowId}" class="form-control" value="0">`;
+            case "bool":
+                return `
+                <input type="checkbox" name="checkbox" value="">
+                `;
+            case "variable":
+                return `
+                <select name="input-${rowId}" class="custom-select variable-name">
+                    <option value="var1">var1</option>
+                    <option value="var2">var2</option>
+                </select>
+                `;
+            default:
+                return "---";
+        }
+    }
 }
 
 export const modal = new ModalHandler('input-data', 'Title', 'Data', 'input');

diff --git a/public/style.css b/public/style.css
@@ -39,7 +39,7 @@ body {
 }
 
 #graph-controls, #header-menu, #workspace, 
-#execution-panel, #serialization-container, #server-container{
+#execution-panel, #serialization-container, #server-container, .absolute{
     position: absolute;
     /* width: 100%;
     height: 100%; */