From 83712a7693f8b326c3f20fcba5c40f4b2856184c Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Sat, 6 Mar 2021 13:55:06 +0100 Subject: [PATCH 01/39] ic-action: allow start action without any model files --- src/ic/ic-action.js | 83 ++++++++++----------------------------------- 1 file changed, 17 insertions(+), 66 deletions(-) diff --git a/src/ic/ic-action.js b/src/ic/ic-action.js index 2d08af4..0565be7 100644 --- a/src/ic/ic-action.js +++ b/src/ic/ic-action.js @@ -61,7 +61,7 @@ class ICAction extends React.Component { return; } - if (!this.props.hasConfigs){ + if (!this.props.hasConfigs) { let newAction = {}; newAction["action"] = action.data.action newAction["when"] = when @@ -71,38 +71,22 @@ class ICAction extends React.Component { let icID = ic.id; /* VILLAScontroller protocol - see: https://villas.fein-aachen.org/doc/controller-protocol.html + * see: https://villas.fein-aachen.org/doc/controller-protocol.html + */ - RESET SHUTDOWN - { - "action": "reset/shutdown/stop/pause/resume" - "when": "1234567" - } - - DELETE - { - "action": "delete" - "parameters":{ - "uuid": "uuid-of-the-manager-for-this-IC" - } - "when": "1234567" - } - - CREATE is not possible within ICAction (see add IC) - */ - - if (newAction.action === "delete"){ + if (newAction.action === "delete") { // prepare parameters for delete incl. correct IC id newAction["parameters"] = {}; newAction.parameters["uuid"] = ic.uuid; // get the ID of the manager IC let managerIC = null; - for (let i of this.props.ics){ - if (i.uuid === ic.manager){ + for (let i of this.props.ics) { + if (i.uuid === ic.manager) { managerIC = i; } } - if (managerIC == null){ + + if (managerIC == null) { NotificationsDataManager.addNotification(NotificationsFactory.DELETE_ERROR("Could not find manager IC with UUID " + ic.manager)); continue; } @@ -120,38 +104,9 @@ class ICAction extends React.Component { } // end for loop over selected ICs } else { - - /*VILLAScontoller protocol - see: https://villas.fein-aachen.org/doc/controller-protocol.html - * - * STOP PAUSE RESUME - { - "action": "reset/shutdown/stop/pause/resume" - "when": "1234567" - } - * - * START - { - "action": "start" - "when": 1234567 - "parameters": { - Start parameters for this IC as configured in the component config - } - "model": { - "type": "url" - "url": "https://villas.k8s.eonerc.rwth-aachen.de/api/v2/files/{fileID}" where fileID is the model file configured in the component config - "token": "asessiontoken" - } - "results":{ - "type": "url" - "url" : "https://villas.k8s.eonerc.rwth-aachen.de/api/v2/results/{resultID}/file" where resultID is the ID of the result created for this run - "token": "asessiontoken" - } - } - * - * - * */ - + /* VILLAScontoller protocol + * see: https://villas.fein-aachen.org/doc/controller-protocol.html + */ let newActions = []; for (let config of this.props.selectedConfigs) { @@ -177,14 +132,13 @@ class ICAction extends React.Component { if (newAction.action === 'start') { newAction["parameters"] = config.startParameters; - - if (config.fileIDs.length > 0){ + if (config.fileIDs && config.fileIDs.length > 0) { newAction["model"] = {} - newAction.model["type"] = "url" + newAction.model["type"] = "url-list" newAction.model["token"] = this.props.token let fileURLs = [] - for (let fileID of config.fileIDs){ + for (let fileID of config.fileIDs) { fileURLs.push("/files/" + fileID.toString()) } newAction.model["url"] = fileURLs @@ -194,7 +148,6 @@ class ICAction extends React.Component { newAction.results["type"] = "url" newAction.results["token"] = this.props.token newAction.results["url"] = "/results/RESULTID/file" // RESULTID serves as placeholder and is replaced later - } // add the new action @@ -202,11 +155,10 @@ class ICAction extends React.Component { } // end for loop over selected configs - let newResult = {} newResult["result"] = {} - if (action.data.action === 'start') { + if (action.data.action === 'start') { let configSnapshots = []; // create config snapshots in case action is start for (let config of this.props.selectedConfigs) { @@ -220,7 +172,6 @@ class ICAction extends React.Component { newResult.result["configSnapshots"] = configSnapshots } - console.log("Dispatching actions for configs", newActions, newResult) AppDispatcher.dispatch({ type: 'ics/start-action', @@ -247,10 +198,10 @@ class ICAction extends React.Component { render() { let sendCommandDisabled = false; - if (!this.props.hasConfigs && this.props.selectedICs.length === 0 || this.state.selectedAction == null || this.state.selectedAction.id === "-1"){ + if (!this.props.hasConfigs && this.props.selectedICs.length === 0 || this.state.selectedAction == null || this.state.selectedAction.id === "-1") { sendCommandDisabled = true; } - if (this.props.hasConfigs && this.props.selectedConfigs.length === 0|| this.state.selectedAction == null || this.state.selectedAction.id === "-1"){ + if (this.props.hasConfigs && this.props.selectedConfigs.length === 0|| this.state.selectedAction == null || this.state.selectedAction.id === "-1") { sendCommandDisabled = true; } From 3d7635b42977472690ea4d85879b45d847d9525d Mon Sep 17 00:00:00 2001 From: Sonja Happ Date: Mon, 8 Mar 2021 09:45:46 +0100 Subject: [PATCH 02/39] Rename IC startParameterScheme --> startParameterSchema, closes #292 --- src/ic/edit-ic.js | 20 ++++++++++---------- src/ic/ic-dialog.js | 4 ++-- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/ic/edit-ic.js b/src/ic/edit-ic.js index 69ba89b..b328742 100644 --- a/src/ic/edit-ic.js +++ b/src/ic/edit-ic.js @@ -37,7 +37,7 @@ class EditICDialog extends React.Component { type: '', category: '', managedexternally: false, - startParameterScheme: {}, + startParameterSchema: {}, }; } @@ -73,8 +73,8 @@ class EditICDialog extends React.Component { if (this.state.category != null && this.state.category !== "" && this.state.category !== this.props.ic.category) { data.category = this.state.category; } - if (this.state.startParameterScheme !== {}) { - data.startParameterScheme = this.state.startParameterScheme + if (this.state.startParameterSchema !== {}) { + data.startParameterSchema = this.state.startParameterSchema } data.managedexternally = this.state.managedexternally; @@ -98,8 +98,8 @@ class EditICDialog extends React.Component { } } - handleStartParameterSchemeChange(data) { - this.setState({ startParameterScheme: data }); + handleStartParameterSchemaChange(data) { + this.setState({ startParameterSchema: data }); } resetState() { @@ -112,7 +112,7 @@ class EditICDialog extends React.Component { description: this.props.ic.description, category: this.props.ic.category, managedexternally: false, - startParameterScheme: this.props.ic.startParameterScheme, + startParameterSchema: this.props.ic.startParameterSchema, }); } @@ -193,12 +193,12 @@ class EditICDialog extends React.Component { this.handleChange(e)} /> - - Start parameter scheme of IC + + Start parameter schema of IC this.handleStartParameterSchemeChange(data)} + onChange={(data) => this.handleStartParameterSchemaChange(data)} /> diff --git a/src/ic/ic-dialog.js b/src/ic/ic-dialog.js index cba6291..5908623 100644 --- a/src/ic/ic-dialog.js +++ b/src/ic/ic-dialog.js @@ -76,9 +76,9 @@ class ICDialog extends React.Component {
Description: {this.props.ic.description}
Websocket URL: {this.props.ic.websocketurl}
API URL: {this.props.ic.apiurl}
-
Start parameter scheme:
+
Start parameter schema:
Date: Mon, 8 Mar 2021 10:27:48 +0100 Subject: [PATCH 03/39] fix saving of raw status update and optional statistics --- src/ic/ic-store.js | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/ic/ic-store.js b/src/ic/ic-store.js index b852b94..d892c7d 100644 --- a/src/ic/ic-store.js +++ b/src/ic/ic-store.js @@ -117,12 +117,7 @@ class InfrastructureComponentStore extends ArrayStore { if(!tempIC.managedexternally){ tempIC.state = action.data.state; tempIC.uptime = action.data.time_now - action.data.time_started; - if (tempIC.statusupdateraw === null || tempIC.statusupdateraw === undefined){ - tempIC.statusupdateraw = {}; - tempIC.statusupdateraw["status"] = action.data; - } else { - tempIC.statusupdateraw["status"] = action.data; - } + tempIC.statusupdateraw = action.data AppDispatcher.dispatch({ type: 'ics/start-edit', data: tempIC, @@ -138,12 +133,10 @@ class InfrastructureComponentStore extends ArrayStore { case 'ics/nodestats-received': let tempIC2 = action.ic; if(!tempIC2.managedexternally){ - if (tempIC2.statusupdateraw === null || tempIC2.statusupdateraw === undefined){ + if (tempIC2.statusupdateraw === null || tempIC2.statusupdateraw === undefined) { tempIC2.statusupdateraw = {}; - tempIC2.statusupdateraw["statistics"] = action.data; - } else { - tempIC2.statusupdateraw["statistics"] = action.data; } + tempIC2.statusupdateraw["statistics"] = action.data; AppDispatcher.dispatch({ type: 'ics/start-edit', data: tempIC2, From 34e26c293c423cad30ec588638b9471a32f687f5 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 13:39:02 +0100 Subject: [PATCH 04/39] several whitespace code cleanups --- src/ic/edit-ic.js | 6 ----- src/ic/ic-action.js | 1 - src/ic/ic-dialog.js | 38 ++++++++++++++----------------- src/ic/ics.js | 48 +++++++++++++++++----------------------- src/ic/new-ic.js | 4 +--- src/scenario/scenario.js | 3 +-- 6 files changed, 39 insertions(+), 61 deletions(-) diff --git a/src/ic/edit-ic.js b/src/ic/edit-ic.js index 69ba89b..74fea1e 100644 --- a/src/ic/edit-ic.js +++ b/src/ic/edit-ic.js @@ -50,14 +50,9 @@ class EditICDialog extends React.Component { data.name = this.state.name; } - data.websocketurl = this.state.websocketurl; - - - data.apiurl = this.state.apiurl; - if (this.state.location != null && this.state.location !== this.props.ic.location) { data.location = this.state.location; } @@ -79,7 +74,6 @@ class EditICDialog extends React.Component { data.managedexternally = this.state.managedexternally; - this.props.onClose(data); this.setState({managedexternally: false}); } diff --git a/src/ic/ic-action.js b/src/ic/ic-action.js index 0565be7..584f1f5 100644 --- a/src/ic/ic-action.js +++ b/src/ic/ic-action.js @@ -55,7 +55,6 @@ class ICAction extends React.Component { } runAction(action, when) { - if (action.data.action === 'none') { console.warn("No command selected. Nothing was sent."); return; diff --git a/src/ic/ic-dialog.js b/src/ic/ic-dialog.js index cba6291..435bb92 100644 --- a/src/ic/ic-dialog.js +++ b/src/ic/ic-dialog.js @@ -6,7 +6,6 @@ import ConfirmCommand from './confirm-command'; import ReactJson from 'react-json-view'; import FileSaver from 'file-saver'; - class ICDialog extends React.Component { valid = true; @@ -46,7 +45,6 @@ class ICDialog extends React.Component { FileSaver.saveAs(blob, this.props.ic.name + ".svg"); } - render() { let graphURL = "" @@ -54,7 +52,6 @@ class ICDialog extends React.Component { graphURL = this.props.ic.apiurl + "/graph.svg" } - return ( -
Raw Status:
- {this.props.userRole === "Admin" ? ( -
-
Controls:
-
- - -
-
) - : (
)} - + {this.props.userRole === "Admin" ? +
+
Controls:
+
+ + +
+
+ :
+ } this.closeConfirmModal(c)}/> - - ) : (
)} + + :
+ }
- ); } } diff --git a/src/ic/ics.js b/src/ic/ics.js index 6152c17..c630cb0 100644 --- a/src/ic/ics.js +++ b/src/ic/ics.js @@ -88,7 +88,6 @@ class InfrastructureComponents extends Component { let services = ics.filter(ic => ic.category === "service") let equipment = ics.filter(ic => ic.category === "equipment") - return { sessionToken: localStorage.getItem("token"), ics: ics, @@ -112,7 +111,7 @@ class InfrastructureComponents extends Component { token: this.state.sessionToken, }); - // Start timer for periodic refresh + // Start timer for periodic refresh this.timer = window.setInterval(() => this.refresh(), 10000); } @@ -121,7 +120,6 @@ class InfrastructureComponents extends Component { } refresh() { - if (this.state.editModal || this.state.deleteModal || this.state.icModal){ // do nothing since a dialog is open at the moment } @@ -160,6 +158,7 @@ class InfrastructureComponents extends Component { } else { // externally managed IC: dispatch create action to selected manager let newAction = {}; + newAction["action"] = "create"; newAction["parameters"] = data; newAction["when"] = new Date() @@ -178,7 +177,6 @@ class InfrastructureComponents extends Component { result: null, token: this.state.sessionToken }); - } } } @@ -266,8 +264,6 @@ class InfrastructureComponents extends Component { this.setState({ selectedICs: selectedICs }); } - - static isICOutdated(component) { if (!component.stateUpdateAt) return true; @@ -323,18 +319,18 @@ class InfrastructureComponents extends Component { style.push('badge-default'); /* Possible states of ICs - * 'error': ['resetting', 'error'], - 'idle': ['resetting', 'error', 'idle', 'starting', 'shuttingdown'], - 'starting': ['resetting', 'error', 'running'], - 'running': ['resetting', 'error', 'pausing', 'stopping'], - 'pausing': ['resetting', 'error', 'paused'], - 'paused': ['resetting', 'error', 'resuming', 'stopping'], - 'resuming': ['resetting', 'error', 'running'], - 'stopping': ['resetting', 'error', 'idle'], - 'resetting': ['resetting', 'error', 'idle'], - 'shuttingdown': ['shutdown', 'error'], - 'shutdown': ['starting', 'error'] - * */ + * 'error': ['resetting', 'error'], + * 'idle': ['resetting', 'error', 'idle', 'starting', 'shuttingdown'], + * 'starting': ['resetting', 'error', 'running'], + * 'running': ['resetting', 'error', 'pausing', 'stopping'], + * 'pausing': ['resetting', 'error', 'paused'], + * 'paused': ['resetting', 'error', 'resuming', 'stopping'], + * 'resuming': ['resetting', 'error', 'running'], + * 'stopping': ['resetting', 'error', 'idle'], + * 'resetting': ['resetting', 'error', 'idle'], + * 'shuttingdown': ['shutdown', 'error'], + * 'shutdown': ['starting', 'error'] + */ } return style.join(' ') @@ -483,24 +479,21 @@ class InfrastructureComponents extends Component {

Infrastructure Components {this.state.currentUser.role === "Admin" ? - ( + Add Infrastructure Component } > - + Import Infrastructure Component } > - + - ) - : - ( ) + + : }

@@ -525,8 +518,7 @@ class InfrastructureComponents extends Component { ]} />
- : -
+ :
}
diff --git a/src/ic/new-ic.js b/src/ic/new-ic.js index 39aeebd..1fbef20 100644 --- a/src/ic/new-ic.js +++ b/src/ic/new-ic.js @@ -75,7 +75,7 @@ class NewICDialog extends React.Component { this.setState({ managedexternally : !this.state.managedexternally}); } else{ - this.setState({ [e.target.id]: e.target.value }); + this.setState({ [e.target.id]: e.target.value }); } } @@ -163,7 +163,6 @@ class NewICDialog extends React.Component { ); } - return ( this.onClose(c)} onReset={() => this.resetState()} valid={this.validateForm()}>
@@ -185,7 +184,6 @@ class NewICDialog extends React.Component { :
- } :
diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 1f8dee2..9432b71 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -376,7 +376,7 @@ class Scenario extends React.Component { let ic = null; for (let component of this.state.ics) { - if (component.id === this.state.configs[index].icID) { + if (component.id === icID) { ic = component; } } @@ -391,7 +391,6 @@ class Scenario extends React.Component { } return false - } getICName(icID) { From 8063e017d19d52e21d41a4f2e04824c9213af700 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 13:39:17 +0100 Subject: [PATCH 05/39] add .eslintcache to gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 699692c..bae9627 100644 --- a/.gitignore +++ b/.gitignore @@ -18,3 +18,4 @@ yarn-error.log* .vscode/ *.code-workspace package-lock.json +.eslintcache From 14ed145bcf836ed1f319b74dd1ea1ad0421fcc6f Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 13:39:36 +0100 Subject: [PATCH 06/39] use our demo instance as backend in proxy mode --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index af5f894..a19b1cc 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, - "proxy": "http://localhost:4000", + "proxy": "https://villas.k8s.eonerc.rwth-aachen.de", "browserslist": { "production": [ ">0.2%", From ccc0e7791399902bd5489a903d95dea91177df0b Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 13:39:48 +0100 Subject: [PATCH 07/39] make dialogs a bit larger --- src/common/dialogs/dialog.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/dialogs/dialog.js b/src/common/dialogs/dialog.js index 9c5c2ce..7af1406 100644 --- a/src/common/dialogs/dialog.js +++ b/src/common/dialogs/dialog.js @@ -51,7 +51,7 @@ class Dialog extends React.Component { }; return ( - + {this.props.title} From d88698f802e55e416e3316e24daf181c8142b7e7 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 13:40:56 +0100 Subject: [PATCH 08/39] fix available IC types and categories --- src/ic/edit-ic.js | 2 +- src/ic/new-ic.js | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/ic/edit-ic.js b/src/ic/edit-ic.js index 74fea1e..c62353d 100644 --- a/src/ic/edit-ic.js +++ b/src/ic/edit-ic.js @@ -114,7 +114,7 @@ class EditICDialog extends React.Component { let typeOptions = []; switch(this.state.category){ case "simulator": - typeOptions = ["dummy","generic","dpsim","rtlab","rscad", "opalrt"]; + typeOptions = ["dummy","generic","dpsim","rtlab","rscad","rtlab","kubernetes"]; break; case "manager": typeOptions = ["villas-node","villas-relay","generic"]; diff --git a/src/ic/new-ic.js b/src/ic/new-ic.js index 1fbef20..4870f5b 100644 --- a/src/ic/new-ic.js +++ b/src/ic/new-ic.js @@ -137,10 +137,10 @@ class NewICDialog extends React.Component { let typeOptions = []; switch(this.state.category){ case "simulator": - typeOptions = ["dummy","generic","dpsim","rtlab","rscad","opalrt"]; + typeOptions = ["dummy","generic","dpsim","rtlab","rscad","rtlab","kubernetes"]; break; case "manager": - typeOptions = ["villas-node","villas-relay","generic"]; + typeOptions = ["villas-node","villas-relay","generic","kubernetes"]; break; case "gateway": typeOptions = ["villas-node","villas-relay"]; @@ -201,11 +201,11 @@ class NewICDialog extends React.Component { this.handleChange(e)}> - - - - - + + + + + From 89ca1b5682d9a39c59a503de5074c3302d6bfec2 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 13:41:40 +0100 Subject: [PATCH 09/39] only external ICs should be controllable. not the opposite way --- src/scenario/scenario.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 9432b71..2bd909f 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -826,7 +826,7 @@ class Scenario extends React.Component { this.usesExternalIC(index)} + checkboxDisabled={(index) => !this.usesExternalIC(index)} onChecked={(index, event) => this.onConfigChecked(index, event)} width='30' /> From 4827a280f000d6f1bcf243bbc447c8ceabd66e6f Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 13:42:16 +0100 Subject: [PATCH 10/39] make IC dialog a bit more pretty --- src/ic/ic-dialog.js | 72 +++++++++++++++++++++++++++++++++------------ 1 file changed, 54 insertions(+), 18 deletions(-) diff --git a/src/ic/ic-dialog.js b/src/ic/ic-dialog.js index 435bb92..f2b0072 100644 --- a/src/ic/ic-dialog.js +++ b/src/ic/ic-dialog.js @@ -55,7 +55,7 @@ class ICDialog extends React.Component { return ( this.onClose(c)} valid={true} @@ -65,23 +65,59 @@ class ICDialog extends React.Component { -
State: {this.props.ic.state}
-
Category: {this.props.ic.category}
-
Type: {this.props.ic.type}
-
Uptime: {this.props.ic.uptime}
-
Location: {this.props.ic.location}
-
Description: {this.props.ic.description}
-
Websocket URL: {this.props.ic.websocketurl}
-
API URL: {this.props.ic.apiurl}
-
Start parameter scheme:
- + + Name + {this.props.ic.name} + + + UUID + {this.props.ic.uuid} + + + State + {this.props.ic.state} + + + Category + {this.props.ic.category} + + + Type + {this.props.ic.type} + + + Uptime + {moment.duration(this.props.ic.uptime, "seconds").humanize()} + + + Location + {this.props.ic.location} + + + Description + {this.props.ic.description} + + + Websocket URL + {this.props.ic.websocketurl} + + + API URL + {this.props.ic.apiurl} + + + Start parameter schema + + + + From 9e4797bc76fad0c00382b861bd1be1f0bbcd82b6 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 13:42:45 +0100 Subject: [PATCH 11/39] only the villas-node IC provides a graph. this is not supported by the villas-relay type --- src/ic/ic-dialog.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ic/ic-dialog.js b/src/ic/ic-dialog.js index f2b0072..b4e05b6 100644 --- a/src/ic/ic-dialog.js +++ b/src/ic/ic-dialog.js @@ -131,7 +131,7 @@ class ICDialog extends React.Component { collapsed={1} /> - {this.props.ic.type === "villas-node" || this.props.ic.type === "villas-relay" ? ( + {this.props.ic.type === "villas-node" ? <>
- - Select time for synced command execution -
; + return
+
+ + this.runAction(this.state.selectedAction, this.state.time)}> + {actionList} + + + Select time for synced command execution +
; } } diff --git a/src/ic/ics.js b/src/ic/ics.js index 6bf620b..4ef4ad6 100644 --- a/src/ic/ics.js +++ b/src/ic/ics.js @@ -506,12 +506,10 @@ class InfrastructureComponents extends Component { {this.state.currentUser.role === "Admin" && this.state.numberOfExternalICs > 0 ?
this.closeICModal(data)} ic={this.state.modalIC} token={this.state.sessionToken} - userRole={this.state.currentUser.role} sendControlCommand={(command, ic) => this.sendControlCommand(command, ic)}/> -
); } diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 2bd909f..f1d2583 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -873,14 +873,12 @@ class Scenario extends React.Component { {this.state.ExternalICInUse ? (
this.copyConfig(index)} token = {this.state.sessionToken} actions={[ - { id: '-1', title: 'Action', data: { action: 'none' } }, { id: '0', title: 'Start', data: { action: 'start' } }, { id: '1', title: 'Stop', data: { action: 'stop' } }, { id: '2', title: 'Pause', data: { action: 'pause' } }, From 05ce521376a4b459642fa88f071facafc31f233a Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 14:26:30 +0100 Subject: [PATCH 16/39] smaller code style improvements --- src/ic/ic-dialog.js | 2 +- src/ic/ics.js | 1 + src/scenario/scenario.js | 4 ++-- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/ic/ic-dialog.js b/src/ic/ic-dialog.js index 15c7a60..8689334 100644 --- a/src/ic/ic-dialog.js +++ b/src/ic/ic-dialog.js @@ -143,7 +143,7 @@ class ICDialog extends React.Component { {"Graph
- {this.props.userRole === "Admin" ? + {this.props.user.role === "Admin" ?
Controls:
diff --git a/src/ic/ics.js b/src/ic/ics.js index 4ef4ad6..bfdb45f 100644 --- a/src/ic/ics.js +++ b/src/ic/ics.js @@ -531,6 +531,7 @@ class InfrastructureComponents extends Component { onClose={data => this.closeICModal(data)} ic={this.state.modalIC} token={this.state.sessionToken} + user={this.state.currentUser} sendControlCommand={(command, ic) => this.sendControlCommand(command, ic)}/>
); diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index f1d2583..5dc949f 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -870,7 +870,7 @@ class Scenario extends React.Component { />
- {this.state.ExternalICInUse ? ( + {this.state.ExternalICInUse ?
- ) : (
) + :
} < div style={{ clear: 'both' }} /> From 0da87910566fb6634df3c61bacd65e4d756e11f6 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 14:53:08 +0100 Subject: [PATCH 17/39] cosmetic code cleanups --- src/common/table-column.js | 1 - src/common/table.js | 5 +++-- src/scenario/scenario.js | 44 +++++++++++++++++++++++++++----------- 3 files changed, 35 insertions(+), 15 deletions(-) diff --git a/src/common/table-column.js b/src/common/table-column.js index 460eb4b..2711537 100644 --- a/src/common/table-column.js +++ b/src/common/table-column.js @@ -40,7 +40,6 @@ class TableColumn extends Component { checkboxDisabled: null, labelStyle: null, labelModifier: null - }; render() { diff --git a/src/common/table.js b/src/common/table.js index f54335e..78d3b55 100644 --- a/src/common/table.js +++ b/src/common/table.js @@ -83,12 +83,13 @@ class CustomTable extends Component { Download {contentvalue}} > + overlay={Download {contentvalue}} + > ); diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 5dc949f..7770b64 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -746,11 +746,20 @@ class Scenario extends React.Component { dataKey='id' modifier={(id, result) => this.modifyResultNoColumn(id, result)} /> - - - + + + this.downloadResultData(index)} /> this.signalsAutoConf(index)} /> - this.getICName(icID)} /> + this.getICName(icID)} + /> } - < div style={{ clear: 'both' }} /> +
Users sharing this scenario
- - + + this.setState({ deleteUserModal: true, deleteUserName: this.state.scenario.users[index].username, modalUserIndex: index })} + onDelete={(index) => this.setState({ + deleteUserModal: true, + deleteUserName: this.state.scenario.users[index].username, + modalUserIndex: index + })} />
@@ -1009,8 +1031,6 @@ class Scenario extends React.Component {
this.closeDeleteUserModal(c)} /> - -
; } } From 72fb224bb60cbc5c511d744d8c6d2fff14962446 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 14:56:48 +0100 Subject: [PATCH 18/39] scenario: we shouldnt make any assumptions in the frontend on how an IC will use any files. This is IC specific behaviour. --- src/scenario/scenario.js | 29 +++++++++++++---------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 7770b64..98346d6 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -580,22 +580,18 @@ class Scenario extends React.Component { * File modification methods ############################################## */ - getListOfFiles(fileIDs, types) { - - let fileList = ''; + getListOfFiles(files, fileIDs) { + let fileList = []; for (let id of fileIDs) { - for (let file of this.state.files) { - if (file.id === id && types.some(e => file.type.includes(e))) { - if (fileList === '') { - fileList = file.name - } else { - fileList = fileList + ';' + file.name; - } + for (let file of files) { + if (file.id === id) { + fileList.push(file.name) } } } - return fileList; + + return fileList.join(';'); } /* ############################################## @@ -837,13 +833,14 @@ class Scenario extends React.Component { checkboxDisabled={(index) => !this.usesExternalIC(index)} onChecked={(index, event) => this.onConfigChecked(index, event)} width='30' /> - - this.getListOfFiles(fileIDs, ['json', 'JSON'])} /> + this.getListOfFiles(fileIDs, ['xml'])} - editButton + modifier={(fileIDs) => this.getListOfFiles(this.state.files, fileIDs)} onEdit={(index) => this.startPintura(index)} /> Date: Mon, 8 Mar 2021 14:58:55 +0100 Subject: [PATCH 19/39] rename "User Management" to "Users" to be more in line with "Scenarios" and "Infrastructure Components" --- src/common/header-menu.js | 2 +- src/common/menu-sidebar.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/common/header-menu.js b/src/common/header-menu.js index 9c6f7eb..e32af23 100644 --- a/src/common/header-menu.js +++ b/src/common/header-menu.js @@ -30,7 +30,7 @@ export default class HeaderMenu extends React.Component {
  • Scenarios
  • Infrastructure Components
    • { this.props.currentRole === 'Admin' ? -
  • User Management
    • : '' +
  • Users
    • : '' }
  • Account
  • Logout
    • diff --git a/src/common/menu-sidebar.js b/src/common/menu-sidebar.js index f70d599..d72102a 100644 --- a/src/common/menu-sidebar.js +++ b/src/common/menu-sidebar.js @@ -74,7 +74,7 @@ class SidebarMenu extends React.Component {
  • Scenarios
  • Infrastructure Components
    • { this.props.currentRole === 'Admin' ? -
  • User Management
    • : '' +
  • Users
    • : '' }
  • Account
    • Logout @@ -93,7 +93,7 @@ class SidebarMenu extends React.Component {
  • Scenarios
  • Infrastructure Components
    • { this.props.currentRole === 'Admin' ? -
  • User Management
    • : '' +
  • Users
    • : '' }
  • Account
  • Logout
    • @@ -105,4 +105,4 @@ class SidebarMenu extends React.Component { } let fluxContainerConverter = require('../common/FluxContainerConverter'); -export default Container.create(fluxContainerConverter.convert(SidebarMenu)); \ No newline at end of file +export default Container.create(fluxContainerConverter.convert(SidebarMenu)); From 74c16e3ae281b45190982f69f878cd3acd86c5cc Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 16:05:33 +0100 Subject: [PATCH 20/39] cosmetic code changes --- src/common/table.js | 45 +++++++++++++++++++------------------- src/user/edit-own-user.js | 14 ++++-------- src/user/edit-user.js | 1 - src/user/login-complete.js | 7 ++---- src/user/login.js | 2 +- src/user/new-user.js | 1 - src/user/user.js | 16 ++++++++------ src/user/users-store.js | 1 - src/user/users.js | 45 +++++++++++++++++++++++++++++++------- 9 files changed, 76 insertions(+), 56 deletions(-) diff --git a/src/common/table.js b/src/common/table.js index 78d3b55..ebcbea2 100644 --- a/src/common/table.js +++ b/src/common/table.js @@ -169,14 +169,16 @@ class CustomTable extends Component { Export } > + overlay={ Export } + > - ); + + ); } if (child.props.duplicateButton) { @@ -191,7 +193,8 @@ class CustomTable extends Component { disabled={child.props.onDuplicate == null}> - ); + + ); } if (child.props.addRemoveFilesButton) { @@ -206,7 +209,8 @@ class CustomTable extends Component { disabled={child.props.onAddRemove == null}> - ); + + ); } if (child.props.downloadAllButton) { @@ -246,8 +250,6 @@ class CustomTable extends Component { } } - - return cell; } // addCell @@ -312,26 +314,24 @@ class CustomTable extends Component { { - this.state.rows.map((row, rowIndex) => ( + this.state.rows.map((row, rowIndex) => { row.map((cell, cellIndex) => { let isCellInlineEditable = children[cellIndex].props.inlineEditable === true; - let tabIndex = isCellInlineEditable ? 0 : -1; - let evtHdls = isCellInlineEditable ? { onCellClick: (event) => this.onClick(event, rowIndex, cellIndex), onCellFocus: () => this.onCellFocus({ cell: cellIndex, row: rowIndex }), onCellBlur: () => this.cellLostFocus() } : { - onCellClick: () => { }, - onCellFocus: () => { }, - onCellBlur: () => { } - }; + onCellClick: () => { }, + onCellFocus: () => { }, + onCellBlur: () => { } + }; - return ( children[cellIndex].props.onInlineChange(event, rowIndex, cellIndex)} ref={ref => { this.activeInput = ref; }} /> - ) : ( - - {cell.map((element, elementIndex) => ( + : + { + cell.map((element, elementIndex) => {element} - ))} - - )} - ) + ) + } + + } + }) } - )) + ) } diff --git a/src/user/edit-own-user.js b/src/user/edit-own-user.js index 4b7a639..d093ec7 100644 --- a/src/user/edit-own-user.js +++ b/src/user/edit-own-user.js @@ -37,8 +37,6 @@ class EditOwnUserDialog extends React.Component { } } - - onClose(canceled) { if (canceled === false) { if (this.valid) { @@ -49,8 +47,6 @@ class EditOwnUserDialog extends React.Component { } } - - handleChange(e) { this.setState({ [e.target.id]: e.target.value }); @@ -65,26 +61,24 @@ class EditOwnUserDialog extends React.Component { username = false; } - if(this.state.mail === ''){ + if (this.state.mail === '') { mail = false; } - if(this.state.password === ''){ + if (this.state.password === '') { pw = false; } - if(this.state.oldPassword === ''){ + if (this.state.oldPassword === '') { oldPassword = false; } - if(this.state.confirmpassword === ''){ + if (this.state.confirmpassword === '') { confirmpassword = false; } - // form is valid if the following condition is met this.valid = username || mail || (oldPassword && pw && confirmpassword); - } resetState() { diff --git a/src/user/edit-user.js b/src/user/edit-user.js index 12ee58a..a137562 100644 --- a/src/user/edit-user.js +++ b/src/user/edit-user.js @@ -60,7 +60,6 @@ class EditUserDialog extends React.Component { var confirmpassword = true; var oldPW = true; - if (this.state.username === '') { username = false; } diff --git a/src/user/login-complete.js b/src/user/login-complete.js index 4fd4922..698dc81 100644 --- a/src/user/login-complete.js +++ b/src/user/login-complete.js @@ -26,7 +26,7 @@ class LoginComplete extends React.Component { constructor(props) { console.log("LoginComplete constructor"); super(props); - + AppDispatcher.dispatch({ type: 'users/extlogin', }); @@ -42,8 +42,6 @@ class LoginComplete extends React.Component { this.startTimer = this.startTimer.bind(this); this.countDown = this.countDown.bind(this); this.stopTimer = this.stopTimer.bind(this); - - } componentDidMount() { @@ -51,7 +49,6 @@ class LoginComplete extends React.Component { this.setState({secondsToWait: 5}); } - static getStores(){ return [LoginStore] } @@ -104,4 +101,4 @@ class LoginComplete extends React.Component { } let fluxContainerConverter = require('../common/FluxContainerConverter'); -export default Container.create(fluxContainerConverter.convert(LoginComplete)); \ No newline at end of file +export default Container.create(fluxContainerConverter.convert(LoginComplete)); diff --git a/src/user/login.js b/src/user/login.js index ea38f89..f265342 100644 --- a/src/user/login.js +++ b/src/user/login.js @@ -32,7 +32,7 @@ class Login extends Component { constructor(props) { super(props); - // load config in case the user goes directly to /login + // Load config in case the user goes directly to /login // otherwise it will be loaded in app constructor AppDispatcher.dispatch({ type: 'config/load', diff --git a/src/user/new-user.js b/src/user/new-user.js index 2d0c434..a8cd5a8 100644 --- a/src/user/new-user.js +++ b/src/user/new-user.js @@ -54,7 +54,6 @@ class NewUserDialog extends React.Component { let mail = this.state.mail !== ''; this.valid = username && password && role && mail; - } resetState() { diff --git a/src/user/user.js b/src/user/user.js index e85f5ac..cc0271e 100644 --- a/src/user/user.js +++ b/src/user/user.js @@ -46,7 +46,6 @@ class User extends Component { } componentDidMount() { - let currentUserID = JSON.parse(localStorage.getItem("currentUser")).id; AppDispatcher.dispatch({ @@ -54,12 +53,13 @@ class User extends Component { data: parseInt(currentUserID, 10), token: this.state.token }); - } closeEditModal(data) { + this.setState({ + editModal: false + }); - this.setState({ editModal: false }); let updatedData = {} updatedData.id = this.state.currentUser.id; let updatedUser = this.state.currentUser; @@ -87,8 +87,7 @@ class User extends Component { } if (hasChanged || pwChanged) { - - if(hasChanged){ + if (hasChanged){ this.setState({currentUser: updatedUser}) } @@ -103,9 +102,12 @@ class User extends Component { } } - getHumanRoleName(role_key) { - const HUMAN_ROLE_NAMES = {Admin: 'Administrator', User: 'User', Guest: 'Guest'}; + const HUMAN_ROLE_NAMES = { + Admin: 'Administrator', + User: 'User', + Guest: 'Guest' + }; return HUMAN_ROLE_NAMES.hasOwnProperty(role_key)? HUMAN_ROLE_NAMES[role_key] : ''; } diff --git a/src/user/users-store.js b/src/user/users-store.js index 8bda26a..fccb4a9 100644 --- a/src/user/users-store.js +++ b/src/user/users-store.js @@ -50,7 +50,6 @@ class UsersStore extends ArrayStore { return super.reduce(state, action); } } - } export default new UsersStore(); diff --git a/src/user/users.js b/src/user/users.js index 96b1e4c..e83bccf 100644 --- a/src/user/users.js +++ b/src/user/users.js @@ -129,7 +129,6 @@ class Users extends Component { } render() { - const buttonStyle = { marginLeft: '10px', }; @@ -153,17 +152,47 @@ class Users extends Component { - - - - this.getHumanRoleName(role)} /> - this.modifyActiveColumn(active)} /> - this.setState({ editModal: true, modalData: this.state.users[index] })} onDelete={index => this.setState({ deleteModal: true, modalData: this.state.users[index] })} /> + + + + this.getHumanRoleName(role)} + /> + this.modifyActiveColumn(active)} + /> + this.setState({ + editModal: true, + modalData: this.state.users[index] + })} + onDelete={index => this.setState({ + deleteModal: true, + modalData: this.state.users[index] + })} + />
    this.closeNewModal(data)} /> this.closeEditModal(data)} user={this.state.modalData} /> - this.closeDeleteModal(e)} />
    ); From dccbc2e56cf71581b6a0661afc8206e6c160bf56 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 17:40:07 +0100 Subject: [PATCH 21/39] cosmetic code cleanups --- src/common/table.js | 93 +++++++++++++++++++-------------------- src/scenario/scenario.js | 1 + src/user/edit-own-user.js | 10 ++--- src/user/edit-user.js | 21 +++++---- src/user/user.js | 77 ++++++++++++++------------------ src/user/users.js | 48 +++++++++----------- 6 files changed, 115 insertions(+), 135 deletions(-) diff --git a/src/common/table.js b/src/common/table.js index ebcbea2..dfaba74 100644 --- a/src/common/table.js +++ b/src/common/table.js @@ -119,49 +119,47 @@ class CustomTable extends Component { ); } - if (child.props.dataIndex) { cell.push(index); } // add buttons - let showEditButton = true - if (child.props.showEditButton !== null) - { - showEditButton = child.props.showEditButton(index) - } - if(showEditButton){ - if (child.props.editButton) { - cell.push( - Edit }> - - ); - } - } + let showEditButton = child.props.showEditButton !== null + ? child.props.showEditButton(index) + : true; + if (child.props.editButton && showEditButton) { + cell.push( + Edit } + > + + + ); + } if (child.props.checkbox) { const checkboxKey = child.props.checkboxKey; - let isDisabled = false; - if (child.props.checkboxDisabled != null){ - isDisabled = child.props.checkboxDisabled(index) - } + let isDisabled = child.props.checkboxDisabled != null + ? child.props.checkboxDisabled(index) + : false; + cell.push( child.props.onChecked(data, e)} - />); + /> + ); } if (child.props.exportButton) { @@ -225,29 +223,28 @@ class CustomTable extends Component { disabled={child.props.onDownloadAll == null}> - ); + + ); } - let showDeleteButton = true; - if (child.props.showDeleteButton !== null){ - showDeleteButton = child.props.showDeleteButton(index) - } + let showDeleteButton = child.props.showDeleteButton !== null + ? child.props.showDeleteButton(index) + : true; - if (showDeleteButton){ - if (child.props.deleteButton) { - cell.push( - Delete } > - - ); - } + if (child.props.deleteButton && showDeleteButton) { + cell.push( + Delete } > + + + ); } return cell; diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 98346d6..cd451e8 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -63,6 +63,7 @@ class Scenario extends React.Component { if (prevState == null) { prevState = {}; } + // get selected scenario const sessionToken = localStorage.getItem("token"); diff --git a/src/user/edit-own-user.js b/src/user/edit-own-user.js index d093ec7..ee2abdd 100644 --- a/src/user/edit-own-user.js +++ b/src/user/edit-own-user.js @@ -55,7 +55,7 @@ class EditOwnUserDialog extends React.Component { let mail = true; let pw = true; let oldPassword = true; - let confirmpassword = true; + let confirmPassword = true; if (this.state.username === '') { username = false; @@ -73,12 +73,12 @@ class EditOwnUserDialog extends React.Component { oldPassword = false; } - if (this.state.confirmpassword === '') { - confirmpassword = false; + if (this.state.confirmPassword === '') { + confirmPassword = false; } // form is valid if the following condition is met - this.valid = username || mail || (oldPassword && pw && confirmpassword); + this.valid = username || mail || (oldPassword && pw && confirmPassword); } resetState() { @@ -86,7 +86,7 @@ class EditOwnUserDialog extends React.Component { username: '', mail: '', oldPassword: '', - confirmpassword: '', + confirmPassword: '', password: '', id: this.props.user.id, }); diff --git a/src/user/edit-user.js b/src/user/edit-user.js index a137562..a97b9de 100644 --- a/src/user/edit-user.js +++ b/src/user/edit-user.js @@ -57,8 +57,8 @@ class EditUserDialog extends React.Component { var mail = true; var pw = true; var active = true; - var confirmpassword = true; - var oldPW = true; + var confirmPassword = true; + var oldPassword = true; if (this.state.username === '') { username = false; @@ -68,29 +68,28 @@ class EditUserDialog extends React.Component { role = false; } - if(this.state.mail === ''){ + if (this.state.mail === '') { mail = false; } - if(this.state.password === ''){ + if (this.state.password === '') { pw = false; } - if(this.state.active === ''){ + if (this.state.active === '') { active = false; } - if(this.state.confirmpassword === ''){ - confirmpassword = false; + if (this.state.confirmPassword === '') { + confirmPassword = false; } - if(this.state.oldPassword === ''){ - oldPW = false; + if (this.state.oldPassword === '') { + oldPassword = false; } // form is valid if any of the fields contain somethig - this.valid = username || role || mail || pw || active || confirmpassword || oldPW; - + this.valid = username || role || mail || pw || active || confirmPassword || oldPassword; } resetState() { diff --git a/src/user/user.js b/src/user/user.js index cc0271e..53b1627 100644 --- a/src/user/user.js +++ b/src/user/user.js @@ -56,9 +56,7 @@ class User extends Component { } closeEditModal(data) { - this.setState({ - editModal: false - }); + this.setState({ editModal: false }); let updatedData = {} updatedData.id = this.state.currentUser.id; @@ -66,52 +64,41 @@ class User extends Component { let hasChanged = false; let pwChanged = false; - if(data){ - if (data.username !== ''){ - hasChanged = true; - updatedData.username = data.username; - updatedUser.username = data.username - } - if (data.mail !== ''){ - hasChanged = true; - updatedData.mail = data.mail; - updatedUser.mail = data.mail; - } - if (data.password !== '' && data.oldPassword !== '' && data.password === data.confirmpassword ){ - pwChanged = true; - updatedData.password = data.password; - updatedData.oldPassword = data.oldPassword; - } else if (data.password !== '' && data.password !== data.confirmpassword) { - NotificationsDataManager.addNotification(NotificationsFactory.UPDATE_ERROR('New password not correctly confirmed')); - return - } - - if (hasChanged || pwChanged) { - if (hasChanged){ - this.setState({currentUser: updatedUser}) + if (data) { + if (data.username !== '') { + hasChanged = true; + updatedData.username = data.username; + updatedUser.username = data.username + } + if (data.mail !== '') { + hasChanged = true; + updatedData.mail = data.mail; + updatedUser.mail = data.mail; + } + if (data.password !== '' && data.oldPassword !== '' && data.password === data.confirmPassword ) { + pwChanged = true; + updatedData.password = data.password; + updatedData.oldPassword = data.oldPassword; + } else if (data.password !== '' && data.password !== data.confirmPassword) { + NotificationsDataManager.addNotification(NotificationsFactory.UPDATE_ERROR('New password not correctly confirmed')); + return } - AppDispatcher.dispatch({ - type: 'users/start-edit', - data: updatedData, - token: this.state.token - }); - } else { - NotificationsDataManager.addNotification(NotificationsFactory.UPDATE_WARNING('No update requested, no input data')); + if (hasChanged || pwChanged) { + if (hasChanged){ + this.setState({ currentUser: updatedUser }) + } + + AppDispatcher.dispatch({ + type: 'users/start-edit', + data: updatedData, + token: this.state.token + }); + } else { + NotificationsDataManager.addNotification(NotificationsFactory.UPDATE_WARNING('No update requested, no input data')); + } } } - } - - 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] : ''; - } - render() { diff --git a/src/user/users.js b/src/user/users.js index e83bccf..8585ce0 100644 --- a/src/user/users.js +++ b/src/user/users.js @@ -38,7 +38,6 @@ class Users extends Component { } static calculateState(prevState, props) { - let token = localStorage.getItem("token"); // If there is a token available and this method was called as a result of loading users @@ -90,26 +89,19 @@ class Users extends Component { this.setState({ editModal: false }); if (data) { - if(data.password === data.confirmpassword) { + if(data.password === data.confirmPassword) { AppDispatcher.dispatch({ type: 'users/start-edit', data: data, token: this.state.token }); - } else{ - + } else { NotificationsDataManager.addNotification(NotificationsFactory.UPDATE_ERROR("New password not correctly confirmed")) } } } - 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(); @@ -118,14 +110,8 @@ class Users extends Component { } }; - modifyActiveColumn(active){ - - if(active){ - return - } else { - return - } - + modifyActiveColumn(active) { + return } render() { @@ -142,13 +128,24 @@ class Users extends Component {

    Users - Add User } > - - - + Add User } + > + + +

    @@ -169,7 +166,6 @@ class Users extends Component { this.getHumanRoleName(role)} /> Date: Mon, 8 Mar 2021 17:40:45 +0100 Subject: [PATCH 22/39] fix broken disable property of ICAction (closes #293) --- src/ic/ics.js | 8 ++++++-- src/scenario/scenario.js | 2 +- src/scenario/scenarios.js | 7 +++++-- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/ic/ics.js b/src/ic/ics.js index bfdb45f..d305e2b 100644 --- a/src/ic/ics.js +++ b/src/ic/ics.js @@ -64,7 +64,11 @@ class InfrastructureComponents extends Component { } } - static calculateState() { + static calculateState(prevState, props) { + if (prevState == null) { + prevState = {}; + } + const ics = InfrastructureComponentStore.getState().sort((a, b) => { if (a.state !== b.state) { return InfrastructureComponents.statePrio(a.state) > InfrastructureComponents.statePrio(b.state); @@ -100,7 +104,7 @@ class InfrastructureComponents extends Component { modalIC: {}, deleteModal: false, icModal: false, - selectedICs: [], + selectedICs: prevState.selectedICs || [], currentUser: JSON.parse(localStorage.getItem("currentUser")) }; } diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index cd451e8..094b17f 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -110,7 +110,7 @@ class Scenario extends React.Component { deleteConfigModal: false, importConfigModal: false, newConfig: prevState.newConfig || false, - selectedConfigs: [], + selectedConfigs: prevState.selectedConfigs || [], filesEditModal: prevState.filesEditModal || false, filesEditSaveState: prevState.filesEditSaveState || [], diff --git a/src/scenario/scenarios.js b/src/scenario/scenarios.js index aef0740..a3c65a4 100644 --- a/src/scenario/scenarios.js +++ b/src/scenario/scenarios.js @@ -43,7 +43,10 @@ class Scenarios extends Component { return [ScenarioStore, DashboardStore, WidgetStore, ConfigStore, SignalStore]; } - static calculateState() { + static calculateState(prevState, props) { + if (prevState == null) { + prevState = {}; + } return { scenarios: ScenarioStore.getState(), @@ -58,7 +61,7 @@ class Scenarios extends Component { importModal: false, modalScenario: {}, - selectedScenarios: [] + selectedScenarios: prevState.selectedScenarios || [] }; } From 39c31498c00a8920da41e71b83d135495c9ef2be Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 17:41:32 +0100 Subject: [PATCH 23/39] use new Form components --- src/common/table.js | 17 ++++---- src/user/edit-own-user.js | 64 ++++++++++++++--------------- src/user/edit-user.js | 86 +++++++++++++++++++-------------------- src/user/new-user.js | 48 +++++++++++----------- src/user/user.js | 66 ++++++++++++++++++------------ 5 files changed, 148 insertions(+), 133 deletions(-) diff --git a/src/common/table.js b/src/common/table.js index dfaba74..6d75cfa 100644 --- a/src/common/table.js +++ b/src/common/table.js @@ -17,7 +17,7 @@ import React, { Component } from 'react'; import _ from 'lodash'; -import { Table, Button, FormControl, FormLabel, FormCheck, Tooltip, OverlayTrigger } from 'react-bootstrap'; +import { Table, Button, Form, Tooltip, OverlayTrigger } from 'react-bootstrap'; import { Link } from 'react-router-dom'; import Icon from './icon'; @@ -112,9 +112,11 @@ class CustomTable extends Component { cell.push(   - + {labelContent} - + ); } @@ -152,7 +154,7 @@ class CustomTable extends Component { : false; cell.push( - - {(this.state.editCell[0] === cellIndex && this.state.editCell[1] === rowIndex) ? ( - + {(this.state.editCell[0] === cellIndex && this.state.editCell[1] === rowIndex) ? + this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> -
    - - Username - this.handleChange(e)} /> - - - - E-mail - this.handleChange(e)} /> - - - Old Password - this.handleChange(e)} /> - - - - New Password - this.handleChange(e)} /> - - - - Confirm New Password - this.handleChange(e)} /> - - +
    + + Username + this.handleChange(e)} autocomplete="username" /> + + + + E-mail + this.handleChange(e)} autocomplete="email" /> + + + Old Password + this.handleChange(e)} autocomplete="current-password" /> + + + New Password + this.handleChange(e)} autocomplete="new-password" /> + + + Confirm New Password + this.handleChange(e)} autocomplete="new-password" /> + + ); } diff --git a/src/user/edit-user.js b/src/user/edit-user.js index a97b9de..ba49228 100644 --- a/src/user/edit-user.js +++ b/src/user/edit-user.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap'; +import { Form, Col } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; @@ -27,13 +27,13 @@ class EditUserDialog extends React.Component { super(props); this.state = { - username: '', - mail: '', - role: '', - id: '', + username: props.user.username, + mail: props.user.mail, + role: props.user.role, + id: props.user.id, + active: props.user.active, password: '', - active: '', - confirmpassword: '', + confirmPassword: '', oldPassword: '' } } @@ -94,8 +94,8 @@ class EditUserDialog extends React.Component { resetState() { this.setState({ - //username: this.props.user.username, - //mail: this.props.user.mail, + username: this.props.user.username, + mail: this.props.user.mail, role: this.props.user.role, id: this.props.user.id }); @@ -104,46 +104,44 @@ class EditUserDialog extends React.Component { render() { return ( this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> -
    - - Username - this.handleChange(e)} /> - - - - E-mail - this.handleChange(e)} /> - - - Admin Password - this.handleChange(e)} /> - - - Password - this.handleChange(e)} /> - - - Confirm New Password - this.handleChange(e)} /> - - - Role - this.handleChange(e)}> + + + Username + this.handleChange(e)} /> + + + + E-mail + this.handleChange(e)} /> + + + Admin Password + this.handleChange(e)} /> + + + Password + this.handleChange(e)} /> + + + Confirm New Password + this.handleChange(e)} /> + + + Role + this.handleChange(e)}> - - - - - Active - this.handleChange(e)}> +     + + + Active + this.handleChange(e)}> -     - - - + + + ); } diff --git a/src/user/new-user.js b/src/user/new-user.js index a8cd5a8..c10dc85 100644 --- a/src/user/new-user.js +++ b/src/user/new-user.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel, FormText, Col } from 'react-bootstrap'; +import { Form, Col } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; @@ -68,32 +68,32 @@ class NewUserDialog extends React.Component { render() { return ( this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> -
    - - Username - this.handleChange(e)} /> - - Min 3 characters. - - - E-mail - this.handleChange(e)} /> - - - - Password - this.handleChange(e)} /> - - - - Role - this.handleChange(e)}> + + + Username + this.handleChange(e)} /> + + Min 3 characters. + + + E-mail + this.handleChange(e)} /> + + + + Password + this.handleChange(e)} /> + + + + Role + this.handleChange(e)}> - - - + + +     ); } diff --git a/src/user/user.js b/src/user/user.js index 53b1627..ce4cc4c 100644 --- a/src/user/user.js +++ b/src/user/user.js @@ -17,7 +17,7 @@ import React, { Component } from 'react'; import { Container } from 'flux/utils'; -import {Button, Col, Row, FormGroup} from 'react-bootstrap'; +import { Button, Form, Row, Col } from 'react-bootstrap'; import AppDispatcher from '../common/app-dispatcher'; import UsersStore from './users-store'; @@ -101,35 +101,51 @@ class User extends Component { } render() { + let user = this.state.currentUser; return (
    -

    Your User Account

    +

    Account

    - {this.state.currentUser !== undefined && this.state.currentUser !== null ? + {user ? + <> +
    + + Username +
    + + + + + E-mail + + + + + + Role + + + + + + Created at + + + + + + -
    - - - -
    Username:
    -
    E-mail:
    -
    Role:
    -     - -
    {this.state.currentUser.username}
    -
    {this.state.currentUser.mail}
    -
    {this.state.currentUser.role}
    - - - -     -     - - this.closeEditModal(data)} - user={this.state.currentUser} /> - - : "Loading user data..." + this.closeEditModal(data)} + user={this.state.currentUser} + /> + + :
    }
    ); From b2755048d5b7597d1c6dd7bc675f0881921bc90e Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 18:44:42 +0100 Subject: [PATCH 24/39] rename "Infrastructure Components" menu entry to "Infrastructure" to be more concise and match router path --- src/common/header-menu.js | 2 +- src/common/menu-sidebar.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/common/header-menu.js b/src/common/header-menu.js index e32af23..b8d3e20 100644 --- a/src/common/header-menu.js +++ b/src/common/header-menu.js @@ -28,7 +28,7 @@ export default class HeaderMenu extends React.Component {
    • Home
    • Scenarios
      • -
    • Infrastructure Components
      • +
    • Infrastructure
      • { this.props.currentRole === 'Admin' ?
    • Users
      • : '' } diff --git a/src/common/menu-sidebar.js b/src/common/menu-sidebar.js index d72102a..422786d 100644 --- a/src/common/menu-sidebar.js +++ b/src/common/menu-sidebar.js @@ -72,7 +72,7 @@ class SidebarMenu extends React.Component {
      • Home
      • Scenarios
        • -
      • Infrastructure Components
        • +
      • Infrastructure
        • { this.props.currentRole === 'Admin' ?
      • Users
        • : '' } @@ -91,7 +91,7 @@ class SidebarMenu extends React.Component {
        • Home
        • Scenarios
          • -
        • Infrastructure Components
          • +
        • Infrastructure
          • { this.props.currentRole === 'Admin' ?
        • Users
          • : '' } From 49be3f1c497b7cb7efa52a50628eacdb1dcd04e5 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 18:45:12 +0100 Subject: [PATCH 25/39] improve styling of side-menu --- src/styles/app.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/styles/app.css b/src/styles/app.css index 4d588c2..51dd687 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -108,7 +108,7 @@ body { @media (min-width: 768px) { .app-content-margin-left { - margin-left: 275px !important; + margin-left: 195px !important; } } @@ -123,9 +123,8 @@ body { * Menus */ .menu-sidebar { - /*display: inline-table;*/ padding: 20px 25px 20px 25px; - width: 250px; + width: 160px; float: left; background-color: #fff; @@ -148,9 +147,13 @@ body { .menu-sidebar ul { padding-top: 10px; + margin-bottom: 0; list-style: none; white-space: nowrap; } +.menu-sidebar li { + margin: 5px 0; +} .menu-sidebar a::after { /* Trick to make menu items to be as wide as in bold */ From 2c5cdd84b217336277014f18fd9624636abc3e24 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 19:20:31 +0100 Subject: [PATCH 26/39] harmonize ID column in various tables --- src/file/edit-files.js | 8 +- src/ic/ics.js | 7 ++ src/scenario/scenario.js | 161 +++++++++++++++++++++++--------------- src/scenario/scenarios.js | 25 ++++-- 4 files changed, 130 insertions(+), 71 deletions(-) diff --git a/src/file/edit-files.js b/src/file/edit-files.js index d15102b..b7f277c 100644 --- a/src/file/edit-files.js +++ b/src/file/edit-files.js @@ -128,7 +128,13 @@ class EditFilesDialog extends React.Component {
    - + {this.state.currentUser.role === "Admin" ? + + : <> + } diff --git a/src/ic/ics.js b/src/ic/ics.js index d305e2b..8e073a4 100644 --- a/src/ic/ics.js +++ b/src/ic/ics.js @@ -409,6 +409,13 @@ class InfrastructureComponents extends Component { onChecked={(ic, event) => this.onICChecked(ic, event)} width='30' /> + {this.state.currentUser.role === "Admin" ? + + : <> + } Loading Scenario...; } - let resulttable; - if (this.state.results && this.state.results.length > 0) { - resulttable =
    -
    - this.modifyResultNoColumn(id, result)} - /> - - - - this.downloadResultData(index)} - /> - this.setState({ editResultsModal: true, modalResultsIndex: index })} - onDownloadAll={(index) => this.downloadResultData(this.state.results[index])} - onDelete={(index) => this.setState({ deleteResultsModal: true, modalResultsData: this.state.results[index], modalResultsIndex: index })} - /> -
    - - - this.closeDeleteResultsModal(e)} /> - -
    - } - return
    Add, edit or delete files of scenario } > @@ -833,7 +775,15 @@ class Scenario extends React.Component { checkbox checkboxDisabled={(index) => !this.usesExternalIC(index)} onChecked={(index, event) => this.onConfigChecked(index, event)} - width='30' /> + width='30' + /> + {this.state.currentUser.role === "Admin" ? + + : <> + } - - + {this.state.currentUser.role === "Admin" ? + + : <> + } + + - {resulttable} - this.closeNewResultModal(data)} /> + +
    + this.modifyResultNoColumn(id, result)} + /> + + + + this.downloadResultData(index)} + /> + this.setState({ editResultsModal: true, modalResultsIndex: index })} + onDownloadAll={(index) => this.downloadResultData(this.state.results[index])} + onDelete={(index) => this.setState({ deleteResultsModal: true, modalResultsData: this.state.results[index], modalResultsIndex: index })} + /> +
    + + + this.closeDeleteResultsModal(e)} + /> + + this.closeNewResultModal(data)} + /> {/*Scenario Users table*/}

    Users sharing this scenario

    -
    - +
    + {this.state.currentUser.role === "Admin" ? + + : <> + }
    - - - this.modifyRunningColumn(running)}/> + {this.state.currentUser.role === "Admin" ? + + : <> + } + + this.modifyRunningColumn(running)} + /> Date: Mon, 8 Mar 2021 22:09:54 +0100 Subject: [PATCH 27/39] add link to SLEW project website --- src/common/home.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/home.js b/src/common/home.js index 5932022..20d8ff2 100644 --- a/src/common/home.js +++ b/src/common/home.js @@ -100,8 +100,8 @@ class Home extends React.Component {

    Funding

    The development of VILLASframework projects has received funding from

      -

      SLEW: Second Life for Energiewende, an Exploratory Teaching Space project funded by RWTH Aachen University

      -

      ERIgrid 2.0: An EU Horizon 2020 research and innovation action project for connecting European Smart Grid Infrastructures (grant agreement No 870620)

      +

      SLEW: Second Life for Energiewende, an Exploratory Teaching Space project funded by RWTH Aachen University

      +

      ERIgrid 2.0: An EU Horizon 2020 research and innovation action project for connecting European Smart Grid Infrastructures (grant agreement No 870620)

      Logo EU Logo ERIgrid 2.0 From dd548af37014337e840fb4642692592150c3cda3 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 22:17:11 +0100 Subject: [PATCH 28/39] introduce new IconButton component --- src/common/icon-button.js | 56 +++++++++++++++++++++++++++ src/ic/ics.js | 32 ++++++++-------- src/scenario/scenario.js | 80 ++++++++++++++++++++------------------- src/scenario/scenarios.js | 45 ++++++++-------------- src/user/users.js | 43 ++++++--------------- 5 files changed, 140 insertions(+), 116 deletions(-) create mode 100644 src/common/icon-button.js diff --git a/src/common/icon-button.js b/src/common/icon-button.js new file mode 100644 index 0000000..a3dd0b3 --- /dev/null +++ b/src/common/icon-button.js @@ -0,0 +1,56 @@ +/** + * 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 . + ******************************************************************************/ + +import React from 'react'; + +import { Button, Tooltip, OverlayTrigger } from 'react-bootstrap'; + +import Icon from '../common/icon'; + + +class IconButton extends React.Component { + + render() { + const altButtonStyle = { + marginLeft: '10px', + } + + const iconStyle = { + height: '30px', + width: '30px' + } + + return {this.props.tooltip}} > + + + } +} + +export default IconButton; diff --git a/src/ic/ics.js b/src/ic/ics.js index 8e073a4..d664107 100644 --- a/src/ic/ics.js +++ b/src/ic/ics.js @@ -17,7 +17,7 @@ import React, { Component } from 'react'; import { Container } from 'flux/utils'; -import {Button, Badge, Tooltip, OverlayTrigger} from 'react-bootstrap'; +import { Button, Badge } from 'react-bootstrap'; import FileSaver from 'file-saver'; import _ from 'lodash'; import moment from 'moment' @@ -38,6 +38,7 @@ import ICAction from './ic-action'; import DeleteDialog from '../common/dialogs/delete-dialog'; import NotificationsDataManager from "../common/data-managers/notifications-data-manager"; import NotificationsFactory from "../common/data-managers/notifications-factory"; +import IconButton from '../common/icon-button'; class InfrastructureComponents extends Component { static getStores() { @@ -242,7 +243,6 @@ class InfrastructureComponents extends Component { } onICChecked(ic, event) { - let index = this.state.ics.indexOf(ic); const selectedICs = Object.assign([], this.state.selectedICs); for (let key in selectedICs) { @@ -488,22 +488,22 @@ class InfrastructureComponents extends Component { return (

      -

      Infrastructure Components +

      Infrastructure {this.state.currentUser.role === "Admin" ? - Add Infrastructure Component } > - - - Import Infrastructure Component } > - - - + this.setState({newModal: true})} + icon='plus' + /> + this.setState({importModal: true})} + icon='upload' + /> + : }

      diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index a3943c9..1e9c0c0 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -17,7 +17,7 @@ import React from 'react'; import { Container } from 'flux/utils'; -import { Button, InputGroup, FormControl, Tooltip, OverlayTrigger } from 'react-bootstrap'; +import { Button, InputGroup, FormControl } from 'react-bootstrap'; import FileSaver from 'file-saver'; @@ -31,6 +31,7 @@ import AppDispatcher from '../common/app-dispatcher'; import Icon from '../common/icon'; import Table from '../common/table'; import TableColumn from '../common/table-column'; +import IconButton from '../common/icon-button'; import ImportConfigDialog from '../componentconfig/import-config'; import ImportDashboardDialog from "../dashboard/import-dashboard"; import NewDashboardDialog from "../dashboard/new-dashboard"; @@ -736,11 +737,12 @@ class Scenario extends React.Component { return
      - Add, edit or delete files of scenario } > - - +

      {this.state.scenario.name}

      @@ -756,19 +758,19 @@ class Scenario extends React.Component { {/*Component Configurations table*/}

      Component Configurations - Add Component Configuration } > - - - Import Component Configuration } > - - - + this.addConfig()} + icon='plus' + /> + this.setState({ importConfigModal: true })} + icon='upload' + /> +

    Dashboards - Add Dashboard } > - - - Import Dashboard } > - - - + this.setState({ newDashboardModal: true })} + icon='plus' + /> + this.setState({ importDashboardModal: true })} + icon='upload' + /> +
    {this.state.currentUser.role === "Admin" ? @@ -936,13 +938,13 @@ class Scenario extends React.Component { {/*Result table*/}

    Results - Add Result } > - - - + this.setState({ newResultModal: true })} + icon='plus' + /> +

    diff --git a/src/scenario/scenarios.js b/src/scenario/scenarios.js index 1c58e50..1c1d9d5 100644 --- a/src/scenario/scenarios.js +++ b/src/scenario/scenarios.js @@ -17,7 +17,6 @@ import React, { Component } from 'react'; import { Container } from 'flux/utils'; -import {Button, OverlayTrigger, Tooltip} from 'react-bootstrap'; import FileSaver from 'file-saver'; import AppDispatcher from '../common/app-dispatcher'; @@ -35,6 +34,7 @@ import EditScenarioDialog from './edit-scenario'; import ImportScenarioDialog from './import-scenario'; import DeleteDialog from '../common/dialogs/delete-dialog'; +import IconButton from '../common/icon-button'; class Scenarios extends Component { @@ -235,35 +235,23 @@ class Scenarios extends Component { return } - } - render() { - const buttonStyle = { - marginLeft: '10px', - }; - - const iconStyle = { - height: '30px', - width: '30px' - } - - return ( -
    + return

    Scenarios - Add Scenario } > - - - Import Scenario } > - - - + this.setState({ newModal: true })} + icon='plus' + /> + this.setState({ importModal: true })} + icon='upload' + /> +

    @@ -303,8 +291,7 @@ class Scenarios extends Component { this.closeImportModal(data)} nodes={this.state.nodes} /> this.closeDeleteModal(e)} /> - - ); + ; } } diff --git a/src/user/users.js b/src/user/users.js index 8585ce0..a7686c6 100644 --- a/src/user/users.js +++ b/src/user/users.js @@ -17,12 +17,12 @@ import React, { Component } from 'react'; import { Container } from 'flux/utils'; -import {Button, OverlayTrigger, Tooltip} from 'react-bootstrap'; import AppDispatcher from '../common/app-dispatcher'; import UsersStore from './users-store'; import Icon from '../common/icon'; +import IconButton from '../common/icon-button'; import Table from '../common/table'; import TableColumn from '../common/table-column'; import NewUserDialog from './new-user'; @@ -55,7 +55,8 @@ class Users extends Component { newModal: false, editModal: false, deleteModal: false, - modalData: {} + modalData: {}, + currentUser: JSON.parse(localStorage.getItem("currentUser")) }; } @@ -115,36 +116,15 @@ class Users extends Component { } render() { - const buttonStyle = { - marginLeft: '10px', - }; - - const iconStyle = { - height: '30px', - width: '30px' - } - - return ( -
    + return

    Users - Add User } - > - - + this.setState({ newModal: true })} + icon='plus' + />

    @@ -190,8 +170,7 @@ class Users extends Component { this.closeNewModal(data)} /> this.closeEditModal(data)} user={this.state.modalData} /> this.closeDeleteModal(e)} /> -
    - ); +
    ; } } From 35a8842de5c4b936cd7e0a0cfa65827027874594 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 22:19:30 +0100 Subject: [PATCH 29/39] cosmetic code cleanups --- src/common/table.js | 2 +- src/file/edit-files.js | 65 ++++++++++++++++++-------------------- src/scenario/scenarios.js | 8 ++--- src/user/edit-own-user.js | 2 +- src/user/edit-user.js | 2 +- src/user/login-complete.js | 8 +++-- src/user/users.js | 15 +++++---- 7 files changed, 49 insertions(+), 53 deletions(-) diff --git a/src/common/table.js b/src/common/table.js index 6d75cfa..b0a22c4 100644 --- a/src/common/table.js +++ b/src/common/table.js @@ -39,7 +39,7 @@ class CustomTable extends Component { }; onClick(event, row, column) { - this.setState({ editCell: [column, row] }); // x, y + this.setState({ editCell: [column, row] }); // x, y } static addCell(data, index, child) { diff --git a/src/file/edit-files.js b/src/file/edit-files.js index b7f277c..93c49c0 100644 --- a/src/file/edit-files.js +++ b/src/file/edit-files.js @@ -27,7 +27,6 @@ import EditFileContent from "./edit-file-content"; class EditFilesDialog extends React.Component { valid = true; - constructor(props) { super(props); @@ -40,7 +39,6 @@ class EditFilesDialog extends React.Component { } onClose() { - this.props.onClose(); } @@ -71,29 +69,17 @@ class EditFilesDialog extends React.Component { } else { this.setState({ uploadProgress: 0 }); } - }; clearProgress = (newFileID) => { - /*if (this.props.onChange != null) { - let event = {} - event["target"] = {} - event.target["value"] = newFileID - this.props.onChange(event); - } - */ this.setState({ uploadProgress: 0 }); - - }; - closeEditModal(){ - - this.setState({editModal: false}); + closeEditModal() { + this.setState({editModal: false}); } deleteFile(index){ - let file = this.props.files[index] AppDispatcher.dispatch({ type: 'files/start-remove', @@ -102,9 +88,7 @@ class EditFilesDialog extends React.Component { }); } - render() { - let fileOptions = []; if (this.props.files.length > 0){ fileOptions.push( @@ -122,7 +106,6 @@ class EditFilesDialog extends React.Component { marginTop: '-40px' }; - return ( this.onClose()} blendOutCancel = {true} valid={true} size = 'lg'>
    @@ -135,9 +118,18 @@ class EditFilesDialog extends React.Component { /> : <> } - - - + + + this.selectUploadFile(event)} /> + onChange={(event) => this.selectUploadFile(event)} + /> - - - + + + @@ -176,12 +169,14 @@ class EditFilesDialog extends React.Component {
    - this.closeEditModal(data)} sessionToken={this.props.sessionToken} file={this.state.modalFile} /> - + this.closeEditModal(data)} + sessionToken={this.props.sessionToken} + file={this.state.modalFile} + />
    - - ); } } diff --git a/src/scenario/scenarios.js b/src/scenario/scenarios.js index 1c1d9d5..1128c29 100644 --- a/src/scenario/scenarios.js +++ b/src/scenario/scenarios.js @@ -228,12 +228,8 @@ class Scenarios extends Component { } modifyRunningColumn(running){ - - if(running){ - return - } else { - return - } + return + } render() { return
    diff --git a/src/user/edit-own-user.js b/src/user/edit-own-user.js index d436aea..a5b7756 100644 --- a/src/user/edit-own-user.js +++ b/src/user/edit-own-user.js @@ -78,7 +78,7 @@ class EditOwnUserDialog extends React.Component { } // form is valid if the following condition is met - this.valid = username || mail || (oldPassword && pw && confirmPassword); + this.valid = username || mail || (oldPassword && pw && confirmPassword); } resetState() { diff --git a/src/user/edit-user.js b/src/user/edit-user.js index ba49228..5d20bf4 100644 --- a/src/user/edit-user.js +++ b/src/user/edit-user.js @@ -64,7 +64,7 @@ class EditUserDialog extends React.Component { username = false; } - if (this.state.role === ''){ + if (this.state.role === '') { role = false; } diff --git a/src/user/login-complete.js b/src/user/login-complete.js index 698dc81..9ed2fc7 100644 --- a/src/user/login-complete.js +++ b/src/user/login-complete.js @@ -94,8 +94,12 @@ class LoginComplete extends React.Component { this.stopTimer(); return (); } else { - return (
    - Waiting Dog
    ); + return
    + Waiting Dog +
    ; } } } diff --git a/src/user/users.js b/src/user/users.js index a7686c6..a7b98ed 100644 --- a/src/user/users.js +++ b/src/user/users.js @@ -90,8 +90,7 @@ class Users extends Component { this.setState({ editModal: false }); if (data) { - if(data.password === data.confirmPassword) { - + if (data.password === data.confirmPassword) { AppDispatcher.dispatch({ type: 'users/start-edit', data: data, @@ -129,16 +128,18 @@ class Users extends Component {
    + {this.state.currentUser.role === "Admin" ? + + : <> + } - Date: Mon, 8 Mar 2021 22:22:27 +0100 Subject: [PATCH 30/39] remove broken responsive layout --- src/app.js | 72 ++++++++----------------- src/common/header-menu.js | 40 -------------- src/common/header.js | 13 +---- src/common/{menu-sidebar.js => menu.js} | 21 +++----- src/styles/app.css | 56 ++++++------------- 5 files changed, 46 insertions(+), 156 deletions(-) delete mode 100644 src/common/header-menu.js rename src/common/{menu-sidebar.js => menu.js} (94%) diff --git a/src/app.js b/src/app.js index fe71133..8b2655a 100644 --- a/src/app.js +++ b/src/app.js @@ -20,7 +20,6 @@ import { DndProvider } from 'react-dnd'; import HTML5Backend from 'react-dnd-html5-backend'; import NotificationSystem from 'react-notification-system'; import { Redirect, Route } from 'react-router-dom'; -import { Col } from 'react-bootstrap'; import { Hidden } from 'react-grid-system' import AppDispatcher from './common/app-dispatcher'; @@ -29,8 +28,7 @@ import NotificationsDataManager from './common/data-managers/notifications-data- import Home from './common/home'; import Header from './common/header'; import Footer from './common/footer'; -import SidebarMenu from './common/menu-sidebar'; -import HeaderMenu from './common/header-menu'; +import Menu from './common/menu'; import InfrastructureComponents from './ic/ics'; import Dashboard from './dashboard/dashboard'; @@ -51,9 +49,7 @@ class App extends React.Component { type: 'config/load', }); - this.state = { - showSidebarMenu: false, - } + this.state = {} } componentDidMount() { @@ -72,14 +68,6 @@ class App extends React.Component { } } - showSidebarMenu = () => { - this.setState({ showSidebarMenu: true }); - }; - - hideSidebarMenu = () => { - this.setState({ showSidebarMenu: false }); - }; - render() { let token = localStorage.getItem("token"); @@ -92,46 +80,32 @@ class App extends React.Component { let currentUser = JSON.parse(currentUserRaw); - return ( - -
    - {/* -
    - */} - - - - - + return +
    + +
    -
    - +
    + -
    - -
    -
    - - - -
    - - - - - - - - - -
    +
    + + + + + + + + +
    - -
    + +
    - - ) + } } diff --git a/src/common/header-menu.js b/src/common/header-menu.js deleted file mode 100644 index b8d3e20..0000000 --- a/src/common/header-menu.js +++ /dev/null @@ -1,40 +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 . - ******************************************************************************/ - -import React from 'react'; -import { Button } from 'react-bootstrap'; -import { NavLink } from 'react-router-dom'; - -export default class HeaderMenu extends React.Component { - render() { - return
    - - - -
      -
    • Home
      • -
    • Scenarios
      • -
    • Infrastructure
      • - { this.props.currentRole === 'Admin' ? -
    • Users
      • : '' - } -
    • Account
      • -
    • Logout
      • -
    -
    ; - } -} diff --git a/src/common/header.js b/src/common/header.js index c5c71b7..c305d5f 100644 --- a/src/common/header.js +++ b/src/common/header.js @@ -25,18 +25,7 @@ class Header extends React.Component { render() { return (
    -
    -

    {config.instance} - {config.subtitle}

    - - - - {this.props.showMenuButton && - - } - - +

    {config.instance} - {config.subtitle}

    ); } diff --git a/src/common/menu-sidebar.js b/src/common/menu.js similarity index 94% rename from src/common/menu-sidebar.js rename to src/common/menu.js index 422786d..8ae8e3f 100644 --- a/src/common/menu-sidebar.js +++ b/src/common/menu.js @@ -65,10 +65,11 @@ class SidebarMenu extends React.Component { } render() { - if (this.state.externalAuth) { - return ( -
    -

    Menu

    + return ( +
    +

    Menu

    + + {this.state.externalAuth ?
    • Home
    • Scenarios
      • @@ -80,15 +81,7 @@ class SidebarMenu extends React.Component { Logout
    • API Browser
    -
    - ); - } - - return ( -
    -

    Menu

    - -
      + :
      • Home
      • Scenarios
      • Infrastructure
        • @@ -98,7 +91,7 @@ class SidebarMenu extends React.Component {
      • Account
      • Logout
      • API Browser
        • -
      +
    }
    ); } diff --git a/src/styles/app.css b/src/styles/app.css index 51dd687..7c50bcf 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -30,37 +30,18 @@ body { hyphens: auto; } -.app-body { - /*height: 100%;*/ -} - .app-header { width: 100%; - height: 60px; - padding: 10px 0 0 0; color: #527984; background-color: #fff; } .app-header h1 { - width: 100%; + padding: 5px 0; margin: 0; - - text-align: left; -} - -@media (min-width: 768px) { - .app-header h1 { - text-align: center !important; - } -} - -.app-header .menu-icon { - color: #818181; - right: 5px; - - padding: 6px 0 0 0; + width: 100%; + text-align: center; } .btn-link { @@ -83,12 +64,7 @@ body { } .app-body-spacing { - padding: 15px 5px 0px 5px; -} - -.app-body-spacing > div { - margin-left: 7px; - margin-right: 7px; + padding: 20px; } .app-content-fullscreen { @@ -96,7 +72,7 @@ body { } .app-content { - padding: 15px 20px; + padding: 15px 20px 20px 20px; width: auto; min-height: 300px; @@ -106,10 +82,8 @@ body { 0 9px 18px 0 rgba(0, 0, 0, 0.1); } -@media (min-width: 768px) { - .app-content-margin-left { - margin-left: 195px !important; - } +.app-content-margin-left { + margin-left: 180px !important; } .verticalhorizontal { @@ -122,8 +96,8 @@ body { /** * Menus */ -.menu-sidebar { - padding: 20px 25px 20px 25px; +.menu { + padding: 20px; width: 160px; float: left; @@ -132,12 +106,12 @@ body { 0 9px 18px 0 rgba(0, 0, 0, 0.1); } -.menu-sidebar a { +.menu a { color: #4d4d4d; text-decoration:none; } -.menu-sidebar a:hover, .menu-sidebar a:focus { +.menu a:hover, .menu a:focus { text-decoration:none; } @@ -145,17 +119,17 @@ body { font-weight: bold; } -.menu-sidebar ul { +.menu ul { padding-top: 10px; margin-bottom: 0; list-style: none; white-space: nowrap; } -.menu-sidebar li { +.menu li { margin: 5px 0; } -.menu-sidebar a::after { +.menu a::after { /* Trick to make menu items to be as wide as in bold */ display: block; content: attr(title); @@ -232,7 +206,7 @@ body { /** * Login select */ - .login-select { +.login-select { position: sticky; width: 300px; height: 150px; From 46ce71e738df2394687605688b6589567aa659f6 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 22:27:33 +0100 Subject: [PATCH 31/39] make tables more compact --- src/styles/app.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/styles/app.css b/src/styles/app.css index 7c50bcf..035497c 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -253,15 +253,16 @@ hr { color: #fff; } +.table td { + padding: 0.5em 0.5em !important; +} + /** * Buttons */ -.table-control-button { - border: none; - - background: none; - - padding: 0 5px; +.btn-table-control-button { + padding: 0 0.5em !important; + line-height: 1em !important; } .table-control-button:hover { From e9a80292d2a3ade4c2c3a935df3ab95895020c3b Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 22:27:53 +0100 Subject: [PATCH 32/39] fix hover style of table edit actions --- src/styles/app.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/app.css b/src/styles/app.css index 035497c..dc55a11 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -265,8 +265,8 @@ hr { line-height: 1em !important; } -.table-control-button:hover { - color: #888; +.btn-table-control-button:hover { + color: #888 !important; } .table-control-checkbox input { From 17aa021d1e962dc0a876be7f87ceb07dd5145049 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 22:40:35 +0100 Subject: [PATCH 33/39] make table headings more compact --- src/styles/app.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/app.css b/src/styles/app.css index dc55a11..d7d8b2c 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -248,15 +248,15 @@ hr { /** * Tables */ +.table th,td { + padding: 0.5em 0.5em !important; +} + .table th { background-color: #527984; color: #fff; } -.table td { - padding: 0.5em 0.5em !important; -} - /** * Buttons */ From 13c0c0970cac8a51d5b742d25cc979b17828df44 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 22:42:22 +0100 Subject: [PATCH 34/39] align action buttons in table to the right --- src/common/table-column.js | 16 ++++++++++------ src/common/table.js | 6 +++++- src/file/edit-files.js | 1 + src/ic/ics.js | 1 + src/scenario/scenario.js | 5 ++++- src/scenario/scenarios.js | 1 + src/user/users.js | 1 + 7 files changed, 23 insertions(+), 8 deletions(-) diff --git a/src/common/table-column.js b/src/common/table-column.js index 2711537..fb9905a 100644 --- a/src/common/table-column.js +++ b/src/common/table-column.js @@ -39,15 +39,19 @@ class TableColumn extends Component { checkboxKey: '', checkboxDisabled: null, labelStyle: null, - labelModifier: null + labelModifier: null, + align: 'left' }; render() { - return ( -
    - ); + let style = { + textAlign: this.props.align, + width: this.props.width + }; + + return ; } } diff --git a/src/common/table.js b/src/common/table.js index b0a22c4..686d352 100644 --- a/src/common/table.js +++ b/src/common/table.js @@ -250,7 +250,7 @@ class CustomTable extends Component { } return cell; - } // addCell + } static getDerivedStateFromProps(props, state) { const rows = CustomTable.getRows(props); @@ -329,9 +329,13 @@ class CustomTable extends Component { onCellFocus: () => { }, onCellBlur: () => { } }; + let cellStyle = { + textAlign: children[cellIndex].props.align + }; return
    - {this.props.title} - + {this.props.title} + this.deleteFile(index)} editButton diff --git a/src/ic/ics.js b/src/ic/ics.js index d664107..b0a5016 100644 --- a/src/ic/ics.js +++ b/src/ic/ics.js @@ -445,6 +445,7 @@ class InfrastructureComponents extends Component { {this.state.currentUser.role === "Admin" ? this.isLocalIC(index, ics)} exportButton diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 1e9c0c0..90d0586 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -821,6 +821,7 @@ class Scenario extends React.Component { this.downloadResultData(index)} /> this.setState({ From 96c346e0e18468272c8e218e21e70b47cc77fcbf Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 22:42:36 +0100 Subject: [PATCH 35/39] fix padding of Swagger API UI --- src/styles/app.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/styles/app.css b/src/styles/app.css index d7d8b2c..7142f1a 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -463,3 +463,11 @@ hr { .badge-outdated { opacity: 0.4; } + + +/** + * Swagger UI + */ +.swagger-ui .wrapper { + padding: 0 !important; +} From c95cb5beab7d2f162a7dfd280b908f441aa6c38c Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 23:53:08 +0100 Subject: [PATCH 36/39] refactor FormControl et al. to Form.Control --- src/common/dialogs/delete-dialog.js | 5 +- src/common/editable-header.js | 25 ++- src/componentconfig/edit-config.js | 33 ++-- src/componentconfig/import-config.js | 24 +-- src/dashboard/edit-dashboard.js | 25 +-- src/dashboard/import-dashboard.js | 24 +-- src/dashboard/new-dashboard.js | 25 +-- src/file/edit-file-content.js | 27 ++-- src/file/edit-files.js | 141 +++++++++-------- src/file/select-file.js | 32 ++-- src/ic/edit-ic.js | 91 ++++++----- src/ic/ic-action.js | 7 +- src/ic/import-ic.js | 53 ++++--- src/ic/new-ic.js | 119 +++++++------- src/result/edit-result.js | 140 +++++++++-------- src/result/new-result.js | 27 ++-- src/result/result-configs-dialog.js | 21 +-- src/scenario/edit-scenario.js | 32 ++-- src/scenario/import-scenario.js | 40 +++-- src/scenario/new-scenario.js | 30 ++-- src/scenario/scenario.js | 2 +- src/signal/edit-signal-mapping.js | 146 ++++++++++++------ src/user/login-form.js | 23 ++- .../edit-widget/edit-widget-aspect-control.js | 12 +- .../edit-widget-checkbox-control.js | 13 +- .../edit-widget/edit-widget-color-control.js | 21 ++- .../edit-widget-color-zones-control.js | 88 ++++++----- .../edit-widget/edit-widget-file-control.js | 12 +- .../edit-widget/edit-widget-html-content.js | 25 +-- .../edit-widget/edit-widget-ic-control.js | 12 +- .../edit-widget-min-max-control.js | 16 +- .../edit-widget/edit-widget-number-control.js | 10 +- .../edit-widget/edit-widget-orientation.js | 21 ++- .../edit-widget-parameters-control.js | 13 +- .../edit-widget-plot-colors-control.js | 53 ++++--- .../edit-widget/edit-widget-signal-control.js | 12 +- .../edit-widget-signals-control.js | 14 +- .../edit-widget/edit-widget-text-control.js | 12 +- .../edit-widget-text-size-control.js | 12 +- .../edit-widget/edit-widget-time-control.js | 12 +- src/widget/edit-widget/edit-widget.js | 14 +- src/widget/widgets/input.js | 10 +- 42 files changed, 820 insertions(+), 654 deletions(-) diff --git a/src/common/dialogs/delete-dialog.js b/src/common/dialogs/delete-dialog.js index a4499e5..8bc39a1 100644 --- a/src/common/dialogs/delete-dialog.js +++ b/src/common/dialogs/delete-dialog.js @@ -16,8 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { Button, Modal, FormLabel } from 'react-bootstrap'; -import {Collapse} from 'react-collapse'; +import { Button, Modal, Form } from 'react-bootstrap'; class DeleteDialog extends React.Component { onModalKeyPress = (event) => { @@ -37,7 +36,7 @@ class DeleteDialog extends React.Component { Are you sure you want to delete the {this.props.title} '{this.props.name}'? - The IC will be deleted if the respective manager sends "gone" state and no component config is using the IC anymore + The IC will be deleted if the respective manager sends "gone" state and no component config is using the IC anymore diff --git a/src/common/editable-header.js b/src/common/editable-header.js index a10b48d..03a666a 100644 --- a/src/common/editable-header.js +++ b/src/common/editable-header.js @@ -17,7 +17,7 @@ // TODO remove this file (not used!) import React from 'react'; import PropTypes from 'prop-types'; -import { FormControl, Button } from 'react-bootstrap'; +import { Form, Button } from 'react-bootstrap'; import Icon from './icon'; class EditableHeader extends React.Component { @@ -79,12 +79,25 @@ class EditableHeader extends React.Component { }; return
    -
    - - +
    + + - - + +
    ; } diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js index 2277331..37a2a3e 100644 --- a/src/componentconfig/edit-config.js +++ b/src/componentconfig/edit-config.js @@ -16,8 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, FormLabel} from 'react-bootstrap'; -import { Multiselect } from 'multiselect-react-dropdown' +import { Form } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; import ParametersEditor from '../common/parameters-editor'; @@ -141,29 +140,29 @@ class EditConfigDialog extends React.Component { onReset={() => this.resetState()} valid={this.valid} > -
    - - Name - + + Name + this.handleChange(e)} /> - - + + - - Infrastructure Component - + Infrastructure Component + this.handleChange(e)} > {ICOptions} - - + + - - Start Parameters + + Start Parameters this.handleParameterChange(data)} /> - - + + ); } diff --git a/src/componentconfig/import-config.js b/src/componentconfig/import-config.js index b11a69e..2b69d9a 100644 --- a/src/componentconfig/import-config.js +++ b/src/componentconfig/import-config.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; @@ -102,15 +102,15 @@ class ImportConfigDialog extends React.Component { onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid} > -
    - - Component Configuration File - - + + + Component Configuration File + + - - Name - + Name + this.handleChange(e)} /> - - -
    + + + ); } diff --git a/src/dashboard/edit-dashboard.js b/src/dashboard/edit-dashboard.js index 2df61bf..42b5230 100644 --- a/src/dashboard/edit-dashboard.js +++ b/src/dashboard/edit-dashboard.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; @@ -71,14 +71,21 @@ class EditDashboardDialog extends React.Component { render() { return ( - this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> -
    - - Name - this.handleChange(e)} /> - - -
    + this.onClose(c)} + onReset={() => this.resetState()} + valid={this.valid} + > +
    + + Name + this.handleChange(e)} /> + + +
    ); } diff --git a/src/dashboard/import-dashboard.js b/src/dashboard/import-dashboard.js index 47e5216..519a552 100644 --- a/src/dashboard/import-dashboard.js +++ b/src/dashboard/import-dashboard.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; @@ -100,15 +100,15 @@ class ImportDashboardDialog extends React.Component { onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> -
    - - Dashboard File - this.loadFile(e.target.files)} /> - + + + Dashboard File + this.loadFile(e.target.files)} /> + - - Name - + Name + this.handleChange(e)} /> - - -
    + + +     ); } diff --git a/src/dashboard/new-dashboard.js b/src/dashboard/new-dashboard.js index a023ba4..5cc8a3e 100644 --- a/src/dashboard/new-dashboard.js +++ b/src/dashboard/new-dashboard.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; @@ -67,14 +67,21 @@ class NewDashboardDialog extends React.Component { render() { return ( - this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> -
    - - Name - this.handleChange(e)} /> - - -
    + this.onClose(c)} + onReset={() => this.resetState()} + valid={this.valid} + > +
    + + Name + this.handleChange(e)} /> + + +
    ); } diff --git a/src/file/edit-file-content.js b/src/file/edit-file-content.js index 34a142e..7f9534d 100644 --- a/src/file/edit-file-content.js +++ b/src/file/edit-file-content.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, Button, Col} from 'react-bootstrap'; +import { Form, Button, Col } from 'react-bootstrap'; import AppDispatcher from "../common/app-dispatcher"; import Dialog from '../common/dialogs/dialog'; @@ -28,7 +28,6 @@ class EditFileContent extends React.Component { this.state = { uploadFile: null, - }; } @@ -50,31 +49,33 @@ class EditFileContent extends React.Component { this.setState({ uploadFile: null }); }; - onClose = () => { this.props.onClose(); }; - - - render() { - return this.onClose()} blendOutCancel = {true} valid={true}> - - this.onClose()} + blendOutCancel = {true} + valid={true} + > + + this.selectUploadFile(event)} /> - + - + - - + ; } } diff --git a/src/file/edit-files.js b/src/file/edit-files.js index 41d34cf..4058888 100644 --- a/src/file/edit-files.js +++ b/src/file/edit-files.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, Button, Col, ProgressBar} from 'react-bootstrap'; +import { Form, Button, Col, ProgressBar } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; import AppDispatcher from "../common/app-dispatcher"; import Table from "../common/table"; @@ -107,76 +107,81 @@ class EditFilesDialog extends React.Component { }; return ( - this.onClose()} blendOutCancel = {true} valid={true} size = 'lg'> -
    - - - {this.state.currentUser.role === "Admin" ? - - : <> - } + this.onClose()} + blendOutCancel = {true} + valid={true} + > +
    + {this.state.currentUser.role === "Admin" ? - - - this.deleteFile(index)} - editButton - onEdit={index => this.setState({ editModal: true, modalFile: this.props.files[index] })} - /> -
    - - - this.selectUploadFile(event)} - /> - - - - - - - - - - - -
    - - this.closeEditModal(data)} - sessionToken={this.props.sessionToken} - file={this.state.modalFile} + : <> + } + -
    + + + this.deleteFile(index)} + editButton + onEdit={index => this.setState({ editModal: true, modalFile: this.props.files[index] })} + /> +
    + + + this.selectUploadFile(event)} + /> + + + + + + + + + + + + +
    + + this.closeEditModal(data)} + sessionToken={this.props.sessionToken} + file={this.state.modalFile} + />
    ); } diff --git a/src/file/select-file.js b/src/file/select-file.js index bf7469a..42c9c54 100644 --- a/src/file/select-file.js +++ b/src/file/select-file.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel, Button, Col, ProgressBar } from 'react-bootstrap'; +import { Form, Button, Col, ProgressBar } from 'react-bootstrap'; import AppDispatcher from '../common/app-dispatcher'; class SelectFile extends React.Component { @@ -88,39 +88,39 @@ class SelectFile extends React.Component { }; return
    - - + + {this.props.name} - + - - + this.props.onChange(event)}> {fileOptions} - - - + + + - - + this.selectUploadFile(event)} /> - + - + - + - + - +
    ; } diff --git a/src/ic/edit-ic.js b/src/ic/edit-ic.js index 91b9de4..0782b5b 100644 --- a/src/ic/edit-ic.js +++ b/src/ic/edit-ic.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel, FormCheck } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; import _ from 'lodash'; import {Collapse} from 'react-collapse'; import Dialog from '../common/dialogs/dialog'; @@ -150,71 +150,70 @@ class EditICDialog extends React.Component { onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid} - size='lg' > -
    - UUID: {this.props.ic.uuid} - - Name - this.handleChange(e)} /> - - - - Category - this.handleChange(e)}> + + UUID: {this.props.ic.uuid} + + Name + this.handleChange(e)} /> + + + + Category + this.handleChange(e)}> - - - - Type - this.handleChange(e)}> + + + + Type + this.handleChange(e)}> {typeOptions.map((name,index) => ( ))} - - - - Websocket URL - this.handleChange(e)} /> - - - - API URL - this.handleChange(e)} /> - - - - Location - this.handleChange(e)} /> - - - - Description - this.handleChange(e)} /> - - - - Start parameter schema of IC + + + + Websocket URL + this.handleChange(e)} /> + + + + API URL + this.handleChange(e)} /> + + + + Location + this.handleChange(e)} /> + + + + Description + this.handleChange(e)} /> + + + + Start parameter schema of IC this.handleStartParameterSchemaChange(data)} /> - - - Properties + + + Properties this.handlePropertiesChange(data)} /> - -
    + + ); } diff --git a/src/ic/ic-action.js b/src/ic/ic-action.js index c5358c5..df4c17f 100644 --- a/src/ic/ic-action.js +++ b/src/ic/ic-action.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { Form, SplitButton, Dropdown, FormControl } from 'react-bootstrap'; +import { Form, SplitButton, Dropdown } from 'react-bootstrap'; import AppDispatcher from "../common/app-dispatcher"; import NotificationsFactory from "../common/data-managers/notifications-factory"; import NotificationsDataManager from "../common/data-managers/notifications-data-manager"; @@ -228,10 +228,11 @@ class ICAction extends React.Component { return
    - + onChange={this.setTimeForAction} + /> this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> - - - Infrastructure Component File - this.loadFile(e.target.files)} /> - + this.onClose(c)} + onReset={() => this.resetState()} + valid={this.valid} + > + + + Infrastructure Component File + this.loadFile(e.target.files)} /> + - - Name - this.handleChange(e)} /> - - - - Websocket URL - this.handleChange(e)} /> - - - - UUID - this.handleChange(e)} /> - - - + + Name + this.handleChange(e)} /> + + + + Websocket URL + this.handleChange(e)} /> + + + + UUID + this.handleChange(e)} /> + + + ); } diff --git a/src/ic/new-ic.js b/src/ic/new-ic.js index 73a28eb..3fe9fb8 100644 --- a/src/ic/new-ic.js +++ b/src/ic/new-ic.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel, FormCheck, OverlayTrigger, Tooltip} from 'react-bootstrap'; +import { Form, OverlayTrigger, Tooltip} from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; import ParametersEditor from '../common/parameters-editor'; @@ -191,101 +191,108 @@ class NewICDialog extends React.Component { } return ( - this.onClose(c)} onReset={() => this.resetState()} valid={this.validateForm()}> -
    + this.onClose(c)} + onReset={() => this.resetState()} + valid={this.validateForm()} + > + {this.props.managers.length > 0 ? <> - + An externally managed component is created and managed by an IC manager via AMQP} > - this.handleChange(e)}> - + this.handleChange(e)}> + - + {this.state.managedexternally === true ? - + Required field } > - Manager to create new IC * + Manager to create new IC * - this.handleChange(e)}> + this.handleChange(e)}> {managerOptions} - - + + :
    } :
    } - + Required field } > - Name * + Name * - this.handleChange(e)} /> - - + this.handleChange(e)} /> + + {this.state.managedexternally === false ? - - UUID - + UUID + this.handleChange(e)}/> - - + + :
    } - - Location - this.handleChange(e)} /> - - - - Description - this.handleChange(e)} /> - - - + + Location + this.handleChange(e)} /> + + + + Description + this.handleChange(e)} /> + + + Required field } > - Category of component * + Category of component * - this.handleChange(e)}> + this.handleChange(e)}> - - - + + + Required field } > - Type of component * + Type of component * - this.handleChange(e)}> + this.handleChange(e)}> {typeOptions.map((name,index) => ( ))} - - - - Websocket URL - this.handleChange(e)} /> - - - - API URL - this.handleChange(e)} /> - - + + + + Websocket URL + this.handleChange(e)} /> + + + + API URL + this.handleChange(e)} /> + + {this.state.managedexternally === true ? - - Properties + + Properties this.handlePropertiesChange(data)} /> - + :
    } - +
    ); } diff --git a/src/result/edit-result.js b/src/result/edit-result.js index 024a410..2b8b13f 100644 --- a/src/result/edit-result.js +++ b/src/result/edit-result.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel, Col, Row, Button, ProgressBar } from 'react-bootstrap'; +import { Form, Col, Row, Button, ProgressBar } from 'react-bootstrap'; import AppDispatcher from "../common/app-dispatcher"; import FileStore from "../file/file-store" @@ -131,78 +131,90 @@ class EditResultDialog extends React.Component { } render() { - - return this.onClose()} blendOutCancel={true} valid={true} - size='lg'> + > + + + + Description + + + + + + + + + + + + + + + + this.deleteFile(index)} + /> +
    -
    - - - - Description - - - - - - - - - - - - - - - - - this.deleteFile(index)} - /> -
    - -
    -
    Add result file
    - - - this.selectUploadFile(event)} /> - - - - - -
    - -

    - - - - - +
    +
    Add result file
    + + + this.selectUploadFile(event)} /> + + + + +
    + +
    + + + +
    ; } } -export default EditResultDialog; \ No newline at end of file +export default EditResultDialog; diff --git a/src/result/new-result.js b/src/result/new-result.js index 73d5e85..2529d02 100644 --- a/src/result/new-result.js +++ b/src/result/new-result.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; @@ -45,7 +45,7 @@ class NewResultDialog extends React.Component { } resetState() { - this.setState({ + this.setState({ ConfigSnapshots: '', Description: '', ResultFileIDs: [], @@ -54,14 +54,21 @@ class NewResultDialog extends React.Component { render() { return ( - this.onClose(c)} onReset={() => this.resetState()} valid={true}> -
    - - Description - this.handleChange(e)} /> - - -
    + this.onClose(c)} + onReset={() => this.resetState()} + valid={true} + > +
    + + Description + this.handleChange(e)} /> + + +
    ); } diff --git a/src/result/result-configs-dialog.js b/src/result/result-configs-dialog.js index 8dfc220..b0fcea5 100644 --- a/src/result/result-configs-dialog.js +++ b/src/result/result-configs-dialog.js @@ -15,6 +15,7 @@ * along with VILLASweb. If not, see . ******************************************************************************/ import React from 'react'; +import { Form } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; import ReactJson from 'react-json-view'; @@ -46,16 +47,16 @@ class ResultConfigDialog extends React.Component { size="lg" blendOutCancel={true} > -
    - - +
    + +
    ); } diff --git a/src/scenario/edit-scenario.js b/src/scenario/edit-scenario.js index d3f90c6..19a2fb9 100644 --- a/src/scenario/edit-scenario.js +++ b/src/scenario/edit-scenario.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap'; +import { Form, Col } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; import ParametersEditor from '../common/parameters-editor'; @@ -76,20 +76,26 @@ class EditScenarioDialog extends React.Component { }; render() { - return -
    - - Name - - - - - - Start Parameters + return + + + Name + + + + + Start Parameters - -
    + +     ; } } diff --git a/src/scenario/import-scenario.js b/src/scenario/import-scenario.js index a6b9a23..f0eff99 100644 --- a/src/scenario/import-scenario.js +++ b/src/scenario/import-scenario.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap'; +import { Form, Col } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; import ParametersEditor from '../common/parameters-editor'; @@ -93,26 +93,32 @@ class ImportScenarioDialog extends React.Component { } render() { - return -
    - - Scenario File - - + return + + + Scenario File + + - - Name - this.handleChange(e)} /> - - + + Name + this.handleChange(e)} /> + + - - Start Parameters + + Start Parameters - - - + +
    ; } } diff --git a/src/scenario/new-scenario.js b/src/scenario/new-scenario.js index c582a3c..7535994 100644 --- a/src/scenario/new-scenario.js +++ b/src/scenario/new-scenario.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap'; +import { Form, Col} from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; import ParametersEditor from '../common/parameters-editor'; @@ -70,20 +70,26 @@ class NewScenarioDialog extends React.Component { } render() { - return -
    - - Name - - - + return + + + Name + + + - - Start Parameters + + Start Parameters - - + +
    ; } } diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 90d0586..8436317 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -17,7 +17,7 @@ import React from 'react'; import { Container } from 'flux/utils'; -import { Button, InputGroup, FormControl } from 'react-bootstrap'; +import { Button, InputGroup, Form } from 'react-bootstrap'; import FileSaver from 'file-saver'; diff --git a/src/signal/edit-signal-mapping.js b/src/signal/edit-signal-mapping.js index 3b75386..e9ece22 100644 --- a/src/signal/edit-signal-mapping.js +++ b/src/signal/edit-signal-mapping.js @@ -17,8 +17,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {Button, FormGroup, FormLabel, FormText, OverlayTrigger, Tooltip} from 'react-bootstrap'; -import {Collapse} from 'react-collapse'; +import { Button, Form, OverlayTrigger, Tooltip } from 'react-bootstrap'; import Table from '../common/table'; import TableColumn from '../common/table-column'; import Dialog from "../common/dialogs/dialog"; @@ -228,52 +227,107 @@ class EditSignalMapping extends React.Component { marginLeft: '10px', }; - return( + return this.onClose(c)} + onReset={() => this.resetState()} + valid={true} + > + + {this.props.direction} Mapping + Click Index, Name or Unit cell to edit + this.onSignalChecked(signal)} data={this.state.signals}> + this.onSignalChecked(index, event)} + checkboxKey='checked' + width='30' + /> + this.handleMappingChange(e, row, column)} + /> + this.handleMappingChange(e, row, column)} + /> + this.handleMappingChange(e, row, column)} + /> + this.handleMappingChange(e, row, column)} + /> + this.handleDelete(index)} + /> +
    - this.onClose(c)} - onReset={() => this.resetState()} - valid={true} - size='lg'> - - - {this.props.direction} Mapping - Click Index, Name or Unit cell to edit - this.onSignalChecked(signal)} data={this.state.signals}> - this.onSignalChecked(index, event)} checkboxKey='checked' width='30' /> - this.handleMappingChange(e, row, column)} /> - this.handleMappingChange(e, row, column)} /> - this.handleMappingChange(e, row, column)} /> - this.handleMappingChange(e, row, column)} /> - this.handleDelete(index)} /> -
    - -
    - Check/Uncheck All } > - - - - +
    + Check/Uncheck All } + > + + + + +
    +
    + +
    Choose a Component Configuration to add the signal to:
    +
    + {typeof this.props.configs !== "undefined" && this.props.configs.map(config => ( + + ))}
    -
    - -
    Choose a Component Configuration to add the signal to:
    -
    - {typeof this.props.configs !== "undefined" && this.props.configs.map(config => ( - - - - ))} -
    -     -
    - -
    - ); + +
    + + ; } } diff --git a/src/user/login-form.js b/src/user/login-form.js index fedfa26..ef38ee9 100644 --- a/src/user/login-form.js +++ b/src/user/login-form.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React, { Component } from 'react'; -import { Form, Button, FormGroup, FormControl, FormLabel, Col } from 'react-bootstrap'; +import { Form, Button, Col } from 'react-bootstrap'; import RecoverPassword from './recover-password' import AppDispatcher from '../common/app-dispatcher'; import _ from 'lodash'; @@ -69,19 +69,19 @@ class LoginForm extends Component { villaslogin() { return (
    - - Username + + Username - this.handleChange(e)} /> + this.handleChange(e)} /> - + - - Password + + Password - this.handleChange(e)} /> + this.handleChange(e)} /> - + {this.props.loginMessage &&
    @@ -91,17 +91,16 @@ class LoginForm extends Component {
    } - + - + this.closeRecoverPassword()} sessionToken={this.props.sessionToken} /> - ); } diff --git a/src/widget/edit-widget/edit-widget-aspect-control.js b/src/widget/edit-widget/edit-widget-aspect-control.js index 3186584..a41d360 100644 --- a/src/widget/edit-widget/edit-widget-aspect-control.js +++ b/src/widget/edit-widget/edit-widget-aspect-control.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormCheck } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetAspectControl extends React.Component { constructor(props) { @@ -41,15 +41,15 @@ class EditWidgetAspectControl extends React.Component { } return ( - - + this.props.handleChange(e)}> - - + onChange={e => this.props.handleChange(e)} + /> + ); } } diff --git a/src/widget/edit-widget/edit-widget-checkbox-control.js b/src/widget/edit-widget/edit-widget-checkbox-control.js index 8a4113f..6dd8ce0 100644 --- a/src/widget/edit-widget/edit-widget-checkbox-control.js +++ b/src/widget/edit-widget/edit-widget-checkbox-control.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormCheck } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetCheckboxControl extends React.Component { constructor(props) { @@ -45,16 +45,15 @@ class EditWidgetCheckboxControl extends React.Component { } render() { - return - + this.handleCheckboxChange(e)}> - - - ; + onChange={e => this.handleCheckboxChange(e)} + /> + ; } } diff --git a/src/widget/edit-widget/edit-widget-color-control.js b/src/widget/edit-widget/edit-widget-color-control.js index aba342e..ada958f 100644 --- a/src/widget/edit-widget/edit-widget-color-control.js +++ b/src/widget/edit-widget/edit-widget-color-control.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, OverlayTrigger, Tooltip , FormLabel, Button } from 'react-bootstrap'; +import { Form, OverlayTrigger, Tooltip, Button } from 'react-bootstrap'; import ColorPicker from './color-picker' import Icon from "../../common/icon"; @@ -77,7 +77,7 @@ class EditWidgetColorControl extends Component { let style = { backgroundColor: color, opacity: opacity, - width: '260px', + width: '260px', height: '40px' } @@ -86,23 +86,20 @@ class EditWidgetColorControl extends Component { tooltipText = "Change border color"; } - - return ( - - {this.props.label} -
    + return + {this.props.label} + +
    {tooltipText} } > -
    +
    - this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} disableOpacity={this.props.disableOpacity}/> -     - - ) + this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} disableOpacity={this.props.disableOpacity}/> + ; } } diff --git a/src/widget/edit-widget/edit-widget-color-zones-control.js b/src/widget/edit-widget/edit-widget-color-zones-control.js index 6ef3fcd..aa337b6 100644 --- a/src/widget/edit-widget/edit-widget-color-zones-control.js +++ b/src/widget/edit-widget/edit-widget-color-zones-control.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, Table, FormLabel, Button, Tooltip, OverlayTrigger } from 'react-bootstrap'; +import { Form, Table, Button, Tooltip, OverlayTrigger } from 'react-bootstrap'; import ColorPicker from './color-picker' import Icon from '../../common/icon'; @@ -198,11 +198,18 @@ class EditWidgetColorZonesControl extends React.Component { height: '40px', marginTop: '20px' } - - return - Color zones + + return + Color Zones - +
    { @@ -222,44 +229,43 @@ class EditWidgetColorZonesControl extends React.Component { ) } -
    - - Change color} > - - - - - - - - - -
    - Min: - this.handleMinChange(e)} /> - - Max: - this.handleMaxChange(e)} /> -
    - - - +
    + + Change color} > + + + + + + + + + +
    + Min: + this.handleMinChange(e)} /> + + Max: + this.handleMaxChange(e)} /> +
    + + +     - this.closeEditModal(data)} widget={this.state.widget} zoneIndex={this.state.selectedIndex} controlId={'strokeStyle'} /> - ; + ; } } diff --git a/src/widget/edit-widget/edit-widget-file-control.js b/src/widget/edit-widget/edit-widget-file-control.js index 7185f16..8c2aa44 100644 --- a/src/widget/edit-widget/edit-widget-file-control.js +++ b/src/widget/edit-widget/edit-widget-file-control.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, FormLabel} from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditFileWidgetControl extends React.Component { @@ -59,13 +59,13 @@ class EditFileWidgetControl extends React.Component { } return
    - - File - + File + this.handleFileChange(e)}>{fileOptions} - + onChange={(e) => this.handleFileChange(e)}>{fileOptions} +
    ; } } diff --git a/src/widget/edit-widget/edit-widget-html-content.js b/src/widget/edit-widget/edit-widget-html-content.js index 1df71d5..1bf2080 100644 --- a/src/widget/edit-widget/edit-widget-html-content.js +++ b/src/widget/edit-widget/edit-widget-html-content.js @@ -16,7 +16,7 @@ **********************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetHTMLContent extends React.Component { constructor(props) { @@ -60,20 +60,25 @@ class EditWidgetHTMLContent extends React.Component { handleKeyIgnore(event){ // This function prevents a keystroke from beeing handled by dialog.js - event.stopPropagation(); - } - + event.stopPropagation(); + } render() { return ( - - HTML Content - this.props.handleChange(e)} /> - - + + HTML Content + this.props.handleChange(e)} + /> + + ); } } - export default EditWidgetHTMLContent; diff --git a/src/widget/edit-widget/edit-widget-ic-control.js b/src/widget/edit-widget/edit-widget-ic-control.js index 7e90f81..acf2626 100644 --- a/src/widget/edit-widget/edit-widget-ic-control.js +++ b/src/widget/edit-widget/edit-widget-ic-control.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {FormGroup, FormControl, FormLabel} from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetICControl extends React.Component { @@ -60,13 +60,13 @@ class EditWidgetICControl extends React.Component { } return
    - - IC - + IC + this.handleICChange(e)}>{icOptions} - + onChange={(e) => this.handleICChange(e)}>{icOptions} +
    ; } } diff --git a/src/widget/edit-widget/edit-widget-min-max-control.js b/src/widget/edit-widget/edit-widget-min-max-control.js index f25f23a..88e7442 100644 --- a/src/widget/edit-widget/edit-widget-min-max-control.js +++ b/src/widget/edit-widget/edit-widget-min-max-control.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel, FormCheck, Table } from 'react-bootstrap'; +import { Form, Table } from 'react-bootstrap'; class EditWidgetMinMaxControl extends React.Component { constructor(props) { @@ -75,20 +75,20 @@ class EditWidgetMinMaxControl extends React.Component { render() { - return - {this.props.label} - + {this.props.label} + this.handleCheckboxChange(e)}> - +
    Min: - Max: -
    -     ; + ; } } diff --git a/src/widget/edit-widget/edit-widget-number-control.js b/src/widget/edit-widget/edit-widget-number-control.js index 3b3101f..18e2d90 100644 --- a/src/widget/edit-widget/edit-widget-number-control.js +++ b/src/widget/edit-widget/edit-widget-number-control.js @@ -16,7 +16,7 @@ **********************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetNumberControl extends Component { constructor(props) { @@ -48,14 +48,14 @@ class EditWidgetNumberControl extends Component { } return ( - - {this.props.label} - + {this.props.label} + this.props.handleChange(e)} /> - + ); } } diff --git a/src/widget/edit-widget/edit-widget-orientation.js b/src/widget/edit-widget/edit-widget-orientation.js index 5ac835f..7ff5252 100644 --- a/src/widget/edit-widget/edit-widget-orientation.js +++ b/src/widget/edit-widget/edit-widget-orientation.js @@ -16,7 +16,7 @@ **********************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, Col, Row, FormCheck, FormLabel } from 'react-bootstrap'; +import { Col, Row, Form } from 'react-bootstrap'; import WidgetSlider from '../widgets/slider'; @@ -50,12 +50,11 @@ class EditWidgetOrientation extends Component { } render() { - // The tag shouldn't be necessary, but it gives height to the row while combining horizontal and vertical forms return ( - + - + Orientation @@ -64,14 +63,20 @@ class EditWidgetOrientation extends Component { let value = WidgetSlider.OrientationTypes[type].value; let name = WidgetSlider.OrientationTypes[type].name; - return ( - this.handleOrientationChange(value)}> - ) + return this.handleOrientationChange(value)} + /> }) } - + ); } } diff --git a/src/widget/edit-widget/edit-widget-parameters-control.js b/src/widget/edit-widget/edit-widget-parameters-control.js index 4117fd6..d589c2e 100644 --- a/src/widget/edit-widget/edit-widget-parameters-control.js +++ b/src/widget/edit-widget/edit-widget-parameters-control.js @@ -16,7 +16,7 @@ **********************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; import ParametersEditor from '../../common/parameters-editor'; class EditWidgetParametersControl extends Component { @@ -45,10 +45,13 @@ class EditWidgetParametersControl extends Component { render() { return ( - - {this.props.label} - this.handleChange(v)} /> - + + {this.props.label} + this.handleChange(v)} + /> + ); } } diff --git a/src/widget/edit-widget/edit-widget-plot-colors-control.js b/src/widget/edit-widget/edit-widget-plot-colors-control.js index a612277..f82d2ad 100644 --- a/src/widget/edit-widget/edit-widget-plot-colors-control.js +++ b/src/widget/edit-widget/edit-widget-plot-colors-control.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, OverlayTrigger, Tooltip , FormLabel, Button } from 'react-bootstrap'; +import { OverlayTrigger, Tooltip , Button } from 'react-bootstrap'; import ColorPicker from './color-picker' import Icon from "../../common/icon"; import {scaleOrdinal} from "d3-scale"; @@ -80,33 +80,40 @@ class EditWidgetPlotColorsControl extends Component { render() { return ( - - Line Colors + + Line Colors +
    + { + this.state.widget.signalIDs.map((signalID, idx) => { + let color = this.state.widget.customProperties.lineColors[signalID]; + let width = 260 / this.state.widget.signalIDs.length; + let style = { + backgroundColor: color, + width: width, + height: '40px' + } -
    - { - this.state.widget.signalIDs.map((signalID, idx) => { - let color = this.state.widget.customProperties.lineColors[signalID]; - let width = 260 / this.state.widget.signalIDs.length; - let style = { - backgroundColor: color, - width: width, - height: '40px' - } + let signal = this.props.signals.find(signal => signal.id === signalID); - let signal = this.props.signals.find(signal => signal.id === signalID); - - return ({signal.name}}> - - - ) - }) - } + return {signal.name}} + > + + ; + }) + }
    this.closeEditModal(data)} widget={this.state.widget} lineIndex={this.state.selectedIndex} controlId={'lineColor'} disableOpacity={true}/> - + ) } diff --git a/src/widget/edit-widget/edit-widget-signal-control.js b/src/widget/edit-widget/edit-widget-signal-control.js index cc9135d..d9667e3 100644 --- a/src/widget/edit-widget/edit-widget-signal-control.js +++ b/src/widget/edit-widget/edit-widget-signal-control.js @@ -16,7 +16,7 @@ **********************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetSignalControl extends Component { constructor(props) { @@ -48,9 +48,9 @@ class EditWidgetSignalControl extends Component { render() { return ( - - Select signal - this.handleSignalChange(e)}> + + Select signal + this.handleSignalChange(e)}> { this.state.signals.length === 0 ? ( @@ -61,8 +61,8 @@ class EditWidgetSignalControl extends Component { )) ) } - - + + ); } } diff --git a/src/widget/edit-widget/edit-widget-signals-control.js b/src/widget/edit-widget/edit-widget-signals-control.js index ad4658b..007b1fe 100644 --- a/src/widget/edit-widget/edit-widget-signals-control.js +++ b/src/widget/edit-widget/edit-widget-signals-control.js @@ -16,7 +16,7 @@ **********************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, FormCheck, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetSignalsControl extends Component { constructor(props) { @@ -55,25 +55,25 @@ class EditWidgetSignalsControl extends Component { render() { return ( - - Signals + + Signals { this.state.signals === 0 || !this.state.widget.hasOwnProperty(this.props.controlId)? ( - No signals available + No signals available ) : ( this.state.signals.map((signal, index) => ( - id === signal.id) !== undefined} onChange={(e) => this.handleSignalChange(e.target.checked, signal.id)}> - + )) ) } - + ); } } diff --git a/src/widget/edit-widget/edit-widget-text-control.js b/src/widget/edit-widget/edit-widget-text-control.js index 22aac97..5392ca1 100644 --- a/src/widget/edit-widget/edit-widget-text-control.js +++ b/src/widget/edit-widget/edit-widget-text-control.js @@ -16,7 +16,7 @@ **********************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetTextControl extends Component { constructor(props) { @@ -60,11 +60,11 @@ class EditWidgetTextControl extends Component { render() { return ( - - {this.props.label} - this.props.handleChange(e)} /> - - + + {this.props.label} + this.props.handleChange(e)} /> + + ); } } diff --git a/src/widget/edit-widget/edit-widget-text-size-control.js b/src/widget/edit-widget/edit-widget-text-size-control.js index 10e7922..ce3b131 100644 --- a/src/widget/edit-widget/edit-widget-text-size-control.js +++ b/src/widget/edit-widget/edit-widget-text-size-control.js @@ -16,21 +16,21 @@ **********************************************************************************/ import React from 'react'; -import { FormGroup, FormControl, FormLabel } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetTextSizeControl extends React.Component { render() { const sizes = [11, 12, 14, 16, 18, 20, 22, 24, 28, 32, 36, 40, 46, 52, 60, 72]; return ( - - Text size - this.props.handleChange(e)}> + + Text size + this.props.handleChange(e)}> {sizes.map((size, index) => ( ))} - - + + ); } } diff --git a/src/widget/edit-widget/edit-widget-time-control.js b/src/widget/edit-widget/edit-widget-time-control.js index 23fb368..ea4eeff 100644 --- a/src/widget/edit-widget/edit-widget-time-control.js +++ b/src/widget/edit-widget/edit-widget-time-control.js @@ -16,7 +16,7 @@ **********************************************************************************/ import React, { Component } from 'react'; -import { FormGroup, FormControl, FormLabel, FormText } from 'react-bootstrap'; +import { Form } from 'react-bootstrap'; class EditWidgetTimeControl extends Component { constructor(props) { @@ -43,9 +43,9 @@ class EditWidgetTimeControl extends Component { } return ( - - Time - + Time + this.props.handleChange(e)} /> - Time in seconds - + Time in seconds + ); } } diff --git a/src/widget/edit-widget/edit-widget.js b/src/widget/edit-widget/edit-widget.js index 5d0d601..081cb08 100644 --- a/src/widget/edit-widget/edit-widget.js +++ b/src/widget/edit-widget/edit-widget.js @@ -16,6 +16,7 @@ ******************************************************************************/ import React from 'react'; +import { Form } from 'react-bootstrap'; import Dialog from '../../common/dialogs/dialog'; import CreateControls from './edit-widget-control-creator'; @@ -174,10 +175,17 @@ class EditWidgetDialog extends React.Component { } return ( - this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> -
    + this.onClose(c)} + onReset={() => this.resetState()} + valid={this.valid} + > + { controls || '' } - +
    ); } diff --git a/src/widget/widgets/input.js b/src/widget/widgets/input.js index 142f4e2..21c0421 100644 --- a/src/widget/widgets/input.js +++ b/src/widget/widgets/input.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React, { Component } from 'react'; -import { Form, FormGroup, Col, FormLabel, FormControl, InputGroup } from 'react-bootstrap'; +import { Form, Col, InputGroup } from 'react-bootstrap'; class WidgetInput extends Component { @@ -87,13 +87,13 @@ class WidgetInput extends Component { return (
    - - + + {this.props.widget.name} - - +
    ); From 58de859f0a53d89e8f2570b90019dd74fa4b3a4e Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 23:55:43 +0100 Subject: [PATCH 37/39] various code cleanups --- src/common/dialogs/delete-dialog.js | 1 + src/common/icon.js | 1 - src/componentconfig/edit-config.js | 1 + src/dashboard/dashboard.js | 2 - src/ic/edit-ic.js | 1 - src/ic/ic-dialog.js | 2 +- src/scenario/edit-scenario.js | 2 - src/scenario/scenario.js | 100 ++++++++++-------- src/signal/edit-signal-mapping.js | 77 ++++++-------- src/user/new-user.js | 9 +- src/user/recover-password.js | 19 ++-- src/widget/edit-widget/color-picker.js | 62 ++++++----- .../edit-widget-color-zones-control.js | 51 +++++---- .../edit-widget-plot-colors-control.js | 4 +- src/widget/edit-widget/edit-widget.js | 26 ++--- src/widget/widget-plot/plot-legend.js | 4 +- src/widget/widget-plot/plot.js | 7 +- src/widget/widget-toolbox.js | 7 +- src/widget/widgets/gauge.js | 49 ++++----- src/widget/widgets/time-offset.js | 21 ++-- src/widget/widgets/topology.js | 12 +-- 21 files changed, 220 insertions(+), 238 deletions(-) diff --git a/src/common/dialogs/delete-dialog.js b/src/common/dialogs/delete-dialog.js index 8bc39a1..32e583a 100644 --- a/src/common/dialogs/delete-dialog.js +++ b/src/common/dialogs/delete-dialog.js @@ -17,6 +17,7 @@ import React from 'react'; import { Button, Modal, Form } from 'react-bootstrap'; +import { Collapse } from 'react-collapse'; class DeleteDialog extends React.Component { onModalKeyPress = (event) => { diff --git a/src/common/icon.js b/src/common/icon.js index 25155b4..f062c44 100644 --- a/src/common/icon.js +++ b/src/common/icon.js @@ -21,7 +21,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { library } from '@fortawesome/fontawesome-svg-core'; import { fas } from '@fortawesome/free-solid-svg-icons'; -//import '@fortawesome/free-regular-svg-icons'; library.add(fas); diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js index 37a2a3e..2ee19ec 100644 --- a/src/componentconfig/edit-config.js +++ b/src/componentconfig/edit-config.js @@ -17,6 +17,7 @@ import React from 'react'; import { Form } from 'react-bootstrap'; +import { Multiselect } from 'multiselect-react-dropdown' import Dialog from '../common/dialogs/dialog'; import ParametersEditor from '../common/parameters-editor'; diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js index b8a627b..c6d3922 100644 --- a/src/dashboard/dashboard.js +++ b/src/dashboard/dashboard.js @@ -587,8 +587,6 @@ class Dashboard extends Component { configs={this.state.configs} sessionToken={this.state.sessionToken} /> - -
    ; } diff --git a/src/ic/edit-ic.js b/src/ic/edit-ic.js index 0782b5b..be77e27 100644 --- a/src/ic/edit-ic.js +++ b/src/ic/edit-ic.js @@ -18,7 +18,6 @@ import React from 'react'; import { Form } from 'react-bootstrap'; import _ from 'lodash'; -import {Collapse} from 'react-collapse'; import Dialog from '../common/dialogs/dialog'; import ParametersEditor from '../common/parameters-editor'; diff --git a/src/ic/ic-dialog.js b/src/ic/ic-dialog.js index 8689334..197eb45 100644 --- a/src/ic/ic-dialog.js +++ b/src/ic/ic-dialog.js @@ -1,5 +1,5 @@ import React from 'react'; -import {Button, Row, Col} from 'react-bootstrap'; +import { Button, Row, Col } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; import Icon from "../common/icon"; import ConfirmCommand from './confirm-command'; diff --git a/src/scenario/edit-scenario.js b/src/scenario/edit-scenario.js index 19a2fb9..22fe3a9 100644 --- a/src/scenario/edit-scenario.js +++ b/src/scenario/edit-scenario.js @@ -53,13 +53,11 @@ class EditScenarioDialog extends React.Component { this.setState({ [event.target.id]: event.target.value }); let name = true; - if (this.state.name === '') { name = false; } this.valid = name; - }; resetState = () => { diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 8436317..cf86fee 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -790,12 +790,6 @@ class Scenario extends React.Component { title='Name' dataKey='name' /> - this.getListOfFiles(this.state.files, fileIDs)} - onEdit={(index) => this.startPintura(index)} - /> - this.closeNewDashboardModal(data)} /> - this.closeEditDashboardModal(data)} /> - this.closeImportDashboardModal(data)} /> - - this.closeDeleteDashboardModal(e)} /> + this.closeNewDashboardModal(data)} + /> + this.closeEditDashboardModal(data)} + /> + this.closeImportDashboardModal(data)} + /> + this.closeDeleteDashboardModal(e)} + /> {/*Result table*/}

    Results @@ -972,7 +980,6 @@ class Scenario extends React.Component { dataKey='resultFileIDs' linkKey='filebuttons' data={this.state.files} - width='300' onDownload={(index) => this.downloadResultData(index)} /> : <> } - - - this.setState({ - deleteUserModal: true, - deleteUserName: this.state.scenario.users[index].username, - modalUserIndex: index - })} - /> - + + + this.setState({ + deleteUserModal: true, + deleteUserName: this.state.scenario.users[index].username, + modalUserIndex: index + })} + /> + - - this.onUserInputChange(e)} - value={this.state.userToAdd} - type="text" - /> - + + this.onUserInputChange(e)} + value={this.state.userToAdd} + type="text" + /> + - - -

    -

    + + + +
    - this.closeDeleteUserModal(c)} /> + this.closeDeleteUserModal(c)} + /> ; } } diff --git a/src/signal/edit-signal-mapping.js b/src/signal/edit-signal-mapping.js index e9ece22..9c5cb6e 100644 --- a/src/signal/edit-signal-mapping.js +++ b/src/signal/edit-signal-mapping.js @@ -18,6 +18,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Button, Form, OverlayTrigger, Tooltip } from 'react-bootstrap'; +import { Collapse } from 'react-collapse'; import Table from '../common/table'; import TableColumn from '../common/table-column'; import Dialog from "../common/dialogs/dialog"; @@ -30,13 +31,12 @@ class EditSignalMapping extends React.Component { super(props); let dir = ""; - if ( this.props.direction === "Output"){ + if ( this.props.direction === "Output") { dir = "out"; - } else if ( this.props.direction === "Input" ){ + } else if ( this.props.direction === "Input" ) { dir = "in"; } - this.state = { dir, signals: [], @@ -45,38 +45,37 @@ class EditSignalMapping extends React.Component { }; } - static getDerivedStateFromProps(props, state){ + static getDerivedStateFromProps(props, state) { // filter all signals by configID and direction let signals = []; - if(props.signalID != null || typeof props.configs === "undefined"){ + if (props.signalID != null || typeof props.configs === "undefined") { signals = props.signals.filter((sig) => { return (sig.configID === props.configID) && (sig.direction === state.dir); }); } - else{ - for(let i = 0; i < props.configs.length; i++){ + else { + for (let i = 0; i < props.configs.length; i++) { let temp = props.signals.filter((sig) => { return (sig.configID === props.configs[i].id) && (sig.direction === state.dir); }) - signals = signals.concat(temp); + signals = signals.concat(temp); + } } - } - - signals.forEach(signal => { - if(signal.checked === undefined) signal.checked = false - }); + signals.forEach(signal => { + if (signal.checked === undefined) { + signal.checked = false; + } + }); return { signals: signals, }; } - onClose(canceled) { - - for (let signalID of this.state.modifiedSignalIDs){ + for (let signalID of this.state.modifiedSignalIDs) { let sig = this.state.signals.find(s => s.id === signalID); @@ -99,23 +98,23 @@ class EditSignalMapping extends React.Component { console.log("HandleMappingChange", row, column) if (column === 2) { // Name change signals[row].name = event.target.value; - if (modifiedSignals.find(id => id === signals[row].id) === undefined){ + if (modifiedSignals.find(id => id === signals[row].id) === undefined) { modifiedSignals.push(signals[row].id); } } else if (column === 3) { // unit change signals[row].unit = event.target.value; - if (modifiedSignals.find(id => id === signals[row].id) === undefined){ + if (modifiedSignals.find(id => id === signals[row].id) === undefined) { modifiedSignals.push(signals[row].id); } } else if (column === 4) { // scaling factor change signals[row].scalingFactor = parseFloat(event.target.value); - if (modifiedSignals.find(id => id === signals[row].id) === undefined){ + if (modifiedSignals.find(id => id === signals[row].id) === undefined) { modifiedSignals.push(signals[row].id); } } else if (column === 1) { //index change console.log("Index change") signals[row].index =parseInt(event.target.value, 10); - if (modifiedSignals.find(id => id === signals[row].id) === undefined){ + if (modifiedSignals.find(id => id === signals[row].id) === undefined) { modifiedSignals.push(signals[row].id); } } @@ -124,11 +123,9 @@ class EditSignalMapping extends React.Component { signals: signals, modifiedSignalIDs: modifiedSignals }) - }; handleDelete = (index) => { - let data = this.state.signals[index] AppDispatcher.dispatch({ @@ -136,11 +133,9 @@ class EditSignalMapping extends React.Component { data: data, token: this.props.sessionToken }); - }; handleRemove = () => { - let checkedSignals = this.state.signals.filter(signal => signal.checked === true); checkedSignals.forEach(signal => { @@ -149,23 +144,20 @@ class EditSignalMapping extends React.Component { data: signal, token: this.props.sessionToken }); - }) - } handleAdd = (configID = null) => { - - if(typeof this.props.configs !== "undefined"){ - - if(configID === null){ + if (typeof this.props.configs !== "undefined") { + if (configID === null) { this.setState({openCollapse: true}); - return - } - } - else{ - configID = this.props.configID; + return; } + } + else { + configID = this.props.configID; + } + let newSignal = { configID: configID, direction: this.state.dir, @@ -185,7 +177,6 @@ class EditSignalMapping extends React.Component { }; resetState() { - let signals = this.props.signals.filter((sig) => { return (sig.configID === this.props.configID) && (sig.direction === this.state.dir); }); @@ -200,29 +191,27 @@ class EditSignalMapping extends React.Component { tempSignals[index].checked = !tempSignals[index].checked; this.setState({signals: tempSignals}); - } - checkAll(){ + checkAll() { let tempSignals = this.state.signals; let allChecked = true; - tempSignals.forEach(signal => - { - if(signal.checked === false){ + tempSignals.forEach(signal => { + if (signal.checked === false) { signal.checked = true; allChecked = false; } - }); + }); - if(allChecked){ + if (allChecked) { tempSignals.forEach(signal => signal.checked = false); } + this.setState({signals: tempSignals}); } render() { - const buttonStyle = { marginLeft: '10px', }; diff --git a/src/user/new-user.js b/src/user/new-user.js index c10dc85..7d6baa9 100644 --- a/src/user/new-user.js +++ b/src/user/new-user.js @@ -67,7 +67,14 @@ class NewUserDialog extends React.Component { render() { return ( - this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> + this.onClose(c)} + onReset={() => this.resetState()} + valid={this.valid} + >
    Username diff --git a/src/user/recover-password.js b/src/user/recover-password.js index 2602d9c..4105f4f 100644 --- a/src/user/recover-password.js +++ b/src/user/recover-password.js @@ -35,13 +35,20 @@ class RecoverPassword extends React.Component { render() { return ( - this.onClose(c)} blendOutCancel = {true} valid={true} size = 'lg'> + this.onClose(c)} + blendOutCancel={true} + valid={true} + >
    -
    Please contact:
    -
    {this.state.admin.name}
    -
    E-Mail:
    - {this.state.admin.mail} -
    +
    Please contact:
    +
    {this.state.admin.name}
    +
    E-Mail:
    + {this.state.admin.mail} +     ); } diff --git a/src/widget/edit-widget/color-picker.js b/src/widget/edit-widget/color-picker.js index a8e6615..8c148c0 100644 --- a/src/widget/edit-widget/color-picker.js +++ b/src/widget/edit-widget/color-picker.js @@ -16,6 +16,7 @@ ******************************************************************************/ import React from 'react'; +import { Form } from 'react-bootstrap'; import { SketchPicker } from 'react-color'; import Dialog from '../../common/dialogs/dialog'; @@ -31,8 +32,7 @@ class ColorPicker extends React.Component { }; } - static getDerivedStateFromProps(props, state){ - + static getDerivedStateFromProps(props, state) { return { widget: props.widget }; @@ -49,25 +49,24 @@ class ColorPicker extends React.Component { } handleChangeComplete = (color) => { - let temp = this.state.widget; - if(this.props.controlId === 'strokeStyle'){ + if (this.props.controlId === 'strokeStyle'){ temp.customProperties.zones[this.props.zoneIndex]['strokeStyle'] = color.hex; } - else if(this.props.controlId === 'lineColor'){ + else if (this.props.controlId === 'lineColor'){ temp.customProperties.lineColors[this.props.lineIndex] = color.hex; } - else{ - let parts = this.props.controlId.split('.'); - let isCustomProperty = true; + else { + let parts = this.props.controlId.split('.'); + let isCustomProperty = true; - if (parts.length === 1){ - isCustomProperty = false; - } + if (parts.length === 1){ + isCustomProperty = false; + } - isCustomProperty ? temp[parts[0]][parts[1]] = color.hex : temp[this.props.controlId] = color.hex; - isCustomProperty ? temp[parts[0]][parts[1] + "_opacity"] = color.rgb.a : temp[this.props.controlId +"_opacity"] = color.rgb.a; + isCustomProperty ? temp[parts[0]][parts[1]] = color.hex : temp[this.props.controlId] = color.hex; + isCustomProperty ? temp[parts[0]][parts[1] + "_opacity"] = color.rgb.a : temp[this.props.controlId +"_opacity"] = color.rgb.a; } this.setState({ widget: temp }); @@ -88,46 +87,45 @@ class ColorPicker extends React.Component { }; render() { - let hexColor; let opacity = 1; let parts = this.props.controlId.split('.'); let isCustomProperty = true; - if (parts.length === 1){ + if (parts.length === 1) { isCustomProperty = false; } - if(this.props.controlId === 'strokeStyle'){ - if(typeof this.state.widget.customProperties.zones[this.props.zoneIndex] !== 'undefined'){ + if (this.props.controlId === 'strokeStyle') { + if (typeof this.state.widget.customProperties.zones[this.props.zoneIndex] !== 'undefined') { hexColor = this.state.widget.customProperties.zones[this.props.zoneIndex]['strokeStyle']; } } - else if(this.props.controlId === 'lineColor'){ - if(typeof this.state.widget.customProperties.lineColors[this.props.lineIndex] !== 'undefined'){ + else if (this.props.controlId === 'lineColor') { + if (typeof this.state.widget.customProperties.lineColors[this.props.lineIndex] !== 'undefined') { hexColor = this.state.widget.customProperties.lineColors[this.props.lineIndex]; } } else{ - hexColor = isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId]; - opacity = isCustomProperty ? this.state.widget[parts[0]][parts[1] + "_opacity"]: this.state.widget[this.props.controlId + "_opacity"]; - + hexColor = isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId]; + opacity = isCustomProperty ? this.state.widget[parts[0]][parts[1] + "_opacity"]: this.state.widget[this.props.controlId + "_opacity"]; } - let rgbColor = this.hexToRgb(hexColor, opacity); - - - - return this.onClose(c)} valid={true}> - + return this.onClose(c)} + valid={true} + > + - - + ; } } diff --git a/src/widget/edit-widget/edit-widget-color-zones-control.js b/src/widget/edit-widget/edit-widget-color-zones-control.js index aa337b6..dd990bb 100644 --- a/src/widget/edit-widget/edit-widget-color-zones-control.js +++ b/src/widget/edit-widget/edit-widget-color-zones-control.js @@ -20,7 +20,7 @@ import { Form, Table, Button, Tooltip, OverlayTrigger } from 'react-bootstrap'; import ColorPicker from './color-picker' import Icon from '../../common/icon'; -import {Collapse} from 'react-collapse'; +import { Collapse } from 'react-collapse'; class EditWidgetColorZonesControl extends React.Component { constructor(props) { @@ -51,8 +51,8 @@ class EditWidgetColorZonesControl extends React.Component { // add row const widget = this.state.widget; widget.customProperties.zones.push({ strokeStyle: '#d3cbcb', min: 0, max: 100 }); - - if(widget.customProperties.zones.length > 0){ + + if(widget.customProperties.zones.length > 0){ let length = widget.customProperties.zones.length for(let i= 0 ; i < length; i++){ @@ -67,14 +67,14 @@ class EditWidgetColorZonesControl extends React.Component { } removeZones = () => { - + let temp = this.state.widget; temp.customProperties.zones.splice(this.state.selectedIndex, 1); - if(temp.customProperties.zones.length > 0){ + if(temp.customProperties.zones.length > 0){ let length = temp.customProperties.zones.length - + for(let i= 0 ; i < length; i++){ temp.customProperties.zones[i].min = i* 100/length; temp.customProperties.zones[i].max = (i+1)* 100/length; @@ -111,8 +111,8 @@ class EditWidgetColorZonesControl extends React.Component { } } - openColorPicker = () =>{ - + openColorPicker = () => { + let color = this.state.selectedZone.strokeStyle; this.setState({showColorPicker: true, originalColor: color}); @@ -124,7 +124,7 @@ class EditWidgetColorZonesControl extends React.Component { let temp = this.state.selectedZone; temp.strokeStyle = this.state.originalColor; - + this.setState({ selectedZone : temp }); } } @@ -155,7 +155,7 @@ class EditWidgetColorZonesControl extends React.Component { if(this.state.selectedIndex !== this.state.widget.customProperties.zones.length -1){ temp.customProperties.zones[this.state.selectedIndex + 1]['min'] = e.target.value } - + this.setState({ widget: temp }); } @@ -171,17 +171,17 @@ class EditWidgetColorZonesControl extends React.Component { this.props.handleChange(event); } - + render() { const buttonStyle = { - marginBottom: '10px', + marginBottom: '10px', marginLeft: '120px', }; const iconStyle = { - height: '25px', + height: '25px', width : '25px' } @@ -194,7 +194,7 @@ class EditWidgetColorZonesControl extends React.Component { let pickerStyle = { backgroundColor: tempColor, - width: '260px', + width: '260px', height: '40px', marginTop: '20px' } @@ -213,21 +213,18 @@ class EditWidgetColorZonesControl extends React.Component {
    { - this.state.widget.customProperties.zones.map((zone, idx) => { - let color = zone.strokeStyle; - let width = (zone.max - zone.min)*(260/100); - let style = { - backgroundColor: color, - width: width, - height: '40px' - } - - return ( - ) + this.state.widget.customProperties.zones.map((zone, idx) => { + let color = zone.strokeStyle; + let width = (zone.max - zone.min)*(260/100); + let style = { + backgroundColor: color, + width: width, + height: '40px' } + return ( ) - + }) }
    diff --git a/src/widget/edit-widget/edit-widget-plot-colors-control.js b/src/widget/edit-widget/edit-widget-plot-colors-control.js index f82d2ad..271cec2 100644 --- a/src/widget/edit-widget/edit-widget-plot-colors-control.js +++ b/src/widget/edit-widget/edit-widget-plot-colors-control.js @@ -19,8 +19,8 @@ import React, { Component } from 'react'; import { OverlayTrigger, Tooltip , Button } from 'react-bootstrap'; import ColorPicker from './color-picker' import Icon from "../../common/icon"; -import {scaleOrdinal} from "d3-scale"; -import {schemeCategory10} from "d3-scale-chromatic"; +import { scaleOrdinal } from "d3-scale"; +import { schemeCategory10 } from "d3-scale-chromatic"; // schemeCategory20 no longer available in d3 diff --git a/src/widget/edit-widget/edit-widget.js b/src/widget/edit-widget/edit-widget.js index 081cb08..e7792a8 100644 --- a/src/widget/edit-widget/edit-widget.js +++ b/src/widget/edit-widget/edit-widget.js @@ -23,7 +23,6 @@ import CreateControls from './edit-widget-control-creator'; class EditWidgetDialog extends React.Component { valid = true; - constructor(props) { super(props); @@ -38,7 +37,6 @@ class EditWidgetDialog extends React.Component { }; } - onClose(canceled) { if (canceled === false) { this.props.onClose(this.state.temporal); @@ -53,9 +51,9 @@ class EditWidgetDialog extends React.Component { const file = this.props.files.find(element => element.id === fileId); // scale width to match aspect - if(file.imageWidth && file.imageHeight){ - const aspectRatio = file.imageWidth / file.imageHeight; - changeObject.width = parseInt(this.state.temporal.height * aspectRatio,10); + if (file.imageWidth && file.imageHeight) { + const aspectRatio = file.imageWidth / file.imageHeight; + changeObject.width = parseInt(this.state.temporal.height * aspectRatio,10); } return changeObject; @@ -70,26 +68,21 @@ class EditWidgetDialog extends React.Component { return metrics.width; } - setMaxWidth(changeObject){ - if(changeObject.type === 'Label'){ + setMaxWidth(changeObject) { + if (changeObject.type === 'Label') { changeObject.customProperties.maxWidth = Math.ceil(this.getTextWidth(changeObject.name, changeObject.customProperties.textSize)); changeObject.width = changeObject.customProperties.maxWidth; } - /*else if (changeObject.type === 'Value'){ - changeObject.customProperties.maxWidth = Math.ceil(this.getTextWidth(changeObject.name, changeObject.customProperties.textSize)); - } - if(this.state.temporal.width > changeObject.customProperties.maxWidth){ - changeObject.width = changeObject.customProperties.maxWidth; - }*/ + return changeObject; } - setNewLockRestrictions(changeObject){ - if(changeObject.customProperties.orientation === 0){ + setNewLockRestrictions(changeObject) { + if (changeObject.customProperties.orientation === 0) { changeObject.customProperties.resizeTopBottomLock = true; changeObject.customProperties.resizeRightLeftLock = false; } - else if(changeObject.customProperties.orientation === 1){ + else if (changeObject.customProperties.orientation === 1) { changeObject.customProperties.resizeTopBottomLock = false; changeObject.customProperties.resizeRightLeftLock = true; } @@ -97,7 +90,6 @@ class EditWidgetDialog extends React.Component { } handleChange(e) { - // TODO: check what we really need in this function. Can we reduce its complexity? let parts = e.target.id.split('.'); let changeObject = this.state.temporal; diff --git a/src/widget/widget-plot/plot-legend.js b/src/widget/widget-plot/plot-legend.js index 4dd7459..00d1b77 100644 --- a/src/widget/widget-plot/plot-legend.js +++ b/src/widget/widget-plot/plot-legend.js @@ -17,7 +17,7 @@ import React from 'react'; import { scaleOrdinal} from 'd3-scale'; -import {schemeCategory10} from 'd3-scale-chromatic' +import { schemeCategory10 } from 'd3-scale-chromatic' function Legend(props){ @@ -44,7 +44,6 @@ function Legend(props){ ) } - } class PlotLegend extends React.Component { @@ -60,7 +59,6 @@ class PlotLegend extends React.Component { )) } - ; } diff --git a/src/widget/widget-plot/plot.js b/src/widget/widget-plot/plot.js index 6f314fe..17e61fc 100644 --- a/src/widget/widget-plot/plot.js +++ b/src/widget/widget-plot/plot.js @@ -17,7 +17,7 @@ import React from 'react'; import { scaleLinear, scaleTime, scaleOrdinal} from 'd3-scale'; -import {schemeCategory10} from 'd3-scale-chromatic' +import { schemeCategory10 } from 'd3-scale-chromatic' import { extent } from 'd3-array'; import { line } from 'd3-shape'; import { axisBottom, axisLeft } from 'd3-axis'; @@ -103,7 +103,6 @@ class Plot extends React.Component { const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(timeFormat("%M:%S")); const yAxis = axisLeft().scale(yScale).ticks(5).tickFormat(format(".3s")); - return{ stopTime: stopTime, data: null, @@ -113,7 +112,6 @@ class Plot extends React.Component { }; } - // only show data in requested time let data = props.data; let icDataset = data.find(function(element) { @@ -138,8 +136,6 @@ class Plot extends React.Component { if (prevProps.time !== this.props.time) { this.createInterval(); } - - } createInterval() { @@ -222,7 +218,6 @@ class Plot extends React.Component { } render() { - const yLabelPos = { x: 12, y: this.props.height / 2 diff --git a/src/widget/widget-toolbox.js b/src/widget/widget-toolbox.js index ee48d37..65e856e 100644 --- a/src/widget/widget-toolbox.js +++ b/src/widget/widget-toolbox.js @@ -16,12 +16,11 @@ ******************************************************************************/ import React from 'react'; +import { Collapse } from 'react-collapse'; import PropTypes from 'prop-types'; import Slider from 'rc-slider'; import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap'; import Icon from "../common/icon"; -import {Collapse} from 'react-collapse'; - import ToolboxItem from './toolbox-item'; class WidgetToolbox extends React.Component { @@ -101,8 +100,8 @@ class WidgetToolbox extends React.Component { } const buttonStyle = { - marginRight: '3px', - height: '40px', + marginRight: '3px', + height: '40px', } const thereIsTopologyWidget = this.props.widgets != null && Object.values(this.props.widgets).filter(w => w.type === 'Topology').length > 0; diff --git a/src/widget/widgets/gauge.js b/src/widget/widgets/gauge.js index b33494a..28dff4f 100644 --- a/src/widget/widgets/gauge.js +++ b/src/widget/widgets/gauge.js @@ -17,7 +17,6 @@ import React, { Component } from 'react'; import { Gauge } from 'gaugeJS'; -//import {update} from "immutable"; class WidgetGauge extends Component { constructor(props) { @@ -70,7 +69,6 @@ class WidgetGauge extends Component { this.gauge.set(this.state.value); this.updateLabels(this.state.minValue, this.state.maxValue) } - } static getDerivedStateFromProps(props, state){ @@ -79,12 +77,12 @@ class WidgetGauge extends Component { return{ value: 0, minValue: 0, maxValue: 10}; } - // get the signal with the selected signal ID + // Get the signal with the selected signal ID let signalID = props.widget.signalIDs[0]; let signal = props.signals.filter(s => s.id === signalID) if(signal.length > 0) { - // determine ID of infrastructure component related to signal[0] (there is only one signal for a lamp widget) + // Determine ID of infrastructure component related to signal[0] (there is only one signal for a lamp widget) let icID = props.icIDs[signal[0].id]; let returnState = {} @@ -100,9 +98,9 @@ class WidgetGauge extends Component { returnState["scalingFactor"] = signal[0].scalingFactor; } - // update value + // Update value - // check if data available + // Check if data available if (props.data == null || props.data[icID] == null || props.data[icID].output == null @@ -114,12 +112,12 @@ class WidgetGauge extends Component { return returnState; } - // memorize if min or max value is updated + // Memorize if min or max value is updated let updateValue = false; let updateMinValue = false; let updateMaxValue = false; - // check if value has changed + // Check if value has changed const data = props.data[icID].output.values[signal[0].index - 1]; // Take just 3 decimal positions // Note: Favor this method over Number.toFixed(n) in order to avoid a type conversion, since it returns a String @@ -129,10 +127,10 @@ class WidgetGauge extends Component { let maxValue = null; if ((state.value !== value && value != null) || props.widget.customProperties.valueUseMinMax || state.useMinMaxChange) { - //value has changed + // Value has changed updateValue = true; - // update min-max if needed + // Update min-max if needed let updateLabels = false; minValue = state.minValue; @@ -157,7 +155,6 @@ class WidgetGauge extends Component { maxValue = props.widget.customProperties.valueMax; updateMaxValue = true; updateLabels = true; - } if (updateLabels === false && state.gauge) { @@ -178,7 +175,7 @@ class WidgetGauge extends Component { returnState["useMinMax"] = props.widget.customProperties.valueUseMinMax; } - // prepare returned state + // Prepare returned state if (updateValue === true) { returnState["value"] = value; } @@ -190,7 +187,7 @@ class WidgetGauge extends Component { } - } // if there is signal data + } // If there is signal data if (JSON.stringify(returnState) !== JSON.stringify({})) { return returnState; @@ -198,8 +195,8 @@ class WidgetGauge extends Component { return null; } } - return null; + return null; } updateLabels(minValue, maxValue, force) { @@ -223,17 +220,17 @@ class WidgetGauge extends Component { }); } - if(this.state.signalID !== ''){ - this.gauge.setOptions({ - staticLabels: { - font: '10px "Helvetica Neue"', - labels, - color: "#000000", - fractionDigits: 1 - }, - staticZones: zones - }); - } + if (this.state.signalID !== '') { + this.gauge.setOptions({ + staticLabels: { + font: '10px "Helvetica Neue"', + labels, + color: "#000000", + fractionDigits: 1 + }, + staticZones: zones + }); + } } computeGaugeOptions(widget) { @@ -267,8 +264,6 @@ class WidgetGauge extends Component { this.gaugeCanvas = node} />
    {this.state.unit + scaleText}
    {this.state.value}
    - - ); } diff --git a/src/widget/widgets/time-offset.js b/src/widget/widgets/time-offset.js index ee429e8..9e931b2 100644 --- a/src/widget/widgets/time-offset.js +++ b/src/widget/widgets/time-offset.js @@ -17,8 +17,7 @@ import React, { Component } from 'react'; import TrafficLight from 'react-trafficlight'; -import {OverlayTrigger, Tooltip } from 'react-bootstrap'; - +import { OverlayTrigger, Tooltip } from 'react-bootstrap'; class WidgetTimeOffset extends Component { constructor(props) { @@ -51,7 +50,7 @@ class WidgetTimeOffset extends Component { let serverTime = props.data[state.icID].output.timestamp; let localTime = Date.now(); let absoluteOffset = Math.abs(serverTime - localTime); - + if(typeof websocket === 'undefined'){ return {timeOffset: Number.parseFloat(absoluteOffset/1000).toPrecision(5)} } @@ -68,25 +67,25 @@ class WidgetTimeOffset extends Component { } return (
    - {this.props.widget.customProperties.icID !== -1 ? + {this.props.widget.customProperties.icID !== -1 ? () : (no IC) } - {this.props.widget.customProperties.icID !== -1 && this.props.widget.customProperties.showName ? + {this.props.widget.customProperties.icID !== -1 && this.props.widget.customProperties.showName ? ({this.state.icName}) : () - } + } - {this.props.widget.customProperties.icID !== -1 ? - ({this.state.icName}

    Offset: {this.state.timeOffset + "s"}    ) - : + {this.props.widget.customProperties.icID !== -1 ? + ({this.state.icName}

    Offset: {this.state.timeOffset + "s"}    ) + : (Please select Infrastructure Component)} - }> + }>     - {this.props.widget.customProperties.icID !== -1 ? + {this.props.widget.customProperties.icID !== -1 ? ( {icSelected}) : diff --git a/src/widget/widgets/topology.js b/src/widget/widgets/topology.js index 1eb64fc..d87cca0 100644 --- a/src/widget/widgets/topology.js +++ b/src/widget/widgets/topology.js @@ -16,7 +16,7 @@ ******************************************************************************/ import React from 'react'; -import {UncontrolledReactSVGPanZoom} from 'react-svg-pan-zoom'; +import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom'; import '../../styles/simple-spinner.css'; import { cimsvg } from 'libcimsvg'; import AppDispatcher from "../../common/app-dispatcher"; @@ -94,7 +94,7 @@ class WidgetTopology extends React.Component { } static getDerivedStateFromProps(props, state){ - // find the selected file of the widget, is undefined if no file is selected + // Find the selected file of the widget, is undefined if no file is selected let file = props.files.find(file => file.id === parseInt(props.widget.customProperties.file, 10)); let dashboardState = state.dashboardState; @@ -104,7 +104,7 @@ class WidgetTopology extends React.Component { dashboardState = 'show_message'; message = 'Select a topology model.' } else if (!file.hasOwnProperty('data') && dashboardState === 'show_message'){ - // data of file is missing, start download + // Data of file is missing, start download dashboardState = 'loading'; message = ''; AppDispatcher.dispatch({ @@ -113,7 +113,7 @@ class WidgetTopology extends React.Component { token: props.token }); } else if (file.hasOwnProperty('data') && (dashboardState === 'loading'|| dashboardState === 'show_message')){ - //file is available set state to ready + // File is available set state to ready dashboardState = 'ready' message = ''; } @@ -135,8 +135,6 @@ class WidgetTopology extends React.Component { window.onMouseMove = function() {}; } - //this.Viewer.fitToViewer(); - // Query the file referenced by the widget (if any) if (this.state.file !== undefined) { this.setState({dashboardState: 'loading'}); @@ -155,7 +153,7 @@ class WidgetTopology extends React.Component { componentDidUpdate(prevProps: Readonly

    , prevState: Readonly, snapshot: SS): void { if(this.state.dashboardState === 'ready'){ - //Topology file incl data downloaded, init SVG (should happen only once!) + // Topology file incl data downloaded, init SVG (should happen only once!) if (this.svgElem) { let cimsvgInstance = new cimsvg(this.svgElem.current); cimsvg.setCimsvg(cimsvgInstance); From f4d1c99766b026e0d8221f1bfc3cf06a5efa6284 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 8 Mar 2021 23:57:14 +0100 Subject: [PATCH 38/39] refactor EditSignalMapping to EditSignalMappingDialog --- src/dashboard/dashboard.js | 6 +++--- src/scenario/scenario.js | 21 ++++++++++++++------- src/signal/edit-signal-mapping.js | 6 +++--- 3 files changed, 20 insertions(+), 13 deletions(-) diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js index c6d3922..d627c77 100644 --- a/src/dashboard/dashboard.js +++ b/src/dashboard/dashboard.js @@ -22,7 +22,7 @@ import classNames from 'classnames'; import EditWidget from '../widget/edit-widget/edit-widget'; import EditFiles from '../file/edit-files'; -import EditSignalMapping from "../signal/edit-signal-mapping"; +import EditSignalMappingDialog from "../signal/edit-signal-mapping"; import WidgetContextMenu from '../widget/widget-context-menu'; import WidgetToolbox from '../widget/widget-toolbox'; import WidgetArea from '../widget/widget-area'; @@ -569,7 +569,7 @@ class Dashboard extends Component { scenarioID={this.state.dashboard.scenarioID} /> - this.closeEditSignalsModal(direction)} direction="Output" @@ -578,7 +578,7 @@ class Dashboard extends Component { configs={this.state.configs} sessionToken={this.state.sessionToken} /> - this.closeEditSignalsModal(direction)} direction="Input" diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index cf86fee..f8842df 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -45,7 +45,7 @@ import ResultConfigDialog from '../result/result-configs-dialog'; import ICAction from '../ic/ic-action'; import DeleteDialog from '../common/dialogs/delete-dialog'; import EditConfigDialog from "../componentconfig/edit-config"; -import EditSignalMapping from "../signal/edit-signal-mapping"; +import EditSignalMappingDialog from "../signal/edit-signal-mapping"; import FileStore from "../file/file-store" import WidgetStore from "../widget/widget-store"; import ResultStore from "../result/result-store" @@ -855,11 +855,18 @@ class Scenario extends React.Component { files={this.state.files} sessionToken={this.state.sessionToken} /> - - this.importConfig(data)} ics={this.state.ics} /> - this.closeDeleteConfigModal(c)} /> - - this.importConfig(data)} + ics={this.state.ics} + /> + this.closeDeleteConfigModal(c)} + /> + this.closeEditSignalsModal(direction)} direction="Output" @@ -867,7 +874,7 @@ class Scenario extends React.Component { configID={this.state.modalConfigData.id} sessionToken={this.state.sessionToken} /> - this.closeEditSignalsModal(direction)} direction="Input" diff --git a/src/signal/edit-signal-mapping.js b/src/signal/edit-signal-mapping.js index 9c5cb6e..a9fd7a4 100644 --- a/src/signal/edit-signal-mapping.js +++ b/src/signal/edit-signal-mapping.js @@ -25,7 +25,7 @@ import Dialog from "../common/dialogs/dialog"; import Icon from "../common/icon"; import AppDispatcher from "../common/app-dispatcher"; -class EditSignalMapping extends React.Component { +class EditSignalMappingDialog extends React.Component { constructor(props) { super(props); @@ -320,7 +320,7 @@ class EditSignalMapping extends React.Component { } } -EditSignalMapping.propTypes = { +EditSignalMappingDialog.propTypes = { name: PropTypes.string, length: PropTypes.number, signals: PropTypes.arrayOf( @@ -336,4 +336,4 @@ EditSignalMapping.propTypes = { onChange: PropTypes.func }; -export default EditSignalMapping; +export default EditSignalMappingDialog; From 4b41bc3c23f7d3688944f1014540b352e9e3b61d Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Tue, 9 Mar 2021 00:25:17 +0100 Subject: [PATCH 39/39] smaller bug fixes --- src/file/edit-files.js | 11 ++++------- src/scenario/scenario.js | 11 +++++++++-- src/signal/edit-signal-mapping.js | 2 +- src/styles/app.css | 4 ++++ src/user/user.js | 11 +++++++---- 5 files changed, 25 insertions(+), 14 deletions(-) diff --git a/src/file/edit-files.js b/src/file/edit-files.js index 4058888..dca4f28 100644 --- a/src/file/edit-files.js +++ b/src/file/edit-files.js @@ -116,13 +116,10 @@ class EditFilesDialog extends React.Component { valid={true} > - {this.state.currentUser.role === "Admin" ? - - : <> - } + this.setState({ editInputSignalsModal: true, modalConfigData: this.state.configs[index], modalConfigIndex: index })} /> this.signalsAutoConf(index)} /> @@ -1048,6 +1048,7 @@ class Scenario extends React.Component { this.setState({ deleteUserModal: true, @@ -1057,7 +1058,12 @@ class Scenario extends React.Component { />
    - + this.onUserInputChange(e)} @@ -1077,6 +1083,7 @@ class Scenario extends React.Component {
    +
    this.handleRemove()} style={buttonStyle}> - Remove + Remove