feat: Enhance hash based routing

csaf-poc · Oct 2, 2023 · 4a4233d · 4a4233d
1 parent a2d1d6e
commit 4a4233d
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 26 deletions.
diff --git a/src/lib/singleview/LoadFromURL.svelte b/src/lib/singleview/LoadFromURL.svelte
@@ -0,0 +1,57 @@
+<!--
+ This file is Free Software under the MIT License
+ without warranty, see README.md and LICENSES/MIT.txt for details.
+
+ SPDX-License-Identifier: MIT
+
+ SPDX-FileCopyrightText: 2023 German Federal Office for Information Security (BSI) <https://www.bsi.bund.de>
+ Software-Engineering: 2023 Intevation GmbH <https://intevation.de
+-->
+
+<script lang="ts">
+  import { appStore } from "$lib/store";
+  import { loadSingleCSAF } from "$lib/urlloader";
+  let URL = "";
+  const load = () => {
+    window.location.hash = `#/single?q=${URL}`;
+    loadSingleCSAF(URL);
+  };
+  const keydown = (e: KeyboardEvent) => {
+    if (e.key === "Enter") {
+      load();
+    }
+  };
+</script>
+
+<div class="row">
+  <div class="col">
+    <div style="display:flex">
+      <button class="loadbutton" on:click={load}><i class="bx bx-book-open" />URL</button>
+      <input class="url" type="text" bind:value={URL} on:keydown={keydown} />
+    </div>
+  </div>
+</div>
+{#if $appStore.ui.errorMsg}
+  <div class="row">
+    <div class="col"><div class="errors text-error">{$appStore.ui.errorMsg}</div></div>
+  </div>
+{/if}
+
+<style>
+  .errors {
+    margin-left: 200px;
+    font-size: x-large;
+    font-weight: bold;
+  }
+  .loadbutton {
+    width: 200px;
+    height: 50px;
+    font-size: large;
+  }
+  .bx-book-open {
+    margin-right: 1rem;
+  }
+  .url {
+    margin-left: 1rem;
+  }
+</style>
diff --git a/src/lib/singleview/SingleView.svelte b/src/lib/singleview/SingleView.svelte
@@ -18,9 +18,7 @@
   import Upload from "./Upload.svelte";
   import ProductTree from "./producttree/ProductTree.svelte";
   import Back from "../Back.svelte";
-  $: isDocumentASecurityAdvisory =
-    $appStore.doc &&
-    $appStore.doc[CSAFDocProps.CATEGORY] === DocumentCategory.CSAF_SECURITY_ADVISORY;
+  import LoadFromUrl from "./LoadFromURL.svelte";
 </script>
 
 <div class="row">
@@ -31,6 +29,7 @@
     <Droparea />
   </div>
 </div>
+<LoadFromUrl />
 {#if $appStore.doc}
   <div class="row">
     <div class="col">

diff --git a/src/lib/urlloader.ts b/src/lib/urlloader.ts
@@ -0,0 +1,25 @@
+import { appStore } from "$lib/store";
+import { convertToDocModel } from "$lib/singleview/docmodel/docmodel";
+
+async function loadSingleCSAF(url: string) {
+  appStore.setErrorMsg("");
+  appStore.reset();
+  try {
+    const response = await fetch(`${url}`);
+    if (response.ok) {
+      const csafDoc = await response.json();
+      appStore.clearUploadedFile();
+      const docModel = convertToDocModel(csafDoc);
+      appStore.setDocument(docModel);
+    }
+    if (response.status === 404) {
+      appStore.setErrorMsg("The resource you requested was not found on the server.");
+    }
+  } catch (error) {
+    appStore.setErrorMsg(
+      "Failed to load from URL. The server may be unreachable or the resource cannot be accessed due to CORS restrictions."
+    );
+  }
+}
+
+export { loadSingleCSAF };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -15,37 +15,19 @@
   import { page } from "$app/stores";
   import SingleView from "$lib/singleview/SingleView.svelte";
   import FeedView from "$lib/feedview/FeedView.svelte";
-  import { convertToDocModel } from "$lib/singleview/docmodel/docmodel";
+  import { loadSingleCSAF } from "$lib/urlloader";
+
   /*global __APP_VERSION__*/
   const version: string = __APP_VERSION__;
-  const externalReference = browser && /#\/\?q=/.test($page.url.hash);
+  const externalReference =
+    browser && (/#\/single\?q=/.test($page.url.hash) || /#\/feed\?q=/.test($page.url.hash));
   const MODE = {
     SINGLE: "Switch to ROLIE-feed",
     FEED: "Switch to single view"
   };
   $: mode = $appStore.ui.appMode;
-  async function loadSingleCSAF(url: string) {
-    appStore.setErrorMsg("");
-    appStore.reset();
-    try {
-      const response = await fetch(`${url}`);
-      if (response.ok) {
-        const csafDoc = await response.json();
-        appStore.clearUploadedFile();
-        const docModel = convertToDocModel(csafDoc);
-        appStore.setDocument(docModel);
-      }
-      if (response.status === 404) {
-        appStore.setErrorMsg("The resource you requested was not found on the server.");
-      }
-    } catch (error) {
-      appStore.setErrorMsg(
-        "Failed to load from URL. The server may be unreachable or the resource cannot be accessed due to CORS restrictions."
-      );
-    }
-  }
   $: if (externalReference) {
-    const URL = $page.url.hash.replace("#/?q=", "");
+    const URL = $page.url.hash.replace("#/single?q=", "");
     loadSingleCSAF(URL);
   }
   const switchView = () => {