From 47058c7ad2a9856b473a94ae216bfc48c2540d0a Mon Sep 17 00:00:00 2001 From: Claas Date: Mon, 27 Apr 2026 23:56:53 +0200 Subject: [PATCH] Change design Co-authored-by: Copilot --- app/index.html | 22 +++-- app/src/App.tsx | 234 +++++++++++++++++++++++++++------------------- app/src/index.tsx | 1 + 3 files changed, 152 insertions(+), 105 deletions(-) diff --git a/app/index.html b/app/index.html index c61a40f..0990aaf 100644 --- a/app/index.html +++ b/app/index.html @@ -1,13 +1,15 @@ - - - - - app - - - - - + + + + + app + + + + + + + \ No newline at end of file diff --git a/app/src/App.tsx b/app/src/App.tsx index dfc8cc1..7e959ff 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -1,115 +1,159 @@ -import { createMemo, For, Show } from "solid-js"; -import { createStore } from "solid-js/store"; +import { createSignal, For } from "solid-js"; -function App() { - const [store, setStore] = createStore< - [start: Temporal.PlainDateTime, end: Temporal.PlainDateTime][] - >([]); - - function handleSubmit(event: SubmitEvent) { - event.preventDefault(); - - if (!(event.target instanceof HTMLFormElement)) throw new Error("Expected target to be a form"); - - const startInput = event.target.elements.namedItem("start"); - if (!(startInput instanceof HTMLInputElement)) - throw new Error("Expected start input to be an input"); - - const start = Temporal.PlainDateTime.from(startInput.value); - - if (start === undefined) throw new Error("Expected start to be a valid date"); - - const endInput = event.target.elements.namedItem("end"); - if (!(endInput instanceof HTMLInputElement)) - throw new Error("Expected end input to be an input"); - - const end = Temporal.PlainDateTime.from(endInput.value); - if (end === undefined) throw new Error("Expected end to be a valid date"); - - setStore(store.length, [start, end]); - } - - const now = Temporal.Now.plainDateTimeISO(); - const start = now.toString().substring(0, 16); - const end = now.add({ minutes: 30 }).toString().substring(0, 16); - const rows = createMemo(() => - store.map(([start, end]) => ({ - year: start.toLocaleString(undefined, { year: "numeric" }), - month: start.toLocaleString(undefined, { month: "short" }), - week: start.weekOfYear?.toString(), - day: start.toLocaleString(undefined, { day: "numeric" }), - dayOfWeek: start.toLocaleString(undefined, { weekday: "long" }), - start: start.toLocaleString(undefined, { timeStyle: "medium" }), - end: end.toLocaleString(undefined, { timeStyle: "medium" }), - })), - ); +function Fun() { return ( <> -

Time

- + Monday - + Tuesday - + Wednesday - + Thursday - + Friday - + Saturday - + Sunday - - - - - - - - - - - - 0} - fallback={ - - - - } - > - - {(row) => ( - - - - - - - - - )} - - - -
MonthWeekDayStartEnd
No data
{row.year}{row.month}{row.week} - {row.dayOfWeek} {row.day} - {row.start}{row.end}
-
- - - - - -
+ + ); +} + +type Entry = [from: string, to: string]; +type Data = { + date: string; + entries: Entry[]; +}; +function App() { + const [data] = createSignal([ + { + date: "2026-04-27", + entries: [ + ["14:00", "14:40"], + ["16:30", "20:30"], + ], + }, + { + date: "2026-04-28", + entries: [ + ["10:20", "11:30"], + ["14:30", "18:00"], + ["18:15", "19:45"], + ], + }, + { + date: "2026-04-29", + entries: [ + ["13:00", "13:30"], + ["14:30", "19:40"], + ], + }, + { + date: "2026-04-30", + entries: [["09:15", "13:00"]], + }, + { + date: "2026-05-01", + entries: [ + ["10:45", "11:15"], + ["17:00", "18:00"], + ], + }, + { date: "2026-05-02", entries: [["10:15", "18:30"]] }, + { date: "2026-05-03", entries: [] }, + ]); + return ( + <> +

Time

+ +
+ + {(item) => { + // const dayOfWeek = item?.date.toLocaleString(undefined, { + // weekday: "long", + // }); + + const date = Temporal.PlainDate.from(item.date); + const weekday = date.toLocaleString(undefined, { + weekday: "long", + }); + + return ( +
+ + + {([from, to]) => { + const fromTime = Temporal.PlainTime.from(from); + const toTime = Temporal.PlainTime.from(to); + + const duration = toTime.since(fromTime); + return ( +
+ + + +
+ ); + }} + +
+ ); + }} + + {/*
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
*/} +
); } diff --git a/app/src/index.tsx b/app/src/index.tsx index 97e9243..171c480 100644 --- a/app/src/index.tsx +++ b/app/src/index.tsx @@ -1,5 +1,6 @@ /* @refresh reload */ import { render } from "solid-js/web"; + import "./index.css"; import App from "./App.tsx"; -- 2.51.2