Add form sections
This commit is contained in:
Sacha Weatherstone
@@ -4,6 +4,7 @@ import { useEffect } from "react";
|
||||
import { Controller, useForm, useWatch } from "react-hook-form";
|
||||
import { toast } from "react-hot-toast";
|
||||
|
||||
import { FormSection } from "@app/components/form/FormSection.js";
|
||||
import { Input } from "@app/components/form/Input.js";
|
||||
import { Select } from "@app/components/form/Select.js";
|
||||
import { Toggle } from "@app/components/form/Toggle.js";
|
||||
@@ -70,74 +71,103 @@ export const LoRa = (): JSX.Element => {
|
||||
dirty={isDirty}
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
<Controller
|
||||
name="usePreset"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Use Preset"
|
||||
description="Use one of the predefined modem presets"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Select
|
||||
label="Preset"
|
||||
description="Modem preset to use"
|
||||
disabled={!usePreset}
|
||||
{...register("modemPreset", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
|
||||
</Select>
|
||||
|
||||
<Input
|
||||
label="Bandwidth"
|
||||
description="Max transmit power in dBm"
|
||||
type="number"
|
||||
suffix="MHz"
|
||||
error={errors.bandwidth?.message}
|
||||
{...register("bandwidth", {
|
||||
valueAsNumber: true,
|
||||
})}
|
||||
disabled={usePreset}
|
||||
/>
|
||||
<Input
|
||||
label="Spread Factor"
|
||||
description="Max transmit power in dBm"
|
||||
type="number"
|
||||
suffix="CPS"
|
||||
error={errors.spreadFactor?.message}
|
||||
{...register("spreadFactor", {
|
||||
valueAsNumber: true,
|
||||
})}
|
||||
disabled={usePreset}
|
||||
/>
|
||||
<Input
|
||||
label="Coding Rate"
|
||||
description="Max transmit power in dBm"
|
||||
type="number"
|
||||
error={errors.codingRate?.message}
|
||||
{...register("codingRate", {
|
||||
valueAsNumber: true,
|
||||
})}
|
||||
disabled={usePreset}
|
||||
/>
|
||||
<Input
|
||||
label="Frequency Offset"
|
||||
description="This is a description."
|
||||
suffix="Hz"
|
||||
type="number"
|
||||
error={errors.frequencyOffset?.message}
|
||||
{...register("frequencyOffset", { valueAsNumber: true })}
|
||||
/>
|
||||
<Select
|
||||
label="Region"
|
||||
description="This is a description."
|
||||
{...register("region", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
|
||||
</Select>
|
||||
<FormSection title="Modem Settings">
|
||||
<Controller
|
||||
name="usePreset"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Use Preset"
|
||||
description="Use one of the predefined modem presets"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Select
|
||||
label="Preset"
|
||||
description="Modem preset to use"
|
||||
disabled={!usePreset}
|
||||
{...register("modemPreset", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
|
||||
</Select>
|
||||
<Input
|
||||
label="Bandwidth"
|
||||
description="Max transmit power in dBm"
|
||||
type="number"
|
||||
suffix="MHz"
|
||||
error={errors.bandwidth?.message}
|
||||
{...register("bandwidth", {
|
||||
valueAsNumber: true,
|
||||
})}
|
||||
disabled={usePreset}
|
||||
/>
|
||||
<Input
|
||||
label="Spread Factor"
|
||||
description="Max transmit power in dBm"
|
||||
type="number"
|
||||
suffix="CPS"
|
||||
error={errors.spreadFactor?.message}
|
||||
{...register("spreadFactor", {
|
||||
valueAsNumber: true,
|
||||
})}
|
||||
disabled={usePreset}
|
||||
/>
|
||||
<Input
|
||||
label="Coding Rate"
|
||||
description="Max transmit power in dBm"
|
||||
type="number"
|
||||
error={errors.codingRate?.message}
|
||||
{...register("codingRate", {
|
||||
valueAsNumber: true,
|
||||
})}
|
||||
disabled={usePreset}
|
||||
/>
|
||||
</FormSection>
|
||||
<FormSection title="Radio Settings">
|
||||
<Controller
|
||||
name="txEnabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Transmit Enabled"
|
||||
description="Description"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Select
|
||||
label="Region"
|
||||
description="This is a description."
|
||||
{...register("region", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
|
||||
</Select>
|
||||
<Input
|
||||
label="Transmit Power"
|
||||
description="Max transmit power in dBm"
|
||||
type="number"
|
||||
error={errors.txPower?.message}
|
||||
{...register("txPower", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Channel Number"
|
||||
description="LoRa channel number"
|
||||
type="number"
|
||||
error={errors.channelNum?.message}
|
||||
{...register("channelNum", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Frequency Offset"
|
||||
description="This is a description."
|
||||
suffix="Hz"
|
||||
type="number"
|
||||
error={errors.frequencyOffset?.message}
|
||||
{...register("frequencyOffset", { valueAsNumber: true })}
|
||||
/>
|
||||
</FormSection>
|
||||
<Input
|
||||
label="Hop Limit"
|
||||
description="This is a description."
|
||||
@@ -146,32 +176,6 @@ export const LoRa = (): JSX.Element => {
|
||||
error={errors.hopLimit?.message}
|
||||
{...register("hopLimit", { valueAsNumber: true })}
|
||||
/>
|
||||
<Controller
|
||||
name="txEnabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Transmit Enabled"
|
||||
description="Description"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Input
|
||||
label="Transmit Power"
|
||||
description="Max transmit power in dBm"
|
||||
type="number"
|
||||
error={errors.txPower?.message}
|
||||
{...register("txPower", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Channel Number"
|
||||
description="LoRa channel number"
|
||||
type="number"
|
||||
error={errors.channelNum?.message}
|
||||
{...register("channelNum", { valueAsNumber: true })}
|
||||
/>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useEffect } from "react";
|
||||
import { Controller, useForm, useWatch } from "react-hook-form";
|
||||
import { toast } from "react-hot-toast";
|
||||
|
||||
import { FormSection } from "@app/components/form/FormSection.js";
|
||||
import { Input } from "@app/components/form/Input.js";
|
||||
import { Select } from "@app/components/form/Select.js";
|
||||
import { Toggle } from "@app/components/form/Toggle.js";
|
||||
@@ -75,41 +76,91 @@ export const Network = (): JSX.Element => {
|
||||
dirty={isDirty}
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
<Controller
|
||||
name="wifiEnabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="WiFi Enabled"
|
||||
description="Enable or disbale the WiFi radio"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Select
|
||||
label="WiFi Mode"
|
||||
description="How the WiFi radio should be used"
|
||||
disabled={!wifiEnabled}
|
||||
{...register("wifiMode", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.Config_NetworkConfig_WiFiMode)}
|
||||
</Select>
|
||||
<Input
|
||||
label="SSID"
|
||||
description="Network name"
|
||||
error={errors.wifiSsid?.message}
|
||||
disabled={!wifiEnabled}
|
||||
{...register("wifiSsid")}
|
||||
/>
|
||||
<Input
|
||||
label="PSK"
|
||||
type="password"
|
||||
description="Network password"
|
||||
error={errors.wifiPsk?.message}
|
||||
disabled={!wifiEnabled}
|
||||
{...register("wifiPsk")}
|
||||
/>
|
||||
<FormSection title="WiFi Config">
|
||||
<Controller
|
||||
name="wifiEnabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="WiFi Enabled"
|
||||
description="Enable or disbale the WiFi radio"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Select
|
||||
label="WiFi Mode"
|
||||
description="How the WiFi radio should be used"
|
||||
disabled={!wifiEnabled}
|
||||
{...register("wifiMode", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.Config_NetworkConfig_WiFiMode)}
|
||||
</Select>
|
||||
<Input
|
||||
label="SSID"
|
||||
description="Network name"
|
||||
error={errors.wifiSsid?.message}
|
||||
disabled={!wifiEnabled}
|
||||
{...register("wifiSsid")}
|
||||
/>
|
||||
<Input
|
||||
label="PSK"
|
||||
type="password"
|
||||
description="Network password"
|
||||
error={errors.wifiPsk?.message}
|
||||
disabled={!wifiEnabled}
|
||||
{...register("wifiPsk")}
|
||||
/>
|
||||
</FormSection>
|
||||
<FormSection title="Ethernet Config">
|
||||
<Controller
|
||||
name="ethEnabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Ethernet Enabled"
|
||||
description="Enable or disbale the Ethernet port"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Select
|
||||
label="Ethernet Mode"
|
||||
description="Address assignment selection"
|
||||
disabled={!ethEnabled}
|
||||
{...register("ethMode", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.Config_NetworkConfig_WiFiMode)}
|
||||
</Select>
|
||||
</FormSection>
|
||||
<FormSection title="IP Config">
|
||||
<Input
|
||||
label="IP"
|
||||
description="IP Address"
|
||||
error={errors.wifiSsid?.message}
|
||||
{...register("ethConfig.ip")}
|
||||
/>
|
||||
<Input
|
||||
label="Gateway"
|
||||
description="Default Gateway"
|
||||
error={errors.wifiSsid?.message}
|
||||
{...register("ethConfig.gateway")}
|
||||
/>
|
||||
<Input
|
||||
label="Subnet"
|
||||
description="Subnet Mask"
|
||||
error={errors.wifiSsid?.message}
|
||||
{...register("ethConfig.subnet")}
|
||||
/>
|
||||
<Input
|
||||
label="DNS"
|
||||
description="DNS Server"
|
||||
error={errors.wifiSsid?.message}
|
||||
{...register("ethConfig.dns")}
|
||||
/>
|
||||
</FormSection>
|
||||
<Input
|
||||
label="NTP Server"
|
||||
description="NTP server for time synchronization"
|
||||
@@ -117,54 +168,6 @@ export const Network = (): JSX.Element => {
|
||||
disabled={!wifiEnabled && !ethEnabled}
|
||||
{...register("ntpServer")}
|
||||
/>
|
||||
<Controller
|
||||
name="ethEnabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Ethernet Enabled"
|
||||
description="Enable or disbale the Ethernet port"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Select
|
||||
label="Ethernet Mode"
|
||||
description="Address assignment selection"
|
||||
disabled={!ethEnabled}
|
||||
{...register("ethMode", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.Config_NetworkConfig_WiFiMode)}
|
||||
</Select>
|
||||
<Input
|
||||
label="Ethernet IP"
|
||||
description="IP Address"
|
||||
error={errors.wifiSsid?.message}
|
||||
disabled={!ethEnabled}
|
||||
{...register("ethConfig.ip")}
|
||||
/>
|
||||
<Input
|
||||
label="Ethernet Gateway"
|
||||
description="Default Gatewat"
|
||||
error={errors.wifiSsid?.message}
|
||||
disabled={!ethEnabled}
|
||||
{...register("ethConfig.gateway")}
|
||||
/>
|
||||
<Input
|
||||
label="Ethernet Subnet"
|
||||
description="Subnet Mask"
|
||||
error={errors.wifiSsid?.message}
|
||||
disabled={!ethEnabled}
|
||||
{...register("ethConfig.subnet")}
|
||||
/>
|
||||
<Input
|
||||
label="Ethernet DNS"
|
||||
description="DNS Server"
|
||||
error={errors.wifiSsid?.message}
|
||||
disabled={!ethEnabled}
|
||||
{...register("ethConfig.dns")}
|
||||
/>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
import type React from "react";
|
||||
import { useEffect } from "react";
|
||||
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { Controller, useForm, useWatch } from "react-hook-form";
|
||||
import { toast } from "react-hot-toast";
|
||||
|
||||
import { FormSection } from "@app/components/form/FormSection.js";
|
||||
import { Input } from "@app/components/form/Input.js";
|
||||
import { Toggle } from "@app/components/form/Toggle.js";
|
||||
import { PositionValidation } from "@app/validation/config/position.js";
|
||||
import { Form } from "@components/form/Form";
|
||||
import { useDevice } from "@core/providers/useDevice.js";
|
||||
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
|
||||
export const Position = (): JSX.Element => {
|
||||
const { config, connection } = useDevice();
|
||||
@@ -24,18 +26,52 @@ export const Position = (): JSX.Element => {
|
||||
resolver: classValidatorResolver(PositionValidation),
|
||||
});
|
||||
|
||||
const fixedPositionEnabled = useWatch({
|
||||
control,
|
||||
name: "fixedPosition",
|
||||
defaultValue: false,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
reset(config.position);
|
||||
}, [reset, config.position]);
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
const { fixedAlt, fixedLat, fixedLng, ...rest } = data;
|
||||
|
||||
if (connection) {
|
||||
void toast.promise(
|
||||
connection.sendPacket(
|
||||
Protobuf.Position.toBinary(
|
||||
Protobuf.Position.create({
|
||||
altitude: fixedAlt,
|
||||
latitudeI: fixedLat * 1e7,
|
||||
longitudeI: fixedLng * 1e7,
|
||||
})
|
||||
),
|
||||
Protobuf.PortNum.POSITION_APP,
|
||||
undefined,
|
||||
true,
|
||||
undefined,
|
||||
true,
|
||||
false,
|
||||
async () => {
|
||||
reset({ ...data });
|
||||
await Promise.resolve();
|
||||
}
|
||||
),
|
||||
{
|
||||
loading: "Saving...",
|
||||
success: "Saved Channel",
|
||||
error: "No response received",
|
||||
}
|
||||
);
|
||||
void toast.promise(
|
||||
connection.setConfig(
|
||||
{
|
||||
payloadVariant: {
|
||||
oneofKind: "position",
|
||||
position: data,
|
||||
position: rest,
|
||||
},
|
||||
},
|
||||
async () => {
|
||||
@@ -92,6 +128,32 @@ export const Position = (): JSX.Element => {
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<FormSection title="Fixed Position">
|
||||
<Input
|
||||
suffix="m"
|
||||
label="Altitude"
|
||||
type="number"
|
||||
error={errors.fixedAlt?.message}
|
||||
disabled={!fixedPositionEnabled}
|
||||
{...register("fixedAlt", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
suffix="°"
|
||||
label="Latitude"
|
||||
type="number"
|
||||
error={errors.fixedLat?.message}
|
||||
disabled={!fixedPositionEnabled}
|
||||
{...register("fixedLat", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
suffix="°"
|
||||
label="Longitude"
|
||||
type="number"
|
||||
error={errors.fixedLng?.message}
|
||||
disabled={!fixedPositionEnabled}
|
||||
{...register("fixedLng", { valueAsNumber: true })}
|
||||
/>
|
||||
</FormSection>
|
||||
<Controller
|
||||
name="gpsEnabled"
|
||||
control={control}
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { toast } from "react-hot-toast";
|
||||
|
||||
import { FormSection } from "@app/components/form/FormSection.js";
|
||||
import { Input } from "@app/components/form/Input.js";
|
||||
import { Toggle } from "@app/components/form/Toggle.js";
|
||||
import { PowerValidation } from "@app/validation/config/power.js";
|
||||
@@ -87,38 +88,40 @@ export const Power = (): JSX.Element => {
|
||||
error={errors.adcMultiplierOverride?.message}
|
||||
{...register("adcMultiplierOverride", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Minimum Wake Time"
|
||||
description="Minimum amount of time the device will stay awake for after receiving a packet"
|
||||
suffix="Seconds"
|
||||
type="number"
|
||||
error={errors.minWakeSecs?.message}
|
||||
{...register("minWakeSecs", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Mesh SDS Timeout"
|
||||
description="The device will enter super deep sleep after this time"
|
||||
suffix="Seconds"
|
||||
type="number"
|
||||
error={errors.meshSdsTimeoutSecs?.message}
|
||||
{...register("meshSdsTimeoutSecs", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Super Deep Sleep Duration"
|
||||
description="How long the device will be in super deep sleep for"
|
||||
suffix="Seconds"
|
||||
type="number"
|
||||
error={errors.sdsSecs?.message}
|
||||
{...register("sdsSecs", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Light Sleep Duration"
|
||||
description="How long the device will be in light sleep for"
|
||||
suffix="Seconds"
|
||||
type="number"
|
||||
error={errors.lsSecs?.message}
|
||||
{...register("lsSecs", { valueAsNumber: true })}
|
||||
/>
|
||||
<FormSection title="Sleep Settings">
|
||||
<Input
|
||||
label="Minimum Wake Time"
|
||||
description="Minimum amount of time the device will stay awake for after receiving a packet"
|
||||
suffix="Seconds"
|
||||
type="number"
|
||||
error={errors.minWakeSecs?.message}
|
||||
{...register("minWakeSecs", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Mesh SDS Timeout"
|
||||
description="The device will enter super deep sleep after this time"
|
||||
suffix="Seconds"
|
||||
type="number"
|
||||
error={errors.meshSdsTimeoutSecs?.message}
|
||||
{...register("meshSdsTimeoutSecs", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Super Deep Sleep Duration"
|
||||
description="How long the device will be in super deep sleep for"
|
||||
suffix="Seconds"
|
||||
type="number"
|
||||
error={errors.sdsSecs?.message}
|
||||
{...register("sdsSecs", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Light Sleep Duration"
|
||||
description="How long the device will be in light sleep for"
|
||||
suffix="Seconds"
|
||||
type="number"
|
||||
error={errors.lsSecs?.message}
|
||||
{...register("lsSecs", { valueAsNumber: true })}
|
||||
/>
|
||||
</FormSection>
|
||||
<Input
|
||||
label="No Connection Bluetooth Disabled"
|
||||
description="If the device does not revieve a bluetooth connection, the BLE radio will be disabled after this long"
|
||||
|
||||
Reference in New Issue
Block a user