Overhaul (#83)
* WIP Layout Refactor * New Connection Dialog * WIP form overhaul * Fix remaining config pages
This commit is contained in:
Sacha Weatherstone
@@ -1,118 +0,0 @@
|
||||
import { Controller, useFieldArray, useForm } from "react-hook-form";
|
||||
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";
|
||||
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
|
||||
|
||||
export const Map = (): JSX.Element => {
|
||||
const { rasterSources, setRasterSources } = useAppStore();
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors, isDirty },
|
||||
control,
|
||||
reset
|
||||
} = useForm<MapValidation>({
|
||||
defaultValues: {
|
||||
// wmsSources: wmsSources ?? [
|
||||
// {
|
||||
// url: "",
|
||||
// tileSize: 512,
|
||||
// type: "raster"
|
||||
// }
|
||||
// ]
|
||||
},
|
||||
resolver: classValidatorResolver(MapValidation)
|
||||
});
|
||||
|
||||
const { fields, append, remove, insert } = useFieldArray({
|
||||
control,
|
||||
name: "rasterSources"
|
||||
});
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
setRasterSources(data.rasterSources);
|
||||
});
|
||||
|
||||
// useEffect(() => {
|
||||
// reset(rasterSources);
|
||||
// }, [reset, rasterSources]);
|
||||
|
||||
return (
|
||||
<Form onSubmit={onSubmit}>
|
||||
<InfoWrapper label="WMS Sources">
|
||||
<div className="flex flex-col gap-2">
|
||||
{fields.map((field, index) => (
|
||||
<div key={field.id} className="flex w-full gap-2">
|
||||
<Controller
|
||||
name={`rasterSources.${index}.enabled`}
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle checked={value} {...rest} />
|
||||
)}
|
||||
/>
|
||||
<Input
|
||||
placeholder="Name"
|
||||
error={
|
||||
errors.rasterSources
|
||||
? errors.rasterSources[index]?.title?.message
|
||||
: undefined
|
||||
}
|
||||
{...register(`rasterSources.${index}.title`)}
|
||||
/>
|
||||
<Input
|
||||
placeholder="Tile Size"
|
||||
type="number"
|
||||
error={
|
||||
errors.rasterSources
|
||||
? errors.rasterSources[index]?.tileSize?.message
|
||||
: undefined
|
||||
}
|
||||
{...register(`rasterSources.${index}.tileSize`, {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
<Input
|
||||
placeholder="URL"
|
||||
error={
|
||||
errors.rasterSources
|
||||
? errors.rasterSources[index]?.tiles?.message
|
||||
: undefined
|
||||
}
|
||||
{...register(`rasterSources.${index}.tiles`)}
|
||||
/>
|
||||
<IconButton
|
||||
className="shrink-0"
|
||||
icon={<TrashIcon className="w-4" />}
|
||||
onClick={() => {
|
||||
remove(index);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
onClick={() => {
|
||||
append({
|
||||
enabled: true,
|
||||
title: "",
|
||||
tiles: [
|
||||
"https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015"
|
||||
],
|
||||
tileSize: 512
|
||||
});
|
||||
}}
|
||||
>
|
||||
New Source
|
||||
</Button>
|
||||
</div>
|
||||
</InfoWrapper>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
@@ -1,21 +1,13 @@
|
||||
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";
|
||||
import { Select } from "@components/form/Select.js";
|
||||
import { Toggle } from "@components/form/Toggle.js";
|
||||
import { useDevice } from "@core/providers/useDevice.js";
|
||||
import {
|
||||
ArrowPathIcon,
|
||||
EyeIcon,
|
||||
EyeSlashIcon
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import { RefreshCwIcon, EyeIcon, EyeOffIcon } from "lucide-react";
|
||||
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
import { NavBar } from "@app/Nav/NavBar.js";
|
||||
|
||||
export interface SettingsPanelProps {
|
||||
channel: Protobuf.Channel;
|
||||
@@ -61,62 +53,41 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
|
||||
}, [channel, reset]);
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
if (connection) {
|
||||
void toast.promise(
|
||||
connection
|
||||
.setChannel(
|
||||
new Protobuf.Channel({
|
||||
role:
|
||||
channel?.role === Protobuf.Channel_Role.PRIMARY
|
||||
? Protobuf.Channel_Role.PRIMARY
|
||||
: data.enabled
|
||||
? Protobuf.Channel_Role.SECONDARY
|
||||
: Protobuf.Channel_Role.DISABLED,
|
||||
index: channel?.index,
|
||||
settings: {
|
||||
...data,
|
||||
psk: toByteArray(data.psk ?? "")
|
||||
}
|
||||
})
|
||||
)
|
||||
.then(() =>
|
||||
addChannel({
|
||||
config: new Protobuf.Channel({
|
||||
index: channel.index,
|
||||
role: channel.role,
|
||||
settings: {
|
||||
...data,
|
||||
psk: toByteArray(data.psk ?? "")
|
||||
}
|
||||
}),
|
||||
lastInterraction: new Date(),
|
||||
messages: []
|
||||
})
|
||||
),
|
||||
{
|
||||
loading: "Saving...",
|
||||
success: "Saved Channel",
|
||||
error: "No response received"
|
||||
}
|
||||
connection
|
||||
?.setChannel(
|
||||
new Protobuf.Channel({
|
||||
role:
|
||||
channel?.role === Protobuf.Channel_Role.PRIMARY
|
||||
? Protobuf.Channel_Role.PRIMARY
|
||||
: data.enabled
|
||||
? Protobuf.Channel_Role.SECONDARY
|
||||
: Protobuf.Channel_Role.DISABLED,
|
||||
index: channel?.index,
|
||||
settings: {
|
||||
...data,
|
||||
psk: toByteArray(data.psk ?? "")
|
||||
}
|
||||
})
|
||||
)
|
||||
.then(() =>
|
||||
addChannel({
|
||||
config: new Protobuf.Channel({
|
||||
index: channel.index,
|
||||
role: channel.role,
|
||||
settings: {
|
||||
...data,
|
||||
psk: toByteArray(data.psk ?? "")
|
||||
}
|
||||
}),
|
||||
lastInterraction: new Date(),
|
||||
messages: []
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex flex-grow flex-col gap-2">
|
||||
<NavBar
|
||||
breadcrumb={["Channels", channel?.index.toString()]}
|
||||
actions={[
|
||||
{
|
||||
label: "Apply",
|
||||
async onClick() {
|
||||
await onSubmit();
|
||||
}
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
<Form onSubmit={onSubmit}>
|
||||
<div className="p-3">
|
||||
<form onSubmit={onSubmit}>
|
||||
{channel?.index !== 0 && (
|
||||
<>
|
||||
<Controller
|
||||
@@ -139,7 +110,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Select
|
||||
{/* <Select
|
||||
label="Key Size"
|
||||
description="Desired size of generated key."
|
||||
value={keySize}
|
||||
@@ -147,7 +118,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
|
||||
setKeySize(parseInt(e.target.value) as 128 | 256);
|
||||
}}
|
||||
action={{
|
||||
icon: <ArrowPathIcon className="h-4" />,
|
||||
icon: <RefreshCwIcon size={16} />,
|
||||
action: () => {
|
||||
const key = new Uint8Array(keySize / 8);
|
||||
crypto.getRandomValues(key);
|
||||
@@ -159,18 +130,14 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
|
||||
>
|
||||
<option value={128}>128 Bit</option>
|
||||
<option value={256}>256 Bit</option>
|
||||
</Select>
|
||||
</Select> */}
|
||||
<Input
|
||||
width="100%"
|
||||
label="Pre-Shared Key"
|
||||
description="Channel key to encrypt data"
|
||||
type={pskHidden ? "password" : "text"}
|
||||
action={{
|
||||
icon: pskHidden ? (
|
||||
<EyeIcon className="w-4" />
|
||||
) : (
|
||||
<EyeSlashIcon className="w-4" />
|
||||
),
|
||||
icon: pskHidden ? <EyeIcon size={16} /> : <EyeOffIcon size={16} />,
|
||||
action: () => {
|
||||
setPskHidden(!pskHidden);
|
||||
}
|
||||
@@ -202,7 +169,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Form>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -1,11 +1,10 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Mono } from "@components/generic/Mono.js";
|
||||
import { Button } from "@components/form/Button.js";
|
||||
import { Button } from "@components/UI/Button.js";
|
||||
import { useAppStore } from "@core/stores/appStore.js";
|
||||
import { useDeviceStore } from "@core/stores/deviceStore.js";
|
||||
import { subscribeAll } from "@core/subscriptions.js";
|
||||
import { randId } from "@core/utils/randId.js";
|
||||
import { PlusCircleIcon } from "@heroicons/react/24/outline";
|
||||
import { Constants, IBLEConnection } from "@meshtastic/meshtasticjs";
|
||||
|
||||
export const BLE = (): JSX.Element => {
|
||||
@@ -64,7 +63,6 @@ export const BLE = (): JSX.Element => {
|
||||
});
|
||||
}}
|
||||
>
|
||||
<PlusCircleIcon className="w-4" />
|
||||
<span>New device</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import { Controller, useForm, useWatch } from "react-hook-form";
|
||||
import { Input } from "@components/form/Input.js";
|
||||
import { Toggle } from "@components/form/Toggle.js";
|
||||
import { Button } from "@components/form/Button.js";
|
||||
import { Button } from "@components/UI/Button.js";
|
||||
import { useAppStore } from "@core/stores/appStore.js";
|
||||
import { useDeviceStore } from "@core/stores/deviceStore.js";
|
||||
import { subscribeAll } from "@core/subscriptions.js";
|
||||
import { randId } from "@core/utils/randId.js";
|
||||
import { PlusCircleIcon } from "@heroicons/react/24/outline";
|
||||
import { IHTTPConnection } from "@meshtastic/meshtasticjs";
|
||||
|
||||
export const HTTP = (): JSX.Element => {
|
||||
@@ -71,8 +70,7 @@ export const HTTP = (): JSX.Element => {
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit">
|
||||
<PlusCircleIcon className="w-4" />
|
||||
<Button>
|
||||
<span>Connect</span>
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Mono } from "@components/generic/Mono.js";
|
||||
import { Button } from "@components/form/Button.js";
|
||||
import { Button } from "@components/UI/Button.js";
|
||||
import { useAppStore } from "@core/stores/appStore.js";
|
||||
import { useDeviceStore } from "@core/stores/deviceStore.js";
|
||||
import { subscribeAll } from "@core/subscriptions.js";
|
||||
import { randId } from "@core/utils/randId.js";
|
||||
import { PlusCircleIcon } from "@heroicons/react/24/outline";
|
||||
import { ISerialConnection } from "@meshtastic/meshtasticjs";
|
||||
|
||||
export const Serial = (): JSX.Element => {
|
||||
@@ -70,7 +69,6 @@ export const Serial = (): JSX.Element => {
|
||||
});
|
||||
}}
|
||||
>
|
||||
<PlusCircleIcon className="w-4" />
|
||||
<span>New device</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -1,77 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
|
||||
import { useMap } from "react-map-gl";
|
||||
|
||||
import { useDevice } from "@core/providers/useDevice.js";
|
||||
import {
|
||||
MagnifyingGlassMinusIcon,
|
||||
MagnifyingGlassPlusIcon,
|
||||
ShareIcon
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { bbox, lineString } from "@turf/turf";
|
||||
|
||||
export const MapControlls = (): JSX.Element => {
|
||||
const { current: map } = useMap();
|
||||
const { nodes } = useDevice();
|
||||
|
||||
const getBBox = () => {
|
||||
const nodesWithPosition = nodes.filter((n) => n.data.position?.latitudeI);
|
||||
if (!nodesWithPosition.length) return;
|
||||
const line = lineString(
|
||||
nodesWithPosition.map((n) => [
|
||||
(n.data.position?.latitudeI ?? 0) / 1e7,
|
||||
(n.data.position?.longitudeI ?? 0) / 1e7
|
||||
])
|
||||
);
|
||||
const bounds = bbox(line);
|
||||
const center = map?.cameraForBounds(
|
||||
[
|
||||
[bounds[1], bounds[0]],
|
||||
[bounds[3], bounds[2]]
|
||||
],
|
||||
{ padding: { top: 10, bottom: 10, left: 10, right: 10 } }
|
||||
);
|
||||
if (center) map?.easeTo(center);
|
||||
else if (nodesWithPosition.length === 1)
|
||||
map?.easeTo({
|
||||
zoom: 12,
|
||||
center: [
|
||||
(nodesWithPosition[0].data.position?.longitudeI ?? 0) / 1e7,
|
||||
(nodesWithPosition[0].data.position?.latitudeI ?? 0) / 1e7
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getBBox();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="absolute right-0 top-0 z-10 m-2 ">
|
||||
<div className="divide-y-2 divide-backgroundSecondary overflow-hidden rounded-md bg-backgroundPrimary text-textSecondary">
|
||||
<div
|
||||
className="hover:bg-orange-200 cursor-pointer p-3 hover:text-accent"
|
||||
onClick={() => {
|
||||
map?.zoomIn();
|
||||
}}
|
||||
>
|
||||
<MagnifyingGlassPlusIcon className="h-4 w-4" />
|
||||
</div>
|
||||
<div
|
||||
className="hover:bg-orange-200 cursor-pointer p-3 hover:text-accent"
|
||||
onClick={() => {
|
||||
map?.zoomOut();
|
||||
}}
|
||||
>
|
||||
<MagnifyingGlassMinusIcon className="h-4 w-4" />
|
||||
</div>
|
||||
<div
|
||||
className="hover:bg-orange-200 cursor-pointer p-3 hover:text-accent"
|
||||
onClick={() => getBBox()}
|
||||
>
|
||||
<ShareIcon className="h-4 w-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Message } from "@components/PageComponents/Messages/Message.js";
|
||||
import { MessageInput } from "@components/PageComponents/Messages/MessageInput.js";
|
||||
import { useDevice } from "@core/providers/useDevice.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import type { Channel } from "@core/stores/deviceStore.js";
|
||||
|
||||
export interface ChannelChatProps {
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { WaypointMessage } from "@components/PageComponents/Messages/WaypointMessage.js";
|
||||
import { useDevice } from "@core/providers/useDevice.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import type { AllMessageTypes } from "@core/stores/deviceStore.js";
|
||||
import { Hashicon } from "@emeraldpay/hashicon-react";
|
||||
import {
|
||||
CheckCircleIcon,
|
||||
EllipsisHorizontalCircleIcon,
|
||||
ExclamationCircleIcon
|
||||
} from "@heroicons/react/24/outline";
|
||||
CircleEllipsisIcon,
|
||||
AlertCircleIcon,
|
||||
CheckCircle2Icon
|
||||
} from "lucide-react";
|
||||
import type { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
|
||||
export interface MessageProps {
|
||||
@@ -30,11 +30,11 @@ export const Message = ({
|
||||
return lastMsgSameUser ? (
|
||||
<div className="ml-5 flex">
|
||||
{message.state === "ack" ? (
|
||||
<CheckCircleIcon className="my-auto h-4 text-textSecondary" />
|
||||
<CheckCircle2Icon size={16} className="my-auto text-textSecondary" />
|
||||
) : message.state === "waiting" ? (
|
||||
<EllipsisHorizontalCircleIcon className="my-auto h-4 text-textSecondary" />
|
||||
<CircleEllipsisIcon size={16} className="my-auto text-textSecondary" />
|
||||
) : (
|
||||
<ExclamationCircleIcon className="my-auto h-4 text-textSecondary" />
|
||||
<AlertCircleIcon size={16} className="my-auto text-textSecondary" />
|
||||
)}
|
||||
{"waypointID" in message ? (
|
||||
<WaypointMessage waypointID={message.waypointID} />
|
||||
@@ -69,11 +69,14 @@ export const Message = ({
|
||||
</div>
|
||||
<div className="ml-1 flex">
|
||||
{message.state === "ack" ? (
|
||||
<CheckCircleIcon className="my-auto h-4 text-textSecondary" />
|
||||
<CheckCircle2Icon size={16} className="my-auto text-textSecondary" />
|
||||
) : message.state === "waiting" ? (
|
||||
<EllipsisHorizontalCircleIcon className="my-auto h-4 text-textSecondary" />
|
||||
<CircleEllipsisIcon
|
||||
size={16}
|
||||
className="my-auto text-textSecondary"
|
||||
/>
|
||||
) : (
|
||||
<ExclamationCircleIcon className="my-auto h-4 text-textSecondary" />
|
||||
<AlertCircleIcon size={16} className="my-auto text-textSecondary" />
|
||||
)}
|
||||
{"waypointID" in message ? (
|
||||
<WaypointMessage waypointID={message.waypointID} />
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { IconButton } from "@components/form/IconButton.js";
|
||||
import { Input } from "@components/form/Input.js";
|
||||
import { useDevice } from "@core/providers/useDevice.js";
|
||||
import { Input } from "@components/UI/Input.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import type { Channel } from "@core/stores/deviceStore.js";
|
||||
import { MapPinIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";
|
||||
import { SendIcon } from "lucide-react";
|
||||
import type { Types } from "@meshtastic/meshtasticjs";
|
||||
import { Button } from "@components/UI/Button.js";
|
||||
|
||||
export interface MessageInputProps {
|
||||
channel: Channel;
|
||||
@@ -42,18 +42,16 @@ export const MessageInput = ({ channel }: MessageInputProps): JSX.Element => {
|
||||
<Input
|
||||
autoFocus
|
||||
minLength={2}
|
||||
label=""
|
||||
placeholder="Enter Message"
|
||||
value={messageDraft}
|
||||
onChange={(e) => setMessageDraft(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
<IconButton
|
||||
icon={<PaperAirplaneIcon className="text-slate-500 h-4" />}
|
||||
/>
|
||||
<Button>
|
||||
<SendIcon size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
<IconButton icon={<MapPinIcon className="text-slate-500 h-4" />} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
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";
|
||||
import { Button } from "@components/UI/Button.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
|
||||
enum LocationType {
|
||||
@@ -23,9 +21,9 @@ export const NewLocationMessage = (): JSX.Element => {
|
||||
>
|
||||
<Input label="Name" />
|
||||
<Input label="Description" />
|
||||
<Select label="Type" value={LocationType.MGRS}>
|
||||
{/* <Select label="Type" value={LocationType.MGRS}>
|
||||
{renderOptions(LocationType)}
|
||||
</Select>
|
||||
</Select> */}
|
||||
<Input label="Coordinates" />
|
||||
<Button
|
||||
onClick={() => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useDevice } from "@core/providers/useDevice.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import { toMGRS } from "@core/utils/toMGRS.js";
|
||||
import { MapPinIcon } from "@heroicons/react/24/outline";
|
||||
import { MapPinIcon } from "lucide-react";
|
||||
|
||||
export interface WaypointMessageProps {
|
||||
waypointID: number;
|
||||
@@ -13,13 +13,13 @@ export const WaypointMessage = ({
|
||||
const waypoint = waypoints.find((wp) => wp.id === waypointID);
|
||||
|
||||
return (
|
||||
<div className="border-l-slate-200 ml-4 border-l-2 pl-2">
|
||||
<div className="ml-4 border-l-2 border-l-slate-200 pl-2">
|
||||
<div className="flex gap-2 rounded-md p-2">
|
||||
<MapPinIcon className="text-slate-600 m-auto w-6" />
|
||||
<MapPinIcon size={16} className="m-auto text-slate-600" />
|
||||
<div>
|
||||
<div className="flex gap-2">
|
||||
<div className="font-bold">{waypoint?.name}</div>
|
||||
<span className="text-slate-500 font-mono text-sm">
|
||||
<span className="font-mono text-sm text-slate-500">
|
||||
{toMGRS(waypoint?.latitudeI, waypoint?.longitudeI)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -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 { AudioValidation } from "@app/validation/moduleConfig/audio.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 { AudioValidation } from "@app/validation/moduleConfig/audio.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
import { DynamicForm } from "@app/components/DynamicForm.js";
|
||||
|
||||
export const Audio = (): JSX.Element => {
|
||||
const { moduleConfig, setWorkingModuleConfig } = useDevice();
|
||||
const { register, handleSubmit, reset, control } = useForm<AudioValidation>({
|
||||
mode: "onChange",
|
||||
defaultValues: moduleConfig.audio,
|
||||
resolver: classValidatorResolver(AudioValidation)
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
reset(moduleConfig.audio);
|
||||
}, [reset, moduleConfig.audio]);
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
const onSubmit = (data: AudioValidation) => {
|
||||
setWorkingModuleConfig(
|
||||
new Protobuf.ModuleConfig({
|
||||
payloadVariant: {
|
||||
@@ -31,59 +15,63 @@ export const Audio = (): JSX.Element => {
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={onSubmit}>
|
||||
<Controller
|
||||
name="codec2Enabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Codec 2 Enabled"
|
||||
description="Enter a description."
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Input
|
||||
label="PTT Pin"
|
||||
description="Enter a description."
|
||||
type="number"
|
||||
{...register("pttPin", { valueAsNumber: true })}
|
||||
/>
|
||||
<Select
|
||||
label="Bitrate"
|
||||
description="Enter a description."
|
||||
{...register("bitrate", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.ModuleConfig_AudioConfig_Audio_Baud)}
|
||||
</Select>
|
||||
<Input
|
||||
label="i2SWs"
|
||||
description="Enter a description."
|
||||
type="number"
|
||||
{...register("i2sWs", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="i2SSd"
|
||||
description="Enter a description."
|
||||
type="number"
|
||||
{...register("i2sSd", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="i2SDin"
|
||||
description="Enter a description."
|
||||
type="number"
|
||||
{...register("i2sDin", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="i2SSck"
|
||||
description="Enter a description."
|
||||
type="number"
|
||||
{...register("i2sSck", { valueAsNumber: true })}
|
||||
/>
|
||||
</Form>
|
||||
<DynamicForm<AudioValidation>
|
||||
onSubmit={onSubmit}
|
||||
defaultValues={moduleConfig.audio}
|
||||
fieldGroups={[
|
||||
{
|
||||
label: "Audio Settings",
|
||||
description: "Settings for the Audio module",
|
||||
fields: [
|
||||
{
|
||||
type: "toggle",
|
||||
name: "codec2Enabled",
|
||||
label: "Codec 2 Enabled",
|
||||
description: "Enable Codec 2 audio encoding"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "pttPin",
|
||||
label: "PTT Pin",
|
||||
description: "GPIO pin to use for PTT"
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "bitrate",
|
||||
label: "Bitrate",
|
||||
description: "Bitrate to use for audio encoding",
|
||||
enumValue: Protobuf.ModuleConfig_AudioConfig_Audio_Baud
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "i2sWs",
|
||||
label: "i2S WS",
|
||||
description: "GPIO pin to use for i2S WS"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "i2sSd",
|
||||
label: "i2S SD",
|
||||
description: "GPIO pin to use for i2S SD"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "i2sDin",
|
||||
label: "i2S DIN",
|
||||
description: "GPIO pin to use for i2S DIN"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "i2sSck",
|
||||
label: "i2S SCK",
|
||||
description: "GPIO pin to use for i2S SCK"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,40 +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 { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.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 { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
import { DynamicForm } from "@app/components/DynamicForm.js";
|
||||
|
||||
export const CannedMessage = (): JSX.Element => {
|
||||
const { moduleConfig, setWorkingModuleConfig } = useDevice();
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors, isDirty },
|
||||
reset,
|
||||
control
|
||||
} = useForm<CannedMessageValidation>({
|
||||
mode: "onChange",
|
||||
defaultValues: moduleConfig.cannedMessage,
|
||||
resolver: classValidatorResolver(CannedMessageValidation)
|
||||
});
|
||||
|
||||
const moduleEnabled = useWatch({
|
||||
control,
|
||||
name: "rotary1Enabled",
|
||||
defaultValue: false
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
reset(moduleConfig.cannedMessage);
|
||||
}, [reset, moduleConfig.cannedMessage]);
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
const onSubmit = (data: CannedMessageValidation) => {
|
||||
setWorkingModuleConfig(
|
||||
new Protobuf.ModuleConfig({
|
||||
payloadVariant: {
|
||||
@@ -43,110 +15,87 @@ export const CannedMessage = (): JSX.Element => {
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={onSubmit}>
|
||||
<Controller
|
||||
name="enabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Module Enabled"
|
||||
description="Enable canned messages"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="rotary1Enabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle label="Rotary Encoder #1 Enabled" checked={value} {...rest} />
|
||||
)}
|
||||
/>
|
||||
<Input
|
||||
label="Encoder Pin A"
|
||||
description="GPIO Pin Value (1-39) For encoder port A"
|
||||
type="number"
|
||||
disabled={moduleEnabled}
|
||||
{...register("inputbrokerPinA", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Encoder Pin B"
|
||||
description="GPIO Pin Value (1-39) For encoder port B"
|
||||
type="number"
|
||||
disabled={moduleEnabled}
|
||||
{...register("inputbrokerPinB", { valueAsNumber: true })}
|
||||
/>
|
||||
<Input
|
||||
label="Encoder Pin Press"
|
||||
description="GPIO Pin Value (1-39) For encoder Press"
|
||||
type="number"
|
||||
disabled={moduleEnabled}
|
||||
{...register("inputbrokerPinPress", { valueAsNumber: true })}
|
||||
/>
|
||||
<Select
|
||||
label="Clockwise event"
|
||||
description="Select input event."
|
||||
disabled={moduleEnabled}
|
||||
{...register("inputbrokerEventCw", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(
|
||||
Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
|
||||
)}
|
||||
</Select>
|
||||
<Select
|
||||
label="Counter Clockwise event"
|
||||
description="Select input event."
|
||||
disabled={moduleEnabled}
|
||||
{...register("inputbrokerEventCcw", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(
|
||||
Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
|
||||
)}
|
||||
</Select>
|
||||
<Select
|
||||
label="Press event"
|
||||
description="Select input event"
|
||||
disabled={moduleEnabled}
|
||||
{...register("inputbrokerEventPress", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(
|
||||
Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
|
||||
)}
|
||||
</Select>
|
||||
<Controller
|
||||
name="updown1Enabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Up Down enabled"
|
||||
description="Enable the up / down encoder"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Input
|
||||
label="Allow Input Source"
|
||||
description="Select from: '_any', 'rotEnc1', 'upDownEnc1', 'cardkb'"
|
||||
disabled={moduleEnabled}
|
||||
{...register("allowInputSource")}
|
||||
/>
|
||||
<Controller
|
||||
name="sendBell"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Send Bell"
|
||||
description="Sends a bell character with each message"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Form>
|
||||
<DynamicForm<CannedMessageValidation>
|
||||
onSubmit={onSubmit}
|
||||
defaultValues={moduleConfig.mqtt}
|
||||
fieldGroups={[
|
||||
{
|
||||
label: "Canned Message Settings",
|
||||
description: "Settings for the Canned Message module",
|
||||
fields: [
|
||||
{
|
||||
type: "toggle",
|
||||
name: "rotary1Enabled",
|
||||
label: "Rotary Encoder #1 Enabled",
|
||||
description: "Enable the rotary encoder"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "inputbrokerPinA",
|
||||
label: "Encoder Pin A",
|
||||
description: "GPIO Pin Value (1-39) For encoder port A"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "inputbrokerPinB",
|
||||
label: "Encoder Pin B",
|
||||
description: "GPIO Pin Value (1-39) For encoder port B"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "inputbrokerPinPress",
|
||||
label: "Encoder Pin Press",
|
||||
description: "GPIO Pin Value (1-39) For encoder Press"
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "inputbrokerEventCw",
|
||||
label: "Clockwise event",
|
||||
description: "Select input event.",
|
||||
enumValue:
|
||||
Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "inputbrokerEventCcw",
|
||||
label: "Counter Clockwise event",
|
||||
description: "Select input event.",
|
||||
enumValue:
|
||||
Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "inputbrokerEventPress",
|
||||
label: "Press event",
|
||||
description: "Select input event",
|
||||
enumValue:
|
||||
Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "updown1Enabled",
|
||||
label: "Up Down enabled",
|
||||
description: "Enable the up / down encoder"
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "allowInputSource",
|
||||
label: "Allow Input Source",
|
||||
description:
|
||||
"Select from: '_any', 'rotEnc1', 'upDownEnc1', 'cardkb'"
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "sendBell",
|
||||
label: "Send Bell",
|
||||
description: "Sends a bell character with each message"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,26 +1,12 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm, useWatch } from "react-hook-form";
|
||||
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";
|
||||
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
|
||||
import type { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
import { DynamicForm } from "@app/components/DynamicForm.js";
|
||||
|
||||
export const ExternalNotification = (): JSX.Element => {
|
||||
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) => {
|
||||
const onSubmit = (data: ExternalNotificationValidation) => {
|
||||
setWorkingModuleConfig(
|
||||
new Protobuf.ModuleConfig({
|
||||
payloadVariant: {
|
||||
@@ -29,170 +15,171 @@ export const ExternalNotification = (): JSX.Element => {
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
const moduleEnabled = useWatch({
|
||||
control,
|
||||
name: "enabled",
|
||||
defaultValue: false
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={onSubmit}>
|
||||
<Controller
|
||||
name="enabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Module Enabled"
|
||||
description="Enable External Notification"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Output MS"
|
||||
description="Description"
|
||||
suffix="ms"
|
||||
disabled={!moduleEnabled}
|
||||
{...register("outputMs", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Output"
|
||||
description="Description"
|
||||
disabled={!moduleEnabled}
|
||||
{...register("output", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Output Vibrate"
|
||||
description="Description"
|
||||
disabled={!moduleEnabled}
|
||||
{...register("outputVibra", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Output Buzzer"
|
||||
description="Description"
|
||||
disabled={!moduleEnabled}
|
||||
{...register("outputBuzzer", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
<Controller
|
||||
name="active"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Active"
|
||||
description="Description"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="alertMessage"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Alert Message"
|
||||
description="Description"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="alertMessageVibra"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Alert Message Vibrate"
|
||||
description="Description"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="alertMessageBuzzer"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Alert Message Buzzer"
|
||||
description="Description"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="alertBell"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Alert Bell"
|
||||
description="Should an alert be triggered when receiving an incoming bell?"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="alertBellVibra"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Alert Bell Vibrate"
|
||||
description="Description"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="alertBellBuzzer"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Alert Bell Buzzer"
|
||||
description="Description"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="usePwm"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Use PWM"
|
||||
description="Description"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Nag Timeout"
|
||||
description="Description"
|
||||
disabled={!moduleEnabled}
|
||||
{...register("nagTimeout", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
</Form>
|
||||
<DynamicForm<ExternalNotificationValidation>
|
||||
onSubmit={onSubmit}
|
||||
defaultValues={moduleConfig.externalNotification}
|
||||
fieldGroups={[
|
||||
{
|
||||
label: "External Notification Settings",
|
||||
description: "Configure the external notification module",
|
||||
fields: [
|
||||
{
|
||||
type: "toggle",
|
||||
name: "enabled",
|
||||
label: "Module Enabled",
|
||||
description: "Enable External Notification"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "outputMs",
|
||||
label: "Output MS",
|
||||
description: "Output MS",
|
||||
suffix: "ms",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "output",
|
||||
label: "Output",
|
||||
description: "Output",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "outputVibra",
|
||||
label: "Output Vibrate",
|
||||
description: "Output Vibrate",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "outputBuzzer",
|
||||
label: "Output Buzzer",
|
||||
description: "Output Buzzer",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "active",
|
||||
label: "Active",
|
||||
description: "Active",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "alertMessage",
|
||||
label: "Alert Message",
|
||||
description: "Alert Message",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "alertMessageVibra",
|
||||
label: "Alert Message Vibrate",
|
||||
description: "Alert Message Vibrate",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "alertMessageBuzzer",
|
||||
label: "Alert Message Buzzer",
|
||||
description: "Alert Message Buzzer",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "alertBell",
|
||||
label: "Alert Bell",
|
||||
description:
|
||||
"Should an alert be triggered when receiving an incoming bell?",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "alertBellVibra",
|
||||
label: "Alert Bell Vibrate",
|
||||
description: "Alert Bell Vibrate",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "alertBellBuzzer",
|
||||
label: "Alert Bell Buzzer",
|
||||
description: "Alert Bell Buzzer",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "usePwm",
|
||||
label: "Use PWM",
|
||||
description: "Use PWM",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "nagTimeout",
|
||||
label: "Nag Timeout",
|
||||
description: "Nag Timeout",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,38 +1,12 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm, useWatch } from "react-hook-form";
|
||||
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";
|
||||
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
|
||||
import type { MQTTValidation } from "@app/validation/moduleConfig/mqtt.js";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
import { DynamicForm } from "@app/components/DynamicForm.js";
|
||||
import { useDevice } from "@app/core/stores/deviceStore.js";
|
||||
|
||||
export const MQTT = (): JSX.Element => {
|
||||
const { moduleConfig, setWorkingModuleConfig } = useDevice();
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors, isDirty },
|
||||
reset,
|
||||
control
|
||||
} = useForm<MQTTValidation>({
|
||||
mode: "onChange",
|
||||
defaultValues: moduleConfig.mqtt,
|
||||
resolver: classValidatorResolver(MQTTValidation)
|
||||
});
|
||||
|
||||
const moduleEnabled = useWatch({
|
||||
control,
|
||||
name: "enabled",
|
||||
defaultValue: false
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
reset(moduleConfig.mqtt);
|
||||
}, [reset, moduleConfig.mqtt]);
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
const onSubmit = (data: MQTTValidation) => {
|
||||
setWorkingModuleConfig(
|
||||
new Protobuf.ModuleConfig({
|
||||
payloadVariant: {
|
||||
@@ -41,66 +15,71 @@ export const MQTT = (): JSX.Element => {
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={onSubmit}>
|
||||
<Controller
|
||||
name="enabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Module Enabled"
|
||||
description="Enable MQTT"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Input
|
||||
label="MQTT Server Address"
|
||||
description="Description"
|
||||
disabled={!moduleEnabled}
|
||||
{...register("address")}
|
||||
/>
|
||||
<Input
|
||||
label="MQTT Username"
|
||||
description="MQTT username to use for default/custom servers"
|
||||
disabled={!moduleEnabled}
|
||||
{...register("username")}
|
||||
/>
|
||||
<Input
|
||||
label="MQTT Password"
|
||||
description="MQTT password to use for default/custom servers"
|
||||
type="password"
|
||||
autoComplete="off"
|
||||
disabled={!moduleEnabled}
|
||||
{...register("password")}
|
||||
/>
|
||||
<Controller
|
||||
name="encryptionEnabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Encryption Enabled"
|
||||
//description="Description"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="jsonEnabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="JSON Output Enabled"
|
||||
description="Enable the sending / consumption of JSON packets on MQTT (Not encrypted)"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Form>
|
||||
<DynamicForm<MQTTValidation>
|
||||
onSubmit={onSubmit}
|
||||
defaultValues={moduleConfig.mqtt}
|
||||
fieldGroups={[
|
||||
{
|
||||
label: "MQTT Settings",
|
||||
description: "Settings for the MQTT module",
|
||||
fields: [
|
||||
{
|
||||
type: "toggle",
|
||||
name: "enabled",
|
||||
label: "Enabled",
|
||||
description: "Enable or disable MQTT"
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "address",
|
||||
label: "MQTT Server Address",
|
||||
description:
|
||||
"MQTT server address to use for default/custom servers",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
name: "username",
|
||||
label: "MQTT Username",
|
||||
description: "MQTT username to use for default/custom servers",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "password",
|
||||
name: "password",
|
||||
label: "MQTT Password",
|
||||
description: "MQTT password to use for default/custom servers",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "encryptionEnabled",
|
||||
label: "Encryption Enabled",
|
||||
description: "Enable or disable MQTT encryption",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,27 +1,12 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm, useWatch } from "react-hook-form";
|
||||
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";
|
||||
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
|
||||
import type { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
import { DynamicForm } from "@app/components/DynamicForm.js";
|
||||
|
||||
export const RangeTest = (): JSX.Element => {
|
||||
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) => {
|
||||
const onSubmit = (data: RangeTestValidation) => {
|
||||
setWorkingModuleConfig(
|
||||
new Protobuf.ModuleConfig({
|
||||
payloadVariant: {
|
||||
@@ -30,45 +15,48 @@ export const RangeTest = (): JSX.Element => {
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
const moduleEnabled = useWatch({
|
||||
control,
|
||||
name: "enabled",
|
||||
defaultValue: false
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={onSubmit}>
|
||||
<Controller
|
||||
name="enabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle label="Module Enabled" checked={value} {...rest} />
|
||||
)}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Message Interval"
|
||||
description="How long to wait between sending test packets"
|
||||
disabled={!moduleEnabled}
|
||||
suffix="Seconds"
|
||||
{...register("sender", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
<Controller
|
||||
name="save"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Save CSV to storage"
|
||||
description="ESP32 Only"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Form>
|
||||
<DynamicForm<RangeTestValidation>
|
||||
onSubmit={onSubmit}
|
||||
defaultValues={moduleConfig.mqtt}
|
||||
fieldGroups={[
|
||||
{
|
||||
label: "Range Test Settings",
|
||||
description: "Settings for the Range Test module",
|
||||
fields: [
|
||||
{
|
||||
type: "toggle",
|
||||
name: "enabled",
|
||||
label: "Module Enabled",
|
||||
description: "Enable Range Test"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "sender",
|
||||
label: "Message Interval",
|
||||
description: "How long to wait between sending test packets",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "save",
|
||||
label: "Save CSV to storage",
|
||||
description: "ESP32 Only",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,28 +1,12 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm, useWatch } from "react-hook-form";
|
||||
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 type { SerialValidation } from "@app/validation/moduleConfig/serial.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
import { renderOptions } from "@core/utils/selectEnumOptions";
|
||||
import { Select } from "@components/form/Select";
|
||||
import { DynamicForm } from "@app/components/DynamicForm.js";
|
||||
|
||||
export const Serial = (): JSX.Element => {
|
||||
const { moduleConfig, setWorkingModuleConfig } = useDevice();
|
||||
const { register, handleSubmit, reset, control } = useForm<SerialValidation>({
|
||||
mode: "onChange",
|
||||
defaultValues: moduleConfig.serial,
|
||||
resolver: classValidatorResolver(SerialValidation)
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
reset(moduleConfig.serial);
|
||||
}, [reset, moduleConfig.serial]);
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
const onSubmit = (data: SerialValidation) => {
|
||||
setWorkingModuleConfig(
|
||||
new Protobuf.ModuleConfig({
|
||||
payloadVariant: {
|
||||
@@ -31,84 +15,98 @@ export const Serial = (): JSX.Element => {
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
const moduleEnabled = useWatch({
|
||||
control,
|
||||
name: "enabled",
|
||||
defaultValue: false
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={onSubmit}>
|
||||
<Controller
|
||||
name="enabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Module Enabled"
|
||||
description="Enable Serial output"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="echo"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Echo"
|
||||
description="Any packets you send will be echoed back to your device"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="RX Pin"
|
||||
description="Set the GPIO pin to the RXD pin you have set up."
|
||||
disabled={!moduleEnabled}
|
||||
{...register("rxd", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="TX Pin"
|
||||
description="Set the GPIO pin to the TXD pin you have set up."
|
||||
disabled={!moduleEnabled}
|
||||
{...register("txd", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
<Select
|
||||
label="Baud Rate"
|
||||
description="The serial baud rate"
|
||||
disabled={!moduleEnabled}
|
||||
{...register("baud", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.ModuleConfig_SerialConfig_Serial_Baud)}
|
||||
</Select>
|
||||
<Input
|
||||
type="number"
|
||||
label="Timeout"
|
||||
suffix="Seconds"
|
||||
description="Seconds to wait before we consider your packet as 'done'"
|
||||
disabled={!moduleEnabled}
|
||||
{...register("timeout", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
<Select
|
||||
label="Mode"
|
||||
description="Select Mode"
|
||||
disabled={!moduleEnabled}
|
||||
{...register("mode", { valueAsNumber: true })}
|
||||
>
|
||||
{renderOptions(Protobuf.ModuleConfig_SerialConfig_Serial_Mode)}
|
||||
</Select>
|
||||
</Form>
|
||||
<DynamicForm<SerialValidation>
|
||||
onSubmit={onSubmit}
|
||||
defaultValues={moduleConfig.serial}
|
||||
fieldGroups={[
|
||||
{
|
||||
label: "Serial Settings",
|
||||
description: "Settings for the Serial module",
|
||||
fields: [
|
||||
{
|
||||
type: "toggle",
|
||||
name: "enabled",
|
||||
label: "Module Enabled",
|
||||
description: "Enable Serial output"
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "echo",
|
||||
label: "Echo",
|
||||
description:
|
||||
"Any packets you send will be echoed back to your device",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "rxd",
|
||||
label: "Receive Pin",
|
||||
description: "Set the GPIO pin to the RXD pin you have set up.",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "txd",
|
||||
label: "Transmit Pin",
|
||||
description: "Set the GPIO pin to the TXD pin you have set up.",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "baud",
|
||||
label: "Baud Rate",
|
||||
description: "The serial baud rate",
|
||||
enumValue: Protobuf.ModuleConfig_SerialConfig_Serial_Baud,
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "timeout",
|
||||
label: "Timeout",
|
||||
suffix: "Seconds",
|
||||
description:
|
||||
"Seconds to wait before we consider your packet as 'done'",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
name: "mode",
|
||||
label: "Mode",
|
||||
description: "Select Mode",
|
||||
enumValue: Protobuf.ModuleConfig_SerialConfig_Serial_Mode,
|
||||
formatEnumName: true,
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,27 +1,12 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm, useWatch } from "react-hook-form";
|
||||
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";
|
||||
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
|
||||
import type { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
import { DynamicForm } from "@app/components/DynamicForm.js";
|
||||
|
||||
export const StoreForward = (): JSX.Element => {
|
||||
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) => {
|
||||
const onSubmit = (data: StoreForwardValidation) => {
|
||||
setWorkingModuleConfig(
|
||||
new Protobuf.ModuleConfig({
|
||||
payloadVariant: {
|
||||
@@ -30,68 +15,71 @@ export const StoreForward = (): JSX.Element => {
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
const moduleEnabled = useWatch({
|
||||
control,
|
||||
name: "enabled",
|
||||
defaultValue: false
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={onSubmit}>
|
||||
<Controller
|
||||
name="enabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Module Enabled"
|
||||
description="Description"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="heartbeat"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Heartbeat Enabled"
|
||||
description="Description"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="Number of records"
|
||||
description="Max transmit power in dBm"
|
||||
suffix="Records"
|
||||
disabled={!moduleEnabled}
|
||||
{...register("records", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="History return max"
|
||||
description="Max transmit power in dBm"
|
||||
disabled={!moduleEnabled}
|
||||
{...register("historyReturnMax", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
label="History return window"
|
||||
description="Max transmit power in dBm"
|
||||
disabled={!moduleEnabled}
|
||||
{...register("historyReturnWindow", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
</Form>
|
||||
<DynamicForm<StoreForwardValidation>
|
||||
onSubmit={onSubmit}
|
||||
defaultValues={moduleConfig.mqtt}
|
||||
fieldGroups={[
|
||||
{
|
||||
label: "Store & Forward Settings",
|
||||
description: "Settings for the Store & Forward module",
|
||||
fields: [
|
||||
{
|
||||
type: "toggle",
|
||||
name: "enabled",
|
||||
label: "Module Enabled",
|
||||
description: "Enable Store & Forward"
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "heartbeat",
|
||||
label: "Heartbeat Enabled",
|
||||
description: "Enable Store & Forward heartbeat",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "records",
|
||||
label: "Number of records",
|
||||
description: "Number of records to store",
|
||||
suffix: "Records",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "historyReturnMax",
|
||||
label: "History return max",
|
||||
description: "Max number of records to return",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "historyReturnWindow",
|
||||
label: "History return window",
|
||||
description: "Max number of records to return",
|
||||
disabledBy: [
|
||||
{
|
||||
fieldName: "enabled"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,27 +1,12 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
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";
|
||||
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
|
||||
import type { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js";
|
||||
import { useDevice } from "@core/stores/deviceStore.js";
|
||||
import { Protobuf } from "@meshtastic/meshtasticjs";
|
||||
import { DynamicForm } from "@app/components/DynamicForm.js";
|
||||
|
||||
export const Telemetry = (): JSX.Element => {
|
||||
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) => {
|
||||
const onSubmit = (data: TelemetryValidation) => {
|
||||
setWorkingModuleConfig(
|
||||
new Protobuf.ModuleConfig({
|
||||
payloadVariant: {
|
||||
@@ -30,55 +15,51 @@ export const Telemetry = (): JSX.Element => {
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={onSubmit}>
|
||||
<Controller
|
||||
name="environmentMeasurementEnabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Module Enabled"
|
||||
description="Enable the Environment Telemetry"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="environmentScreenEnabled"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Displayed on Screen"
|
||||
description="Show the Telemetry Module on the OLED"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Input
|
||||
label="Update Interval"
|
||||
description="How often to send Metrics over the mesh"
|
||||
suffix="Seconds"
|
||||
type="number"
|
||||
{...register("environmentUpdateInterval", {
|
||||
valueAsNumber: true
|
||||
})}
|
||||
/>
|
||||
<Controller
|
||||
name="environmentDisplayFahrenheit"
|
||||
control={control}
|
||||
render={({ field: { value, ...rest } }) => (
|
||||
<Toggle
|
||||
label="Display Fahrenheit"
|
||||
description="Display temp in Fahrenheit"
|
||||
checked={value}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Form>
|
||||
<DynamicForm<TelemetryValidation>
|
||||
onSubmit={onSubmit}
|
||||
defaultValues={moduleConfig.telemetry}
|
||||
fieldGroups={[
|
||||
{
|
||||
label: "Telemetry Settings",
|
||||
description: "Settings for the Telemetry module",
|
||||
fields: [
|
||||
{
|
||||
type: "number",
|
||||
name: "deviceUpdateInterval",
|
||||
label: "Interval to get telemetry data",
|
||||
suffix: "seconds"
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
name: "environmentUpdateInterval",
|
||||
label: "Update Interval",
|
||||
description: "How often to send Metrics over the mesh",
|
||||
suffix: "seconds"
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "environmentMeasurementEnabled",
|
||||
label: "Module Enabled",
|
||||
description: "Enable the Environment Telemetry"
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "environmentScreenEnabled",
|
||||
label: "Displayed on Screen",
|
||||
description: "Show the Telemetry Module on the OLED"
|
||||
},
|
||||
{
|
||||
type: "toggle",
|
||||
name: "environmentDisplayFahrenheit",
|
||||
label: "Display Fahrenheit",
|
||||
description: "Display temp in Fahrenheit"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user