From b4717e93a90d615f98e6f86bb81d58cd2d2846d8 Mon Sep 17 00:00:00 2001
From: exyi <exyi@outlook.cz>
Date: Thu, 1 Oct 2020 12:13:11 +0000
Subject: [PATCH] TaskDisplay shows text nodes correctly

---
 frontend/src/Editor.svelte      |  2 +-
 frontend/src/TaskDisplay.svelte | 35 +++++++++++++++++++++++++--------
 frontend/src/TaskPanel.svelte   |  6 +++---
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/frontend/src/Editor.svelte b/frontend/src/Editor.svelte
index b0d159d..5a21cfb 100644
--- a/frontend/src/Editor.svelte
+++ b/frontend/src/Editor.svelte
@@ -306,7 +306,7 @@
             <li>{cat}</li>
           {/each}
         </ul>
-        <TaskDisplay taskId={currentTask.id} />
+        <TaskDisplay task={currentTask} />
       {:else}
         <h3>Nothing selected...</h3>
       {/if}
diff --git a/frontend/src/TaskDisplay.svelte b/frontend/src/TaskDisplay.svelte
index 96910a4..2810f31 100644
--- a/frontend/src/TaskDisplay.svelte
+++ b/frontend/src/TaskDisplay.svelte
@@ -2,18 +2,28 @@
     import { grabAssignment, grabSolution } from "./ksp-task-grabber";
     import type { TaskStatus } from "./ksp-task-grabber";
     import { nonNull } from './helpers'
-import App from "./App.svelte";
-import { taskStatuses } from "./task-status-cache";
-    export let taskId: string | null | undefined
+    import App from "./App.svelte";
+    import { taskStatuses } from "./task-status-cache";
+    import type { TaskDescriptor } from "./task-loader";
+
+    export let task: TaskDescriptor | null | undefined
 
     export let showSolution: boolean = false
     $: {
-        taskId
+        task
         showSolution = false
     }
 
     let status: TaskStatus | undefined
-    $: if (taskId) status = $taskStatuses.get(taskId)
+    $: if (task) status = $taskStatuses.get(task.id)
+    let referenceId: string | null
+    $: {
+        if (task != null) {
+            const r = task.taskReference || task.id
+            if (referenceId != r)
+                referenceId = r
+        }
+    }
 </script>
 <style>
     div {
@@ -34,8 +44,15 @@ import { taskStatuses } from "./task-status-cache";
 </style>
 
 <div>
-    {#if taskId != null}
-    {#await grabAssignment(nonNull(taskId))}
+    {#if task != null}
+    {#if nonNull(task).type == "text"}
+        <div class="header">
+            <div class="title"><h3>{nonNull(task).title}</h3></div>
+        </div>
+        {@html nonNull(task).htmlContent || "Toto je prázdný textový node 😢"}
+    {:else if nonNull(task).type == "open-data"}
+
+    {#await grabAssignment(nonNull(referenceId))}
         Načítám úlohu
     {:then task}
         <div class="header">
@@ -65,7 +82,7 @@ import { taskStatuses } from "./task-status-cache";
             </a>
             {:else}
             <h4>Řešení</h4>
-            {#await grabSolution(nonNull(taskId))}
+            {#await grabSolution(referenceId)}
                 Načítám...
             {:then solution}
                 {@html solution.description}
@@ -73,5 +90,7 @@ import { taskStatuses } from "./task-status-cache";
             {/if}
         </div>
     {/await}
+
+    {/if}
     {/if}
 </div>
diff --git a/frontend/src/TaskPanel.svelte b/frontend/src/TaskPanel.svelte
index d0940ad..872f271 100644
--- a/frontend/src/TaskPanel.svelte
+++ b/frontend/src/TaskPanel.svelte
@@ -86,12 +86,12 @@
     }
     /* Used when the user hovers over a node and we want to show that there is something - a small expandable preview */
     .panel.preview, .panel:not(.full):hover {
-        height: 100px;
+        height: 150px;
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
     .panel.full {
-        min-height: 100%;
+        min-height: 420px;
         border-bottom: 2px solid #444444;
     }
     .closeButton {
@@ -114,6 +114,6 @@
 
 <div class="panel {heightClass}"
      on:click={() => location.hash = `#task/${selectedTask?.id}`}>
-    <TaskDisplay taskId={selectedTask?.id} />
+    <TaskDisplay task={selectedTask} />
     <button type=button class="closeButton" on:click|stopPropagation={close}></button>
 </div>