Skip to content

GitLab

Commit 78a604af authored by Sonja Happ's avatar Sonja Happ
Browse files

started creation of scenario element to replace simulation and project, WIP

parent 982e5661
Hide whitespace changes
Inline Side-by-side
src/components/dialogs/edit-scenario.js 0 → 100644
View file @ 78a604af
/**
* File: edit-scenario.js
* Author: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
* Date: 20.08.2019
*
* This file is part of VILLASweb.
*
* VILLASweb is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* VILLASweb is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
import React from 'react';
import {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap';
import Dialog from './dialog';
import ParametersEditor from '../parameters-editor';
class EditScenarioDialog extends React.Component {
valid = true;
constructor(props) {
super(props);
this.state = {
name: '',
id: '',
startParameters: {}
};
}
onClose = canceled => {
if (canceled) {
if (this.props.onClose != null) {
this.props.onClose();
}
return;
}
if (this.valid && this.props.onClose != null) {
this.props.onClose(this.state);
}
};
handleChange = event => {
this.setState({ [event.target.id]: event.target.value });
let name = true;
if (this.state.name === '') {
name = false;
}
this.valid = name;
};
resetState = () => {
this.setState({
name: this.props.scenario.name,
id: this.props.scenario.id,
startParameters: this.props.scenario.startParameters || {}
});
}
handleStartParametersChange = startParameters => {
this.setState({ startParameters });
}
render() {
return <Dialog show={this.props.show} title='Edit Scenario' buttonTitle='Save' onClose={this.onClose} onReset={this.resetState} valid={true}>
<form>
<FormGroup as={Col} controlId='name'>
<FormLabel>Name</FormLabel>
<FormControl type='text' placeholder='Enter name' value={this.state.name} onChange={this.handleChange} />
<FormControl.Feedback />
</FormGroup>
<FormGroup as={Col} controlId='startParameters'>
<FormLabel>Start Parameters</FormLabel>
<ParametersEditor content={this.state.startParameters} onChange={this.handleStartParametersChange} />
</FormGroup>
</form>
</Dialog>;
}
}
export default EditScenarioDialog;
src/components/dialogs/import-scenario.js 0 → 100644
View file @ 78a604af
/**
* File: import-scenario.js
* Author: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
* Date: 20.08.2019
*
* This file is part of VILLASweb.
*
* VILLASweb is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* VILLASweb is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
import React from 'react';
import {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap';
import Dialog from './dialog';
import ParametersEditor from '../parameters-editor';
class ImportScenarioDialog extends React.Component {
valid = false;
imported = false;
constructor(props) {
super(props);
this.state = {
name: '',
running: '',
simulationModels: [],
startParameters: {}
};
}
onClose = canceled => {
if (canceled) {
if (this.props.onClose != null) {
this.props.onClose();
}
return;
}
if (this.valid && this.props.onClose != null) {
this.props.onClose(this.state);
}
}
handleChange(e, index) {
if (e.target.id === 'simulator') {
const models = this.state.models;
models[index].simulator = JSON.parse(e.target.value);
this.setState({ models });
return;
}
this.setState({ [e.target.id]: e.target.value });
// check all controls
let name = true;
if (this.state.name === '') {
name = false;
}
this.valid = name;
}
resetState = () => {
this.setState({ name: '', models: [], startParameters: {} });
this.imported = false;
}
loadFile = event => {
const file = event.target.files[0];
if (!file.type.match('application/json')) {
return;
}
// create file reader
const reader = new FileReader();
const self = this;
reader.onload = onloadEvent => {
const scenario = JSON.parse(onloadEvent.target.result);
// scenario.simulationModels.forEach(model => {
// model.simulator = {
// node: self.props.nodes[0]._id,
// simulator: 0
// };
// });
self.imported = true;
self.valid = true;
self.setState({ name: scenario.name, models: scenario.simulationModels, startParameters: scenario.startParameters, running: scenario.running });
};
reader.readAsText(file);
}
render() {
return <Dialog show={this.props.show} title="Import Scenario" buttonTitle="Import" onClose={this.onClose} onReset={this.resetState} valid={this.valid}>
<form>
<FormGroup as={Col} controlId="file">
<FormLabel>Scenario File</FormLabel>
<FormControl type="file" onChange={this.loadFile} />
</FormGroup>
<FormGroup as={Col} controlId="name">
<FormLabel>Name</FormLabel>
<FormControl readOnly={this.imported === false} type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
<FormControl.Feedback />
</FormGroup>
<FormGroup as={Col}>
<FormLabel>Start Parameters</FormLabel>
<ParametersEditor content={this.state.startParameters} onChange={this.handleStartParametersChange} disabled={this.imported === false} />
</FormGroup>
{/* {this.state.models.map((model, index) => (
<FormGroup controlId="simulator" key={index}>
<FormLabel>{model.name} - Simulator</FormLabel>
<FormControl componentClass="select" placeholder="Select simulator" value={JSON.stringify({ node: model.simulator.node, simulator: model.simulator.simulator})} onChange={(e) => this.handleChange(e, index)}>
{this.props.nodes.map(node => (
node.simulators.map((simulator, index) => (
<option key={node._id + index} value={JSON.stringify({ node: node._id, simulator: index })}>{node.name}/{simulator.name}</option>
))
))}
</FormControl>
</FormGroup>
))} */}
</form>
</Dialog>;
}
}
export default ImportScenarioDialog;
src/components/dialogs/new-scenario.js 0 → 100644
View file @ 78a604af
/**
* File: new-scenario.js
* Author: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
* Date: 20.08.2019
*
* This file is part of VILLASweb.
*
* VILLASweb is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* VILLASweb is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
import React from 'react';
import {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap';
import Dialog from './dialog';
import ParametersEditor from '../parameters-editor';
class NewScenarioDialog extends React.Component {
valid = false;
constructor(props) {
super(props);
this.state = {
name: '',
startParameters: {},
running: false
};
}
onClose = canceled => {
if (canceled) {
if (this.props.onClose != null) {
this.props.onClose();
}
return;
}
if (this.valid && this.props.onClose != null) {
this.props.onClose(this.state);
}
}
handleChange = event => {
this.setState({ [event.target.id]: event.target.value });
// check all controls
let name = true;
if (this.state.name === '') {
name = false;
}
this.valid = name;
}
resetState = () => {
this.setState({ name: '', startParameters: {} });
}
handleStartParametersChange = startParameters => {
this.setState({ startParameters });
}
render() {
return <Dialog show={this.props.show} title="New Scenario" buttonTitle="Add" onClose={this.onClose} onReset={this.resetState} valid={this.valid}>
<form>
<FormGroup as={Col} controlId="name">
<FormLabel>Name</FormLabel>
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={this.handleChange} />
<FormControl.Feedback />
</FormGroup>
<FormGroup as={Col}>
<FormLabel>Start Parameters</FormLabel>
<ParametersEditor content={this.state.startParameters} onChange={this.handleStartParametersChange} />
</FormGroup>
</form>
</Dialog>;
}
}
export default NewScenarioDialog;
src/components/menu-sidebar.js
View file @ 78a604af
......@@ -22,6 +22,9 @@
import React from 'react';
import { NavLink } from 'react-router-dom';
//<li><NavLink to="/simulations" activeClassName="active" title="Simulations">Simulations</NavLink></li>
//<li><NavLink to="/projects" activeClassName="active" title="Projects">Projects</NavLink></li>
class SidebarMenu extends React.Component {
render() {
return (
......@@ -30,8 +33,7 @@ class SidebarMenu extends React.Component {
<ul>
<li><NavLink to="/home" activeClassName="active" title="Home">Home</NavLink></li>
<li><NavLink to="/projects" activeClassName="active" title="Projects">Projects</NavLink></li>
<li><NavLink to="/simulations" activeClassName="active" title="Simulations">Simulations</NavLink></li>
<li><NavLink to="/scenarios" activeClassName="active" title="Scenarios">Scenarios</NavLink></li>
<li><NavLink to="/simulators" activeClassName="active" title="Simulators">Simulators</NavLink></li>
{ this.props.currentRole === 'Admin' ?
<li><NavLink to="/users" activeClassName="active" title="User Management">User Management</NavLink></li> : ''
......
src/containers/app.js
View file @ 78a604af
......@@ -29,7 +29,7 @@ import { Col } from 'react-bootstrap';
import { Hidden } from 'react-grid-system'
import AppDispatcher from '../app-dispatcher';
import SimulationStore from '../stores/simulation-store';
import ScenarioStore from '../stores/scenario-store';
import SimulatorStore from '../stores/simulator-store';
import UserStore from '../stores/user-store';
import NotificationsDataManager from '../data-managers/notifications-data-manager';
......@@ -40,12 +40,14 @@ import Footer from '../components/footer';
import SidebarMenu from '../components/menu-sidebar';
import HeaderMenu from '../components/header-menu';
import Projects from './projects';
import Project from './project';
//import Projects from './projects';
//import Project from './project';
import Simulators from './simulators';
import Visualization from './visualization';
import Simulations from './simulations';
import Simulation from './simulation';
//import Simulations from './simulations';
//import Simulation from './simulation';
import Scenarios from './scenarios'
import Scenario from './scenario'
import SimulationModel from './simulation-model';
import Users from './users';
......@@ -54,7 +56,7 @@ import '../styles/app.css';
class App extends React.Component {
static getStores() {
return [ SimulatorStore, UserStore, SimulationStore ];
return [ SimulatorStore, UserStore, ScenarioStore];
}
static calculateState(prevState) {
......@@ -62,7 +64,7 @@ class App extends React.Component {
return {
simulators: SimulatorStore.getState(),
simulations: SimulationStore.getState(),
scenarios: ScenarioStore.getState(),
currentRole: currentUser ? currentUser.role : '',
currentUsername: currentUser ? currentUser.username: '',
currentUserID: UserStore.getState().userid,
......@@ -90,14 +92,14 @@ class App extends React.Component {
}
componentDidMount() {
// load all simulators and simulations to fetch simulation data
// load all simulators and scenarios to fetch data
AppDispatcher.dispatch({
type: 'simulators/start-load',
token: this.state.token
});
AppDispatcher.dispatch({
type: 'simulations/start-load',
type: 'scenarios/start-load',
token: this.state.token
});
......@@ -142,11 +144,9 @@ class App extends React.Component {
<div className={`app-content app-content-margin-left`}>
<Route exact path="/" component={Home} />
<Route path="/home" component={Home} />
<Route exact path="/projects" component={Projects} />
<Route path="/projects/:project" component={Project} />
<Route path="/visualizations/:visualization" component={Visualization} />
<Route exact path="/simulations" component={Simulations} />
<Route path="/simulations/:simulation" component={Simulation} />
<Route exact path="/scenarios" component={Scenarios} />
<Route path="/scenarios/:scenario" component={Scenario} />
<Route path="/simulationModel/:simulationModel" component={SimulationModel} />
<Route path="/simulators" component={Simulators} />
<Route path="/users" component={Users} />
......@@ -161,6 +161,12 @@ class App extends React.Component {
}
}
// Removed routes
//<Route exact path="/projects" component={Projects} />
//<Route path="/projects/:project" component={Project} />
//<Route exact path="/simulations" component={Simulations} />
//<Route path="/simulations/:simulation" component={Simulation} />
let fluxContainerConverter = require('./FluxContainerConverter');
export default Container.create(fluxContainerConverter.convert(App));
//DragDropContext(HTML5Backend)(Container.create(App));
src/containers/scenario.js 0 → 100644
View file @ 78a604af
/**
* File: scenario.js
* Author: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
* Date: 20.08.2019
*
* This file is part of VILLASweb.
*
* VILLASweb is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* VILLASweb is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
import React from 'react';
import { Container } from 'flux/utils';
import { Button } from 'react-bootstrap';
import FileSaver from 'file-saver';
import _ from 'lodash';
import ScenarioStore from '../stores/scenario-store';
import SimulatorStore from '../stores/simulator-store';
import SimulationModelStore from '../stores/simulation-model-store';
import UserStore from '../stores/user-store';
import AppDispatcher from '../app-dispatcher';
import Icon from '../components/icon';
import Table from '../components/table';
import TableColumn from '../components/table-column';
import ImportSimulationModelDialog from '../components/dialogs/import-simulation-model';
import SimulatorAction from '../components/simulator-action';
import DeleteDialog from '../components/dialogs/delete-dialog';
class Scenario extends React.Component {
static getStores() {
return [ ScenarioStore, SimulatorStore, SimulationModelStore, UserStore ];
}
static calculateState(prevState, props) {
// get selected scenario
const sessionToken = UserStore.getState().token;
let scenario = ScenarioStore.getState().find(s => s.id === props.match.params.scenario);
if (scenario == null) {
AppDispatcher.dispatch({
type: 'scenarios/start-load',
data: props.match.params.scenario,
token: sessionToken
});
scenario = {};
}
// load models
let simulationModels = [];
if (scenario.simulationModels != null) {
simulationModels = SimulationModelStore.getState().filter(m => m != null && scenario.simulationModels.includes(m.id));
}
return {
simulationModels,
scenario,
//simulators: SimulatorStore.getState(),
sessionToken,
deleteModal: false,
importModal: false,
modalData: {},
selectedSimulationModels: []
}
}
componentWillMount() {
AppDispatcher.dispatch({
type: 'scenarios/start-load',
token: this.state.sessionToken
});
AppDispatcher.dispatch({
type: 'simulationModels/start-load',
token: this.state.sessionToken
});
AppDispatcher.dispatch({
type: 'simulators/start-load',
token: this.state.sessionToken
});
//TODO users
//TODO dashboards
}
addSimulationModel = () => {
const simulationModel = {
scenario: this.state.scenario.id,
name: 'New Simulation Model',
simulator: this.state.simulators.length > 0 ? this.state.simulators[0].id : null,
outputLength: 1,
outputMapping: [{ name: 'Signal', type: 'Type' }],
inputLength: 1,
inputMapping: [{ name: 'Signal', type: 'Type' }]
};
AppDispatcher.dispatch({
type: 'simulationModels/start-add',
data: simulationModel,
token: this.state.sessionToken
});
this.setState({ scenario: {} }, () => {
AppDispatcher.dispatch({
type: 'scenarios/start-load',
data: this.props.match.params.scenario,
token: this.state.sessionToken
});
});
}
closeDeleteModal = confirmDelete => {
this.setState({ deleteModal: false });
if (confirmDelete === false) {
return;
}
AppDispatcher.dispatch({
type: 'simulationModels/start-remove',
data: this.state.modalData,
token: this.state.sessionToken
});