Skip to content
Snippets Groups Projects
Commit bec76eb5 authored by Sandro Weber's avatar Sandro Weber
Browse files

leave sim dialog, can stop sim

parent 0c5433df
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/simulation-view/leave-simulation-dialog.css 0 → 100644
+ 4
− 0
View file @ bec76eb5
.leave-simulation-dialog-header {
color: black;
background-color: white;
}
\ No newline at end of file
src/components/simulation-view/leave-simulation-dialog.js 0 → 100644
+ 34
− 0
View file @ bec76eb5
import React from 'react';
import {Button } from 'react-bootstrap';
import Modal from 'react-bootstrap/Modal';
import './leave-simulation-dialog.css';
class LeaveSimulationDialog extends React.Component{
render(){
return (
<div>
<div>
<Modal show={this.props.visible} onHide={() => this.props.setVisibility(false)}>
<Modal.Header closeButton className="leave-simulation-dialog-header">
<Modal.Title>Exit menu</Modal.Title>
</Modal.Header>
<Modal.Body>Would you like to leave or stop the simulation?</Modal.Body>
<Modal.Footer>
<div>
<Button variant="light">
Leave
</Button>
<Button variant="danger" onClick={this.props.stopSimulation()}>
Stop
</Button>
</div>
</Modal.Footer>
</Modal>
</div>
</div>
);
}
}
export default LeaveSimulationDialog;
\ No newline at end of file
src/components/simulation-view/simulation-view.css
+ 1
− 1
View file @ bec76eb5
.simulation-view-wrapper { .simulation-view-wrapper {
display: grid; display: grid;
grid-template-rows: auto auto; grid-template-rows: auto auto;
grid-template-columns: 66px auto; grid-template-columns: 68px auto;
grid-template-areas: grid-template-areas:
"simulation-view-header simulation-view-header" "simulation-view-header simulation-view-header"
"simulation-view-sidebar simulation-view-mainview"; "simulation-view-sidebar simulation-view-mainview";
......
src/components/simulation-view/simulation-view.js
+ 100
− 60
View file @ bec76eb5
...@@ -7,10 +7,12 @@ import { TiMediaRecord } from 'react-icons/ti'; ...@@ -7,10 +7,12 @@ import { TiMediaRecord } from 'react-icons/ti';
import { VscDebugRestart } from 'react-icons/vsc'; import { VscDebugRestart } from 'react-icons/vsc';
import SimulationToolsService from './simulation-tools-service'; import SimulationToolsService from './simulation-tools-service';
import RunningSimulationService from '../../services/experiments/execution/running-simulation-service';
import ExperimentStorageService from '../../services/experiments/files/experiment-storage-service'; import ExperimentStorageService from '../../services/experiments/files/experiment-storage-service';
import RunningSimulationService from '../../services/experiments/execution/running-simulation-service';
import { EXPERIMENT_STATE } from '../../services/experiments/experiment-constants'; import { EXPERIMENT_STATE } from '../../services/experiments/experiment-constants';
import LeaveSimulationDialog from './leave-simulation-dialog';
import '../../../node_modules/flexlayout-react/style/light.css'; import '../../../node_modules/flexlayout-react/style/light.css';
import './simulation-view.css'; import './simulation-view.css';
...@@ -47,19 +49,40 @@ export default class SimulationView extends React.Component { ...@@ -47,19 +49,40 @@ export default class SimulationView extends React.Component {
this.simulationID = simulationID; this.simulationID = simulationID;
this.serverURL = 'http://' + this.serverIP + ':8080'; // this should probably be part of some config this.serverURL = 'http://' + this.serverIP + ':8080'; // this should probably be part of some config
this.state = {model: FlexLayout.Model.fromJson(jsonBaseLayout)}; this.state = {
this.updateSimulationInfo(); model: FlexLayout.Model.fromJson(jsonBaseLayout),
showLeaveDialog: false
};
this.refLayout = React.createRef(); this.refLayout = React.createRef();
} }
async componentDidMount() {
await this.updateSimulationInfo();
let experiments = await ExperimentStorageService.instance.getExperiments();
let experimentInfo = experiments.find(experiment => experiment.id === this.state.simulationInfo.experimentID);
let experimentName = experimentInfo.configuration.name;
this.setState({experimentName: experimentName});
this.intervalUpdateInternalPageInfo = setInterval(() => {
this.updateInternalPageInfo();
}, SimulationView.CONSTANTS.INTERVAL_INTERNAL_UPDATE_MS);
}
componentWillUnmount() {
this.intervalUpdateInternalPageInfo && clearInterval(this.intervalUpdateInternalPageInfo);
}
async updateSimulationInfo() { async updateSimulationInfo() {
let simInfo = await RunningSimulationService.instance.getInfo(this.serverURL, this.simulationID); let simInfo = await RunningSimulationService.instance.getInfo(this.serverURL, this.simulationID);
console.info(simInfo); console.info(simInfo);
let experiments = await ExperimentStorageService.instance.getExperiments(); this.setState({simulationInfo: simInfo});
let experimentName = experiments.find(experiment => experiment.id === simInfo.experimentID).configuration.name; }
this.setState({simulationInfo: simInfo, experimentName: experimentName}); async updateInternalPageInfo() {
let dateNow = new Date();
let dateSimCreation = new Date(this.state.simulationInfo.creationDate);
console.info(dateNow - dateSimCreation);
} }
async onButtonStartPause() { async onButtonStartPause() {
...@@ -71,67 +94,84 @@ export default class SimulationView extends React.Component { ...@@ -71,67 +94,84 @@ export default class SimulationView extends React.Component {
this.updateSimulationInfo(); this.updateSimulationInfo();
} }
showLeaveDialog(show) {
this.setState({showLeaveDialog: show});
}
render() { render() {
return ( return (
<div className='simulation-view-wrapper'> <div>
<div className='simulation-view-header'> <LeaveSimulationDialog visible={this.state.showLeaveDialog}
<div className='simulation-view-controls'> setVisibility={this.showLeaveDialog.bind(this)}
<div className='simulation-view-control-buttons'> stopSimulation={() => {
<button className='nrp-btn btn-default'><GiExitDoor className='icon' /></button> RunningSimulationService.instance.updateState(this.serverURL, this.simulationID, EXPERIMENT_STATE.STOPPED);
<button className='nrp-btn btn-default'><VscDebugRestart className='icon' /></button> }}/>
<button className='nrp-btn btn-default' onClick={() => { <div className='simulation-view-wrapper'>
this.onButtonStartPause(); <div className='simulation-view-header'>
}}> <div className='simulation-view-controls'>
{this.state.simulationInfo && this.state.simulationInfo.state === EXPERIMENT_STATE.PAUSED <div className='simulation-view-control-buttons'>
? <RiPlayFill className='icon' /> <button className='nrp-btn btn-default' onClick={() => this.showLeaveDialog(true)}>
: <RiPauseFill className='icon' />} <GiExitDoor className='icon' />
</button> </button>
<button className='nrp-btn btn-default'><TiMediaRecord className='icon' /></button> <button className='nrp-btn btn-default'><VscDebugRestart className='icon' /></button>
</div> <button className='nrp-btn btn-default' onClick={() => {
this.onButtonStartPause();
}}>
{this.state.simulationInfo && this.state.simulationInfo.state === EXPERIMENT_STATE.PAUSED
? <RiPlayFill className='icon' />
: <RiPauseFill className='icon' />}
</button>
<button className='nrp-btn btn-default'><TiMediaRecord className='icon' /></button>
</div>
<div className='simulation-view-time-info'> <div className='simulation-view-time-info'>
<div>Simulation time:</div> <div>Simulation time:</div>
<div>{'00 00:00:00'}</div> <div>{'00 00:00:00'}</div>
<div>Real time:</div> <div>Real time:</div>
<div>{'11 11:11:11'}</div> <div>{'11 11:11:11'}</div>
<div>Real timeout:</div> <div>Real timeout:</div>
<div>{'22 22:22:22'}</div> <div>{'22 22:22:22'}</div>
</div>
</div> </div>
</div>
<div className='simulation-view-experiment-title'>{this.state.experimentName}</div> <div className='simulation-view-experiment-title'>{this.state.experimentName}</div>
<button className='nrp-btn btn-default'><RiLayout6Line className='icon' /></button> <button className='nrp-btn btn-default'><RiLayout6Line className='icon' /></button>
</div> </div>
<div className='simulation-view-sidebar'> <div className='simulation-view-sidebar'>
{Array.from(SimulationToolsService.instance.tools.values()).map(tool => { {Array.from(SimulationToolsService.instance.tools.values()).map(tool => {
return ( return (
<OverlayTrigger <OverlayTrigger
key={`overlaytrigger-${tool.flexlayoutNode.component}`} key={`overlaytrigger-${tool.flexlayoutNode.component}`}
placement={'right'} placement={'right'}
overlay={ overlay={
<Tooltip id={`tooltip-${tool.flexlayoutNode.component}`}> <Tooltip id={`tooltip-${tool.flexlayoutNode.component}`}>
{tool.flexlayoutNode.name} {tool.flexlayoutNode.name}
</Tooltip> </Tooltip>
} }
> >
<Button key={tool.flexlayoutNode.component} <Button key={tool.flexlayoutNode.component}
className="simulation-tool-button" className="simulation-tool-button"
onMouseDown={() => { onMouseDown={() => {
SimulationToolsService.instance.startToolDrag( SimulationToolsService.instance.startToolDrag(
tool.flexlayoutNode, tool.flexlayoutNode,
this.refLayout); this.refLayout);
}}>{tool.getIcon && tool.getIcon()}</Button> }}>{tool.getIcon && tool.getIcon()}</Button>
</OverlayTrigger> </OverlayTrigger>
); );
})} })}
</div> </div>
<div className='simulation-view-mainview'> <div className='simulation-view-mainview'>
<FlexLayout.Layout ref={this.refLayout} model={this.state.model} <FlexLayout.Layout ref={this.refLayout} model={this.state.model}
factory={(node) => { factory={(node) => {
return SimulationToolsService.instance.flexlayoutNodeFactory(node); return SimulationToolsService.instance.flexlayoutNodeFactory(node);
}} /> }} />
</div>
</div> </div>
</div> </div>
); );
} }
} }
SimulationView.CONSTANTS = Object.freeze({
INTERVAL_INTERNAL_UPDATE_MS: 1000
});
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