Dreamview: storing state of taskPanelLock

modules/dreamview/frontend/src/components/Tasks/Others.js

@@ -8,9 +8,8 @@ import WS from "store/websocket";
 export default class Others extends React.Component {
     render() {
         const { options, enableHMIButtonsOnly } = this.props.store;
-        const { isPanelLocked, toggleLock } = this.props;
 
-        const disablePanel = enableHMIButtonsOnly || isPanelLocked;
+        const disablePanel = enableHMIButtonsOnly || options.tasksPanelLocked;
 
         return (
             <div className="others card">
@@ -24,13 +23,6 @@ export default class Others extends React.Component {
                             onClick={() => {
                                 WS.dumpMessages();
                             }}>Dump Message</button>
-                    <CheckboxItem id={"showVideo"}
-                                  title={"Camera Sensor"}
-                                  isChecked={options.showVideo}
-                                  disabled={disablePanel}
-                                  onClick={() => {
-                                      this.props.store.handleOptionToggle('showVideo');
-                                  }}/>
                     <CheckboxItem id={"showPNCMonitor"}
                                   title={"PNC Monitor"}
                                   isChecked={options.showPNCMonitor}
@@ -38,11 +30,6 @@ export default class Others extends React.Component {
                                   onClick={() => {
                                       this.props.store.handleOptionToggle('showPNCMonitor');
                                   }}/>
-                    <CheckboxItem id={"panelLock"}
-                                  title={"Lock Task Panel"}
-                                  isChecked={isPanelLocked}
-                                  disabled={false}
-                                  onClick={toggleLock}/>
                     <CheckboxItem id={"toggleSimControl"}
                                   title={"SimControl"}
                                   isChecked={options.simControlEnabled}
@@ -51,6 +38,20 @@ export default class Others extends React.Component {
                                       WS.toggleSimControl(!options.simControlEnabled);
                                       this.props.store.handleOptionToggle('simControlEnabled');
                                   }}/>
+                    <CheckboxItem id={"showVideo"}
+                                  title={"Camera Sensor"}
+                                  isChecked={options.showVideo}
+                                  disabled={disablePanel}
+                                  onClick={() => {
+                                      this.props.store.handleOptionToggle('showVideo');
+                                  }}/>
+                    <CheckboxItem id={"panelLock"}
+                                  title={"Lock Task Panel"}
+                                  isChecked={options.tasksPanelLocked}
+                                  disabled={false}
+                                  onClick={() => {
+                                    this.props.store.handleOptionToggle('tasksPanelLocked');
+                                  }}/>
                 </div>
             </div>
         );

modules/dreamview/frontend/src/components/Tasks/QuickStart.js

@@ -91,25 +91,25 @@ export default class QuickStarter extends React.Component {
 
     render() {
         const { hmi } = this.props.store;
-        const { isPanelLocked } = this.props;
+        const { tasksPanelLocked } = this.props.store.options;
 
         return (
             <div className="card">
                 <div className="card-header"><span>Quick Start</span></div>
                 <div className="card-content-column">
-                    <CommandGroup disabled={isPanelLocked} commands={this.setup} />
-                    <CommandGroup disabled={isPanelLocked} commands={this.reset} />
-                    <CommandGroup disabled={isPanelLocked} commands={this.version} />
+                    <CommandGroup disabled={false} commands={this.version} />
+                    <CommandGroup disabled={tasksPanelLocked} commands={this.setup} />
+                    <CommandGroup disabled={tasksPanelLocked} commands={this.reset} />
                     <CommandGroup disabled={!hmi.enableStartAuto} commands={this.auto}
                                   extraButtonClass="start-auto-button"
                                   extraCommandClass="start-auto-command" />
                     {hmi.showRTKCommands &&
                         <CommandGroup name="Record"
-                                      disabled={isPanelLocked}
+                                      disabled={tasksPanelLocked}
                                       commands={this.rtKRecord} />}
                     {hmi.showRTKCommands &&
                         <CommandGroup name="Replay"
-                                      disabled={isPanelLocked}
+                                      disabled={tasksPanelLocked}
                                       commands={this.rtkReplay} />}
                 </div>
             </div>

modules/dreamview/frontend/src/components/Tasks/index.js

@@ -6,28 +6,11 @@ import Delay from "components/Tasks/Delay";
 import Console from "components/Tasks/Console";
 
 export default class Tasks extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            isPanelLocked: false,
-        };
-
-        this.toggleLock = this.toggleLock.bind(this);
-    }
-
-    toggleLock() {
-        this.setState({
-          isPanelLocked: !this.state.isPanelLocked,
-        });
-    }
-
     render() {
         return (
             <div className="tasks">
-                <QuickStart isPanelLocked={this.state.isPanelLocked} />
-                <Others toggleLock={this.toggleLock}
-                        isPanelLocked={this.state.isPanelLocked} />
+                <QuickStart />
+                <Others />
                 <Delay />
                 <Console />
             </div>

modules/dreamview/frontend/src/store/options.js

@@ -45,8 +45,11 @@ export default class Options {
         PARAMETERS.options.defaults.showObstaclesHeading;
     @observable showObstaclesId =
         PARAMETERS.options.defaults.showObstaclesId;
+
+    // Others
     @observable cameraAngle = PARAMETERS.options.defaults.cameraAngle;
     @observable simControlEnabled = false;
+    @observable tasksPanelLocked = false;
 
     @observable hideOptionToggle = {
         'planningCar': true,