Add toggle button to FE

package.json

@@ -51,7 +51,7 @@
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-15": "^1.0.2",
     "extract-text-webpack-plugin": "^3.0.1",
-    "farmbot": "5.0.2-rc5",
+    "farmbot": "5.0.2-rc6",
     "farmbot-toastr": "^1.0.3",
     "fastclick": "^1.0.6",
     "file-loader": "^1.1.5",

webpack/constants.ts

@@ -1,3 +1,5 @@
+import { trim } from "./util";
+
 /**
  * Seems like a better idea to keep content and tooltips centralized. If we have
  * the ability to keep the app safer from possible accidental breakages by
@@ -301,6 +303,12 @@ export namespace Content {
     `This will restart FarmBot's Raspberry Pi and controller
     software.`.replace(/\s+/g, " ");
 
+  export const AUTO_SYNC = trim(`When enabled, device resources such as
+  sequences and regimens will be sent to the device automatically. This removes
+  the need to push "SYNC" after making changes in the web app. Changes to
+  running sequences and regimens while auto sync is enabled will result in
+  instantaneous change.`);
+
   export const SHUTDOWN_FARMBOT =
     `This will shutdown FarmBot's Raspberry Pi. To turn it
     back on, unplug FarmBot and plug it back in.`.replace(/\s+/g, " ");

webpack/devices/components/farmbot_os_settings.tsx

@@ -22,6 +22,7 @@ import { AutoUpdateRow } from "./fbos_settings/auto_update_row";
 import { RestartRow } from "./fbos_settings/restart_row";
 import { ShutdownRow } from "./fbos_settings/shutdown_row";
 import { FactoryResetRow } from "./fbos_settings/factory_reset_row";
+import { AutoSyncRow } from "./fbos_settings/auto_sync_row";
 
 export class FarmbotOsSettings
   extends React.Component<FarmbotOsProps> {
@@ -106,13 +107,14 @@ export class FarmbotOsSettings
           </Row>
           <this.lastSeen />
           <MustBeOnline
-            status={this.props.bot.hardware.informational_settings.sync_status}
+            status={hardware.informational_settings.sync_status}
             lockOpen={process.env.NODE_ENV !== "production"}>
             <AutoUpdateRow bot={this.props.bot} controller_version={controller_version} />
             <RestartRow />
             <ShutdownRow />
             <FactoryResetRow />
-            <CameraSelection env={this.props.bot.hardware.user_env} />
+            <AutoSyncRow currentValue={hardware.configuration.auto_sync} />
+            <CameraSelection env={hardware.user_env} />
             <BoardType firmwareVersion={firmware_version} />
           </MustBeOnline>
         </WidgetBody>

webpack/devices/components/fbos_settings/auto_sync_row.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { Row, Col } from "../../../ui/index";
+import { t } from "i18next";
+import { ToggleButton } from "../../../controls/toggle_button";
+import { Content } from "../../../constants";
+import { updateConfig } from "../../actions";
+import { noop } from "lodash";
+
+interface AutoSyncRowProps { currentValue: number | undefined; }
+
+export function AutoSyncRow(props: AutoSyncRowProps) {
+  const auto_sync = props.currentValue === 1 ? 0 : 1;
+  return <Row>
+    <Col xs={2}>
+      <label>
+        {t("AUTO SYNC")}
+      </label>
+    </Col>
+    <Col xs={7}>
+      <p>
+        {t(Content.AUTO_SYNC)}
+      </p>
+    </Col>
+    <Col xs={3}>
+      <ToggleButton toggleValue={props.currentValue || 0}
+        toggleAction={() => {
+          updateConfig({ auto_sync })(noop);
+        }} />
+    </Col>
+  </Row>;
+}

yarn.lock

@@ -1996,9 +1996,9 @@ farmbot-toastr@^1.0.0, farmbot-toastr@^1.0.3:
     farmbot-toastr "^1.0.0"
     typescript "^2.3.4"
 
-farmbot@5.0.2-rc5:
-  version "5.0.2-rc5"
-  resolved "https://registry.yarnpkg.com/farmbot/-/farmbot-5.0.2-rc5.tgz#63d49a83043cd17aaf1b41b1f77e14eced40aae1"
+farmbot@5.0.2-rc6:
+  version "5.0.2-rc6"
+  resolved "https://registry.yarnpkg.com/farmbot/-/farmbot-5.0.2-rc6.tgz#8f85fcbd603e3f33c7d5df0220e2022f58bed8ad"
   dependencies:
     mqtt "^2.13.1"
     typescript "^2.4.2"