|
|
|
@ -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>
|
|
|
|
|