mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
replace GlyphIcons by FontAwesome icons
This commit is contained in:
parent
74a3cf4d4b
commit
d4f02c2961
14 changed files with 156 additions and 81 deletions
30
package-lock.json
generated
30
package-lock.json
generated
|
@ -4,6 +4,36 @@
|
|||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome": {
|
||||
"version": "1.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome/-/fontawesome-1.1.8.tgz",
|
||||
"integrity": "sha512-c0/MtkPVT0fmiFcCyYoPjkG9PkMOvfrZw2+0BaJ+Rh6UEcK1AR/LaRgrHHjUkbAbs9LXxQJhFS8CJ4uSnK2+JA==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.1.7"
|
||||
}
|
||||
},
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "0.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz",
|
||||
"integrity": "sha512-ego8jRVSHfq/iq4KRZJKQeUAdi3ZjGNrqw4oPN3fNdvTBnLCSntwVCnc37bsAJP9UB8MhrTfPnZYxkv2vpS4pg=="
|
||||
},
|
||||
"@fortawesome/fontawesome-free-solid": {
|
||||
"version": "5.0.13",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.13.tgz",
|
||||
"integrity": "sha512-b+krVnqkdDt52Yfev0x0ZZgtxBQsLw00Zfa3uaVWIDzpNZVtrEXuxldUSUaN/ihgGhSNi8VpvDAdNPVgCKOSxw==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.1.7"
|
||||
}
|
||||
},
|
||||
"@fortawesome/react-fontawesome": {
|
||||
"version": "0.0.20",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.0.20.tgz",
|
||||
"integrity": "sha512-0a1VYxlCU1oQZzxXK2KIlVArQJSGG3BgBwelLNbR5f2CD6+zQhXXMC9Vm8V4VLO1ZWDeGdjAJZmf7VL/zuuBGQ==",
|
||||
"requires": {
|
||||
"humps": "^2.0.1",
|
||||
"prop-types": "^15.5.7"
|
||||
}
|
||||
},
|
||||
"abab": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz",
|
||||
|
|
|
@ -3,6 +3,9 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome": "^1.1.8",
|
||||
"@fortawesome/fontawesome-free-solid": "^5.0.13",
|
||||
"@fortawesome/react-fontawesome": "0.0.20",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"bootstrap": "^3.3.7",
|
||||
"classnames": "^2.2.5",
|
||||
|
|
|
@ -20,8 +20,10 @@
|
|||
******************************************************************************/
|
||||
|
||||
import React from 'react';
|
||||
import { FormGroup, ControlLabel, Button, Glyphicon } from 'react-bootstrap';
|
||||
import { FormGroup, ControlLabel, Button } from 'react-bootstrap';
|
||||
|
||||
|
||||
import Icon from '../icon';
|
||||
import Table from '../table';
|
||||
import TableColumn from '../table-column';
|
||||
|
||||
|
@ -67,7 +69,7 @@ class EditWidgetColorZonesControl extends React.Component {
|
|||
changeCell = (event, row, column) => {
|
||||
// change row
|
||||
const widget = this.state.widget;
|
||||
|
||||
|
||||
if (column === 1) {
|
||||
widget.zones[row].strokeStyle = event.target.value;
|
||||
} else if (column === 2) {
|
||||
|
@ -96,7 +98,7 @@ class EditWidgetColorZonesControl extends React.Component {
|
|||
checkedCell = (row, event) => {
|
||||
// update selected rows
|
||||
const selectedZones = this.state.selectedZones;
|
||||
|
||||
|
||||
if (event.target.checked) {
|
||||
if (selectedZones.indexOf(row) === -1) {
|
||||
selectedZones.push(row);
|
||||
|
@ -122,8 +124,8 @@ class EditWidgetColorZonesControl extends React.Component {
|
|||
<TableColumn title="Maximum" dataKey="max" inlineEditable onInlineChange={this.changeCell} />
|
||||
</Table>
|
||||
|
||||
<Button onClick={this.addZone} disabled={!this.props.widget.colorZones}><Glyphicon glyph="plus" /> Add</Button>
|
||||
<Button onClick={this.removeZones} disabled={!this.props.widget.colorZones}><Glyphicon glyph="minus" /> Remove</Button>
|
||||
<Button onClick={this.addZone} disabled={!this.props.widget.colorZones}><Icon icon="plus" /> Add</Button>
|
||||
<Button onClick={this.removeZones} disabled={!this.props.widget.colorZones}><Icon icon="minus" /> Remove</Button>
|
||||
</FormGroup>;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -21,7 +21,8 @@
|
|||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Glyphicon, FormControl } from 'react-bootstrap';
|
||||
import { FormControl } from 'react-bootstrap';
|
||||
import Icon from './icon';
|
||||
|
||||
class EditableHeader extends React.Component {
|
||||
titleInput = null;
|
||||
|
@ -64,7 +65,7 @@ class EditableHeader extends React.Component {
|
|||
float: 'left'
|
||||
};
|
||||
|
||||
const glyphStyle = {
|
||||
const iconStyle = {
|
||||
float: 'left',
|
||||
|
||||
marginLeft: '10px',
|
||||
|
@ -84,8 +85,8 @@ class EditableHeader extends React.Component {
|
|||
<FormControl type='text' bsSize='large' value={this.state.title} onChange={this.onChange} style={editStyle} autoFocus />
|
||||
</form>
|
||||
|
||||
<a onClick={this.save}><Glyphicon glyph='ok' style={glyphStyle} /></a>
|
||||
<a onClick={this.cancel}><Glyphicon glyph='remove' style={glyphStyle} /></a>
|
||||
<a onClick={this.save}><Icon icon='check' style={iconStyle} /></a>
|
||||
<a onClick={this.cancel}><Icon icon='times' style={iconStyle} /></a>
|
||||
</div>;
|
||||
}
|
||||
|
||||
|
@ -94,7 +95,7 @@ class EditableHeader extends React.Component {
|
|||
{this.state.title}
|
||||
</h1>
|
||||
|
||||
<a onClick={this.edit}><Glyphicon glyph='pencil' style={glyphStyle} /></a>
|
||||
<a onClick={this.edit}><Icon icon='edit' style={iconStyle} /></a>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -20,7 +20,8 @@
|
|||
******************************************************************************/
|
||||
|
||||
import React from 'react';
|
||||
import { Col, Button, Glyphicon } from 'react-bootstrap';
|
||||
import { Col, Button } from 'react-bootstrap';
|
||||
import Icon from './icon';
|
||||
|
||||
class Header extends React.Component {
|
||||
render() {
|
||||
|
@ -31,7 +32,7 @@ class Header extends React.Component {
|
|||
</Col>
|
||||
<Col xs={2} smHidden mdHidden lgHidden style={{ paddingLeft: 'auto', paddingRight: 0 }}>
|
||||
{this.props.showMenuButton &&
|
||||
<Button bsStyle="link" onClick={this.props.onMenuButton} style={{ float: 'right', marginRight: '10px' }}><Glyphicon glyph="menu-hamburger" className="menu-icon" /></Button>
|
||||
<Button bsStyle="link" onClick={this.props.onMenuButton} style={{ float: 'right', marginRight: '10px' }}><Icon size="3x" icon="bars" className="menu-icon" /></Button>
|
||||
}
|
||||
</Col>
|
||||
</header>
|
||||
|
|
35
src/components/icon.js
Normal file
35
src/components/icon.js
Normal file
|
@ -0,0 +1,35 @@
|
|||
/**
|
||||
* File: icon.js
|
||||
* Author: Steffen Vogel <stvogel@eonerc.rwth-aachen.de>
|
||||
* Date: 09.06.2018
|
||||
*
|
||||
* 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 FontAwesomeIcon from '@fortawesome/react-fontawesome'
|
||||
|
||||
import '@fortawesome/fontawesome-free-solid';
|
||||
|
||||
class Icon extends React.Component {
|
||||
|
||||
render() {
|
||||
return <FontAwesomeIcon size={this.props.size} style={this.props.style} icon={this.props.icon} />
|
||||
}
|
||||
}
|
||||
|
||||
export default Icon;
|
|
@ -21,8 +21,9 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import _ from 'lodash';
|
||||
import { Table, Button, Glyphicon, FormControl, Label, Checkbox } from 'react-bootstrap';
|
||||
import { Table, Button, FormControl, Label, Checkbox } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Icon from './icon';
|
||||
|
||||
class CustomTable extends Component {
|
||||
constructor(props) {
|
||||
|
@ -97,11 +98,11 @@ class CustomTable extends Component {
|
|||
|
||||
// add buttons
|
||||
if (child.props.editButton) {
|
||||
cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onEdit(index)} disabled={child.props.onEdit == null}><Glyphicon glyph='pencil' /></Button>);
|
||||
cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onEdit(index)} disabled={child.props.onEdit == null}><Icon icon='edit' /></Button>);
|
||||
}
|
||||
|
||||
if (child.props.deleteButton) {
|
||||
cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onDelete(index)} disabled={child.props.onDelete == null}><Glyphicon glyph='remove' /></Button>);
|
||||
cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onDelete(index)} disabled={child.props.onDelete == null}><Icon icon='trash' /></Button>);
|
||||
}
|
||||
|
||||
if (child.props.checkbox) {
|
||||
|
@ -111,7 +112,7 @@ class CustomTable extends Component {
|
|||
}
|
||||
|
||||
if (child.props.exportButton) {
|
||||
cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onExport(index)} disabled={child.props.onExport == null}><Glyphicon glyph='export' /></Button>);
|
||||
cell.push(<Button bsClass='table-control-button' onClick={() => child.props.onExport(index)} disabled={child.props.onExport == null}><Icon icon='download' /></Button>);
|
||||
}
|
||||
|
||||
return cell;
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import { Container } from 'flux/utils';
|
||||
import { Button, Glyphicon } from 'react-bootstrap';
|
||||
import { Button } from 'react-bootstrap';
|
||||
import FileSaver from 'file-saver';
|
||||
|
||||
import AppDispatcher from '../app-dispatcher';
|
||||
|
@ -30,6 +30,7 @@ import UserStore from '../stores/user-store';
|
|||
import VisualizationStore from '../stores/visualization-store';
|
||||
import SimulationStore from '../stores/simulation-store';
|
||||
|
||||
import Icon from '../components/icon';
|
||||
import CustomTable from '../components/table';
|
||||
import TableColumn from '../components/table-column';
|
||||
import NewVisualzationDialog from '../components/dialog/new-visualization';
|
||||
|
@ -128,7 +129,7 @@ class Visualizations extends Component {
|
|||
|
||||
if (confirmDelete === false) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'visualizations/start-remove',
|
||||
|
@ -190,7 +191,7 @@ class Visualizations extends Component {
|
|||
onModalKeyPress = (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
|
||||
|
||||
this.confirmDeleteModal();
|
||||
}
|
||||
}
|
||||
|
@ -206,19 +207,19 @@ class Visualizations extends Component {
|
|||
|
||||
<CustomTable data={this.state.visualizations}>
|
||||
<TableColumn title='Name' dataKey='name' link='/visualizations/' linkKey='_id' />
|
||||
<TableColumn
|
||||
width='100'
|
||||
editButton
|
||||
deleteButton
|
||||
<TableColumn
|
||||
width='100'
|
||||
editButton
|
||||
deleteButton
|
||||
exportButton
|
||||
onEdit={(index) => this.setState({ editModal: true, modalData: this.state.visualizations[index] })}
|
||||
onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.visualizations[index] })}
|
||||
onEdit={(index) => this.setState({ editModal: true, modalData: this.state.visualizations[index] })}
|
||||
onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.visualizations[index] })}
|
||||
onExport={index => this.exportVisualization(index)}
|
||||
/>
|
||||
</CustomTable>
|
||||
|
||||
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Glyphicon glyph="plus" /> Visualization</Button>
|
||||
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Glyphicon glyph="import" /> Import</Button>
|
||||
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" /> Visualization</Button>
|
||||
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /> Import</Button>
|
||||
|
||||
<NewVisualzationDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
|
||||
<EditVisualizationDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} visualization={this.state.modalData} />
|
||||
|
|
|
@ -21,13 +21,14 @@
|
|||
|
||||
import React from 'react';
|
||||
import { Container } from 'flux/utils';
|
||||
import { Button, Glyphicon } from 'react-bootstrap';
|
||||
import { Button } from 'react-bootstrap';
|
||||
|
||||
import AppDispatcher from '../app-dispatcher';
|
||||
import ProjectStore from '../stores/project-store';
|
||||
import UserStore from '../stores/user-store';
|
||||
import SimulationStore from '../stores/simulation-store';
|
||||
|
||||
import Icon from '../components/icon';
|
||||
import Table from '../components/table';
|
||||
import TableColumn from '../components/table-column';
|
||||
import NewProjectDialog from '../components/dialog/new-project';
|
||||
|
@ -117,14 +118,14 @@ class Projects extends React.Component {
|
|||
const simulations = this.state.simulations.filter(simulation => {
|
||||
return simulation.models.length > 0;
|
||||
});
|
||||
|
||||
|
||||
return simulations.length > 0;
|
||||
}
|
||||
|
||||
onModalKeyPress = (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
|
||||
|
||||
this.confirmDeleteModal();
|
||||
}
|
||||
}
|
||||
|
@ -140,7 +141,7 @@ class Projects extends React.Component {
|
|||
<TableColumn width='70' editButton deleteButton onEdit={index => this.setState({ editModal: true, modalData: this.state.projects[index] })} onDelete={index => this.setState({ deleteModal: true, modalData: this.state.projects[index] })} />
|
||||
</Table>
|
||||
|
||||
<Button onClick={() => this.setState({ newModal: true })} disabled={!this.hasValidSimulation()}><Glyphicon glyph='plus' /> Project</Button>
|
||||
<Button onClick={() => this.setState({ newModal: true })} disabled={!this.hasValidSimulation()}><Icon icon='plus' /> Project</Button>
|
||||
|
||||
{!this.hasValidSimulation() &&
|
||||
<span><i> Simulation with at least one simulation-model required!</i></span>
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
import React from 'react';
|
||||
import { Container } from 'flux/utils';
|
||||
import { Button, Glyphicon } from 'react-bootstrap';
|
||||
import { Button } from 'react-bootstrap';
|
||||
import FileSaver from 'file-saver';
|
||||
import _ from 'lodash';
|
||||
|
||||
|
@ -31,6 +31,7 @@ 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/dialog/import-simulation-model';
|
||||
|
@ -146,7 +147,7 @@ class Simulation extends React.Component {
|
|||
simulationModel.simulation = this.state.simulation._id;
|
||||
|
||||
console.log(simulationModel);
|
||||
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulationModels/start-add',
|
||||
data: simulationModel,
|
||||
|
@ -173,7 +174,7 @@ class Simulation extends React.Component {
|
|||
exportModel(index) {
|
||||
// filter properties
|
||||
const model = Object.assign({}, this.state.simulationModels[index]);
|
||||
|
||||
|
||||
delete model.simulator;
|
||||
delete model.simulation;
|
||||
|
||||
|
@ -222,7 +223,7 @@ class Simulation extends React.Component {
|
|||
}
|
||||
|
||||
if (action.data.action === 'start') {
|
||||
action.data.parameters = this.state.simulationModels[index].startParameters;
|
||||
action.data.parameters = this.state.simulationModels[index].startParameters;
|
||||
}
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
|
@ -248,31 +249,31 @@ class Simulation extends React.Component {
|
|||
<TableColumn title='Simulator' dataKey='simulator' modifier={(simulator) => this.getSimulatorName(simulator)} />
|
||||
<TableColumn title='Output' dataKey='outputLength' width='100' />
|
||||
<TableColumn title='Input' dataKey='inputLength' width='100' />
|
||||
<TableColumn
|
||||
title=''
|
||||
width='70'
|
||||
deleteButton
|
||||
<TableColumn
|
||||
title=''
|
||||
width='70'
|
||||
deleteButton
|
||||
exportButton
|
||||
onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.simulationModels[index], modalIndex: index })}
|
||||
onDelete={(index) => this.setState({ deleteModal: true, modalData: this.state.simulationModels[index], modalIndex: index })}
|
||||
onExport={index => this.exportModel(index)}
|
||||
/>
|
||||
</Table>
|
||||
|
||||
<div style={{ float: 'left' }}>
|
||||
<SimulatorAction
|
||||
runDisabled={this.state.selectedSimulationModels.length === 0}
|
||||
<SimulatorAction
|
||||
runDisabled={this.state.selectedSimulationModels.length === 0}
|
||||
runAction={this.runAction}
|
||||
actions={[
|
||||
{ id: '0', title: 'Start', data: { action: 'start' } },
|
||||
{ id: '1', title: 'Stop', data: { action: 'stop' } },
|
||||
{ id: '2', title: 'Pause', data: { action: 'pause' } },
|
||||
{ id: '3', title: 'Resume', data: { action: 'resume' } }
|
||||
{ id: '0', title: 'Start', data: { action: 'start' } },
|
||||
{ id: '1', title: 'Stop', data: { action: 'stop' } },
|
||||
{ id: '2', title: 'Pause', data: { action: 'pause' } },
|
||||
{ id: '3', title: 'Resume', data: { action: 'resume' } }
|
||||
]}/>
|
||||
</div>
|
||||
|
||||
<div style={{ float: 'right' }}>
|
||||
<Button onClick={this.addSimulationModel} style={buttonStyle}><Glyphicon glyph="plus" /> Simulation Model</Button>
|
||||
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Glyphicon glyph="import" /> Import</Button>
|
||||
<Button onClick={this.addSimulationModel} style={buttonStyle}><Icon icon="plus" /> Simulation Model</Button>
|
||||
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /> Import</Button>
|
||||
</div>
|
||||
|
||||
<div style={{ clear: 'both' }} />
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import { Container } from 'flux/utils';
|
||||
import { Button, Glyphicon } from 'react-bootstrap';
|
||||
import { Button } from 'react-bootstrap';
|
||||
import FileSaver from 'file-saver';
|
||||
|
||||
import AppDispatcher from '../app-dispatcher';
|
||||
|
@ -30,6 +30,7 @@ import UserStore from '../stores/user-store';
|
|||
import SimulatorStore from '../stores/simulator-store';
|
||||
import SimulationModelStore from '../stores/simulation-model-store';
|
||||
|
||||
import Icon from '../components/icon';
|
||||
import Table from '../components/table';
|
||||
import TableColumn from '../components/table-column';
|
||||
import NewSimulationDialog from '../components/dialog/new-simulation';
|
||||
|
@ -101,7 +102,7 @@ class Simulations extends Component {
|
|||
token: this.state.sessionToken
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if (simulatorIds.length > 0) {
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulators/start-load',
|
||||
|
@ -190,7 +191,7 @@ class Simulations extends Component {
|
|||
onModalKeyPress = (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
|
||||
|
||||
this.confirmDeleteModal();
|
||||
}
|
||||
}
|
||||
|
@ -259,9 +260,9 @@ class Simulations extends Component {
|
|||
}
|
||||
|
||||
if (action.data.action === 'start') {
|
||||
action.data.parameters = Object.assign({}, this.state.simulations[index].startParameters, simulationModel.startParameters);
|
||||
action.data.parameters = Object.assign({}, this.state.simulations[index].startParameters, simulationModel.startParameters);
|
||||
}
|
||||
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'simulators/start-action',
|
||||
simulator,
|
||||
|
@ -284,32 +285,32 @@ class Simulations extends Component {
|
|||
<Table data={this.state.simulations}>
|
||||
<TableColumn checkbox onChecked={(index, event) => this.onSimulationChecked(index, event)} width='30' />
|
||||
<TableColumn title='Name' dataKey='name' link='/simulations/' linkKey='_id' />
|
||||
<TableColumn
|
||||
width='100'
|
||||
editButton
|
||||
deleteButton
|
||||
exportButton
|
||||
onEdit={index => this.setState({ editModal: true, modalSimulation: this.state.simulations[index] })}
|
||||
onDelete={index => this.setState({ deleteModal: true, modalSimulation: this.state.simulations[index] })}
|
||||
<TableColumn
|
||||
width='100'
|
||||
editButton
|
||||
deleteButton
|
||||
exportButton
|
||||
onEdit={index => this.setState({ editModal: true, modalSimulation: this.state.simulations[index] })}
|
||||
onDelete={index => this.setState({ deleteModal: true, modalSimulation: this.state.simulations[index] })}
|
||||
onExport={index => this.exportSimulation(index)}
|
||||
/>
|
||||
</Table>
|
||||
|
||||
<div style={{ float: 'left' }}>
|
||||
<SimulatorAction
|
||||
runDisabled={this.state.selectedSimulations.length === 0}
|
||||
<SimulatorAction
|
||||
runDisabled={this.state.selectedSimulations.length === 0}
|
||||
runAction={this.runAction}
|
||||
actions={[
|
||||
{ id: '0', title: 'Start', data: { action: 'start' } },
|
||||
{ id: '1', title: 'Stop', data: { action: 'stop' } },
|
||||
{ id: '2', title: 'Pause', data: { action: 'pause' } },
|
||||
{ id: '3', title: 'Resume', data: { action: 'resume' } }
|
||||
actions={[
|
||||
{ id: '0', title: 'Start', data: { action: 'start' } },
|
||||
{ id: '1', title: 'Stop', data: { action: 'stop' } },
|
||||
{ id: '2', title: 'Pause', data: { action: 'pause' } },
|
||||
{ id: '3', title: 'Resume', data: { action: 'resume' } }
|
||||
]}/>
|
||||
</div>
|
||||
|
||||
<div style={{ float: 'right' }}>
|
||||
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Glyphicon glyph="plus" /> Simulation</Button>
|
||||
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Glyphicon glyph="import" /> Import</Button>
|
||||
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" /> Simulation</Button>
|
||||
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /> Import</Button>
|
||||
</div>
|
||||
|
||||
<div style={{ clear: 'both' }} />
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import { Container } from 'flux/utils';
|
||||
import { Button, Glyphicon } from 'react-bootstrap';
|
||||
import { Button } from 'react-bootstrap';
|
||||
import FileSaver from 'file-saver';
|
||||
import _ from 'lodash';
|
||||
|
||||
|
@ -29,6 +29,7 @@ import AppDispatcher from '../app-dispatcher';
|
|||
import SimulatorStore from '../stores/simulator-store';
|
||||
import UserStore from '../stores/user-store';
|
||||
|
||||
import Icon from '../components/icon';
|
||||
import Table from '../components/table';
|
||||
import TableColumn from '../components/table-column';
|
||||
import NewSimulatorDialog from '../components/dialog/new-simulator';
|
||||
|
@ -175,7 +176,7 @@ class Simulators extends Component {
|
|||
}
|
||||
|
||||
isSimulatorOnline(state) {
|
||||
return state != '' && state !== 'shutdown' && state !== 'unknown';
|
||||
return state !== '' && state !== 'shutdown' && state !== 'unknown';
|
||||
}
|
||||
|
||||
stateLabelStyle = (state, simulator) => {
|
||||
|
@ -245,8 +246,8 @@ class Simulators extends Component {
|
|||
</div>
|
||||
|
||||
<div style={{ float: 'right' }}>
|
||||
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Glyphicon glyph="plus" /> Simulator</Button>
|
||||
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Glyphicon glyph="import" /> Import</Button>
|
||||
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" /> Simulator</Button>
|
||||
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /> Import</Button>
|
||||
</div>
|
||||
|
||||
<div style={{ clear: 'both' }} />
|
||||
|
|
|
@ -21,12 +21,13 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import { Container } from 'flux/utils';
|
||||
import { Button, Glyphicon } from 'react-bootstrap';
|
||||
import { Button } from 'react-bootstrap';
|
||||
|
||||
import AppDispatcher from '../app-dispatcher';
|
||||
import UserStore from '../stores/user-store';
|
||||
import UsersStore from '../stores/users-store';
|
||||
|
||||
import Icon from '../components/icon';
|
||||
import Table from '../components/table';
|
||||
import TableColumn from '../components/table-column';
|
||||
import NewUserDialog from '../components/dialog/new-user';
|
||||
|
@ -102,14 +103,14 @@ class Users extends Component {
|
|||
|
||||
getHumanRoleName(role_key) {
|
||||
const HUMAN_ROLE_NAMES = {admin: 'Administrator', user: 'User', guest: 'Guest'};
|
||||
|
||||
|
||||
return HUMAN_ROLE_NAMES.hasOwnProperty(role_key)? HUMAN_ROLE_NAMES[role_key] : '';
|
||||
}
|
||||
|
||||
onModalKeyPress = (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
|
||||
|
||||
this.confirmDeleteModal();
|
||||
}
|
||||
}
|
||||
|
@ -127,7 +128,7 @@ class Users extends Component {
|
|||
<TableColumn width='70' editButton deleteButton onEdit={index => this.setState({ editModal: true, modalData: this.state.users[index] })} onDelete={index => this.setState({ deleteModal: true, modalData: this.state.users[index] })} />
|
||||
</Table>
|
||||
|
||||
<Button onClick={() => this.setState({ newModal: true })}><Glyphicon glyph='plus' /> User</Button>
|
||||
<Button onClick={() => this.setState({ newModal: true })}><Icon icon='plus' /> User</Button>
|
||||
|
||||
<NewUserDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />
|
||||
<EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />
|
||||
|
|
|
@ -373,10 +373,6 @@ body {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.section-header .glyphicon {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.section-buttons-group-right {
|
||||
height: auto !important;
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue