From 17654e1f2ea4c6610efb98b66f0c9a2ff444c7db Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Thu, 18 Jul 2024 23:25:37 +0200 Subject: [PATCH] add inputs and buttons to change month --- dist/index.css | 14 ++++ dist/index.js | 107 +++++++++++++++++++++---- src/Views/Objects/calendarView.tsx | 82 +++++++++++++++---- src/Views/Objects/miniatureDayView.tsx | 13 ++- src/styles.css | 20 +++++ src/translations.ts | 32 ++++++++ 6 files changed, 233 insertions(+), 35 deletions(-) diff --git a/dist/index.css b/dist/index.css index 5bdd86b2..c1f0a95e 100644 --- a/dist/index.css +++ b/dist/index.css @@ -84,6 +84,9 @@ main:has([showingobjects][chatopen]) #settings-tab { height: 100%; flex: 1; } +.day-miniature[today] h3 { + color: var(--primary); +} @media (min-width: 900px) { .calendar-wrapper:not([chatvisible] *) { flex-direction: row; @@ -108,3 +111,14 @@ main:has([showingobjects][chatopen]) #settings-tab { max-width: var(--day-view-width); } } +@media (max-width: 500px) { + .day-miniature { + padding: var(--control-padding) !important; + } + .day-miniature h3 { + font-size: 1rem; + } + .day-miniature > div { + display: none; + } +} diff --git a/dist/index.js b/dist/index.js index 1ea3c867..87fcd835 100644 --- a/dist/index.js +++ b/dist/index.js @@ -440,6 +440,17 @@ close: "Close", discard: "Discard", rename: "Rename", + weekdays: [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday" + ], + previousMonth: "previous month", + nextMonth: "next month", // settings settings: "Settings", showSettings: "Show settings", @@ -547,6 +558,15 @@ close: "Cerrar", discard: "Descartar", rename: "Renombrar", + weekdays: [ + "Domingo", + "Lunes", + "Martes", + "Mi\xE9rcoles", + "Jueves", + "Viernes", + "S\xE1bado" + ], // settings settings: "Configuraci\xF3n", showSettings: "Mostrar configuraci\xF3n", @@ -652,6 +672,15 @@ close: "Schlie\xDFen", discard: "Verwerfen", rename: "Umbenennen", + weekdays: [ + "Sonntag", + "Montag", + "Dienstag", + "Mittwoch", + "Donnerstag", + "Freitag", + "Samstag" + ], // settings settings: "Einstellungen", showSettings: "Einstellungen anzeigen", @@ -2122,6 +2151,7 @@ [dayInCalendar], () => dayInCalendar.value == dateString ); + const isToday = (/* @__PURE__ */ new Date()).toDateString() == dayToShow.toDateString(); messageObjects.handleAddition(processObject); const objectConverter = (messageObject) => { const latest = chat.getMostRecentContent(messageObject); @@ -2129,7 +2159,7 @@ const [hour, minute] = timeString.split(":"); const hourInMinutes = parseInt(hour) * 60; const minutesTotal = parseInt(minute) + hourInMinutes; - const view = /* @__PURE__ */ createElement("b", { class: "ellipsis" }, chat.getObjectTitle(messageObject)); + const view = /* @__PURE__ */ createElement("span", { class: "secondary ellipsis" }, chat.getObjectTitle(messageObject)); view.style.order = minutesTotal; return view; }; @@ -2138,9 +2168,11 @@ { "on:click": select, "toggle:selected": isSelected, - class: "tile flex-column align-start" + "toggle:today": isToday, + class: "day-miniature tile flex-column align-start", + style: "aspect-ratio: 1/1; overflow: hidden" }, - /* @__PURE__ */ createElement("h3", null, dayToShow.getDate()), + /* @__PURE__ */ createElement("h3", { class: "margin-0" }, dayToShow.getDate()), /* @__PURE__ */ createElement( "div", { @@ -2153,33 +2185,76 @@ // src/Views/Objects/calendarView.tsx function CalendarView(chat, messageObjects, selectedObject, isShowingObjectModal) { + const selectedDate = new Date(dayInCalendar.value); + const selectedMonth = new State(selectedDate.getMonth()); + const selectedYear = new State(selectedDate.getFullYear()); + bulkSubscribe([selectedMonth, selectedYear], () => { + selectedDate.setMonth(selectedMonth.value - 1); + selectedDate.setFullYear(selectedYear.value); + dayInCalendar.value = selectedDate.toISOString().split("T")[0]; + }); + function previousMonth() { + if (selectedMonth.value <= 1) { + selectedMonth.value = 12; + selectedYear.value -= 1; + return; + } + selectedMonth.value -= 1; + } + function nextMonth() { + if (selectedMonth.value >= 12) { + selectedMonth.value = 1; + selectedYear.value += 1; + return; + } + selectedMonth.value += 1; + } let monthGridCells = new State([]); - let previousMonth = 0; dayInCalendar.subscribe((newValue) => { - const selectedDate = new Date(newValue); - if (selectedDate.getMonth() == previousMonth) return; - previousMonth = selectedDate.getMonth(); + const newSelectedDate = new Date(newValue); const currentDate = /* @__PURE__ */ new Date(); monthGridCells.value = []; currentDate.setDate(1); - currentDate.setMonth(selectedDate.getMonth()); + currentDate.setMonth(newSelectedDate.getMonth()); + for (let i = 0; i < 7; i++) { + monthGridCells.value.push( + /* @__PURE__ */ createElement("b", { class: "secondary ellipsis width-100" }, translation.weekdays[i]) + ); + } const monthOffset = currentDate.getDay(); - console.log(monthOffset); for (let i = 0; i < monthOffset; i++) { monthGridCells.value.push(/* @__PURE__ */ createElement("div", null)); } - while (currentDate.getMonth() == selectedDate.getMonth()) { + while (currentDate.getMonth() == newSelectedDate.getMonth()) { monthGridCells.value.push( - MiniatureDayView( - chat, - messageObjects, - new Date(currentDate) - ) + MiniatureDayView(chat, messageObjects, new Date(currentDate)) ); currentDate.setDate(currentDate.getDate() + 1); } + monthGridCells.callSubscriptions(); }); - return /* @__PURE__ */ createElement("div", { class: "calendar-wrapper scroll-v" }, /* @__PURE__ */ createElement("div", { class: "month-grid padding scroll-v" }, /* @__PURE__ */ createElement("input", { type: "date", "bind:value": dayInCalendar }), /* @__PURE__ */ createElement( + return /* @__PURE__ */ createElement("div", { class: "calendar-wrapper" }, /* @__PURE__ */ createElement("div", { class: "month-grid padding scroll-v" }, /* @__PURE__ */ createElement("div", { class: "flex-row justify-center gap" }, /* @__PURE__ */ createElement( + "button", + { + "on:click": previousMonth, + "aria-label": translation.previousMonth + }, + /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_back") + ), /* @__PURE__ */ createElement( + "input", + { + style: "width: 90px", + type: "number", + "bind:value": selectedMonth + } + ), /* @__PURE__ */ createElement( + "input", + { + style: "width: 110px", + type: "number", + "bind:value": selectedYear + } + ), /* @__PURE__ */ createElement("button", { "on:click": nextMonth, "aria-label": translation.nextMonth }, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement( "div", { class: "grid gap", diff --git a/src/Views/Objects/calendarView.tsx b/src/Views/Objects/calendarView.tsx index bb99891f..7f46ba1d 100644 --- a/src/Views/Objects/calendarView.tsx +++ b/src/Views/Objects/calendarView.tsx @@ -5,6 +5,7 @@ import { Chat, MessageObject } from "../../Model/chatModel"; import { DayView } from "./dayView"; import { MiniatureDayView } from "./miniatureDayView"; import { dayInCalendar } from "../../Model/model"; +import { translation } from "../../translations"; export function CalendarView( chat: Chat, @@ -12,45 +13,94 @@ export function CalendarView( selectedObject: React.State, isShowingObjectModal: React.State ) { - let monthGridCells = new React.State([]); + const selectedDate = new Date(dayInCalendar.value); + const selectedMonth = new React.State(selectedDate.getMonth()); + const selectedYear = new React.State(selectedDate.getFullYear()); - let previousMonth = 0; + React.bulkSubscribe([selectedMonth, selectedYear], () => { + selectedDate.setMonth(selectedMonth.value - 1); + selectedDate.setFullYear(selectedYear.value); + dayInCalendar.value = selectedDate.toISOString().split("T")[0]; + }); + + function previousMonth() { + if (selectedMonth.value <= 1) { + selectedMonth.value = 12; + selectedYear.value -= 1; + return; + } + selectedMonth.value -= 1; + } + + function nextMonth() { + if (selectedMonth.value >= 12) { + selectedMonth.value = 1; + selectedYear.value += 1; + return; + } + selectedMonth.value += 1; + } + + let monthGridCells = new React.State([]); dayInCalendar.subscribe((newValue) => { - const selectedDate = new Date(newValue); - if (selectedDate.getMonth() == previousMonth) return; - - previousMonth = selectedDate.getMonth(); + const newSelectedDate = new Date(newValue); + const currentDate = new Date(); monthGridCells.value = []; // initialize to first day of month currentDate.setDate(1); - currentDate.setMonth(selectedDate.getMonth()); + currentDate.setMonth(newSelectedDate.getMonth()); + + // labels + for (let i = 0; i < 7; i++) { + monthGridCells.value.push( + {translation.weekdays[i]} + ); + } // create blank dates starting sunday const monthOffset = currentDate.getDay(); - console.log(monthOffset); for (let i = 0; i < monthOffset; i++) { - monthGridCells.value.push(
) + monthGridCells.value.push(
); } // add day views - while (currentDate.getMonth() == selectedDate.getMonth()) { + while (currentDate.getMonth() == newSelectedDate.getMonth()) { monthGridCells.value.push( - MiniatureDayView( - chat, - messageObjects, - new Date(currentDate), - ) + MiniatureDayView(chat, messageObjects, new Date(currentDate)) ); currentDate.setDate(currentDate.getDate() + 1); } + + monthGridCells.callSubscriptions(); }); return (
- +
+ + + + +
+
dayInCalendar.value == dateString ); + const isToday = new Date().toDateString() == dayToShow.toDateString(); messageObjects.handleAddition(processObject); @@ -45,7 +46,11 @@ export function MiniatureDayView( const hourInMinutes = parseInt(hour) * 60; const minutesTotal = parseInt(minute) + hourInMinutes; - const view = {chat.getObjectTitle(messageObject)}; + const view = ( + + {chat.getObjectTitle(messageObject)} + + ); view.style.order = minutesTotal; return view; }; @@ -54,9 +59,11 @@ export function MiniatureDayView(