80 lines
2.4 KiB
HTML
80 lines
2.4 KiB
HTML
{{define "page-content"}}
|
|
<h2>Diese Ausgabe</h2>
|
|
|
|
<form hx-encoding="multipart/form-data">
|
|
<div class="flex flex-col gap-4">
|
|
<div>
|
|
<h3>Aktuelle Artikel</h3>
|
|
<div class="flex flex-col gap-4">
|
|
{{range .}}
|
|
<div class="border px-2 py-1 rounded-md">
|
|
<h1 class="font-bold text-2xl">{{.Title}}</h1>
|
|
<p>{{.Description}}</p>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>Cover</h3>
|
|
<div class="flex">
|
|
<label class="btn text-center" for="image-upload">Bild hochladen</label>
|
|
<input class="hidden" id="image-upload" name="issue-image" type="file" required
|
|
hx-post="/issue/upload-image" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>Titel</h3>
|
|
<div class="flex flex-col gap-y-1">
|
|
<input name="issue-title" type="text" />
|
|
</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>
|
|
|
|
<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}}
|