diff --git a/ng-app/src/apps/SparqlUpdateEditor.svelte b/ng-app/src/apps/SparqlUpdateEditor.svelte index b42eb726..6210dfaa 100644 --- a/ng-app/src/apps/SparqlUpdateEditor.svelte +++ b/ng-app/src/apps/SparqlUpdateEditor.svelte @@ -13,11 +13,14 @@ import { onMount, tick, onDestroy } from "svelte"; import { sparql_update, + toast_error, + toast_success } from "../store"; import { - in_memory_discrete, cur_tab + in_memory_discrete, open_viewer } from "../tab"; - import{ RocketLaunch } from "svelte-heros-v2"; + import{ Sun, RocketLaunch } from "svelte-heros-v2"; + import { t } from "svelte-i18n"; import { Button, Progressbar, Spinner, Alert } from "flowbite-svelte"; @@ -35,27 +38,38 @@ } }); const run = async () => { + try{ await sparql_update($in_memory_discrete); + toast_success($t("app.sparql_update_editor.success")); + } catch(e) { + toast_error(e); + } }
- +
\ No newline at end of file diff --git a/ng-app/src/lib/FullLayout.svelte b/ng-app/src/lib/FullLayout.svelte index ba4276f6..e6ba55c4 100644 --- a/ng-app/src/lib/FullLayout.svelte +++ b/ng-app/src/lib/FullLayout.svelte @@ -17,6 +17,7 @@ SidebarWrapper, Modal, Toggle, + Toast, } from "flowbite-svelte"; import { link, location, push } from "svelte-spa-router"; import MobileBottomBarItem from "./MobileBottomBarItem.svelte"; @@ -34,7 +35,7 @@ available_editors, available_viewers, set_editor, set_viewer, set_view_or_edit, toggle_live_edit, has_editor_chat, all_files_count, all_comments_count, nav_bar, save, hideMenu, show_modal_menu } from "../tab"; import { - active_session, redirect_after_login, + active_session, redirect_after_login, toasts, remove_toast } from "../store"; import ZeraIcon from "./ZeraIcon.svelte"; @@ -85,6 +86,9 @@ XMark, ArrowLeft, ArchiveBox, + CheckCircle, + XCircle, + ExclamationCircle, } from "svelte-heros-v2"; import NavBar from "./components/NavBar.svelte"; @@ -366,6 +370,27 @@ "mc":Sparkles, }; + const toast_color = { + "error":"red", + "warning":"orange", + "success":"green", + "info":"blue" + }; + + const toast_icon = { + "error": XCircle, + "warning": ExclamationCircle, + "success": CheckCircle, + "info": InformationCircle, + } + + const customEv = new CustomEvent('loaded', {}); + + async function addLoaded(node) { + await tick() + node.dispatchEvent(customEv) + } + let asideClass = "w-48"; let spanClass = "flex-1 ml-3 whitespace-nowrap"; let nonActiveClass = @@ -647,6 +672,15 @@ +{#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}
{#if !withoutNavBar} @@ -825,6 +859,7 @@
+
@@ -869,5 +904,4 @@ @apply inline-flex items-center border border-gray-200 text-base font-medium px-2 py-2 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 pr-3; } } - diff --git a/ng-app/src/locales/en.json b/ng-app/src/locales/en.json index 99358f34..90954562 100644 --- a/ng-app/src/locales/en.json +++ b/ng-app/src/locales/en.json @@ -1,4 +1,9 @@ { + "app": { + "sparql_update_editor" : { + "success": "SPARQL Update successful!" + } + }, "doc": { "doc": "Document", "protected_store": "Protected Profile", diff --git a/ng-app/src/store.ts b/ng-app/src/store.ts index 57c54eb0..c3043fa1 100644 --- a/ng-app/src/store.ts +++ b/ng-app/src/store.ts @@ -70,6 +70,62 @@ 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:"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) { + toasts.update((old)=>{ + old.splice(idx,1); + return old; + }); +} + +export const toast = function(level, text) { + toasts.update((old)=>{ + old.push({level,text}); + return old; + }); +} + +export const toast_error = (text) => { + toast("error", text); +} + +export const toast_info = (text) => { + toast("info", text); +} + +export const toast_warning = (text) => { + toast("warning", text); +} + +export const toast_success = (text) => { + toast("success", text); +} export const scanned_qr_code = writable(""); export const wallet_from_import = writable(null); @@ -324,8 +380,7 @@ export const digest_to_string = function(digest) { export const sparql_update = async function(sparql:string) { let session = get(active_session); if (!session) { - console.error("no session"); - return; + throw new Error("no session"); } let nuri = "did:ng:"+get(cur_tab).branch.nuri; await ng.sparql_update(session.session_id, nuri, sparql); diff --git a/ng-app/src/styles.css b/ng-app/src/styles.css index a974d0c4..95f2b59d 100644 --- a/ng-app/src/styles.css +++ b/ng-app/src/styles.css @@ -197,6 +197,13 @@ h1 { line-height: 1.1; } +.toast { + left: 50%; + transform: translateX(-50%); + z-index: 49; + cursor: pointer; +} + input, button { border-radius: 8px; diff --git a/ng-app/src/tab.ts b/ng-app/src/tab.ts index bb70af0d..7d5a77f4 100644 --- a/ng-app/src/tab.ts +++ b/ng-app/src/tab.ts @@ -481,6 +481,10 @@ export const set_view_or_edit = (val:boolean) => { }); } +export const open_viewer = () => { + set_view_or_edit(true); +} + export const cur_viewer = derived(cur_tab, ($cur_tab) => { let app_name = $cur_tab.graph_or_discrete ? $cur_tab.graph_viewer : $cur_tab.discrete_viewer; if (app_name) { diff --git a/ng-sdk-js/src/lib.rs b/ng-sdk-js/src/lib.rs index 4b03f757..2aa3cdbb 100644 --- a/ng-sdk-js/src/lib.rs +++ b/ng-sdk-js/src/lib.rs @@ -319,11 +319,14 @@ pub async fn sparql_update( session_id, }); - let _ = nextgraph::local_broker::app_request(request) + let res = nextgraph::local_broker::app_request(request) .await .map_err(|e: NgError| e.to_string())?; - - Ok(()) + if let AppResponse::V0(AppResponseV0::Error(e)) = res { + Err(e) + } else { + Ok(()) + } } #[cfg(wasmpack_target = "nodejs")]