Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

standardize 'New Dialog', creating new entity

Browse source
This commit is contained in:
irismarie 2021-04-29 16:05:01 +02:00
parent e86851b25e
commit b0fddfba14
5 changed files with 91 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/dashboard/new-dashboard.js → src/common/dialogs/new-dialog.js
View file

@ -18,49 +18,47 @@
import React from 'react';
import { Form } from 'react-bootstrap';
import Dialog from '../common/dialogs/dialog';
class NewDashboardDialog extends React.Component {
valid: false;
import Dialog from './dialog';
class NewDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
name: ''
value: ''
}
}
onClose(canceled) {
if (canceled === false) {
if (this.valid) {
this.props.onClose(this.state);
}
this.props.onClose(this.state);
} else {
this.props.onClose();
}
}
handleChange(e) {
console.log(e)
this.setState({ [e.target.id]: e.target.value });
}
resetState() {
this.setState({ name: '' });
this.setState({ value: '' });
}
validateForm(target) {
// check all controls
var name = true;
var inputGiven = true;
if (this.state.name === '') {
name = false;
if (this.state.value === '') {
inputGiven = false;
}
this.valid = name;
this.valid = inputGiven;
// return state to control
if (target === 'name') return name ? "success" : "error";
if (target === 'value') return inputGiven ? "success" : "error";
return "success";
}
@ -68,17 +66,18 @@ class NewDashboardDialog extends React.Component {
render() {
return (
<Dialog
size="md"
show={this.props.show}
title="New Dashboard"
title={this.props.title}
buttonTitle="Add"
onClose={(c) => this.onClose(c)}
onReset={() => this.resetState()}
valid={this.valid}
>
<Form>
<Form.Group controlId="name" valid={this.validateForm('name')}>
<Form.Label>Name</Form.Label>
<Form.Control type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
<Form.Group controlId="value" valid={this.validateForm('value')}>
<Form.Label>{this.props.inputLabel}</Form.Label>
<Form.Control type="text" placeholder={this.props.placeholder} value={this.state.value} onChange={(e) => this.handleChange(e)} />
<Form.Control.Feedback />
</Form.Group>
</Form>
@ -87,4 +86,4 @@ class NewDashboardDialog extends React.Component {
}
}
export default NewDashboardDialog;
export default NewDialog;

99
src/componentconfig/config-table.js
View file

@ -15,11 +15,12 @@
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
import React, {Component} from "react";
import React, { Component } from "react";
import FileSaver from 'file-saver';
import IconButton from "../common/icon-button";
import Table from "../common/table";
import TableColumn from "../common/table-column";
import NewDialog from "../common/dialogs/new-dialog";
import DeleteDialog from "../common/dialogs/delete-dialog";
import AppDispatcher from "../common/app-dispatcher";
import NotificationsDataManager from "../common/data-managers/notifications-data-manager";
@ -37,21 +38,21 @@ class ConfigTable extends Component {
editConfigModal: false,
modalConfigData: {},
modalConfigIndex: 0,
newConfigModal: false,
deleteConfigModal: false,
importConfigModal: false,
newConfig: false,
selectedConfigs: [],
ExternalICInUse: false,
editOutputSignalsModal: false,
editInputSignalsModal: false,
editOutputSignalsModal: false,
editInputSignalsModal: false,
}
}
static getDerivedStateFromProps(props, state){
static getDerivedStateFromProps(props, state) {
let ExternalICInUse = false
for (let config of props.configs){
for (let config of props.configs) {
for (let component of props.ics) {
if ((config.icID === component.id) && (component.managedexternally === true)) {
ExternalICInUse = true;
@ -65,26 +66,27 @@ class ConfigTable extends Component {
};
}
addConfig() {
const config = {
scenarioID: this.props.scenario.id,
name: 'New Component Configuration',
icID: this.props.ics.length > 0 ? this.props.ics[0].id : null,
startParameters: {},
};
closeNewConfigModal(data) {
this.setState({ newConfigModal: false });
AppDispatcher.dispatch({
type: 'configs/start-add',
data: config,
token: this.props.sessionToken
});
this.setState({ newConfig: true });
if (data) {
const config = {
scenarioID: this.props.scenario.id,
name: data.value,
icID: this.props.ics.length > 0 ? this.props.ics[0].id : null,
startParameters: {},
};
AppDispatcher.dispatch({
type: 'configs/start-add',
data: config,
token: this.props.sessionToken
});
}
}
closeEditConfigModal(data) {
this.setState({ editConfigModal: false, newConfig: false });
this.setState({ editConfigModal: false });
if (data) {
AppDispatcher.dispatch({
@ -312,27 +314,27 @@ class ConfigTable extends Component {
{/*Component Configurations table*/}
<h2 style={this.props.tableHeadingStyle}>Component Configurations
<span className='icon-button'>
<IconButton
childKey={0}
tooltip='Add Component Configuration'
onClick={() => this.addConfig()}
icon='plus'
disabled={this.props.locked}
hidetooltip={this.props.locked}
buttonStyle={buttonStyle}
iconStyle={iconStyle}
/>
<IconButton
childKey={1}
tooltip='Import Component Configuration'
onClick={() => this.setState({ importConfigModal: true })}
icon='upload'
disabled={this.props.locked}
hidetooltip={this.props.locked}
buttonStyle={buttonStyle}
iconStyle={iconStyle}
/>
</span>
<IconButton
childKey={0}
tooltip='Add Component Configuration'
onClick={() => this.setState({ newConfigModal: true })}
icon='plus'
disabled={this.props.locked}
hidetooltip={this.props.locked}
buttonStyle={buttonStyle}
iconStyle={iconStyle}
/>
<IconButton
childKey={1}
tooltip='Import Component Configuration'
onClick={() => this.setState({ importConfigModal: true })}
icon='upload'
disabled={this.props.locked}
hidetooltip={this.props.locked}
buttonStyle={buttonStyle}
iconStyle={iconStyle}
/>
</span>
</h2>
<Table data={this.props.configs}>
<TableColumn
@ -404,9 +406,9 @@ class ConfigTable extends Component {
<ICAction
ics={this.props.ics}
configs={this.props.configs}
selectedConfigs = {this.state.selectedConfigs}
snapshotConfig = {(index) => this.copyConfig(index)}
token = {this.props.sessionToken}
selectedConfigs={this.state.selectedConfigs}
snapshotConfig={(index) => this.copyConfig(index)}
token={this.props.sessionToken}
actions={[
{ id: '0', title: 'Start', data: { action: 'start' } },
{ id: '1', title: 'Stop', data: { action: 'stop' } },
@ -432,6 +434,13 @@ class ConfigTable extends Component {
onClose={data => this.importConfig(data)}
ics={this.props.ics}
/>
<NewDialog
show={this.state.newConfigModal}
title="New Component Configuration"
inputLabel="Name"
placeholder="Enter name"
onClose={data => this.closeNewConfigModal(data)}
/>
<DeleteDialog
title="component configuration"
name={this.state.modalConfigData.name}

14
src/dashboard/dashboard-table.js
View file

@ -20,11 +20,11 @@ import FileSaver from 'file-saver';
import IconButton from "../common/icon-button";
import Table from "../common/table";
import TableColumn from "../common/table-column";
import NewDashboardDialog from "./new-dashboard";
import EditDashboardDialog from "./edit-dashboard";
import ImportDashboardDialog from "./import-dashboard";
import DeleteDialog from "../common/dialogs/delete-dialog";
import AppDispatcher from "../common/app-dispatcher";
import NewDialog from "../common/dialogs/new-dialog";
class DashboardTable extends Component {
@ -43,15 +43,15 @@ class DashboardTable extends Component {
closeNewDashboardModal(data) {
this.setState({ newDashboardModal: false });
if (data) {
// TODO: 'newDashboard' not used, check this
let newDashboard = data;
let newDashboard = {};
newDashboard["name"] = data.value;
// add default grid value and scenarioID
newDashboard["grid"] = 15;
newDashboard["scenarioID"] = this.props.scenario.id;
AppDispatcher.dispatch({
type: 'dashboards/start-add',
data,
data: newDashboard,
token: this.props.sessionToken,
});
}
@ -218,10 +218,14 @@ class DashboardTable extends Component {
/>
</Table>
<NewDashboardDialog
<NewDialog
show={this.state.newDashboardModal}
title="New Dashboard"
inputLabel="Name"
placeholder="Enter name"
onClose={data => this.closeNewDashboardModal(data)}
/>
<EditDashboardDialog
show={this.state.dashboardEditModal}
dashboard={this.state.modalDashboardData}

77
src/result/new-result.js
View file

@ -1,77 +0,0 @@
/**
* 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 { Form } from 'react-bootstrap';
import Dialog from '../common/dialogs/dialog';
class NewResultDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
ConfigSnapshots: '',
Description: '',
ResultFileIDs: [],
}
}
onClose(canceled) {
if (canceled === false) {
this.props.onClose(this.state);
} else {
this.props.onClose();
}
}
handleChange(e) {
this.setState({ [e.target.id]: e.target.value });
}
resetState() {
this.setState({
ConfigSnapshots: '',
Description: '',
ResultFileIDs: [],
});
}
render() {
return (
<Dialog
show={this.props.show}
title="New Result"
buttonTitle="Add"
onClose={(c) => this.onClose(c)}
onReset={() => this.resetState()}
valid={true}
>
<Form>
<Form.Group controlId="Description">
<Form.Label>Description</Form.Label>
<Form.Control type="text" placeholder="Enter description" value={this.state.Description} onChange={(e) => this.handleChange(e)} />
<Form.Control.Feedback />
</Form.Group>
</Form>
</Dialog>
);
}
}
export default NewResultDialog;

14
src/result/result-table.js
View file

@ -26,7 +26,7 @@ import TableColumn from "../common/table-column";
import DeleteDialog from "../common/dialogs/delete-dialog";
import EditResultDialog from "./edit-result";
import ResultConfigDialog from "./result-configs-dialog";
import NewResultDialog from "./new-result";
import NewDialog from "../common/dialogs/new-dialog";
class ResultTable extends Component {
@ -79,10 +79,13 @@ class ResultTable extends Component {
closeNewResultModal(data) {
this.setState({ newResultModal: false });
if (data) {
data["scenarioID"] = this.props.scenario.id;
let newResult = { ConfigSnapshots: '', ResultFileIDs: [] };
newResult["scenarioID"] = this.props.scenario.id;
newResult["Description"] = data.value;
AppDispatcher.dispatch({
type: 'results/start-add',
data,
data: newResult,
token: this.props.sessionToken,
});
}
@ -245,8 +248,11 @@ class ResultTable extends Component {
resultNo={this.state.modalResultConfigsIndex}
onClose={this.closeResultConfigSnapshots.bind(this)}
/>
<NewResultDialog
<NewDialog
show={this.state.newResultModal}
title="New Result"
inputLabel="Description"
placeholder="Enter description"
onClose={data => this.closeNewResultModal(data)}
/>
</div>