From debe92d4403ec342dbb6d8d6ff4ff338e5427e34 Mon Sep 17 00:00:00 2001 From: exyi Date: Mon, 28 Sep 2020 13:00:24 +0000 Subject: [PATCH] Less glitchy task expansion --- frontend/public/grafik.html | 2 +- frontend/src/App.svelte | 16 ++++----- frontend/src/Editor.svelte | 12 +++---- frontend/src/Graph.svelte | 10 +++--- frontend/src/TaskDisplay.svelte | 23 ++++++++++++ frontend/src/TaskPanel.svelte | 61 ++++++++++++++++++++++---------- frontend/src/helpers.ts | 1 + frontend/src/ksp-task-grabber.ts | 40 ++++++++++++++++----- 8 files changed, 118 insertions(+), 47 deletions(-) create mode 100644 frontend/src/TaskDisplay.svelte create mode 100644 frontend/src/helpers.ts diff --git a/frontend/public/grafik.html b/frontend/public/grafik.html index 2deb3f8..d06b353 100644 --- a/frontend/public/grafik.html +++ b/frontend/public/grafik.html @@ -14,6 +14,6 @@ -
+
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index 3a729b5..b9c5a16 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -5,15 +5,12 @@ import TasksLoader from "./TasksLoader.svelte"; import TaskPanel from "./TaskPanel.svelte"; import Editor from "./Editor.svelte"; +import GraphEdge from "./GraphEdge.svelte"; +import type { detach } from "svelte/internal"; const tasksPromise: Promise = loadTasks(); - let selectedTask: string | null = null; - let finalSelect: boolean = false; - - function clickTask(e: CustomEvent) { - finalSelect = true; - } + let taskPanel: TaskPanel // react to hash changes let hash = window.location.hash.substr(1); @@ -51,9 +48,12 @@ {:else} - +
- + taskPanel.select(e.detail)} + on:preSelectTask={e => taskPanel.preSelect(e.detail)} + on:unPreSelectTask={e => taskPanel.unPreselect(e.detail)} />
{/if} diff --git a/frontend/src/Editor.svelte b/frontend/src/Editor.svelte index 82e5ba2..40f243a 100644 --- a/frontend/src/Editor.svelte +++ b/frontend/src/Editor.svelte @@ -1,8 +1,10 @@ + + +
+ {#if task != null} + {#await grabAssignment(nonNull(task))} + Načítám úlohu + {:then task} + {@html task.titleHtml} +
+ {@html task.description} +
+ {/await} + {/if} +
diff --git a/frontend/src/TaskPanel.svelte b/frontend/src/TaskPanel.svelte index 8cd8903..c6f231d 100644 --- a/frontend/src/TaskPanel.svelte +++ b/frontend/src/TaskPanel.svelte @@ -1,42 +1,67 @@ -
mouse = false} on:mouseout={() => mouse = false}> - {#if selectedTask != null} - {#await taskPromise} - Načítám úložku {selectedTask} ;) - {:then task} - {@html task} - {/await} - - {/if}
diff --git a/frontend/src/helpers.ts b/frontend/src/helpers.ts new file mode 100644 index 0000000..da3b996 --- /dev/null +++ b/frontend/src/helpers.ts @@ -0,0 +1 @@ +export function nonNull(a: T | null | undefined): T { return a! } diff --git a/frontend/src/ksp-task-grabber.ts b/frontend/src/ksp-task-grabber.ts index f074189..98d3ffb 100644 --- a/frontend/src/ksp-task-grabber.ts +++ b/frontend/src/ksp-task-grabber.ts @@ -1,8 +1,9 @@ export type TaskAssignmentData = { id: string, name: string, - points: number, - description: HTMLElement + points: number | null, + description: string, + titleHtml: string } type TaskLocation = { @@ -31,7 +32,7 @@ function getLocation(id: string, solution: boolean): TaskLocation | null { } } -function parseTask(startElementId: string, html: string): string { +function parseTask(startElementId: string, html: string): TaskAssignmentData { const parser = new DOMParser() const doc = parser.parseFromString(html, "text/html") @@ -42,6 +43,13 @@ function parseTask(startElementId: string, html: string): string { let e = titleElement + const titleMatch = /(\d-Z?\d+-\d+) (.*?)( \((\d+) bod.*\))?/.exec(e.innerText.trim()) + if (!titleMatch) { + var [_, id, name, _, points] = ["", startElementId, "Neznámé jméno úlohy", "", ""] + } else { + var [_, id, name, _, points] = titleMatch + } + while (e.nextElementSibling && e.nextElementSibling?.tagName.toLowerCase() == "hr") e = e.nextElementSibling as HTMLElement @@ -60,7 +68,13 @@ function parseTask(startElementId: string, html: string): string { let r = "" for (const e of elements) r += e.outerHTML + "\n" - return r + return { + description: r, + id: id.trim(), + name: name.trim(), + points: points ? +points : null, + titleHtml: titleElement.outerHTML + } } async function loadTask({ url, startElement }: TaskLocation) { @@ -72,14 +86,24 @@ async function loadTask({ url, startElement }: TaskLocation) { return parseTask(startElement, rText) } -export async function grabAssignment(id: string): Promise { +function virtualTask(id: string): TaskAssignmentData { + return { + id, + description: "úloha je virtuální a neexistuje", + name: id, + points: 0, + titleHtml: "

Virtuální úloha

" + } +} + +export async function grabAssignment(id: string): Promise { const l = getLocation(id, false) - if (!l) return "úloha je virtuální a neexistuje" + if (!l) return virtualTask(id) return await loadTask(l) } -export async function grabSolution(id: string) { +export async function grabSolution(id: string): Promise { const l = getLocation(id, true) - if (!l) return "úloha je virtuální a neexistuje" + if (!l) return virtualTask(id) return await loadTask(l) }