mirror of
https://github.com/meshtastic/web.git
synced 2026-04-24 16:00:32 -04:00
Overhaul (#83)
* WIP Layout Refactor * New Connection Dialog * WIP form overhaul * Fix remaining config pages
This commit is contained in:
Sacha Weatherstone
committed by
GitHub
GitHub
parent
c184c5add6
commit
e59fe138f1
@@ -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