From 48057a99ec3d8f86445b7149cee30443c03e655e Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Thu, 2 Mar 2017 14:54:42 +0100 Subject: [PATCH] Add new simulator modal Use bootstrap for buttons, forms, modals --- src/components/dialog-new-simulator.js | 108 +++++++++++++++++++++++++ src/containers/simulators.js | 42 ++++++---- src/index.js | 2 + src/stores/simulator-store.js | 4 +- src/styles/app.css | 10 ++- 5 files changed, 145 insertions(+), 21 deletions(-) create mode 100644 src/components/dialog-new-simulator.js diff --git a/src/components/dialog-new-simulator.js b/src/components/dialog-new-simulator.js new file mode 100644 index 0000000..bce7065 --- /dev/null +++ b/src/components/dialog-new-simulator.js @@ -0,0 +1,108 @@ +/** + * File: dialog-new-simulator.js + * Author: Markus Grigull + * 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 ( + + + New Simulator + + + +
+ + Name + + + + Simulator ID + + + + Endpoint + + +
+ + + + + + + + ); + } + } + + export default NewSimulatorDialog; diff --git a/src/containers/simulators.js b/src/containers/simulators.js index f9687da..03ecb04 100644 --- a/src/containers/simulators.js +++ b/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 { - + + + ); } } -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); diff --git a/src/index.js b/src/index.js index 37758bb..c7cccd4 100644 --- a/src/index.js +++ b/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( diff --git a/src/stores/simulator-store.js b/src/stores/simulator-store.js index f8ff715..66285e1 100644 --- a/src/stores/simulator-store.js +++ b/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': diff --git a/src/styles/app.css b/src/styles/app.css index 6ee6c69..e3c697d 100644 --- a/src/styles/app.css +++ b/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; -} +}*/