210 lines
10 KiB
Plaintext
210 lines
10 KiB
Plaintext
package templates
|
|
|
|
import (
|
|
"fmt"
|
|
"gitea.zokki.net/zokki/uni/web43-diary/context"
|
|
"gitea.zokki.net/zokki/uni/web43-diary/internal/database"
|
|
"gitea.zokki.net/zokki/uni/web43-diary/internal/models"
|
|
"gitea.zokki.net/zokki/uni/web43-diary/internal/session"
|
|
"gitea.zokki.net/zokki/uni/web43-diary/web/templates/shared"
|
|
"net/http"
|
|
"strconv"
|
|
)
|
|
|
|
templ EditDiary(context *context.Context) {
|
|
{{
|
|
idToGet, err := strconv.ParseUint(context.Request.PathValue("diaryID"), 10, 32)
|
|
if err != nil || idToGet == 0 {
|
|
return &models.HTTPError{
|
|
Message: "Malformed Tagebuch ID",
|
|
Code: http.StatusBadRequest,
|
|
}
|
|
}
|
|
|
|
diary, err := database.GetOne(context, &models.Diary{ID: uint32(idToGet)})
|
|
if err != nil {
|
|
return &models.HTTPError{
|
|
Message: "Tagebucheintrag nicht gefunden",
|
|
Code: http.StatusBadRequest,
|
|
Data: err,
|
|
}
|
|
}
|
|
|
|
sessionUser := session.GetSession(context).GetUser()
|
|
if sessionUser == nil || sessionUser.ID <= 0 || (sessionUser.ID != diary.OwnerID && !sessionUser.Role.IsAdminUser()) {
|
|
return models.NewHTTPError(http.StatusUnauthorized)
|
|
}
|
|
|
|
tags, err := database.GetAll(context, &models.Tag{})
|
|
if err != nil {
|
|
return err
|
|
}
|
|
}}
|
|
@shared.Layout(context) {
|
|
<form method="PUT" action={ templ.URL(fmt.Sprintf("/diary/%d", diary.ID)) } class="relative flex flex-col gap-4 p-6">
|
|
<div>
|
|
<label for="title-input" class="font-medium">Title*</label>
|
|
<input type="text" id="title-input" name="title" class="outline-gray-400 rounded-lg w-full p-2.5 text-ellipsis" required value={ diary.Title }/>
|
|
</div>
|
|
<div class="relative flex flex-col gap-4 items-center">
|
|
/* tag */
|
|
<div class="relative w-full">
|
|
<input data-dropdown-toggle="tags-dropdown" id="tags-input" placeholder="Tags" class="outline-gray-400 rounded-lg w-full p-2.5 text-ellipsis" maxlength="256"/>
|
|
<button
|
|
type="button"
|
|
class="absolute top-0 end-0 p-2.5 h-full text-sm font-medium rounded-e-lg text-dark bg-primary"
|
|
>
|
|
<i class="ic--outline-add size-6"></i>
|
|
</button>
|
|
</div>
|
|
/* tag dropdown */
|
|
<div id="tags-dropdown" class="z-10 hidden rounded-lg shadow w-full bg-surface-container-highest">
|
|
<ul class="max-h-64 overflow-y-auto text-sm">
|
|
for _, tag := range tags {
|
|
<li class="line-clamp-2 p-2 rounded cursor-pointer hover:bg-dark-650">{ tag.Title }</li>
|
|
}
|
|
</ul>
|
|
</div>
|
|
/* tags */
|
|
<div id="tags" class="flex flex-wrap gap-2 w-full">
|
|
for _, tag := range diary.Tags {
|
|
<span class="tag flex flex-center gap-1 w-fit bg-dark-750 text-bright/75 text-xs font-medium px-2.5 py-0.5 rounded hover:bg-dark-650">
|
|
{ tag.Title }
|
|
<i class="ic--outline-close"></i>
|
|
<input value={ tag.Title } name="tags" class="sr-only" checked/>
|
|
</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div advanced-textarea class="flex flex-col size-full border border-dark-450 rounded-lg bg-surface-bright">
|
|
<div class="flex items-center justify-between px-3 py-2 border-b border-gray-600">
|
|
<div class="flex flex-wrap items-center divide-x divide-bright/25 [&>:not(:first-child)]:pl-2 [&>:not(:last-child)]:pr-2">
|
|
<div class="flex items-center gap-1">
|
|
<button type="button" class="modifier-bold p-1 size-8 text-bright/45 rounded hover:outline-outline" title="Fett">
|
|
<i class="ic--outline-format-bold size-6"></i>
|
|
</button>
|
|
<button type="button" class="modifier-italic p-1 size-8 text-bright/45 rounded hover:outline-outline" title="Kursiv">
|
|
<i class="ic--outline-format-italic size-6"></i>
|
|
</button>
|
|
<button type="button" class="modifier-underline p-1 size-8 text-bright/45 rounded hover:outline-outline" title="Unterstrichen">
|
|
<i class="ic--outline-format-underlined size-6"></i>
|
|
</button>
|
|
<button type="button" class="modifier-strikethrough p-1 size-8 text-bright/45 rounded hover:outline-outline" title="Durchgestrichen">
|
|
<i class="ic--outline-format-strikethrough size-6"></i>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<button type="button" class="modifier-heading-1 size-8 text-bright/45 rounded hover:outline-outline" title="Überschrift 1">
|
|
<i class="gridicons--heading-h1 size-8"></i>
|
|
</button>
|
|
<button type="button" class="modifier-heading-2 size-8 text-bright/45 rounded hover:outline-outline" title="Überschrift 2">
|
|
<i class="gridicons--heading-h2 size-8"></i>
|
|
</button>
|
|
<button type="button" class="modifier-heading-3 size-8 text-bright/45 rounded hover:outline-outline" title="Überschrift 3">
|
|
<i class="gridicons--heading-h3 size-8"></i>
|
|
</button>
|
|
<button type="button" class="modifier-heading-4 size-8 text-bright/45 rounded hover:outline-outline" title="Überschrift 4">
|
|
<i class="gridicons--heading-h4 size-8"></i>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<button type="button" class="modifier-quote p-1 size-8 text-bright/45 rounded hover:outline-outline" title="Zitat">
|
|
<i class="ic--outline-format-quote size-6"></i>
|
|
</button>
|
|
<button type="button" class="modifier-checkbox p-1 size-8 text-bright/45 rounded hover:outline-outline" title="Checkbox">
|
|
<i class="ic--outline-check-box-outline-blank size-6"></i>
|
|
</button>
|
|
<button type="button" class="modifier-checkbox-checked p-1 size-8 text-bright/45 rounded hover:outline-outline" title="Checkbox (gechecked)">
|
|
<i class="ic--outline-check-box size-6"></i>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<button type="button" class="modifier-unordered-list p-1 size-8 text-bright/45 rounded hover:outline-outline" title="Unsorterte Liste">
|
|
<i class="ic--outline-format-list-bulleted size-6"></i>
|
|
</button>
|
|
<button type="button" class="modifier-ordered-list p-1 size-8 text-bright/45 rounded hover:outline-outline" title="Sortierte Liste">
|
|
<i class="ic--outline-format-list-numbered size-6"></i>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<button type="button" class="modifier-link p-1 size-8 text-bright/45 rounded hover:outline-outline" title="Link">
|
|
<i class="ic--outline-insert-link size-6"></i>
|
|
</button>
|
|
<button type="button" data-modal-target="photo-modal" data-modal-toggle="photo-modal" class="modifier-photo p-1 size-8 text-bright/45 rounded hover:outline-outline" title="Bild">
|
|
<i class="ic--outline-insert-photo size-6"></i>
|
|
</button>
|
|
<button type="button" class="modifier-horizontal-line p-1 size-8 text-bright/45 rounded hover:outline-outline" title="Horizontale Linie">
|
|
<i class="ic--outline-horizontal-rule size-6"></i>
|
|
</button>
|
|
<button type="button" data-dropdown-toggle="emoticons-dropdown" class="modifier-emoticon p-1 size-8 text-bright/45 rounded hover:outline-outline" title="Emoticon">
|
|
<i class="ic--outline-insert-emoticon size-6"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button class="p-2 rounded ml-4 text-on-bg bg-primary hover:bg-primary-650">Tagebucheintrag bearbeiten</button>
|
|
</div>
|
|
/* emoticons dropdown */
|
|
<div id="emoticons-dropdown" class="z-10 hidden rounded-lg shadow w-72 bg-surface-container-highest">
|
|
@iconsList()
|
|
</div>
|
|
<div class="flex size-full pl-4 pr-2 py-2 rounded-b-lg bg-surface-dim divide-x divide-bright/25">
|
|
<div class="flex flex-col h-full w-full max-w-[50%] pr-2 divide-y divide-bright/25">
|
|
<span class="pb-2 text-xl">Tagebucheintrag mit Markdown*</span>
|
|
<textarea id="editor" name="markdown" class="size-full pt-2 bg-transparent outline-none resize-none [scrollbar-gutter:stable]" placeholder="Schreibe ein Tagebucheintrag..." title="Tagebucheintrag*" required>{ diary.Content }</textarea>
|
|
</div>
|
|
<div class="flex flex-col h-full w-full max-w-[50%] pl-4 divide-y divide-bright/25">
|
|
<span class="pb-2 text-xl">Vorschau</span>
|
|
<iframe id="preview" allowtransparency="true" class="preview size-full pt-2 bg-transparent"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<!-- photo modal - outside of form -->
|
|
<div id="photo-modal" data-modal-backdrop="static" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
|
|
<div class="relative p-4 w-full max-w-md max-h-full">
|
|
<!-- Modal content -->
|
|
<div class="rounded-lg bg-surface-container-highest">
|
|
<!-- Modal header -->
|
|
<div class="flex items-center justify-between p-4 border-b border-dark-450">
|
|
<h3 class="m-0">Bild hinzufügen</h3>
|
|
<button type="button" class="rounded-lg size-8 p-1 text-bright/45 hover:outline-outline" data-modal-hide="photo-modal">
|
|
<i class="ic--outline-close size-6"></i>
|
|
<span class="sr-only">Dialog schließen</span>
|
|
</button>
|
|
</div>
|
|
<!-- Modal body -->
|
|
<form class="space-y-4 p-4" action="/image" method="POST">
|
|
/* photo */
|
|
<div class="flex flex-center w-full">
|
|
<label for="dropzone-file" class="flex flex-col flex-center w-full h-64 border-2 border-bright/45 border-dashed rounded-lg bg-bright/15 hover:bg-bright/25">
|
|
<div class="flex flex-col flex-center py-6">
|
|
<i class="ic--outline-cloud-upload size-8 mb-4"></i>
|
|
<p class="text-sm text-bright/65"><span class="font-semibold">Zum hochladen klicken</span> oder drag and drop</p>
|
|
</div>
|
|
<input id="dropzone-file" type="file" name="file" accept="image/*" class="hidden" required/>
|
|
</label>
|
|
</div>
|
|
/* title */
|
|
<div>
|
|
<label for="title-input" class="text-sm font-medium">Title*</label>
|
|
<input type="text" id="title-input" name="title" class="outline-gray-400 rounded-lg w-full p-2.5 text-ellipsis" required/>
|
|
</div>
|
|
/* dimensions */
|
|
<div class="flex gap-4 items-center">
|
|
<div>
|
|
<label for="height-input" class="text-sm font-medium">Höhe*</label>
|
|
<input type="number" id="height-input" name="height" class="outline-gray-400 rounded-lg w-full p-2.5 text-ellipsis text-xs" required/>
|
|
</div>
|
|
<div>
|
|
<label for="width-input" class="text-sm font-medium">Breite*</label>
|
|
<input type="number" id="width-input" name="width" class="outline-gray-400 rounded-lg w-full p-2.5 text-ellipsis text-xs" required/>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="text-on-bg bg-primary hover:bg-primary-650 font-medium rounded-lg text-sm px-5 py-2.5 w-full">Hochladen</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|