From 005b7554f9206e6ebd98564393ec45dac885c7e3 Mon Sep 17 00:00:00 2001
From: Dorian Goepp <dorian.goepp@gmail.com>
Date: Thu, 22 Aug 2019 10:51:36 +0200
Subject: [PATCH] Getting ready to add new widgets with a modal dialog.
This required to alter the way the modal dialog is handled.
It formerly was only used for the info and settings of a widget but now is much more generic.
---
src/{ => Board}/Board.js | 69 ++++++++++++----------
src/Board/NewWidget.js | 26 ++++++++
src/Menu/index.js | 20 ++++---
src/index.js | 11 ++--
src/utils/{modeModal.js => GadgetModal.js} | 16 ++---
5 files changed, 89 insertions(+), 53 deletions(-)
rename src/{ => Board}/Board.js (80%)
create mode 100644 src/Board/NewWidget.js
rename src/utils/{modeModal.js => GadgetModal.js} (93%)
diff --git a/src/Board.js b/src/Board/Board.js
similarity index 80%
rename from src/Board.js
rename to src/Board/Board.js
index 5379c1a..77486e4 100755
--- a/src/Board.js
+++ b/src/Board/Board.js
@@ -5,20 +5,42 @@ import FlexLayout from 'flexlayout-react';
import {reaction, toJS} from 'mobx'
import {observer} from 'mobx-react'
// The React Components that are going into tabs
-import {VideoStream, DemoVideoStream} from './VideoStream'
-import {RosLineChart, DemoLineChart} from './LineChart'
-import {RosHGauge} from './HorizontalGauge'
-import {RosMemoryRanked, DemoMemoryRanked} from './MemoryRanked'
-import {RosInteractionTrace, DemoInteractionTrace} from './InteractionTrace'
-import {RosLatestInteraction, DemoLatestInteraction} from './LatestInteraction'
-import {RosMood, DemoMood} from './Mood'
-import {Graph, DemoGraph} from './GraphVisJs'
-import DemoString from './String'
+import {VideoStream, DemoVideoStream} from '../VideoStream'
+import {RosLineChart, DemoLineChart} from '../LineChart'
+import {RosHGauge} from '../HorizontalGauge'
+import {RosMemoryRanked, DemoMemoryRanked} from '../MemoryRanked'
+import {RosInteractionTrace, DemoInteractionTrace} from '../InteractionTrace'
+import {RosLatestInteraction, DemoLatestInteraction} from '../LatestInteraction'
+import {RosMood, DemoMood} from '../Mood'
+import {Graph, DemoGraph} from '../GraphVisJs'
+import DemoString from '../String'
+// A component used to display the readme or config form for the widgets
+import {GadgetModal} from '../utils/GadgetModal';
// get the default configuration for the layout
-import {flexlayout_json as json} from './demo-1-config'
-// import {flexlayout_json as json} from './demo-tabbed-config'
-// import {flexlayout_json as json} from './devel-config'
+import {flexlayout_json as json} from '../demo-1-config'
+// import {flexlayout_json as json} from '../demo-tabbed-config'
+// import {flexlayout_json as json} from '../devel-config'
+
+
+export const tab_types = {
+ "video": VideoStream,
+ "demo-video": DemoVideoStream,
+ "line-chart": RosLineChart,
+ "demo-line-chart": DemoLineChart,
+ "h-gauge": RosHGauge,
+ "memory": RosMemoryRanked,
+ "demo-memory": DemoMemoryRanked,
+ "int-trace": RosInteractionTrace,
+ "demo-int-trace": DemoInteractionTrace,
+ "string": DemoString,
+ "demo-latest-interaction": DemoLatestInteraction,
+ "latest-interaction": RosLatestInteraction,
+ "mood": RosMood,
+ "demo-mood": DemoMood,
+ "graph": Graph,
+ "demo-graph": DemoGraph,
+}
const Board = observer(
class Board extends React.Component {
@@ -36,25 +58,6 @@ class Board extends React.Component {
* @param node node to be added, as per the vocabulary of FlexLayout
*/
factory(node) {
- const tab_types = {
- "video": VideoStream,
- "demo-video": DemoVideoStream,
- "line-chart": RosLineChart,
- "demo-line-chart": DemoLineChart,
- "h-gauge": RosHGauge,
- "memory": RosMemoryRanked,
- "demo-memory": DemoMemoryRanked,
- "int-trace": RosInteractionTrace,
- "demo-int-trace": DemoInteractionTrace,
- "string": DemoString,
- "demo-latest-interaction": DemoLatestInteraction,
- "latest-interaction": RosLatestInteraction,
- "mood": RosMood,
- "demo-mood": DemoMood,
- "graph": Graph,
- "demo-graph": DemoGraph,
- }
-
/** This function gives the React Component correspinding to a tab type.
*
* A set of React components are mapped to "tab types" (which are strings). Hence, the tab type "video" maps
@@ -128,7 +131,9 @@ class Board extends React.Component {
// If no modal is active, display the relevant one;
// otherwise, get out of it.
if (!this.props.store.modal.enabled) {
- this.props.store.displayModal(modeName, selectedTab.getId());
+ this.props.store.displayModal(
+ <GadgetModal store={this.props.store} component={selectedTab.getId()} mode={modeName}/>
+ );
} else {
this.props.store.exitModal();
}
diff --git a/src/Board/NewWidget.js b/src/Board/NewWidget.js
new file mode 100644
index 0000000..5aac833
--- /dev/null
+++ b/src/Board/NewWidget.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {observer} from 'mobx-react'
+import {forEach} from 'lodash'
+
+import {tab_types} from './Board'
+
+export const NewWidget = observer(
+class NewWidget extends React.Component {
+ render() {
+ console.debug(tab_types);
+
+ forEach(tab_types, (value, key) => {console.debug(key)});
+
+ return (
+ <div>
+ <input
+ type="radio"
+ name="react-tips"
+ value="option1"
+ checked={true}
+ onChange={() => {}}
+ className="form-check-input"
+ />
+ </div>)
+ }
+})
diff --git a/src/Menu/index.js b/src/Menu/index.js
index 1d9c89f..e089330 100644
--- a/src/Menu/index.js
+++ b/src/Menu/index.js
@@ -1,26 +1,32 @@
import React from "react";
import {observer} from "mobx-react";
-
import SideNav, { NavItem, NavIcon, NavText } from '@trendmicro/react-sidenav';
import './Menu.css'
+import {NewWidget} from '../Board/NewWidget'
+
export const Menu = observer(
function Menu(props) {
const lock = props.store.sharedData.get('lock') || 'closed';
- function toggle() {
+ function toggle_lock() {
const new_value = (lock === 'closed') ? 'open' : 'closed';
props.store.sharedData.set('lock', new_value);
}
+ function add_widget() {
+ props.store.displayModal(<NewWidget/>);
+ }
// Display an "add" icon if the lock is open
let add_button = null;
if (lock === 'open') {
add_button = (
- <img className="footer add-button"
- src={window.location.origin + "/images/icons/add_circle_outline.svg"}
- alt="add a new widget"
- />);
+ <button onClick={add_widget}>
+ <img className="footer add-button"
+ src={window.location.origin + "/images/icons/add_circle_outline.svg"}
+ alt="add a new widget"
+ />
+ </button>);
}
return(
@@ -181,7 +187,7 @@ function Menu(props) {
<img className="footer menu-button lock-button"
src={window.location.origin + "/images/icons/lock_" + lock + "-grey.svg"}
alt="lock/unlock the dashboard"
- onClick={toggle}
+ onClick={toggle_lock}
/>
</SideNav.Nav>
</SideNav>
diff --git a/src/index.js b/src/index.js
index 588e37c..5f651f0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,26 +9,25 @@ import {observer} from 'mobx-react'
// ROS library
import RosLib from 'roslib';
// React Components to be displayed
-import {Board} from './Board';
+import {Board} from './Board/Board';
import {Header} from './Header';
import {Menu} from "./Menu";
-import {Modal} from './utils/modeModal';
+import {GadgetModal} from './utils/GadgetModal';
import 'bootstrap/dist/css/bootstrap.min.css'
// CSS common to the whole app
import './Common.css'
+import { throwStatement } from "@babel/types";
class ObservableStore {
components = {}
sharedData = observable.map()
modal = {
enabled: false,
- mode: null,
component: null,
}
- displayModal(mode, component) {
+ displayModal(component) {
this.modal.enabled = true;
- this.modal.mode = mode;
this.modal.component = component;
}
exitModal() {
@@ -116,7 +115,7 @@ class Main extends React.Component {
isOpen = {this.store.modal.enabled}
ref="modal"
>
- <Modal store={this.store}/>
+ {this.store.modal.component}
</PureModal>
</div>
)
diff --git a/src/utils/modeModal.js b/src/utils/GadgetModal.js
similarity index 93%
rename from src/utils/modeModal.js
rename to src/utils/GadgetModal.js
index 544a581..3079035 100644
--- a/src/utils/modeModal.js
+++ b/src/utils/GadgetModal.js
@@ -5,19 +5,19 @@ import { merge } from 'lodash/object';
/**
* This component displays either the readme information about a component or a form to change the settings of a
* component.
- *
+ *
* All changes to the node's settings are saved through a mobX store (passed as props).
- *
- * Expected React properties :
+ *
+ * Expected React properties :
* - node: as provided by the `Board` component to all its children
* - store: object containing information about all relevant React components, as well as information on the current
* mode.
*/
-export class Modal extends Component {
+export class GadgetModal extends Component {
constructor(props) {
super(props);
-
- this.component = this.props.store.components[this.props.store.modal.component];
+
+ this.component = this.props.store.components[this.props.component];
this.hasReadme = 'readme' in this.component;
this.configurable = 'configSchema' in this.component;
}
@@ -27,7 +27,7 @@ export class Modal extends Component {
* attribute of the modal's configuration.
*/
render() {
- const mode = this.props.store.modal.mode;
+ const mode = this.props.mode;
if (this.configurable && mode === "settings") {
return [
<Form
@@ -64,5 +64,5 @@ export class Modal extends Component {
this.props.store.exitModal();
return config;
}
-
+
}
--
GitLab