added highlighting of days with logs or files

diff --git a/backend/server/routers/logs.py b/backend/server/routers/logs.py
index 1d7a7859f45199151a41153efbcc805485c09ecc..a58b4eeb35c26da03729505dc01b5ae35cfa6645 100644 (file)
--- 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 ed672abaeadf4b7875e74e26c8e66ce14471a924..5b1ea3eb4a301d920c3a0fd5958f1dc15c749c75 100644 (file)
--- 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 e865f2cc328ec3d559b1fbf141b076299406bbcb..522fd0bf6d4849e88bf0b5116b660456ee5331ca 100644 (file)
--- 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;