From 4043f031ab06a73f8a76575eb04c29673e256ab5 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Thu, 28 Mar 2024 11:06:14 +0100
Subject: [PATCH] refactor(editor.js): streamline element creation form
 generation

Replaced multiple specific functions for creating MarkerElement,
ImageElement, and TeleportElement forms in the editor with a single,
switch-based function titled createElementPropertiesForm. This
enhancement consolidates form generation logic, reducing redundancy and
improving maintainability. It dynamically generates input fields based
on the element type selected, simplifying future extensions or
modifications to element properties. Additionally, this refactoring
ensures a more consistent user experience by uniform handling of
different element types during creation and modification.

The new approach allows for easier addition of new element types and
their corresponding inputs, adhering to the DRY principle and promoting
code readability.
---
 assets/js/editor.js | 143 ++++++++++++++++++++------------------------
 1 file changed, 65 insertions(+), 78 deletions(-)

diff --git a/assets/js/editor.js b/assets/js/editor.js
index ee1de98..cdf287b 100644
--- a/assets/js/editor.js
+++ b/assets/js/editor.js
@@ -82,59 +82,69 @@ function startCreateElement(event) {
   document.getElementById("resetButton").style = "display: none;";
   document.getElementById("buttons").style = "display: block;";
 
-  document.getElementById("resourcetype").addEventListener("change", function () {
-    var selectedType = document.getElementById("resourcetype").value;
-
-    if (selectedType == "MarkerElement") {
-      createMarkerElement(event, thetaStart);
-    } else if (selectedType == "ImageElement") {
-      createImageElement(event, thetaStart);
-    } else if (selectedType == "TeleportElement") {
-      createTeleportElement(event, thetaStart);
-    }
-  });
+  document
+    .getElementById("resourcetype")
+    .addEventListener("change", function () {
+      var selectedType = document.getElementById("resourcetype").value;
+      createElementPropertiesForm(selectedType, event, thetaStart);
+    });
 }
 
-function createMarkerElement(event, thetaStart) {
-  var elementProperties = document.getElementById("elementProperties");
-  elementProperties.innerHTML = `
-    <div class="mb-2">
-      <label for="title" class="form-label">Title</label>
-      <input type="text" class="form-control" id="title" placeholder="Title">
-    </div>
-    <div class="mb-2">
-      <label for="elementUpload" class="form-label">Text</label>
-      <input type="text" class="form-control" id="text" placeholder="Text">
-    </div>
-  `;
-}
+function createElementPropertiesForm(elementType, event, thetaStart) {
+  const elementProperties = document.getElementById("elementProperties");
+  let inputFields = "";
 
-function createImageElement(event, thetaStart) {
-  var elementProperties = document.getElementById("elementProperties");
-  elementProperties.innerHTML = `
-    <div class="mb-2">
-      <label for="title" class="form-label">Title</label>
-      <input type="text" class="form-control" id="title" placeholder="Title">
-    </div>
-    <div class="mb-2">
-      <label for="elementUpload" class="form-label">Image</label>
-      <input id="elementUpload" type="file" class="form-control">
-    </div>
-  `;
-}
+  switch (elementType) {
+    case "MarkerElement":
+    case "ImageElement":
+    case "TeleportElement":
+      inputFields = `
+        <div class="mb-2">
+          <label for="title" class="form-label">Title</label>
+          <input type="text" class="form-control" id="title" placeholder="Title">
+        </div>`;
+      if (elementType !== "MarkerElement") {
+        inputFields += `
+          <div class="mb-2">
+            <label for="elementUpload" class="form-label">Image</label>
+            <input id="elementUpload" type="file" class="form-control">
+          </div>`;
+      }
+      if (elementType === "TeleportElement") {
+        inputFields += `
+        <div class="dropdown mb-2">
+          <label for="destinationDropdownSearch" class="form-label">Teleport Destination</label>
+          <input class="form-control" autocomplete="off" id="destinationDropdownSearch" type="text" placeholder="Search...">
+          <input type="hidden" id="destination">
+          <div class="dropdown-menu" id="destinationDropdownMenu">
+            <!-- Dropdown items will be populated here by JavaScript -->
+          </div>
+        </div>
 
-function createTeleportElement(event, thetaStart) {
-  var elementProperties = document.getElementById("elementProperties");
-  elementProperties.innerHTML = `
-    <div class="mb-2">
-      <label for="title" class="form-label">Title</label>
-      <input type="text" class="form-control" id="title" placeholder="Title">
-    </div>
-    <div class="mb-2">
-    </div>
-    `;
-}
+        <div class="mb-2">
+          <label for="destination_x" class="form-label">Destination X/Y/Z Rotation</label>
+            <div class="row g-2">
+              <div class="col">
+                <input type="number" class="form-control" id="destination_x" name="input1" min="0" max="360" placeholder="X">
+              </div>
+              <div class="col">
+                <input type="number" class="form-control" id="destination_y" name="input2" min="0" max="360" placeholder="Y">
+              </div>
+              <div class="col">
+                <input type="number" class="form-control" id="destination_z" name="input3" min="0" max="360" placeholder="Z">
+              </div>
+            </div>
+          </div>
+        </div>
+        `;
+      }
+      break;
+    default:
+    // Handle unknown element type
+  }
 
+  elementProperties.innerHTML = inputFields;
+}
 
 function startModifyElement(event) {
   // Make the element draggable for positioning
@@ -170,39 +180,16 @@ function startModifyElement(event) {
         "csrftoken"
       )}">
       <input type="hidden" id="id" value="${event.target.getAttribute("id")}">
-      <div class="dropdown mb-2">
-        <label for="destinationDropdownSearch" class="form-label">Teleport Destination</label>
-        <input class="form-control" autocomplete="off" id="destinationDropdownSearch" type="text" placeholder="Search...">
-        <input type="hidden" id="destination">
-        <div class="dropdown-menu" id="destinationDropdownMenu">
-          <!-- Dropdown items will be populated here by JavaScript -->
-        </div>
-      </div>
-
-      <div class="mb-2">
-        <label for="destination_x" class="form-label">Destination X/Y/Z Rotation</label>
-          <div class="row g-2">
-            <div class="col">
-              <input type="number" class="form-control" id="destination_x" name="input1" min="0" max="360" placeholder="X">
-            </div>
-            <div class="col">
-              <input type="number" class="form-control" id="destination_y" name="input2" min="0" max="360" placeholder="Y">
-            </div>
-            <div class="col">
-              <input type="number" class="form-control" id="destination_z" name="input3" min="0" max="360" placeholder="Z">
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="mb-2">
-        <label for="elementUpload" class="form-label">Marker image</label>
-        <input id="elementUpload" type="file" class="form-control">
-      </div>
-
+      <div id="elementProperties"></div>
     </form>
     `;
 
+    createElementPropertiesForm(
+      element_data.obj.resourcetype,
+      event,
+      element_data.obj.thetaStart
+    );
+
     var scene_data_request = getScene(scene.getAttribute("id"));
     scene_data_request.then((scene_data) => {
       var category_data_request = getCategory(scene_data.obj.category);