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"
}
}
]
}