Commit ff4bf08c authored by Dorian Goepp's avatar Dorian Goepp

adding widgets, the right way

parent 005b7554
import React from 'react';
import {decorate, observable} from 'mobx'
import {observer} from 'mobx-react'
import {forEach} from 'lodash'
import {map} from 'lodash'
import {tab_types} from './Board'
// Mappings from 'string' types (as per tab_types in Board.js) and display names of the available widgets.
const tab_names = {
"video": "Video stream",
"line-chart": "Simple line chart",
"h-gauge": "Gauge",
"memory": "Agent's memory",
"int-trace": "Interaction trace",
"latest-interaction": "Latest interaction",
"mood": "Current mood",
"graph": "Graph"
}
const demo_tab_names = {
"demo-video": "Video stream demo",
"demo-line-chart": "Line chart demo",
"demo-memory": "Agent's memory demo",
"demo-int-trace": "Interaction trace demo",
"demo-latest-interaction": "Latest interaction demo",
"demo-mood": "Current mood demo",
"demo-graph": "Graph demo",
"string": "ROS debug",
}
/**
* This React component appears in a modal, once we click on the '+' button in the menu. It offers the user to choose
* which component he/she wants to add to the dashboard.
*/
export const NewWidget = observer(
class NewWidget extends React.Component {
render() {
console.debug(tab_types);
selected = Object.keys(tab_names)[0];
enableDemoWidgets = false;
/**
* Set the data for a new tab/widget to be added in the dashboard. This will trigger a method in Board.js, thanks to
* Mobx's magic. It also closes this modal.
*/
addTab() {
this.props.store.sharedData.set('newTab', {
component: this.selected,
name: tab_names[this.selected]
});
this.props.store.exitModal();
}
/**
* This method is used to generate radio inputs for the widgets we offer the user to add to the dashboard. It's
* called in a map (Lodash style).
* @param {string} name Display name of the widget
* @param {string} type string for the type of the widget, as used in Board.js' tab_types
*/
inputFromTabName(name, type) {
return (
<div key={type}>
<label>
<input
type="radio"
name="component-type"
value={type}
checked={type === this.selected}
onChange={(changeEvent) => {this.selected = changeEvent.target.value}}
/>
&nbsp;{name}
</label>
</div>
);
}
forEach(tab_types, (value, key) => {console.debug(key)});
render() {
let inputs = map(tab_names, this.inputFromTabName.bind(this));
// if the user chose to see the demo widgets, add these to the list
if (this.enableDemoWidgets) {
inputs.push(map(demo_tab_names, this.inputFromTabName.bind(this)));
}
return (
<div>
<input
type="radio"
name="react-tips"
value="option1"
checked={true}
onChange={() => {}}
className="form-check-input"
/>
</div>)
<div>
{inputs}
<label>
<input
type="checkbox"
checked={this.enableDemoWidgets}
onChange={(changeEvent) => {this.enableDemoWidgets = changeEvent.target.checked;}}
/>
&nbsp;Show demo widgets
</label><br/>
<button onClick={this.addTab.bind(this)}>Add to the dashboard</button>
</div>
)
}
})
decorate(NewWidget, {
selected: observable,
enableDemoWidgets: observable,
})
......@@ -13,20 +13,19 @@ function Menu(props) {
const new_value = (lock === 'closed') ? 'open' : 'closed';
props.store.sharedData.set('lock', new_value);
}
function add_widget() {
props.store.displayModal(<NewWidget/>);
props.store.displayModal(<NewWidget store={props.store}/>);
}
// Display an "add" icon if the lock is open
// Display an "add" icon if the lock is open. This icon is used to add new widgets to the dashboard.
let add_button = null;
if (lock === 'open') {
add_button = (
<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>);
<img className="footer add-button"
onClick={add_widget}
src={window.location.origin + "/images/icons/add_circle_outline.svg"}
alt="add a new widget"
/>);
}
return(
......@@ -51,17 +50,15 @@ function Menu(props) {
Custom
</div>
<NavItem eventKey="demo" onClick={props.drag('line-chart', "line chart")}>
<NavItem eventKey="demo">
<NavIcon>
<img className="menu-button"
src={window.location.origin + "/images/icons/dashboard-grey.svg"}
alt="line chart"
alt="Demo mode"
/>
{/* alt="Demo mode" */}
</NavIcon>
<NavText>
line chart
{/* Demo */}
Demo
</NavText>
</NavItem>
......@@ -73,59 +70,51 @@ function Menu(props) {
Algorithm
</div>
<NavItem eventKey="memory" onClick={props.drag('h-gauge', "gauge")}>
<NavItem eventKey="memory">
<NavIcon>
<img className="menu-button"
src={window.location.origin + "/images/icons/memory-grey.svg"}
alt="gauge"
alt="memory dashboard"
/>
{/* alt="memory dashboard" */}
</NavIcon>
<NavText>
gauge
{/* Memory */}
Memory
</NavText>
</NavItem>
<NavItem eventKey="traces" onClick={props.drag('graph', "graph")}>
<NavItem eventKey="traces">
<NavIcon>
<img className="menu-button"
src={window.location.origin + "/images/icons/trace-grey.svg"}
alt="graph"
alt="trace dashboard"
/>
{/* alt="trace dashboard" */}
</NavIcon>
<NavText>
graph
{/* Traces */}
Traces
</NavText>
</NavItem>
<NavItem eventKey="mental-states" onClick={props.drag('video', "video")}>
<NavItem eventKey="mental-states">
<NavIcon>
<img className="menu-button"
src={window.location.origin + "/images/icons/mood-grey.svg"}
alt="video"
alt="mood dashboard"
/>
{/* alt="mood dashboard" */}
</NavIcon>
<NavText>
video
{/* Mental states */}
Mental states
</NavText>
</NavItem>
<NavItem eventKey="decision-making" onClick={props.drag('memory', "memory")}>
<NavItem eventKey="decision-making">
<NavIcon>
<img className="menu-button"
src={window.location.origin + "/images/icons/choice-grey.svg"}
alt="memory"
alt="choice dashboard"
/>
{/* alt="choice dashboard" */}
</NavIcon>
<NavText>
memory
{/* Decision making */}
Decision making
</NavText>
</NavItem>
......@@ -133,45 +122,39 @@ function Menu(props) {
Robot
</div>
<NavItem eventKey="video" onClick={props.drag('int-trace', "interaction trace")}>
<NavItem eventKey="video">
<NavIcon>
<img className="menu-button"
src={window.location.origin + "/images/icons/video-grey.svg"}
alt="interaction trace"
alt="video dashboard"
/>
{/* alt="video dashboard" */}
</NavIcon>
<NavText>
interaction trace
{/* Video */}
Video
</NavText>
</NavItem>
<NavItem eventKey="audio" onClick={props.drag('latest-interaction', "latest interaction")}>
<NavItem eventKey="audio">
<NavIcon>
<img className="menu-button"
src={window.location.origin + "/images/icons/microphone-grey.svg"}
alt="latest interaction"
alt="microphone dashboard"
/>
{/* alt="microphone dashboard" */}
</NavIcon>
<NavText>
latest interaction
{/* Audio */}
Audio
</NavText>
</NavItem>
<NavItem eventKey="sensory" onClick={props.drag('mood', "mood")}>
<NavItem eventKey="sensory">
<NavIcon>
<img className="menu-button"
src={window.location.origin + "/images/icons/fingerprint-grey.svg"}
alt="mood"
alt="sensory dashboard"
/>
{/* alt="sensory dashboard" */}
</NavIcon>
<NavText>
mood
{/* Sensory */}
Sensory
</NavText>
</NavItem>
......
......@@ -12,12 +12,10 @@ import RosLib from 'roslib';
import {Board} from './Board/Board';
import {Header} from './Header';
import {Menu} from "./Menu";
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 = {}
......
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