From: PhiTux Date: Tue, 11 Feb 2025 18:30:59 +0000 (+0100) Subject: progress in image viewing X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=1a455934efaad568ebec7064cfe6026e99ef740a;p=DailyTxT.git progress in image viewing --- diff --git a/backend/server/routers/logs.py b/backend/server/routers/logs.py index 7027a2b..bb0e0b6 100644 --- a/backend/server/routers/logs.py +++ b/backend/server/routers/logs.py @@ -33,7 +33,7 @@ async def saveLog(log: Log, cookie = Depends(users.isLoggedIn)): # move old log to history if "days" in content.keys(): for dayLog in content["days"]: - if dayLog["day"] == day: + if dayLog["day"] == day and "text" in dayLog.keys(): historyVersion = 0 if "history" not in dayLog.keys(): dayLog["history"] = [] @@ -92,6 +92,8 @@ async def getLog(date: str, cookie = Depends(users.isLoggedIn)): for dayLog in content["days"]: if dayLog["day"] == day: enc_key = security.get_enc_key(cookie["user_id"], cookie["derived_key"]) + text = "" + date_written = "" if "text" in dayLog.keys(): text = security.decrypt_text(dayLog["text"], enc_key) date_written = security.decrypt_text(dayLog["date_written"], enc_key) diff --git a/frontend/src/routes/write/+page.svelte b/frontend/src/routes/write/+page.svelte index f082f12..7ecad18 100644 --- a/frontend/src/routes/write/+page.svelte +++ b/frontend/src/routes/write/+page.svelte @@ -46,6 +46,8 @@ } ); + let cancelDownload = new AbortController(); + let tinyMDE; onMount(() => { $readingDate = null; // no reading-highlighting when in write mode @@ -83,6 +85,9 @@ images = []; filesOfDay = []; + cancelDownload.abort(); + cancelDownload = new AbortController(); + clearTimeout(timeout); const result = getLog(); if (result) { @@ -199,8 +204,12 @@ !images.find((image) => image.uuid_filename === file.uuid_filename) ) { images = [...images, file]; + axios - .get(API_URL + '/logs/downloadFile', { params: { uuid: file.uuid_filename } }) + .get(API_URL + '/logs/downloadFile', { + params: { uuid: file.uuid_filename }, + signal: cancelDownload.signal + }) .then((response) => { images = images.map((image) => { if (image.uuid_filename === file.uuid_filename) { @@ -211,6 +220,10 @@ }); }) .catch((error) => { + if (error.name == 'CanceledError') { + return; + } + console.error(error); // toast const toast = new bootstrap.Toast(document.getElementById('toastErrorLoadingFile')); @@ -372,31 +385,73 @@ return `${parseFloat((bytes / Math.pow(k, i)).toFixed(0))} ${sizes[i]}`; } - async function downloadFile(uuid) { + function downloadFile(uuid) { // check if present in filesOfDay let file = filesOfDay.find((file) => file.uuid_filename === uuid); - if (!file.src) { - // download from server + if (file?.src) { + triggerAutomaticDownload(uuid); + return; + } - try { - const response = await axios.get(API_URL + '/logs/downloadFile', { - params: { uuid: uuid } + // download from server + + filesOfDay = filesOfDay.map((f) => { + if (f.uuid_filename === uuid) { + f.downloadProgress = 0; + } + return f; + }); + + const config = { + params: { uuid: uuid }, + onDownloadProgress: (progressEvent) => { + filesOfDay = filesOfDay.map((file) => { + if (file.uuid_filename === uuid) { + file.downloadProgress = Math.round(progressEvent.progress * 100); + } + return file; }); + }, + signal: cancelDownload.signal + }; + axios + .get(API_URL + '/logs/downloadFile', { + ...config + }) + .then((response) => { filesOfDay = filesOfDay.map((f) => { if (f.uuid_filename === uuid) { f.src = response.data.file; } return f; }); - } catch (error) { + }) + .catch((error) => { + if (error.name == 'CanceledError') { + return; + } + console.error(error); // toast const toast = new bootstrap.Toast(document.getElementById('toastErrorLoadingFile')); toast.show(); - } - } + }) + .finally(() => { + // remove progress + filesOfDay = filesOfDay.map((f) => { + if (f.uuid_filename === uuid) { + f.downloadProgress = -1; + } + return f; + }); + + triggerAutomaticDownload(uuid); + }); + } + function triggerAutomaticDownload(uuid) { + let file; for (let i = 0; i < filesOfDay.length; i++) { if (filesOfDay[i].uuid_filename === uuid) { file = filesOfDay[i]; @@ -445,9 +500,27 @@ }); } - let activeImage = $state(''); function viewImage(uuid) { - activeImage = uuid; + // set active image + document.querySelectorAll('.carousel-item').forEach((item) => { + item.classList.remove('active'); + if ( + item.id === + 'carousel-item-' + images.findIndex((image) => image.uuid_filename === uuid) + ) { + item.classList.add('active'); + } + }); + // set active image-button-indicator + document.querySelectorAll('.carousel-button').forEach((button) => { + button.classList.remove('active'); + if ( + button.id === + 'carousel-button-' + images.findIndex((image) => image.uuid_filename === uuid) + ) { + button.classList.add('active'); + } + }); const modal = new bootstrap.Modal(document.getElementById('modalImages')); modal.show(); @@ -478,59 +551,59 @@ -
+
-
-
-
- {$selectedDate.toLocaleDateString('locale', { weekday: 'long' })}
- {$selectedDate.toLocaleDateString('locale', { - day: '2-digit', - month: '2-digit', - year: 'numeric' - })} -
-
-
Geschrieben am:
- {logDateWritten} -
-
history
-
delete
+ +
+
+ {$selectedDate.toLocaleDateString('locale', { weekday: 'long' })}
+ {$selectedDate.toLocaleDateString('locale', { + day: '2-digit', + month: '2-digit', + year: 'numeric' + })}
-
-
-
+
+
Geschrieben am:
+ {logDateWritten}
- {#if images.length > 0} -
- {#each images as image (image.uuid_filename)} - - {/each} -
- {/if} - {$selectedDate}
- {lastSelectedDate} +
history
+
delete
+
+
+
+
+ {#if images.length > 0} +
+ {#each images as image (image.uuid_filename)} + + {/each} +
+ {/if} + {$selectedDate}
+ {lastSelectedDate} +