editor: saving changes

frontend/src/App.svelte

@@ -8,15 +8,14 @@
 
   const tasksPromise: Promise<TasksFile> = loadTasks();
 
-  let selectedTask: string | null = null
+  let selectedTask: string | null = null;
-  let finalSelect: boolean = false
+  let finalSelect: boolean = false;
 
   function clickTask(e: CustomEvent<TaskDescriptor>) {
-    finalSelect = true
+    finalSelect = true;
   }
 
   const hash = window.location.hash.substr(1);
-
 </script>
 
 <style>
@@ -24,6 +23,7 @@
     text-align: center;
     max-width: 240px;
     margin: 0 auto;
+    min-height: 420px;
   }
 
   h1 {
@@ -41,14 +41,16 @@
 </style>
 
 <main>
-	{#if hash == "editor"}
+  {#if hash == 'editor'}
-		<TasksLoader promise={tasksPromise} let:data={t}>
+    <TasksLoader promise={tasksPromise} let:data={t}>
-			<Editor tasks={t} />
+      <Editor tasks={t} />
-		</TasksLoader>
+    </TasksLoader>
-	{:else}
+  {:else}
-	<TasksLoader promise={tasksPromise} let:data={t}>
+    <TasksLoader promise={tasksPromise} let:data={t}>
-		<TaskPanel bind:finalSelect={finalSelect} selectedTask={selectedTask} />
+      <TaskPanel bind:finalSelect {selectedTask} />
-		<Graph tasks={t} bind:selectedTask={selectedTask} on:selectTask={clickTask} />
+      <div style="height: 100%">
-	  </TasksLoader>
+        <Graph tasks={t} bind:selectedTask on:selectTask={clickTask} />
-	{/if}
+      </div>
+    </TasksLoader>
+  {/if}
 </main>

frontend/src/Editor.svelte

@@ -2,7 +2,7 @@
   import Graph from "./Graph.svelte";
   import { grabAssignment } from "./ksp-task-grabber";
   import type { TaskDescriptor, TasksFile } from "./task-loader";
-  import { createTaskMap, getCategories } from "./task-loader";
+  import { saveTasks, createTaskMap, getCategories } from "./task-loader";
 
   export let tasks: TasksFile;
 
@@ -59,6 +59,10 @@
   function toggleDivnaPromena() {
     hovnoDivnaPromenaKteraJeFaktFuj = !hovnoDivnaPromenaKteraJeFaktFuj;
   }
+
+  async function saveCurrentState() {
+    await saveTasks(tasks);
+  }
 </script>
 
 <style>
@@ -133,6 +137,9 @@
       <div>
         Repulsion force: <input type="number" bind:value={repulsionForce} name="repulsionForceInput" max="1000" min="-10000" />
       </div>
+      <div>
+        <button on:click={saveCurrentState}>Uložit aktuální stav</button>
+      </div>
     </div>
     <div class="taskDetails">
       {#if currentTask != null}

frontend/src/task-loader.ts

@@ -1,4 +1,4 @@
-import type { SimulationNodeDatum, SimulationLinkDatum } from "d3"; 
+import type { SimulationNodeDatum, SimulationLinkDatum } from "d3";
 
 export type TaskDescriptor = {
     id: string
@@ -19,6 +19,19 @@ export async function loadTasks(): Promise<TasksFile> {
     return await r.json()
 }
 
+export async function saveTasks(tasks: TasksFile) {
+    // request options
+    const options = {
+        method: 'POST',
+        body: JSON.stringify(tasks, null, 4),
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    }
+
+    fetch("/tasks.json", options)
+}
+
 export function createTaskMap(tasks: TasksFile): TaskMap {
     let m = new Map<string, TaskDescriptor>();
 
@@ -42,7 +55,7 @@ export function createLinksFromTaskMap(tasks: TasksFile): SimulationLinkDatum<Ta
 
             if (t === undefined) throw `missing task with id ${id}`;
 
-            const l: SimulationLinkDatum<TaskDescriptor> = {source: t, target: task};
+            const l: SimulationLinkDatum<TaskDescriptor> = { source: t, target: task };
             links.push(l);
         }
     }