weiro/assets/js/controllers/edit_upload.js

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', 'preview'];
    static values = {
        uploadId: Number,
        siteId: Number,
    };

    connect() {
        this._rebuildProcessList();
        this._createSession();
    }

    async addProcessor(ev) {
        ev.preventDefault();
        await this._addProcessor({
            type: "shadow"
        });
    }

    _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
    }

    async _createSession() {
        try {
            let resp = await fetch(`/sites/${this.siteIdValue}/imageedit/`, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    "base_upload": this.uploadIdValue,
                })
            });

            this._state = await resp.json();
            this.previewTarget.src = this._state.preview_url;

            console.log("Session created");
        } catch (e) {
            console.error(e);
        }
    }

    async _addProcessor(processor) {
        try {
            let resp = await fetch(`/sites/${this.siteIdValue}/imageedit/${this._state.session.guid}/processors`, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(processor)
            });

            this._state = await resp.json();
            this.previewTarget.src = this._state.preview_url;
        } catch (e) {
            console.error(e);
        }
    }
}