From 4792beea708438bb7972f97ff8218d0a4597d89c Mon Sep 17 00:00:00 2001
From: Sandro Weber <webers@in.tum.de>
Date: Tue, 27 Apr 2021 09:54:08 +0200
Subject: [PATCH] first flexlayout
---
package-lock.json | 5 ++
package.json | 1 +
src/App.js | 14 ++--
.../experiment-list/simulation-details.js | 12 +++-
.../simulation-view/simulation-view.js | 65 +++++++++++++++++++
5 files changed, 87 insertions(+), 10 deletions(-)
create mode 100644 src/components/simulation-view/simulation-view.js
diff --git a/package-lock.json b/package-lock.json
index 3e6f31c..8fec080 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6939,6 +6939,11 @@
"resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
"integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg=="
},
+ "flexlayout-react": {
+ "version": "0.5.5",
+ "resolved": "https://registry.npmjs.org/flexlayout-react/-/flexlayout-react-0.5.5.tgz",
+ "integrity": "sha512-y8fQQ1nfBdSmBELoD/nEplEIxRZfDtHT1Lg50M4iXkvlF9blnkQktmngiYR2tO/wr6fy2+2cV+tX0HXoeHY8cQ=="
+ },
"flush-write-stream": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
diff --git a/package.json b/package.json
index fef55b1..32c471e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"private": true,
"dependencies": {
"bootstrap": "4.5",
+ "flexlayout-react": "0.5.5",
"jszip": "3.2.0",
"react": "^17.0.1",
"react-bootstrap": "1.4.0",
diff --git a/src/App.js b/src/App.js
index cf98ecd..096f392 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,20 +2,18 @@ import React from 'react';
import { HashRouter, Switch, Route } from 'react-router-dom';
-import EntryPage from './components/entry-page/entry-page.js';
-import ExperimentOverview from './components/experiment-overview/experiment-overview.js';
+import EntryPage from './components/entry-page/entry-page';
+import ExperimentOverview from './components/experiment-overview/experiment-overview';
+import SimulationView from './components/simulation-view/simulation-view';
class App extends React.Component {
render() {
return (
<HashRouter>
<Switch>
- <Route path='/experiments-overview'>
- <ExperimentOverview />
- </Route>
- <Route path='/'>
- <EntryPage />
- </Route>
+ <Route path='/experiments-overview' component={ExperimentOverview} />
+ <Route path='/simulation-view/:simID' component={SimulationView} />
+ <Route path='/' component={EntryPage} />
</Switch>
</HashRouter>
);
diff --git a/src/components/experiment-list/simulation-details.js b/src/components/experiment-list/simulation-details.js
index bd8ccb8..26107c7 100644
--- a/src/components/experiment-list/simulation-details.js
+++ b/src/components/experiment-list/simulation-details.js
@@ -1,6 +1,7 @@
import React from 'react';
import { FaStop, FaStopCircle } from 'react-icons/fa';
import { ImEnter } from 'react-icons/im';
+import { withRouter } from 'react-router-dom';
import timeDDHHMMSS from '../../utility/time-filter.js';
import { EXPERIMENT_STATE } from '../../services/experiments/experiment-constants.js';
@@ -8,7 +9,7 @@ import ExperimentExecutionService from '../../services/experiments/execution/exp
import './simulation-details.css';
-export default class SimulationDetails extends React.Component {
+class SimulationDetails extends React.Component {
constructor() {
super();
@@ -78,7 +79,13 @@ export default class SimulationDetails extends React.Component {
ng-click="(simulation.runningSimulation.state === STATE.CREATED) ||
simulation.stopping || joinExperiment(simulation, exp);"*/
type="button" className='nrp-btn btn-default'
- disabled={this.isJoinDisabled(simulation)}>
+ disabled={this.isJoinDisabled(simulation)}
+ onClick={() => {
+ console.info(simulation);
+ this.props.history.push({
+ pathname: '/simulation-view/' + simulation.runningSimulation.simulationID
+ });
+ }}>
<ImEnter className='icon' />Join
</button>
{/* Stop button enabled provided simulation state is consistent */}
@@ -106,3 +113,4 @@ export default class SimulationDetails extends React.Component {
);
}
}
+export default withRouter(SimulationDetails);
diff --git a/src/components/simulation-view/simulation-view.js b/src/components/simulation-view/simulation-view.js
new file mode 100644
index 0000000..8c82d3f
--- /dev/null
+++ b/src/components/simulation-view/simulation-view.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import FlexLayout from 'flexlayout-react';
+
+import '../../../node_modules/flexlayout-react/style/light.css';
+
+const jsonBaseLayout = {
+ global: {},
+ borders: [],
+ layout:{
+ 'type': 'row',
+ 'weight': 100,
+ 'children': [
+ {
+ 'type': 'tabset',
+ 'weight': 50,
+ 'selected': 0,
+ 'children': [
+ {
+ 'type': 'tab',
+ 'name': 'FX',
+ 'component':'grid'
+ }
+ ]
+ },
+ {
+ 'type': 'tabset',
+ 'weight': 50,
+ 'selected': 0,
+ 'children': [
+ {
+ 'type': 'tab',
+ 'name': 'FI',
+ 'component':'grid'
+ }
+ ]
+ }
+ ]
+ }
+};
+
+export default class SimulationView extends React.Component {
+ constructor(props) {
+ super(props);
+ console.info(this.state);
+ console.info(this.props);
+
+ this.state = {model: FlexLayout.Model.fromJson(jsonBaseLayout)};
+ console.info(this.state);
+ }
+
+ factory = (node) => {
+ var component = node.getComponent();
+ if (component === 'button') {
+ return <button>{node.getName()}</button>;
+ }
+ }
+
+ render() {
+ return (
+ <div>
+ <FlexLayout.Layout model={this.state.model} factory={this.factory}/>
+ </div>
+ );
+ }
+}
--
GitLab