Started UI for editing images

assets/js/controllers/edit_upload.js

@@ -0,0 +1,59 @@
+import Handlebars from "handlebars";
+import {Controller} from "@hotwired/stimulus";
+
+const processorFrame = Handlebars.compile(`
+    <div class="card mb-3">
+      <div class="card-header d-flex justify-content-between">
+        <span>{{name}}</span>
+        <a href="#" class="btn btn-sm btn-secondary float-end">X</a>
+      </div>
+      <div class="card-body">
+        {{{props}}}
+      </div>
+    </div>
+`);
+
+const processors = [
+    {
+        name: "shadow",
+        label: "Shadow",
+        template: Handlebars.compile(`This processor has no properties.`),
+    },
+    {
+        name: "resize",
+        label: "Resize",
+        template: Handlebars.compile(`
+            <div class="mb-3">
+              <label for="{{id}}_width" class="form-label">Width</label>
+              <input name="width" class="form-control" id="{{id}}_width">
+            </div>
+            <div class="mb-3">
+              <label for="{{id}}_height" class="form-label">Height</label>
+              <input name="width" class="form-control" id="{{id}}_width">
+            </div>
+        `),
+    }
+];
+
+export default class UploadEditController extends Controller {
+    static targets = ['processList'];
+
+    connect() {
+        this._rebuildProcessList();
+    }
+
+    _rebuildProcessList() {
+        let el = this.processListTarget;
+
+        // TEMP
+        let cardTemplate = processors[0].template({
+            "id": "shadow",
+        });
+        let cardOuter = processorFrame({
+            name: processors[0].label,
+            props: cardTemplate,
+        });
+        el.innerHTML = cardOuter;
+        // END TEMP
+    }
+}

assets/js/main.js

@@ -8,6 +8,7 @@ import LogoutController from "./controllers/logout";
 import FirstRunController from "./controllers/firstrun";
 import UploadController from "./controllers/upload";
 import ShowUploadController from "./controllers/show_upload";
+import EditUploadController from "./controllers/edit_upload";
 import PagelistController from "./controllers/pagelist";
 
 window.Stimulus = Application.start()
@@ -18,6 +19,7 @@ Stimulus.register("logout", LogoutController);
 Stimulus.register("first-run", FirstRunController);
 Stimulus.register("upload", UploadController);
 Stimulus.register("show-upload", ShowUploadController);
+Stimulus.register("edit-upload", EditUploadController);
 Stimulus.register("pagelist", PagelistController);
 
 feather.replace();