chartmaker-fe/src/ChartCreation.svelte

<script>
  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',
     'would eat a pipebomb', 'wouldn\'t eat a pipebomb'],
    ['knows what sex is', 'doesn\'t know what sex is',
     'has sex', 'doesn\'t have sex'],
    ['doesn\'t want to cause chaos', 'wants to cause chaos',
     'causes chaos', 'doesn\'t cause chaos'],
    ['lawful', 'chaotic',
     'good', 'evil'],
    ['women want me', 'women don\'t want me',
     'fish want me', 'fish don\'t want me'],
  ];

  let example = [];

  onMount(() => {
    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}),
      });

      const code = await response.text();
      currentChartID.set(code);
      window.location.hash = '#' + code;
    } catch(err) {
      disableButton = false;
      error = err.toString();
    }
  }
</script>

<style>
  #form {
    text-align: center;
		max-width: 680px;
		margin: 0 auto;
  }

  #preview {
    text-align: center;
    display: flex;
    width: 100%;
    justify-content: center;
    max-height: 512px;
  }
  #previewcontainer {
    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">
  let's make a chart!

  <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] || ''} 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] || ''} disabled={disableButton} />
    <TextField bind:value={bot} placeholder={example[3] || ''} disabled={disableButton} />
  </FormField>

  <FormField
    name="Font Size"
    help="Adjust if necessary"
  >
    <Slider
      bind:value={fontSize}
      min={8}
      max={20}
      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 on:click={trySubmit} disabled={disableButton}>
      <div style="width: 16px; height: 16px; display: block-inline; padding-right: 6px;"><IoMdCheckmark/></div> create!
    </Button>
  </div>
</div>

<div id="preview">
  <div id="previewcontainer">
    {#key top + left + right + bot + fontSize} <!-- awful hack -->
      <Chart topText={top} leftText={left} rightText={right} bottomText={bot} fontSize={fontSize}/>
    {/key}
  </div>
</div>