From 1206a056334b872cf4646a79e61ae050ec9b5c89 Mon Sep 17 00:00:00 2001
From: exyi <exyi@outlook.cz>
Date: Mon, 28 Sep 2020 14:36:50 +0000
Subject: [PATCH] =?UTF-8?q?Na=C4=8D=C3=ADt=C3=A1n=C3=AD=20=C5=99e=C5=A1en?=
 =?UTF-8?q?=C3=AD=20=C3=BAlohy?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/Editor.svelte      |  2 +-
 frontend/src/TaskDisplay.svelte | 32 +++++++++++++++++++++++++++-----
 frontend/src/TaskPanel.svelte   |  3 ++-
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/frontend/src/Editor.svelte b/frontend/src/Editor.svelte
index 40f243a..ad48a12 100644
--- a/frontend/src/Editor.svelte
+++ b/frontend/src/Editor.svelte
@@ -153,7 +153,7 @@
             <li>{cat}</li>
           {/each}
         </ul>
-        <TaskDisplay task={currentTask} />
+        <TaskDisplay taskId={currentTask} />
       {:else}
         <h3>Nothing selected...</h3>
       {/if}
diff --git a/frontend/src/TaskDisplay.svelte b/frontend/src/TaskDisplay.svelte
index 1b16866..79c34b0 100644
--- a/frontend/src/TaskDisplay.svelte
+++ b/frontend/src/TaskDisplay.svelte
@@ -1,7 +1,14 @@
 <script type="ts">
-    import { grabAssignment } from "./ksp-task-grabber";
+    import { grabAssignment, grabSolution } from "./ksp-task-grabber";
     import { nonNull } from './helpers'
-    export let task: string | null | undefined
+import App from "./App.svelte";
+    export let taskId: string | null | undefined
+
+    export let showSolution: boolean = false
+    $: {
+        taskId
+        showSolution = false
+    }
 </script>
 <style>
     div {
@@ -10,14 +17,29 @@
 </style>
 
 <div>
-    {#if task != null}
-    {#await grabAssignment(nonNull(task))}
+    {#if taskId != null}
+    {#await grabAssignment(nonNull(taskId))}
         Načítám úlohu
     {:then task}
         {@html task.titleHtml}
-        <hr>
         {@html task.description}
         <div class="clearfloat" />
+
+        <div class="solution">
+            {#if !showSolution}
+            <a href="javasctipt:;"
+               on:click|preventDefault|stopPropagation={() => showSolution = true}>
+                Zobrazit řešení úlohy
+            </a>
+            {:else}
+            <h4>Řešení</h4>
+            {#await grabSolution(nonNull(taskId))}
+                Načítám...
+            {:then solution}
+                {@html solution.description}
+            {/await}
+            {/if}
+        </div>
     {/await}
     {/if}
 </div>
diff --git a/frontend/src/TaskPanel.svelte b/frontend/src/TaskPanel.svelte
index 43f4743..bbd3f9d 100644
--- a/frontend/src/TaskPanel.svelte
+++ b/frontend/src/TaskPanel.svelte
@@ -38,6 +38,7 @@ import TaskDisplay from "./TaskDisplay.svelte";
         overflow: hidden;
         padding: 0 100px 0 100px;
         box-sizing: border-box;
+        z-index: 120;
     }
     .panel.collapsed:not(:hover) {
         display: none;
@@ -54,7 +55,7 @@ import TaskDisplay from "./TaskDisplay.svelte";
 
 <div class="panel {heightClass}"
      on:click={() => selectedTask && select(selectedTask)}>
-    <TaskDisplay task={selectedTask?.id} />
+    <TaskDisplay taskId={selectedTask?.id} />
     <button type=button class="closeButton" on:click|stopPropagation={() => heightClass = "collapsed"}>
         Zavřít
     </button>