Dreamview: implemented task panel lock

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

@@ -8,33 +8,41 @@ 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;
 
         return (
             <div className="others card">
                 <div className="card-header"><span>Others</span></div>
                 <div className="card-content-column">
-                    <button disabled={enableHMIButtonsOnly}
+                    <button disabled={disablePanel}
                             onClick={() => {
                                 WS.resetBackend();
                             }}>Reset Backend Data</button>
-                    <button disabled={enableHMIButtonsOnly}
+                    <button disabled={disablePanel}
                             onClick={() => {
                                 WS.dumpMessages();
                             }}>Dump Message</button>
                     <CheckboxItem id={"showVideo"}
                                   title={"Camera Sensor"}
                                   isChecked={options.showVideo}
-                                  disabled={enableHMIButtonsOnly}
+                                  disabled={disablePanel}
                                   onClick={() => {
                                         options.toggleSideBar("showVideo");
                                   }}/>
                     <CheckboxItem id={"showPNCMonitor"}
                                   title={"PNC Monitor"}
                                   isChecked={options.showPNCMonitor}
-                                  disabled={enableHMIButtonsOnly}
+                                  disabled={disablePanel}
                                   onClick={() => {
                                         this.props.store.handleSideBarClick('showPNCMonitor');
                                   }}/>
+                    <CheckboxItem id={"panelLock"}
+                                  title={"Lock Task Panel"}
+                                  isChecked={isPanelLocked}
+                                  disabled={false}
+                                  onClick={toggleLock}/>
                 </div>
             </div>
         );

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

 import React from "react";
 import { inject, observer } from "mobx-react";
+import classNames from "classnames";
 
 import WS from "store/websocket";
 
 class CommandGroup extends React.Component {
     render() {
-        const {name, commands} = this.props;
+        const { name, commands,disabled,
+                extraCommandClass, extraButtonClass} = this.props;
 
         const entries = Object.keys(commands).map((key) => {
-            return <button key={key} onClick={commands[key]}>{key}</button>;
+            return <button className={extraButtonClass}
+                           disabled={disabled}
+                           key={key}
+                           onClick={commands[key]}>{key}</button>;
         });
 
-        const text = name ? `${name}:` : '';
+        const text = name ? <span className="name">{`${name}:`}</span> : null;
+
         return (
-            <div className="command-group">
-                <span className="name">{text}</span>
+            <div className={classNames("command-group", extraCommandClass)}>
+                {text}
                 {entries}
             </div>
         );
@@ -27,9 +33,6 @@ export default class QuickStarter extends React.Component {
         super(props);
 
         this.rtKRecord = {
-            "Setup": () => {
-                WS.executeToolCommand("rtk_record_replay", "setup");
-            },
             "Start": () => {
                 WS.executeToolCommand("rtk_record_replay", "start_recorder");
             },
@@ -39,9 +42,6 @@ export default class QuickStarter extends React.Component {
         };
 
         this.rtkReplay = {
-            "Setup": () => {
-                WS.executeToolCommand("rtk_record_replay", "setup");
-            },
             "Start": () => {
                 WS.executeToolCommand("rtk_record_replay", "start_player");
             },
@@ -50,13 +50,10 @@ export default class QuickStarter extends React.Component {
             },
         };
 
-        this.auto = {
+        this.setup = {
             "Setup": () => {
                 WS.executeModeCommand("start");
             },
-            "Start Auto": () => {
-                WS.changeDrivingMode("COMPLETE_AUTO_DRIVE");
-            },
         };
 
         this.reset = {
@@ -64,21 +61,35 @@ export default class QuickStarter extends React.Component {
                 WS.executeModeCommand("stop");
             },
         };
+
+        this.auto = {
+            "Start Auto": () => {
+                WS.changeDrivingMode("COMPLETE_AUTO_DRIVE");
+            },
+        };
     }
 
     render() {
         const { hmi } = this.props.store;
+        const { isPanelLocked } = this.props;
 
         return (
             <div className="card">
                 <div className="card-header"><span>Quick Start</span></div>
                 <div className="card-content-column">
-                    <CommandGroup name="Auto" commands={this.auto} />
-                    <CommandGroup name="Reset" commands={this.reset} />
+                    <CommandGroup disabled={isPanelLocked} commands={this.setup} />
+                    <CommandGroup disabled={isPanelLocked} commands={this.reset} />
+                    <CommandGroup disabled={false} commands={this.auto}
+                                  extraButtonClass="start-auto-button"
+                                  extraCommandClass="start-auto-command" />
                     {hmi.showRTKCommands &&
-                        <CommandGroup name="Record" commands={this.rtKRecord} />}
+                        <CommandGroup name="Record"
+                                      disabled={isPanelLocked}
+                                      commands={this.rtKRecord} />}
                     {hmi.showRTKCommands &&
-                        <CommandGroup name="Replay" commands={this.rtkReplay} />}
+                        <CommandGroup name="Replay"
+                                      disabled={isPanelLocked}
+                                      commands={this.rtkReplay} />}
                 </div>
             </div>
         );

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

@@ -6,12 +6,28 @@ import Delay from "components/Tasks/Delay";
 import Console from "components/Tasks/Console";
 
 export default class Tasks extends React.Component {
-    render() {
+    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 />
-                <Others />
+                <QuickStart isPanelLocked={this.state.isPanelLocked} />
+                <Others toggleLock={this.toggleLock}
+                        isPanelLocked={this.state.isPanelLocked} />
                 <Delay />
                 <Console />
             </div>

modules/dreamview/frontend/src/styles/main.scss

@@ -869,9 +869,10 @@ body {
         flex-flow: row nowrap;
         justify-content: flex-start;
 
-        flex: 1 1 auto;
+        flex: 1 1 0;
+
         min-height: 45px;
-        max-height: 85px;
+        min-width: 130px;
 
         .name {
             width: 40px;
@@ -879,8 +880,17 @@ body {
         }
     }
 
+    .start-auto-command {
+        flex: 2 2 0;
+
+        .start-auto-button {
+            max-height: unset;
+        }
+    }
+
     .others {
         min-width: 165px;
+        max-width: 260px;
     }
 
     .delay {
@@ -912,10 +922,11 @@ body {
     }
 
     button {
-        flex: 1 1 auto;
+        flex: 1 1 0;
 
         margin: 5px;
         border: 0px;
+
         min-width: 75px;
         min-height: 40px;
         max-height: 60px;
@@ -935,7 +946,7 @@ body {
     }
 
     button:active {
-        background: rgba(21, 30, 27, 0.6);
+        background: rgba(35, 51, 45, 0.6);
     }
 
     button:disabled {