From b2da4b381bc137ccaf526e605f66d04a4bf9be30 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Wed, 27 Mar 2024 10:51:05 +0100
Subject: [PATCH] feat(editor): add element property forms

Adding dynamic form rendering in the editor for marker, image, and
teleport elements. Now, when creating a new element, a form is
dynamically generated based on the element type selected. This
enhancement improves the user experience by providing a tailored
interface for inputting properties specific to each type of element,
such as title, text for markers, and file upload for images. This update
streamlines the creation process and ensures users have a clear,
context-specific set of fields when adding new elements to their
projects.
---
 assets/js/editor.js | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/assets/js/editor.js b/assets/js/editor.js
index 7a61a76..4d15d50 100644
--- a/assets/js/editor.js
+++ b/assets/js/editor.js
@@ -71,6 +71,7 @@ function startCreateElement(event) {
     <input type="hidden" id="csrfmiddlewaretoken" value="${getCookie(
       "csrftoken"
     )}">
+    <div id="elementProperties"></div>
   </form>
   `;
 
@@ -90,6 +91,47 @@ function startCreateElement(event) {
   });
 }
 
+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 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>
+  `;
+}
+
+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>
+    `;
+}
+
+
 function startModifyElement(event) {
   var propertiesTitle = document.getElementById("propertiesTitle");
   propertiesTitle.textContent = "Modify Element";