From: PhiTux <redacted>
Date: Wed, 5 Mar 2025 11:54:29 +0000 (+0100)
Subject: added possitiblity to reload all images instead of autoloading
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=df8546d16e6de74891538216ebecacf73f40af25;p=DailyTxT.git

added possitiblity to reload all images instead of autoloading
---

diff --git a/frontend/src/lib/settingsStore.js b/frontend/src/lib/settingsStore.js
index 2e30ae0..8258716 100644
--- a/frontend/src/lib/settingsStore.js
+++ b/frontend/src/lib/settingsStore.js
@@ -5,4 +5,5 @@ export const readingMode = writable(false);
 export const useTrianglify = writable(true);
 export const trianglifyOpacity = writable(0.4);
 export const trianglifyColor = writable('');
-export const backgroundColor = writable('');
\ No newline at end of file
+export const backgroundColor = writable('');
+export const autoLoadImages = writable(true);
\ No newline at end of file
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 24ac8ec..bc6692d 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -11,7 +11,7 @@
 	import { page } from '$app/state';
 	import { API_URL } from '$lib/APIurl.js';
 	import trianglify from 'trianglify';
-	import { useTrianglify, trianglifyOpacity } from '$lib/settingsStore.js';
+	import { useTrianglify, trianglifyOpacity, autoLoadImages } from '$lib/settingsStore.js';
 
 	import {
 		faRightFromBracket,
@@ -108,21 +108,18 @@
 				>
 
 				<div class="form-check form-switch d-flex flex-row">
-					<label class="me-3" for="flexSwitchCheckDefault"><Fa icon={faPencil} size="1.5x" /></label
-					>
+					<label class="me-3" for="selectMode"><Fa icon={faPencil} size="1.5x" /></label>
 					<div class="form-check form-switch">
 						<input
 							class="form-check-input"
 							bind:checked={$readingMode}
 							type="checkbox"
 							role="switch"
-							id="flexSwitchCheckDefault"
+							id="selectMode"
 							style="transform: scale(1.3);"
 						/>
 					</div>
-					<label class="ms-2" for="flexSwitchCheckDefault"
-						><Fa icon={faGlasses} size="1.5x" /></label
-					>
+					<label class="ms-2" for="selectMode"><Fa icon={faGlasses} size="1.5x" /></label>
 				</div>
 			</div>
 
@@ -208,7 +205,7 @@
 								data-bs-smooth-scroll="true"
 								id="settings-content"
 							>
-								<div id="appearance"><h4>Aussehen</h4></div>
+								<h3 id="appearance" class="text-primary">Aussehen</h3>
 								<div id="lightdark">
 									<h5>Light/Dark-Mode</h5>
 									Bla<br />
@@ -239,7 +236,35 @@
 									</div>
 								</div>
 
-								<div id="functions"><h4>Funktionen</h4></div>
+								<h3 id="functions" class="text-primary">Funktionen</h3>
+
+								<div id="autoLoadImages">
+									<h5>Bilder automatisch laden</h5>
+									<ul>
+										<li>
+											Beim Laden eines Textes können hochgeladene Bilder (sofern vorhanden)
+											automatisch geladen werden. <em>Erhöhter Datenverbrauch!</em>
+										</li>
+										<li>Alternativ wird ein Button zum Nachladen aller Bilder angezeigt.</li>
+									</ul>
+
+									<div class="form-check form-switch">
+										<input
+											class="form-check-input"
+											bind:checked={$autoLoadImages}
+											type="checkbox"
+											role="switch"
+											id="autoLoadImagesSwitch"
+										/>
+										<label class="form-check-label" for="autoLoadImagesSwitch">
+											{#if $autoLoadImages}
+												Bilder werden automatisch geladen
+											{:else}
+												Bilder werden nicht automatisch geladen
+											{/if}</label
+										>
+									</div>
+								</div>
 
 								<div id="language">
 									<h5>Sprache</h5>
@@ -308,6 +333,17 @@
 </main>
 
 <style>
+	#settings-content > div {
+		background-color: #bdbdbd5d;
+		padding: 0.5rem;
+		border-radius: 10px;
+		margin-bottom: 1rem;
+	}
+
+	h3.text-primary {
+		font-weight: 700;
+	}
+
 	#trianglifyOpacity {
 		max-width: 300px;
 	}
diff --git a/frontend/src/routes/write/+page.svelte b/frontend/src/routes/write/+page.svelte
index 8837491..01ab16d 100644
--- a/frontend/src/routes/write/+page.svelte
+++ b/frontend/src/routes/write/+page.svelte
@@ -11,10 +11,11 @@
 	import '../../../node_modules/tiny-markdown-editor/dist/tiny-mde.css';
 	import { API_URL } from '$lib/APIurl.js';
 	import DatepickerLogic from '$lib/DatepickerLogic.svelte';
-	import { faCloudArrowUp, faTrash } from '@fortawesome/free-solid-svg-icons';
+	import { faCloudArrowUp, faCloudArrowDown, faTrash } from '@fortawesome/free-solid-svg-icons';
 	import Fa from 'svelte-fa';
 	import { v4 as uuidv4 } from 'uuid';
 	import { slide, fade } from 'svelte/transition';
+	import { autoLoadImages } from '$lib/settingsStore';
 
 	axios.interceptors.request.use((config) => {
 		config.withCredentials = true;
@@ -205,37 +206,59 @@
 				) {
 					images = [...images, file];
 
-					axios
-						.get(API_URL + '/logs/downloadFile', {
-							params: { uuid: file.uuid_filename },
-							responseType: 'blob',
-							signal: cancelDownload.signal
-						})
-						.then((response) => {
-							const url = URL.createObjectURL(new Blob([response.data]));
-							images = images.map((image) => {
-								if (image.uuid_filename === file.uuid_filename) {
-									image.src = url;
-									file.src = url;
-								}
-								return image;
-							});
-						})
-						.catch((error) => {
-							if (error.name == 'CanceledError') {
-								return;
-							}
-
-							console.error(error);
-							// toast
-							const toast = new bootstrap.Toast(document.getElementById('toastErrorLoadingFile'));
-							toast.show();
-						});
+					if ($autoLoadImages) {
+						loadImage(file);
+					}
 				}
 			});
 		}
 	});
 
+	function loadImage(file) {
+		images.map((image) => {
+			if (image.uuid_filename === file.uuid_filename) {
+				image.loading = true;
+			}
+			return image;
+		});
+
+		axios
+			.get(API_URL + '/logs/downloadFile', {
+				params: { uuid: file.uuid_filename },
+				responseType: 'blob',
+				signal: cancelDownload.signal
+			})
+			.then((response) => {
+				const url = URL.createObjectURL(new Blob([response.data]));
+				images = images.map((image) => {
+					if (image.uuid_filename === file.uuid_filename) {
+						image.src = url;
+						file.src = url;
+						image.loading = false;
+					}
+					return image;
+				});
+			})
+			.catch((error) => {
+				if (error.name == 'CanceledError') {
+					return;
+				}
+
+				console.error(error);
+				// toast
+				const toast = new bootstrap.Toast(document.getElementById('toastErrorLoadingFile'));
+				toast.show();
+			});
+	}
+
+	function loadImages() {
+		images.forEach((image) => {
+			if (!image.src) {
+				loadImage(image);
+			}
+		});
+	}
+
 	async function saveLog() {
 		if (currentLog === savedLog) {
 			return true;
@@ -578,26 +601,39 @@
 			<div id="editor"></div>
 		</div>
 		{#if images.length > 0}
-			<div class="d-flex flex-row images mt-3">
-				{#each images as image (image.uuid_filename)}
-					<button
-						type="button"
-						onclick={() => {
-							viewImage(image.uuid_filename);
-						}}
-						class="imageContainer d-flex align-items-center position-relative"
-						transition:slide={{ axis: 'x' }}
-					>
-						{#if image.src}
-							<img transition:fade class="image" alt={image.filename} src={image.src} />
+			{#if !$autoLoadImages && !images.find((image) => image.src || image.loading)}
+				<div class="d-flex flex-row">
+					<button type="button" id="loadImageBtn" onclick={() => loadImages()}>
+						<Fa icon={faCloudArrowDown} class="me-2" size="2x" fw /><br />
+						{#if images.length === 1}
+							1 Bild laden
 						{:else}
-							<div class="spinner-border" role="status">
-								<span class="visually-hidden">Loading...</span>
-							</div>
+							{images.length} Bilder laden
 						{/if}
 					</button>
-				{/each}
-			</div>
+				</div>
+			{:else}
+				<div class="d-flex flex-row images mt-3">
+					{#each images as image (image.uuid_filename)}
+						<button
+							type="button"
+							onclick={() => {
+								viewImage(image.uuid_filename);
+							}}
+							class="imageContainer d-flex align-items-center position-relative"
+							transition:slide={{ axis: 'x' }}
+						>
+							{#if image.src}
+								<img transition:fade class="image" alt={image.filename} src={image.src} />
+							{:else}
+								<div class="spinner-border" role="status">
+									<span class="visually-hidden">Loading...</span>
+								</div>
+							{/if}
+						</button>
+					{/each}
+				</div>
+			{/if}
 		{/if}
 		{$selectedDate}<br />
 		{lastSelectedDate}
@@ -859,6 +895,14 @@
 </div>
 
 <style>
+	#loadImageBtn {
+		padding: 0.5rem 1rem;
+		border: none;
+		margin-top: 0.5rem;
+		border-radius: 5px;
+		transition: all ease 0.2s;
+	}
+
 	.carousel-item > img {
 		transition: all ease 0.3s;
 	}