From 95426fa0d26878937f9b2ffbd85794ca54896d10 Mon Sep 17 00:00:00 2001 From: Vasek Sraier Date: Wed, 30 Sep 2020 15:34:56 +0200 Subject: [PATCH] editor: nastroj pro editaci detailu tasku --- frontend/package.json | 3 +- frontend/src/App.svelte | 42 +++++------ frontend/src/Editor.svelte | 18 ++++- frontend/src/Graph.svelte | 8 ++- frontend/src/GraphNode.svelte | 10 ++- frontend/src/TaskDetailEditor.svelte | 103 +++++++++++++++++++++++++++ frontend/src/helpers.ts | 6 ++ frontend/src/task-loader.ts | 19 ++++- frontend/yarn.lock | 5 ++ tasks.json | 4 +- 10 files changed, 188 insertions(+), 30 deletions(-) create mode 100644 frontend/src/TaskDetailEditor.svelte diff --git a/frontend/package.json b/frontend/package.json index 77a86f4..f4aec90 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -27,6 +27,7 @@ "@types/d3": "^5.7.2", "d3": "^6.2.0", "sigma": "1.2.1", - "sirv-cli": "^1.0.0" + "sirv-cli": "^1.0.0", + "svelte-simple-modal": "^0.6.1" } } diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index 3631f9a..4525175 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -5,19 +5,18 @@ 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"; + import Modal from "svelte-simple-modal"; const tasksPromise: Promise = loadTasks(); - let taskPanel: TaskPanel + let taskPanel: TaskPanel; // react to hash changes let hash = window.location.hash.substr(1); window.onhashchange = () => { hash = window.location.hash.substr(1); - } - $: selectedTaskId = (/^task\/([^\/]*)/.exec(hash) || [null, null])[1] + }; + $: selectedTaskId = (/^task\/([^\/]*)/.exec(hash) || [null, null])[1];
- {#if hash == 'editor'} - - - - {:else} - - -
- location.hash=`#task/${e.detail.id}`} - on:preSelectTask={e => taskPanel.preSelect(e.detail)} - on:unPreSelectTask={e => taskPanel.unPreselect(e.detail)} /> -
- - {/if} + + {#if hash == 'editor'} + + + + {:else} + + +
+ (location.hash = `#task/${e.detail.id}`)} + 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 790710e..6ef4d20 100644 --- a/frontend/src/Editor.svelte +++ b/frontend/src/Editor.svelte @@ -1,9 +1,12 @@ - + - {task.id} + {task.task.title == null ? task.id : task.task.title} diff --git a/frontend/src/TaskDetailEditor.svelte b/frontend/src/TaskDetailEditor.svelte new file mode 100644 index 0000000..dd306c7 --- /dev/null +++ b/frontend/src/TaskDetailEditor.svelte @@ -0,0 +1,103 @@ + + +
+
ID: {editData.task.id}, TYPE: {editData.task.type}
+

+ TITLE: + +

+
+ COMMENT: + +
+ {#if editData.task.type == "text"} +
HTML obsah:
+
+ {/if} +
+
+

Kategorie

+
    + {#each editData.categories as cat} +
  • + {cat} +
    • + {/each} +
+
+ + +
+
+
+
+

Závislosti

+
    + {#each editData.task.requires as req} +
  • + {req} +
    • + {/each} +
+ + Jestli chceš vyrobit novou závislost, vyrob novou hranu v grafu. + Tady to nejde. + +
+
+
+ + +
+
+
+

Vysvětlivky

+ Kurzívou je psaný text, který nesouvisí s daty. Některý text psaný + nekurzívou se dá editovat. Změna typu ale třeba není možná, na to je + potřeba upravit přímo soubor tasks.json. +
+
diff --git a/frontend/src/helpers.ts b/frontend/src/helpers.ts index da3b996..3918326 100644 --- a/frontend/src/helpers.ts +++ b/frontend/src/helpers.ts @@ -1 +1,7 @@ export function nonNull(a: T | null | undefined): T { return a! } + +export function copyFieldsThatExist(dest: any, source: any) { + for (const attr of Object.keys(dest)) { + if (attr in source) dest[attr] = source[attr] + } +} diff --git a/frontend/src/task-loader.ts b/frontend/src/task-loader.ts index 303335e..61a0693 100644 --- a/frontend/src/task-loader.ts +++ b/frontend/src/task-loader.ts @@ -2,9 +2,24 @@ import type { SimulationNodeDatum, SimulationLinkDatum } from "d3"; export type TaskDescriptor = { id: string + title?: string requires: string[] comment?: string -} +} & ( + { + type: "open-data", + taskReference: string + } + | + { + type: "text", + htmlContent: string + } + | + { + type: "label" + } + ); export type TasksFile = { tasks: TaskDescriptor[] @@ -28,7 +43,7 @@ export async function saveTasks(tasks: TasksFile) { let p: any = {} for (let [key, val] of tasks.positions.entries()) p[key] = val; - const data = {...tasks, positions: p} + const data = { ...tasks, positions: p } // request options const options = { diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 73e4179..7b387b5 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1328,6 +1328,11 @@ svelte-preprocess@^4.0.0, svelte-preprocess@~4.3.0: detect-indent "^6.0.0" strip-indent "^3.0.0" +svelte-simple-modal@^0.6.1: + version "0.6.1" + resolved "https://registry.yarnpkg.com/svelte-simple-modal/-/svelte-simple-modal-0.6.1.tgz#5e984f384dda16bc50f00846314dc140ad89864b" + integrity sha512-GJGYj+jymzuar105fwkZ73dtcSFCordpbHqt53iE1N1GdqhvEmSs24idRzyIcO7TrTD/V/287X1icFXp88RQHQ== + svelte2tsx@*: version "0.1.118" resolved "https://registry.yarnpkg.com/svelte2tsx/-/svelte2tsx-0.1.118.tgz#0f408fcd74a69295d6601a99228bc8ca1637b39c" diff --git a/tasks.json b/tasks.json index 4d4b60b..f91a807 100644 --- a/tasks.json +++ b/tasks.json @@ -12,7 +12,9 @@ "requires": [ "start" ], - "comment": "kecy o tom, jak se může řešit taková úloha" + "comment": "kecy o tom, jak se může řešit taková úloha", + "title": "Jak řešit úlohy?", + "htmlContent": "" }, { "id": "31-Z1-1",