From dd62fea3f40363b3a3876c8d811f2fd2c63771ed Mon Sep 17 00:00:00 2001
From: kjubik <wojt.kubicki@gmail.com>
Date: Thu, 10 Aug 2023 15:32:42 +0200
Subject: [PATCH] add toggled state for editing problems

---
 .../src/routes/panel/problem/+page.svelte     | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/odyseja-ui/src/routes/panel/problem/+page.svelte b/odyseja-ui/src/routes/panel/problem/+page.svelte
index 64f441e..add593b 100644
--- a/odyseja-ui/src/routes/panel/problem/+page.svelte
+++ b/odyseja-ui/src/routes/panel/problem/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { saveProblems } from '../apiService';
   import type { Problems } from '../types';
+  import {init} from "svelte/internal";
 
   export let data: Problems;
 
@@ -11,20 +12,41 @@
   function save() {
     saveProblems(data);
     initialData = JSON.parse(JSON.stringify(data));
+    toggleEdit();
   }
+
+  let editToggled = false
+  function toggleEdit() {
+    editToggled = !editToggled;
+    editToggled = editToggled;
+  }
+
+  function cancelChanges() {
+    toggleEdit();
+    data = JSON.parse(JSON.stringify(initialData));
+  }
+
 </script>
 
   <section class="p-4">
+    <div class="flex justify-between items-center max-w-2xl">
+      <h2 class="mb-6">Problemy</h2>
+      <button type="button" on:click={toggleEdit} class="btn btn-md variant-filled-primary"
+              disabled='{editToggled}'>Edytuj</button>
+    </div>
     {#each data.problems as problem}
-      <label class="label m-4">
-        <span>Problem nr. {problem.id}</span>
-        <input class="input" type="text" placeholder="Input" bind:value={problem.name}/>
+      <label class="label py-3 flex items-center max-w-2xl">
+        <span class="text-2xl font-semibold pr-4">{problem.id}</span>
+        <input class="input text-xl" type="text" placeholder="Input" bind:value={problem.name} disabled="{!editToggled}"/>
       </label>
     {/each}
   </section>
 
   <footer class="pl-8">
-    <button type="button" on:click={save} disabled='{!isChanged}' class="btn btn-md variant-filled-primary">
+    <button type="button" on:click={save} disabled='{!isChanged}' class="btn btn-md variant-filled-secondary">
       Zapisz
     </button>
+    <button type="button" on:click={cancelChanges} disabled='{!editToggled}' class="btn btn-md variant-ringed-surface">
+      Anuluj
+    </button>
   </footer>