hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Start moduleConfig & general import cleanup

Browse Source
This commit is contained in:
Sacha Weatherstone
2023-01-29 17:36:31 +10:00
parent 6340809ab3
commit e36032045f
84 changed files with 286 additions and 780 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PageComponents/Config/Bluetooth.tsx
+9 -18
View File
@@ -1,12 +1,8 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js";
import { Toggle } from "@app/components/form/Toggle.js";
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";
@@ -17,17 +13,12 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const Bluetooth = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
control,
reset
} = useForm<BluetoothValidation>({
mode: "onChange",
defaultValues: config.bluetooth,
resolver: classValidatorResolver(BluetoothValidation)
});
const { register, handleSubmit, control, reset } =
useForm<BluetoothValidation>({
mode: "onChange",
defaultValues: config.bluetooth,
resolver: classValidatorResolver(BluetoothValidation)
});
useEffect(() => {
reset(config.bluetooth);
src/components/PageComponents/Config/Device.tsx
+4 -16
View File
@@ -1,12 +1,8 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js";
import { Toggle } from "@app/components/form/Toggle.js";
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";
@@ -16,13 +12,7 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const Device = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
control,
reset
} = useForm<DeviceValidation>({
const { register, handleSubmit, control, reset } = useForm<DeviceValidation>({
mode: "onChange",
defaultValues: config.device,
resolver: classValidatorResolver(DeviceValidation)
@@ -80,14 +70,12 @@ export const Device = (): JSX.Element => {
label="Button Pin"
description="Button pin override"
type="number"
error={errors.buttonGpio?.message}
{...register("buttonGpio", { valueAsNumber: true })}
/>
<Input
label="Buzzer Pin"
description="Buzzer pin override"
type="number"
error={errors.buzzerGpio?.message}
{...register("buzzerGpio", { valueAsNumber: true })}
/>
</Form>
src/components/PageComponents/Config/Display.tsx
+10 -18
View File
@@ -1,12 +1,8 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js";
import { Toggle } from "@app/components/form/Toggle.js";
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";
@@ -16,17 +12,13 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const Display = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
control
} = useForm<DisplayValidation>({
mode: "onChange",
defaultValues: config.display,
resolver: classValidatorResolver(DisplayValidation)
});
const { register, handleSubmit, reset, control } = useForm<DisplayValidation>(
{
mode: "onChange",
defaultValues: config.display,
resolver: classValidatorResolver(DisplayValidation)
}
);
useEffect(() => {
reset(config.display);
src/components/PageComponents/Config/LoRa.tsx
+5 -22
View File
@@ -1,13 +1,9 @@
import type React from "react";
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";
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";
@@ -18,13 +14,7 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const LoRa = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
control,
reset
} = useForm<LoRaValidation>({
const { register, handleSubmit, control, reset } = useForm<LoRaValidation>({
mode: "onChange",
defaultValues: config.lora,
resolver: classValidatorResolver(LoRaValidation)
@@ -81,7 +71,6 @@ export const LoRa = (): JSX.Element => {
description="Channel bandwidth in MHz"
type="number"
suffix="MHz"
error={errors.bandwidth?.message}
{...register("bandwidth", {
valueAsNumber: true
})}
@@ -91,7 +80,6 @@ export const LoRa = (): JSX.Element => {
description="Indicates the number of chirps per symbol"
type="number"
suffix="CPS"
error={errors.spreadFactor?.message}
{...register("spreadFactor", {
valueAsNumber: true
})}
@@ -100,7 +88,6 @@ export const LoRa = (): JSX.Element => {
label="Coding Rate"
description="The denominator of the coding rate"
type="number"
error={errors.codingRate?.message}
{...register("codingRate", {
valueAsNumber: true
})}
@@ -132,14 +119,12 @@ export const LoRa = (): JSX.Element => {
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
@@ -147,7 +132,6 @@ export const LoRa = (): JSX.Element => {
description="Frequency offset to correct for crystal calibration errors"
suffix="Hz"
type="number"
error={errors.frequencyOffset?.message}
{...register("frequencyOffset", { valueAsNumber: true })}
/>
<Controller
@@ -168,7 +152,6 @@ export const LoRa = (): JSX.Element => {
description="Maximum number of hops"
suffix="Hops"
type="number"
error={errors.hopLimit?.message}
{...register("hopLimit", { valueAsNumber: true })}
/>
</Form>
src/components/PageComponents/Config/Network.tsx
+13 -43
View File
@@ -1,15 +1,11 @@
import type React from "react";
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 { IPInput } from "@app/components/form/IPInput.js";
import { Select } from "@app/components/form/Select.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { renderOptions } from "@app/core/utils/selectEnumOptions.js";
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";
@@ -19,17 +15,13 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const Network = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
control,
reset
} = useForm<NetworkValidation>({
mode: "onChange",
defaultValues: config.network,
resolver: classValidatorResolver(NetworkValidation)
});
const { register, handleSubmit, control, reset } = useForm<NetworkValidation>(
{
mode: "onChange",
defaultValues: config.network,
resolver: classValidatorResolver(NetworkValidation)
}
);
const wifiEnabled = useWatch({
control,
@@ -66,19 +58,6 @@ export const Network = (): JSX.Element => {
return (
<Form onSubmit={onSubmit}>
<ErrorMessage errors={errors} name="wifiEnabled" />
<ErrorMessage errors={errors} name="wifiMode" />
<ErrorMessage errors={errors} name="wifiSsid" />
<ErrorMessage errors={errors} name="wifiPsk" />
<ErrorMessage errors={errors} name="ntpServer" />
<ErrorMessage errors={errors} name="ethEnabled" />
<ErrorMessage errors={errors} name="addressMode" />
<ErrorMessage errors={errors} name="ethConfig" />
<ErrorMessage errors={errors} name="ip" />
<ErrorMessage errors={errors} name="gateway" />
<ErrorMessage errors={errors} name="subnet" />
<ErrorMessage errors={errors} name="dns" />
<FormSection title="WiFi Config">
<Controller
name="wifiEnabled"
@@ -95,7 +74,6 @@ export const Network = (): JSX.Element => {
<Input
label="SSID"
description="Network name"
error={errors.wifiSsid?.message}
disabled={!wifiEnabled}
{...register("wifiSsid", { disabled: !wifiEnabled })}
/>
@@ -103,7 +81,6 @@ export const Network = (): JSX.Element => {
label="PSK"
type="password"
description="Network password"
error={errors.wifiPsk?.message}
disabled={!wifiEnabled}
{...register("wifiPsk", { disabled: !wifiEnabled })}
/>
@@ -138,26 +115,21 @@ export const Network = (): JSX.Element => {
<IPInput
label="IP"
description="IP Address"
error={errors.ipv4Config?.ip?.message}
{...register("ipv4Config.ip", { valueAsNumber: true })}
/>
<IPInput
label="Gateway"
description="Default Gateway"
error={errors.ipv4Config?.gateway?.message}
{...register("ipv4Config.gateway", { valueAsNumber: true })}
/>
<IPInput
label="Subnet"
description="Subnet Mask"
error={errors.ipv4Config?.subnet?.message}
{...register("ipv4Config.subnet", { valueAsNumber: true })}
/>
<IPInput
label="DNS"
// type="number" //prevent
description="DNS Server"
error={errors.ipv4Config?.dns?.message}
{...register("ipv4Config.dns", { valueAsNumber: true })}
/>
</>
@@ -166,13 +138,11 @@ export const Network = (): JSX.Element => {
<Input
label="NTP Server"
description="NTP server for time synchronization"
error={errors.ntpServer?.message}
{...register("ntpServer")}
/>
<Input
label="Rsyslog Server"
description="Rsyslog server for external logging"
error={errors.rsyslogServer?.message}
{...register("rsyslogServer")}
/>
</Form>
src/components/PageComponents/Config/Position.tsx
+15 -33
View File
@@ -1,13 +1,9 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { toast } from "react-hot-toast";
import { BitwiseSelect } from "@app/components/form/BitwiseSelect.js";
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 { 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";
@@ -19,22 +15,17 @@ export const Position = (): JSX.Element => {
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
const {
register,
handleSubmit,
formState: { errors, isDirty },
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 { 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,
@@ -153,7 +144,6 @@ export const Position = (): JSX.Element => {
<BitwiseSelect
label="Position Flags"
description="Configuration options for POSITION messages"
error={error?.message}
selected={value}
decodeEnun={Protobuf.Config_PositionConfig_PositionFlags}
onChange={onChange}
@@ -180,7 +170,6 @@ export const Position = (): JSX.Element => {
suffix="m"
label="Altitude"
type="number"
error={errors.fixedAlt?.message}
disabled={!fixedPositionEnabled}
{...register("fixedAlt", { valueAsNumber: true })}
/>
@@ -188,7 +177,6 @@ export const Position = (): JSX.Element => {
suffix="°"
label="Latitude"
type="number"
error={errors.fixedLat?.message}
disabled={!fixedPositionEnabled}
{...register("fixedLat", { valueAsNumber: true })}
/>
@@ -196,7 +184,6 @@ export const Position = (): JSX.Element => {
suffix="°"
label="Longitude"
type="number"
error={errors.fixedLng?.message}
disabled={!fixedPositionEnabled}
{...register("fixedLng", { valueAsNumber: true })}
/>
@@ -209,7 +196,6 @@ export const Position = (): JSX.Element => {
label="Broadcast Interval"
description="How often your position is sent out over the mesh"
type="number"
error={errors.positionBroadcastSecs?.message}
{...register("positionBroadcastSecs", { valueAsNumber: true })}
/>
<Input
@@ -217,7 +203,6 @@ export const Position = (): JSX.Element => {
label="GPS Update Interval"
description="How often a GPS fix should be acquired"
type="number"
error={errors.gpsUpdateInterval?.message}
{...register("gpsUpdateInterval", { valueAsNumber: true })}
/>
<Input
@@ -225,7 +210,6 @@ export const Position = (): JSX.Element => {
label="Fix Attempt Duration"
description="How long the device will try to get a fix for"
type="number"
error={errors.gpsAttemptTime?.message}
{...register("gpsAttemptTime", { valueAsNumber: true })}
/>
</FormSection>
@@ -233,14 +217,12 @@ export const Position = (): JSX.Element => {
label="RX Pin"
description="GPS Module RX pin override"
type="number"
error={errors.rxGpio?.message}
{...register("rxGpio", { valueAsNumber: true })}
/>
<Input
label="TX Pin"
description="GPS Module TX pin override"
type="number"
error={errors.txGpio?.message}
{...register("txGpio", { valueAsNumber: true })}
/>
</Form>
src/components/PageComponents/Config/Power.tsx
+4 -21
View File
@@ -1,12 +1,8 @@
import type React from "react";
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 { 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";
@@ -15,13 +11,7 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const Power = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
control
} = useForm<PowerValidation>({
const { register, handleSubmit, reset, control } = useForm<PowerValidation>({
mode: "onChange",
defaultValues: config.power,
resolver: classValidatorResolver(PowerValidation)
@@ -49,7 +39,6 @@ export const Power = (): JSX.Element => {
description="Automatically shutdown node after this long when on battery, 0 for indefinite"
suffix="Seconds"
type="number"
error={errors.onBatteryShutdownAfterSecs?.message}
{...register("onBatteryShutdownAfterSecs", { valueAsNumber: true })}
/>
<Controller
@@ -68,7 +57,6 @@ export const Power = (): JSX.Element => {
label="ADC Multiplier Override ratio"
description="Used for tweaking battery voltage reading"
type="number"
error={errors.adcMultiplierOverride?.message}
{...register("adcMultiplierOverride", { valueAsNumber: true })}
/>
<FormSection title="Sleep Settings">
@@ -77,7 +65,6 @@ export const Power = (): JSX.Element => {
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
@@ -85,7 +72,6 @@ export const Power = (): JSX.Element => {
description="The device will enter super deep sleep after this time"
suffix="Seconds"
type="number"
error={errors.meshSdsTimeoutSecs?.message}
{...register("meshSdsTimeoutSecs", { valueAsNumber: true })}
/>
<Input
@@ -93,7 +79,6 @@ export const Power = (): JSX.Element => {
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
@@ -101,7 +86,6 @@ export const Power = (): JSX.Element => {
description="How long the device will be in light sleep for"
suffix="Seconds"
type="number"
error={errors.lsSecs?.message}
{...register("lsSecs", { valueAsNumber: true })}
/>
</FormSection>
@@ -110,7 +94,6 @@ export const Power = (): JSX.Element => {
description="If the device does not receive a Bluetooth connection, the BLE radio will be disabled after this long"
suffix="Seconds"
type="number"
error={errors.waitBluetoothSecs?.message}
{...register("waitBluetoothSecs", { valueAsNumber: true })}
/>
</Form>
src/components/PageComponents/Config/User.tsx
+5 -21
View File
@@ -1,18 +1,14 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { toast } from "react-hot-toast";
import { base16 } from "rfc4648";
import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js";
import { Toggle } from "@app/components/form/Toggle.js";
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 { ErrorMessage } from "@hookform/error-message";
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
@@ -21,13 +17,7 @@ export const User = (): JSX.Element => {
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
control
} = useForm<UserValidation>({
const { register, handleSubmit, reset, control } = useForm<UserValidation>({
defaultValues: myNode?.data.user,
resolver: classValidatorResolver(UserValidation)
});
@@ -61,12 +51,7 @@ export const User = (): JSX.Element => {
});
return (
<Form
onSubmit={onSubmit}
>
<ErrorMessage errors={errors} name="longName" />
<ErrorMessage errors={errors} name="shortName" />
<ErrorMessage errors={errors} name="isLicensed" />
<Form onSubmit={onSubmit}>
<Input
label="Device Name"
description="Personalised name for this device."
@@ -105,7 +90,6 @@ export const User = (): JSX.Element => {
label="Device ID"
disabled
description="Preset unique identifier for this device."
error={errors.id?.message}
value={myNode?.data.user?.id}
/>
<Select