fixed css on calendar

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 355096552d7ce96dfcad868148de2dbab57b87ea..5587a05050c1cdf2b9c736a65eaff0bbef82acd1 100644 (file)
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -2,7 +2,7 @@
        import '../scss/styles.scss';
        import * as bootstrap from 'bootstrap';
        import Sidenav from './Sidenav.svelte';
-       import { selectedDate } from '$lib/calendarStore.js';
+       import { selectedDate, cal } from '$lib/calendarStore.js';
        import axios from 'axios';
        import { dev } from '$app/environment';
        import { goto } from '$app/navigation';
@@ -53,6 +53,8 @@
                        const result = await getLog();
                        if (result) {
                                lastSelectedDate = $selectedDate;
+                               $cal.currentYear = $selectedDate.getFullYear();
+                               $cal.currentMonth = $selectedDate.getMonth();
                        } else {
                                $selectedDate = lastSelectedDate;
                        }

diff --git a/frontend/src/routes/Datepicker.svelte b/frontend/src/routes/Datepicker.svelte
index 0105efa3d2372e26cbe344619b8a8bea9a513929..6fca948c89899894f3cc894de364f7a1458e90d9 100644 (file)
--- a/frontend/src/routes/Datepicker.svelte
+++ b/frontend/src/routes/Datepicker.svelte
@@ -11,15 +11,26 @@
 
        let animationDirection = $state(1); // swipe the dates left or right
 
+       let lastMonth = $cal.currentMonth;
+       let lastYear = $cal.currentYear;
+
        $effect(() => {
-               if ($cal) {
+               if ($cal && ($cal.currentMonth !== lastMonth || $cal.currentYear !== lastYear)) {
+                       // set animation direction
+                       animationDirection = $cal.currentMonth > lastMonth ? 1 : -1;
+                       if ($cal.currentYear > lastYear) {
+                               animationDirection = 1;
+                       } else if ($cal.currentYear < lastYear) {
+                               animationDirection = -1;
+                       }
+
                        days = updateCalendar();
+                       lastMonth = $cal.currentMonth;
+                       lastYear = $cal.currentYear;
                }
        });
 
        const updateCalendar = () => {
-               console.log('updateCalendar');
-
                const month = $cal.currentMonth;
                const year = $cal.currentYear;
                const firstDay = new Date(year, month, 1);
@@ -45,7 +56,6 @@
        };
 
        const changeMonth = (increment) => {
-               animationDirection = increment;
                $cal.currentMonth += increment;
                if ($cal.currentMonth < 0) {
                        $cal.currentMonth = 11;
@@ -54,13 +64,10 @@
                        $cal.currentMonth = 0;
                        changeYear(1);
                }
-               days = updateCalendar();
        };
 
        const changeYear = (increment) => {
-               animationDirection = increment;
                $cal.currentYear += increment;
-               days = updateCalendar();
        };
 
        const onDateClick = (date) => {
@@ -78,7 +85,6 @@
        const onMonthSelect = (event) => {
                animationDirection = months.indexOf(event.target.value) > $cal.currentMonth ? 1 : -1;
                $cal.currentMonth = months.indexOf(event.target.value);
-               days = updateCalendar();
        };
 
        const onYearInput = (event) => {
@@ -86,7 +92,6 @@
                const year = parseInt(event.target.value);
                if (year && !isNaN(year) && year >= 1) {
                        $cal.currentYear = year;
-                       days = updateCalendar();
                }
        };
 
@@ -156,7 +161,21 @@
                        </div>
                {/key}
        </div>
-       {$selectedDate}
+
+       <div class="row mb-2">
+               <div class="col-4"></div>
+               <div class="col-4">
+                       <button
+                               class="btn btn-primary"
+                               onclick={() => {
+                                       $selectedDate = new Date();
+                               }}>Heute</button
+                       >
+               </div>
+               <div class="col-4">
+                       <button class="btn btn-secondary"> Mark </button>
+               </div>
+       </div>
 </div>
 
 <style>
@@ -189,7 +208,7 @@
        .calendar-container {
                position: relative;
                overflow: hidden;
-               min-height: 320px;
+               min-height: 282px;
        }
        .datepicker-grid {
                display: grid;