KSP/graf-uloh
Archived
45
1
Fork 0
Code Issues 20 Pull requests Releases Wiki Activity

Merge branch 'exyi/task-url-routing' into master

Browse source
This commit is contained in:
Standa Lukeš 2020-09-29 19:31:15 +00:00
commit bd5e5a6a48
2 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/App.svelte
View file

@ -15,8 +15,9 @@ import type { detach } from "svelte/internal";
// react to hash changes // react to hash changes
let hash = window.location.hash.substr(1); let hash = window.location.hash.substr(1);
window.onhashchange = () => { window.onhashchange = () => {
hash = window.location.hash.substr(1); hash = window.location.hash.substr(1);
} }
$: selectedTaskId = (/^task\/([^\/]*)/.exec(hash) || [null, null])[1]
</script> </script>
<style> <style>
@ -34,10 +35,10 @@ import type { detach } from "svelte/internal";
</TasksLoader> </TasksLoader>
{:else} {:else}
<TasksLoader promise={tasksPromise} let:data={t}> <TasksLoader promise={tasksPromise} let:data={t}>
<TaskPanel bind:this={taskPanel} /> <TaskPanel tasks={t} bind:this={taskPanel} {selectedTaskId} />
<div style="height: 100%"> <div style="height: 100%">
<Graph tasks={t} <Graph tasks={t}
on:selectTask={e => taskPanel.select(e.detail)} on:selectTask={e => location.hash=`#task/${e.detail.id}`}
on:preSelectTask={e => taskPanel.preSelect(e.detail)} on:preSelectTask={e => taskPanel.preSelect(e.detail)}
on:unPreSelectTask={e => taskPanel.unPreselect(e.detail)} /> on:unPreSelectTask={e => taskPanel.unPreselect(e.detail)} />
</div> </div>

16
frontend/src/TaskPanel.svelte
View file

@ -4,8 +4,9 @@
import type { TasksFile, TaskDescriptor } from "./task-loader"; import type { TasksFile, TaskDescriptor } from "./task-loader";
import TaskDisplay from "./TaskDisplay.svelte"; import TaskDisplay from "./TaskDisplay.svelte";
// export let tasks: TasksFile; export let tasks: TasksFile;
let selectedTask: TaskDescriptor | null = null let selectedTask: TaskDescriptor | null = null
export let selectedTaskId: string | null = null
let heightClass: "closed" | "collapsed" | "full" | "preview" = "collapsed" let heightClass: "closed" | "collapsed" | "full" | "preview" = "collapsed"
@ -24,12 +25,17 @@ import TaskDisplay from "./TaskDisplay.svelte";
}, 10); }, 10);
} }
export function select(task: TaskDescriptor) { $: {
selectedTask = task if (selectedTaskId) {
heightClass = "full" heightClass = "full"
selectedTask = tasks.tasks.find(t => t.id == selectedTaskId) ?? null
} else {
heightClass = "collapsed"
}
} }
function close() { function close() {
location.hash = ""
heightClass = "closed" heightClass = "closed"
window.setTimeout(() => window.scrollTo({ window.setTimeout(() => window.scrollTo({
top: 0, top: 0,
@ -94,7 +100,7 @@ import TaskDisplay from "./TaskDisplay.svelte";
<svelte:window on:keydown={handleKeydown} /> <svelte:window on:keydown={handleKeydown} />
<div class="panel {heightClass}" <div class="panel {heightClass}"
on:click={() => selectedTask && select(selectedTask)}> on:click={() => location.hash = `#task/${selectedTask?.id}`}>
<TaskDisplay taskId={selectedTask?.id} /> <TaskDisplay taskId={selectedTask?.id} />
<button type=button class="closeButton" on:click|stopPropagation={close}></button> <button type=button class="closeButton" on:click|stopPropagation={close}></button>
</div> </div>