Commit 005b7554 authored by Dorian Goepp's avatar Dorian Goepp

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.
parent a7b45c81
......@@ -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();
}
......
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>)
}
})
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>
......
......@@ -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>
)
......
......@@ -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;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment