diff --git a/frontend/public/grafik.html b/frontend/public/grafik.html
index be1214d..2deb3f8 100644
--- a/frontend/public/grafik.html
+++ b/frontend/public/grafik.html
@@ -13,7 +13,7 @@
-
+
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 4bb975e..8872da5 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,10 +1,10 @@
-
-
-
-
-
+ {#if hash == "editor"}
+
+
+
+ {:else}
+
+
+
+
+ {/if}
diff --git a/frontend/src/Editor.svelte b/frontend/src/Editor.svelte
new file mode 100644
index 0000000..0ce6e55
--- /dev/null
+++ b/frontend/src/Editor.svelte
@@ -0,0 +1,143 @@
+
+
+
+
+
+
+
Last clicked: {clicked.join(' | ')}
+
+
+
+
+
+
+
+ {#if currentTask != null}
+
{currentTask}
+
{taskMap.get(currentTask).comment}
+
+ {#each getCategories(tasks, currentTask) as cat}
+ - {cat}
+ {/each}
+
+
+ {#await grabAssignment(currentTask)}
+ Loading...
+ {:then text}
+ {@html text}
+ {/await}
+
+ {:else}
+
Nothing selected...
+ {/if}
+
+
+
diff --git a/frontend/src/Graph.svelte b/frontend/src/Graph.svelte
index 846d97b..9718918 100644
--- a/frontend/src/Graph.svelte
+++ b/frontend/src/Graph.svelte
@@ -6,48 +6,35 @@
import { createLinksFromTaskMap } from "./task-loader";
import type { TasksFile, TaskDescriptor } from "./task-loader";
- const eventDispatcher = createEventDispatcher()
+ const eventDispatcher = createEventDispatcher();
export let tasks: TasksFile;
- let nodes = tasks.tasks;
- let edges = createLinksFromTaskMap(tasks);
+ export let selectedTask: null | string = null;
+
+ $: nodes = tasks.tasks;
+ $: edges = createLinksFromTaskMap(tasks);
- export let selectedTask: null | string = null
const nodeClick = (task: TaskDescriptor) => (e: CustomEvent) => {
- selectedTask = task.id
- eventDispatcher("selectTask", task)
- }
+ selectedTask = task.id;
+ eventDispatcher("selectTask", task);
+ };
- const nodeHover = (task: TaskDescriptor) => (hovering: CustomEvent) => {
+ const nodeHover = (task: TaskDescriptor) => (
+ hovering: CustomEvent
+ ) => {
if (hovering.detail) {
- selectedTask = task.id
+ selectedTask = task.id;
} else {
- if (selectedTask == task.id)
- selectedTask = null
+ if (selectedTask == task.id) selectedTask = null;
}
- }
+ };
// Svelte automatically fills this with a reference
let container: HTMLElement;
- onMount(async () => {
- // set the dimensions and margins of the graph
- var margin = { top: 10, right: 30, bottom: 30, left: 40 },
- width = container.clientWidth - margin.left - margin.right,
- height = container.clientHeight - margin.top - margin.bottom;
-
- // resize the svg object
- var svg = d3
- .select(container)
- .select("svg")
- .attr("width", width + margin.left + margin.right)
- .attr("height", height + margin.top + margin.bottom)
- .attr("viewBox", [-width / 2, -height / 2, width, height])
- .select("g")
- .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
+ function runSimulation() {
// Let's list the force we wanna apply on the network
- var simulation = d3
+ let simulation = d3
.forceSimulation(nodes) // Force algorithm is applied to data.nodes
.force(
"link",
@@ -69,12 +56,41 @@
edges = edges;
nodes = nodes;
}
+ }
+
+ // run on create
+ onMount(() => {
+ // set the dimensions and margins of the graph
+ var margin = { top: 10, right: 30, bottom: 30, left: 40 },
+ width = container.clientWidth - margin.left - margin.right,
+ height = container.clientHeight - margin.top - margin.bottom;
+
+ // resize the svg object
+ var svg = d3
+ .select(container)
+ .select("svg")
+ .attr("width", width + margin.left + margin.right)
+ .attr("height", height + margin.top + margin.bottom)
+ .attr("viewBox", [-width / 2, -height / 2, width, height])
+ .select("g")
+ .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+ runSimulation();
});
+
+ // don't forget to vomit 🤮🤢
+ export let runSimulationWeirdHack: boolean = true;
+ $: {
+ runSimulationWeirdHack;
+ runSimulation();
+ }
+ // now it's safe to stop vomitting 🤮
+
@@ -83,10 +99,13 @@
diff --git a/frontend/src/ksp-task-grabber.ts b/frontend/src/ksp-task-grabber.ts
index b42d454..f074189 100644
--- a/frontend/src/ksp-task-grabber.ts
+++ b/frontend/src/ksp-task-grabber.ts
@@ -72,7 +72,7 @@ async function loadTask({ url, startElement }: TaskLocation) {
return parseTask(startElement, rText)
}
-export async function grabAssignment(id: string) {
+export async function grabAssignment(id: string): Promise {
const l = getLocation(id, false)
if (!l) return "úloha je virtuálnà a neexistuje"
return await loadTask(l)
diff --git a/frontend/src/task-loader.ts b/frontend/src/task-loader.ts
index 77859f2..c92bd6f 100644
--- a/frontend/src/task-loader.ts
+++ b/frontend/src/task-loader.ts
@@ -2,7 +2,7 @@ import type { SimulationNodeDatum, SimulationLinkDatum } from "d3";
export type TaskDescriptor = {
id: string
- requires: []
+ requires: string[]
comment?: string
} & SimulationNodeDatum
@@ -49,3 +49,12 @@ export function createLinksFromTaskMap(tasks: TasksFile): SimulationLinkDatum= 0) res.push(cat);
+ }
+
+ return res;
+}