129 lines
4.5 KiB
HTML
129 lines
4.5 KiB
HTML
{{define "page-content"}}
|
|
<h2>Editor</h2>
|
|
|
|
<form class="flex flex-col gap-4" id="edit-area" hx-encoding="multipart/form-data">
|
|
<div class="flex flex-col gap-y-1">
|
|
{{template "article-banner-template" .}}
|
|
|
|
<div class="grid grid-cols-2 gap-4 items-center">
|
|
<div class="flex flex-col">
|
|
<h3>Titel</h3>
|
|
<input name="article-title" type="text" value="{{.Article.Title}}" />
|
|
</div>
|
|
|
|
<div class="flex">
|
|
<label class="btn text-center" for="article-banner">Titelbild</label>
|
|
<input class="hidden" id="article-banner" name="article-banner" type="file" required
|
|
hx-post="/article/upload-banner" hx-swap="outerHTML" hx-target="#article-banner-container" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1">
|
|
<h3>Beschreibung</h3>
|
|
<textarea name="article-summary">{{.Article.Summary}}</textarea>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1">
|
|
<h3>Artikel</h3>
|
|
<textarea id="easyMDE">{{.Content}}</textarea>
|
|
<input id="article-content" name="article-content" type="hidden" value="{{.Content}}" />
|
|
</div>
|
|
|
|
<div>
|
|
<h3>Tags</h3>
|
|
<div class="flex flex-wrap gap-4">
|
|
<div>
|
|
<input id="issue" name="issue" type="checkbox" {{if .Article.IsInIssue}}checked{{end}} />
|
|
<label for="issue">Orient Express</label>
|
|
</div>
|
|
|
|
{{range .Tags}}
|
|
<div>
|
|
<input id="tag-{{.Name}}" name="tags" type="checkbox" value="{{.ID}}" {{if index $.Selected
|
|
.ID}}checked{{end}} />
|
|
<label for="tag-{{.Name}}">{{.Name}}</label>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>Beteiligte</h3>
|
|
{{range .ArticleUsers}}
|
|
<div class="border border-slate-200 dark:border-slate-800 flex gap-4 px-2 py-1 rounded-md">
|
|
<span>{{.FirstName}} {{.LastName}}: </span>
|
|
|
|
<div>
|
|
<input id="{{.ID}}-author" name="user-{{.ID}}" type="radio" value="author" {{if eq .ArticleRole
|
|
1}}checked{{end}} />
|
|
<label for="{{.ID}}-author">Autor</label>
|
|
</div>
|
|
|
|
<div>
|
|
<input id="{{.ID}}-contributor" name="user-{{.ID}}" type="radio" value="contributor" {{if eq
|
|
.ArticleRole 2}}checked{{end}} />
|
|
<label for="{{.ID}}-contributor">Mitwirkender</label>
|
|
</div>
|
|
|
|
<div>
|
|
<input id="{{.ID}}-none" name="user-{{.ID}}" type="radio" {{if eq .ArticleRole 0}}checked{{end}} />
|
|
<label for="{{.ID}}-none">Unbeteiligt</label>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
|
|
<div>
|
|
<input id="creator" name="creator" type="checkbox" value="author" {{if eq .Creator.ArticleRole
|
|
1}}checked{{end}} />
|
|
<label for="creator">Ich bin Autor.</label>
|
|
</div>
|
|
|
|
<div class="btn-area">
|
|
<input class="action-btn" type="submit" value="Senden" hx-post="/article/{{.Action}}"
|
|
hx-target="#page-content" />
|
|
<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 => {
|
|
htmx.trigger(htmx.find('#notification'), 'htmx:responseError', {xhr: {responseText: error.message}});
|
|
onError(error);
|
|
});
|
|
},
|
|
});
|
|
|
|
easyMDE.codemirror.on("change", () => {
|
|
document.getElementById('article-content').value = easyMDE.value();
|
|
});
|
|
</script>
|
|
{{end}}
|
|
|
|
{{define "article-banner-template"}}
|
|
<div id="article-banner-container">
|
|
<img src="/image/serve/{{.Image}}" alt="" />
|
|
<input id="article-banner-url" name="article-banner-url" type="hidden" value="{{.Image}}" />
|
|
</div>
|
|
{{end}}
|