Commit d859649b authored by Dorian Goepp's avatar Dorian Goepp

test code to add a gadget to the dashboard

parent 8e17f376
......@@ -2,7 +2,7 @@ import React from 'react';
// Tab-based dynamic layout manager
import FlexLayout from 'flexlayout-react';
// MobX, a state manager
import {toJS} from 'mobx'
import {reaction, toJS} from 'mobx'
import {observer} from 'mobx-react'
// The React Components that are going into tabs
import {VideoStream, DemoVideoStream} from './VideoStream'
......@@ -26,6 +26,8 @@ class Board extends React.Component {
super(props)
this.state = {model: FlexLayout.Model.fromJson(json)}
reaction(() => this.props.store.sharedData.get('newTab'), this.addTab.bind(this));
this.refLayout = React.createRef();
}
......@@ -77,12 +79,15 @@ class Board extends React.Component {
}, null);
}
onAdd(event) {
this.refLayout.current.addTabWithDragAndDropIndirect("Add panel<br>(Drag to location)", {
component: "h-gauge",
name: "added",
config: {value: 0.5}
}, null);
addTab() {
if (this.props.store.sharedData.has('newTab')) {
const {component, name} = this.props.store.sharedData.get('newTab');
this.refLayout.current.addTabWithDragAndDrop(`Add ${name}<br>(Drag to location)`, {
component: component,
name: "New tab"
}, null);
this.props.store.sharedData.delete('newTab')
}
}
/**
......
......@@ -27,14 +27,12 @@ export function Menu(props) {
Custom
</div>
<NavItem eventKey="demo">
<NavItem eventKey="demo" onClick={() => props.drag('h-gauge', "Horizontal Gauge")}>
<NavIcon>
{/* <a href="#"> */}
<img className="menu-button"
src={window.location.origin + "/images/icons/dashboard-grey.svg"}
alt="Demo mode"
/>
{/* </a> */}
<img className="menu-button"
src={window.location.origin + "/images/icons/dashboard-grey.svg"}
alt="Demo mode"
/>
</NavIcon>
<NavText>
Demo
......@@ -167,4 +165,4 @@ export function Menu(props) {
</SideNav.Nav>
</SideNav>
)
}
})
......@@ -33,6 +33,7 @@ class ObservableStore {
this.modal.mode = null;
this.modal.component = null;
}
dragging = false
}
decorate(ObservableStore, {
components: observable,
......@@ -82,10 +83,14 @@ class Main extends React.Component {
</div>);
}
function addTab(component, name) {
this.store.sharedData.set('newTab', {component: component, name: name});
}
return (
<div id="level-1">
<div id="menu">
<Menu ros={this.ros}/>
<Menu ros={this.ros} store={this.store} drag={addTab.bind(this)}/>
</div>
<div id="level-2">
<div id="header">
......
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