Add new simulator modal

Use bootstrap for buttons, forms, modals

src/components/dialog-new-simulator.js

@@ -0,0 +1,108 @@
+/**
+ * File: dialog-new-simulator.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 02.03.2017
+ * Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
+ *   This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
+ *   Unauthorized copying of this file, via any medium is strictly prohibited.
+ **********************************************************************************/
+
+ import React, { Component } from 'react';
+ import { Modal, Button, FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
+
+ class NewSimulatorDialog extends Component {
+   constructor(props) {
+     super(props);
+
+     this.state = {
+       name: '',
+       simulatorid: '1',
+       endpoint: ''
+     }
+
+     this.closeModal = this.closeModal.bind(this);
+     this.cancelModal = this.cancelModal.bind(this);
+     this.handleChange = this.handleChange.bind(this);
+     this.validateForm = this.validateForm.bind(this);
+     this.resetState = this.resetState.bind(this);
+   }
+
+   valid: false
+
+   closeModal() {
+     this.props.onClose(this.state);
+   }
+
+   cancelModal() {
+     this.props.onClose(null);
+   }
+
+   handleChange(e) {
+     this.setState({ [e.target.id]: e.target.value });
+   }
+
+   resetState() {
+     this.setState({ name: '', simulatorid: '1', endpoint: '' });
+   }
+
+   validateForm(target) {
+     // check all controls
+     var simulatorid = true;
+     var endpoint = true;
+     var name = true;
+
+     if (this.state.name === '') {
+       name = false;
+     }
+
+     // test if simulatorid is a number (in a string, not type of number)
+     if (!/^\d+$/.test(this.state.simulatorid)) {
+       simulatorid = false;
+     }
+
+     if (this.state.endpoint === '') {
+       endpoint = false;
+     }
+
+     this.valid = simulatorid && endpoint && name;
+
+     // return state to control
+     if (target === 'name') return name ? "success" : "error";
+     else if (target === 'simulatorid') return simulatorid ? "success" : "error";
+     else return endpoint ? "success" : "error";
+   }
+
+   render() {
+     return (
+       <Modal show={this.props.show} onEnter={this.resetState}>
+         <Modal.Header>
+           <Modal.Title>New Simulator</Modal.Title>
+         </Modal.Header>
+
+         <Modal.Body>
+           <form>
+             <FormGroup controlId="name" validationState={this.validateForm('name')}>
+               <ControlLabel>Name</ControlLabel>
+               <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={this.handleChange} />
+             </FormGroup>
+             <FormGroup controlId="simulatorid" validationState={this.validateForm('simulatorid')}>
+               <ControlLabel>Simulator ID</ControlLabel>
+               <FormControl type="number" placeholder="Enter simulator ID" value={this.state.simulatorid} onChange={this.handleChange} />
+             </FormGroup>
+             <FormGroup controlId="endpoint" validationState={this.validateForm('endpoint')}>
+               <ControlLabel>Endpoint</ControlLabel>
+               <FormControl type="text" placeholder="Enter endpoint" value={this.state.endpoint} onChange={this.handleChange} />
+             </FormGroup>
+           </form>
+         </Modal.Body>
+
+         <Modal.Footer>
+           <Button onClick={this.cancelModal}>Close</Button>
+           <Button bsStyle="primary" onClick={this.closeModal} disabled={!this.valid}>Add</Button>
+         </Modal.Footer>
+       </Modal>
+     );
+   }
+ }
+
+ export default NewSimulatorDialog;

src/containers/simulators.js

@@ -9,15 +9,24 @@
 
 import React, { Component } from 'react';
 import { Container } from 'flux/utils';
+import { Button } from 'react-bootstrap';
 
 import AppDispatcher from '../app-dispatcher';
 import VillasStore from '../stores/villas-store';
 import SimulatorStore from '../stores/simulator-store';
 
 import Table from '../components/table';
+import NewSimulatorDialog from '../components/dialog-new-simulator';
 import '../styles/projects.css';
 
 class Simulators extends Component {
+  constructor(props) {
+    super(props);
+
+    this.showModal = this.showModal.bind(this);
+    this.closeModal = this.closeModal.bind(this);
+  }
+
   static getStores() {
     return [ VillasStore, SimulatorStore ];
   }
@@ -27,7 +36,7 @@ class Simulators extends Component {
       villas: VillasStore.getState(),
       simulators: SimulatorStore.getState(),
 
-      onButton
+      modal: false
     };
   }
 
@@ -37,6 +46,21 @@ class Simulators extends Component {
     });
   }
 
+  showModal() {
+    this.setState({ modal: true });
+  }
+
+  closeModal(data) {
+    this.setState({ modal : false });
+
+    if (data) {
+      AppDispatcher.dispatch({
+        type: 'simulators/start-add',
+        simulator: data
+      });
+    }
+  }
+
   render() {
     var columns = [
       { title: 'Name', key: 'name' },
@@ -51,22 +75,12 @@ class Simulators extends Component {
 
         <Table columns={columns} data={this.state.simulators} width='100%'/>
 
-        <button onClick={onButton}>New Simulator</button>
+        <Button onClick={this.showModal}>New Simulator</Button>
+
+        <NewSimulatorDialog show={this.state.modal} onClose={this.closeModal}/>
       </div>
     );
   }
 }
 
-function onButton() {
-  AppDispatcher.dispatch({
-    type: 'simulators/start-add',
-    simulator: {
-      name: 'Virtual',
-      running: false,
-      simulatorid: 3,
-      endpoint: '1.1.1.1:1234'
-    }
-  });
-}
-
 export default Container.create(Simulators);

src/index.js

@@ -11,6 +11,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import Router from './router';
+
+import 'bootstrap/dist/css/bootstrap.css';
 import './styles/index.css';
 
 ReactDOM.render(

src/stores/simulator-store.js

@@ -22,8 +22,6 @@ class SimulatorStore extends ReduceStore {
   }
 
   reduce(state, action) {
-    console.log(action.type);
-
     switch (action.type) {
       case 'simulators/start-load':
         SimulatorsDataManager.loadSimulators();
@@ -44,7 +42,7 @@ class SimulatorStore extends ReduceStore {
         // state should always be immutable, thus make new copy
         var simulators = state.slice();
         simulators.push(action.simulator);
-        
+
         return simulators;
 
       case 'simulators/add-error':

src/styles/app.css

@@ -11,7 +11,7 @@
  * Application container
  */
 body {
-  background-color: #6EA2B0;
+  background-color: #6EA2B0 !important;
 }
 
 .app {
@@ -24,7 +24,7 @@ body {
 
 .app header {
   width: 100%;
-  height: 50px;
+  height: 60px;
 
   padding: 10px 0 0 0;
 
@@ -35,6 +35,8 @@ body {
 .app header h1 {
   width: 100%;
 
+  margin: 0;
+
   text-align: center;
 }
 
@@ -119,7 +121,7 @@ body {
 /**
  * Buttons
  */
-button {
+/*button {
   margin-top: 10px;
   padding: 4px 8px;
 
@@ -135,4 +137,4 @@ button {
 
 button:hover {
   background: #6EA2B0;
-}
+}*/