Set name and label at creation of client. Fixes #48 (#49)

* Set name and label at creation of client. Fixes #48

Changes behaviour of the add button from directly creating an
configuration to directing the user to an "create configuration" view.

If no name is given the default name is used same way as before.
This means that the go backend works with the old frontend as well with the new.

* Follow best practice in writing json.

Also handle err.

* 2 Bug fixes.

1. Fix bug introduced in last commit.
Don't try to json encode data that is already encoded.

2. Honor --max-number-client-config
When the creation moved from Clients.svelte to NewClient.svelte the
check in returned json for errors got lost. Now it is back.

ui/src/App.svelte

@@ -9,6 +9,7 @@
   import Clients from "./Clients.svelte";
   import EditClient from "./EditClient.svelte";
   import Nav from "./Nav.svelte";
+  import NewClient from "./NewClient.svelte";
 
   import Cookie from "cookie-universal";
   const cookies = Cookie();
@@ -42,6 +43,7 @@ footer {
     <main role="main" class="container">
       <div>
         <Route path="client/:clientId" component="{EditClient}" />
+        <Route path="newclient/" component="{NewClient}" />
         <Route path="about" component="{About}" />
         <Route path="/"><Clients user="{user}" /></Route>
       </div>

ui/src/Clients.svelte

@@ -1,7 +1,8 @@
 <script>
   import Fab, {Label, Icon} from '@smui/fab';
   import { onMount } from 'svelte';
-	import Client from './Client.svelte';
+  import Client from './Client.svelte';
+  import { link,navigate } from "svelte-routing";
 
   export let user;
 
@@ -14,22 +15,9 @@
     console.log("Fetched clients", clients);
   }
 
-  async function handleNewClick(event) {
-    const res = await fetch(clientsUrl, {
-      method: "POST",
-    })
-      .then(response => {
-        return response.json()
-    })
-    .then(data => {
-      if (typeof data.Error != "undefined") {
-          console.log(data.Error);
-          alert(data.Error);
-    } else {
-        console.log("New client added", data);
-    }
-  });
-    await getClients();
+
+  function onCreateNewClient() {
+    navigate("/newclient", { replace: true });
   }
 
 
@@ -97,7 +85,7 @@ padding: 0;
       {/each}
 
       <div class="newClient">
-        <Fab color="primary" on:click={handleNewClick}><Icon class="material-icons">add</Icon></Fab>
+        <Fab color="primary" on:click={onCreateNewClient}><Icon class="material-icons">add</Icon></Fab>
       </div>
 
 

ui/src/NewClient.svelte

@@ -0,0 +1,85 @@
+<script>
+  import Fab, {Label, Icon} from '@smui/fab';
+  import Dialog, {Actions, InitialFocus} from '@smui/dialog';
+  import Textfield, {Input, Textarea} from '@smui/textfield';
+  import HelperText from '@smui/textfield/helper-text/index';
+  import Button, {Group, GroupItem} from '@smui/button';
+  import Paper, {Title, Subtitle, Content} from '@smui/paper';
+
+  import Cookie from "cookie-universal";
+  import { onMount } from 'svelte';
+  import { link, navigate } from "svelte-routing";
+
+  const user = Cookie().get("wguser", { fromRes: true});
+
+  let clientsUrl = "/api/v1/users/" + user + "/clients";
+
+  let client = {};
+  let clientName = "";
+  let clientNotes = "";
+  let deleteDialog;
+
+  async function handleSubmit(event) {
+    client.Name = clientName;
+    client.Notes = clientNotes;
+    const res = await fetch(clientsUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(client),
+    })
+      .then(response => {
+        return response.json();
+    })
+    .then(data => {
+      if (typeof data.Error != "undefined") {
+          console.log(data.Error);
+          alert(data.Error);
+      } else {
+        console.log("New client added", data);
+      }
+    });
+    navigate("/", { replace: true });
+  };
+
+
+  function handleBackClick(event) {
+    navigate("/", { replace: true });
+  }
+
+</script>
+
+<style>
+  .back {
+    position: fixed;
+    left: 10px;
+    top: 70px;
+  }
+</style>
+
+<div class="back">
+<Fab color="primary" on:click={handleBackClick}><Icon class="material-icons">arrow_back</Icon></Fab>
+</div>
+
+<h3 class="mdc-typography--headline3"><small>Create New Device Configuration</small></h3>
+
+<div class="container">
+
+
+  <form on:submit|preventDefault={handleSubmit}>
+
+    <div class="margins">
+      <Textfield input$id="name" bind:value={clientName} variant="outlined" label="Client Name" input$aria-controls="client-name" input$aria-describedby="client-name-help" />
+      <HelperText id="client-name-help">Friendly name of client / device</HelperText>
+    </div>
+
+    <div class="margins">
+      <Textfield input$id="notes" fullwidth textarea bind:value={clientNotes} label="Label" input$aria-controls="client-notes" input$aria-describedby="client-notes-help" />
+      <HelperText id="client-notes-help">Notes about the client.</HelperText>
+    </div>
+
+    <Button variant="raised"><Label>Create</Label></Button>
+  </form>
+</div>
+