poc of new editor is,, progressing
This commit is contained in:
30
src/lib/components/editor.svelte
Normal file
30
src/lib/components/editor.svelte
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { CalendarDate } from "@internationalized/date";
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
|
let {
|
||||||
|
dateValue = $bindable<CalendarDate | undefined>(
|
||||||
|
new CalendarDate(2026, 2, 1),
|
||||||
|
),
|
||||||
|
} = $props()
|
||||||
|
|
||||||
|
let edit = $state(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()
|
||||||
|
entry = data
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{JSON.stringify(entry)}
|
||||||
|
|
||||||
|
<!-- <div class="flex flex-row items-center justify-between"> -->
|
||||||
|
<h1 class="text-3xl">{entry["date"]}</h1>
|
||||||
|
<!-- </div> -->
|
||||||
@@ -6,29 +6,11 @@
|
|||||||
import Header from '$lib/components/header.svelte';
|
import Header from '$lib/components/header.svelte';
|
||||||
|
|
||||||
import Calendar from "$lib/components/calendar.svelte";
|
import Calendar from "$lib/components/calendar.svelte";
|
||||||
import Editor from "$lib/components/editor/index.svelte";
|
import Editor from "$lib/components/editor.svelte";
|
||||||
import EntrySummaryView from "$lib/components/entrySummaryView.svelte";
|
import EntrySummaryView from "$lib/components/entrySummaryView.svelte";
|
||||||
import AddEntryCover from "$lib/components/addEntryCover.svelte";
|
|
||||||
import { today } from "$lib/date";
|
|
||||||
|
|
||||||
let selectedEntry = $state("");
|
|
||||||
let selectedDate = $state(today());
|
|
||||||
|
|
||||||
let dateValue = $state(new CalendarDate(2026, 2, 1));
|
let dateValue = $state(new CalendarDate(2026, 2, 1));
|
||||||
|
|
||||||
let selectEntry = async (hasEntry: boolean, data: string | null) => {
|
|
||||||
// data should be the entryID if hasEntry == true, or the date if there is no entry
|
|
||||||
if (hasEntry) {
|
|
||||||
const res = await fetch(`/api/entry?id=${data}`);
|
|
||||||
selectedEntry = await res.json();
|
|
||||||
selectedDate = selectedEntry.date;
|
|
||||||
} else {
|
|
||||||
selectedEntry = "";
|
|
||||||
selectedDate = data as string;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// $effect(() => {selectedEntry = ''})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
@@ -36,15 +18,9 @@
|
|||||||
<div class="md:w-1/2 md:order-2">
|
<div class="md:w-1/2 md:order-2">
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
{#if selectedEntry}
|
{#key dateValue}
|
||||||
{#key selectedEntry.id}
|
<Editor {dateValue} />
|
||||||
<Editor bind:entry={selectedEntry} />
|
{/key}
|
||||||
{/key}
|
|
||||||
{:else}
|
|
||||||
{#key selectedDate}
|
|
||||||
<AddEntryCover bind:date={selectedDate} />
|
|
||||||
{/key}
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="md:w-1/2 space-y-4 md:mr-4">
|
<div class="md:w-1/2 space-y-4 md:mr-4">
|
||||||
|
|||||||
Reference in New Issue
Block a user