mirror
/
meshastic.web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Make DynamicForm more modular

pull/101/head
Sacha Weatherstone 3 years ago
parent
d79a6965c0
commit
53a4ae290c
No known key found for this signature in database GPG Key ID: 7AB2D7E206124B31
23 changed files with 478 additions and 336 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 262
      src/components/DynamicForm.tsx
  2. 97
      src/components/Form/DynamicForm.tsx
  3. 41
      src/components/Form/DynamicFormField.tsx
  4. 48
      src/components/Form/FormInput.tsx
  5. 71
      src/components/Form/FormSelect.tsx
  6. 32
      src/components/Form/FormToggle.tsx
  7. 31
      src/components/Form/FormWrapper.tsx
  8. 13
      src/components/PageComponents/Config/Bluetooth.tsx
  9. 18
      src/components/PageComponents/Config/Device.tsx
  10. 26
      src/components/PageComponents/Config/Display.tsx
  11. 39
      src/components/PageComponents/Config/LoRa.tsx
  12. 6
      src/components/PageComponents/Config/Network.tsx
  13. 6
      src/components/PageComponents/Config/Position.tsx
  14. 26
      src/components/PageComponents/Config/Power.tsx
  15. 6
      src/components/PageComponents/ModuleConfig/Audio.tsx
  16. 20
      src/components/PageComponents/ModuleConfig/CannedMessage.tsx
  17. 9
      src/components/PageComponents/ModuleConfig/ExternalNotification.tsx
  18. 2
      src/components/PageComponents/ModuleConfig/MQTT.tsx
  19. 2
      src/components/PageComponents/ModuleConfig/RangeTest.tsx
  20. 25
      src/components/PageComponents/ModuleConfig/Serial.tsx
  21. 9
      src/components/PageComponents/ModuleConfig/StoreForward.tsx
  22. 13
      src/components/PageComponents/ModuleConfig/Telemetry.tsx
  23. 12
      src/components/PageLayout.tsx

262
src/components/DynamicForm.tsx
View File

@ -1,262 +0,0 @@
import {
Controller,
DeepPartial,
FieldValues,
Path,
SubmitHandler,
useForm
} from "react-hook-form";
import { Input } from "@components/UI/Input.js";
import { Label } from "@components/UI/Label.js";
import { ErrorMessage } from "@hookform/error-message";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from "@components/UI/Select.js";
import { Switch } from "@components/UI/Switch.js";
import { H4 } from "@components/UI/Typography/H4.js";
import { Subtle } from "@components/UI/Typography/Subtle.js";
interface DisabledBy<T> {
fieldName: Path<T>;
selector?: number;
invert?: boolean;
}
interface BasicFieldProps<T> {
name: Path<T>;
label: string;
description?: string;
active?: boolean;
required?: boolean;
disabledBy?: DisabledBy<T>[];
}
interface InputFieldProps<T> extends BasicFieldProps<T> {
type: "text" | "number" | "password";
suffix?: string;
}
interface SelectFieldProps<T> extends BasicFieldProps<T> {
type: "select" | "multiSelect";
enumValue: {
[s: string]: string | number;
};
formatEnumName?: boolean;
}
interface ToggleFieldProps<T> extends BasicFieldProps<T> {
type: "toggle";
}
export interface FormProps<T extends FieldValues> {
onSubmit: SubmitHandler<T>;
defaultValues?: DeepPartial<T>;
fieldGroups: {
label: string;
description: string;
fields: (InputFieldProps<T> | SelectFieldProps<T> | ToggleFieldProps<T>)[];
}[];
}
export function DynamicForm<T extends FieldValues>({
fieldGroups,
onSubmit,
defaultValues
}: FormProps<T>) {
const { register, handleSubmit, control, getValues } = useForm<T>({
mode: "onChange",
defaultValues: defaultValues
});
const isDisabled = (disabledBy?: DisabledBy<T>[]): boolean => {
if (!disabledBy) return false;
return disabledBy.some((field) => {
const value = getValues(field.fieldName);
if (typeof value === "boolean") return field.invert ? value : !value;
if (typeof value === "number")
return field.invert
? field.selector !== value
: field.selector === value;
return false;
});
};
return (
<form
className="space-y-8 divide-y divide-gray-200"
onChange={handleSubmit(onSubmit)}
>
{fieldGroups.map((fieldGroup, index) => (
<div
key={index}
className="space-y-8 divide-y divide-gray-200 sm:space-y-5"
>
<div>
<H4 className="font-medium">{fieldGroup.label}</H4>
<Subtle>{fieldGroup.description}</Subtle>
</div>
{fieldGroup.fields.map((field, index) => {
const fieldWrapperData: FieldWrapperProps = {
label: field.label,
description: field.description,
disabled: isDisabled(field.disabledBy)
};
switch (field.type) {
case "text":
return (
<FieldWrapper key={index} {...fieldWrapperData}>
<Input
type="text"
suffix={field.suffix}
disabled={fieldWrapperData.disabled}
{...register(field.name)}
/>
</FieldWrapper>
);
case "number":
return (
<FieldWrapper key={index} {...fieldWrapperData}>
<Controller
name={field.name}
control={control}
render={({ field: { value, onChange, ...rest } }) => (
<Input
type="number"
value={parseInt(value)}
suffix={field.suffix}
onChange={(e) => onChange(parseInt(e.target.value))}
disabled={fieldWrapperData.disabled}
{...rest}
/>
)}
/>
</FieldWrapper>
);
case "password":
return (
<FieldWrapper key={index} {...fieldWrapperData}>
<Input
type="password"
suffix={field.suffix}
disabled={fieldWrapperData.disabled}
// action={{
// icon: hidden ? EyeIcon : EyeOffIcon,
// onClick: () => {
// }
// }}
{...register(field.name)}
/>
</FieldWrapper>
);
case "toggle":
return (
<FieldWrapper key={index} {...fieldWrapperData}>
<Controller
name={field.name}
control={control}
render={({ field: { value, onChange, ...rest } }) => (
<Switch
checked={value}
onCheckedChange={onChange}
disabled={fieldWrapperData.disabled}
{...rest}
/>
)}
/>
</FieldWrapper>
);
case "select":
const optionsEnumValues = field.enumValue
? Object.entries(field.enumValue).filter(
(value) => typeof value[1] === "number"
)
: [];
return (
<FieldWrapper key={index} {...fieldWrapperData}>
<Controller
name={field.name}
control={control}
render={({ field: { value, onChange, ...rest } }) => (
<Select
onValueChange={(e) => onChange(parseInt(e))}
disabled={fieldWrapperData.disabled}
value={value?.toString()}
{...rest}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
{optionsEnumValues.map(([name, value], index) => (
<SelectItem key={index} value={value.toString()}>
{field.formatEnumName
? name
.replace(/_/g, " ")
.toLowerCase()
.split(" ")
.map(
(s) =>
s.charAt(0).toUpperCase() +
s.substring(1)
)
.join(" ")
: name}
</SelectItem>
))}
</SelectContent>
</Select>
)}
/>
</FieldWrapper>
);
case "multiSelect":
return (
<FieldWrapper key={index} {...fieldWrapperData}>
tmp
</FieldWrapper>
);
}
})}
</div>
))}
</form>
);
}
interface FieldWrapperProps {
label: string;
description?: string;
disabled?: boolean;
children?: React.ReactNode;
}
const FieldWrapper = ({
label,
description,
disabled,
children
}: FieldWrapperProps): JSX.Element => (
<div className="pt-6 sm:pt-5">
<div role="group" aria-labelledby="label-notifications">
<div className="sm:grid sm:grid-cols-3 sm:items-baseline sm:gap-4">
<Label>{label}</Label>
<div className="sm:col-span-2">
<div className="max-w-lg">
<p className="text-sm text-gray-500">{description}</p>
<div className="mt-4 space-y-4">
<div className="flex items-center">{children}</div>
</div>
</div>
</div>
</div>
</div>
</div>
);

97
src/components/Form/DynamicForm.tsx
View File

@ -0,0 +1,97 @@
import {
Control,
DeepPartial,
FieldValues,
Path,
SubmitHandler,
useForm
} from "react-hook-form";
import { H4 } from "@components/UI/Typography/H4.js";
import { Subtle } from "@components/UI/Typography/Subtle.js";
import { DynamicFormField, FieldProps } from "./DynamicFormField.js";
import { FieldWrapper } from "./FormWrapper.js";
interface DisabledBy<T> {
fieldName: Path<T>;
selector?: number;
invert?: boolean;
}
export interface BaseFormBuilderProps<T> {
name: Path<T>;
disabledBy?: DisabledBy<T>[];
label: string;
description?: string;
properties?: {};
}
export interface GenericFormElementProps<T extends FieldValues, Y> {
control: Control<T>;
disabled?: boolean;
field: Y;
}
export interface DynamicFormProps<T extends FieldValues> {
onSubmit: SubmitHandler<T>;
defaultValues?: DeepPartial<T>;
fieldGroups: {
label: string;
description: string;
fields: FieldProps<T>[];
}[];
}
export function DynamicForm<T extends FieldValues>({
fieldGroups,
onSubmit,
defaultValues
}: DynamicFormProps<T>) {
const { handleSubmit, control, getValues } = useForm<T>({
mode: "onChange",
defaultValues: defaultValues
});
const isDisabled = (disabledBy?: DisabledBy<T>[]): boolean => {
if (!disabledBy) return false;
return disabledBy.some((field) => {
const value = getValues(field.fieldName);
if (typeof value === "boolean") return field.invert ? value : !value;
if (typeof value === "number")
return field.invert
? field.selector !== value
: field.selector === value;
return false;
});
};
return (
<form
className="space-y-8 divide-y divide-gray-200"
onChange={handleSubmit(onSubmit)}
>
{fieldGroups.map((fieldGroup, index) => (
<div
key={index}
className="space-y-8 divide-y divide-gray-200 sm:space-y-5"
>
<div>
<H4 className="font-medium">{fieldGroup.label}</H4>
<Subtle>{fieldGroup.description}</Subtle>
</div>
{fieldGroup.fields.map((field, index) => (
<FieldWrapper label={field.label} description={field.description}>
<DynamicFormField
key={index}
field={field}
control={control}
disabled={isDisabled(field.disabledBy)}
/>
</FieldWrapper>
))}
</div>
))}
</form>
);
}

41
src/components/Form/DynamicFormField.tsx
View File

@ -0,0 +1,41 @@
import type { Control, FieldValues } from "react-hook-form";
import { GenericInput, InputFieldProps } from "./FormInput.js";
import { ToggleFieldProps, ToggleInput } from "./FormToggle.js";
import { SelectFieldProps, SelectInput } from "./FormSelect.js";
export type FieldProps<T> =
| InputFieldProps<T>
| SelectFieldProps<T>
| ToggleFieldProps<T>;
export interface DynamicFormFieldProps<T extends FieldValues> {
field: FieldProps<T>;
control: Control<T>;
disabled?: boolean;
}
export function DynamicFormField<T extends FieldValues>({
field,
control,
disabled
}: DynamicFormFieldProps<T>) {
switch (field.type) {
case "text":
case "password":
case "number":
return (
<GenericInput field={field} control={control} disabled={disabled} />
);
case "toggle":
return (
<ToggleInput field={field} control={control} disabled={disabled} />
);
case "select":
return (
<SelectInput field={field} control={control} disabled={disabled} />
);
case "multiSelect":
return <div>tmp</div>;
}
}

48
src/components/Form/FormInput.tsx
View File

@ -0,0 +1,48 @@
import type { LucideIcon } from "lucide-react";
import type {
BaseFormBuilderProps,
GenericFormElementProps
} from "./DynamicForm.js";
import { Input } from "../UI/Input.js";
import { Controller, FieldValues } from "react-hook-form";
export interface InputFieldProps<T> extends BaseFormBuilderProps<T> {
type: "text" | "number" | "password";
properties?: {
prefix?: string;
suffix?: string;
action?: {
icon: LucideIcon;
onClick: () => void;
};
};
}
export function GenericInput<T extends FieldValues>({
control,
disabled,
field
}: GenericFormElementProps<T, InputFieldProps<T>>) {
return (
<Controller
name={field.name}
control={control}
render={({ field: { value, onChange, ...rest } }) => (
<Input
type={field.type}
value={field.type === "number" ? parseInt(value) : value}
onChange={(e) =>
onChange(
field.type === "number"
? parseInt(e.target.value)
: e.target.value
)
}
disabled={disabled}
{...field.properties}
{...rest}
/>
)}
/>
);
}

71
src/components/Form/FormSelect.tsx
View File

@ -0,0 +1,71 @@
import type {
BaseFormBuilderProps,
GenericFormElementProps
} from "./DynamicForm.js";
import { Controller, FieldValues } from "react-hook-form";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from "../UI/Select.js";
export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {
type: "select" | "multiSelect";
properties: BaseFormBuilderProps<T>["properties"] & {
enumValue: {
[s: string]: string | number;
};
formatEnumName?: boolean;
};
}
export function SelectInput<T extends FieldValues>({
control,
disabled,
field
}: GenericFormElementProps<T, SelectFieldProps<T>>) {
return (
<Controller
name={field.name}
control={control}
render={({ field: { value, onChange, ...rest } }) => {
const { enumValue, formatEnumName, ...remainingProperties } =
field.properties;
const optionsEnumValues = enumValue
? Object.entries(enumValue).filter(
(value) => typeof value[1] === "number"
)
: [];
return (
<Select
onValueChange={(e) => onChange(parseInt(e))}
disabled={disabled}
value={value?.toString()}
{...remainingProperties}
{...rest}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
{optionsEnumValues.map(([name, value], index) => (
<SelectItem key={index} value={value.toString()}>
{formatEnumName
? name
.replace(/_/g, " ")
.toLowerCase()
.split(" ")
.map((s) => s.charAt(0).toUpperCase() + s.substring(1))
.join(" ")
: name}
</SelectItem>
))}
</SelectContent>
</Select>
);
}}
/>
);
}

32
src/components/Form/FormToggle.tsx
View File

@ -0,0 +1,32 @@
import type {
BaseFormBuilderProps,
GenericFormElementProps
} from "./DynamicForm.js";
import { Controller, FieldValues } from "react-hook-form";
import { Switch } from "../UI/Switch.js";
export interface ToggleFieldProps<T> extends BaseFormBuilderProps<T> {
type: "toggle";
}
export function ToggleInput<T extends FieldValues>({
control,
disabled,
field
}: GenericFormElementProps<T, ToggleFieldProps<T>>) {
return (
<Controller
name={field.name}
control={control}
render={({ field: { value, onChange, ...rest } }) => (
<Switch
checked={value}
onCheckedChange={onChange}
disabled={disabled}
{...field.properties}
{...rest}
/>
)}
/>
);
}

31
src/components/Form/FormWrapper.tsx
View File

@ -0,0 +1,31 @@
import { Label } from "../UI/Label.js";
import { ErrorMessage } from "@hookform/error-message";
export interface FieldWrapperProps {
label: string;
description?: string;
disabled?: boolean;
children?: React.ReactNode;
}
export const FieldWrapper = ({
label,
description,
children
}: FieldWrapperProps): JSX.Element => (
<div className="pt-6 sm:pt-5">
<div role="group" aria-labelledby="label-notifications">
<div className="sm:grid sm:grid-cols-3 sm:items-baseline sm:gap-4">
<Label>{label}</Label>
<div className="sm:col-span-2">
<div className="max-w-lg">
<p className="text-sm text-gray-500">{description}</p>
<div className="mt-4 space-y-4">
<div className="flex items-center">{children}</div>
</div>
</div>
</div>
</div>
</div>
</div>
);

13
src/components/PageComponents/Config/Bluetooth.tsx
View File

@ -1,7 +1,7 @@
import type { BluetoothValidation } from "@app/validation/config/bluetooth.js"; import type { BluetoothValidation } from "@app/validation/config/bluetooth.js";
import { useDevice } from "@core/stores/deviceStore.js"; import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs"; import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/DynamicForm.js"; import { DynamicForm } from "@components/Form/DynamicForm.js";
export const Bluetooth = (): JSX.Element => { export const Bluetooth = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice(); const { config, setWorkingConfig } = useDevice();
@ -37,13 +37,15 @@ export const Bluetooth = (): JSX.Element => {
name: "mode", name: "mode",
label: "Pairing mode", label: "Pairing mode",
description: "Pin selection behaviour.", description: "Pin selection behaviour.",
enumValue: Protobuf.Config_BluetoothConfig_PairingMode,
formatEnumName: true,
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled"
} }
] ],
properties: {
enumValue: Protobuf.Config_BluetoothConfig_PairingMode,
formatEnumName: true
}
}, },
{ {
type: "number", type: "number",
@ -60,7 +62,8 @@ export const Bluetooth = (): JSX.Element => {
{ {
fieldName: "enabled" fieldName: "enabled"
} }
] ],
properties: {}
} }
] ]
} }

18
src/components/PageComponents/Config/Device.tsx
View File

@ -1,7 +1,7 @@
import type { DeviceValidation } from "@app/validation/config/device.js"; import type { DeviceValidation } from "@app/validation/config/device.js";
import { useDevice } from "@core/stores/deviceStore.js"; import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs"; import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/DynamicForm.js"; import { DynamicForm } from "@components/Form/DynamicForm.js";
export const Device = (): JSX.Element => { export const Device = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice(); const { config, setWorkingConfig } = useDevice();
@ -31,8 +31,10 @@ export const Device = (): JSX.Element => {
name: "role", name: "role",
label: "Role", label: "Role",
description: "What role the device performs on the mesh", description: "What role the device performs on the mesh",
enumValue: Protobuf.Config_DeviceConfig_Role, properties: {
formatEnumName: true enumValue: Protobuf.Config_DeviceConfig_Role,
formatEnumName: true
}
}, },
{ {
type: "toggle", type: "toggle",
@ -64,15 +66,19 @@ export const Device = (): JSX.Element => {
name: "rebroadcastMode", name: "rebroadcastMode",
label: "Rebroadcast Mode", label: "Rebroadcast Mode",
description: "How to handle rebroadcasting", description: "How to handle rebroadcasting",
enumValue: Protobuf.Config_DeviceConfig_RebroadcastMode, properties: {
formatEnumName: true enumValue: Protobuf.Config_DeviceConfig_RebroadcastMode,
formatEnumName: true
}
}, },
{ {
type: "number", type: "number",
name: "nodeInfoBroadcastSecs", name: "nodeInfoBroadcastSecs",
label: "Node Info Broadcast Interval", label: "Node Info Broadcast Interval",
description: "How often to broadcast node info", description: "How often to broadcast node info",
suffix: "Seconds" properties: {
suffix: "Seconds"
}
} }
] ]
} }

26
src/components/PageComponents/Config/Display.tsx
View File

@ -1,7 +1,7 @@
import type { DisplayValidation } from "@app/validation/config/display.js"; import type { DisplayValidation } from "@app/validation/config/display.js";
import { useDevice } from "@core/stores/deviceStore.js"; import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs"; import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/DynamicForm.js"; import { DynamicForm } from "@components/Form/DynamicForm.js";
export const Display = (): JSX.Element => { export const Display = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice(); const { config, setWorkingConfig } = useDevice();
@ -31,14 +31,18 @@ export const Display = (): JSX.Element => {
name: "screenOnSecs", name: "screenOnSecs",
label: "Screen Timeout", label: "Screen Timeout",
description: "Turn off the display after this long", description: "Turn off the display after this long",
suffix: "seconds" properties: {
suffix: "seconds"
}
}, },
{ {
type: "select", type: "select",
name: "gpsFormat", name: "gpsFormat",
label: "GPS Display Units", label: "GPS Display Units",
description: "Coordinate display format", description: "Coordinate display format",
enumValue: Protobuf.Config_DisplayConfig_GpsCoordinateFormat properties: {
enumValue: Protobuf.Config_DisplayConfig_GpsCoordinateFormat
}
}, },
{ {
type: "number", type: "number",
@ -63,23 +67,29 @@ export const Display = (): JSX.Element => {
name: "units", name: "units",
label: "Display Units", label: "Display Units",
description: "Display metric or imperial units", description: "Display metric or imperial units",
enumValue: Protobuf.Config_DisplayConfig_DisplayUnits, properties: {
formatEnumName: true enumValue: Protobuf.Config_DisplayConfig_DisplayUnits,
formatEnumName: true
}
}, },
{ {
type: "select", type: "select",
name: "oled", name: "oled",
label: "OLED Type", label: "OLED Type",
description: "Type of OLED screen attached to the device", description: "Type of OLED screen attached to the device",
enumValue: Protobuf.Config_DisplayConfig_OledType properties: {
enumValue: Protobuf.Config_DisplayConfig_OledType
}
}, },
{ {
type: "select", type: "select",
name: "displaymode", name: "displaymode",
label: "Display Mode", label: "Display Mode",
description: "Screen layout variant", description: "Screen layout variant",
enumValue: Protobuf.Config_DisplayConfig_DisplayMode, properties: {
formatEnumName: true enumValue: Protobuf.Config_DisplayConfig_DisplayMode,
formatEnumName: true
}
}, },
{ {
type: "toggle", type: "toggle",

39
src/components/PageComponents/Config/LoRa.tsx
View File

@ -1,7 +1,7 @@
import type { LoRaValidation } from "@app/validation/config/lora.js"; import type { LoRaValidation } from "@app/validation/config/lora.js";
import { useDevice } from "@core/stores/deviceStore.js"; import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs"; import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/DynamicForm.js"; import { DynamicForm } from "@components/Form/DynamicForm.js";
export const LoRa = (): JSX.Element => { export const LoRa = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice(); const { config, setWorkingConfig } = useDevice();
@ -31,7 +31,9 @@ export const LoRa = (): JSX.Element => {
name: "region", name: "region",
label: "Region", label: "Region",
description: "Sets the region for your node", description: "Sets the region for your node",
enumValue: Protobuf.Config_LoRaConfig_RegionCode properties: {
enumValue: Protobuf.Config_LoRaConfig_RegionCode
}
}, },
{ {
type: "number", type: "number",
@ -62,39 +64,46 @@ export const LoRa = (): JSX.Element => {
name: "modemPreset", name: "modemPreset",
label: "Modem Preset", label: "Modem Preset",
description: "Modem preset to use", description: "Modem preset to use",
enumValue: Protobuf.Config_LoRaConfig_ModemPreset,
formatEnumName: true,
disabledBy: [ disabledBy: [
{ {
fieldName: "usePreset" fieldName: "usePreset"
} }
] ],
properties: {
enumValue: Protobuf.Config_LoRaConfig_ModemPreset,
formatEnumName: true
}
}, },
{ {
type: "number", type: "number",
name: "bandwidth", name: "bandwidth",
label: "Bandwidth", label: "Bandwidth",
description: "Channel bandwidth in MHz", description: "Channel bandwidth in MHz",
suffix: "MHz",
disabledBy: [ disabledBy: [
{ {
fieldName: "usePreset", fieldName: "usePreset",
invert: true invert: true
} }
] ],
properties: {
suffix: "MHz"
}
}, },
{ {
type: "number", type: "number",
name: "spreadFactor", name: "spreadFactor",
label: "Spreading Factor", label: "Spreading Factor",
description: "Indicates the number of chirps per symbol", description: "Indicates the number of chirps per symbol",
suffix: "CPS",
disabledBy: [ disabledBy: [
{ {
fieldName: "usePreset", fieldName: "usePreset",
invert: true invert: true
} }
] ],
properties: {
suffix: "CPS"
}
}, },
{ {
type: "number", type: "number",
@ -125,7 +134,9 @@ export const LoRa = (): JSX.Element => {
name: "txPower", name: "txPower",
label: "Transmit Power", label: "Transmit Power",
description: "Max transmit power", description: "Max transmit power",
suffix: "dBm" properties: {
suffix: "dBm"
}
}, },
{ {
type: "toggle", type: "toggle",
@ -139,7 +150,9 @@ export const LoRa = (): JSX.Element => {
label: "Frequency Offset", label: "Frequency Offset",
description: description:
"Frequency offset to correct for crystal calibration errors", "Frequency offset to correct for crystal calibration errors",
suffix: "Hz" properties: {
suffix: "Hz"
}
}, },
{ {
type: "toggle", type: "toggle",
@ -152,7 +165,9 @@ export const LoRa = (): JSX.Element => {
name: "overrideFrequency", name: "overrideFrequency",
label: "Override Frequency", label: "Override Frequency",
description: "Override frequency", description: "Override frequency",
suffix: "Hz" properties: {
suffix: "Hz"
}
} }
] ]
} }

6
src/components/PageComponents/Config/Network.tsx
View File

@ -1,7 +1,7 @@
import type { NetworkValidation } from "@app/validation/config/network.js"; import type { NetworkValidation } from "@app/validation/config/network.js";
import { useDevice } from "@core/stores/deviceStore.js"; import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs"; import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/DynamicForm.js"; import { DynamicForm } from "@components/Form/DynamicForm.js";
export const Network = (): JSX.Element => { export const Network = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice(); const { config, setWorkingConfig } = useDevice();
@ -82,7 +82,9 @@ export const Network = (): JSX.Element => {
name: "addressMode", name: "addressMode",
label: "Address Mode", label: "Address Mode",
description: "Address assignment selection", description: "Address assignment selection",
enumValue: Protobuf.Config_NetworkConfig_AddressMode properties: {
enumValue: Protobuf.Config_NetworkConfig_AddressMode
}
}, },
{ {
type: "text", type: "text",

6
src/components/PageComponents/Config/Position.tsx
View File

@ -1,7 +1,7 @@
import type { PositionValidation } from "@app/validation/config/position.js"; import type { PositionValidation } from "@app/validation/config/position.js";
import { useDevice } from "@core/stores/deviceStore.js"; import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs"; import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/DynamicForm.js"; import { DynamicForm } from "@components/Form/DynamicForm.js";
export const Position = (): JSX.Element => { export const Position = (): JSX.Element => {
const { config, nodes, hardware, setWorkingConfig } = useDevice(); const { config, nodes, hardware, setWorkingConfig } = useDevice();
@ -51,7 +51,9 @@ export const Position = (): JSX.Element => {
name: "positionFlags", name: "positionFlags",
label: "Position Flags", label: "Position Flags",
description: "Configuration options for Position messages", description: "Configuration options for Position messages",
enumValue: Protobuf.Config_PositionConfig_PositionFlags properties: {
enumValue: Protobuf.Config_PositionConfig_PositionFlags
}
}, },
{ {
type: "number", type: "number",

26
src/components/PageComponents/Config/Power.tsx
View File

@ -1,7 +1,7 @@
import type { PowerValidation } from "@app/validation/config/power.js"; import type { PowerValidation } from "@app/validation/config/power.js";
import { useDevice } from "@core/stores/deviceStore.js"; import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs"; import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/DynamicForm.js"; import { DynamicForm } from "@components/Form/DynamicForm.js";
export const Power = (): JSX.Element => { export const Power = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice(); const { config, setWorkingConfig } = useDevice();
@ -39,7 +39,9 @@ export const Power = (): JSX.Element => {
label: "Shutdown on battery delay", label: "Shutdown on battery delay",
description: description:
"Automatically shutdown node after this long when on battery, 0 for indefinite", "Automatically shutdown node after this long when on battery, 0 for indefinite",
suffix: "Seconds" properties: {
suffix: "Seconds"
}
}, },
{ {
type: "number", type: "number",
@ -53,7 +55,9 @@ export const Power = (): JSX.Element => {
label: "No Connection Bluetooth Disabled", label: "No Connection Bluetooth Disabled",
description: description:
"If the device does not receive a Bluetooth connection, the BLE radio will be disabled after this long", "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", label: "Mesh SDS Timeout",
description: description:
"The device will enter super deep sleep after this time", "The device will enter super deep sleep after this time",
suffix: "Seconds" properties: {
suffix: "Seconds"
}
}, },
{ {
type: "number", type: "number",
@ -75,14 +81,18 @@ export const Power = (): JSX.Element => {
label: "Super Deep Sleep Duration", label: "Super Deep Sleep Duration",
description: description:
"How long the device will be in super deep sleep for", "How long the device will be in super deep sleep for",
suffix: "Seconds" properties: {
suffix: "Seconds"
}
}, },
{ {
type: "number", type: "number",
name: "lsSecs", name: "lsSecs",
label: "Light Sleep Duration", label: "Light Sleep Duration",
description: "How long the device will be in light sleep for", description: "How long the device will be in light sleep for",
suffix: "Seconds" properties: {
suffix: "Seconds"
}
}, },
{ {
type: "number", type: "number",
@ -90,7 +100,9 @@ export const Power = (): JSX.Element => {
label: "Minimum Wake Time", label: "Minimum Wake Time",
description: description:
"Minimum amount of time the device will stay awake for after receiving a packet", "Minimum amount of time the device will stay awake for after receiving a packet",
suffix: "Seconds" properties: {
suffix: "Seconds"
}
} }
] ]
} }

6
src/components/PageComponents/ModuleConfig/Audio.tsx
View File

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

20
src/components/PageComponents/ModuleConfig/CannedMessage.tsx
View File

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

9
src/components/PageComponents/ModuleConfig/ExternalNotification.tsx
View File

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

2
src/components/PageComponents/ModuleConfig/MQTT.tsx
View File

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

2
src/components/PageComponents/ModuleConfig/RangeTest.tsx
View File

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

25
src/components/PageComponents/ModuleConfig/Serial.tsx
View File

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

9
src/components/PageComponents/ModuleConfig/StoreForward.tsx
View File

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

13
src/components/PageComponents/ModuleConfig/Telemetry.tsx
View File

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

12
src/components/PageLayout.tsx
View File

@ -1,7 +1,9 @@
import { cn } from "@app/core/utils/cn.js";
import { LucideIcon, AlignLeftIcon } from "lucide-react"; import { LucideIcon, AlignLeftIcon } from "lucide-react";
export interface PageLayoutProps { export interface PageLayoutProps {
label: string; label: string;
noPadding?: boolean;
children: React.ReactNode; children: React.ReactNode;
actions?: { actions?: {
icon: LucideIcon; icon: LucideIcon;
@ -10,7 +12,8 @@ export interface PageLayoutProps {
} }
export const PageLayout = ({ export const PageLayout = ({
label: title, label,
noPadding,
actions, actions,
children children
}: PageLayoutProps): JSX.Element => { }: PageLayoutProps): JSX.Element => {
@ -22,7 +25,7 @@ export const PageLayout = ({
</button> </button>
<div className="flex flex-1 items-center justify-between px-4 md:px-0"> <div className="flex flex-1 items-center justify-between px-4 md:px-0">
<div className="flex w-full items-center"> <div className="flex w-full items-center">
<span className="w-full text-lg font-medium">{title}</span> <span className="w-full text-lg font-medium">{label}</span>
<div className="flex justify-end space-x-4"> <div className="flex justify-end space-x-4">
{actions?.map((action, index) => ( {actions?.map((action, index) => (
<button <button
@ -37,7 +40,10 @@ export const PageLayout = ({
</div> </div>
</div> </div>
</div> </div>
{children} {/* relative flex h-full w-full flex-col */}
<div className={cn("flex h-full w-full flex-col", !noPadding && "p-3")}>
{children}
</div>
</div> </div>
); );
}; };

Write Preview
Loading…
Cancel
Save