reimplemente routing custom

admin/Makefile

@@ -31,6 +31,7 @@ stop: ../iosdk/iosdk
 	$(MAKE) -C ../iosdk
 
 web/public/build/bundle.js: $(wildcard web/src/*.svelte)
+	echo "Checking you did not forget to do source ../source-me-first"
 	node -v | grep v12
 	cd web && npm install && npm run build
 

admin/web/package.json

@@ -1,6 +1,9 @@
 {
   "name": "svelte-app",
   "version": "1.0.0",
+  "description": "IO-SDK Admin",
+  "repository": "https://github.com/pagopa/io-sdk",
+  "license": "Apache-2.0",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
@@ -17,7 +20,6 @@
   },
   "dependencies": {
     "marked": "^1.1.1",
-    "sirv-cli": "^1.0.0",
-    "svelte-routing": "^1.4.2"
+    "sirv-cli": "^1.0.0"
   }
 }

admin/web/src/App.svelte

@@ -1,14 +1,62 @@
 <script>
+ import { parseURL, navigate, url } from './url.js'
+ import { onMount, onDestroy } from 'svelte'
+
+ import Cookiebar from './Cookiebar.svelte'
  import Header from './Header.svelte'
- import Body from './Body.svelte'
  import Footer from './Footer.svelte'
- import Cookiebar from './Cookiebar.svelte'
- </script>
+ import Menu from "./Menu.svelte";
+ import Home from "./Home.svelte";
+ import About from "./About.svelte";
+ import Devel from "./Devel.svelte";
+ import Debug from "./Debug.svelte";
+ import Send from "./Send.svelte";
+ import Ship from "./Ship.svelte";
+ import Import from "./Import.svelte";
+ 
+ let menu = ""
+ let key = ""
+ let api = ""
+
+onMount(() => {
+	[menu, key, api] = parseURL(location.href)
+	navigate(menu, key)
+})
+
+onDestroy(url.subscribe((href) => {
+	[menu, key, api] = parseURL(href)
+	console.log("menu=",menu, "key=", key, "api=", api)
+}))
+
+</script>
 
 <main>
 <div id="root">
 	<Header/>
-	<Body/>
+	<section class="row">
+	    <Menu />
+		<div class="col-9 col-md-offset-1 ">
+		  <div class="mr-1 pt-1 pb-1">
+			{#if menu == ""}
+			  <Home/>
+			{:else if menu=="about"}
+			  <About/>
+			{:else if menu=="ship"}
+			  <Ship {api}/>
+			{:else if menu=="send"}
+			  <Send {api} {key}/>
+			{:else if menu=="debug"}
+			  <Debug {api} {key}/>
+			{:else if menu=="import"}
+			  <Import {api} action="/util/import"/>
+			{:else if menu=="custom"}
+			  <Import {api} action="/iosdk/import"/>
+			{:else if menu=="devel"}
+			  <Devel {api} {key}/>
+			{/if}
+		  </div>
+		</div>
+	</section>	  
 	<Cookiebar/>
 	<Footer/>
 </div>

admin/web/src/Debug.svelte

@@ -1,9 +1,11 @@
 <script>
-  import { Link } from "svelte-routing";
   import { reload } from "./store";
   import { onMount } from "svelte";
+  import Link from './Link.svelte'
 
-  const cacheUrl = "http://localhost:3280/api/v1/web/guest/util/cache?";
+  export let api;
+
+  const cacheUrl = api + "/util/cache?";
   const scanUrl = cacheUrl + "scan="
   const cleanUrl = cacheUrl + "clean="
 
@@ -80,9 +82,7 @@
   {#if state.list}
     <ul>
       {#each state.list as key}
-        <li>
-          <Link to="debug/{window.btoa(key)}">{key}</Link>
-        </li>
+        <li><Link to="debug/{window.btoa(key)}" description={key}/></li>
       {/each}
     </ul>
     <p>Elements Found: #{state.list.length}</p>

admin/web/src/DebugData.svelte

@@ -5,7 +5,7 @@
 
   let state = {};
 
-  const url = "http://localhost:3280/api/v1/web/guest/util/cache";
+  const url = api + "/util/cache";
   let entry = window.atob(key);
 
   async function cache(action, entry) {

admin/web/src/Import.svelte

@@ -1,26 +1,31 @@
 <script>
-  export let action;
-
   import { onDestroy, onMount } from 'svelte'
   import { formData } from "./store";
   import ImportForm from "./ImportForm.svelte";
   import ImportData from "./ImportData.svelte";
 
-  const base = "http://localhost:3280/api/v1/web/guest/";
-  const url = base + action;
+  export let api;
+  export let action;
+
+  const storeURL = api + "/util/store"
+  const importURL = api + action;
 
   let message = "uploading...";
   let state
- 
+
+  onMount( () => { 
+    state = start() 
+  })
+
   async function start() {
     formData.set({})
-    return fetch(url)
+    return fetch(importURL)
       .then((res) => res.json())
       .catch((err) => { return { "error": err }})
   }
   
   async function save(data) {
-      await fetch(base + "util/store", {
+      await fetch(storeURL, {
         method: "POST",
         body: JSON.stringify({"data":data}),
         headers: { "Content-Type": "application/json" }
@@ -36,9 +41,6 @@
       });
 }
 
-onMount( () => { 
-  state = start() 
-})
 
 let unsubscribe = formData.subscribe(value => {
     console.log("subscribe")
@@ -58,7 +60,7 @@ onDestroy(unsubscribe)
     <div>loading...</div>
   {:then currState}
     {#if currState.form}
-    <ImportForm form={currState.form} {url} />
+    <ImportForm form={currState.form} {api} {action} />
     {:else if currState.data}
     <ImportData data={state.data} />
     <big><b>Import status: </b>{message}</big>

admin/web/src/ImportForm.svelte

@@ -1,15 +1,17 @@
 <script>
   import { formData } from "./store";
+
+  export let api;
+  export let action;
   export let form = {};
-  export let url;
 
-  const base = "http://localhost:3280/api/v1/web/guest";
-  const uploadUrl = base+"/util/upload";
+  const uploadURL = api+"/util/upload";
+  const importURL = api + action;
 
   let loading = false;
 
   async function parseForm() {
-    let submit = await fetch(uploadUrl, {
+    let submit = await fetch(uploadURL, {
       method: "POST",
       body: new FormData(document["_theForm_"])
     })
@@ -23,7 +25,7 @@
     // perform import
     if(data) {
       loading = true;
-      fetch(url, {
+      fetch(importURL, {
         method: "POST",
         body: JSON.stringify(data),
         headers: {
@@ -45,7 +47,7 @@
   }
 </script>
 
-<form name="_theForm_" action={uploadUrl} method="post" enctype="multipart/form-data">
+<form name="_theForm_" action={uploadURL} method="post" enctype="multipart/form-data">
   {#each form as field}
     {#if field.type == 'message'}
       <div class="callout">