displaying and submitting scrunklos

src/ChartEdit.svelte

@@ -3,10 +3,11 @@
   import IoMdLink from 'svelte-icons/io/IoMdLink.svelte'
   import IoMdAlert from 'svelte-icons/io/IoMdAlert.svelte'
   import { writeText } from 'clipboard-polyfill';
-  import { Button, TextField, Loading } from 'attractions';
+  import { Button, TextField, Loading, Popover, PopoverButton, H2, FormField, FileInput, FileTile, Slider } from 'attractions';
   import Chart from './Chart.svelte';
   import { onMount } from 'svelte';
   import { currentChartID } from './stores';
+  import { writable } from 'svelte/store';
 
   let isLoaded = false;
   let error = null;
@@ -17,12 +18,24 @@
   let right = '';
   let bot = '';
 
-  let images = [];
+  let images = writable([]);
+  let currentImage = {
+    file: null,
+    name: '',
+    x: 0.5,
+    y: 0.5
+  };
+
+  let upload = null;
+  let s;
+
+  let submitError = null;
 
   onMount(() => {
-    let s = new WebSocket('ws://localhost:5252/connect?id=' + $currentChartID);
+    s = new WebSocket('ws://localhost:5252/connect?id=' + $currentChartID);
     s.addEventListener('message', (e) => {
       let data = JSON.parse(e.data);
+      console.log(data);
       if (!isLoaded) {
         name = data.name || '';
         top = data.topText || '';
@@ -31,13 +44,50 @@
         bot = data.bottomText || '';
         isLoaded = true;
       } else {
-        images.push(...data);
+        for (const img of data) {
+          img.file = 'http://localhost:5252/img/' + img.file;
+        }
+        images.update(imgs => [...imgs, ...data]);
       }
     });
     s.addEventListener('error', (e) => {
       error = e;
     });
   });
+
+  let submitting = false;
+
+  async function submitImage() {
+    submitting = true;
+    let formData = new FormData();
+    formData.append('id', $currentChartID);
+    formData.append('name', currentImage.name);
+    formData.append('x', currentImage.x);
+    formData.append('y', currentImage.y);
+    formData.append('icon', upload);
+
+    try {
+      const response = await fetch('http://localhost:5252/add', {
+        method: 'POST',
+        mode: 'cors',
+        body: formData,
+      });
+
+      if (response.ok) {
+        submitting = false;
+        currentImage = {file: null, name: '', x: 0.5, y: 0.5}
+      } else {
+        submitting = false;
+        if (response.body) {
+          submitError = response.statusText + ': ' + await response.text();
+        } else {
+          submitError = response.statusText;
+        }
+      }
+    } catch(err) {
+      submitting = false;
+    }
+  }
 </script>
 
 <style>
@@ -49,7 +99,7 @@
   }
   #theeverything {
     text-align: center;
-		max-width: 680px;
+		/*max-width: 680px;*/
 		margin: 0 auto;
   }
   .center {
@@ -57,8 +107,46 @@
     display: flex;
     justify-content: center
   }
+
+  #chart {
+    width: 512px;
+    height: auto;
+  }
+
+  #chart * {
+    position: relative;
+  }
+
+  #canvas {
+    position: absolute;
+  }
+
+  #panels {
+    display: flex;
+    justify-content: center;
+    gap: 0.5em;
+    z-index: -9999;
+  }
+
+  .img-container {
+    width: 64px;
+    height: 64px;
+    display: inline-block;
+  }
+  .img-file {
+    width: auto;
+    height: 100%;
+  }
+
+  @media (max-width: 650px) {
+    #panels {
+      flex-direction: column;
+    }
+  }
 </style>
 
+
+
 <div id="theeverything">
   <div class="center">
     <div id="clipboard">
@@ -84,9 +172,92 @@
     <br><br><br>
     <Loading/>
   {:else if isLoaded}
-    {#key name + top + left + right + bot}
+    <div class="center">
-      {name}
+      <div>
-      <Chart topText={top} leftText={left} rightText={right} bottomText={bot} fontSize=14/>
+        {#key name}
-    {/key}
+          {name}
+        {/key}
+        <div id="panels">
+          <div id="chart">
+            {#key top + left + right + bot}
+              <div id="canvas"><Chart topText={top} leftText={left} rightText={right} bottomText={bot} fontSize=14/></div>
+            {/key}
+            {#each [...$images, currentImage] as img}
+              {#if img && img.file}
+                <div class="img" style="top: {Math.floor(img.y*512)}px; left: {Math.floor((img.x-0.5)*512)}px">
+                  <Popover>
+                    <div class="img-container">
+                      <img class="img-file" src="{img.file}" alt="{img.name}">
+                    </div>
+                    <div slot="popover-content">
+                      <PopoverButton>{img.name}</PopoverButton>
+                    </div>
+                  </Popover>
+                </div>
+              {/if}
+            {/each}
+          </div>
+          <div id="create">
+            <H2>add an image</H2>
+
+            <!-- svelte-ignore missing-declaration -->
+            <FileInput bind:value={upload} accept="image/*" max={1} on:change={() => {
+              const reader = new FileReader();
+              reader.onload = (e) => {currentImage.file = e.target.result}
+              reader.readAsDataURL(upload);
+            }}/>
+            {#if upload != null}
+              <FileTile file={upload} on:delete={() => upload = null}/>
+            {/if}
+            <br>
+            <FormField
+              name="Name"
+              help="what's their name?"
+            >
+              <TextField bind:value={currentImage.name} placeholder="scrunkly" />
+            </FormField>
+            <FormField
+              name="X Axis"
+            >
+              <Slider
+                bind:value={currentImage.x}
+                min={0}
+                max={1}
+                step={0.001}
+                tooltips="active"
+                ticks={{mode: 'step', step: 0.05, subDensity: 50}}
+              />
+            </FormField>
+            <FormField
+              name="Y Axis"
+            >
+              <Slider
+                bind:value={currentImage.y}
+                min={0}
+                max={1}
+                step={0.001}
+                tooltips="active"
+                ticks={{mode: 'step', step: 0.05, subDensity: 50}}
+              />
+            </FormField>
+
+            <div class="center">
+              <Button outline disabled={!(currentImage.name && currentImage.file) || submitting} on:click={submitImage}>
+                add
+              </Button>
+            </div>
+
+            {#if submitError}
+              <div class="center">
+                <div id="error">
+                  <div style="width: 16px; height: 16px; display: inline-block;"><IoMdAlert/></div>
+                  {submitError}
+                </div>
+              </div>
+            {/if}
+          </div>
+        </div>
+      </div>
+    </div>
   {/if}
 </div>