"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",
"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",
"dependencies": {
"@popperjs/core": "^2.11.8",
"axios": "^1.7.8",
- "bootstrap": "^5.3.3"
+ "bootstrap": "^5.3.3",
+ "dayjs": "^1.11.13"
}
}
--- /dev/null
+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
<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 -->
aria-label="Close"
></button>
</div>
- <Sidenav sidenav="true" />
+ <Sidenav />
</div>
<div class="d-flex flex-row justify-content-between">
<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>
</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 {
<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);
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();
const changeYear = (increment) => {
animationDirection = increment;
- currentYear += increment;
+ $cal.currentYear += increment;
days = updateCalendar();
};
const onDateClick = (date) => {
- currentlySelectedDate = date;
- dateSelected(date);
+ $selectedDate = date;
+ //dateSelected(date);
};
onMount(() => {
);
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();
}
};
<button type="button" class="btn btnLeftRight" onclick={() => changeMonth(-1)}><</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}
<div class="year-input-group">
<input
type="number"
- value={currentYear}
+ value={$cal.currentYear}
min="1"
max="9999"
class="year-input"
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)}
>
<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
git.99rst.org / DailyTxT.git / commitdiff