Overhaul (#83)
* WIP Layout Refactor * New Connection Dialog * WIP form overhaul * Fix remaining config pages
This commit is contained in:
Sacha Weatherstone
@@ -1,30 +1,12 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm, useWatch } from "react-hook-form";
|
||||
import { Input } from "@components/form/Input.js";
|
||||
import { Select } from "@components/form/Select.js";
|
||||
import { Toggle } from "@components/form/Toggle.js";
|
||||
import { BluetoothValidation } from "@app/validation/config/bluetooth.js";
|
||||
import { Form } from "@components/form/Form";
|
||||
import { useDevice } from "@core/providers/useDevice.js";
|
||||
import { renderOptions } from "@core/utils/selectEnumOptions.js";
|
||||
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
|
||||
import type { BluetoothValidation } from "@app/validation/config/bluetooth.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
import { DynamicForm } from "@app/components/DynamicForm.js";
|
||||
|
||||
export const Bluetooth = (): JSX.Element => {
|
||||
const { config, setWorkingConfig } = useDevice();
|
||||
|
||||
const { register, handleSubmit, control, reset } =
|
||||
useForm<BluetoothValidation>({
|
||||
mode: "onChange",
|
||||
defaultValues: config.bluetooth,
|
||||
resolver: classValidatorResolver(BluetoothValidation)
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
reset(config.bluetooth);
|
||||
}, [reset, config.bluetooth]);
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
const onSubmit = (data: BluetoothValidation) => {
|
||||
setWorkingConfig(
|
||||
new Protobuf.Config({
|
||||
payloadVariant: {
|
||||
@@ -33,47 +15,56 @@ export const Bluetooth = (): JSX.Element => {
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
const pairingMode = useWatch({
|
||||
control,
|
||||
name: "mode",
|
||||
defaultValue: Protobuf.Config_BluetoothConfig_PairingMode.RANDOM_PIN
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={onSubmit}>
|
||||
<Controller
|
||||
name="enabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Enabled"
|
||||
description="Enable or disable Bluetooth"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Select
|
||||
label="Pairing mode"
|
||||
description="Pin selection behaviour."
|
||||
{...register("mode", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.Config_BluetoothConfig_PairingMode)}
|
||||
</Select>
|
||||
|
||||
<Input
|
||||
disabled={
|
||||
pairingMode !== Protobuf.Config_BluetoothConfig_PairingMode.FIXED_PIN
|
||||
<DynamicForm<BluetoothValidation>
|
||||
onSubmit={onSubmit}
|
||||
defaultValues={config.bluetooth}
|
||||
fieldGroups={[
|
||||
{
|
||||
label: "Bluetooth Settings",
|
||||
description: "Settings for the Bluetooth module",
|
||||
fields: [
|
||||
{
|
||||
type: "toggle",
|
||||
name: "enabled",
|
||||
label: "Enabled",
|
||||
description: "Enable or disable Bluetooth"
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "mode",
|
||||
label: "Pairing mode",
|
||||
description: "Pin selection behaviour.",
|
||||
enumValue: Protobuf.Config_BluetoothConfig_PairingMode,
|
||||
formatEnumName: true,
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "fixedPin",
|
||||
label: "Pin",
|
||||
description: "Pin to use when pairing",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "mode",
|
||||
selector:
|
||||
Protobuf.Config_BluetoothConfig_PairingMode.FIXED_PIN,
|
||||
invert: true
|
||||
},
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
label="Pin"
|
||||
description="Pin to use when pairing"
|
||||
type="number"
|
||||
{...register("fixedPin", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
</Form>
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,28 +1,12 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { Input } from "@components/form/Input.js";
|
||||
import { Select } from "@components/form/Select.js";
|
||||
import { Toggle } from "@components/form/Toggle.js";
|
||||
import { DeviceValidation } from "@app/validation/config/device.js";
|
||||
import { Form } from "@components/form/Form";
|
||||
import { useDevice } from "@core/providers/useDevice.js";
|
||||
import { renderOptions } from "@core/utils/selectEnumOptions.js";
|
||||
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
|
||||
import type { DeviceValidation } from "@app/validation/config/device.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
import { DynamicForm } from "@app/components/DynamicForm.js";
|
||||
|
||||
export const Device = (): JSX.Element => {
|
||||
const { config, setWorkingConfig } = useDevice();
|
||||
const { register, handleSubmit, control, reset } = useForm<DeviceValidation>({
|
||||
mode: "onChange",
|
||||
defaultValues: config.device,
|
||||
resolver: classValidatorResolver(DeviceValidation)
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
reset(config.device);
|
||||
}, [reset, config.device]);
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
const onSubmit = (data: DeviceValidation) => {
|
||||
setWorkingConfig(
|
||||
new Protobuf.Config({
|
||||
payloadVariant: {
|
||||
@@ -31,53 +15,68 @@ export const Device = (): JSX.Element => {
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={onSubmit}>
|
||||
<Select
|
||||
label="Role"
|
||||
description="What role the device performs on the mesh"
|
||||
{...register("role", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.Config_DeviceConfig_Role)}
|
||||
</Select>
|
||||
<Controller
|
||||
name="serialEnabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Serial Output Enabled"
|
||||
description="Disable the device's serial console"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="debugLogEnabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Enabled Debug Log"
|
||||
description="Output debugging information to the device's serial port (auto disables when serial client is connected)"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Input
|
||||
label="Button Pin"
|
||||
description="Button pin override"
|
||||
type="number"
|
||||
{...register("buttonGpio", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Buzzer Pin"
|
||||
description="Buzzer pin override"
|
||||
type="number"
|
||||
{...register("buzzerGpio", { valueAsNumber: true })}
|
||||
/>
|
||||
</Form>
|
||||
<DynamicForm<DeviceValidation>
|
||||
onSubmit={onSubmit}
|
||||
defaultValues={config.device}
|
||||
fieldGroups={[
|
||||
{
|
||||
label: "Device Settings",
|
||||
description: "Settings for the device",
|
||||
fields: [
|
||||
{
|
||||
type: "select",
|
||||
name: "role",
|
||||
label: "Role",
|
||||
description: "What role the device performs on the mesh",
|
||||
enumValue: Protobuf.Config_DeviceConfig_Role,
|
||||
formatEnumName: true
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "serialEnabled",
|
||||
label: "Serial Output Enabled",
|
||||
description: "Disable the device's serial console"
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "debugLogEnabled",
|
||||
label: "Enabled Debug Log",
|
||||
description:
|
||||
"Output debugging information to the device's serial port (auto disables when serial client is connected)"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "buttonGpio",
|
||||
label: "Button Pin",
|
||||
description: "Button pin override"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "buzzerGpio",
|
||||
label: "Buzzer Pin",
|
||||
description: "Buzzer pin override"
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "rebroadcastMode",
|
||||
label: "Rebroadcast Mode",
|
||||
description: "How to handle rebroadcasting",
|
||||
enumValue: Protobuf.Config_DeviceConfig_RebroadcastMode,
|
||||
formatEnumName: true
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "nodeInfoBroadcastSecs",
|
||||
label: "Node Info Broadcast Interval",
|
||||
description: "How often to broadcast node info",
|
||||
suffix: "Seconds"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,30 +1,12 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { Input } from "@components/form/Input.js";
|
||||
import { Select } from "@components/form/Select.js";
|
||||
import { Toggle } from "@components/form/Toggle.js";
|
||||
import { DisplayValidation } from "@app/validation/config/display.js";
|
||||
import { Form } from "@components/form/Form";
|
||||
import { useDevice } from "@core/providers/useDevice.js";
|
||||
import { renderOptions } from "@core/utils/selectEnumOptions.js";
|
||||
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
|
||||
import type { DisplayValidation } from "@app/validation/config/display.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
import { DynamicForm } from "@app/components/DynamicForm.js";
|
||||
|
||||
export const Display = (): JSX.Element => {
|
||||
const { config, setWorkingConfig } = useDevice();
|
||||
const { register, handleSubmit, reset, control } = useForm<DisplayValidation>(
|
||||
{
|
||||
mode: "onChange",
|
||||
defaultValues: config.display,
|
||||
resolver: classValidatorResolver(DisplayValidation)
|
||||
}
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
reset(config.display);
|
||||
}, [reset, config.display]);
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
const onSubmit = (data: DisplayValidation) => {
|
||||
setWorkingConfig(
|
||||
new Protobuf.Config({
|
||||
payloadVariant: {
|
||||
@@ -33,88 +15,80 @@ export const Display = (): JSX.Element => {
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={onSubmit}>
|
||||
<Input
|
||||
label="Screen Timeout"
|
||||
description="Turn off the display after this long"
|
||||
suffix="Seconds"
|
||||
type="number"
|
||||
{...register("screenOnSecs", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Carousel Delay"
|
||||
description="How fast to cycle through windows"
|
||||
suffix="Seconds"
|
||||
type="number"
|
||||
{...register("autoScreenCarouselSecs", { valueAsNumber: true })}
|
||||
/>
|
||||
<Select
|
||||
label="GPS Display Units"
|
||||
description="Coordinate display format"
|
||||
{...register("gpsFormat", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.Config_DisplayConfig_GpsCoordinateFormat)}
|
||||
</Select>
|
||||
<Controller
|
||||
name="compassNorthTop"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Compass North Top"
|
||||
description="Fix north to the top of compass"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="flipScreen"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Flip Screen"
|
||||
description="Flip display 180 degrees"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Select
|
||||
label="Display Units"
|
||||
description="Display metric or imperial units"
|
||||
{...register("units", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.Config_DisplayConfig_DisplayUnits)}
|
||||
</Select>
|
||||
<Select
|
||||
label="OLED Type"
|
||||
description="Type of OLED screen attached to the device"
|
||||
{...register("oled", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.Config_DisplayConfig_OledType)}
|
||||
</Select>
|
||||
<Select
|
||||
label="Display Mode"
|
||||
description="Screen layout variant"
|
||||
{...register("displaymode", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.Config_DisplayConfig_DisplayMode)}
|
||||
</Select>
|
||||
<Controller
|
||||
name="headingBold"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Bold Heading"
|
||||
description="Bolden the heading text"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Form>
|
||||
<DynamicForm<DisplayValidation>
|
||||
onSubmit={onSubmit}
|
||||
defaultValues={config.display}
|
||||
fieldGroups={[
|
||||
{
|
||||
label: "Display Settings",
|
||||
description: "Settings for the device display",
|
||||
fields: [
|
||||
{
|
||||
type: "number",
|
||||
name: "screenOnSecs",
|
||||
label: "Screen Timeout",
|
||||
description: "Turn off the display after this long"
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "gpsFormat",
|
||||
label: "GPS Display Units",
|
||||
description: "Coordinate display format",
|
||||
enumValue: Protobuf.Config_DisplayConfig_GpsCoordinateFormat
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "autoScreenCarouselSecs",
|
||||
label: "Carousel Delay",
|
||||
description: "How fast to cycle through windows"
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "compassNorthTop",
|
||||
label: "Compass North Top",
|
||||
description: "Fix north to the top of compass"
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "flipScreen",
|
||||
label: "Flip Screen",
|
||||
description: "Flip display 180 degrees"
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "units",
|
||||
label: "Display Units",
|
||||
description: "Display metric or imperial units",
|
||||
enumValue: Protobuf.Config_DisplayConfig_DisplayUnits,
|
||||
formatEnumName: true
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "oled",
|
||||
label: "OLED Type",
|
||||
description: "Type of OLED screen attached to the device",
|
||||
enumValue: Protobuf.Config_DisplayConfig_OledType
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "displaymode",
|
||||
label: "Display Mode",
|
||||
description: "Screen layout variant",
|
||||
enumValue: Protobuf.Config_DisplayConfig_DisplayMode,
|
||||
formatEnumName: true
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "headingBold",
|
||||
label: "Bold Heading",
|
||||
description: "Bolden the heading text"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,36 +1,12 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm, useWatch } from "react-hook-form";
|
||||
import { FormSection } from "@components/form/FormSection.js";
|
||||
import { Input } from "@components/form/Input.js";
|
||||
import { Select } from "@components/form/Select.js";
|
||||
import { Toggle } from "@components/form/Toggle.js";
|
||||
import { LoRaValidation } from "@app/validation/config/lora.js";
|
||||
import { Form } from "@components/form/Form";
|
||||
import { useDevice } from "@core/providers/useDevice.js";
|
||||
import { renderOptions } from "@core/utils/selectEnumOptions.js";
|
||||
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
|
||||
import type { LoRaValidation } from "@app/validation/config/lora.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
import { DynamicForm } from "@app/components/DynamicForm.js";
|
||||
|
||||
export const LoRa = (): JSX.Element => {
|
||||
const { config, setWorkingConfig } = useDevice();
|
||||
|
||||
const { register, handleSubmit, control, reset } = useForm<LoRaValidation>({
|
||||
mode: "onChange",
|
||||
defaultValues: config.lora,
|
||||
resolver: classValidatorResolver(LoRaValidation)
|
||||
});
|
||||
|
||||
const usePreset = useWatch({
|
||||
control,
|
||||
name: "usePreset",
|
||||
defaultValue: true
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
reset(config.lora);
|
||||
}, [reset, config.lora]);
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
const onSubmit = (data: LoRaValidation) => {
|
||||
setWorkingConfig(
|
||||
new Protobuf.Config({
|
||||
payloadVariant: {
|
||||
@@ -39,121 +15,148 @@ export const LoRa = (): JSX.Element => {
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={onSubmit}>
|
||||
<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}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{usePreset ? (
|
||||
<Select
|
||||
label="Preset"
|
||||
description="Modem preset to use"
|
||||
{...register("modemPreset", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
|
||||
</Select>
|
||||
) : (
|
||||
<>
|
||||
<Input
|
||||
label="Bandwidth"
|
||||
description="Channel bandwidth in MHz"
|
||||
type="number"
|
||||
suffix="MHz"
|
||||
{...register("bandwidth", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
<Input
|
||||
label="Spread Factor"
|
||||
description="Indicates the number of chirps per symbol"
|
||||
type="number"
|
||||
suffix="CPS"
|
||||
{...register("spreadFactor", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
<Input
|
||||
label="Coding Rate"
|
||||
description="The denominator of the coding rate"
|
||||
type="number"
|
||||
{...register("codingRate", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</FormSection>
|
||||
<FormSection title="Radio Settings">
|
||||
<Controller
|
||||
name="txEnabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Transmit Enabled"
|
||||
description="Enable/Disable transmit (TX) from the LoRa radio"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Select
|
||||
label="Region"
|
||||
description="Sets the region for your node"
|
||||
{...register("region", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
|
||||
</Select>
|
||||
<Input
|
||||
label="Transmit Power"
|
||||
description="Max transmit power in dBm"
|
||||
type="number"
|
||||
{...register("txPower", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Channel Number"
|
||||
description="LoRa channel number"
|
||||
type="number"
|
||||
{...register("channelNum", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Frequency Offset"
|
||||
description="Frequency offset to correct for crystal calibration errors"
|
||||
suffix="Hz"
|
||||
type="number"
|
||||
{...register("frequencyOffset", { valueAsNumber: true })}
|
||||
/>
|
||||
<Controller
|
||||
name="overrideDutyCycle"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Override Duty Cycle"
|
||||
description="Description"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormSection>
|
||||
<Input
|
||||
label="Hop Limit"
|
||||
description="Maximum number of hops"
|
||||
suffix="Hops"
|
||||
type="number"
|
||||
{...register("hopLimit", { valueAsNumber: true })}
|
||||
/>
|
||||
</Form>
|
||||
<DynamicForm<LoRaValidation>
|
||||
onSubmit={onSubmit}
|
||||
defaultValues={config.lora}
|
||||
fieldGroups={[
|
||||
{
|
||||
label: "Mesh Settings",
|
||||
description: "Settings for the LoRa mesh",
|
||||
fields: [
|
||||
{
|
||||
type: "select",
|
||||
name: "region",
|
||||
label: "Region",
|
||||
description: "Sets the region for your node",
|
||||
enumValue: Protobuf.Config_LoRaConfig_RegionCode
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "hopLimit",
|
||||
label: "Hop Limit",
|
||||
description: "Maximum number of hops"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "channelNum",
|
||||
label: "Channel Number",
|
||||
description: "LoRa channel number"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "Waveform Settings",
|
||||
description: "Settings for the LoRa waveform",
|
||||
fields: [
|
||||
{
|
||||
type: "toggle",
|
||||
name: "usePreset",
|
||||
label: "Use Preset",
|
||||
description: "Use one of the predefined modem presets"
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "modemPreset",
|
||||
label: "Modem Preset",
|
||||
description: "Modem preset to use",
|
||||
enumValue: Protobuf.Config_LoRaConfig_ModemPreset,
|
||||
formatEnumName: true,
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "usePreset"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "bandwidth",
|
||||
label: "Bandwidth",
|
||||
description: "Channel bandwidth in MHz",
|
||||
suffix: "MHz",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "usePreset",
|
||||
invert: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "spreadFactor",
|
||||
label: "Spreading Factor",
|
||||
description: "Indicates the number of chirps per symbol",
|
||||
suffix: "CPS",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "usePreset",
|
||||
invert: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "codingRate",
|
||||
label: "Coding Rate",
|
||||
description: "The denominator of the coding rate",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "usePreset",
|
||||
invert: true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "Radio Settings",
|
||||
description: "Settings for the LoRa radio",
|
||||
fields: [
|
||||
{
|
||||
type: "toggle",
|
||||
name: "txEnabled",
|
||||
label: "Tramsmit Enabled",
|
||||
description: "Enable/Disable transmit (TX) from the LoRa radio"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "txPower",
|
||||
label: "Transmit Power",
|
||||
description: "Max transmit power",
|
||||
suffix: "dBm"
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "overrideDutyCycle",
|
||||
label: "Override Duty Cycle",
|
||||
description: "Override Duty Cycle"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "frequencyOffset",
|
||||
label: "Frequency Offset",
|
||||
description:
|
||||
"Frequency offset to correct for crystal calibration errors",
|
||||
suffix: "Hz"
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "sx126xRxBoostedGain",
|
||||
label: "Boosted RX Gain",
|
||||
description: "Boosted RX gain"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "overrideFrequency",
|
||||
label: "Override Frequency",
|
||||
description: "Override frequency",
|
||||
suffix: "Hz"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,51 +1,12 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm, useWatch } from "react-hook-form";
|
||||
import { FormSection } from "@components/form/FormSection.js";
|
||||
import { Input } from "@components/form/Input.js";
|
||||
import { IPInput } from "@components/form/IPInput.js";
|
||||
import { Select } from "@components/form/Select.js";
|
||||
import { Toggle } from "@components/form/Toggle.js";
|
||||
import { renderOptions } from "@core/utils/selectEnumOptions.js";
|
||||
import { NetworkValidation } from "@app/validation/config/network.js";
|
||||
import { Form } from "@components/form/Form";
|
||||
import { useDevice } from "@core/providers/useDevice.js";
|
||||
import { ErrorMessage } from "@hookform/error-message";
|
||||
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
|
||||
import type { NetworkValidation } from "@app/validation/config/network.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
import { DynamicForm } from "@app/components/DynamicForm.js";
|
||||
|
||||
export const Network = (): JSX.Element => {
|
||||
const { config, setWorkingConfig } = useDevice();
|
||||
const { register, handleSubmit, control, reset } = useForm<NetworkValidation>(
|
||||
{
|
||||
mode: "onChange",
|
||||
defaultValues: config.network,
|
||||
resolver: classValidatorResolver(NetworkValidation)
|
||||
}
|
||||
);
|
||||
|
||||
const wifiEnabled = useWatch({
|
||||
control,
|
||||
name: "wifiEnabled",
|
||||
defaultValue: false
|
||||
});
|
||||
|
||||
const ethEnabled = useWatch({
|
||||
control,
|
||||
name: "ethEnabled",
|
||||
defaultValue: false
|
||||
});
|
||||
|
||||
const ethMode = useWatch({
|
||||
control,
|
||||
name: "addressMode",
|
||||
defaultValue: Protobuf.Config_NetworkConfig_AddressMode.DHCP
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
reset(config.network);
|
||||
}, [reset, config.network]);
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
const onSubmit = (data: NetworkValidation) => {
|
||||
setWorkingConfig(
|
||||
new Protobuf.Config({
|
||||
payloadVariant: {
|
||||
@@ -54,97 +15,143 @@ export const Network = (): JSX.Element => {
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={onSubmit}>
|
||||
<FormSection title="WiFi Config">
|
||||
<Controller
|
||||
name="wifiEnabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Enabled"
|
||||
description="Enable or disable the WiFi radio"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Input
|
||||
label="SSID"
|
||||
description="Network name"
|
||||
disabled={!wifiEnabled}
|
||||
{...register("wifiSsid", { disabled: !wifiEnabled })}
|
||||
/>
|
||||
<Input
|
||||
label="PSK"
|
||||
type="password"
|
||||
description="Network password"
|
||||
disabled={!wifiEnabled}
|
||||
{...register("wifiPsk", { disabled: !wifiEnabled })}
|
||||
/>
|
||||
</FormSection>
|
||||
<FormSection title="Ethernet Config">
|
||||
<Controller
|
||||
name="ethEnabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Enabled"
|
||||
description="Enable or disbale the Ethernet port"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormSection>
|
||||
<FormSection title="IP Config">
|
||||
<Select
|
||||
label="Address Mode"
|
||||
description="Address assignment selection"
|
||||
disabled={!(ethEnabled || wifiEnabled)}
|
||||
{...register("addressMode", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
>
|
||||
{renderOptions(Protobuf.Config_NetworkConfig_AddressMode)}
|
||||
</Select>
|
||||
{ethMode === Protobuf.Config_NetworkConfig_AddressMode.STATIC && (
|
||||
<>
|
||||
<IPInput
|
||||
label="IP"
|
||||
description="IP Address"
|
||||
{...register("ipv4Config.ip", { valueAsNumber: true })}
|
||||
/>
|
||||
<IPInput
|
||||
label="Gateway"
|
||||
description="Default Gateway"
|
||||
{...register("ipv4Config.gateway", { valueAsNumber: true })}
|
||||
/>
|
||||
<IPInput
|
||||
label="Subnet"
|
||||
description="Subnet Mask"
|
||||
{...register("ipv4Config.subnet", { valueAsNumber: true })}
|
||||
/>
|
||||
<IPInput
|
||||
label="DNS"
|
||||
description="DNS Server"
|
||||
{...register("ipv4Config.dns", { valueAsNumber: true })}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</FormSection>
|
||||
<Input
|
||||
label="NTP Server"
|
||||
description="NTP server for time synchronization"
|
||||
{...register("ntpServer")}
|
||||
/>
|
||||
<Input
|
||||
label="Rsyslog Server"
|
||||
description="Rsyslog server for external logging"
|
||||
{...register("rsyslogServer")}
|
||||
/>
|
||||
</Form>
|
||||
<DynamicForm<NetworkValidation>
|
||||
onSubmit={onSubmit}
|
||||
defaultValues={config.network}
|
||||
fieldGroups={[
|
||||
{
|
||||
label: "WiFi Config",
|
||||
description: "WiFi radio configuration",
|
||||
fields: [
|
||||
{
|
||||
type: "toggle",
|
||||
name: "wifiEnabled",
|
||||
label: "Enabled",
|
||||
description: "Enable or disable the WiFi radio"
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "wifiSsid",
|
||||
label: "SSID",
|
||||
description: "Network name",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "wifiEnabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "wifiPsk",
|
||||
label: "PSK",
|
||||
description: "Network password",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "wifiEnabled"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "Ethernet Config",
|
||||
description: "Ethernet port configuration",
|
||||
fields: [
|
||||
{
|
||||
type: "toggle",
|
||||
name: "ethEnabled",
|
||||
label: "Enabled",
|
||||
description: "Enable or disable the Ethernet port"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "IP Config",
|
||||
description: "IP configuration",
|
||||
fields: [
|
||||
{
|
||||
type: "select",
|
||||
name: "addressMode",
|
||||
label: "Address Mode",
|
||||
description: "Address assignment selection",
|
||||
enumValue: Protobuf.Config_NetworkConfig_AddressMode
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "ipv4Config.ip",
|
||||
label: "IP",
|
||||
description: "IP Address",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "addressMode",
|
||||
selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "ipv4Config.gateway",
|
||||
label: "Gateway",
|
||||
description: "Default Gateway",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "addressMode",
|
||||
selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "ipv4Config.subnet",
|
||||
label: "Subnet",
|
||||
description: "Subnet Mask",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "addressMode",
|
||||
selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "ipv4Config.dns",
|
||||
label: "DNS",
|
||||
description: "DNS Server",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "addressMode",
|
||||
selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "NTP Config",
|
||||
description: "NTP configuration",
|
||||
fields: [
|
||||
{
|
||||
type: "text",
|
||||
name: "ntpServer",
|
||||
label: "NTP Server"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "Rsyslog Config",
|
||||
description: "Rsyslog configuration",
|
||||
fields: [
|
||||
{
|
||||
type: "text",
|
||||
name: "rsyslogServer",
|
||||
label: "Rsyslog Server"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,230 +1,97 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm, useWatch } from "react-hook-form";
|
||||
import { BitwiseSelect } from "@components/form/BitwiseSelect.js";
|
||||
import { FormSection } from "@components/form/FormSection.js";
|
||||
import { Input } from "@components/form/Input.js";
|
||||
import { Toggle } from "@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 type { PositionValidation } from "@app/validation/config/position.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
import { DynamicForm } from "@app/components/DynamicForm.js";
|
||||
|
||||
export const Position = (): JSX.Element => {
|
||||
const { config, nodes, hardware, setWorkingConfig } = useDevice();
|
||||
|
||||
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
|
||||
|
||||
const { register, handleSubmit, reset, control } =
|
||||
useForm<PositionValidation>({
|
||||
mode: "onChange",
|
||||
defaultValues: {
|
||||
fixedAlt: myNode?.data.position?.altitude,
|
||||
fixedLat: (myNode?.data.position?.latitudeI ?? 0) / 1e7,
|
||||
fixedLng: (myNode?.data.position?.longitudeI ?? 0) / 1e7,
|
||||
...config.position
|
||||
},
|
||||
resolver: classValidatorResolver(PositionValidation)
|
||||
});
|
||||
|
||||
const fixedPositionEnabled = useWatch({
|
||||
control,
|
||||
name: "fixedPosition",
|
||||
defaultValue: false
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
reset({
|
||||
fixedAlt: myNode?.data.position?.altitude,
|
||||
fixedLat: (myNode?.data.position?.latitudeI ?? 0) / 1e7,
|
||||
fixedLng: (myNode?.data.position?.longitudeI ?? 0) / 1e7,
|
||||
...config.position
|
||||
});
|
||||
}, [reset, config.position, myNode?.data.position]);
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
const { fixedAlt, fixedLat, fixedLng, ...rest } = data;
|
||||
|
||||
const configHasChanged = !Protobuf.Config_PositionConfig.equals(
|
||||
config.position,
|
||||
new Protobuf.Config_PositionConfig(rest)
|
||||
);
|
||||
|
||||
const onSubmit = (data: PositionValidation) => {
|
||||
setWorkingConfig(
|
||||
new Protobuf.Config({
|
||||
payloadVariant: {
|
||||
case: "position",
|
||||
value: rest
|
||||
value: data
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
// if (connection) {
|
||||
// void toast.promise(
|
||||
// connection
|
||||
// .setPosition(
|
||||
// new Protobuf.Position({
|
||||
// altitude: fixedAlt,
|
||||
// latitudeI: fixedLat * 1e7,
|
||||
// longitudeI: fixedLng * 1e7
|
||||
// })
|
||||
// )
|
||||
// .then(() => reset({ ...data })),
|
||||
// {
|
||||
// loading: "Saving...",
|
||||
// success: "Saved Position Config, Restarting Node",
|
||||
// error: "No response received"
|
||||
// }
|
||||
// );
|
||||
// if (configHasChanged) {
|
||||
// void toast.promise(
|
||||
// connection
|
||||
// .setConfig(
|
||||
// new Protobuf.Config({
|
||||
// payloadVariant: {
|
||||
// case: "position",
|
||||
// value: rest
|
||||
// }
|
||||
// })
|
||||
// )
|
||||
// .then(() =>
|
||||
// setConfig(
|
||||
// new Protobuf.Config({
|
||||
// payloadVariant: {
|
||||
// case: "position",
|
||||
// value: rest
|
||||
// }
|
||||
// })
|
||||
// )
|
||||
// ),
|
||||
// {
|
||||
// loading: "Saving...",
|
||||
// success: "Saved Position Config, Restarting Node",
|
||||
// error: "No response received"
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={onSubmit}>
|
||||
<Controller
|
||||
name="gpsEnabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="GPS Enabled"
|
||||
description="Enable the internal GPS module"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="positionBroadcastSmartEnabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Enable Smart Position"
|
||||
description="Only send position when there has been a meaningful change in location"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="positionFlags"
|
||||
control={control}
|
||||
render={({ field, fieldState }): JSX.Element => {
|
||||
const { value, onChange } = field;
|
||||
const { error } = fieldState;
|
||||
|
||||
return (
|
||||
<BitwiseSelect
|
||||
label="Position Flags"
|
||||
description="Configuration options for POSITION messages"
|
||||
selected={value}
|
||||
decodeEnun={Protobuf.Config_PositionConfig_PositionFlags}
|
||||
onChange={onChange}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<FormSection title="Fixed Position">
|
||||
<Controller
|
||||
name="fixedPosition"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Enabled"
|
||||
description="Don't report GPS position, but a manually-specified one"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{fixedPositionEnabled && (
|
||||
<>
|
||||
<Input
|
||||
suffix="m"
|
||||
label="Altitude"
|
||||
type="number"
|
||||
disabled={!fixedPositionEnabled}
|
||||
{...register("fixedAlt", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
suffix="°"
|
||||
label="Latitude"
|
||||
type="number"
|
||||
disabled={!fixedPositionEnabled}
|
||||
{...register("fixedLat", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
suffix="°"
|
||||
label="Longitude"
|
||||
type="number"
|
||||
disabled={!fixedPositionEnabled}
|
||||
{...register("fixedLng", { valueAsNumber: true })}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</FormSection>
|
||||
<FormSection title="Intervals">
|
||||
<Input
|
||||
suffix="Seconds"
|
||||
label="Broadcast Interval"
|
||||
description="How often your position is sent out over the mesh"
|
||||
type="number"
|
||||
{...register("positionBroadcastSecs", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
suffix="Seconds"
|
||||
label="GPS Update Interval"
|
||||
description="How often a GPS fix should be acquired"
|
||||
type="number"
|
||||
{...register("gpsUpdateInterval", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
suffix="Seconds"
|
||||
label="Fix Attempt Duration"
|
||||
description="How long the device will try to get a fix for"
|
||||
type="number"
|
||||
{...register("gpsAttemptTime", { valueAsNumber: true })}
|
||||
/>
|
||||
</FormSection>
|
||||
<Input
|
||||
label="RX Pin"
|
||||
description="GPS Module RX pin override"
|
||||
type="number"
|
||||
{...register("rxGpio", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="TX Pin"
|
||||
description="GPS Module TX pin override"
|
||||
type="number"
|
||||
{...register("txGpio", { valueAsNumber: true })}
|
||||
/>
|
||||
</Form>
|
||||
<DynamicForm<PositionValidation>
|
||||
onSubmit={onSubmit}
|
||||
defaultValues={config.position}
|
||||
fieldGroups={[
|
||||
{
|
||||
label: "Position settings",
|
||||
description: "Settings for the position module",
|
||||
fields: [
|
||||
{
|
||||
type: "toggle",
|
||||
name: "positionBroadcastSmartEnabled",
|
||||
label: "Enable Smart Position",
|
||||
description:
|
||||
"Only send position when there has been a meaningful change in location"
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "fixedPosition",
|
||||
label: "Fixed Position",
|
||||
description:
|
||||
"Don't report GPS position, but a manually-specified one"
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "gpsEnabled",
|
||||
label: "GPS Enabled",
|
||||
description: "Enable the internal GPS module"
|
||||
},
|
||||
{
|
||||
type: "multiSelect",
|
||||
name: "positionFlags",
|
||||
label: "Position Flags",
|
||||
description: "Configuration options for Position messages",
|
||||
enumValue: Protobuf.Config_PositionConfig_PositionFlags
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "rxGpio",
|
||||
label: "Receive Pin",
|
||||
description: "GPS Module RX pin override"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "txGpio",
|
||||
label: "Transmit Pin",
|
||||
description: "GPS Module TX pin override"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "Intervals",
|
||||
description: "How often to send position updates",
|
||||
fields: [
|
||||
{
|
||||
type: "number",
|
||||
name: "positionBroadcastSecs",
|
||||
label: "Broadcast Interval",
|
||||
description: "How often your position is sent out over the mesh"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "gpsUpdateInterval",
|
||||
label: "GPS Update Interval",
|
||||
description: "How often a GPS fix should be acquired"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "gpsAttemptTime",
|
||||
label: "Fix Attempt Duration",
|
||||
description: "How long the device will try to get a fix for"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,27 +1,12 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { FormSection } from "@components/form/FormSection.js";
|
||||
import { Input } from "@components/form/Input.js";
|
||||
import { Toggle } from "@components/form/Toggle.js";
|
||||
import { PowerValidation } from "@app/validation/config/power.js";
|
||||
import { Form } from "@components/form/Form";
|
||||
import { useDevice } from "@core/providers/useDevice.js";
|
||||
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
|
||||
import type { PowerValidation } from "@app/validation/config/power.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
import { DynamicForm } from "@app/components/DynamicForm.js";
|
||||
|
||||
export const Power = (): JSX.Element => {
|
||||
const { config, setWorkingConfig } = useDevice();
|
||||
const { register, handleSubmit, reset, control } = useForm<PowerValidation>({
|
||||
mode: "onChange",
|
||||
defaultValues: config.power,
|
||||
resolver: classValidatorResolver(PowerValidation)
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
reset(config.power);
|
||||
}, [reset, config.power]);
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
const onSubmit = (data: PowerValidation) => {
|
||||
setWorkingConfig(
|
||||
new Protobuf.Config({
|
||||
payloadVariant: {
|
||||
@@ -30,72 +15,86 @@ export const Power = (): JSX.Element => {
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={onSubmit}>
|
||||
<Input
|
||||
label="Shutdown on battery delay"
|
||||
description="Automatically shutdown node after this long when on battery, 0 for indefinite"
|
||||
suffix="Seconds"
|
||||
type="number"
|
||||
{...register("onBatteryShutdownAfterSecs", { valueAsNumber: true })}
|
||||
/>
|
||||
<Controller
|
||||
name="isPowerSaving"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Enable power saving mode"
|
||||
description="Select if powered from a low-current source (i.e. solar), to minimize power consumption as much as possible."
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Input
|
||||
label="ADC Multiplier Override ratio"
|
||||
description="Used for tweaking battery voltage reading"
|
||||
type="number"
|
||||
{...register("adcMultiplierOverride", { 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"
|
||||
{...register("minWakeSecs", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Mesh SDS Timeout"
|
||||
description="The device will enter super deep sleep after this time"
|
||||
suffix="Seconds"
|
||||
type="number"
|
||||
{...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"
|
||||
{...register("sdsSecs", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Light Sleep Duration"
|
||||
description="How long the device will be in light sleep for"
|
||||
suffix="Seconds"
|
||||
type="number"
|
||||
{...register("lsSecs", { valueAsNumber: true })}
|
||||
/>
|
||||
</FormSection>
|
||||
<Input
|
||||
label="No Connection Bluetooth Disabled"
|
||||
description="If the device does not receive a Bluetooth connection, the BLE radio will be disabled after this long"
|
||||
suffix="Seconds"
|
||||
type="number"
|
||||
{...register("waitBluetoothSecs", { valueAsNumber: true })}
|
||||
/>
|
||||
</Form>
|
||||
<DynamicForm<PowerValidation>
|
||||
onSubmit={onSubmit}
|
||||
defaultValues={config.power}
|
||||
fieldGroups={[
|
||||
{
|
||||
label: "Power Config",
|
||||
description: "Settings for the power module",
|
||||
fields: [
|
||||
{
|
||||
type: "toggle",
|
||||
name: "isPowerSaving",
|
||||
label: "Enable power saving mode",
|
||||
description:
|
||||
"Select if powered from a low-current source (i.e. solar), to minimize power consumption as much as possible."
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "onBatteryShutdownAfterSecs",
|
||||
label: "Shutdown on battery delay",
|
||||
description:
|
||||
"Automatically shutdown node after this long when on battery, 0 for indefinite",
|
||||
suffix: "Seconds"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "adcMultiplierOverride",
|
||||
label: "ADC Multiplier Override ratio",
|
||||
description: "Used for tweaking battery voltage reading"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "waitBluetoothSecs",
|
||||
label: "No Connection Bluetooth Disabled",
|
||||
description:
|
||||
"If the device does not receive a Bluetooth connection, the BLE radio will be disabled after this long",
|
||||
suffix: "Seconds"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "Sleep Settings",
|
||||
description: "Sleep settings for the power module",
|
||||
fields: [
|
||||
{
|
||||
type: "number",
|
||||
name: "meshSdsTimeoutSecs",
|
||||
label: "Mesh SDS Timeout",
|
||||
description:
|
||||
"The device will enter super deep sleep after this time",
|
||||
suffix: "Seconds"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "sdsSecs",
|
||||
label: "Super Deep Sleep Duration",
|
||||
description:
|
||||
"How long the device will be in super deep sleep for",
|
||||
suffix: "Seconds"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "lsSecs",
|
||||
label: "Light Sleep Duration",
|
||||
description: "How long the device will be in light sleep for",
|
||||
suffix: "Seconds"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "minWakeSecs",
|
||||
label: "Minimum Wake Time",
|
||||
description:
|
||||
"Minimum amount of time the device will stay awake for after receiving a packet",
|
||||
suffix: "Seconds"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,105 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { base16 } from "rfc4648";
|
||||
import { Input } from "@components/form/Input.js";
|
||||
import { Select } from "@components/form/Select.js";
|
||||
import { Toggle } from "@components/form/Toggle.js";
|
||||
import { UserValidation } from "@app/validation/config/user.js";
|
||||
import { Form } from "@components/form/Form";
|
||||
import { useDevice } from "@core/providers/useDevice.js";
|
||||
import { renderOptions } from "@core/utils/selectEnumOptions.js";
|
||||
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
|
||||
export const User = (): JSX.Element => {
|
||||
const { hardware, nodes, connection } = useDevice();
|
||||
|
||||
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
|
||||
|
||||
const { register, handleSubmit, reset, control } = useForm<UserValidation>({
|
||||
defaultValues: myNode?.data.user,
|
||||
resolver: classValidatorResolver(UserValidation)
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
reset({
|
||||
longName: myNode?.data.user?.longName,
|
||||
shortName: myNode?.data.user?.shortName,
|
||||
isLicensed: myNode?.data.user?.isLicensed
|
||||
});
|
||||
}, [reset, myNode]);
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
if (connection && myNode?.data.user) {
|
||||
void toast.promise(
|
||||
connection
|
||||
.setOwner(
|
||||
new Protobuf.User({
|
||||
...myNode.data.user,
|
||||
...data
|
||||
})
|
||||
)
|
||||
.then(() => reset({ ...data })),
|
||||
{
|
||||
loading: "Saving...",
|
||||
success: "Saved User, Restarting Node",
|
||||
error: "No response received"
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Form onSubmit={onSubmit}>
|
||||
<Input
|
||||
label="Device Name"
|
||||
description="Personalised name for this device."
|
||||
{...register("longName")}
|
||||
/>
|
||||
<Input
|
||||
label="Short Name"
|
||||
description="Shown on small screens."
|
||||
maxLength={4}
|
||||
{...register("shortName")}
|
||||
/>
|
||||
<Controller
|
||||
name="isLicensed"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Licenced Operator?"
|
||||
description="Remove bandwidth restrictions in certain regions (HAM license required)"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Input
|
||||
label="Mac Address"
|
||||
description="Hardware address for this node."
|
||||
disabled
|
||||
value={
|
||||
base16
|
||||
.stringify(myNode?.data.user?.macaddr ?? [])
|
||||
.match(/.{1,2}/g)
|
||||
?.join(":") ?? ""
|
||||
}
|
||||
/>
|
||||
<Input
|
||||
label="Device ID"
|
||||
disabled
|
||||
description="Preset unique identifier for this device."
|
||||
value={myNode?.data.user?.id}
|
||||
/>
|
||||
<Select
|
||||
label="Hardware"
|
||||
description="Hardware model of this device."
|
||||
disabled
|
||||
value={myNode?.data.user?.hwModel}
|
||||
>
|
||||
{renderOptions(Protobuf.HardwareModel)}
|
||||
</Select>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user