added possitiblity to reload all images instead of autoloading

diff --git a/frontend/src/lib/settingsStore.js b/frontend/src/lib/settingsStore.js
index 2e30ae0937ef599d00477cab91ca8f82cdb371d3..82587168dfc608606f660bc1211147d0e97075e6 100644 (file)
--- 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 24ac8ecc19de406247588a0069df9c44e6716308..bc6692d2b5e415d42af1d830ca624f72a065edee 100644 (file)
--- 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 88374913dcea654619f97f59ccaa1f0e72055593..01ab16d43151056d5014ce812657f9d66603b1c6 100644 (file)
--- 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;
        }