add toggled state for editing problems

Odyssey-Of-The-Mind-Poland · Aug 10, 2023 · dd62fea · dd62fea
1 parent fae455c
commit dd62fea
Showing 1 changed file with 26 additions and 4 deletions.
diff --git 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>