Make DynamicForm more modular

This commit is contained in:
Sacha Weatherstone
2023-02-13 22:46:29 +10:00
parent d79a6965c0
commit 53a4ae290c
23 changed files with 478 additions and 336 deletions

View File

@@ -1,7 +1,7 @@
import type { AudioValidation } from "@app/validation/moduleConfig/audio.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/DynamicForm.js";
import { DynamicForm } from "@components/Form/DynamicForm.js";
export const Audio = (): JSX.Element => {
const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -43,7 +43,9 @@ export const Audio = (): JSX.Element => {
name: "bitrate",
label: "Bitrate",
description: "Bitrate to use for audio encoding",
enumValue: Protobuf.ModuleConfig_AudioConfig_Audio_Baud
properties: {
enumValue: Protobuf.ModuleConfig_AudioConfig_Audio_Baud
}
},
{
type: "number",

View File

@@ -1,7 +1,7 @@
import type { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/DynamicForm.js";
import { DynamicForm } from "@components/Form/DynamicForm.js";
export const CannedMessage = (): JSX.Element => {
const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -55,24 +55,30 @@ export const CannedMessage = (): JSX.Element => {
name: "inputbrokerEventCw",
label: "Clockwise event",
description: "Select input event.",
enumValue:
Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
properties: {
enumValue:
Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
}
},
{
type: "select",
name: "inputbrokerEventCcw",
label: "Counter Clockwise event",
description: "Select input event.",
enumValue:
Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
properties: {
enumValue:
Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
}
},
{
type: "select",
name: "inputbrokerEventPress",
label: "Press event",
description: "Select input event",
enumValue:
Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
properties: {
enumValue:
Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar
}
},
{
type: "toggle",

View File

@@ -1,7 +1,7 @@
import type { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/DynamicForm.js";
import { DynamicForm } from "@components/Form/DynamicForm.js";
export const ExternalNotification = (): JSX.Element => {
const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -37,12 +37,15 @@ export const ExternalNotification = (): JSX.Element => {
name: "outputMs",
label: "Output MS",
description: "Output MS",
suffix: "ms",
disabledBy: [
{
fieldName: "enabled"
}
]
],
properties: {
suffix: "ms"
}
},
{
type: "number",

View File

@@ -1,6 +1,6 @@
import type { MQTTValidation } from "@app/validation/moduleConfig/mqtt.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/DynamicForm.js";
import { DynamicForm } from "@components/Form/DynamicForm.js";
import { useDevice } from "@app/core/stores/deviceStore.js";
export const MQTT = (): JSX.Element => {

View File

@@ -1,7 +1,7 @@
import type { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/DynamicForm.js";
import { DynamicForm } from "@components/Form/DynamicForm.js";
export const RangeTest = (): JSX.Element => {
const { moduleConfig, setWorkingModuleConfig } = useDevice();

View File

@@ -1,7 +1,7 @@
import type { SerialValidation } from "@app/validation/moduleConfig/serial.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/DynamicForm.js";
import { DynamicForm } from "@components/Form/DynamicForm.js";
export const Serial = (): JSX.Element => {
const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -71,38 +71,47 @@ export const Serial = (): JSX.Element => {
name: "baud",
label: "Baud Rate",
description: "The serial baud rate",
enumValue: Protobuf.ModuleConfig_SerialConfig_Serial_Baud,
disabledBy: [
{
fieldName: "enabled"
}
]
],
properties: {
enumValue: Protobuf.ModuleConfig_SerialConfig_Serial_Baud
}
},
{
type: "number",
name: "timeout",
label: "Timeout",
suffix: "Seconds",
description:
"Seconds to wait before we consider your packet as 'done'",
disabledBy: [
{
fieldName: "enabled"
}
]
],
properties: {
suffix: "Seconds"
}
},
{
type: "select",
name: "mode",
label: "Mode",
description: "Select Mode",
enumValue: Protobuf.ModuleConfig_SerialConfig_Serial_Mode,
formatEnumName: true,
disabledBy: [
{
fieldName: "enabled"
}
]
],
properties: {
enumValue: Protobuf.ModuleConfig_SerialConfig_Serial_Mode,
formatEnumName: true
}
}
]
}

View File

@@ -1,7 +1,7 @@
import type { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/DynamicForm.js";
import { DynamicForm } from "@components/Form/DynamicForm.js";
export const StoreForward = (): JSX.Element => {
const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -48,12 +48,15 @@ export const StoreForward = (): JSX.Element => {
name: "records",
label: "Number of records",
description: "Number of records to store",
suffix: "Records",
disabledBy: [
{
fieldName: "enabled"
}
]
],
properties: {
suffix: "Records"
}
},
{
type: "number",

View File

@@ -1,7 +1,7 @@
import type { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/DynamicForm.js";
import { DynamicForm } from "@components/Form/DynamicForm.js";
export const Telemetry = (): JSX.Element => {
const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -29,15 +29,20 @@ export const Telemetry = (): JSX.Element => {
{
type: "number",
name: "deviceUpdateInterval",
label: "Interval to get telemetry data",
suffix: "seconds"
label: "Query Interval",
description: "Interval to get telemetry data",
properties: {
suffix: "seconds"
}
},
{
type: "number",
name: "environmentUpdateInterval",
label: "Update Interval",
description: "How often to send Metrics over the mesh",
suffix: "seconds"
properties: {
suffix: "seconds"
}
},
{
type: "toggle",