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

Add form sections

pull/55/head
Sacha Weatherstone 4 years ago
parent
db98f3c06c
commit
aa3acae352
No known key found for this signature in database GPG Key ID: 7AB2D7E206124B31
9 changed files with 320 additions and 216 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. 192
      src/components/PageComponents/Config/LoRa.tsx
  2. 169
      src/components/PageComponents/Config/Network.tsx
  3. 66
      src/components/PageComponents/Config/Position.tsx
  4. 67
      src/components/PageComponents/Config/Power.tsx
  5. 2
      src/components/PageComponents/Messages/Message.tsx
  6. 22
      src/components/form/FormSection.tsx
  7. 2
      src/pages/Messages.tsx
  8. 6
      src/validation/config/network.ts
  9. 10
      src/validation/config/position.ts

192
src/components/PageComponents/Config/LoRa.tsx
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>
); );
}; };

169
src/components/PageComponents/Config/Network.tsx
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>
); );
}; };

66
src/components/PageComponents/Config/Position.tsx
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}

67
src/components/PageComponents/Config/Power.tsx
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"

2
src/components/PageComponents/Messages/Message.tsx
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);

22
src/components/form/FormSection.tsx
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>
);
};

2
src/pages/Messages.tsx
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={[

6
src/validation/config/network.ts
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;

10
src/validation/config/position.ts
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;
} }

Write Preview
Loading…
Cancel
Save