From: PhiTux <redacted>
Date: Fri, 27 Dec 2024 18:33:13 +0000 (+0100)
Subject: calendar and textarea progress
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=c9b4333a27ea247f88742bcf1c1e8f2ff8af387d;p=DailyTxT.git

calendar and textarea progress
---

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 067f54f..3fe25db 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,7 +10,8 @@
 			"dependencies": {
 				"@popperjs/core": "^2.11.8",
 				"axios": "^1.7.8",
-				"bootstrap": "^5.3.3"
+				"bootstrap": "^5.3.3",
+				"dayjs": "^1.11.13"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^3.0.0",
@@ -1680,6 +1681,12 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/dayjs": {
+			"version": "1.11.13",
+			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+			"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+			"license": "MIT"
+		},
 		"node_modules/debug": {
 			"version": "4.3.7",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 80174f9..186d2f3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -33,6 +33,7 @@
 	"dependencies": {
 		"@popperjs/core": "^2.11.8",
 		"axios": "^1.7.8",
-		"bootstrap": "^5.3.3"
+		"bootstrap": "^5.3.3",
+		"dayjs": "^1.11.13"
 	}
 }
diff --git a/frontend/src/lib/calendarStore.js b/frontend/src/lib/calendarStore.js
new file mode 100644
index 0000000..928a925
--- /dev/null
+++ b/frontend/src/lib/calendarStore.js
@@ -0,0 +1,12 @@
+import {writable} from 'svelte/store';
+
+let date = new Date();
+
+export let selectedDate = writable(date);
+
+export let cal = writable({
+  daysWithLogs: [],
+  daysWithFiles: [],
+  currentMonth: date.getMonth(),
+  currentYear: date.getFullYear(),
+});
\ No newline at end of file
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 7387a9a..c63f5ee 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,18 +1,37 @@
 <script>
 	import '../scss/styles.scss';
-	//import * as bootstrap from 'bootstrap';
-	import { Tooltip } from 'bootstrap';
-	import { goto } from '$app/navigation';
+	import * as bootstrap from 'bootstrap';
 	import Sidenav from './Sidenav.svelte';
+	import { selectedDate } from '$lib/calendarStore.js';
+	import dayjs from 'dayjs';
 
-	//on mount
-	import { onMount } from 'svelte';
-	onMount(() => {
-		const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-		const tooltipList = [...tooltipTriggerList].map(
-			(tooltipTriggerEl) => new Tooltip(tooltipTriggerEl)
-		);
+	$effect(() => {
+		if ($selectedDate) {
+			console.log('hu');
+		}
 	});
+
+	let currentLog = $state('');
+	let savedLog = $state('');
+
+	let timeout;
+
+	function debounce(fn) {
+		clearTimeout(timeout);
+		timeout = setTimeout(() => fn(), 1000);
+	}
+
+	function handleInput() {
+		debounce(() => {
+			saveLog();
+		});
+	}
+
+	function saveLog() {
+		// axios to backend
+		console.log(dayjs().format('DD.MM.YYYY, HH:mm [Uhr]'));
+		savedLog = currentLog;
+	}
 </script>
 
 <!-- shown on small Screen, when triggered -->
@@ -26,7 +45,7 @@
 			aria-label="Close"
 		></button>
 	</div>
-	<Sidenav sidenav="true" />
+	<Sidenav />
 </div>
 
 <div class="d-flex flex-row justify-content-between">
@@ -39,13 +58,24 @@
 	<div class="d-flex flex-column mt-4 mx-4 flex-fill">
 		<!-- Input-Area -->
 		<div class="d-flex flex-column">
-			<div class="d-flex flex-row">
-				<div class="flex-fill">Datum</div>
-				<div class="flex-fill">written at</div>
-				<div>history</div>
-				<div>delete</div>
+			<div class="d-flex flex-row textAreaHeader">
+				<div class="flex-fill textAreaDate">
+					{$selectedDate.toLocaleDateString('locale', { weekday: 'long' })}<br />
+					{$selectedDate.toLocaleDateString('locale')}
+				</div>
+				<div class="flex-fill textAreaWrittenAt">
+					Geschrieben am:<br />
+					TODO
+				</div>
+				<div class="textAreaHistory">history</div>
+				<div class="textAreaDelete">delete</div>
 			</div>
-			<textarea class="form-control" rows="10"></textarea>
+			<textarea
+				bind:value={currentLog}
+				oninput={handleInput}
+				class="form-control {currentLog !== savedLog ? 'notSaved' : ''}"
+				rows="10"
+			></textarea>
 		</div>
 	</div>
 
@@ -53,9 +83,46 @@
 </div>
 
 <style>
+	.textAreaHeader {
+		border-left: 1px solid #ccc;
+		border-top: 1px solid #ccc;
+		border-right: 1px solid #ccc;
+		border-top-left-radius: 5px;
+		border-top-right-radius: 5px;
+	}
+
+	.textAreaDate,
+	.textAreaWrittenAt,
+	.textAreaHistory {
+		border-right: 1px solid #ccc;
+		padding: 0.25em;
+	}
+
+	.notSaved {
+		border-color: #f57c00;
+		/* border-color: #ff9800; */
+	}
+
+	textarea:focus.notSaved {
+		box-shadow: 0 0 0 0.25rem #f57c0030;
+	}
+
+	textarea:focus:not(.notSaved) {
+		border-color: #90ee90;
+		box-shadow: 0 0 0 0.25rem #90ee9070;
+	}
+
+	.textAreaDate {
+		font-weight: 600;
+	}
+
 	textarea {
 		resize: vertical;
 		width: 100%;
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+		border-color: lightgreen;
+		border-width: 1px;
 	}
 
 	#right {
diff --git a/frontend/src/routes/Datepicker.svelte b/frontend/src/routes/Datepicker.svelte
index 5ed9c53..3d1da39 100644
--- a/frontend/src/routes/Datepicker.svelte
+++ b/frontend/src/routes/Datepicker.svelte
@@ -1,22 +1,29 @@
 <script>
+	import { cal, selectedDate } from '$lib/calendarStore.js';
 	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 
-	let { currentlySelectedDate = new Date(), dateSelected } = $props();
+	//let { currentlySelectedDate = new Date(), dateSelected } = $props();
 
 	let days = $state([]);
 	let markedDays = {
 		'2024-12-25': { type: 'background', color: '#28a745' }, // green instead of red
 		'2024-12-31': { type: 'dot', color: '#28a745' } // green instead of blue
 	};
-	let currentMonth = $state(currentlySelectedDate.getMonth());
-	let currentYear = $state(currentlySelectedDate.getFullYear());
+	//let currentMonth = $state(currentlySelectedDate.getMonth());
+	//let currentYear = $state(currentlySelectedDate.getFullYear());
 
 	let animationDirection = $state(1); // swipe the dates left or right
 
+	$effect(() => {
+		if ($cal) {
+			days = updateCalendar();
+		}
+	});
+
 	const updateCalendar = () => {
-		const month = currentMonth;
-		const year = currentYear;
+		const month = $cal.currentMonth;
+		const year = $cal.currentYear;
 		const firstDay = new Date(year, month, 1);
 		const lastDay = new Date(year, month + 1, 0);
 
@@ -41,12 +48,12 @@
 
 	const changeMonth = (increment) => {
 		animationDirection = increment;
-		currentMonth += increment;
-		if (currentMonth < 0) {
-			currentMonth = 11;
+		$cal.currentMonth += increment;
+		if ($cal.currentMonth < 0) {
+			$cal.currentMonth = 11;
 			changeYear(-1);
-		} else if (currentMonth > 11) {
-			currentMonth = 0;
+		} else if ($cal.currentMonth > 11) {
+			$cal.currentMonth = 0;
 			changeYear(1);
 		}
 		days = updateCalendar();
@@ -54,13 +61,13 @@
 
 	const changeYear = (increment) => {
 		animationDirection = increment;
-		currentYear += increment;
+		$cal.currentYear += increment;
 		days = updateCalendar();
 	};
 
 	const onDateClick = (date) => {
-		currentlySelectedDate = date;
-		dateSelected(date);
+		$selectedDate = date;
+		//dateSelected(date);
 	};
 
 	onMount(() => {
@@ -72,16 +79,16 @@
 	);
 
 	const onMonthSelect = (event) => {
-		animationDirection = months.indexOf(event.target.value) > currentMonth ? 1 : -1;
-		currentMonth = months.indexOf(event.target.value);
+		animationDirection = months.indexOf(event.target.value) > $cal.currentMonth ? 1 : -1;
+		$cal.currentMonth = months.indexOf(event.target.value);
 		days = updateCalendar();
 	};
 
 	const onYearInput = (event) => {
-		animationDirection = parseInt(event.target.value) > currentYear ? 1 : -1;
+		animationDirection = parseInt(event.target.value) > $cal.currentYear ? 1 : -1;
 		const year = parseInt(event.target.value);
 		if (year && !isNaN(year) && year >= 1) {
-			currentYear = year;
+			$cal.currentYear = year;
 			days = updateCalendar();
 		}
 	};
@@ -95,7 +102,7 @@
 		<button type="button" class="btn btnLeftRight" onclick={() => changeMonth(-1)}>&lt;</button>
 		<div class="date-selectors">
 			<select
-				value={new Date(2000, currentMonth).toLocaleString('default', { month: 'long' })}
+				value={new Date(2000, $cal.currentMonth).toLocaleString('default', { month: 'long' })}
 				onchange={onMonthSelect}
 			>
 				{#each months as month}
@@ -105,7 +112,7 @@
 			<div class="year-input-group">
 				<input
 					type="number"
-					value={currentYear}
+					value={$cal.currentYear}
 					min="1"
 					max="9999"
 					class="year-input"
@@ -139,7 +146,7 @@
 							class="day
 								{day.mark?.type === 'background' ? 'mark-background' : ''} 
 								{day.mark?.type === 'dot' ? 'mark-dot' : ''} 
-								{currentlySelectedDate.toDateString() === day.date.toDateString() ? 'selected' : ''}"
+								{$selectedDate.toDateString() === day.date.toDateString() ? 'selected' : ''}"
 							style="--color: {day.mark?.color || 'transparent'}"
 							onclick={() => onDateClick(day.date)}
 						>
diff --git a/frontend/src/routes/Sidenav.svelte b/frontend/src/routes/Sidenav.svelte
index 5287ad2..dfc2f56 100644
--- a/frontend/src/routes/Sidenav.svelte
+++ b/frontend/src/routes/Sidenav.svelte
@@ -1,19 +1,7 @@
 <script>
 	import Datepicker from './Datepicker.svelte';
-	let { sidenav } = {};
-	let selectedDate = $state(new Date());
 </script>
 
-{sidenav}
-<!-- {#if sidenav} -->
-
-<!-- {/if} -->
-
-<Datepicker
-	currentlySelectedDate={new Date(2025, 0, 31)}
-	dateSelected={(date) => (selectedDate = date)}
-/>
-<br />
-{selectedDate.toLocaleDateString('de-DE')}
+<Datepicker />
 <br />
 Search