Initial 1.3.x rework

src/components/PageComponents/ModuleConfig/CannedMessage.tsx

@@ -0,0 +1,171 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+
+import { FormField, SelectField, Switch, TextInputField } from "evergreen-ui";
+import { Controller, useForm, useWatch } from "react-hook-form";
+
+import { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.js";
+import { Form } from "@components/form/Form";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { renderOptions } from "@core/utils/selectEnumOptions.js";
+import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import { Protobuf } from "@meshtastic/meshtasticjs";
+
+export const CannedMessage = (): JSX.Element => {
+  const { moduleConfig, connection } = useDevice();
+  const [loading, setLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isDirty },
+    reset,
+    control,
+  } = useForm<CannedMessageValidation>({
+    defaultValues: moduleConfig.cannedMessage,
+    resolver: classValidatorResolver(CannedMessageValidation),
+  });
+
+  const moduleEnabled = useWatch({
+    control,
+    name: "rotary1Enabled",
+    defaultValue: false,
+  });
+
+  useEffect(() => {
+    reset(moduleConfig.cannedMessage);
+  }, [reset, moduleConfig.cannedMessage]);
+
+  const onSubmit = handleSubmit((data) => {
+    setLoading(true);
+    void connection?.setModuleConfig(
+      {
+        payloadVariant: {
+          oneofKind: "cannedMessage",
+          cannedMessage: data,
+        },
+      },
+      async () => {
+        reset({ ...data });
+        setLoading(false);
+        await Promise.resolve();
+      }
+    );
+  });
+  return (
+    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
+      <FormField
+        label="Module Enabled"
+        description="This is a description."
+        isInvalid={!!errors.enabled?.message}
+        validationMessage={errors.enabled?.message}
+      >
+        <Controller
+          name="enabled"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+      <FormField
+        label="Rotary Encoder #1 Enabled"
+        description="This is a description."
+        isInvalid={!!errors.rotary1Enabled?.message}
+        validationMessage={errors.rotary1Enabled?.message}
+      >
+        <Controller
+          name="rotary1Enabled"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+      <TextInputField
+        label="Encoder Pin A"
+        description="Max transmit power in dBm"
+        type="number"
+        disabled={moduleEnabled}
+        {...register("inputbrokerPinA", { valueAsNumber: true })}
+      />
+      <TextInputField
+        label="Encoder Pin B"
+        description="Max transmit power in dBm"
+        type="number"
+        disabled={moduleEnabled}
+        {...register("inputbrokerPinB", { valueAsNumber: true })}
+      />
+      <TextInputField
+        label="Endoer Pin Press"
+        description="Max transmit power in dBm"
+        type="number"
+        disabled={moduleEnabled}
+        {...register("inputbrokerPinPress", { valueAsNumber: true })}
+      />
+      <SelectField
+        label="Clockwise event"
+        description="This is a description."
+        disabled={moduleEnabled}
+        {...register("inputbrokerEventCw", { valueAsNumber: true })}
+      >
+        {renderOptions(
+          Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
+        )}
+      </SelectField>
+      <SelectField
+        label="Counter Clockwise event"
+        description="This is a description."
+        disabled={moduleEnabled}
+        {...register("inputbrokerEventCcw", { valueAsNumber: true })}
+      >
+        {renderOptions(
+          Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
+        )}
+      </SelectField>
+      <SelectField
+        label="Press event"
+        description="This is a description."
+        disabled={moduleEnabled}
+        {...register("inputbrokerEventPress", { valueAsNumber: true })}
+      >
+        {renderOptions(
+          Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
+        )}
+      </SelectField>
+      <FormField
+        label="Up Down enabled"
+        description="This is a description."
+        isInvalid={!!errors.updown1Enabled?.message}
+        validationMessage={errors.updown1Enabled?.message}
+      >
+        <Controller
+          name="updown1Enabled"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+      <TextInputField
+        label="Allow Input Source"
+        description="Max transmit power in dBm"
+        disabled={moduleEnabled}
+        {...register("allowInputSource")}
+      />
+      <FormField
+        label="Send Bell"
+        description="This is a description."
+        isInvalid={!!errors.sendBell?.message}
+        validationMessage={errors.sendBell?.message}
+      >
+        <Controller
+          name="sendBell"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+    </Form>
+  );
+};

src/components/PageComponents/ModuleConfig/ExternalNotification.tsx

@@ -0,0 +1,134 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+
+import { FormField, Switch, TextInputField } from "evergreen-ui";
+import { Controller, useForm, useWatch } from "react-hook-form";
+
+import { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.js";
+import { Form } from "@components/form/Form";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+
+export const ExternalNotification = (): JSX.Element => {
+  const { moduleConfig, connection } = useDevice();
+  const [loading, setLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isDirty },
+    reset,
+    control,
+  } = useForm<ExternalNotificationValidation>({
+    defaultValues: moduleConfig.externalNotification,
+    resolver: classValidatorResolver(ExternalNotificationValidation),
+  });
+  useEffect(() => {
+    reset(moduleConfig.externalNotification);
+  }, [reset, moduleConfig.externalNotification]);
+
+  const onSubmit = handleSubmit(async (data) => {
+    setLoading(true);
+    await connection?.setModuleConfig(
+      {
+        payloadVariant: {
+          oneofKind: "externalNotification",
+          externalNotification: data,
+        },
+      },
+      async (): Promise<void> => {
+        reset({ ...data });
+        setLoading(false);
+        await Promise.resolve();
+      }
+    );
+  });
+
+  const moduleEnabled = useWatch({
+    control,
+    name: "enabled",
+    defaultValue: false,
+  });
+
+  return (
+    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
+      <FormField
+        label="Module Enabled"
+        description="Description"
+        isInvalid={!!errors.enabled?.message}
+        validationMessage={errors.enabled?.message}
+      >
+        <Controller
+          name="enabled"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+      <TextInputField
+        type="number"
+        label="Output MS"
+        description="Max transmit power in dBm"
+        hint="ms"
+        disabled={!moduleEnabled}
+        {...register("outputMs", {
+          valueAsNumber: true,
+        })}
+      />
+      <TextInputField
+        type="number"
+        label="Output"
+        description="Max transmit power in dBm"
+        disabled={!moduleEnabled}
+        {...register("output", {
+          valueAsNumber: true,
+        })}
+      />
+      <FormField
+        label="Active"
+        description="Description"
+        disabled={!moduleEnabled}
+        isInvalid={!!errors.active?.message}
+        validationMessage={errors.active?.message}
+      >
+        <Controller
+          name="active"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+      <FormField
+        label="Message"
+        description="Description"
+        disabled={!moduleEnabled}
+        isInvalid={!!errors.alertMessage?.message}
+        validationMessage={errors.alertMessage?.message}
+      >
+        <Controller
+          name="alertMessage"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+      <FormField
+        label="Bell"
+        description="Description"
+        disabled={!moduleEnabled}
+        isInvalid={!!errors.alertBell?.message}
+        validationMessage={errors.alertBell?.message}
+      >
+        <Controller
+          name="alertBell"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+    </Form>
+  );
+};

src/components/PageComponents/ModuleConfig/MQTT.tsx

@@ -0,0 +1,105 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+
+import { FormField, Switch, TextInputField } from "evergreen-ui";
+import { Controller, useForm, useWatch } from "react-hook-form";
+
+import { MQTTValidation } from "@app/validation/moduleConfig/mqtt.js";
+import { Form } from "@components/form/Form";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+
+export const MQTT = (): JSX.Element => {
+  const { moduleConfig, connection } = useDevice();
+  const [loading, setLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isDirty },
+    reset,
+    control,
+  } = useForm<MQTTValidation>({
+    defaultValues: moduleConfig.mqtt,
+    resolver: classValidatorResolver(MQTTValidation),
+  });
+
+  const moduleEnabled = useWatch({
+    control,
+    name: "disabled",
+    defaultValue: false,
+  });
+
+  useEffect(() => {
+    reset(moduleConfig.mqtt);
+  }, [reset, moduleConfig.mqtt]);
+
+  const onSubmit = handleSubmit((data) => {
+    setLoading(true);
+    void connection?.setModuleConfig(
+      {
+        payloadVariant: {
+          oneofKind: "mqtt",
+          mqtt: data,
+        },
+      },
+      async () => {
+        reset({ ...data });
+        setLoading(false);
+        await Promise.resolve();
+      }
+    );
+  });
+  return (
+    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
+      <FormField
+        label="Module Disabled"
+        description="Description"
+        isInvalid={!!errors.disabled?.message}
+        validationMessage={errors.disabled?.message}
+      >
+        <Controller
+          name="disabled"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+      <TextInputField
+        label="MQTT Server Address"
+        description="Max transmit power in dBm"
+        disabled={moduleEnabled}
+        {...register("address")}
+      />
+      <TextInputField
+        label="MQTT Username"
+        description="Max transmit power in dBm"
+        disabled={moduleEnabled}
+        {...register("username")}
+      />
+      <TextInputField
+        label="MQTT Password"
+        description="Max transmit power in dBm"
+        type="password"
+        autoComplete="off"
+        disabled={moduleEnabled}
+        {...register("password")}
+      />
+      <FormField
+        label="Encryption Enabled"
+        description="Description"
+        disabled={moduleEnabled}
+        isInvalid={!!errors.encryptionEnabled?.message}
+        validationMessage={errors.encryptionEnabled?.message}
+      >
+        <Controller
+          name="encryptionEnabled"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+    </Form>
+  );
+};

src/components/PageComponents/ModuleConfig/RangeTest.tsx

@@ -0,0 +1,96 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+
+import { FormField, Switch, TextInputField } from "evergreen-ui";
+import { Controller, useForm, useWatch } from "react-hook-form";
+
+import { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.js";
+import { Form } from "@components/form/Form";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+
+export const RangeTest = (): JSX.Element => {
+  const { moduleConfig, connection } = useDevice();
+  const [loading, setLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isDirty },
+    reset,
+    control,
+  } = useForm<RangeTestValidation>({
+    defaultValues: moduleConfig.rangeTest,
+    resolver: classValidatorResolver(RangeTestValidation),
+  });
+
+  useEffect(() => {
+    reset(moduleConfig.rangeTest);
+  }, [reset, moduleConfig.rangeTest]);
+
+  const onSubmit = handleSubmit(async (data) => {
+    setLoading(true);
+    await connection?.setModuleConfig(
+      {
+        payloadVariant: {
+          oneofKind: "rangeTest",
+          rangeTest: data,
+        },
+      },
+      async (): Promise<void> => {
+        reset({ ...data });
+        setLoading(false);
+        await Promise.resolve();
+      }
+    );
+  });
+
+  const moduleEnabled = useWatch({
+    control,
+    name: "enabled",
+    defaultValue: false,
+  });
+
+  return (
+    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
+      <FormField
+        label="Module Enabled"
+        description="Description"
+        isInvalid={!!errors.enabled?.message}
+        validationMessage={errors.enabled?.message}
+      >
+        <Controller
+          name="enabled"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+      <TextInputField
+        type="number"
+        label="Message Interval"
+        description="Max transmit power in dBm"
+        disabled={!moduleEnabled}
+        hint="Seconds"
+        {...register("sender", {
+          valueAsNumber: true,
+        })}
+      />
+      <FormField
+        label="Save CSV to storage"
+        description="Description"
+        disabled={!moduleEnabled}
+        isInvalid={!!errors.save?.message}
+        validationMessage={errors.save?.message}
+      >
+        <Controller
+          name="save"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+    </Form>
+  );
+};

src/components/PageComponents/ModuleConfig/Serial.tsx

@@ -0,0 +1,131 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+
+import { FormField, Switch, TextInputField } from "evergreen-ui";
+import { Controller, useForm, useWatch } from "react-hook-form";
+
+import { SerialValidation } from "@app/validation/moduleConfig/serial.js";
+import { Form } from "@components/form/Form";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+
+export const Serial = (): JSX.Element => {
+  const { moduleConfig, connection } = useDevice();
+  const [loading, setLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isDirty },
+    reset,
+    control,
+  } = useForm<SerialValidation>({
+    defaultValues: moduleConfig.serial,
+    resolver: classValidatorResolver(SerialValidation),
+  });
+
+  useEffect(() => {
+    reset(moduleConfig.serial);
+  }, [reset, moduleConfig.serial]);
+
+  const onSubmit = handleSubmit(async (data) => {
+    setLoading(true);
+    await connection?.setModuleConfig(
+      {
+        payloadVariant: {
+          oneofKind: "serial",
+          serial: data,
+        },
+      },
+      async (): Promise<void> => {
+        reset({ ...data });
+        setLoading(false);
+        await Promise.resolve();
+      }
+    );
+  });
+
+  const moduleEnabled = useWatch({
+    control,
+    name: "enabled",
+    defaultValue: false,
+  });
+
+  return (
+    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
+      <FormField
+        label="Module Enabled"
+        description="Description"
+        isInvalid={!!errors.enabled?.message}
+        validationMessage={errors.enabled?.message}
+      >
+        <Controller
+          name="enabled"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+      <FormField
+        label="Echo"
+        description="Description"
+        disabled={!moduleEnabled}
+        isInvalid={!!errors.echo?.message}
+        validationMessage={errors.echo?.message}
+      >
+        <Controller
+          name="echo"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+      <TextInputField
+        type="number"
+        label="RX"
+        description="Max transmit power in dBm"
+        disabled={!moduleEnabled}
+        {...register("rxd", {
+          valueAsNumber: true,
+        })}
+      />
+      <TextInputField
+        type="number"
+        label="TX Pin"
+        description="Max transmit power in dBm"
+        disabled={!moduleEnabled}
+        {...register("txd", {
+          valueAsNumber: true,
+        })}
+      />
+      <TextInputField
+        type="number"
+        label="Baud Rate"
+        description="Max transmit power in dBm"
+        disabled={!moduleEnabled}
+        {...register("baud", {
+          valueAsNumber: true,
+        })}
+      />
+      <TextInputField
+        type="number"
+        label="Timeout"
+        description="Max transmit power in dBm"
+        disabled={!moduleEnabled}
+        {...register("timeout", {
+          valueAsNumber: true,
+        })}
+      />
+      <TextInputField
+        type="number"
+        label="Mode"
+        description="Max transmit power in dBm"
+        disabled={!moduleEnabled}
+        {...register("mode", {
+          valueAsNumber: true,
+        })}
+      />
+    </Form>
+  );
+};

src/components/PageComponents/ModuleConfig/StoreForward.tsx

@@ -0,0 +1,114 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+
+import { FormField, Switch, TextInputField } from "evergreen-ui";
+import { Controller, useForm, useWatch } from "react-hook-form";
+
+import { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.js";
+import { Form } from "@components/form/Form";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+
+export const StoreForward = (): JSX.Element => {
+  const { moduleConfig, connection } = useDevice();
+  const [loading, setLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isDirty },
+    reset,
+    control,
+  } = useForm<StoreForwardValidation>({
+    defaultValues: moduleConfig.storeForward,
+    resolver: classValidatorResolver(StoreForwardValidation),
+  });
+
+  useEffect(() => {
+    reset(moduleConfig.storeForward);
+  }, [reset, moduleConfig.storeForward]);
+
+  const onSubmit = handleSubmit(async (data) => {
+    setLoading(true);
+    await connection?.setModuleConfig(
+      {
+        payloadVariant: {
+          oneofKind: "storeForward",
+          storeForward: data,
+        },
+      },
+      async (): Promise<void> => {
+        reset({ ...data });
+        setLoading(false);
+        await Promise.resolve();
+      }
+    );
+  });
+
+  const moduleEnabled = useWatch({
+    control,
+    name: "enabled",
+    defaultValue: false,
+  });
+
+  return (
+    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
+      <FormField
+        label="Module Enabled"
+        description="Description"
+        isInvalid={!!errors.enabled?.message}
+        validationMessage={errors.enabled?.message}
+      >
+        <Controller
+          name="enabled"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+      <FormField
+        label="Heartbeat Enabled"
+        description="Description"
+        disabled={!moduleEnabled}
+        isInvalid={!!errors.heartbeat?.message}
+        validationMessage={errors.heartbeat?.message}
+      >
+        <Controller
+          name="heartbeat"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+      <TextInputField
+        type="number"
+        label="Number of records"
+        description="Max transmit power in dBm"
+        hint="Records"
+        disabled={!moduleEnabled}
+        {...register("records", {
+          valueAsNumber: true,
+        })}
+      />
+      <TextInputField
+        type="number"
+        label="History return max"
+        description="Max transmit power in dBm"
+        disabled={!moduleEnabled}
+        {...register("historyReturnMax", {
+          valueAsNumber: true,
+        })}
+      />
+      <TextInputField
+        type="number"
+        label="History return window"
+        description="Max transmit power in dBm"
+        disabled={!moduleEnabled}
+        {...register("historyReturnWindow", {
+          valueAsNumber: true,
+        })}
+      />
+    </Form>
+  );
+};

src/components/PageComponents/ModuleConfig/Telemetry.tsx

@@ -0,0 +1,135 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+
+import { FormField, SelectField, Switch, TextInputField } from "evergreen-ui";
+import { Controller, useForm } from "react-hook-form";
+
+import { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js";
+import { Form } from "@components/form/Form";
+import { useDevice } from "@core/stores/deviceStore.js";
+import { renderOptions } from "@core/utils/selectEnumOptions.js";
+import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import { Protobuf } from "@meshtastic/meshtasticjs";
+
+export const Telemetry = (): JSX.Element => {
+  const { moduleConfig, connection } = useDevice();
+  const [loading, setLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isDirty },
+    reset,
+    control,
+  } = useForm<TelemetryValidation>({
+    defaultValues: moduleConfig.telemetry,
+    resolver: classValidatorResolver(TelemetryValidation),
+  });
+
+  useEffect(() => {
+    reset(moduleConfig.telemetry);
+  }, [reset, moduleConfig.telemetry]);
+
+  const onSubmit = handleSubmit((data) => {
+    setLoading(true);
+    void connection?.setModuleConfig(
+      {
+        payloadVariant: {
+          oneofKind: "telemetry",
+          telemetry: data,
+        },
+      },
+      async () => {
+        reset({ ...data });
+        setLoading(false);
+        await Promise.resolve();
+      }
+    );
+  });
+  return (
+    <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
+      <FormField
+        label="Measurement Enabled"
+        description="Description"
+        isInvalid={!!errors.environmentMeasurementEnabled?.message}
+        validationMessage={errors.environmentMeasurementEnabled?.message}
+      >
+        <Controller
+          name="environmentMeasurementEnabled"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+      <FormField
+        label="Displayed on Screen"
+        description="Description"
+        isInvalid={!!errors.environmentScreenEnabled?.message}
+        validationMessage={errors.environmentScreenEnabled?.message}
+      >
+        <Controller
+          name="environmentScreenEnabled"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+      <TextInputField
+        label="Read Error Count Threshold"
+        description="Max transmit power in dBm"
+        type="number"
+        {...register("environmentReadErrorCountThreshold", {
+          valueAsNumber: true,
+        })}
+      />
+      <TextInputField
+        label="Update Interval"
+        description="Max transmit power in dBm"
+        hint="Seconds"
+        type="number"
+        {...register("environmentUpdateInterval", {
+          valueAsNumber: true,
+        })}
+      />
+      <TextInputField
+        label="Recovery Interval"
+        description="Max transmit power in dBm"
+        hint="Seconds"
+        type="number"
+        {...register("environmentRecoveryInterval", {
+          valueAsNumber: true,
+        })}
+      />
+      <FormField
+        label="Display Farenheit"
+        description="Description"
+        isInvalid={!!errors.environmentDisplayFahrenheit?.message}
+        validationMessage={errors.environmentDisplayFahrenheit?.message}
+      >
+        <Controller
+          name="environmentDisplayFahrenheit"
+          control={control}
+          render={({ field: { value, ...field } }) => (
+            <Switch height={24} marginLeft="auto" checked={value} {...field} />
+          )}
+        />
+      </FormField>
+      <SelectField
+        label="Sensor Type"
+        description="This is a description."
+        {...register("environmentSensorType", { valueAsNumber: true })}
+      >
+        {renderOptions(Protobuf.TelemetrySensorType)}
+      </SelectField>
+      <TextInputField
+        label="Sensor Pin"
+        description="Max transmit power in dBm"
+        type="number"
+        {...register("environmentSensorPin", {
+          valueAsNumber: true,
+        })}
+      />
+    </Form>
+  );
+};