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/AppConfig/Map.tsx
+6 -9
View File
@@ -1,13 +1,10 @@
import type React from "react";
import { Controller, useFieldArray, useForm } from "react-hook-form";
import { Button } from "@app/components/form/Button.js";
import { IconButton } from "@app/components/form/IconButton.js";
import { InfoWrapper } from "@app/components/form/InfoWrapper.js";
import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { useAppStore } from "@app/core/stores/appStore.js";
import { Button } from "@components/form/Button.js";
import { IconButton } from "@components/form/IconButton.js";
import { InfoWrapper } from "@components/form/InfoWrapper.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { useAppStore } from "@core/stores/appStore.js";
import { MapValidation } from "@app/validation/appConfig/map.js";
import { Form } from "@components/form/Form";
import { TrashIcon } from "@heroicons/react/24/outline";
src/components/PageComponents/Channel.tsx
-3
View File
@@ -1,10 +1,7 @@
import type React from "react";
import { useEffect, useState } from "react";
import { fromByteArray, toByteArray } from "base64-js";
import { Controller, useForm } from "react-hook-form";
import { toast } from "react-hot-toast";
import { ChannelSettingsValidation } from "@app/validation/channelSettings.js";
import { Form } from "@components/form/Form";
import { Input } from "@components/form/Input.js";
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
src/components/PageComponents/Connect/BLE.tsx
+1 -3
View File
@@ -1,7 +1,5 @@
import type React from "react";
import { useCallback, useEffect, useState } from "react";
import { Mono } from "@app/components/generic/Mono.js";
import { Mono } from "@components/generic/Mono.js";
import { Button } from "@components/form/Button.js";
import { useAppStore } from "@core/stores/appStore.js";
import { useDeviceStore } from "@core/stores/deviceStore.js";
src/components/PageComponents/Connect/HTTP.tsx
+2 -5
View File
@@ -1,9 +1,6 @@
import type React from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { Button } from "@components/form/Button.js";
import { useAppStore } from "@core/stores/appStore.js";
import { useDeviceStore } from "@core/stores/deviceStore.js";
src/components/PageComponents/Connect/Serial.tsx
+1 -3
View File
@@ -1,7 +1,5 @@
import type React from "react";
import { useCallback, useEffect, useState } from "react";
import { Mono } from "@app/components/generic/Mono.js";
import { Mono } from "@components/generic/Mono.js";
import { Button } from "@components/form/Button.js";
import { useAppStore } from "@core/stores/appStore.js";
import { useDeviceStore } from "@core/stores/deviceStore.js";
src/components/PageComponents/Map/MapControlls.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { useEffect } from "react";
import { useMap } from "react-map-gl";
import { useDevice } from "@app/core/providers/useDevice.js";
import { useDevice } from "@core/providers/useDevice.js";
import {
MagnifyingGlassMinusIcon,
MagnifyingGlassPlusIcon,
src/components/PageComponents/Messages/ChannelChat.tsx
-2
View File
@@ -1,5 +1,3 @@
import type React from "react";
import { Message } from "@components/PageComponents/Messages/Message.js";
import { MessageInput } from "@components/PageComponents/Messages/MessageInput.js";
import { useDevice } from "@core/providers/useDevice.js";
src/components/PageComponents/Messages/Message.tsx
-2
View File
@@ -1,5 +1,3 @@
import type React from "react";
import { WaypointMessage } from "@components/PageComponents/Messages/WaypointMessage.js";
import { useDevice } from "@core/providers/useDevice.js";
import type { AllMessageTypes } from "@core/stores/deviceStore.js";
src/components/PageComponents/Messages/MessageInput.tsx
+2 -4
View File
@@ -1,7 +1,5 @@
import type React from "react";
import { IconButton } from "@app/components/form/IconButton.js";
import { Input } from "@app/components/form/Input.js";
import { IconButton } from "@components/form/IconButton.js";
import { Input } from "@components/form/Input.js";
import { useDevice } from "@core/providers/useDevice.js";
import type { Channel } from "@core/stores/deviceStore.js";
import { MapPinIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";
src/components/PageComponents/Messages/NewLocationMessage.tsx
+2 -4
View File
@@ -1,7 +1,5 @@
import type React from "react";
import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js";
import { Input } from "@components/form/Input.js";
import { Select } from "@components/form/Select.js";
import { Button } from "@components/form/Button.js";
import { useDevice } from "@core/providers/useDevice.js";
import { renderOptions } from "@core/utils/selectEnumOptions.js";
src/components/PageComponents/Messages/WaypointMessage.tsx
+1 -3
View File
@@ -1,6 +1,4 @@
import type React from "react";
import { useDevice } from "@app/core/providers/useDevice.js";
import { useDevice } from "@core/providers/useDevice.js";
import { toMGRS } from "@core/utils/toMGRS.js";
import { MapPinIcon } from "@heroicons/react/24/outline";
src/components/PageComponents/ModuleConfig/Audio.tsx
+13 -42
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 { AudioValidation } from "@app/validation/moduleConfig/audio.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -15,14 +11,9 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
export const Audio = (): JSX.Element => {
const { moduleConfig, connection, setModuleConfig } = useDevice();
const {
register,
handleSubmit,
formState: { isDirty },
reset,
control
} = useForm<AudioValidation>({
const { moduleConfig, setWorkingModuleConfig } = useDevice();
const { register, handleSubmit, reset, control } = useForm<AudioValidation>({
mode: "onChange",
defaultValues: moduleConfig.audio,
resolver: classValidatorResolver(AudioValidation)
});
@@ -32,34 +23,14 @@ export const Audio = (): JSX.Element => {
}, [reset, moduleConfig.audio]);
const onSubmit = handleSubmit((data) => {
if (connection) {
void toast.promise(
connection
.setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "audio",
value: data
}
})
)
.then(() =>
setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "audio",
value: data
}
})
)
),
{
loading: "Saving...",
success: "Saved Audio Config, Restarting Node",
error: "No response received"
setWorkingModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "audio",
value: data
}
);
}
})
);
});
return (
src/components/PageComponents/ModuleConfig/CannedMessage.tsx
+12 -35
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 { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -15,7 +11,7 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
export const CannedMessage = (): JSX.Element => {
const { moduleConfig, connection, setModuleConfig } = useDevice();
const { moduleConfig, setWorkingModuleConfig } = useDevice();
const {
register,
handleSubmit,
@@ -23,6 +19,7 @@ export const CannedMessage = (): JSX.Element => {
reset,
control
} = useForm<CannedMessageValidation>({
mode: "onChange",
defaultValues: moduleConfig.cannedMessage,
resolver: classValidatorResolver(CannedMessageValidation)
});
@@ -38,34 +35,14 @@ export const CannedMessage = (): JSX.Element => {
}, [reset, moduleConfig.cannedMessage]);
const onSubmit = handleSubmit((data) => {
if (connection) {
void toast.promise(
connection
.setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "cannedMessage",
value: data
}
})
)
.then(() =>
setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "cannedMessage",
value: data
}
})
)
),
{
loading: "Saving...",
success: "Saved Canned Message Config, Restarting Node",
error: "No response received"
setWorkingModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "cannedMessage",
value: data
}
);
}
})
);
});
return (
src/components/PageComponents/ModuleConfig/ExternalNotification.tsx
+16 -44
View File
@@ -1,11 +1,7 @@
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 { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -13,50 +9,26 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
export const ExternalNotification = (): JSX.Element => {
const { moduleConfig, connection, setModuleConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
control
} = useForm<ExternalNotificationValidation>({
defaultValues: moduleConfig.externalNotification,
resolver: classValidatorResolver(ExternalNotificationValidation)
});
const { moduleConfig, setWorkingModuleConfig } = useDevice();
const { register, handleSubmit, reset, control } =
useForm<ExternalNotificationValidation>({
mode: "onChange",
defaultValues: moduleConfig.externalNotification,
resolver: classValidatorResolver(ExternalNotificationValidation)
});
useEffect(() => {
reset(moduleConfig.externalNotification);
}, [reset, moduleConfig.externalNotification]);
const onSubmit = handleSubmit((data) => {
if (connection) {
void toast.promise(
connection
.setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "externalNotification",
value: data
}
})
)
.then(() =>
setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "externalNotification",
value: data
}
})
)
),
{
loading: "Saving...",
success: "Saved External Notification Config, Restarting Node",
error: "No response received"
setWorkingModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "externalNotification",
value: data
}
);
}
})
);
});
const moduleEnabled = useWatch({
src/components/PageComponents/ModuleConfig/MQTT.tsx
+12 -35
View File
@@ -1,11 +1,7 @@
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 { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { MQTTValidation } from "@app/validation/moduleConfig/mqtt.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -13,7 +9,7 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
export const MQTT = (): JSX.Element => {
const { moduleConfig, connection, setModuleConfig } = useDevice();
const { moduleConfig, setWorkingModuleConfig } = useDevice();
const {
register,
handleSubmit,
@@ -21,6 +17,7 @@ export const MQTT = (): JSX.Element => {
reset,
control
} = useForm<MQTTValidation>({
mode: "onChange",
defaultValues: moduleConfig.mqtt,
resolver: classValidatorResolver(MQTTValidation)
});
@@ -36,34 +33,14 @@ export const MQTT = (): JSX.Element => {
}, [reset, moduleConfig.mqtt]);
const onSubmit = handleSubmit((data) => {
if (connection) {
void toast.promise(
connection
.setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "mqtt",
value: data
}
})
)
.then(() =>
setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "mqtt",
value: data
}
})
)
),
{
loading: "Saving...",
success: "Saved MQTT Config, Restarting Node",
error: "No response received"
setWorkingModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "mqtt",
value: data
}
);
}
})
);
});
return (
@@ -82,7 +59,7 @@ export const MQTT = (): JSX.Element => {
/>
<Input
label="MQTT Server Address"
//description="Description"
description="Description"
disabled={!moduleEnabled}
{...register("address")}
/>
src/components/PageComponents/ModuleConfig/RangeTest.tsx
+17 -47
View File
@@ -1,11 +1,7 @@
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 { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -13,51 +9,27 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
export const RangeTest = (): JSX.Element => {
const { moduleConfig, connection, setModuleConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
control
} = useForm<RangeTestValidation>({
defaultValues: moduleConfig.rangeTest,
resolver: classValidatorResolver(RangeTestValidation)
});
const { moduleConfig, setWorkingModuleConfig } = useDevice();
const { register, handleSubmit, reset, control } =
useForm<RangeTestValidation>({
mode: "onChange",
defaultValues: moduleConfig.rangeTest,
resolver: classValidatorResolver(RangeTestValidation)
});
useEffect(() => {
reset(moduleConfig.rangeTest);
}, [reset, moduleConfig.rangeTest]);
const onSubmit = handleSubmit((data) => {
if (connection) {
void toast.promise(
connection
.setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "rangeTest",
value: data
}
})
)
.then(() =>
setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "rangeTest",
value: data
}
})
)
),
{
loading: "Saving...",
success: "Saved Range Test Config, Restarting Node",
error: "No response received"
setWorkingModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "rangeTest",
value: data
}
);
}
})
);
});
const moduleEnabled = useWatch({
@@ -67,9 +39,7 @@ export const RangeTest = (): JSX.Element => {
});
return (
<Form
onSubmit={onSubmit}
>
<Form onSubmit={onSubmit}>
<Controller
name="enabled"
control={control}
src/components/PageComponents/ModuleConfig/Serial.tsx
+14 -43
View File
@@ -1,28 +1,19 @@
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 { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { SerialValidation } from "@app/validation/moduleConfig/serial.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";
import { renderOptions } from "@app/core/utils/selectEnumOptions";
import { Select } from "@app/components/form/Select";
import { renderOptions } from "@core/utils/selectEnumOptions";
import { Select } from "@components/form/Select";
export const Serial = (): JSX.Element => {
const { moduleConfig, connection, setModuleConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
control
} = useForm<SerialValidation>({
const { moduleConfig, setWorkingModuleConfig } = useDevice();
const { register, handleSubmit, reset, control } = useForm<SerialValidation>({
mode: "onChange",
defaultValues: moduleConfig.serial,
resolver: classValidatorResolver(SerialValidation)
});
@@ -32,34 +23,14 @@ export const Serial = (): JSX.Element => {
}, [reset, moduleConfig.serial]);
const onSubmit = handleSubmit((data) => {
if (connection) {
void toast.promise(
connection
.setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "serial",
value: data
}
})
)
.then(() =>
setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "serial",
value: data
}
})
)
),
{
loading: "Saving...",
success: "Saved Serial Config, Restarting Node",
error: "No response received"
setWorkingModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "serial",
value: data
}
);
}
})
);
});
const moduleEnabled = useWatch({
src/components/PageComponents/ModuleConfig/StoreForward.tsx
+16 -44
View File
@@ -1,11 +1,7 @@
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 { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -13,51 +9,27 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
export const StoreForward = (): JSX.Element => {
const { moduleConfig, connection, setModuleConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
control
} = useForm<StoreForwardValidation>({
defaultValues: moduleConfig.storeForward,
resolver: classValidatorResolver(StoreForwardValidation)
});
const { moduleConfig, setWorkingModuleConfig } = useDevice();
const { register, handleSubmit, reset, control } =
useForm<StoreForwardValidation>({
mode: "onChange",
defaultValues: moduleConfig.storeForward,
resolver: classValidatorResolver(StoreForwardValidation)
});
useEffect(() => {
reset(moduleConfig.storeForward);
}, [reset, moduleConfig.storeForward]);
const onSubmit = handleSubmit((data) => {
if (connection) {
void toast.promise(
connection
.setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "storeForward",
value: data
}
})
)
.then(() =>
setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "storeForward",
value: data
}
})
)
),
{
loading: "Saving...",
success: "Saved Store & Forward Config, Restarting Node",
error: "No response received"
setWorkingModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "storeForward",
value: data
}
);
}
})
);
});
const moduleEnabled = useWatch({
src/components/PageComponents/ModuleConfig/Telemetry.tsx
+16 -44
View File
@@ -1,11 +1,7 @@
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 { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -13,51 +9,27 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
export const Telemetry = (): JSX.Element => {
const { moduleConfig, connection, setModuleConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
control
} = useForm<TelemetryValidation>({
defaultValues: moduleConfig.telemetry,
resolver: classValidatorResolver(TelemetryValidation)
});
const { moduleConfig, setWorkingModuleConfig } = useDevice();
const { register, handleSubmit, reset, control } =
useForm<TelemetryValidation>({
mode: "onChange",
defaultValues: moduleConfig.telemetry,
resolver: classValidatorResolver(TelemetryValidation)
});
useEffect(() => {
reset(moduleConfig.telemetry);
}, [reset, moduleConfig.telemetry]);
const onSubmit = handleSubmit((data) => {
if (connection) {
void toast.promise(
connection
.setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "telemetry",
value: data
}
})
)
.then(() =>
setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "telemetry",
value: data
}
})
)
),
{
loading: "Saving...",
success: "Saved Telemetry Config, Restarting Node",
error: "No response received"
setWorkingModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "telemetry",
value: data
}
);
}
})
);
});
return (