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

Make DynamicForm more modular

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PageComponents/Config/Bluetooth.tsx
+8 -5
View File
@@ -1,7 +1,7 @@
import type { BluetoothValidation } from "@app/validation/config/bluetooth.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 Bluetooth = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
@@ -37,13 +37,15 @@ export const Bluetooth = (): JSX.Element => {
name: "mode",
label: "Pairing mode",
description: "Pin selection behaviour.",
enumValue: Protobuf.Config_BluetoothConfig_PairingMode,
formatEnumName: true,
disabledBy: [
{
fieldName: "enabled"
}
]
],
properties: {
enumValue: Protobuf.Config_BluetoothConfig_PairingMode,
formatEnumName: true
}
},
{
type: "number",
@@ -60,7 +62,8 @@ export const Bluetooth = (): JSX.Element => {
{
fieldName: "enabled"
}
]
],
properties: {}
}
]
}
src/components/PageComponents/Config/Device.tsx
+12 -6
View File
@@ -1,7 +1,7 @@
import type { DeviceValidation } from "@app/validation/config/device.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 Device = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
@@ -31,8 +31,10 @@ export const Device = (): JSX.Element => {
name: "role",
label: "Role",
description: "What role the device performs on the mesh",
enumValue: Protobuf.Config_DeviceConfig_Role,
formatEnumName: true
properties: {
enumValue: Protobuf.Config_DeviceConfig_Role,
formatEnumName: true
}
},
{
type: "toggle",
@@ -64,15 +66,19 @@ export const Device = (): JSX.Element => {
name: "rebroadcastMode",
label: "Rebroadcast Mode",
description: "How to handle rebroadcasting",
enumValue: Protobuf.Config_DeviceConfig_RebroadcastMode,
formatEnumName: true
properties: {
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"
properties: {
suffix: "Seconds"
}
}
]
}
src/components/PageComponents/Config/Display.tsx
+18 -8
View File
@@ -1,7 +1,7 @@
import type { DisplayValidation } from "@app/validation/config/display.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 Display = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
@@ -31,14 +31,18 @@ export const Display = (): JSX.Element => {
name: "screenOnSecs",
label: "Screen Timeout",
description: "Turn off the display after this long",
suffix: "seconds"
properties: {
suffix: "seconds"
}
},
{
type: "select",
name: "gpsFormat",
label: "GPS Display Units",
description: "Coordinate display format",
enumValue: Protobuf.Config_DisplayConfig_GpsCoordinateFormat
properties: {
enumValue: Protobuf.Config_DisplayConfig_GpsCoordinateFormat
}
},
{
type: "number",
@@ -63,23 +67,29 @@ export const Display = (): JSX.Element => {
name: "units",
label: "Display Units",
description: "Display metric or imperial units",
enumValue: Protobuf.Config_DisplayConfig_DisplayUnits,
formatEnumName: true
properties: {
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
properties: {
enumValue: Protobuf.Config_DisplayConfig_OledType
}
},
{
type: "select",
name: "displaymode",
label: "Display Mode",
description: "Screen layout variant",
enumValue: Protobuf.Config_DisplayConfig_DisplayMode,
formatEnumName: true
properties: {
enumValue: Protobuf.Config_DisplayConfig_DisplayMode,
formatEnumName: true
}
},
{
type: "toggle",
src/components/PageComponents/Config/LoRa.tsx
+27 -12
View File
@@ -1,7 +1,7 @@
import type { LoRaValidation } from "@app/validation/config/lora.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 LoRa = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
@@ -31,7 +31,9 @@ export const LoRa = (): JSX.Element => {
name: "region",
label: "Region",
description: "Sets the region for your node",
enumValue: Protobuf.Config_LoRaConfig_RegionCode
properties: {
enumValue: Protobuf.Config_LoRaConfig_RegionCode
}
},
{
type: "number",
@@ -62,39 +64,46 @@ export const LoRa = (): JSX.Element => {
name: "modemPreset",
label: "Modem Preset",
description: "Modem preset to use",
enumValue: Protobuf.Config_LoRaConfig_ModemPreset,
formatEnumName: true,
disabledBy: [
{
fieldName: "usePreset"
}
]
],
properties: {
enumValue: Protobuf.Config_LoRaConfig_ModemPreset,
formatEnumName: true
}
},
{
type: "number",
name: "bandwidth",
label: "Bandwidth",
description: "Channel bandwidth in MHz",
suffix: "MHz",
disabledBy: [
{
fieldName: "usePreset",
invert: true
}
]
],
properties: {
suffix: "MHz"
}
},
{
type: "number",
name: "spreadFactor",
label: "Spreading Factor",
description: "Indicates the number of chirps per symbol",
suffix: "CPS",
disabledBy: [
{
fieldName: "usePreset",
invert: true
}
]
],
properties: {
suffix: "CPS"
}
},
{
type: "number",
@@ -125,7 +134,9 @@ export const LoRa = (): JSX.Element => {
name: "txPower",
label: "Transmit Power",
description: "Max transmit power",
suffix: "dBm"
properties: {
suffix: "dBm"
}
},
{
type: "toggle",
@@ -139,7 +150,9 @@ export const LoRa = (): JSX.Element => {
label: "Frequency Offset",
description:
"Frequency offset to correct for crystal calibration errors",
suffix: "Hz"
properties: {
suffix: "Hz"
}
},
{
type: "toggle",
@@ -152,7 +165,9 @@ export const LoRa = (): JSX.Element => {
name: "overrideFrequency",
label: "Override Frequency",
description: "Override frequency",
suffix: "Hz"
properties: {
suffix: "Hz"
}
}
]
}
src/components/PageComponents/Config/Network.tsx
+4 -2
View File
@@ -1,7 +1,7 @@
import type { NetworkValidation } from "@app/validation/config/network.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 Network = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
@@ -82,7 +82,9 @@ export const Network = (): JSX.Element => {
name: "addressMode",
label: "Address Mode",
description: "Address assignment selection",
enumValue: Protobuf.Config_NetworkConfig_AddressMode
properties: {
enumValue: Protobuf.Config_NetworkConfig_AddressMode
}
},
{
type: "text",
src/components/PageComponents/Config/Position.tsx
+4 -2
View File
@@ -1,7 +1,7 @@
import type { PositionValidation } from "@app/validation/config/position.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 Position = (): JSX.Element => {
const { config, nodes, hardware, setWorkingConfig } = useDevice();
@@ -51,7 +51,9 @@ export const Position = (): JSX.Element => {
name: "positionFlags",
label: "Position Flags",
description: "Configuration options for Position messages",
enumValue: Protobuf.Config_PositionConfig_PositionFlags
properties: {
enumValue: Protobuf.Config_PositionConfig_PositionFlags
}
},
{
type: "number",
src/components/PageComponents/Config/Power.tsx
+19 -7
View File
@@ -1,7 +1,7 @@
import type { PowerValidation } from "@app/validation/config/power.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 Power = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
@@ -39,7 +39,9 @@ export const Power = (): JSX.Element => {
label: "Shutdown on battery delay",
description:
"Automatically shutdown node after this long when on battery, 0 for indefinite",
suffix: "Seconds"
properties: {
suffix: "Seconds"
}
},
{
type: "number",
@@ -53,7 +55,9 @@ export const Power = (): JSX.Element => {
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"
properties: {
suffix: "Seconds"
}
}
]
},
@@ -67,7 +71,9 @@ export const Power = (): JSX.Element => {
label: "Mesh SDS Timeout",
description:
"The device will enter super deep sleep after this time",
suffix: "Seconds"
properties: {
suffix: "Seconds"
}
},
{
type: "number",
@@ -75,14 +81,18 @@ export const Power = (): JSX.Element => {
label: "Super Deep Sleep Duration",
description:
"How long the device will be in super deep sleep for",
suffix: "Seconds"
properties: {
suffix: "Seconds"
}
},
{
type: "number",
name: "lsSecs",
label: "Light Sleep Duration",
description: "How long the device will be in light sleep for",
suffix: "Seconds"
properties: {
suffix: "Seconds"
}
},
{
type: "number",
@@ -90,7 +100,9 @@ export const Power = (): JSX.Element => {
label: "Minimum Wake Time",
description:
"Minimum amount of time the device will stay awake for after receiving a packet",
suffix: "Seconds"
properties: {
suffix: "Seconds"
}
}
]
}
src/components/PageComponents/ModuleConfig/Audio.tsx
+4 -2
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",
src/components/PageComponents/ModuleConfig/CannedMessage.tsx
+13 -7
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",
src/components/PageComponents/ModuleConfig/ExternalNotification.tsx
+6 -3
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",
src/components/PageComponents/ModuleConfig/MQTT.tsx
+1 -1
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 => {
src/components/PageComponents/ModuleConfig/RangeTest.tsx
+1 -1
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();
src/components/PageComponents/ModuleConfig/Serial.tsx
+17 -8
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
}
}
]
}
src/components/PageComponents/ModuleConfig/StoreForward.tsx
+6 -3
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",
src/components/PageComponents/ModuleConfig/Telemetry.tsx
+9 -4
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",