From d859649b2055b2e94063c627acd3863f8edd9e4d Mon Sep 17 00:00:00 2001
From: Dorian Goepp <dorian.goepp@gmail.com>
Date: Wed, 21 Aug 2019 11:15:11 +0200
Subject: [PATCH] test code to add a gadget to the dashboard
---
src/Board.js | 19 ++++++++++++-------
src/Menu/index.js | 14 ++++++--------
src/index.js | 7 ++++++-
3 files changed, 24 insertions(+), 16 deletions(-)
diff --git a/src/Board.js b/src/Board.js
index 3de574c..c7a4c1e 100755
--- a/src/Board.js
+++ b/src/Board.js
@@ -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')
+ }
}
/**
diff --git a/src/Menu/index.js b/src/Menu/index.js
index 7cb5bf2..58ebe8c 100644
--- a/src/Menu/index.js
+++ b/src/Menu/index.js
@@ -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>
)
-}
+})
diff --git a/src/index.js b/src/index.js
index 7d2c631..05796c3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -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">
--
GitLab