Allow uploading a banner image

web/templates/current-issue.html

@@ -0,0 +1,86 @@
+{{define "page-content"}}
+<h2>Diese Ausgabe</h2>
+
+<form hx-encoding="multipart/form-data">
+    <div class="flex flex-col gap-4">
+        <div class="w-full" id="issue-banner-container"></div>
+
+        <h3>Titelseite</h3>
+        <div class="grid grid-cols-2 gap-4 items-center">
+            <div class="flex flex-col">
+                <label for="issue-title">Titel</label>
+                <input name="issue-title" required type="text" />
+            </div>
+
+            <div class="grid grid-cols-1 items-center">
+                <label class="btn cursor-pointer text-center" for="issue-banner-upload">Titelbild</label>
+                <input class="hidden" id="issue-banner-upload" name="issue-banner" type="file" required
+                    hx-post="/issue/upload-banner" hx-target="#issue-banner-container" />
+            </div>
+        </div>
+
+        <div>
+            <h3>Über diese Ausgabe</h3>
+            <div>
+                <textarea id="easyMDE" placeholder="Beschreibung dieser Ausgabe"></textarea>
+                <input id="issue-content" name="issue-content" type="hidden" />
+            </div>
+        </div>
+
+        <div>
+            <h3>Aktuelle Artikel</h3>
+            <div class="flex flex-col gap-4">
+                {{range .}}
+                <div class="border border-slate-200 dark:border-slate-800 px-2 py-1 rounded-md">
+                    <h1 class="font-bold text-2xl">{{.Title}}</h1>
+                    <p>{{.Summary}}</p>
+                </div>
+                {{end}}
+            </div>
+        </div>
+    </div>
+
+    <div class="btn-area">
+        <button class="action-btn" hx-post="/issue/publish" hx-target="#page-content">Ausgabe publizieren</button>
+        <button class="btn" hx-get="/hub" hx-target="#page-content">Abbrechen</button>
+    </div>
+</form>
+
+<script>
+    var easyMDE = new EasyMDE({
+        element: document.getElementById('easyMDE'),
+        hideIcons: ['image'],
+        imageTexts: {sbInit: ''},
+        showIcons: ["code", "table", "upload-image"],
+        uploadImage: true,
+
+        imageUploadFunction: function (file, onSuccess, onError) {
+            var formData = new FormData();
+            formData.append('article-image', file);
+
+            fetch('/article/upload-image', {
+                method: 'POST',
+                body: formData
+            })
+                .then(response => response.json())
+                .then(data => {
+                    onSuccess(data);
+                })
+                .catch(error => {
+                    onError(error);
+                });
+        },
+    });
+
+    easyMDE.codemirror.on("change", () => {
+        document.getElementById('issue-content').value = easyMDE.value();
+    });
+</script>
+{{end}}
+
+{{define "issue-banner-template"}}
+<div class="w-full" id="issue-banner-container">
+    <img src="data:image/webp;base64,{{.BannerImage}}" alt="Banner Image">
+    <input id="issue-banner-url" name="issue-banner-url" type="hidden" value="{{.URL}}" />
+</div>
+{{end}}