fix bugs with calendar page, highlight next event

src/Model/Utility/utility.ts

@@ -18,6 +18,10 @@ export function createTimestamp(): string {
     return new Date().toISOString();
 }
 
+export function formatISO(date: Date): string {
+    return date.toISOString().split("T")[0];
+}
+
 export function formatTime(date: Date): string {
     const time = [date.getHours(), date.getMinutes()];
     return time.join(":");

src/View/ChatPages/calendarPage.tsx

@@ -47,7 +47,6 @@ export function CalendarPage(
             calendarPageViewModel.selectedDate,
         ],
         () => {
-            console.log(calendarPageViewModel.selectedDate.value);
             const listState = calendarPageViewModel.getEventsForDate();
 
             if (listState == undefined) {

src/View/Components/taskEntry.tsx

@@ -11,45 +11,56 @@ export function TaskEntry(taskViewModel: TaskViewModel) {
         schedule: taskViewModel.time.value || "---",
     };
 
+    const className = React.createProxyState([taskViewModel.isNotNext], ()=>
+	`${taskViewModel.isNotNext.value ? "standard" : "primary"} tile flex-no` 
+    )
+
     const view = (
         <button
             draggable="true"
-            class="tile flex-no"
+            set:class={className}
             style="user-select: none; -webkit-user-select: none"
             on:click={taskViewModel.open}
             on:dragstart={taskViewModel.dragStart}
-        >
-            <div>
-                <b
-                    class="ellipsis"
-                    subscribe:innerText={taskViewModel.name}
-                ></b>
-                <hr></hr>
-                <div
-                    class="grid secondary"
-                    style="grid-template-columns: repeat(2, 1fr); column-gap: 1rem;  row-gap: .5rem"
-                >
-                    {...Object.entries(details).map((entry) => (
-                        <span
-                            class="flex-row align-center width-100 flex-no clip"
-                            style="gap: 1rem"
-                        >
-                            <span class="icon" style="font-size: 1.1rem">
-                                {entry[0]}
-                            </span>
-                            <span class="ellipsis">{entry[1]}</span>
-                        </span>
-                    ))}
-                </div>
-            </div>
-        </button>
-    );
+	>
+	    <div>
+		<span
+		    class="secondary"
+		    toggle:hidden={taskViewModel.isNotNext}
+		>
+		    {taskViewModel.coreViewModel.translations.chatPage.calendar.eventNext}
+		    <hr></hr>
+		</span>
+		<b
+		    class="ellipsis"
+		    subscribe:innerText={taskViewModel.name}
+		></b>
+		<hr></hr>
+		<div
+		    class="grid secondary"
+		    style="grid-template-columns: repeat(2, 1fr); column-gap: 1rem;  row-gap: .5rem"
+		>
+		    {...Object.entries(details).map((entry) => (
+			<span
+			    class="flex-row align-center width-100 flex-no clip"
+			    style="gap: 1rem"
+			>
+			    <span class="icon" style="font-size: 1.1rem">
+				{entry[0]}
+			    </span>
+			    <span class="ellipsis">{entry[1]}</span>
+			</span>
+		))}
+	    </div>
+	</div>
+    </button>
+);
 
-    taskViewModel.index.subscribe((newIndex) => {
-        view.style.order = newIndex;
-    });
+taskViewModel.index.subscribe((newIndex) => {
+    view.style.order = newIndex;
+});
 
-    return view;
+return view;
 }
 
 export const TaskViewModelToEntry: React.StateItemConverter<TaskViewModel> = (

src/View/translations.ts

@@ -338,6 +338,10 @@ const englishTranslations = {
 
 	    events: "Events",
 	    noEvents: "No events",
+
+	    // 
+
+	    eventNext: "Up next",
 	},
     },
 };
@@ -657,6 +661,8 @@ export const allTranslations: {
 
 		events: "Ereignisse",
 		noEvents: "Keine Ereignisse",
+	    
+		eventNext: "Als nächstes",
 	    },
 	},
     },
@@ -971,6 +977,8 @@ export const allTranslations: {
 
 		events: "Eventos",
 		noEvents: "No hay eventos",
+		
+		eventNext: "A continuación",
 	    },
 	},
     },

src/ViewModel/Global/coreViewModel.ts

@@ -59,7 +59,6 @@ export default class CoreViewModel {
         if (!(e instanceof KeyboardEvent))
             return console.trace("NOT A KEY EVENT");
         if (CoreViewModel.checkIsKeystroke(e) == false) return;
-        console.log(e.key);
         e.preventDefault();
         const contexts: Context[] = this.contexts;
         while (contexts.length > 0) {
@@ -73,24 +72,21 @@ export default class CoreViewModel {
     // CHRON
     chronHandlerManager = new HandlerManager<void>();
     todayDate = new React.State<Date>(new Date());
-    time = new React.State<[number, number]>([0, 0]);
+    time = new React.State<string>("99:99");
     get unwrappedTodayDate(): Date {
         return new Date(this.todayDate.value);
     }
-    get timeString(): string {
-	return this.time.value.join(":");
-    }
 
     startChron = (): void => {
-        setInterval(this.chronHandlerManager.trigger, 2000);
+        setInterval(this.chronHandlerManager.trigger, 1000);
     };
 
     handleChron = (): void => {
 	const newDate = new Date();
 	if (this.unwrappedTodayDate.toDateString() != newDate.toDateString())
 	    this.todayDate.value = new Date();
-	if (formatTime(newDate) != this.timeString)
-	    this.time.value = [newDate.getHours(), newDate.getMinutes()];
+	if (formatTime(newDate) != this.time.value)
+	    this.time.value = formatTime(newDate);
     };
 
     // DRAG & DROP
@@ -154,9 +150,6 @@ export default class CoreViewModel {
 
 	this.configureServiceWorker();
 	this.checkUpdates();
-	this.noUpdateAvailable.subscribe(() => {
-	    console.log(this.noUpdateAvailable.value, this.latestVersion.value, this.version.value);
-	})
 
 	this.startChron();
 	this.chronHandlerManager.setHandler(

src/ViewModel/Global/fileTransferViewModel.ts

@@ -7,6 +7,7 @@ import StorageModel, {
 } from "../../Model/Global/storageModel";
 import { TransferData } from "../../Model/Global/fileTransferModel";
 import ChatModel from "../../Model/Chat/chatModel";
+import {formatISO} from "../../Model/Utility/utility";
 
 export default class FileTransferViewModel extends Context {
     // state
@@ -142,7 +143,7 @@ export default class FileTransferViewModel extends Context {
 
     downloadFile = async (): Promise<void> => {
         if (this.cannotExport.value == true) return;
-        const date = new Date().toISOString().split("T")[0];
+	const date = formatISO(new Date());
 
         const backup: Blob =
             await this.coreViewModel.fileTransferModel.generateBackup(

src/ViewModel/Global/notificationViewModel.ts

@@ -35,7 +35,6 @@ export default class NotificationViewModel {
 
     openNotification = () => {
         const notification: Notification | undefined = this.marquee.value;
-	console.log(notification);
         if (notification == undefined) return;
 
         const chat = [

src/ViewModel/Global/storageViewModel.ts

@@ -52,7 +52,6 @@ export default class StorageViewModel extends Context {
     calculateUsage = (): void => {
 	this.occupiedSpaceMB.value = this.coreViewModel.storageModel.calculateUsage();
 	this.maximumSpaceMB.value = this.coreViewModel.storageModel.determineCapacity();
-	console.log(this.occupiedSpaceMB.value, this.maximumSpaceMB.value);
     }
 
     // view

src/ViewModel/Pages/boardViewModel.ts

@@ -153,7 +153,6 @@ export default class BoardViewModel extends TaskContainingPageViewModel {
             this,
             taskFileContent,
         );
-        console.log("STILL HERE", taskFileContent.fileId);
         this.taskViewModels.set(taskFileContent.fileId, taskViewModel);
     };
 

src/ViewModel/Pages/calendarPageViewModel.ts

@@ -8,6 +8,7 @@ import CalendarModel, { MonthGrid } from "../../Model/Files/calendarModel";
 import BoardsAndTasksModel, {
     TaskFileContent,
 } from "../../Model/Files/boardsAndTasksModel";
+import {formatISO, formatTime} from "../../Model/Utility/utility";
 
 export const CALENDAR_EVENT_BOARD_ID = "events";
 
@@ -20,6 +21,12 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
         );
     }
 
+    get selectedDateString(): string {
+	return [this.selectedYear.value, this.selectedMonth.value, this.selectedDate.value]
+	    .map((x, i) => i == 0 ? x : CalendarModel.padDateOrMonth(x.toString()))
+	    .join("-");
+    }
+
     // paths
     getBasePath = (): string[] => {
         return [...this.calendarModel.getViewPath()];
@@ -34,6 +41,8 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
     monthGrid: React.State<
         MonthGrid<React.MapState<TaskViewModel>> | undefined
     > = new React.State<any>(undefined);
+    
+    nextTask: React.State<TaskViewModel|undefined> = new React.State(undefined);
 
     // methods
     createEvent = (): void => {
@@ -157,17 +166,37 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
         draggedObject.setDate(ISOString);
     };
 
+    handleChron = (): void => {
+	this.updateMonthGrid();
+	this.updateNextTask();
+    }
+
     updateMonthGrid = (): void => {
+        const today = formatISO(this.coreViewModel.todayDate.value)
         if (
-            this.currentTodayDate ==
-            this.coreViewModel.todayDate.value.toISOString()
+            this.currentTodayDate == today
         )
             return;
         this.loadMonthTasks();
-        this.currentTodayDate =
-            this.coreViewModel.todayDate.value.toISOString();
+        this.currentTodayDate = today;
+	this.selectedDate.callSubscriptions();
     };
 
+    updateNextTask = (): void => {
+	if (this.selectedDateString != this.currentTodayDate) {
+	    this.nextTask.value = undefined;
+	    return;
+	}
+
+	const tasks = this.getEventsForDate();
+	if (tasks == undefined) return;
+	for (const task of [...tasks.value.values()]) {
+	    if (task.time.value <= this.coreViewModel.time.value) continue;
+	    this.nextTask.value = task;
+	    break;
+	};
+    }
+
     // load
     loadMonthTasks = (): void => {
         this.monthGrid.value = this.calendarModel.generateMonthGrid(
@@ -189,7 +218,6 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
     };
 
     loadData = (): void => {
-        this.loadMonthTasks();
     };
 
     // init
@@ -209,6 +237,9 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
         React.bulkSubscribe([this.selectedYear, this.selectedMonth], () => {
             this.loadMonthTasks();
         });
+	this.selectedDate.subscribeSilent(()=>{
+	    this.updateNextTask();
+	})
 
         // handlers
         boardsAndTasksModel.taskHandlerManager.setHandler(
@@ -219,7 +250,7 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
         );
         this.coreViewModel.chronHandlerManager.setHandler(
             `calendar-${this.chatViewModel.chatModel.id}`,
-            this.updateMonthGrid,
+            this.handleChron,
         );
 
         // initiate

src/ViewModel/Pages/taskViewModel.ts

@@ -8,6 +8,7 @@ import { localeCompare, padZero } from "../../Model/Utility/utility";
 import BoardsAndTasksModel, {
     TaskFileContent,
 } from "../../Model/Files/boardsAndTasksModel";
+import CalendarPageViewModel from "./calendarPageViewModel";
 
 export default class TaskViewModel extends Context {
     // util
@@ -55,6 +56,8 @@ export default class TaskViewModel extends Context {
     date: React.State<string> = new React.State("");
     time: React.State<string> = new React.State("");
 
+    isNotNext: React.State<boolean> = new React.State(true);
+
     selectedVersionId: React.State<string> = new React.State("");
     versionIds: React.ListState<string> = new React.ListState();
 
@@ -196,6 +199,12 @@ export default class TaskViewModel extends Context {
     loadAllData = (): void => {
         this.loadTaskData();
         this.loadVersionIds();
+
+	if (this.containingViewModel instanceof CalendarPageViewModel) {
+	    this.containingViewModel.nextTask.subscribe((nextTask)=>{
+		this.isNotNext.value = nextTask != this;
+	    })
+	}
     };
 
     loadTaskData = (): void => {