Disable sending and editing text when not connected

Autodesk · Nov 8, 2017 · 1ef1120 · 1ef1120
1 parent 53281b2
commit 1ef1120
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 14 deletions.
diff --git a/src/Components/Bots/Dashboard/SendGcode.js b/src/Components/Bots/Dashboard/SendGcode.js
@@ -39,22 +39,25 @@ export default class SendGcode extends React.Component {
   }
 
   render() {
-    const commandable =
-      this.state.gcodeInput.length > 0 &&
-      (this.props.bot.state === 'idle' ||
-        this.props.bot.state === 'paused' ||
-        (this.props.forceJog === true && botMetaStates.connected.includes(this.props.bot.state)));
+    const gcodeable =
+      this.props.bot.state === 'idle' ||
+      this.props.bot.state === 'paused' ||
+      (this.props.forceJog === true && botMetaStates.connected.includes(this.props.bot.state));
+
+    const commandable = this.state.gcodeInput.length > 0 && gcodeable;
 
     return (
       <div className="send-gcode">
         <form onSubmit={this.processGcode}>
           <div className="row">
             <div className="col-sm-7 no-padding-right">
               <input
+                style={{ background: gcodeable ? '#ffffff' : '#cccccc' }}
                 name="gcode"
-                className="text-input"
+                className={`text-input ${gcodeable ? '' : 'no-select'}`}
                 value={this.state.gcodeInput}
                 default=""
+                disabled={!gcodeable}
                 placeholder="Enter Gcode Here"
                 onChange={this.updateGcodeInput}
                 type="text"

diff --git a/src/Components/Bots/Dashboard/Temp.js b/src/Components/Bots/Dashboard/Temp.js
@@ -185,7 +185,8 @@ export default class Temp extends React.Component {
                   }}
                   placeholder="X°C"
                   name="setpoint"
-                  className="text-input"
+                  style={{ background: editable ? '#ffffff' : '#cccccc' }}
+                  className={`text-input ${editable ? '' : 'no-select'}`}
                   disabled={!editable || t0Disabled}
                 />
                 <input
@@ -223,7 +224,8 @@ export default class Temp extends React.Component {
                   }}
                   placeholder="X°C"
                   name="setpoint"
-                  className="text-input"
+                  style={{ background: editable ? '#ffffff' : '#cccccc' }}
+                  className={`text-input ${editable ? '' : 'no-select'}`}
                   disabled={!editable || b0Disabled}
                 />
                 <input

diff --git a/src/Components/Bots/Terminal/index.js b/src/Components/Bots/Terminal/index.js
@@ -94,22 +94,25 @@ export default class Terminal extends React.Component {
   }
 
   render() {
-    const commandable =
-      this.state.gcodeInput.length > 0 &&
-      (this.props.bot.state === 'idle' ||
-        this.props.bot.state === 'paused' ||
-        (this.props.forceJog === true && botMetaStates.connected.includes(this.props.bot.state)));
+    const gcodeable =
+      this.props.bot.state === 'idle' ||
+      this.props.bot.state === 'paused' ||
+      (this.props.forceJog === true && botMetaStates.connected.includes(this.props.bot.state));
+
+    const commandable = this.state.gcodeInput.length > 0 && gcodeable;
 
     return (
       <div className="terminal__scroll-wrapper container-fluid">
         <div className="terminal--buttons row">
           <div className="col-xs-8 col-sm-8 col-md-8 col-lg-8">
             <form onSubmit={this.submitGcode}>
               <input
+                style={{ background: gcodeable ? '#ffffff' : '#cccccc' }}
                 name="gcode"
-                className="text-input"
+                className={`text-input ${gcodeable ? '' : 'no-select'}`}
                 value={this.state.gcodeInput}
                 default=""
+                disabled={!gcodeable}
                 placeholder="Enter Gcode Here"
                 onChange={this.updateGcodeInput}
                 type="text"