Browse Source

TaskDisplay shows text nodes correctly

mj-deploy
Standa Lukeš 4 years ago
parent
commit
b4717e93a9
  1. 2
      frontend/src/Editor.svelte
  2. 35
      frontend/src/TaskDisplay.svelte
  3. 6
      frontend/src/TaskPanel.svelte

2
frontend/src/Editor.svelte

@ -306,7 +306,7 @@
<li>{cat}</li> <li>{cat}</li>
{/each} {/each}
</ul> </ul>
<TaskDisplay taskId={currentTask.id} /> <TaskDisplay task={currentTask} />
{:else} {:else}
<h3>Nothing selected...</h3> <h3>Nothing selected...</h3>
{/if} {/if}

35
frontend/src/TaskDisplay.svelte

@ -2,18 +2,28 @@
import { grabAssignment, grabSolution } from "./ksp-task-grabber"; import { grabAssignment, grabSolution } from "./ksp-task-grabber";
import type { TaskStatus } from "./ksp-task-grabber"; import type { TaskStatus } from "./ksp-task-grabber";
import { nonNull } from './helpers' import { nonNull } from './helpers'
import App from "./App.svelte"; import App from "./App.svelte";
import { taskStatuses } from "./task-status-cache"; import { taskStatuses } from "./task-status-cache";
export let taskId: string | null | undefined import type { TaskDescriptor } from "./task-loader";
export let task: TaskDescriptor | null | undefined
export let showSolution: boolean = false export let showSolution: boolean = false
$: { $: {
taskId task
showSolution = false showSolution = false
} }
let status: TaskStatus | undefined 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> </script>
<style> <style>
div { div {
@ -34,8 +44,15 @@ import { taskStatuses } from "./task-status-cache";
</style> </style>
<div> <div>
{#if taskId != null} {#if task != null}
{#await grabAssignment(nonNull(taskId))} {#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 Načítám úlohu
{:then task} {:then task}
<div class="header"> <div class="header">
@ -65,7 +82,7 @@ import { taskStatuses } from "./task-status-cache";
</a> </a>
{:else} {:else}
<h4>Řešení</h4> <h4>Řešení</h4>
{#await grabSolution(nonNull(taskId))} {#await grabSolution(referenceId)}
Načítám... Načítám...
{:then solution} {:then solution}
{@html solution.description} {@html solution.description}
@ -73,5 +90,7 @@ import { taskStatuses } from "./task-status-cache";
{/if} {/if}
</div> </div>
{/await} {/await}
{/if}
{/if} {/if}
</div> </div>

6
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 */ /* 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 { .panel.preview, .panel:not(.full):hover {
height: 100px; height: 150px;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.panel.full { .panel.full {
min-height: 100%; min-height: 420px;
border-bottom: 2px solid #444444; border-bottom: 2px solid #444444;
} }
.closeButton { .closeButton {
@ -114,6 +114,6 @@
<div class="panel {heightClass}" <div class="panel {heightClass}"
on:click={() => location.hash = `#task/${selectedTask?.id}`}> on:click={() => location.hash = `#task/${selectedTask?.id}`}>
<TaskDisplay taskId={selectedTask?.id} /> <TaskDisplay task={selectedTask} />
<button type=button class="closeButton" on:click|stopPropagation={close}></button> <button type=button class="closeButton" on:click|stopPropagation={close}></button>
</div> </div>