53 lines
1.5 KiB
Svelte
53 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { CalendarDate } from "@internationalized/date";
|
|
import { onMount } from "svelte";
|
|
import { formatDate } from "$lib/date";
|
|
import { createEntry, updateEntry, deleteEntry } from "$lib/upload.ts";
|
|
|
|
let {
|
|
dateValue = $bindable<CalendarDate | undefined>(
|
|
new CalendarDate(2026, 2, 1),
|
|
),
|
|
} = $props();
|
|
|
|
let edit = $state<boolean>(false);
|
|
|
|
let entry = $state({
|
|
date: dateValue.toString(),
|
|
image: "",
|
|
content: "",
|
|
});
|
|
|
|
onMount(async () => {
|
|
const res = await fetch(`/api/entry?date=${dateValue.toString()}`);
|
|
const data = await res.json();
|
|
if (data) {
|
|
entry = { date: dateValue.toString(), ...data[0] };
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="flex flex-row items-center justify-between">
|
|
<h1 class="text-3xl">{formatDate(entry.date)}</h1>
|
|
|
|
{#if !edit}
|
|
<button
|
|
class="btn bg-secondary py-2 px-3 rounded-lg hover:opacity-60 transition-brightness"
|
|
onclick={() => (edit = !edit)}>Edit</button
|
|
>
|
|
{:else}
|
|
<button class="bg-destructive py-2 px-3 rounded-lg" onclick={deleteEntry}>
|
|
delete
|
|
</button>
|
|
<button
|
|
class="bg-secondary py-2 px-3 rounded-lg"
|
|
onclick={() => (edit = false)}
|
|
>
|
|
cancel
|
|
</button>
|
|
<button class="bg-primary text-accent py-2 px-3 rounded-lg">
|
|
save
|
|
</button>
|
|
{/if}
|
|
</div>
|