submit chart metadata to backend

src/ChartCreation.svelte

@@ -2,7 +2,9 @@
   import { FormField, TextField, Button, Slider } from 'attractions';
   import { onMount } from 'svelte';
   import IoMdCheckmark from 'svelte-icons/io/IoMdCheckmark.svelte'
+  import IoMdAlert from 'svelte-icons/io/IoMdAlert.svelte'
   import Chart from './Chart.svelte';
+  import { currentChartID } from './stores';
 
   const examples = [
     ['wouldn\'t make a pipebomb', 'would make a pipebomb',
@@ -23,11 +25,35 @@
     example = examples[Math.floor(Math.random() * examples.length)];
   });
 
+  let error = '';
+
+  let name = '';
   let top = '';
   let left = '';
   let right = '';
   let bot = '';
   let fontSize = 12;
+
+  let disableButton = false;
+  async function trySubmit() {
+    disableButton = true;
+
+    try {
+      const response = await fetch('http://localhost:5252/create', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({name, top, left, right, bot}),
+      });
+
+      currentChartID.set(await response.text());
+    } catch(err) {
+      disableButton = false;
+      error = err.toString();
+    }
+  }
 </script>
 
 <style>
@@ -48,6 +74,15 @@
     width: 512px;
     height: auto;
   }
+
+  #error {
+    width: 400px;
+    background-color: rgba(255, 59, 59, 0.1);
+    border-radius: 20px;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+    text-align: left;
+    padding: 1em;
+  }
 </style>
 
 <div id="form">
@@ -55,20 +90,26 @@
 
   <br><br>
 
+  <FormField
+    name="Name"
+  >
+    <TextField bind:value={name} placeholder="scrunklo moral status" disabled={disableButton} />
+  </FormField>
+
   <FormField
     name="X Axis"
     help="Left to right"
   >
-    <TextField bind:value={left} placeholder={example[0] || ''} />
-    <TextField bind:value={right} placeholder={example[1] || ''} />
+    <TextField bind:value={left} placeholder={example[0] || ''} disabled={disableButton} />
+    <TextField bind:value={right} placeholder={example[1] || ''} disabled={disableButton} />
   </FormField>
 
   <FormField
     name="Y Axis"
     help="Top to bottom"
   >
-    <TextField bind:value={top} placeholder={example[2] || ''} />
-    <TextField bind:value={bot} placeholder={example[3] || ''} />
+    <TextField bind:value={top} placeholder={example[2] || ''} disabled={disableButton} />
+    <TextField bind:value={bot} placeholder={example[3] || ''} disabled={disableButton} />
   </FormField>
 
   <FormField
@@ -82,13 +123,23 @@
       step={1}
       tooltips="active"
       ticks={{mode: 'step', step: 1, subDensity: 100/(20-8)}}
+      disabled={disableButton}
     >
       <span slot="tooltip-content" let:value>{value}px</span>
     </Slider>
   </FormField>
 
+  {#if error}
+    <div style="width: 100%; display: flex; justify-content: center">
+      <div id="error">
+        <div style="width: 16px; height: 16px; display: inline-block;"><IoMdAlert/></div>
+        {error}
+      </div>
+    </div>
+  {/if}
+
   <div style="width: 100%; display: flex; justify-content: center">
-    <Button filled>
+    <Button filled on:click={trySubmit} disabled={disableButton}>
       <div style="width: 16px; height: 16px; display: block-inline; padding-right: 6px;"><IoMdCheckmark/></div> create!
     </Button>
   </div>