98 lines
3 KiB
Svelte
98 lines
3 KiB
Svelte
<script lang="ts">
|
|
import { page } from "$app/stores";
|
|
import ButtonMain from "$lib/ButtonMain.svelte";
|
|
import axios from "$lib/api";
|
|
import { onMount } from "svelte";
|
|
import type { Grid } from "$lib/types";
|
|
import { snakeToCamelCase } from "$lib/case";
|
|
import { createForm } from "svelte-forms-lib";
|
|
import * as yup from "yup";
|
|
|
|
let grid: Grid | null;
|
|
$: grid = null;
|
|
|
|
// form
|
|
const { form, errors, state, handleChange, handleSubmit } = createForm({
|
|
initialValues: {
|
|
width: "",
|
|
height: "",
|
|
},
|
|
validationSchema: yup.object().shape({
|
|
width: yup.number().positive().moreThan(3),
|
|
height: yup.number().positive().moreThan(3),
|
|
}),
|
|
onSubmit: (values) => {
|
|
submitPopulate(values);
|
|
},
|
|
});
|
|
|
|
function fetchData() {
|
|
try {
|
|
axios.get("grids/" + $page.params.id + "/").then((data) => {
|
|
grid = snakeToCamelCase(data.data);
|
|
});
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
}
|
|
|
|
function submitPopulate(values) {
|
|
try {
|
|
axios.patch("grids/" + $page.params.id + "/", {
|
|
width: values.width,
|
|
height: values.height,
|
|
});
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
}
|
|
|
|
onMount(() => {
|
|
fetchData();
|
|
});
|
|
</script>
|
|
|
|
<main>
|
|
{#if grid}
|
|
{#if grid.words.length == 0}
|
|
<form on:submit={handleSubmit}>
|
|
<div class="flex flex-row">
|
|
<div>
|
|
<label for="width" class="block">Ledander :</label>
|
|
<input
|
|
type="number"
|
|
name="width"
|
|
class="block"
|
|
bind:value={$form.width}
|
|
/>
|
|
{#if $errors.width}
|
|
<span class="text-red-500 text-sm"
|
|
>{$errors.width}</span
|
|
>
|
|
{/if}
|
|
</div>
|
|
<div>
|
|
<label for="height" class="block">Uhelder :</label>
|
|
<input
|
|
type="number"
|
|
name="height"
|
|
class="block"
|
|
bind:value={$form.height}
|
|
/>
|
|
{#if $errors.height}
|
|
<span class="text-red-500 text-sm"
|
|
>{$errors.height}</span
|
|
>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
class="bg-violet-600 hover:bg-violet-700 rounded-md text-white p-1 px-2 justify-center"
|
|
>Leuniañ ar gael</button
|
|
>
|
|
</form>
|
|
{/if}
|
|
{/if}
|
|
</main>
|