changed structure to simplify and for read/write
authorPhiTux <redacted>
Wed, 8 Jan 2025 21:25:33 +0000 (22:25 +0100)
committerPhiTux <redacted>
Wed, 8 Jan 2025 21:25:33 +0000 (22:25 +0100)
backend/server/routers/logs.py
frontend/src/lib/APIurl.js [new file with mode: 0644]
frontend/src/lib/Datepicker.svelte [moved from frontend/src/routes/Datepicker.svelte with 92% similarity]
frontend/src/lib/Sidenav.svelte [moved from frontend/src/routes/Sidenav.svelte with 100% similarity]
frontend/src/lib/datepickerLogic.svelte [new file with mode: 0644]
frontend/src/lib/settingsStore.js
frontend/src/routes/+layout.svelte
frontend/src/routes/login/+page.js
frontend/src/routes/login/+page.svelte
frontend/src/routes/write/+page.js [moved from frontend/src/routes/+page.js with 100% similarity]
frontend/src/routes/write/+page.svelte [moved from frontend/src/routes/+page.svelte with 81% similarity]

index a58b4eeb35c26da03729505dc01b5ae35cfa6645..1088bf29069006995defb8612e9bd150748685bc 100644 (file)
@@ -200,4 +200,23 @@ async def getMarkedDays(month: str, year: str, cookie = Depends(users.isLoggedIn
         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
+    return {"days_with_logs": days_with_logs, "days_with_files": days_with_files}
+
+
+@router.get("/loadMonthForReading")
+async def loadMonthForReading(month: int, year: int, cookie = Depends(users.isLoggedIn)):
+    content:dict = fileHandling.getDay(cookie["user_id"], year, month)
+    if "days" not in content.keys():
+        return []
+    
+    days = []
+    enc_key = security.get_enc_key(cookie["user_id"], cookie["derived_key"])
+    for dayLog in content["days"]:
+        if "text" in dayLog.keys():
+            days.append({"day": dayLog["day"], 
+                         "text": security.decrypt_text(dayLog["text"], enc_key), 
+                         "date_written": security.decrypt_text(dayLog["date_written"], enc_key)})
+    
+    days.sort(key=lambda x: x["day"])
+
+    return days
\ No newline at end of file
diff --git a/frontend/src/lib/APIurl.js b/frontend/src/lib/APIurl.js
new file mode 100644 (file)
index 0000000..10ee618
--- /dev/null
@@ -0,0 +1,5 @@
+import { dev } from '$app/environment';
+
+export let API_URL = dev
+               ? `${window.location.origin.replace(/:5173.*$/gm, '')}:8000`
+               : window.location.pathname.replace(/\/+$/, '');
\ No newline at end of file
similarity index 92%
rename from frontend/src/routes/Datepicker.svelte
rename to frontend/src/lib/Datepicker.svelte
index f48645bca0c06c2a196847caa2572085edbfea96..6069a978a1fe993249bc0b8faebb0d1520c9d9a3 100644 (file)
@@ -4,10 +4,6 @@
        import { fly } from 'svelte/transition';
 
        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 animationDirection = $state(1); // swipe the dates left or right
 
@@ -15,7 +11,7 @@
        let lastYear = $cal.currentYear;
 
        $effect(() => {
-               if ($cal && ($cal.currentMonth !== lastMonth || $cal.currentYear !== lastYear)) {
+               if ($cal.currentMonth !== lastMonth || $cal.currentYear !== lastYear) {
                        // set animation direction
                        animationDirection = $cal.currentMonth > lastMonth ? 1 : -1;
                        if ($cal.currentYear > lastYear) {
@@ -25,6 +21,7 @@
                        }
 
                        days = updateCalendar();
+
                        lastMonth = $cal.currentMonth;
                        lastYear = $cal.currentYear;
                }
@@ -49,7 +46,7 @@
                        const dayKey = `${year}-${(month + 1).toString().padStart(2, '0')}-${i
                                .toString()
                                .padStart(2, '0')}`;
-                       tempDays.push({ date: new Date(Date.UTC(year, month, i)), mark: markedDays[dayKey] });
+                       tempDays.push(new Date(Date.UTC(year, month, i)));
                }
 
                return tempDays;
                                                        in:fly={{ y: 100, duration: 200 }}
                                                        out:fly={{ y: -100, duration: 200 }}
                                                        class="day
-                                                               {$cal.daysWithLogs.includes(day.date.getDate()) ? 'mark-background' : ''} 
-                                                               {day.mark?.type === 'dot' ? 'mark-dot' : ''} 
-                                                               {$selectedDate.toDateString() === day.date.toDateString() ? 'selected' : ''}"
-                                                       onclick={() => onDateClick(day.date)}
+                                                               {$cal.daysWithLogs.includes(day.getDate()) ? 'mark-background' : ''} 
+                                                               {$cal.daysWithFiles.includes(day.getDate()) ? 'mark-dot' : ''} 
+                                                               {$selectedDate.toDateString() === day.toDateString() ? 'selected' : ''}"
+                                                       onclick={() => onDateClick(day)}
                                                >
-                                                       {day.date.getDate()}
+                                                       {day.getDate()}
                                                </div>
                                        {:else}
                                                <div class="day empty-slot"></div>
diff --git a/frontend/src/lib/datepickerLogic.svelte b/frontend/src/lib/datepickerLogic.svelte
new file mode 100644 (file)
index 0000000..70b64be
--- /dev/null
@@ -0,0 +1,48 @@
+<script>
+       import { API_URL } from '$lib/APIurl.js';
+       import { cal } from '$lib/calendarStore.js';
+       import axios from 'axios';
+
+       $effect(() => {
+               if ($cal.currentMonth || $cal.currentYear) {
+                       loadMarkedDays();
+               }
+       });
+
+       let lastMonth = $cal.currentMonth - 1;
+       let lastYear = $cal.currentYear;
+       let isLoadingMarkedDays = false;
+       function loadMarkedDays() {
+               console.log('a');
+               if ($cal.currentMonth === lastMonth && $cal.currentYear === lastYear) {
+                       return;
+               }
+
+               if (isLoadingMarkedDays) {
+                       return;
+               }
+               console.log('b');
+               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;
+                               console.log('c');
+                       });
+       }
+</script>
index 43869389e6925ef0f167bc6f706114063f1fb64c..1b75a2fbf1e83fd5590b0d668adf0243ea58513b 100644 (file)
@@ -1,3 +1,3 @@
 import {writable} from 'svelte/store';
 
-export const readingMode = writable(true);
\ No newline at end of file
+export const readingMode = writable(false);
\ No newline at end of file
index 642d5e0d6eeede82e7fec0f9efb27de967c4df8a..3671ff9a56c9c2d860b8b5a49afe8994f3a56455 100644 (file)
@@ -1,7 +1,7 @@
 <script>
        import { fade, blur, slide } from 'svelte/transition';
        import axios from 'axios';
-       import { dev } from '$app/environment';
+       //import { dev } from '$app/environment';
        import { goto } from '$app/navigation';
        import { onMount } from 'svelte';
        import '../scss/styles.scss';
@@ -9,6 +9,7 @@
        import Fa from 'svelte-fa';
        import { readingMode } from '$lib/settingsStore.js';
        import { page } from '$app/state';
+       import { API_URL } from '$lib/APIurl.js';
 
        import {
                faRightFromBracket,
@@ -21,9 +22,9 @@
        let inDuration = 150;
        let outDuration = 150;
 
-       let API_URL = dev
+       /*let API_URL = dev
                ? `${window.location.origin.replace(/:5173.*$/gm, '')}:8000`
-               : window.location.pathname.replace(/\/+$/, '');
+               : window.location.pathname.replace(/\/+$/, '');*/
 
        function logout() {
                axios
@@ -57,7 +58,7 @@
 <main class="d-flex flex-column">
        <nav class="navbar navbar-expand-lg bg-body-tertiary">
                <div class="row w-100">
-                       <div class="col-lg-4 col-sm-5 col d-flex flex-row justify-content-start">
+                       <div class="col-lg-4 col-sm-5 col d-flex flex-row justify-content-start align-items-center">
                                <button
                                        class="btn d-md-none"
                                        type="button"
                                </div>
                        </div>
 
-                       <div class="col-lg-4 col-sm-2 col d-flex flex-row justify-content-center">Center-LOGO</div>
+                       <div class="col-lg-4 col-sm-2 col d-flex flex-row justify-content-center align-items-center">
+                               Center-LOGO
+                       </div>
 
-                       <div class="col-lg-4 col-sm-5 col d-flex flex-row justify-content-end">
+                       <div class="col-lg-4 col-sm-5 col pe-0 d-flex flex-row justify-content-end">
                                <button
-                                       class="btn btn-outline-secondary"
+                                       class="btn btn-outline-secondary me-2"
                                        data-bs-toggle="modal"
                                        data-bs-target="#settingsModal"><Fa icon={faSliders} /></button
                                >
index 17491da2012159e7b322eda048e90f0318b8ff3e..6c35f226679b38b8e87538c828baf56722965233 100644 (file)
@@ -3,6 +3,6 @@ import {redirect} from '@sveltejs/kit'
 export const load = () => {
   const user = JSON.parse(localStorage.getItem('user'));
                if (user) {
-                       throw redirect(307, '/');
+                       throw redirect(307, '/write');
                }
 }
\ No newline at end of file
index 510252259ffd57f6ac916ea81f85ff075c1d154b..1bf32e7d10f00fc73fc6c76e77f6157cdcdad7fe 100644 (file)
@@ -3,9 +3,8 @@
        import * as bootstrap from 'bootstrap';
        import { onMount } from 'svelte';
        import axios from 'axios';
-       import { dev } from '$app/environment';
        import { goto } from '$app/navigation';
-       import { page } from '$app/stores';
+       import { API_URL } from '$lib/APIurl.js';
 
        let show_login_failed = $state(false);
        let show_login_warning_empty_fields = $state(false);
        let registration_failed_message = $state('');
        let is_registering = $state(false);
 
-       let API_URL = dev
-               ? `${window.location.origin.replace(/:5173.*$/gm, '')}:8000`
-               : window.location.pathname.replace(/\/+$/, '');
-
        onMount(() => {
                // if params error=440 or error=401, show toast
                if (window.location.search.includes('error=440')) {
@@ -55,7 +50,7 @@
                        .post(API_URL + '/users/login', { username, password })
                        .then((response) => {
                                localStorage.setItem('user', JSON.stringify(response.data.username));
-                               goto('/');
+                               goto('/write');
                        })
                        .catch((error) => {
                                if (error.response.status === 404) {
similarity index 81%
rename from frontend/src/routes/+page.svelte
rename to frontend/src/routes/write/+page.svelte
index 71a889031b7535f721e3f0e4f83532c530c8f9b0..ad7cffa1cc5ef91cb1757b05d0713e0f44bb7521 100644 (file)
@@ -1,19 +1,23 @@
 <script>
-       import '../scss/styles.scss';
+       import '../../scss/styles.scss';
        import * as bootstrap from 'bootstrap';
-       import Sidenav from './Sidenav.svelte';
+       import Sidenav from '$lib/Sidenav.svelte';
        import { selectedDate, cal } from '$lib/calendarStore.js';
        import axios from 'axios';
-       import { dev } from '$app/environment';
+       //import { dev } from '$app/environment';
        import { goto } from '$app/navigation';
        import { onMount } from 'svelte';
        import { searchString, searchResults } from '$lib/searchStore.js';
        import * as TinyMDE from 'tiny-markdown-editor';
-       import '../../node_modules/tiny-markdown-editor/dist/tiny-mde.css';
+       import '../../../node_modules/tiny-markdown-editor/dist/tiny-mde.css';
+       import { readingMode } from '$lib/settingsStore';
+       //import { read } from '$app/server';
+       import { API_URL } from '$lib/APIurl.js';
+       import DatepickerLogic from '$lib/datepickerLogic.svelte';
 
-       let API_URL = dev
+       /*let API_URL = dev
                ? `${window.location.origin.replace(/:5173.*$/gm, '')}:8000`
-               : window.location.pathname.replace(/\/+$/, '');
+               : window.location.pathname.replace(/\/+$/, '');*/
 
        axios.interceptors.request.use((config) => {
                config.withCredentials = true;
@@ -57,7 +61,6 @@
                });
 
                getLog();
-               loadMarkedDays();
        });
 
        $effect(() => {
                loading = false;
        });
 
-       $effect(() => {
-               if ($cal.currentMonth || $cal.currentYear) {
-                       loadMarkedDays();
-               }
-       });
-
-       let lastMonth = $cal.currentMonth - 1;
-       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') {
                                toast.show();
                        });
        }
+
+       //#TODO Muss in die separate /read page (diese hier in /write umbenennen)
+       let isLoadingMonthForReading = false;
+       function loadMonthForReading() {
+               if (isLoadingMonthForReading) {
+                       return;
+               }
+               isLoadingMonthForReading = true;
+
+               axios
+                       .get(API_URL + '/logs/loadMonthForReading', {
+                               params: {
+                                       month: $cal.currentMonth + 1,
+                                       year: $cal.currentYear
+                               }
+                       })
+                       .then((response) => {
+                               readingData = response.data;
+                       })
+                       .catch((error) => {
+                               console.error(error);
+                       })
+                       .finally(() => {
+                               isLoadingMonthForReading = false;
+                       });
+       }
 </script>
 
+<DatepickerLogic />
 <svelte:window onkeydown={on_key_down} onkeyup={on_key_up} />
 
 <!-- shown on small Screen, when triggered -->
                <Sidenav {search} />
        </div>
 
-       <!-- Center -->
-       <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 textAreaHeader">
-                               <div class="flex-fill textAreaDate">
-                                       {$selectedDate.toLocaleDateString('locale', { weekday: 'long' })}<br />
-                                       {$selectedDate.toLocaleDateString('locale', {
-                                               day: '2-digit',
-                                               month: '2-digit',
-                                               year: 'numeric'
-                                       })}
+       {#if !$readingMode}
+               <!-- Center -->
+               <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 textAreaHeader">
+                                       <div class="flex-fill textAreaDate">
+                                               {$selectedDate.toLocaleDateString('locale', { weekday: 'long' })}<br />
+                                               {$selectedDate.toLocaleDateString('locale', {
+                                                       day: '2-digit',
+                                                       month: '2-digit',
+                                                       year: 'numeric'
+                                               })}
+                                       </div>
+                                       <div class="flex-fill textAreaWrittenAt">
+                                               <div class={logDateWritten ? '' : 'opacity-50'}>Geschrieben am:</div>
+                                               {logDateWritten}
+                                       </div>
+                                       <div class="textAreaHistory">history</div>
+                                       <div class="textAreaDelete">delete</div>
                                </div>
-                               <div class="flex-fill textAreaWrittenAt">
-                                       <div class={logDateWritten ? '' : 'opacity-50'}>Geschrieben am:</div>
-                                       {logDateWritten}
-                               </div>
-                               <div class="textAreaHistory">history</div>
-                               <div class="textAreaDelete">delete</div>
-                       </div>
-                       <!-- <textarea
+                               <!-- <textarea
                                bind:value={currentLog}
                                oninput={handleInput}
                                class="form-control {currentLog !== savedLog ? 'notSaved' : ''}"
                                rows="10"
                        ></textarea> -->
-                       <div id="log" class="focus-ring">
-                               <div id="toolbar"></div>
-                               <div id="editor"></div>
+                               <div id="log" class="focus-ring">
+                                       <div id="toolbar"></div>
+                                       <div id="editor"></div>
+                               </div>
+                               {$selectedDate}<br />
+                               {lastSelectedDate}
                        </div>
-                       {$selectedDate}<br />
-                       {lastSelectedDate}
                </div>
-       </div>
 
-       <div id="right">Right</div>
+               <div id="right">Right</div>
+       {:else}
+               <div class="w-100">
+                       {#each readingData as log}
+                               <div class="card">
+                                       <div class="card-header">{log.day} | {log.date_written}</div>
+                                       <div class="card-body">
+                                               {@html log.text}
+                                       </div>
+                               </div>
+                       {/each}
+               </div>
+       {/if}
 
        <div class="toast-container position-fixed bottom-0 end-0 p-3">
                <div
git clone https://git.99rst.org/PROJECT