From bddbadf9aca529ce11bff775cbf63bbc99d75159 Mon Sep 17 00:00:00 2001 From: irismarie Date: Wed, 14 Apr 2021 13:16:13 +0200 Subject: [PATCH] show/change locked status of scenario --- package.json | 5 ++- src/common/icon-toggle-button.js | 76 ++++++++++++++++++++++++++++++++ src/scenario/scenario.js | 42 +++++++++++++++--- 3 files changed, 115 insertions(+), 8 deletions(-) create mode 100644 src/common/icon-toggle-button.js diff --git a/package.json b/package.json index 6954861..f7ba094 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@fortawesome/fontawesome-svg-core": "^1.2.34", "@fortawesome/free-solid-svg-icons": "^5.15.2", "@fortawesome/react-fontawesome": "^0.1.14", + "@rjsf/core": "^2.5.1", "babel-runtime": "^6.26.0", "bootstrap": "^4.6.0", "classnames": "^2.2.6", @@ -23,8 +24,8 @@ "gaugeJS": "^1.3.7", "handlebars": "^4.7.7", "jquery": "^3.6.0", - "jszip": "^3.6.0", "jsonwebtoken": "^8.5.1", + "jszip": "^3.6.0", "libcimsvg": "git+https://git.rwth-aachen.de/acs/public/cim/pintura-npm-package.git", "lodash": "^4.17.21", "moment": "^2.29.1", @@ -61,7 +62,7 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, - "proxy": "https://villas.k8s.eonerc.rwth-aachen.de", + "proxy": "http://localhost:4000", "browserslist": { "production": [ ">0.2%", diff --git a/src/common/icon-toggle-button.js b/src/common/icon-toggle-button.js new file mode 100644 index 0000000..44613f6 --- /dev/null +++ b/src/common/icon-toggle-button.js @@ -0,0 +1,76 @@ +/** + * 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 { ToggleButton, ButtonGroup, Tooltip, OverlayTrigger } from 'react-bootstrap'; + +import Icon from './icon'; + + +class IconToggleButton extends React.Component { + + render() { + const altButtonStyle = { + marginLeft: '20px', + } + + const iconStyle = { + height: '30px', + width: '30px' + } + + return + {this.props.checked ? + this.props.tooltipChecked + : + this.props.tooltipUnchecked + } + } > + + + {this.props.checked ? + + : + + } + + + + } +} + +export default IconToggleButton; diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 066f24f..d9d76d7 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -20,6 +20,7 @@ import { Container } from 'flux/utils'; import AppDispatcher from '../common/app-dispatcher'; import IconButton from '../common/icon-button'; +import IconToggleButton from '../common/icon-toggle-button'; import ScenarioStore from './scenario-store'; import ICStore from '../ic/ic-store'; @@ -52,6 +53,7 @@ class Scenario extends React.Component { let scenarioID = parseInt(props.match.params.scenario, 10) return{ + sessionToken: localStorage.getItem("token"), scenario: ScenarioStore.getState().find(s => s.id === scenarioID), results: ResultStore.getState().filter(result => result.scenarioID === scenarioID), sessionToken: localStorage.getItem("token"), @@ -70,26 +72,24 @@ class Scenario extends React.Component { } componentDidMount() { - - let token = localStorage.getItem("token") let scenarioID = parseInt(this.props.match.params.scenario, 10) //load selected scenario AppDispatcher.dispatch({ type: 'scenarios/start-load', data: scenarioID, - token: token + token: this.state.sessionToken }); AppDispatcher.dispatch({ type: 'scenarios/start-load-users', data: scenarioID, - token: token + token: this.state.sessionToken }); // load ICs to enable that component configs and dashboards work with them AppDispatcher.dispatch({ type: 'ics/start-load', - token: token + token: this.state.sessionToken }); } @@ -112,6 +112,22 @@ class Scenario extends React.Component { this.setState({ filesEditModal: false }); } + /* ############################################## + * Change locked state of scenario + ############################################## */ + + onChangeLock() { + let data = {}; + data.id = this.state.scenario.id; + data.isLocked = !this.state.scenario.isLocked; + + AppDispatcher.dispatch({ + type: 'scenarios/start-edit', + data, + token: this.state.sessionToken + }); + } + /* ############################################## * Render method ############################################## */ @@ -137,7 +153,21 @@ class Scenario extends React.Component { icon="file" /> -

{this.state.scenario.name}

+

+ {this.state.scenario.name} + + this.onChangeLock()} + checked={this.state.scenario.isLocked} + checkedIcon='lock' + uncheckedIcon='lock-open' + tooltipChecked='Scenario is locked, cannot be edited' + tooltipUnchecked='Scenario is unlocked, can be edited' + disabled={this.state.currentUser.role !== "Admin"} + /> + +