From 5e7ba770cdd7336759186aeb740d7b8425df04b4 Mon Sep 17 00:00:00 2001 From: Niko PLP Date: Wed, 31 Jul 2024 14:58:51 +0300 Subject: [PATCH] fix toasts --- ng-app/src/apps/SparqlQueryEditor.svelte | 2 +- ng-app/src/apps/SparqlUpdateEditor.svelte | 3 +- ng-app/src/lib/FullLayout.svelte | 26 ++-------- ng-app/src/lib/components/Message.svelte | 63 +++++++++++++++++++++++ ng-app/src/locales/en.json | 6 ++- ng-app/src/store.ts | 56 +++++++++++++------- 6 files changed, 110 insertions(+), 46 deletions(-) create mode 100644 ng-app/src/lib/components/Message.svelte diff --git a/ng-app/src/apps/SparqlQueryEditor.svelte b/ng-app/src/apps/SparqlQueryEditor.svelte index a835018..9f08198 100644 --- a/ng-app/src/apps/SparqlQueryEditor.svelte +++ b/ng-app/src/apps/SparqlQueryEditor.svelte @@ -52,7 +52,7 @@ let union = false; const run = async () => { try{ - reset_toasts(); + await reset_toasts(); results = await sparql_query($in_memory_discrete, union); } catch(e) { toast_error(display_error(e)); diff --git a/ng-app/src/apps/SparqlUpdateEditor.svelte b/ng-app/src/apps/SparqlUpdateEditor.svelte index 9bf78fb..fd6115f 100644 --- a/ng-app/src/apps/SparqlUpdateEditor.svelte +++ b/ng-app/src/apps/SparqlUpdateEditor.svelte @@ -38,7 +38,7 @@ }); const run = async () => { try{ - reset_toasts(); + await reset_toasts(); await sparql_update($in_memory_discrete); toast_success($t("app.sparql_update_editor.success")); } catch(e) { @@ -52,7 +52,6 @@
- {#each $toasts as toast, i} -
{if (toast.timer) {clearTimeout(toast.timer);}; remove_toast(i);}} - use:addLoaded on:loaded={()=>{if (toast.level=="success") {toast.timer = setTimeout(()=>{remove_toast(i);}, toast.timeout || 10000);}}} > - - - {toast.text} - -
+ {/each} {#if mobile}
diff --git a/ng-app/src/lib/components/Message.svelte b/ng-app/src/lib/components/Message.svelte new file mode 100644 index 0000000..3eacf1c --- /dev/null +++ b/ng-app/src/lib/components/Message.svelte @@ -0,0 +1,63 @@ + + + + +
{remove_toast(toast.i);}} + > + + + {toast.text} + +
\ No newline at end of file diff --git a/ng-app/src/locales/en.json b/ng-app/src/locales/en.json index c82ae57..3b111ee 100644 --- a/ng-app/src/locales/en.json +++ b/ng-app/src/locales/en.json @@ -33,10 +33,12 @@ "upload": "Upload file" }, "errors": { - "InvalidNuri": "Invalid NURI" + "InvalidNuri": "Invalid NURI", + "no_session": "No active session" }, "errors_details": { - "InvalidNuri": "The provided NextGraph URI is invalid" + "InvalidNuri": "The provided NextGraph URI is invalid", + "no_session": "Please refresh the page or close and reopen the app" }, "graph" : "Graph", "discrete" : "Document", diff --git a/ng-app/src/store.ts b/ng-app/src/store.ts index 5089f4e..e30d451 100644 --- a/ng-app/src/store.ts +++ b/ng-app/src/store.ts @@ -45,6 +45,7 @@ init({ }); export const display_error = (error: string) => { + if (e.message) return e.message; //console.log(error); // TODO: Check, if error tranlsation does not exist const parts = error.split(":"); @@ -70,36 +71,36 @@ export const select_default_lang = async () => { } } }; -/** - * { - * level:"error",//"warning","success","info" - * text: "" - * } - */ + export const toasts = writable([ // { // level:"error", // text: "this is a serious error", // }, // { + // level:"success", + // text: "this is a success story", + // timeout: 5000, + // }, + // { // level:"info", // text: "this is an information for you that is very long long long and so long it doesnt fit", // }, // { // level:"warning", // text: "this is a warning. be warned!", - // }, - // { - // level:"success", - // text: "this is a success story", - // timeout: 5000, // } - ]); -export const remove_toast = function(idx) { +export const remove_toast = function(toast) { toasts.update((old)=>{ - old.splice(idx,1); + for (const [index, value] of old.entries()) { + if (value.i == toast){ + let t = old.splice(index,1); + if (t.timer) {clearTimeout(t.timer);}; + break; + } + } return old; }); } @@ -111,10 +112,17 @@ export const toast = function(level, text) { }); } -export const reset_toasts = function() { - toasts.update((old)=>{ - return []; - }); +export const reset_toasts = async function() { + let count = get(toasts).length; + if (count) { + toasts.update((old)=>{ + for (let o of old) { + if (o.timer) clearTimeout(o.timer); + } + return []; + }); + await new Promise((resolve) => setTimeout(resolve, 500)); + } } export const toast_error = (text) => { @@ -386,6 +394,10 @@ export const digest_to_string = function(digest) { export const sparql_query = async function(sparql:string, union:boolean) { let session = get(active_session); if (!session) { + persistent_error(get(cur_branch), { + title: get(format)("doc.errors.no_session"), + desc: get(format)("doc.errors_details.no_session") + }); throw new Error("no session"); } let nuri = union ? undefined : "did:ng:"+get(cur_tab).branch.nuri; @@ -395,6 +407,10 @@ export const sparql_query = async function(sparql:string, union:boolean) { export const sparql_update = async function(sparql:string) { let session = get(active_session); if (!session) { + persistent_error(get(cur_branch), { + title: get(format)("doc.errors.no_session"), + desc: get(format)("doc.errors_details.no_session") + }); throw new Error("no session"); } let nuri = "did:ng:"+get(cur_tab).branch.nuri; @@ -466,6 +482,10 @@ export const branch_subscribe = function(nuri:string, in_tab:boolean) { //console.log("load down"); let session = get(active_session); if (!session) { + persistent_error(get(cur_branch), { + title: get(format)("doc.errors.no_session"), + desc: get(format)("doc.errors_details.no_session") + }); console.error("no session"); return; }