mirror/web
1
0
Fork 0
mirror of https://github.com/meshtastic/web.git synced 2026-04-27 09:22:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Start moduleConfig & general import cleanup

Browse Source
This commit is contained in:
Sacha Weatherstone
2023-01-29 17:36:31 +10:00
parent 6340809ab3
commit e36032045f
84 changed files with 286 additions and 780 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.trunk/trunk.yaml
View File

@@ -10,8 +10,6 @@ lint:
enabled:
- markdownlint@0.33.0
- prettier@2.8.3
- oxipng@8.0.0
- svgo@3.0.2
- git-diff-check
- actionlint@1.6.23
- gitleaks@8.15.3

11
src/App.tsx
View File

@@ -1,8 +1,5 @@
import type React from "react";
import { MapProvider } from "react-map-gl";
import { useAppStore } from "@app/core/stores/appStore.js";
import { useAppStore } from "@core/stores/appStore.js";
import { DeviceWrapper } from "@app/DeviceWrapper.js";
import { PageRouter } from "@app/PageRouter.js";
import { CommandPalette } from "@components/CommandPalette/Index.js";
@@ -12,9 +9,9 @@ import { NewDevice } from "@components/NewDevice.js";
import { Sidebar } from "@components/Sidebar.js";
import { useDeviceStore } from "@core/stores/deviceStore.js";
import { Drawer } from "./components/Drawer/index.js";
import { ThemeController } from "./components/generic/ThemeController.js";
import { BottomNav } from "./Nav/BottomNav.js";
import { Drawer } from "@components/Drawer/index.js";
import { ThemeController } from "@components/generic/ThemeController.js";
import { BottomNav } from "@app/Nav/BottomNav.js";
export const App = (): JSX.Element => {
const { getDevice } = useDeviceStore();

5
src/DeviceWrapper.tsx
View File

@@ -1,10 +1,9 @@
import type React from "react";
import { DeviceContext } from "@core/providers/useDevice.js";
import type { Device } from "@core/stores/deviceStore.js";
import type { ReactNode } from "react";
export interface DeviceWrapperProps {
children: React.ReactNode;
children: ReactNode;
device?: Device;
}

5
src/Nav/BottomNav.tsx
View File

@@ -1,9 +1,8 @@
import type React from "react";
import { GitBranchIcon } from "@primer/octicons-react";
import type { ReactNode } from "react";
export interface BottomNavProps {
children: React.ReactNode;
children: ReactNode;
}
export const BottomNav = ({ children }: BottomNavProps): JSX.Element => {

2
src/Nav/NavSpacer.tsx
View File

@@ -1,5 +1,3 @@
import type React from "react";
export const NavSpacer = (): JSX.Element => {
return <div className="h-1 w-10 rounded-full bg-accentMuted" />;
};

10
src/Nav/PageNav.tsx
View File

@@ -1,8 +1,6 @@
import type React from "react";
import type { SVGProps } from "react";
import { useDevice } from "@app/core/providers/useDevice.js";
import type { Page } from "@app/core/stores/deviceStore.js";
import type { ComponentType, SVGProps } from "react";
import { useDevice } from "@core/providers/useDevice.js";
import type { Page } from "@core/stores/deviceStore.js";
import {
BeakerIcon,
ChatBubbleBottomCenterTextIcon,
@@ -17,7 +15,7 @@ export const PageNav = (): JSX.Element => {
interface NavLink {
name: string;
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
icon: ComponentType<SVGProps<SVGSVGElement>>;
page: Page;
}

2
src/PageRouter.tsx
View File

@@ -1,5 +1,3 @@
import type React from "react";
import { useDevice } from "@core/providers/useDevice.js";
import { ChannelsPage } from "@pages/Channels.js";
import { ConfigPage } from "@pages/Config/index.js";

2
src/components/CommandPalette/GroupView.tsx
View File

@@ -1,5 +1,3 @@
import type React from "react";
import type { Group } from "@components/CommandPalette/Index.js";
import { Combobox } from "@headlessui/react";
import { ChevronRightIcon } from "@heroicons/react/24/outline";

20
src/components/CommandPalette/Index.tsx
View File

@@ -1,11 +1,8 @@
import type React from "react";
import { Fragment, useEffect, useState } from "react";
import { ComponentType, Fragment, SVGProps, useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { useDevice } from "@app/core/providers/useDevice.js";
import { useAppStore } from "@app/core/stores/appStore.js";
import { useDeviceStore } from "@app/core/stores/deviceStore.js";
import { useDevice } from "@core/providers/useDevice.js";
import { useAppStore } from "@core/stores/appStore.js";
import { useDeviceStore } from "@core/stores/deviceStore.js";
import { GroupView } from "@components/CommandPalette/GroupView.js";
import { NoResults } from "@components/CommandPalette/NoResults.js";
import { PaletteTransition } from "@components/CommandPalette/PaletteTransition.js";
@@ -39,18 +36,17 @@ import {
WindowIcon,
XCircleIcon
} from "@heroicons/react/24/outline";
import { Blur } from "../generic/Blur.js";
import { ThemeController } from "../generic/ThemeController.js";
import { Blur } from "@components/generic/Blur.js";
import { ThemeController } from "@components/generic/ThemeController.js";
export interface Group {
name: string;
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
icon: ComponentType<SVGProps<SVGSVGElement>>;
commands: Command[];
}
export interface Command {
name: string;
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
icon: ComponentType<SVGProps<SVGSVGElement>>;
action?: () => void;
subItems?: SubItem[];
tags?: string[];

2
src/components/CommandPalette/NoResults.tsx
View File

@@ -1,5 +1,3 @@
import type React from "react";
import { Mono } from "@components/generic/Mono.js";
import { CommandLineIcon } from "@heroicons/react/24/outline";

6
src/components/CommandPalette/PaletteTransition.tsx
View File

@@ -1,10 +1,8 @@
import type React from "react";
import { Fragment } from "react";
import { Fragment, ReactNode } from "react";
import { Transition } from "@headlessui/react";
export interface PaletteTransitionProps {
children: React.ReactNode;
children: ReactNode;
}
export const PaletteTransition = ({

2
src/components/CommandPalette/SearchBox.tsx
View File

@@ -1,5 +1,3 @@
import type React from "react";
import { Combobox } from "@headlessui/react";
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";

2
src/components/CommandPalette/SearchResult.tsx
View File

@@ -1,5 +1,3 @@
import type React from "react";
import type { Group } from "@components/CommandPalette/Index.js";
import { Combobox } from "@headlessui/react";
import { ChevronRightIcon } from "@heroicons/react/24/outline";

22
src/components/DeviceSelector.tsx
View File

@@ -1,17 +1,15 @@
import type React from "react";
import { useAppStore } from "@app/core/stores/appStore.js";
import { useDeviceStore } from "@app/core/stores/deviceStore.js";
import { useAppStore } from "@core/stores/appStore.js";
import { useDeviceStore } from "@core/stores/deviceStore.js";
import { NavSpacer } from "@app/Nav/NavSpacer.js";
import { PageNav } from "@app/Nav/PageNav.js";
import { Mono } from "@components/generic/Mono.js";
import { Hashicon } from "@emeraldpay/hashicon-react";
import { PlusIcon } from "@heroicons/react/24/outline";
import { MoonIcon, SunIcon } from "@primer/octicons-react";
export const DeviceSelector = (): JSX.Element => {
const { getDevices } = useDeviceStore();
const { selectedDevice, setSelectedDevice, darkMode, setDarkMode } = useAppStore();
const { selectedDevice, setSelectedDevice, darkMode, setDarkMode } =
useAppStore();
return (
<div className="flex h-full w-14 items-center gap-3 bg-backgroundPrimary pt-3 [writing-mode:vertical-rl]">
@@ -55,12 +53,12 @@ export const DeviceSelector = (): JSX.Element => {
<NavSpacer />
<div onClick={() => setDarkMode(!darkMode)} className="bg-backgroundPrimary py-5 px-4 hover:brightness-hover active:brightness-press text-textSecondary hover:text-textPrimary">{
darkMode ? (
<SunIcon className="w-4" />
) : (
<MoonIcon className="w-4" />
)}</div>
<div
onClick={() => setDarkMode(!darkMode)}
className="bg-backgroundPrimary py-5 px-4 text-textSecondary hover:text-textPrimary hover:brightness-hover active:brightness-press"
>
{darkMode ? <SunIcon className="w-4" /> : <MoonIcon className="w-4" />}
</div>
<img
src={darkMode ? "Logo_White.svg" : "Logo_Black.svg"}

11
src/components/Dialog/DialogManager.tsx
View File

@@ -1,11 +1,8 @@
import type React from "react";
import { useDevice } from "@app/core/providers/useDevice.js";
import { useDevice } from "@core/providers/useDevice.js";
import { QRDialog } from "@components/Dialog/QRDialog.js";
import { RebootDialog } from "./RebootDialog.js";
import { ShutdownDialog } from "./ShutdownDialog.js";
import { ImportDialog } from "./ImportDialog.js";
import { RebootDialog } from "@components/Dialog/RebootDialog.js";
import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.js";
import { ImportDialog } from "@components/Dialog/ImportDialog.js";
export const DialogManager = (): JSX.Element => {
const { channels, config, dialog, setDialogOpen } = useDevice();

18
src/components/Dialog/ImportDialog.tsx
View File

@@ -1,20 +1,14 @@
import type React from "react";
import { useEffect, useState } from "react";
import { fromByteArray, toByteArray } from "base64-js";
import { toast } from "react-hot-toast";
import { QRCode } from "react-qrcode-logo";
import { toByteArray } from "base64-js";
import { Checkbox } from "@components/form/Checkbox.js";
import { Input } from "@components/form/Input.js";
import { Dialog } from "@components/generic/Dialog.js";
import { ClipboardIcon } from "@heroicons/react/24/outline";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { Select } from "../form/Select.js";
import { renderOptions } from "@app/core/utils/selectEnumOptions.js";
import { Toggle } from "../form/Toggle.js";
import { Button } from "../form/Button.js";
import { useDevice } from "@app/core/providers/useDevice.js";
import { Select } from "@components/form/Select.js";
import { renderOptions } from "@core/utils/selectEnumOptions.js";
import { Toggle } from "@components/form/Toggle.js";
import { Button } from "@components/form/Button.js";
import { useDevice } from "@core/providers/useDevice.js";
export interface ImportDialogProps {
isOpen: boolean;

3
src/components/Dialog/QRDialog.tsx
View File

@@ -1,10 +1,7 @@
import type React from "react";
import { useEffect, useState } from "react";
import { fromByteArray } from "base64-js";
import { toast } from "react-hot-toast";
import { QRCode } from "react-qrcode-logo";
import { Checkbox } from "@components/form/Checkbox.js";
import { Input } from "@components/form/Input.js";
import { Dialog } from "@components/generic/Dialog.js";

9
src/components/Dialog/RebootDialog.tsx
View File

@@ -1,12 +1,9 @@
import type React from "react";
import { useState } from "react";
import { useDevice } from "@app/core/providers/useDevice.js";
import { useDevice } from "@core/providers/useDevice.js";
import { Dialog } from "@components/generic/Dialog.js";
import { ArrowPathIcon, ClockIcon } from "@heroicons/react/24/outline";
import { Button } from "../form/Button.js";
import { Input } from "../form/Input.js";
import { Button } from "@components/form/Button.js";
import { Input } from "@components/form/Input.js";
export interface RebootDialogProps {
isOpen: boolean;

9
src/components/Dialog/ShutdownDialog.tsx
View File

@@ -1,12 +1,9 @@
import type React from "react";
import { useState } from "react";
import { useDevice } from "@app/core/providers/useDevice.js";
import { useDevice } from "@core/providers/useDevice.js";
import { Dialog } from "@components/generic/Dialog.js";
import { ClockIcon, PowerIcon } from "@heroicons/react/24/outline";
import { Button } from "../form/Button.js";
import { Input } from "../form/Input.js";
import { Button } from "@components/form/Button.js";
import { Input } from "@components/form/Input.js";
export interface ShutdownDialogProps {
isOpen: boolean;

6
src/components/Drawer/Metrics.tsx
View File

@@ -1,7 +1,4 @@
import "chartjs-adapter-date-fns";
import type React from "react";
import {
Chart as ChartJS,
Filler,
@@ -13,8 +10,7 @@ import {
Tooltip
} from "chart.js";
import { Line } from "react-chartjs-2";
import { useDevice } from "@app/core/providers/useDevice.js";
import { useDevice } from "@core/providers/useDevice.js";
export const Metrics = (): JSX.Element => {
const { nodes, hardware } = useDevice();

4
src/components/Drawer/Sensor.tsx
View File

@@ -1,7 +1,5 @@
import "chartjs-adapter-date-fns";
import type React from "react";
import {
Chart as ChartJS,
Filler,
@@ -14,7 +12,7 @@ import {
} from "chart.js";
import { Line } from "react-chartjs-2";
import { useDevice } from "@app/core/providers/useDevice.js";
import { useDevice } from "@core/providers/useDevice.js";
export const Sensor = (): JSX.Element => {
const { nodes, hardware } = useDevice();

2
src/components/Drawer/index.tsx
View File

@@ -1,6 +1,4 @@
import type React from "react";
import { useState } from "react";
import { Metrics } from "@components/Drawer/Metrics.js";
import { Notifications } from "@components/Drawer/Notifications.js";
import { Sensor } from "@components/Drawer/Sensor.js";

6
src/components/NewDevice.tsx
View File

@@ -4,7 +4,7 @@ import { TabbedContent, TabType } from "@components/generic/TabbedContent.js";
import { BLE } from "@components/PageComponents/Connect/BLE.js";
import { HTTP } from "@components/PageComponents/Connect/HTTP.js";
import { Serial } from "@components/PageComponents/Connect/Serial.js";
import { useAppStore } from "@app/core/stores/appStore.js";
import { useAppStore } from "@core/stores/appStore.js";
import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
export const NewDevice = () => {
@@ -37,9 +37,7 @@ export const NewDevice = () => {
return (
<div className="m-auto h-96 w-96">
<TabbedContent
tabs={tabs}
/>
<TabbedContent tabs={tabs} />
</div>
);
};

15
src/components/PageComponents/AppConfig/Map.tsx
View File

@@ -1,13 +1,10 @@
import type React from "react";
import { Controller, useFieldArray, useForm } from "react-hook-form";
import { Button } from "@app/components/form/Button.js";
import { IconButton } from "@app/components/form/IconButton.js";
import { InfoWrapper } from "@app/components/form/InfoWrapper.js";
import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { useAppStore } from "@app/core/stores/appStore.js";
import { Button } from "@components/form/Button.js";
import { IconButton } from "@components/form/IconButton.js";
import { InfoWrapper } from "@components/form/InfoWrapper.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { useAppStore } from "@core/stores/appStore.js";
import { MapValidation } from "@app/validation/appConfig/map.js";
import { Form } from "@components/form/Form";
import { TrashIcon } from "@heroicons/react/24/outline";

3
src/components/PageComponents/Channel.tsx
View File

@@ -1,10 +1,7 @@
import type React from "react";
import { useEffect, useState } from "react";
import { fromByteArray, toByteArray } from "base64-js";
import { Controller, useForm } from "react-hook-form";
import { toast } from "react-hot-toast";
import { ChannelSettingsValidation } from "@app/validation/channelSettings.js";
import { Form } from "@components/form/Form";
import { Input } from "@components/form/Input.js";

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

@@ -1,12 +1,8 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Select } from "@components/form/Select.js";
import { Toggle } from "@components/form/Toggle.js";
import { BluetoothValidation } from "@app/validation/config/bluetooth.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -17,17 +13,12 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const Bluetooth = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
control,
reset
} = useForm<BluetoothValidation>({
mode: "onChange",
defaultValues: config.bluetooth,
resolver: classValidatorResolver(BluetoothValidation)
});
const { register, handleSubmit, control, reset } =
useForm<BluetoothValidation>({
mode: "onChange",
defaultValues: config.bluetooth,
resolver: classValidatorResolver(BluetoothValidation)
});
useEffect(() => {
reset(config.bluetooth);

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

@@ -1,12 +1,8 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Select } from "@components/form/Select.js";
import { Toggle } from "@components/form/Toggle.js";
import { DeviceValidation } from "@app/validation/config/device.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -16,13 +12,7 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const Device = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
control,
reset
} = useForm<DeviceValidation>({
const { register, handleSubmit, control, reset } = useForm<DeviceValidation>({
mode: "onChange",
defaultValues: config.device,
resolver: classValidatorResolver(DeviceValidation)
@@ -80,14 +70,12 @@ export const Device = (): JSX.Element => {
label="Button Pin"
description="Button pin override"
type="number"
error={errors.buttonGpio?.message}
{...register("buttonGpio", { valueAsNumber: true })}
/>
<Input
label="Buzzer Pin"
description="Buzzer pin override"
type="number"
error={errors.buzzerGpio?.message}
{...register("buzzerGpio", { valueAsNumber: true })}
/>
</Form>

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

@@ -1,12 +1,8 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Select } from "@components/form/Select.js";
import { Toggle } from "@components/form/Toggle.js";
import { DisplayValidation } from "@app/validation/config/display.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -16,17 +12,13 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const Display = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
control
} = useForm<DisplayValidation>({
mode: "onChange",
defaultValues: config.display,
resolver: classValidatorResolver(DisplayValidation)
});
const { register, handleSubmit, reset, control } = useForm<DisplayValidation>(
{
mode: "onChange",
defaultValues: config.display,
resolver: classValidatorResolver(DisplayValidation)
}
);
useEffect(() => {
reset(config.display);

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

@@ -1,13 +1,9 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { toast } from "react-hot-toast";
import { FormSection } from "@app/components/form/FormSection.js";
import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { FormSection } from "@components/form/FormSection.js";
import { Input } from "@components/form/Input.js";
import { Select } from "@components/form/Select.js";
import { Toggle } from "@components/form/Toggle.js";
import { LoRaValidation } from "@app/validation/config/lora.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -18,13 +14,7 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const LoRa = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
control,
reset
} = useForm<LoRaValidation>({
const { register, handleSubmit, control, reset } = useForm<LoRaValidation>({
mode: "onChange",
defaultValues: config.lora,
resolver: classValidatorResolver(LoRaValidation)
@@ -81,7 +71,6 @@ export const LoRa = (): JSX.Element => {
description="Channel bandwidth in MHz"
type="number"
suffix="MHz"
error={errors.bandwidth?.message}
{...register("bandwidth", {
valueAsNumber: true
})}
@@ -91,7 +80,6 @@ export const LoRa = (): JSX.Element => {
description="Indicates the number of chirps per symbol"
type="number"
suffix="CPS"
error={errors.spreadFactor?.message}
{...register("spreadFactor", {
valueAsNumber: true
})}
@@ -100,7 +88,6 @@ export const LoRa = (): JSX.Element => {
label="Coding Rate"
description="The denominator of the coding rate"
type="number"
error={errors.codingRate?.message}
{...register("codingRate", {
valueAsNumber: true
})}
@@ -132,14 +119,12 @@ export const LoRa = (): JSX.Element => {
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
@@ -147,7 +132,6 @@ export const LoRa = (): JSX.Element => {
description="Frequency offset to correct for crystal calibration errors"
suffix="Hz"
type="number"
error={errors.frequencyOffset?.message}
{...register("frequencyOffset", { valueAsNumber: true })}
/>
<Controller
@@ -168,7 +152,6 @@ export const LoRa = (): JSX.Element => {
description="Maximum number of hops"
suffix="Hops"
type="number"
error={errors.hopLimit?.message}
{...register("hopLimit", { valueAsNumber: true })}
/>
</Form>

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

@@ -1,15 +1,11 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { toast } from "react-hot-toast";
import { FormSection } from "@app/components/form/FormSection.js";
import { Input } from "@app/components/form/Input.js";
import { IPInput } from "@app/components/form/IPInput.js";
import { Select } from "@app/components/form/Select.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { renderOptions } from "@app/core/utils/selectEnumOptions.js";
import { FormSection } from "@components/form/FormSection.js";
import { Input } from "@components/form/Input.js";
import { IPInput } from "@components/form/IPInput.js";
import { Select } from "@components/form/Select.js";
import { Toggle } from "@components/form/Toggle.js";
import { renderOptions } from "@core/utils/selectEnumOptions.js";
import { NetworkValidation } from "@app/validation/config/network.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -19,17 +15,13 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const Network = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
control,
reset
} = useForm<NetworkValidation>({
mode: "onChange",
defaultValues: config.network,
resolver: classValidatorResolver(NetworkValidation)
});
const { register, handleSubmit, control, reset } = useForm<NetworkValidation>(
{
mode: "onChange",
defaultValues: config.network,
resolver: classValidatorResolver(NetworkValidation)
}
);
const wifiEnabled = useWatch({
control,
@@ -66,19 +58,6 @@ export const Network = (): JSX.Element => {
return (
<Form onSubmit={onSubmit}>
<ErrorMessage errors={errors} name="wifiEnabled" />
<ErrorMessage errors={errors} name="wifiMode" />
<ErrorMessage errors={errors} name="wifiSsid" />
<ErrorMessage errors={errors} name="wifiPsk" />
<ErrorMessage errors={errors} name="ntpServer" />
<ErrorMessage errors={errors} name="ethEnabled" />
<ErrorMessage errors={errors} name="addressMode" />
<ErrorMessage errors={errors} name="ethConfig" />
<ErrorMessage errors={errors} name="ip" />
<ErrorMessage errors={errors} name="gateway" />
<ErrorMessage errors={errors} name="subnet" />
<ErrorMessage errors={errors} name="dns" />
<FormSection title="WiFi Config">
<Controller
name="wifiEnabled"
@@ -95,7 +74,6 @@ export const Network = (): JSX.Element => {
<Input
label="SSID"
description="Network name"
error={errors.wifiSsid?.message}
disabled={!wifiEnabled}
{...register("wifiSsid", { disabled: !wifiEnabled })}
/>
@@ -103,7 +81,6 @@ export const Network = (): JSX.Element => {
label="PSK"
type="password"
description="Network password"
error={errors.wifiPsk?.message}
disabled={!wifiEnabled}
{...register("wifiPsk", { disabled: !wifiEnabled })}
/>
@@ -138,26 +115,21 @@ export const Network = (): JSX.Element => {
<IPInput
label="IP"
description="IP Address"
error={errors.ipv4Config?.ip?.message}
{...register("ipv4Config.ip", { valueAsNumber: true })}
/>
<IPInput
label="Gateway"
description="Default Gateway"
error={errors.ipv4Config?.gateway?.message}
{...register("ipv4Config.gateway", { valueAsNumber: true })}
/>
<IPInput
label="Subnet"
description="Subnet Mask"
error={errors.ipv4Config?.subnet?.message}
{...register("ipv4Config.subnet", { valueAsNumber: true })}
/>
<IPInput
label="DNS"
// type="number" //prevent
description="DNS Server"
error={errors.ipv4Config?.dns?.message}
{...register("ipv4Config.dns", { valueAsNumber: true })}
/>
</>
@@ -166,13 +138,11 @@ export const Network = (): JSX.Element => {
<Input
label="NTP Server"
description="NTP server for time synchronization"
error={errors.ntpServer?.message}
{...register("ntpServer")}
/>
<Input
label="Rsyslog Server"
description="Rsyslog server for external logging"
error={errors.rsyslogServer?.message}
{...register("rsyslogServer")}
/>
</Form>

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

@@ -1,13 +1,9 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { toast } from "react-hot-toast";
import { BitwiseSelect } from "@app/components/form/BitwiseSelect.js";
import { FormSection } from "@app/components/form/FormSection.js";
import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { BitwiseSelect } from "@components/form/BitwiseSelect.js";
import { FormSection } from "@components/form/FormSection.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { PositionValidation } from "@app/validation/config/position.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -19,22 +15,17 @@ export const Position = (): JSX.Element => {
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
control
} = useForm<PositionValidation>({
mode: "onChange",
defaultValues: {
fixedAlt: myNode?.data.position?.altitude,
fixedLat: (myNode?.data.position?.latitudeI ?? 0) / 1e7,
fixedLng: (myNode?.data.position?.longitudeI ?? 0) / 1e7,
...config.position
},
resolver: classValidatorResolver(PositionValidation)
});
const { register, handleSubmit, reset, control } =
useForm<PositionValidation>({
mode: "onChange",
defaultValues: {
fixedAlt: myNode?.data.position?.altitude,
fixedLat: (myNode?.data.position?.latitudeI ?? 0) / 1e7,
fixedLng: (myNode?.data.position?.longitudeI ?? 0) / 1e7,
...config.position
},
resolver: classValidatorResolver(PositionValidation)
});
const fixedPositionEnabled = useWatch({
control,
@@ -153,7 +144,6 @@ export const Position = (): JSX.Element => {
<BitwiseSelect
label="Position Flags"
description="Configuration options for POSITION messages"
error={error?.message}
selected={value}
decodeEnun={Protobuf.Config_PositionConfig_PositionFlags}
onChange={onChange}
@@ -180,7 +170,6 @@ export const Position = (): JSX.Element => {
suffix="m"
label="Altitude"
type="number"
error={errors.fixedAlt?.message}
disabled={!fixedPositionEnabled}
{...register("fixedAlt", { valueAsNumber: true })}
/>
@@ -188,7 +177,6 @@ export const Position = (): JSX.Element => {
suffix="°"
label="Latitude"
type="number"
error={errors.fixedLat?.message}
disabled={!fixedPositionEnabled}
{...register("fixedLat", { valueAsNumber: true })}
/>
@@ -196,7 +184,6 @@ export const Position = (): JSX.Element => {
suffix="°"
label="Longitude"
type="number"
error={errors.fixedLng?.message}
disabled={!fixedPositionEnabled}
{...register("fixedLng", { valueAsNumber: true })}
/>
@@ -209,7 +196,6 @@ export const Position = (): JSX.Element => {
label="Broadcast Interval"
description="How often your position is sent out over the mesh"
type="number"
error={errors.positionBroadcastSecs?.message}
{...register("positionBroadcastSecs", { valueAsNumber: true })}
/>
<Input
@@ -217,7 +203,6 @@ export const Position = (): JSX.Element => {
label="GPS Update Interval"
description="How often a GPS fix should be acquired"
type="number"
error={errors.gpsUpdateInterval?.message}
{...register("gpsUpdateInterval", { valueAsNumber: true })}
/>
<Input
@@ -225,7 +210,6 @@ export const Position = (): JSX.Element => {
label="Fix Attempt Duration"
description="How long the device will try to get a fix for"
type="number"
error={errors.gpsAttemptTime?.message}
{...register("gpsAttemptTime", { valueAsNumber: true })}
/>
</FormSection>
@@ -233,14 +217,12 @@ export const Position = (): JSX.Element => {
label="RX Pin"
description="GPS Module RX pin override"
type="number"
error={errors.rxGpio?.message}
{...register("rxGpio", { valueAsNumber: true })}
/>
<Input
label="TX Pin"
description="GPS Module TX pin override"
type="number"
error={errors.txGpio?.message}
{...register("txGpio", { valueAsNumber: true })}
/>
</Form>

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

@@ -1,12 +1,8 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { toast } from "react-hot-toast";
import { FormSection } from "@app/components/form/FormSection.js";
import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { FormSection } from "@components/form/FormSection.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { PowerValidation } from "@app/validation/config/power.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -15,13 +11,7 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
export const Power = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
control
} = useForm<PowerValidation>({
const { register, handleSubmit, reset, control } = useForm<PowerValidation>({
mode: "onChange",
defaultValues: config.power,
resolver: classValidatorResolver(PowerValidation)
@@ -49,7 +39,6 @@ export const Power = (): JSX.Element => {
description="Automatically shutdown node after this long when on battery, 0 for indefinite"
suffix="Seconds"
type="number"
error={errors.onBatteryShutdownAfterSecs?.message}
{...register("onBatteryShutdownAfterSecs", { valueAsNumber: true })}
/>
<Controller
@@ -68,7 +57,6 @@ export const Power = (): JSX.Element => {
label="ADC Multiplier Override ratio"
description="Used for tweaking battery voltage reading"
type="number"
error={errors.adcMultiplierOverride?.message}
{...register("adcMultiplierOverride", { valueAsNumber: true })}
/>
<FormSection title="Sleep Settings">
@@ -77,7 +65,6 @@ export const Power = (): JSX.Element => {
description="Minimum amount of time the device will stay awake for after receiving a packet"
suffix="Seconds"
type="number"
error={errors.minWakeSecs?.message}
{...register("minWakeSecs", { valueAsNumber: true })}
/>
<Input
@@ -85,7 +72,6 @@ export const Power = (): JSX.Element => {
description="The device will enter super deep sleep after this time"
suffix="Seconds"
type="number"
error={errors.meshSdsTimeoutSecs?.message}
{...register("meshSdsTimeoutSecs", { valueAsNumber: true })}
/>
<Input
@@ -93,7 +79,6 @@ export const Power = (): JSX.Element => {
description="How long the device will be in super deep sleep for"
suffix="Seconds"
type="number"
error={errors.sdsSecs?.message}
{...register("sdsSecs", { valueAsNumber: true })}
/>
<Input
@@ -101,7 +86,6 @@ export const Power = (): JSX.Element => {
description="How long the device will be in light sleep for"
suffix="Seconds"
type="number"
error={errors.lsSecs?.message}
{...register("lsSecs", { valueAsNumber: true })}
/>
</FormSection>
@@ -110,7 +94,6 @@ export const Power = (): JSX.Element => {
description="If the device does not receive a Bluetooth connection, the BLE radio will be disabled after this long"
suffix="Seconds"
type="number"
error={errors.waitBluetoothSecs?.message}
{...register("waitBluetoothSecs", { valueAsNumber: true })}
/>
</Form>

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

@@ -1,18 +1,14 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { toast } from "react-hot-toast";
import { base16 } from "rfc4648";
import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Select } from "@components/form/Select.js";
import { Toggle } from "@components/form/Toggle.js";
import { UserValidation } from "@app/validation/config/user.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
import { renderOptions } from "@core/utils/selectEnumOptions.js";
import { ErrorMessage } from "@hookform/error-message";
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
@@ -21,13 +17,7 @@ export const User = (): JSX.Element => {
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
control
} = useForm<UserValidation>({
const { register, handleSubmit, reset, control } = useForm<UserValidation>({
defaultValues: myNode?.data.user,
resolver: classValidatorResolver(UserValidation)
});
@@ -61,12 +51,7 @@ export const User = (): JSX.Element => {
});
return (
<Form
onSubmit={onSubmit}
>
<ErrorMessage errors={errors} name="longName" />
<ErrorMessage errors={errors} name="shortName" />
<ErrorMessage errors={errors} name="isLicensed" />
<Form onSubmit={onSubmit}>
<Input
label="Device Name"
description="Personalised name for this device."
@@ -105,7 +90,6 @@ export const User = (): JSX.Element => {
label="Device ID"
disabled
description="Preset unique identifier for this device."
error={errors.id?.message}
value={myNode?.data.user?.id}
/>
<Select

4
src/components/PageComponents/Connect/BLE.tsx
View File

@@ -1,7 +1,5 @@
import type React from "react";
import { useCallback, useEffect, useState } from "react";
import { Mono } from "@app/components/generic/Mono.js";
import { Mono } from "@components/generic/Mono.js";
import { Button } from "@components/form/Button.js";
import { useAppStore } from "@core/stores/appStore.js";
import { useDeviceStore } from "@core/stores/deviceStore.js";

7
src/components/PageComponents/Connect/HTTP.tsx
View File

@@ -1,9 +1,6 @@
import type React from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { Button } from "@components/form/Button.js";
import { useAppStore } from "@core/stores/appStore.js";
import { useDeviceStore } from "@core/stores/deviceStore.js";

4
src/components/PageComponents/Connect/Serial.tsx
View File

@@ -1,7 +1,5 @@
import type React from "react";
import { useCallback, useEffect, useState } from "react";
import { Mono } from "@app/components/generic/Mono.js";
import { Mono } from "@components/generic/Mono.js";
import { Button } from "@components/form/Button.js";
import { useAppStore } from "@core/stores/appStore.js";
import { useDeviceStore } from "@core/stores/deviceStore.js";

2
src/components/PageComponents/Map/MapControlls.tsx
View File

@@ -2,7 +2,7 @@ import { useEffect } from "react";
import { useMap } from "react-map-gl";
import { useDevice } from "@app/core/providers/useDevice.js";
import { useDevice } from "@core/providers/useDevice.js";
import {
MagnifyingGlassMinusIcon,
MagnifyingGlassPlusIcon,

2
src/components/PageComponents/Messages/ChannelChat.tsx
View File

@@ -1,5 +1,3 @@
import type React from "react";
import { Message } from "@components/PageComponents/Messages/Message.js";
import { MessageInput } from "@components/PageComponents/Messages/MessageInput.js";
import { useDevice } from "@core/providers/useDevice.js";

2
src/components/PageComponents/Messages/Message.tsx
View File

@@ -1,5 +1,3 @@
import type React from "react";
import { WaypointMessage } from "@components/PageComponents/Messages/WaypointMessage.js";
import { useDevice } from "@core/providers/useDevice.js";
import type { AllMessageTypes } from "@core/stores/deviceStore.js";

6
src/components/PageComponents/Messages/MessageInput.tsx
View File

@@ -1,7 +1,5 @@
import type React from "react";
import { IconButton } from "@app/components/form/IconButton.js";
import { Input } from "@app/components/form/Input.js";
import { IconButton } from "@components/form/IconButton.js";
import { Input } from "@components/form/Input.js";
import { useDevice } from "@core/providers/useDevice.js";
import type { Channel } from "@core/stores/deviceStore.js";
import { MapPinIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";

6
src/components/PageComponents/Messages/NewLocationMessage.tsx
View File

@@ -1,7 +1,5 @@
import type React from "react";
import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js";
import { Input } from "@components/form/Input.js";
import { Select } from "@components/form/Select.js";
import { Button } from "@components/form/Button.js";
import { useDevice } from "@core/providers/useDevice.js";
import { renderOptions } from "@core/utils/selectEnumOptions.js";

4
src/components/PageComponents/Messages/WaypointMessage.tsx
View File

@@ -1,6 +1,4 @@
import type React from "react";
import { useDevice } from "@app/core/providers/useDevice.js";
import { useDevice } from "@core/providers/useDevice.js";
import { toMGRS } from "@core/utils/toMGRS.js";
import { MapPinIcon } from "@heroicons/react/24/outline";

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

@@ -1,12 +1,8 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Select } from "@components/form/Select.js";
import { Toggle } from "@components/form/Toggle.js";
import { AudioValidation } from "@app/validation/moduleConfig/audio.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -15,14 +11,9 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
export const Audio = (): JSX.Element => {
const { moduleConfig, connection, setModuleConfig } = useDevice();
const {
register,
handleSubmit,
formState: { isDirty },
reset,
control
} = useForm<AudioValidation>({
const { moduleConfig, setWorkingModuleConfig } = useDevice();
const { register, handleSubmit, reset, control } = useForm<AudioValidation>({
mode: "onChange",
defaultValues: moduleConfig.audio,
resolver: classValidatorResolver(AudioValidation)
});
@@ -32,34 +23,14 @@ export const Audio = (): JSX.Element => {
}, [reset, moduleConfig.audio]);
const onSubmit = handleSubmit((data) => {
if (connection) {
void toast.promise(
connection
.setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "audio",
value: data
}
})
)
.then(() =>
setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "audio",
value: data
}
})
)
),
{
loading: "Saving...",
success: "Saved Audio Config, Restarting Node",
error: "No response received"
setWorkingModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "audio",
value: data
}
);
}
})
);
});
return (

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

@@ -1,12 +1,8 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js";
import { Select } from "@app/components/form/Select.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Select } from "@components/form/Select.js";
import { Toggle } from "@components/form/Toggle.js";
import { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -15,7 +11,7 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
export const CannedMessage = (): JSX.Element => {
const { moduleConfig, connection, setModuleConfig } = useDevice();
const { moduleConfig, setWorkingModuleConfig } = useDevice();
const {
register,
handleSubmit,
@@ -23,6 +19,7 @@ export const CannedMessage = (): JSX.Element => {
reset,
control
} = useForm<CannedMessageValidation>({
mode: "onChange",
defaultValues: moduleConfig.cannedMessage,
resolver: classValidatorResolver(CannedMessageValidation)
});
@@ -38,34 +35,14 @@ export const CannedMessage = (): JSX.Element => {
}, [reset, moduleConfig.cannedMessage]);
const onSubmit = handleSubmit((data) => {
if (connection) {
void toast.promise(
connection
.setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "cannedMessage",
value: data
}
})
)
.then(() =>
setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "cannedMessage",
value: data
}
})
)
),
{
loading: "Saving...",
success: "Saved Canned Message Config, Restarting Node",
error: "No response received"
setWorkingModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "cannedMessage",
value: data
}
);
}
})
);
});
return (

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

@@ -1,11 +1,7 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -13,50 +9,26 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
export const ExternalNotification = (): JSX.Element => {
const { moduleConfig, connection, setModuleConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
control
} = useForm<ExternalNotificationValidation>({
defaultValues: moduleConfig.externalNotification,
resolver: classValidatorResolver(ExternalNotificationValidation)
});
const { moduleConfig, setWorkingModuleConfig } = useDevice();
const { register, handleSubmit, reset, control } =
useForm<ExternalNotificationValidation>({
mode: "onChange",
defaultValues: moduleConfig.externalNotification,
resolver: classValidatorResolver(ExternalNotificationValidation)
});
useEffect(() => {
reset(moduleConfig.externalNotification);
}, [reset, moduleConfig.externalNotification]);
const onSubmit = handleSubmit((data) => {
if (connection) {
void toast.promise(
connection
.setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "externalNotification",
value: data
}
})
)
.then(() =>
setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "externalNotification",
value: data
}
})
)
),
{
loading: "Saving...",
success: "Saved External Notification Config, Restarting Node",
error: "No response received"
setWorkingModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "externalNotification",
value: data
}
);
}
})
);
});
const moduleEnabled = useWatch({

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

@@ -1,11 +1,7 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { MQTTValidation } from "@app/validation/moduleConfig/mqtt.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -13,7 +9,7 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
export const MQTT = (): JSX.Element => {
const { moduleConfig, connection, setModuleConfig } = useDevice();
const { moduleConfig, setWorkingModuleConfig } = useDevice();
const {
register,
handleSubmit,
@@ -21,6 +17,7 @@ export const MQTT = (): JSX.Element => {
reset,
control
} = useForm<MQTTValidation>({
mode: "onChange",
defaultValues: moduleConfig.mqtt,
resolver: classValidatorResolver(MQTTValidation)
});
@@ -36,34 +33,14 @@ export const MQTT = (): JSX.Element => {
}, [reset, moduleConfig.mqtt]);
const onSubmit = handleSubmit((data) => {
if (connection) {
void toast.promise(
connection
.setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "mqtt",
value: data
}
})
)
.then(() =>
setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "mqtt",
value: data
}
})
)
),
{
loading: "Saving...",
success: "Saved MQTT Config, Restarting Node",
error: "No response received"
setWorkingModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "mqtt",
value: data
}
);
}
})
);
});
return (
@@ -82,7 +59,7 @@ export const MQTT = (): JSX.Element => {
/>
<Input
label="MQTT Server Address"
//description="Description"
description="Description"
disabled={!moduleEnabled}
{...register("address")}
/>

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

@@ -1,11 +1,7 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -13,51 +9,27 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
export const RangeTest = (): JSX.Element => {
const { moduleConfig, connection, setModuleConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
control
} = useForm<RangeTestValidation>({
defaultValues: moduleConfig.rangeTest,
resolver: classValidatorResolver(RangeTestValidation)
});
const { moduleConfig, setWorkingModuleConfig } = useDevice();
const { register, handleSubmit, reset, control } =
useForm<RangeTestValidation>({
mode: "onChange",
defaultValues: moduleConfig.rangeTest,
resolver: classValidatorResolver(RangeTestValidation)
});
useEffect(() => {
reset(moduleConfig.rangeTest);
}, [reset, moduleConfig.rangeTest]);
const onSubmit = handleSubmit((data) => {
if (connection) {
void toast.promise(
connection
.setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "rangeTest",
value: data
}
})
)
.then(() =>
setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "rangeTest",
value: data
}
})
)
),
{
loading: "Saving...",
success: "Saved Range Test Config, Restarting Node",
error: "No response received"
setWorkingModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "rangeTest",
value: data
}
);
}
})
);
});
const moduleEnabled = useWatch({
@@ -67,9 +39,7 @@ export const RangeTest = (): JSX.Element => {
});
return (
<Form
onSubmit={onSubmit}
>
<Form onSubmit={onSubmit}>
<Controller
name="enabled"
control={control}

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

@@ -1,28 +1,19 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { SerialValidation } from "@app/validation/moduleConfig/serial.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { renderOptions } from "@app/core/utils/selectEnumOptions";
import { Select } from "@app/components/form/Select";
import { renderOptions } from "@core/utils/selectEnumOptions";
import { Select } from "@components/form/Select";
export const Serial = (): JSX.Element => {
const { moduleConfig, connection, setModuleConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
control
} = useForm<SerialValidation>({
const { moduleConfig, setWorkingModuleConfig } = useDevice();
const { register, handleSubmit, reset, control } = useForm<SerialValidation>({
mode: "onChange",
defaultValues: moduleConfig.serial,
resolver: classValidatorResolver(SerialValidation)
});
@@ -32,34 +23,14 @@ export const Serial = (): JSX.Element => {
}, [reset, moduleConfig.serial]);
const onSubmit = handleSubmit((data) => {
if (connection) {
void toast.promise(
connection
.setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "serial",
value: data
}
})
)
.then(() =>
setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "serial",
value: data
}
})
)
),
{
loading: "Saving...",
success: "Saved Serial Config, Restarting Node",
error: "No response received"
setWorkingModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "serial",
value: data
}
);
}
})
);
});
const moduleEnabled = useWatch({

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

@@ -1,11 +1,7 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -13,51 +9,27 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
export const StoreForward = (): JSX.Element => {
const { moduleConfig, connection, setModuleConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
control
} = useForm<StoreForwardValidation>({
defaultValues: moduleConfig.storeForward,
resolver: classValidatorResolver(StoreForwardValidation)
});
const { moduleConfig, setWorkingModuleConfig } = useDevice();
const { register, handleSubmit, reset, control } =
useForm<StoreForwardValidation>({
mode: "onChange",
defaultValues: moduleConfig.storeForward,
resolver: classValidatorResolver(StoreForwardValidation)
});
useEffect(() => {
reset(moduleConfig.storeForward);
}, [reset, moduleConfig.storeForward]);
const onSubmit = handleSubmit((data) => {
if (connection) {
void toast.promise(
connection
.setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "storeForward",
value: data
}
})
)
.then(() =>
setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "storeForward",
value: data
}
})
)
),
{
loading: "Saving...",
success: "Saved Store & Forward Config, Restarting Node",
error: "No response received"
setWorkingModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "storeForward",
value: data
}
);
}
})
);
});
const moduleEnabled = useWatch({

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

@@ -1,11 +1,7 @@
import type React from "react";
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { toast } from "react-hot-toast";
import { Input } from "@app/components/form/Input.js";
import { Toggle } from "@app/components/form/Toggle.js";
import { Input } from "@components/form/Input.js";
import { Toggle } from "@components/form/Toggle.js";
import { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js";
import { Form } from "@components/form/Form";
import { useDevice } from "@core/providers/useDevice.js";
@@ -13,51 +9,27 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
export const Telemetry = (): JSX.Element => {
const { moduleConfig, connection, setModuleConfig } = useDevice();
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
control
} = useForm<TelemetryValidation>({
defaultValues: moduleConfig.telemetry,
resolver: classValidatorResolver(TelemetryValidation)
});
const { moduleConfig, setWorkingModuleConfig } = useDevice();
const { register, handleSubmit, reset, control } =
useForm<TelemetryValidation>({
mode: "onChange",
defaultValues: moduleConfig.telemetry,
resolver: classValidatorResolver(TelemetryValidation)
});
useEffect(() => {
reset(moduleConfig.telemetry);
}, [reset, moduleConfig.telemetry]);
const onSubmit = handleSubmit((data) => {
if (connection) {
void toast.promise(
connection
.setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "telemetry",
value: data
}
})
)
.then(() =>
setModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "telemetry",
value: data
}
})
)
),
{
loading: "Saving...",
success: "Saved Telemetry Config, Restarting Node",
error: "No response received"
setWorkingModuleConfig(
new Protobuf.ModuleConfig({
payloadVariant: {
case: "telemetry",
value: data
}
);
}
})
);
});
return (

10
src/components/Sidebar.tsx
View File

@@ -1,7 +1,5 @@
import type React from "react";
import { useDevice } from "@app/core/providers/useDevice.js";
import { toMGRS } from "@app/core/utils/toMGRS.js";
import { useDevice } from "@core/providers/useDevice.js";
import { toMGRS } from "@core/utils/toMGRS.js";
import { BatteryWidget } from "@components/Widgets/BatteryWidget.js";
import { DeviceWidget } from "@components/Widgets/DeviceWidget.js";
import { PeersWidget } from "@components/Widgets/PeersWidget.js";
@@ -10,9 +8,7 @@ import { useAppStore } from "@core/stores/appStore.js";
import { useDeviceStore } from "@core/stores/deviceStore.js";
import { CommandLineIcon } from "@heroicons/react/24/outline";
import { Types } from "@meshtastic/meshtasticjs";
import { Input } from "./form/Input.js";
import { Button } from "./form/Button.js";
import { Input } from "@components/form/Input.js";
export const Sidebar = (): JSX.Element => {
const { removeDevice } = useDeviceStore();

5
src/components/Widgets/BatteryWidget.tsx
View File

@@ -1,9 +1,6 @@
import type React from "react";
import { useEffect, useState } from "react";
import prettyMilliseconds from "pretty-ms";
import { useDevice } from "@app/core/providers/useDevice.js";
import { useDevice } from "@core/providers/useDevice.js";
import { Battery100Icon, ClockIcon } from "@heroicons/react/24/outline";
export interface BatteryWidgetProps {

4
src/components/Widgets/DeviceWidget.tsx
View File

@@ -1,5 +1,3 @@
import type React from "react";
import { Button } from "@components/form/Button.js";
import { Hashicon } from "@emeraldpay/hashicon-react";
import { XCircleIcon } from "@heroicons/react/24/outline";
@@ -21,7 +19,7 @@ export const DeviceWidget = ({
}: DeviceWidgetProps): JSX.Element => {
return (
<div className="relative flex shrink-0 flex-col overflow-hidden rounded-md text-sm text-textPrimary">
<div className="bg-backgroundPrimary flex p-3">
<div className="flex bg-backgroundPrimary p-3">
<div>
<Hashicon size={96} value={nodeNum} />
</div>

4
src/components/Widgets/PeersWidget.tsx
View File

@@ -1,6 +1,4 @@
import type React from "react";
import { useDevice } from "@app/core/providers/useDevice.js";
import { useDevice } from "@core/providers/useDevice.js";
import { IconButton } from "@components/form/IconButton.js";
import { Mono } from "@components/generic/Mono.js";
import {

2
src/components/Widgets/PositionWidget.tsx
View File

@@ -1,5 +1,3 @@
import type React from "react";
import { MapPinIcon } from "@heroicons/react/24/outline";
export interface PositionWidgetProps {

10
src/components/form/BitwiseSelect.tsx
View File

@@ -1,10 +1,6 @@
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import {
bitwiseDecode,
bitwiseEncode,
enumLike
} from "@app/core/utils/bitwise.js";
import { bitwiseDecode, bitwiseEncode, enumLike } from "@core/utils/bitwise.js";
import { InfoWrapper } from "@components/form/InfoWrapper.js";
import { Listbox } from "@headlessui/react";
import { Protobuf } from "@meshtastic/meshtasticjs";
@@ -41,7 +37,7 @@ export const BitwiseSelect = ({
};
});
React.useEffect(() => {
useEffect(() => {
setDecodedSelected(
bitwiseDecode(selected, Protobuf.Config_PositionConfig_PositionFlags).map(
(flag) =>

1
src/components/form/Button.tsx
View File

@@ -1,4 +1,3 @@
import type React from "react";
import type { ButtonHTMLAttributes } from "react";
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {

1
src/components/form/Checkbox.tsx
View File

@@ -1,4 +1,3 @@
import type React from "react";
import { forwardRef, InputHTMLAttributes } from "react";
export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {

5
src/components/form/Form.tsx
View File

@@ -1,8 +1,7 @@
import type React from "react";
import type { HTMLProps } from "react";
import type { FormEvent, HTMLProps } from "react";
export interface FormProps extends HTMLProps<HTMLFormElement> {
onSubmit?: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
onSubmit?: (event: FormEvent<HTMLFormElement>) => Promise<void>;
}
export const Form = ({

4
src/components/form/FormSection.tsx
View File

@@ -1,8 +1,8 @@
import type React from "react";
import type { ReactNode } from "react";
export interface FormSectionProps {
title: string;
children: React.ReactNode;
children: ReactNode;
}
export const FormSection = ({

9
src/components/form/IPInput.tsx
View File

@@ -1,10 +1,7 @@
import type React from "react";
import { forwardRef, InputHTMLAttributes, useEffect } from "react";
import { InfoWrapper, InfoWrapperProps } from "@components/form/InfoWrapper.js";
import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
import { forwardRef, useEffect } from "react";
import { InfoWrapper } from "@components/form/InfoWrapper.js";
import { useState } from "react";
import type { InputProps } from "./Input.js";
import type { InputProps } from "@components/form/Input.js";
export const IPInput = forwardRef<HTMLInputElement, InputProps>(function Input(
{

1
src/components/form/IconButton.tsx
View File

@@ -1,4 +1,3 @@
import type React from "react";
import type { ButtonHTMLAttributes } from "react";
export interface IconButtonProps

5
src/components/form/InfoWrapper.tsx
View File

@@ -1,12 +1,11 @@
import type React from "react";
import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
import type { ReactNode } from "react";
export interface InfoWrapperProps {
label?: string;
description?: string;
error?: string;
children: React.ReactNode;
children: ReactNode;
}
export const InfoWrapper = ({

2
src/components/form/Input.tsx
View File

@@ -1,6 +1,4 @@
import type React from "react";
import { forwardRef, InputHTMLAttributes } from "react";
import { InfoWrapper, InfoWrapperProps } from "@components/form/InfoWrapper.js";
import { ExclamationCircleIcon } from "@heroicons/react/24/outline";

1
src/components/form/Select.tsx
View File

@@ -1,4 +1,3 @@
import type React from "react";
import { forwardRef, SelectHTMLAttributes } from "react";
import { InfoWrapper, InfoWrapperProps } from "@components/form/InfoWrapper.js";

2
src/components/form/Toggle.tsx
View File

@@ -1,5 +1,3 @@
import type React from "react";
import { Switch } from "@headlessui/react";
export interface ToggleProps {

9
src/components/generic/Dialog.tsx
View File

@@ -1,17 +1,16 @@
import type React from "react";
import { IconButton } from "@components/form/IconButton.js";
import { Dialog as DialogUI } from "@headlessui/react";
import { XMarkIcon } from "@heroicons/react/24/outline";
import { ThemeController } from "./ThemeController.js";
import { Blur } from "./Blur.js";
import { ThemeController } from "@components/generic/ThemeController.js";
import { Blur } from "@components/generic/Blur.js";
import type { ReactNode } from "react";
export interface DialogProps {
title: string;
description: string;
isOpen: boolean;
close: () => void;
children: React.ReactNode;
children: ReactNode;
}
export const Dialog = ({

2
src/components/generic/Mono.tsx
View File

@@ -1,5 +1,3 @@
import type React from "react";
export const Mono = ({
children,
className,

2
src/components/generic/TabbedContent.tsx
View File

@@ -1,6 +1,4 @@
import type React from "react";
import { Fragment } from "react";
import { Mono } from "@components/generic/Mono";
import { Tab } from "@headlessui/react";

6
src/components/generic/ThemeController.tsx
View File

@@ -1,8 +1,8 @@
import { useAppStore } from "@app/core/stores/appStore.js";
import type React from "react";
import { useAppStore } from "@core/stores/appStore.js";
import type { ReactNode } from "react";
export interface ThemeControllerProps {
children: React.ReactNode;
children: ReactNode;
}
export const ThemeController = ({

2
src/core/utils/selectEnumOptions.tsx
View File

@@ -1,5 +1,3 @@
import type React from "react";
export const renderOptions = (enumValue: {
[s: string]: string | number;
}): JSX.Element[] => {

3
src/index.tsx
View File

@@ -1,9 +1,6 @@
import "@app/index.css";
import "maplibre-gl/dist/maplibre-gl.css";
import type React from "react";
import { StrictMode } from "react";
import { enableMapSet } from "immer";
import { createRoot } from "react-dom/client";

7
src/pages/Channels.tsx
View File

@@ -1,8 +1,5 @@
import type React from "react";
import { TabbedContent, TabType } from "@app/components/generic/TabbedContent";
import { Channel } from "@app/components/PageComponents/Channel.js";
import { Button } from "@components/form/Button.js";
import { TabbedContent, TabType } from "@components/generic/TabbedContent";
import { Channel } from "@components/PageComponents/Channel.js";
import { useDevice } from "@core/providers/useDevice.js";
import {
ArrowDownOnSquareStackIcon,

2
src/pages/Config/AppConfig.tsx
View File

@@ -1,6 +1,4 @@
import type React from "react";
import { Fragment } from "react";
import { Map } from "@components/PageComponents/AppConfig/Map.js";
import { Tab } from "@headlessui/react";

6
src/pages/Config/DeviceConfig.tsx
View File

@@ -1,7 +1,5 @@
import type React from "react";
import { Fragment } from "react";
import { Network } from "@app/components/PageComponents/Config/Network.js";
import { Network } from "@components/PageComponents/Config/Network.js";
import { Bluetooth } from "@components/PageComponents/Config/Bluetooth.js";
import { Device } from "@components/PageComponents/Config/Device.js";
import { Display } from "@components/PageComponents/Config/Display.js";
@@ -12,7 +10,7 @@ import { User } from "@components/PageComponents/Config/User.js";
import { useDevice } from "@core/providers/useDevice.js";
import { Tab } from "@headlessui/react";
import { ChevronRightIcon, HomeIcon } from "@heroicons/react/24/outline";
import { Button } from "@app/components/form/Button.js";
import { Button } from "@components/form/Button.js";
import { CheckIcon } from "@primer/octicons-react";
export const DeviceConfig = (): JSX.Element => {

4
src/pages/Config/ModuleConfig.tsx
View File

@@ -1,7 +1,5 @@
import type React from "react";
import { Fragment } from "react";
import { Audio } from "@app/components/PageComponents/ModuleConfig/Audio.js";
import { Audio } from "@components/PageComponents/ModuleConfig/Audio.js";
import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage";
import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.js";
import { MQTT } from "@components/PageComponents/ModuleConfig/MQTT.js";

7
src/pages/Config/index.tsx
View File

@@ -1,8 +1,5 @@
import type React from "react";
import { Button } from "@app/components/form/Button.js";
import { TabbedContent, TabType } from "@app/components/generic/TabbedContent";
import { useDevice } from "@app/core/providers/useDevice.js";
import { TabbedContent, TabType } from "@components/generic/TabbedContent";
import { useDevice } from "@core/providers/useDevice.js";
import {
Cog8ToothIcon,
CubeTransparentIcon,

2
src/pages/Extensions/Environment.tsx
View File

@@ -1,5 +1,3 @@
import type React from "react";
import { useDevice } from "@core/providers/useDevice.js";
export const Environment = (): JSX.Element => {

1
src/pages/Extensions/FileBrowser.tsx
View File

@@ -1,4 +1,3 @@
import type React from "react";
import { useEffect, useState } from "react";
export interface File {

4
src/pages/Extensions/Index.tsx
View File

@@ -1,6 +1,4 @@
import type React from "react";
import { TabbedContent, TabType } from "@app/components/generic/TabbedContent";
import { TabbedContent, TabType } from "@components/generic/TabbedContent";
import { useDevice } from "@core/providers/useDevice.js";
import {
CloudIcon,

7
src/pages/Map.tsx
View File

@@ -1,10 +1,7 @@
import type React from "react";
import maplibregl from "maplibre-gl";
import { Layer, Map, Marker, Source } from "react-map-gl";
import { MapControlls } from "@app/components/PageComponents/Map/MapControlls.js";
import { useAppStore } from "@app/core/stores/appStore.js";
import { MapControlls } from "@components/PageComponents/Map/MapControlls.js";
import { useAppStore } from "@core/stores/appStore.js";
import { useDevice } from "@core/providers/useDevice.js";
import { Hashicon } from "@emeraldpay/hashicon-react";
import { MapPinIcon } from "@heroicons/react/24/outline";

8
src/pages/Messages.tsx
View File

@@ -1,10 +1,4 @@
import type React from "react";
import { IconButton } from "@app/components/form/IconButton.js";
import {
TabbedContent,
TabType
} from "@app/components/generic/TabbedContent.js";
import { TabbedContent, TabType } from "@components/generic/TabbedContent.js";
import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.js";
import { useDevice } from "@core/providers/useDevice.js";
import { PencilIcon } from "@heroicons/react/24/outline";

3
src/pages/Peers.tsx
View File

@@ -1,7 +1,4 @@
import type React from "react";
import { base16 } from "rfc4648";
import { Mono } from "@components/generic/Mono.js";
import { Table } from "@components/generic/Table";
import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.js";

2
src/validation/appConfig/map.ts
View File

@@ -1,6 +1,6 @@
import { IsArray, IsBoolean, IsNumber, IsString } from "class-validator";
import type { RasterSource } from "@app/core/stores/appStore.js";
import type { RasterSource } from "@core/stores/appStore.js";
export class MapValidation {
@IsArray()