From: PhiTux <redacted>
Date: Sat, 4 Jan 2025 18:20:00 +0000 (+0100)
Subject: added highlighting of days with logs or files
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=717b8fd2053769ee200f78777f5940f3251c402d;p=DailyTxT.git

added highlighting of days with logs or files
---

diff --git a/backend/server/routers/logs.py b/backend/server/routers/logs.py
index 1d7a785..a58b4ee 100644
--- a/backend/server/routers/logs.py
+++ b/backend/server/routers/logs.py
@@ -183,4 +183,21 @@ async def search(searchString: str, cookie = Depends(users.isLoggedIn)):
     # sort by year and month and day
     results.sort(key=lambda x: (int(x["year"]), int(x["month"]), int(x["day"])), reverse=True)
     print(results)
-    return results
\ No newline at end of file
+    return results
+
+@router.get("/getMarkedDays")
+async def getMarkedDays(month: str, year: str, cookie = Depends(users.isLoggedIn)):
+    days_with_logs = []
+    days_with_files = []
+
+    content:dict = fileHandling.getDay(cookie["user_id"], year, int(month))
+    if "days" not in content.keys():
+        return {"days_with_logs": [], "days_with_files": []}
+
+    for dayLog in content["days"]:
+        if "text" in dayLog.keys():
+            days_with_logs.append(dayLog["day"])
+        if "files" in dayLog.keys() and len(dayLog["files"]) > 0:
+            days_with_files.append(dayLog["day"])
+    
+    return {"days_with_logs": days_with_logs, "days_with_files": days_with_files}
\ No newline at end of file
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index ed672ab..5b1ea3e 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -49,10 +49,14 @@
 
 	let lastSelectedDate = $state($selectedDate);
 
-	$effect(async () => {
+	let loading = false;
+	$effect(() => {
+		if (loading) return;
+		loading = true;
+
 		if ($selectedDate !== lastSelectedDate) {
 			clearTimeout(timeout);
-			const result = await getLog();
+			const result = getLog();
 			if (result) {
 				lastSelectedDate = $selectedDate;
 				$cal.currentYear = $selectedDate.getFullYear();
@@ -61,8 +65,49 @@
 				$selectedDate = lastSelectedDate;
 			}
 		}
+		loading = false;
 	});
 
+	$effect(() => {
+		if ($cal.currentMonth || $cal.currentYear) {
+			loadMarkedDays();
+		}
+	});
+
+	let lastMonth = $cal.currentMonth;
+	let lastYear = $cal.currentYear;
+	let isLoadingMarkedDays = false;
+	function loadMarkedDays() {
+		if ($cal.currentMonth === lastMonth && $cal.currentYear === lastYear) {
+			return;
+		}
+
+		if (isLoadingMarkedDays) {
+			return;
+		}
+		isLoadingMarkedDays = true;
+
+		axios
+			.get(API_URL + '/logs/getMarkedDays', {
+				params: {
+					month: $cal.currentMonth + 1,
+					year: $cal.currentYear
+				}
+			})
+			.then((response) => {
+				$cal.daysWithLogs = [...response.data.days_with_logs];
+				$cal.daysWithFiles = [...response.data.days_with_files];
+			})
+			.catch((error) => {
+				console.error(error);
+			})
+			.finally(() => {
+				lastMonth = $cal.currentMonth;
+				lastYear = $cal.currentYear;
+				isLoadingMarkedDays = false;
+			});
+	}
+
 	let altPressed = false;
 	function on_key_down(event) {
 		if (event.key === 'Alt') {
@@ -150,6 +195,7 @@
 			minute: '2-digit'
 		});
 
+		let dateOfSave = lastSelectedDate;
 		try {
 			const response = await axios.post(API_URL + '/logs/saveLog', {
 				date: lastSelectedDate.toISOString(),
@@ -160,6 +206,12 @@
 			if (response.data.success) {
 				savedLog = currentLog;
 				logDateWritten = date_written;
+
+				// add to $cal.daysWithLogs
+				if (!$cal.daysWithLogs.includes(lastSelectedDate.getDate())) {
+					$cal.daysWithLogs = [...$cal.daysWithLogs, dateOfSave.getDate()];
+				}
+
 				return true;
 			} else {
 				// toast
@@ -172,7 +224,7 @@
 			// toast
 			const toast = new bootstrap.Toast(document.getElementById('toastErrorSavingLog'));
 			toast.show();
-			console.error(error.response);
+			console.error(error);
 			return false;
 		}
 	}
@@ -310,7 +362,8 @@
 
 <style>
 	.sidenav {
-		max-width: 430px;
+		/* max-width: 430px; */
+		width: 380px;
 	}
 
 	.textAreaHeader {
diff --git a/frontend/src/routes/Datepicker.svelte b/frontend/src/routes/Datepicker.svelte
index e865f2c..522fd0b 100644
--- a/frontend/src/routes/Datepicker.svelte
+++ b/frontend/src/routes/Datepicker.svelte
@@ -56,6 +56,8 @@
 	};
 
 	const changeMonth = (increment) => {
+		$cal.daysWithLogs = [];
+		$cal.daysWithFiles = [];
 		$cal.currentMonth += increment;
 		if ($cal.currentMonth < 0) {
 			$cal.currentMonth = 11;
@@ -146,10 +148,9 @@
 							in:fly={{ y: 100, duration: 200 }}
 							out:fly={{ y: -100, duration: 200 }}
 							class="day
-								{day.mark?.type === 'background' ? 'mark-background' : ''} 
+								{$cal.daysWithLogs.includes(day.date.getDate()) ? 'mark-background' : ''} 
 								{day.mark?.type === 'dot' ? 'mark-dot' : ''} 
 								{$selectedDate.toDateString() === day.date.toDateString() ? 'selected' : ''}"
-							style="--color: {day.mark?.color || 'transparent'}"
 							onclick={() => onDateClick(day.date)}
 						>
 							{day.date.getDate()}
@@ -194,7 +195,7 @@
 		border: 1px solid #ccc;
 		border-radius: 8px;
 		/* overflow: hidden; */
-		width: 300px;
+		/* width: 300px; */
 		box-sizing: border-box;
 	}
 	.datepicker-header {
@@ -246,7 +247,7 @@
 		background: #f0f0f0;
 	}
 	.day.mark-background {
-		background-color: var(--color);
+		background-color: #00ad00;
 		color: white;
 		aspect-ratio: 1;
 	}
@@ -311,12 +312,6 @@
 		background-color: #0056b3;
 	}
 
-	/* Ensure selected state takes precedence */
-	.day.mark-background:not(.selected) {
-		background-color: var(--color);
-		color: white;
-	}
-
 	.day.mark-dot:not(.selected)::after {
 		content: '';
 		width: 6px;