diff --git a/dist/index.js b/dist/index.js index 5fe765e0..0dde02a6 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1609,6 +1609,7 @@ // state selectedYear = new State(0); selectedMonth = new State(0); + selectedDate = new State(0); monthGrid = new State(void 0); // view getTaskMapState = (taskFileContent) => { @@ -1638,6 +1639,7 @@ const today = /* @__PURE__ */ new Date(); this.selectedYear.value = today.getFullYear(); this.selectedMonth.value = today.getMonth() + 1; + this.selectedDate.value = today.getDate(); }; showPreviousMonth = () => { this.selectedMonth.value -= 1; @@ -2495,7 +2497,9 @@ yearInputAudioLabel: "year", monthInputAudioLabel: "month", yearInputPlaceholder: "2000", - monthInputPlaceholder: "01" + monthInputPlaceholder: "01", + /// + searchEventsHeadline: "Search Events" } } }; @@ -2506,7 +2510,7 @@ var translations = allTranslations[language] || allTranslations.en; // src/View/Components/monthGrid.tsx - function MonthGrid2(monthGrid) { + function MonthGrid2(monthGrid, selectedDate) { const dayLabels = []; let currentWeekday = monthGrid.firstDayOfWeek; while (dayLabels.length < 7) { @@ -2525,7 +2529,14 @@ }; return /* @__PURE__ */ createElement("div", { class: "month-grid-wrapper" }, /* @__PURE__ */ createElement("div", { class: "day-labels" }, ...dayLabels), /* @__PURE__ */ createElement("div", { class: "month-grid" }, ...offsetElements, ...Object.entries(monthGrid.days).map((entry) => { const [date, mapState] = entry; - return /* @__PURE__ */ createElement("button", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, date), /* @__PURE__ */ createElement( + const isSelected = createProxyState( + [selectedDate], + () => selectedDate.value == parseInt(date) + ); + function select() { + selectedDate.value = parseInt(date); + } + return /* @__PURE__ */ createElement("button", { class: "tile", "on:click": select, "toggle:selected": isSelected }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, date), /* @__PURE__ */ createElement( "div", { class: "flex-column gap clip", @@ -2544,7 +2555,10 @@ if (calendarPageViewModel.monthGrid.value == void 0) { return /* @__PURE__ */ createElement("div", null); } else { - return MonthGrid2(calendarPageViewModel.monthGrid.value); + return MonthGrid2( + calendarPageViewModel.monthGrid.value, + calendarPageViewModel.selectedDate + ); } } ); diff --git a/src/View/ChatPages/calendarPage.tsx b/src/View/ChatPages/calendarPage.tsx index 9d1468f4..0b987c0b 100644 --- a/src/View/ChatPages/calendarPage.tsx +++ b/src/View/ChatPages/calendarPage.tsx @@ -4,8 +4,6 @@ import * as React from "bloatless-react"; import CalendarPageViewModel from "../../ViewModel/Pages/calendarPageViewModel"; import { MonthGrid } from "../Components/monthGrid"; -import { TaskViewModelToEntry } from "../Components/taskEntry"; -import { createPropertyValueIndexState } from "../Components/propertyValueList"; import { translations } from "../translations"; export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) { @@ -17,7 +15,10 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) { if (calendarPageViewModel.monthGrid.value == undefined) { return
; } else { - return MonthGrid(calendarPageViewModel.monthGrid.value); + return MonthGrid( + calendarPageViewModel.monthGrid.value, + calendarPageViewModel.selectedDate + ); } } ); diff --git a/src/View/Components/monthGrid.tsx b/src/View/Components/monthGrid.tsx index d7768431..87df54c6 100644 --- a/src/View/Components/monthGrid.tsx +++ b/src/View/Components/monthGrid.tsx @@ -5,7 +5,10 @@ import { MonthGrid } from "../../Model/Files/calendarModel"; import TaskViewModel from "../../ViewModel/Pages/taskViewModel"; import { translations } from "../translations"; -export function MonthGrid(monthGrid: MonthGrid>) { +export function MonthGrid( + monthGrid: MonthGrid>, + selectedDate: React.State +) { const dayLabels: HTMLElement[] = []; let currentWeekday = monthGrid.firstDayOfWeek; while (dayLabels.length < 7) { @@ -37,8 +40,17 @@ export function MonthGrid(monthGrid: MonthGrid>) { {...Object.entries(monthGrid.days).map((entry) => { const [date, mapState] = entry; + const isSelected = React.createProxyState( + [selectedDate], + () => selectedDate.value == parseInt(date) + ); + + function select() { + selectedDate.value = parseInt(date); + } + return ( -