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