Načítání řešení úlohy

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}

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>

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>