show/change locked status of scenario

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%",

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 <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+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 <OverlayTrigger
+      key={this.props.ikey}
+      placement={'top'}
+      overlay={
+        <Tooltip id={`tooltip-${"add"}`}>
+          {this.props.checked ?
+            this.props.tooltipChecked
+            :
+            this.props.tooltipUnchecked
+          }
+        </Tooltip>} >
+      <ButtonGroup toggle>
+        <ToggleButton
+          variant='light'
+          type='checkbox'
+          onChange={this.props.onChange}
+          style={altButtonStyle}
+          disabled={this.props.disabled}
+          checked={this.props.checked}
+        >
+          {this.props.checked ?
+            <Icon
+              icon={this.props.checkedIcon}
+              classname={'icon-color'}
+              style={iconStyle}
+            />
+            :
+            <Icon
+              icon={this.props.uncheckedIcon}
+              classname={'icon-color'}
+              style={iconStyle}
+            />
+          }
+        </ToggleButton>
+      </ButtonGroup>
+    </OverlayTrigger>
+  }
+}
+
+export default IconToggleButton;

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"
         />
       </div>
-      <h1>{this.state.scenario.name}</h1>
+      <h1>
+        {this.state.scenario.name}
+        <span className='icon-button'>
+              <IconToggleButton
+                ikey={0}
+                onChange={() => 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"}
+              />
+            </span>
+        </h1>
 
       <EditFilesDialog
         sessionToken={this.state.sessionToken}