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

Add form sections

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-10-27 20:03:57 +10:00
parent db98f3c06c
commit aa3acae352
9 changed files with 320 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PageComponents/Config/LoRa.tsx
+98 -94
View File
@@ -4,6 +4,7 @@ import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form"; import { Controller, useForm, useWatch } from "react-hook-form";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { FormSection } from "@app/components/form/FormSection.js";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js"; import { Select } from "@app/components/form/Select.js";
import { Toggle } from "@app/components/form/Toggle.js"; import { Toggle } from "@app/components/form/Toggle.js";
@@ -70,74 +71,103 @@ export const LoRa = (): JSX.Element => {
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >
<Controller <FormSection title="Modem Settings">
name="usePreset" <Controller
control={control} name="usePreset"
render={({ field: { value, ...rest } }) => ( control={control}
<Toggle render={({ field: { value, ...rest } }) => (
label="Use Preset" <Toggle
description="Use one of the predefined modem presets" label="Use Preset"
checked={value} description="Use one of the predefined modem presets"
{...rest} checked={value}
/> {...rest}
)} />
/> )}
<Select />
label="Preset" <Select
description="Modem preset to use" label="Preset"
disabled={!usePreset} description="Modem preset to use"
{...register("modemPreset", { valueAsNumber: true })} disabled={!usePreset}
> {...register("modemPreset", { valueAsNumber: true })}
{renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)} >
</Select> {renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
</Select>
<Input <Input
label="Bandwidth" label="Bandwidth"
description="Max transmit power in dBm" description="Max transmit power in dBm"
type="number" type="number"
suffix="MHz" suffix="MHz"
error={errors.bandwidth?.message} error={errors.bandwidth?.message}
{...register("bandwidth", { {...register("bandwidth", {
valueAsNumber: true, valueAsNumber: true,
})} })}
disabled={usePreset} disabled={usePreset}
/> />
<Input <Input
label="Spread Factor" label="Spread Factor"
description="Max transmit power in dBm" description="Max transmit power in dBm"
type="number" type="number"
suffix="CPS" suffix="CPS"
error={errors.spreadFactor?.message} error={errors.spreadFactor?.message}
{...register("spreadFactor", { {...register("spreadFactor", {
valueAsNumber: true, valueAsNumber: true,
})} })}
disabled={usePreset} disabled={usePreset}
/> />
<Input <Input
label="Coding Rate" label="Coding Rate"
description="Max transmit power in dBm" description="Max transmit power in dBm"
type="number" type="number"
error={errors.codingRate?.message} error={errors.codingRate?.message}
{...register("codingRate", { {...register("codingRate", {
valueAsNumber: true, valueAsNumber: true,
})} })}
disabled={usePreset} disabled={usePreset}
/> />
<Input </FormSection>
label="Frequency Offset" <FormSection title="Radio Settings">
description="This is a description." <Controller
suffix="Hz" name="txEnabled"
type="number" control={control}
error={errors.frequencyOffset?.message} render={({ field: { value, ...rest } }) => (
{...register("frequencyOffset", { valueAsNumber: true })} <Toggle
/> label="Transmit Enabled"
<Select description="Description"
label="Region" checked={value}
description="This is a description." {...rest}
{...register("region", { valueAsNumber: true })} />
> )}
{renderOptions(Protobuf.Config_LoRaConfig_RegionCode)} />
</Select> <Select
label="Region"
description="This is a description."
{...register("region", { valueAsNumber: true })}
>
{renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
</Select>
<Input
label="Transmit Power"
description="Max transmit power in dBm"
type="number"
error={errors.txPower?.message}
{...register("txPower", { valueAsNumber: true })}
/>
<Input
label="Channel Number"
description="LoRa channel number"
type="number"
error={errors.channelNum?.message}
{...register("channelNum", { valueAsNumber: true })}
/>
<Input
label="Frequency Offset"
description="This is a description."
suffix="Hz"
type="number"
error={errors.frequencyOffset?.message}
{...register("frequencyOffset", { valueAsNumber: true })}
/>
</FormSection>
<Input <Input
label="Hop Limit" label="Hop Limit"
description="This is a description." description="This is a description."
@@ -146,32 +176,6 @@ export const LoRa = (): JSX.Element => {
error={errors.hopLimit?.message} error={errors.hopLimit?.message}
{...register("hopLimit", { valueAsNumber: true })} {...register("hopLimit", { valueAsNumber: true })}
/> />
<Controller
name="txEnabled"
control={control}
render={({ field: { value, ...rest } }) => (
<Toggle
label="Transmit Enabled"
description="Description"
checked={value}
{...rest}
/>
)}
/>
<Input
label="Transmit Power"
description="Max transmit power in dBm"
type="number"
error={errors.txPower?.message}
{...register("txPower", { valueAsNumber: true })}
/>
<Input
label="Channel Number"
description="LoRa channel number"
type="number"
error={errors.channelNum?.message}
{...register("channelNum", { valueAsNumber: true })}
/>
</Form> </Form>
); );
}; };
src/components/PageComponents/Config/Network.tsx
+86 -83
View File
@@ -4,6 +4,7 @@ import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form"; import { Controller, useForm, useWatch } from "react-hook-form";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { FormSection } from "@app/components/form/FormSection.js";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js"; import { Select } from "@app/components/form/Select.js";
import { Toggle } from "@app/components/form/Toggle.js"; import { Toggle } from "@app/components/form/Toggle.js";
@@ -75,41 +76,91 @@ export const Network = (): JSX.Element => {
dirty={isDirty} dirty={isDirty}
onSubmit={onSubmit} onSubmit={onSubmit}
> >
<Controller <FormSection title="WiFi Config">
name="wifiEnabled" <Controller
control={control} name="wifiEnabled"
render={({ field: { value, ...rest } }) => ( control={control}
<Toggle render={({ field: { value, ...rest } }) => (
label="WiFi Enabled" <Toggle
description="Enable or disbale the WiFi radio" label="WiFi Enabled"
checked={value} description="Enable or disbale the WiFi radio"
{...rest} checked={value}
/> {...rest}
)} />
/> )}
<Select />
label="WiFi Mode" <Select
description="How the WiFi radio should be used" label="WiFi Mode"
disabled={!wifiEnabled} description="How the WiFi radio should be used"
{...register("wifiMode", { valueAsNumber: true })} disabled={!wifiEnabled}
> {...register("wifiMode", { valueAsNumber: true })}
{renderOptions(Protobuf.Config_NetworkConfig_WiFiMode)} >
</Select> {renderOptions(Protobuf.Config_NetworkConfig_WiFiMode)}
<Input </Select>
label="SSID" <Input
description="Network name" label="SSID"
error={errors.wifiSsid?.message} description="Network name"
disabled={!wifiEnabled} error={errors.wifiSsid?.message}
{...register("wifiSsid")} disabled={!wifiEnabled}
/> {...register("wifiSsid")}
<Input />
label="PSK" <Input
type="password" label="PSK"
description="Network password" type="password"
error={errors.wifiPsk?.message} description="Network password"
disabled={!wifiEnabled} error={errors.wifiPsk?.message}
{...register("wifiPsk")} disabled={!wifiEnabled}
/> {...register("wifiPsk")}
/>
</FormSection>
<FormSection title="Ethernet Config">
<Controller
name="ethEnabled"
control={control}
render={({ field: { value, ...rest } }) => (
<Toggle
label="Ethernet Enabled"
description="Enable or disbale the Ethernet port"
checked={value}
{...rest}
/>
)}
/>
<Select
label="Ethernet Mode"
description="Address assignment selection"
disabled={!ethEnabled}
{...register("ethMode", { valueAsNumber: true })}
>
{renderOptions(Protobuf.Config_NetworkConfig_WiFiMode)}
</Select>
</FormSection>
<FormSection title="IP Config">
<Input
label="IP"
description="IP Address"
error={errors.wifiSsid?.message}
{...register("ethConfig.ip")}
/>
<Input
label="Gateway"
description="Default Gateway"
error={errors.wifiSsid?.message}
{...register("ethConfig.gateway")}
/>
<Input
label="Subnet"
description="Subnet Mask"
error={errors.wifiSsid?.message}
{...register("ethConfig.subnet")}
/>
<Input
label="DNS"
description="DNS Server"
error={errors.wifiSsid?.message}
{...register("ethConfig.dns")}
/>
</FormSection>
<Input <Input
label="NTP Server" label="NTP Server"
description="NTP server for time synchronization" description="NTP server for time synchronization"
@@ -117,54 +168,6 @@ export const Network = (): JSX.Element => {
disabled={!wifiEnabled && !ethEnabled} disabled={!wifiEnabled && !ethEnabled}
{...register("ntpServer")} {...register("ntpServer")}
/> />
<Controller
name="ethEnabled"
control={control}
render={({ field: { value, ...rest } }) => (
<Toggle
label="Ethernet Enabled"
description="Enable or disbale the Ethernet port"
checked={value}
{...rest}
/>
)}
/>
<Select
label="Ethernet Mode"
description="Address assignment selection"
disabled={!ethEnabled}
{...register("ethMode", { valueAsNumber: true })}
>
{renderOptions(Protobuf.Config_NetworkConfig_WiFiMode)}
</Select>
<Input
label="Ethernet IP"
description="IP Address"
error={errors.wifiSsid?.message}
disabled={!ethEnabled}
{...register("ethConfig.ip")}
/>
<Input
label="Ethernet Gateway"
description="Default Gatewat"
error={errors.wifiSsid?.message}
disabled={!ethEnabled}
{...register("ethConfig.gateway")}
/>
<Input
label="Ethernet Subnet"
description="Subnet Mask"
error={errors.wifiSsid?.message}
disabled={!ethEnabled}
{...register("ethConfig.subnet")}
/>
<Input
label="Ethernet DNS"
description="DNS Server"
error={errors.wifiSsid?.message}
disabled={!ethEnabled}
{...register("ethConfig.dns")}
/>
</Form> </Form>
); );
}; };
src/components/PageComponents/Config/Position.tsx
+64 -2
View File
@@ -1,15 +1,17 @@
import type React from "react"; import type React from "react";
import { useEffect } from "react"; import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm, useWatch } from "react-hook-form";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { FormSection } from "@app/components/form/FormSection.js";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js"; import { Toggle } from "@app/components/form/Toggle.js";
import { PositionValidation } from "@app/validation/config/position.js"; import { PositionValidation } from "@app/validation/config/position.js";
import { Form } from "@components/form/Form"; import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js"; import { useDevice } from "@core/providers/useDevice.js";
import { classValidatorResolver } from "@hookform/resolvers/class-validator"; import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
export const Position = (): JSX.Element => { export const Position = (): JSX.Element => {
const { config, connection } = useDevice(); const { config, connection } = useDevice();
@@ -24,18 +26,52 @@ export const Position = (): JSX.Element => {
resolver: classValidatorResolver(PositionValidation), resolver: classValidatorResolver(PositionValidation),
}); });
const fixedPositionEnabled = useWatch({
control,
name: "fixedPosition",
defaultValue: false,
});
useEffect(() => { useEffect(() => {
reset(config.position); reset(config.position);
}, [reset, config.position]); }, [reset, config.position]);
const onSubmit = handleSubmit((data) => { const onSubmit = handleSubmit((data) => {
const { fixedAlt, fixedLat, fixedLng, ...rest } = data;
if (connection) { if (connection) {
void toast.promise(
connection.sendPacket(
Protobuf.Position.toBinary(
Protobuf.Position.create({
altitude: fixedAlt,
latitudeI: fixedLat * 1e7,
longitudeI: fixedLng * 1e7,
})
),
Protobuf.PortNum.POSITION_APP,
undefined,
true,
undefined,
true,
false,
async () => {
reset({ ...data });
await Promise.resolve();
}
),
{
loading: "Saving...",
success: "Saved Channel",
error: "No response received",
}
);
void toast.promise( void toast.promise(
connection.setConfig( connection.setConfig(
{ {
payloadVariant: { payloadVariant: {
oneofKind: "position", oneofKind: "position",
position: data, position: rest,
}, },
}, },
async () => { async () => {
@@ -92,6 +128,32 @@ export const Position = (): JSX.Element => {
/> />
)} )}
/> />
<FormSection title="Fixed Position">
<Input
suffix="m"
label="Altitude"
type="number"
error={errors.fixedAlt?.message}
disabled={!fixedPositionEnabled}
{...register("fixedAlt", { valueAsNumber: true })}
/>
<Input
suffix="°"
label="Latitude"
type="number"
error={errors.fixedLat?.message}
disabled={!fixedPositionEnabled}
{...register("fixedLat", { valueAsNumber: true })}
/>
<Input
suffix="°"
label="Longitude"
type="number"
error={errors.fixedLng?.message}
disabled={!fixedPositionEnabled}
{...register("fixedLng", { valueAsNumber: true })}
/>
</FormSection>
<Controller <Controller
name="gpsEnabled" name="gpsEnabled"
control={control} control={control}
src/components/PageComponents/Config/Power.tsx
+35 -32
View File
@@ -4,6 +4,7 @@ import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { FormSection } from "@app/components/form/FormSection.js";
import { Input } from "@app/components/form/Input.js"; import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js"; import { Toggle } from "@app/components/form/Toggle.js";
import { PowerValidation } from "@app/validation/config/power.js"; import { PowerValidation } from "@app/validation/config/power.js";
@@ -87,38 +88,40 @@ export const Power = (): JSX.Element => {
error={errors.adcMultiplierOverride?.message} error={errors.adcMultiplierOverride?.message}
{...register("adcMultiplierOverride", { valueAsNumber: true })} {...register("adcMultiplierOverride", { valueAsNumber: true })}
/> />
<Input <FormSection title="Sleep Settings">
label="Minimum Wake Time" <Input
description="Minimum amount of time the device will stay awake for after receiving a packet" label="Minimum Wake Time"
suffix="Seconds" description="Minimum amount of time the device will stay awake for after receiving a packet"
type="number" suffix="Seconds"
error={errors.minWakeSecs?.message} type="number"
{...register("minWakeSecs", { valueAsNumber: true })} error={errors.minWakeSecs?.message}
/> {...register("minWakeSecs", { valueAsNumber: true })}
<Input />
label="Mesh SDS Timeout" <Input
description="The device will enter super deep sleep after this time" label="Mesh SDS Timeout"
suffix="Seconds" description="The device will enter super deep sleep after this time"
type="number" suffix="Seconds"
error={errors.meshSdsTimeoutSecs?.message} type="number"
{...register("meshSdsTimeoutSecs", { valueAsNumber: true })} error={errors.meshSdsTimeoutSecs?.message}
/> {...register("meshSdsTimeoutSecs", { valueAsNumber: true })}
<Input />
label="Super Deep Sleep Duration" <Input
description="How long the device will be in super deep sleep for" label="Super Deep Sleep Duration"
suffix="Seconds" description="How long the device will be in super deep sleep for"
type="number" suffix="Seconds"
error={errors.sdsSecs?.message} type="number"
{...register("sdsSecs", { valueAsNumber: true })} error={errors.sdsSecs?.message}
/> {...register("sdsSecs", { valueAsNumber: true })}
<Input />
label="Light Sleep Duration" <Input
description="How long the device will be in light sleep for" label="Light Sleep Duration"
suffix="Seconds" description="How long the device will be in light sleep for"
type="number" suffix="Seconds"
error={errors.lsSecs?.message} type="number"
{...register("lsSecs", { valueAsNumber: true })} error={errors.lsSecs?.message}
/> {...register("lsSecs", { valueAsNumber: true })}
/>
</FormSection>
<Input <Input
label="No Connection Bluetooth Disabled" label="No Connection Bluetooth Disabled"
description="If the device does not revieve a bluetooth connection, the BLE radio will be disabled after this long" description="If the device does not revieve a bluetooth connection, the BLE radio will be disabled after this long"
src/components/PageComponents/Messages/Message.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const Message = ({
message, message,
sender, sender,
}: MessageProps): JSX.Element => { }: MessageProps): JSX.Element => {
const { setPeerInfoOpen, setActivePeer } = useDevice(); const { setPeerInfoOpen, setActivePeer, connection } = useDevice();
const openPeer = (): void => { const openPeer = (): void => {
setActivePeer(message.packet.from); setActivePeer(message.packet.from);
src/components/form/FormSection.tsx
+22
View File
@@ -0,0 +1,22 @@
import type React from "react";
export interface FormSectionProps {
title: string;
children: React.ReactNode;
}
export const FormSection = ({
title,
children,
}: FormSectionProps): JSX.Element => {
return (
<div className="relative">
<h3 className="absolute left-2 -top-2 bg-white px-1 text-lg font-medium">
{title}
</h3>
<div className="mt-2 rounded-md border-2 border-orange-200 p-2">
{children}
</div>
</div>
);
};
src/pages/Messages.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export const MessagesPage = (): JSX.Element => {
}); });
return ( return (
<div className="flex w-full flex-col"> <div className="flex h-full w-full flex-col">
<TabbedContent <TabbedContent
tabs={tabs} tabs={tabs}
actions={[ actions={[
src/validation/config/network.ts
+3 -3
View File
@@ -24,11 +24,11 @@ export class NetworkValidation implements Protobuf.Config_NetworkConfig {
@IsEnum(Protobuf.Config_NetworkConfig_EthMode) @IsEnum(Protobuf.Config_NetworkConfig_EthMode)
ethMode: Protobuf.Config_NetworkConfig_EthMode; ethMode: Protobuf.Config_NetworkConfig_EthMode;
ethConfig: NetworkValidation_ethConfig; ethConfig: NetworkValidation_IpV4Config;
} }
export class NetworkValidation_ethConfig export class NetworkValidation_IpV4Config
implements Protobuf.Config_NetworkConfig_NetworkConfig implements Protobuf.Config_NetworkConfig_IpV4Config
{ {
@IsIP() @IsIP()
ip: number; ip: number;
src/validation/config/position.ts
+10
View File
@@ -23,4 +23,14 @@ export class PositionValidation implements Protobuf.Config_PositionConfig {
@IsInt() @IsInt()
positionFlags: number; positionFlags: number;
// fixed position fields
@IsInt()
fixedAlt: number;
@IsInt()
fixedLat: number;
@IsInt()
fixedLng: number;
} }