adjust pin guard state text

webpack/constants.ts

@@ -139,8 +139,8 @@ export namespace ToolTips {
 
   // Hardware Settings: Pin Guard
   export const PIN_GUARD_PIN_NUMBER =
-    `The number of the pin to guard. This pin will be deactivated after
-    the being active for the duration specified by TIMEOUT.`;
+    `The number of the pin to guard. This pin will be set to the specified
+    state after the duration specified by TIMEOUT.`;
 
   // Farmware
   export const FARMWARE =

webpack/controls/__tests__/toggle_button_test.tsx

@@ -34,7 +34,7 @@ describe("<ToggleButton/>", function () {
     const toggleButton = mount(<ToggleButton
       toggleValue={0}
       toggleAction={jest.fn()}
-      noYes={false} />);
+      customText={{ textFalse: "off", textTrue: "on" }} />);
     expect(toggleButton.text()).toEqual("off");
   });
 
@@ -42,7 +42,7 @@ describe("<ToggleButton/>", function () {
     const toggleButton = mount(<ToggleButton
       toggleValue={1}
       toggleAction={jest.fn()}
-      noYes={false} />);
+      customText={{ textFalse: "off", textTrue: "on" }} />);
     expect(toggleButton.text()).toEqual("on");
   });
 
@@ -50,7 +50,7 @@ describe("<ToggleButton/>", function () {
     const toggleButton = mount(<ToggleButton
       toggleValue={undefined}
       toggleAction={jest.fn()}
-      noYes={false} />);
+      customText={{ textFalse: "off", textTrue: "on" }} />);
     expect(toggleButton.text()).toEqual("🚫");
   });
 });

webpack/controls/interfaces.ts

@@ -88,7 +88,7 @@ export interface ToggleButtonProps {
   toggleAction: () => void;
   toggleValue: number | string | boolean | undefined;
   disabled?: boolean | undefined;
-  noYes?: boolean;
+  customText?: { textFalse: string, textTrue: string };
 }
 
 export interface WebcamFeed {

webpack/controls/key_val_show_row.tsx

@@ -27,7 +27,7 @@ export function KeyValShowRow(p: KeyValRowProps) {
       <ToggleButton
         toggleValue={toggleValue}
         toggleAction={onClick}
-        noYes={false}
+        customText={{ textFalse: "off", textTrue: "on" }}
         disabled={disabled} />
     </Col>
   </Row>;

webpack/controls/toggle_button.tsx

@@ -1,20 +1,18 @@
 import * as React from "react";
 import { t } from "i18next";
 import { ToggleButtonProps } from "./interfaces";
-import { isUndefined } from "util";
 
 export class ToggleButton extends React.Component<ToggleButtonProps, {}> {
   caption() {
-    const useNoYes = isUndefined(this.props.noYes) ? true : this.props.noYes;
-    const noOff = useNoYes ? t("no") : t("off");
-    const yesOn = useNoYes ? t("yes") : t("on");
+    const { textTrue, textFalse } = this.props.customText
+      || { textFalse: t("no"), textTrue: t("yes") };
     const captions: { [s: string]: string | undefined } = {
-      "0": noOff,
-      "false": noOff,
-      "off": noOff,
-      "1": yesOn,
-      "true": yesOn,
-      "on": yesOn,
+      "0": textFalse,
+      "false": textFalse,
+      "off": textFalse,
+      "1": textTrue,
+      "true": textTrue,
+      "on": textTrue,
       "undefined": "🚫",
       "-1": "🚫"
     };
@@ -23,11 +21,11 @@ export class ToggleButton extends React.Component<ToggleButtonProps, {}> {
   }
 
   css() {
-    const css = "fb-toggle-button fb-button";
-    if (this.props.disabled) { return css + " gray"; }
-    const redCSS = css + " red";
-    const greenCSS = css + " green";
-    const yellowCSS = css + " yellow";
+    const css = "fb-toggle-button fb-button ";
+    if (this.props.disabled) { return css + "gray"; }
+    const greenCSS = css + "green";
+    const redCSS = css + "red";
+    const yellowCSS = css + "yellow";
 
     const cssClasses: { [s: string]: string | undefined } = {
       "0": redCSS,

webpack/devices/components/hardware_settings/pin_guard.tsx

@@ -34,7 +34,7 @@ export function PinGuard(props: PinGuardProps) {
         </Col>
         <Col xs={3}>
           <label style={{ float: "right" }}>
-            {t("Active State")}
+            {t("To State")}
           </label>
         </Col>
       </Row>

webpack/devices/components/pin_guard_input_group.tsx

@@ -5,11 +5,15 @@ import { Row } from "../../ui/row";
 import { Col } from "../../ui/index";
 import { settingToggle } from "../actions";
 import { ToggleButton } from "../../controls/toggle_button";
+import { isUndefined } from "util";
 
 export function PinGuardMCUInputGroup(props: PinGuardMCUInputGroupProps) {
 
   const { bot, dispatch, name, pinNumber, timeout, activeState } = props;
   const { mcu_params } = bot.hardware;
+  const inactiveState = isUndefined(mcu_params[activeState])
+    ? undefined
+    : !mcu_params[activeState];
   return <Row>
     <Col xs={3}>
       <label>
@@ -32,8 +36,8 @@ export function PinGuardMCUInputGroup(props: PinGuardMCUInputGroupProps) {
     </Col>
     <Col xs={2}>
       <ToggleButton
-        noYes={false}
-        toggleValue={mcu_params[activeState]}
+        customText={{ textFalse: "low", textTrue: "high" }}
+        toggleValue={inactiveState}
         toggleAction={() => settingToggle(activeState, bot)} />
     </Col>
   </Row>;