From db17637b9d9e872522b2bfc95a0c1955f8ea550c Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Wed, 27 Mar 2024 10:16:14 +0100
Subject: [PATCH] feat(editor): enhance element creation UX

Adjusted the modal content in the editor's JavaScript to dynamically
update based on the type of element being created, improving user
interaction and feedback during the element creation process. The change
includes fixing incorrect references to modal labels and contents,
adding CSRF token support for form submissions, and dynamically
showing/hiding buttons based on the context of the element creation.
Additionally, event listeners are set up to handle different element
types (Marker, Image, Teleport), further enhancing the user experience
by tailoring the UI to the selected element type. This update aims to
make the editor more intuitive and responsive to user actions, reducing
potential confusion and improving the flow of creating various types of
elements within the application.
---
 assets/js/editor.js | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/assets/js/editor.js b/assets/js/editor.js
index 7abf96b..7a61a76 100644
--- a/assets/js/editor.js
+++ b/assets/js/editor.js
@@ -42,7 +42,7 @@ function addEventListeners(element) {
 // Open a modal for creating a new Element
 function startCreateElement(event) {
   var propertiesTitle = document.getElementById("propertiesTitle");
-  modalLabel.textContent = "Create Element";
+  propertiesTitle.textContent = "Create Element";
 
   var propertiesContent = document.getElementById("propertiesContent");
 
@@ -51,7 +51,7 @@ function startCreateElement(event) {
     event.detail.intersection.point.z
   );
 
-  modalContent.innerHTML = `<b>Creating element at:</b><br/>
+  propertiesContent.innerHTML = `<b>Creating element at:</b><br/>
   X: ${event.detail.intersection.point.x}<br/>
   Y: ${event.detail.intersection.point.y}<br/>
   Z: ${event.detail.intersection.point.z}<br/>
@@ -68,8 +68,26 @@ function startCreateElement(event) {
       <option value="ImageElement">Image</option>
       <option value="ImageElement">Teleport</option>
     </select>
+    <input type="hidden" id="csrfmiddlewaretoken" value="${getCookie(
+      "csrftoken"
+    )}">
   </form>
   `;
+
+  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);
+    }
+  });
 }
 
 function startModifyElement(event) {