From c2882877b949a5c28542c78b8b60cfa30ab97c96 Mon Sep 17 00:00:00 2001
From: Maximilian Giller <m.giller@tu-braunschweig.de>
Date: Sat, 28 May 2022 22:20:20 +0200
Subject: [PATCH] Implemented basic space selector
---
src/editor/js/components/editor.tsx | 5 +--
src/editor/js/components/spaceselect.tsx | 50 +++++++++++++++++++++---
2 files changed, 46 insertions(+), 9 deletions(-)
diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx
index ef4a6ad..2dfc95f 100644
--- a/src/editor/js/components/editor.tsx
+++ b/src/editor/js/components/editor.tsx
@@ -3,7 +3,6 @@ import PropTypes, { InferType } from "prop-types";
import { State } from "../state";
import * as Interactions from "../interactions";
import { Graph } from "../structures/graph/graph";
-import ForceGraph from "force-graph";
import { loadGraphJson } from "../../../datasets";
import { ToolPool } from "./toolpool";
import { ToolDetails } from "./tooldetails";
@@ -63,7 +62,7 @@ export class Editor extends React.PureComponent<
console.log("Starting to load new graph ...");
console.log(data);
console.log(Graph.parse(data));
-
+
// Create global objects
const newState = new State();
const newGraph = Graph.parse(data);
@@ -168,7 +167,7 @@ export class Editor extends React.PureComponent<
<h1>Interface</h1>
<div id="content">
<div id="sidepanel">
- <SpaceSelect />
+ <SpaceSelect onLoadSpace={this.loadSpace} />
<hr />
<ToolPool state={this.state.state} />
<hr />
diff --git a/src/editor/js/components/spaceselect.tsx b/src/editor/js/components/spaceselect.tsx
index 053a502..3aba509 100644
--- a/src/editor/js/components/spaceselect.tsx
+++ b/src/editor/js/components/spaceselect.tsx
@@ -1,14 +1,52 @@
-import React from "react";
+import React, { ChangeEvent } from "react";
import { ReactNode } from "react";
-import "./spaceselect.css"
+import { listAllSpaces } from "../../../datasets";
+import "./spaceselect.css";
+
+type propTypes = {
+ onLoadSpace: (spaceId: string) => boolean;
+};
+
+type stateTypes = {
+ spaces: string[];
+};
+
+export class SpaceSelect extends React.Component<propTypes, stateTypes> {
+ constructor(props: propTypes) {
+ super(props);
+ this.state = {
+ spaces: [],
+ };
+
+ this.handleSelectChange = this.handleSelectChange.bind(this);
+ this.updateSpaceList = this.updateSpaceList.bind(this);
+
+ listAllSpaces().then(this.updateSpaceList);
+ }
+
+ updateSpaceList(spaceList: string[]) {
+ this.setState({
+ spaces: spaceList,
+ });
+ }
+
+ handleSelectChange(e: ChangeEvent<HTMLSelectElement>) {
+ const success = this.props.onLoadSpace(e.target.value);
+
+ if (!success) {
+ alert("Failed to load space with id [" + e.target.value + "]");
+ }
+ }
-export class SpaceSelect extends React.Component {
render(): ReactNode {
return (
<div id="spaceselect">
- <select>
- <option>Space</option>
- <option>AuD1</option>
+ <select onChange={this.handleSelectChange}>
+ {this.state.spaces.map((spaceName: string) => (
+ <option key={spaceName} value={spaceName}>
+ {spaceName}
+ </option>
+ ))}
</select>
<button>Save</button>
</div>
--
GitLab