displaying and submitting scrunklos
This commit is contained in:
parent
a10bb8b974
commit
39c236e920
|
|
@ -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}
|
||||
{name}
|
||||
<Chart topText={top} leftText={left} rightText={right} bottomText={bot} fontSize=14/>
|
||||
{/key}
|
||||
<div class="center">
|
||||
<div>
|
||||
{#key name}
|
||||
{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>
|
||||
Loading…
Reference in New Issue