Browse Source

Use rome and initial format

pull/116/head
Sacha Weatherstone 3 years ago
parent
commit
20ac657b51
  1. 1
      .npmrc
  2. 4
      .vscode/settings.json
  3. 100
      package.json
  4. 4609
      pnpm-lock.yaml
  5. 17
      rome.json
  6. 2
      src/DeviceWrapper.tsx
  7. 128
      src/components/CommandPalette.tsx
  8. 2
      src/components/Dashboard.tsx
  9. 4
      src/components/DeviceSelector.tsx
  10. 2
      src/components/DeviceSelectorButton.tsx
  11. 12
      src/components/Dialog/DeviceNameDialog.tsx
  12. 14
      src/components/Dialog/ImportDialog.tsx
  13. 14
      src/components/Dialog/NewDeviceDialog.tsx
  14. 14
      src/components/Dialog/QRDialog.tsx
  15. 6
      src/components/Dialog/RebootDialog.tsx
  16. 4
      src/components/Dialog/ShutdownDialog.tsx
  17. 8
      src/components/Form/DynamicForm.tsx
  18. 2
      src/components/Form/DynamicFormField.tsx
  19. 6
      src/components/Form/FormInput.tsx
  20. 8
      src/components/Form/FormSelect.tsx
  21. 21
      src/components/Form/FormToggle.tsx
  22. 2
      src/components/Form/FormWrapper.tsx
  23. 34
      src/components/PageComponents/Channel.tsx
  24. 30
      src/components/PageComponents/Config/Bluetooth.tsx
  25. 46
      src/components/PageComponents/Config/Device.tsx
  26. 48
      src/components/PageComponents/Config/Display.tsx
  27. 78
      src/components/PageComponents/Config/LoRa.tsx
  28. 80
      src/components/PageComponents/Config/Network.tsx
  29. 62
      src/components/PageComponents/Config/Position.tsx
  30. 52
      src/components/PageComponents/Config/Power.tsx
  31. 4
      src/components/PageComponents/Connect/BLE.tsx
  32. 10
      src/components/PageComponents/Connect/HTTP.tsx
  33. 2
      src/components/PageComponents/Connect/Serial.tsx
  34. 2
      src/components/PageComponents/Messages/ChannelChat.tsx
  35. 6
      src/components/PageComponents/Messages/Message.tsx
  36. 12
      src/components/PageComponents/Messages/MessageInput.tsx
  37. 28
      src/components/PageComponents/ModuleConfig/Audio.tsx
  38. 38
      src/components/PageComponents/ModuleConfig/CannedMessage.tsx
  39. 94
      src/components/PageComponents/ModuleConfig/ExternalNotification.tsx
  40. 82
      src/components/PageComponents/ModuleConfig/MQTT.tsx
  41. 26
      src/components/PageComponents/ModuleConfig/RangeTest.tsx
  42. 65
      src/components/PageComponents/ModuleConfig/Serial.tsx
  43. 40
      src/components/PageComponents/ModuleConfig/StoreForward.tsx
  44. 40
      src/components/PageComponents/ModuleConfig/Telemetry.tsx
  45. 4
      src/components/PageLayout.tsx
  46. 14
      src/components/Sidebar.tsx
  47. 2
      src/components/Toaster.tsx
  48. 14
      src/components/UI/Button.tsx
  49. 2
      src/components/UI/Checkbox.tsx
  50. 12
      src/components/UI/Command.tsx
  51. 12
      src/components/UI/Dialog.tsx
  52. 18
      src/components/UI/DropdownMenu.tsx
  53. 4
      src/components/UI/Input.tsx
  54. 2
      src/components/UI/Label.tsx
  55. 26
      src/components/UI/Menubar.tsx
  56. 2
      src/components/UI/Popover.tsx
  57. 2
      src/components/UI/ScrollArea.tsx
  58. 10
      src/components/UI/Select.tsx
  59. 6
      src/components/UI/Seperator.tsx
  60. 2
      src/components/UI/Sidebar/SidebarSection.tsx
  61. 2
      src/components/UI/Sidebar/sidebarButton.tsx
  62. 4
      src/components/UI/Switch.tsx
  63. 6
      src/components/UI/Tabs.tsx
  64. 18
      src/components/UI/Toast.tsx
  65. 2
      src/components/UI/Tooltip.tsx
  66. 2
      src/components/UI/Typography/H4.tsx
  67. 2
      src/components/generic/ThemeController.tsx
  68. 30
      src/core/hooks/useToast.ts
  69. 24
      src/core/stores/appStore.ts
  70. 72
      src/core/stores/deviceStore.ts
  71. 6
      src/core/subscriptions.ts
  72. 2
      src/core/utils/bitwise.ts
  73. 2
      src/index.tsx
  74. 10
      src/pages/Channels.tsx
  75. 18
      src/pages/Config/DeviceConfig.tsx
  76. 20
      src/pages/Config/ModuleConfig.tsx
  77. 16
      src/pages/Config/index.tsx
  78. 30
      src/pages/Map.tsx
  79. 10
      src/pages/Messages.tsx
  80. 17
      src/pages/Peers.tsx
  81. 2
      src/validation/channel.ts
  82. 6
      src/validation/config/device.ts
  83. 3
      src/validation/config/display.ts
  84. 2
      src/validation/config/network.ts
  85. 9
      src/validation/config/position.ts
  86. 3
      src/validation/config/power.ts
  87. 11
      src/validation/moduleConfig/mqtt.ts
  88. 3
      src/validation/moduleConfig/serial.ts
  89. 6
      src/validation/moduleConfig/telemetry.ts
  90. 1
      tsconfig.json

1
.npmrc

@ -0,0 +1 @@
@buf:registry=https://buf.build/gen/npm/v1

4
.vscode/settings.json

@ -1,4 +1,4 @@
{ {
"editor.defaultFormatter": "trunk.io", "editor.defaultFormatter": "rome.rome",
"editor.formatOnSave": true "editor.formatOnSave": true
} }

100
package.json

@ -21,77 +21,69 @@
"dependencies": { "dependencies": {
"@emeraldpay/hashicon-react": "^0.5.2", "@emeraldpay/hashicon-react": "^0.5.2",
"@hookform/error-message": "^2.0.1", "@hookform/error-message": "^2.0.1",
"@hookform/resolvers": "^2.9.11", "@hookform/resolvers": "^3.1.1",
"@meshtastic/meshtasticjs": "2.0.20-5", "@meshtastic/meshtasticjs": "2.1.18-0",
"@preact/signals-react": "^1.2.2", "@preact/signals-react": "^1.3.4",
"@radix-ui/react-accordion": "^1.1.0", "@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-checkbox": "^1.0.2", "@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.2", "@radix-ui/react-dialog": "^1.0.4",
"@radix-ui/react-dropdown-menu": "^2.0.3", "@radix-ui/react-dropdown-menu": "^2.0.5",
"@radix-ui/react-label": "^2.0.0", "@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-menubar": "^1.0.1", "@radix-ui/react-menubar": "^1.0.3",
"@radix-ui/react-popover": "^1.0.4", "@radix-ui/react-popover": "^1.0.6",
"@radix-ui/react-scroll-area": "^1.0.2", "@radix-ui/react-scroll-area": "^1.0.4",
"@radix-ui/react-select": "^1.2.0", "@radix-ui/react-select": "^1.2.2",
"@radix-ui/react-separator": "^1.0.1", "@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-switch": "^1.0.1", "@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.2", "@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.2", "@radix-ui/react-toast": "^1.1.4",
"@radix-ui/react-tooltip": "^1.0.4", "@radix-ui/react-tooltip": "^1.0.6",
"@tailwindcss/typography": "^0.5.9", "@tailwindcss/typography": "^0.5.9",
"@turf/turf": "^6.5.0", "@turf/turf": "^6.5.0",
"base64-js": "^1.5.1", "base64-js": "^1.5.1",
"class-transformer": "^0.5.1", "class-transformer": "^0.5.1",
"class-validator": "^0.14.0", "class-validator": "^0.14.0",
"class-variance-authority": "^0.4.0", "class-variance-authority": "^0.6.1",
"clsx": "^1.2.1", "clsx": "^1.2.1",
"cmdk": "^0.1.22", "cmdk": "^0.2.0",
"geodesy": "^2.4.0", "geodesy": "^2.4.0",
"immer": "^9.0.19", "immer": "^10.0.2",
"lucide-react": "^0.115.0", "lucide-react": "^0.259.0",
"mapbox-gl": "npm:empty-npm-package@^1.0.0", "mapbox-gl": "npm:empty-npm-package@^1.0.0",
"maplibre-gl": "2.4.0", "maplibre-gl": "3.1.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-hook-form": "^7.43.2", "react-hook-form": "^7.45.1",
"react-map-gl": "^7.0.21", "react-map-gl": "^7.1.2",
"react-qrcode-logo": "^2.8.0", "react-qrcode-logo": "^2.9.0",
"rfc4648": "^1.5.2", "rfc4648": "^1.5.2",
"tailwind-merge": "^1.10.0", "tailwind-merge": "^1.13.2",
"tailwindcss-animate": "^1.0.5", "tailwindcss-animate": "^1.0.6",
"timeago-react": "^3.0.5", "timeago-react": "^3.0.6",
"zustand": "4.3.3" "zustand": "4.3.9"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/forms": "^0.5.3", "@tailwindcss/forms": "^0.5.3",
"@types/chrome": "^0.0.217", "@types/chrome": "^0.0.240",
"@types/geodesy": "^2.2.3", "@types/geodesy": "^2.2.3",
"@types/node": "^18.14.1", "@types/node": "^20.4.1",
"@types/react": "^18.0.28", "@types/react": "^18.2.14",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.2.6",
"@types/w3c-web-serial": "^1.0.3", "@types/w3c-web-serial": "^1.0.3",
"@types/web-bluetooth": "^0.0.16", "@types/web-bluetooth": "^0.0.17",
"@typescript-eslint/eslint-plugin": "^5.53.0", "@typescript-eslint/parser": "^5.61.0",
"@typescript-eslint/parser": "^5.53.0", "@vitejs/plugin-react": "^4.0.2",
"@vitejs/plugin-react": "^3.1.0", "autoprefixer": "^10.4.14",
"autoprefixer": "^10.4.13",
"eslint": "^8.34.0",
"eslint-config-prettier": "^8.6.0",
"eslint-import-resolver-typescript": "^3.5.3",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"gzipper": "^7.2.0", "gzipper": "^7.2.0",
"postcss": "^8.4.21", "postcss": "^8.4.25",
"prettier": "^2.8.4", "rollup-plugin-visualizer": "^5.9.2",
"prettier-plugin-tailwindcss": "^0.2.3", "rome": "^12.1.3",
"rollup-plugin-visualizer": "^5.9.0", "tailwindcss": "^3.3.2",
"tailwindcss": "^3.2.7", "tar": "^6.1.15",
"tar": "^6.1.13", "tslib": "^2.6.0",
"tslib": "^2.5.0", "typescript": "^5.1.6",
"typescript": "^4.9.5", "vite": "^4.4.2",
"vite": "^4.1.4",
"vite-plugin-environment": "^1.1.3", "vite-plugin-environment": "^1.1.3",
"vite-plugin-pwa": "^0.14.4" "vite-plugin-pwa": "^0.16.4"
} }
} }

4609
pnpm-lock.yaml

File diff suppressed because it is too large

17
rome.json

@ -0,0 +1,17 @@
{
"$schema": "./node_modules/rome/configuration_schema.json",
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentSize": 2
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"organizeImports": {
"enabled": true
}
}

2
src/DeviceWrapper.tsx

@ -9,7 +9,7 @@ export interface DeviceWrapperProps {
export const DeviceWrapper = ({ export const DeviceWrapper = ({
children, children,
device device,
}: DeviceWrapperProps): JSX.Element => { }: DeviceWrapperProps): JSX.Element => {
return ( return (
<DeviceContext.Provider value={device}>{children}</DeviceContext.Provider> <DeviceContext.Provider value={device}>{children}</DeviceContext.Provider>

128
src/components/CommandPalette.tsx

@ -1,40 +1,40 @@
import { useEffect } from "react"; import {
CommandDialog,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@components/UI/Command.js";
import { useAppStore } from "@core/stores/appStore.js"; import { useAppStore } from "@core/stores/appStore.js";
import { useDevice, useDeviceStore } from "@core/stores/deviceStore.js"; import { useDevice, useDeviceStore } from "@core/stores/deviceStore.js";
import { useCommandState } from "cmdk";
import { Hashicon } from "@emeraldpay/hashicon-react"; import { Hashicon } from "@emeraldpay/hashicon-react";
import { useCommandState } from "cmdk";
import { import {
LucideIcon, ArrowLeftRightIcon,
BoxSelectIcon,
BugIcon,
EraserIcon,
FactoryIcon,
LayersIcon,
LayoutIcon,
LinkIcon, LinkIcon,
TrashIcon, LucideIcon,
MapIcon, MapIcon,
MessageSquareIcon,
MoonIcon, MoonIcon,
PaletteIcon,
PlusIcon, PlusIcon,
PowerIcon, PowerIcon,
EraserIcon, QrCodeIcon,
RefreshCwIcon, RefreshCwIcon,
FactoryIcon,
ArrowLeftRightIcon,
BugIcon,
SettingsIcon, SettingsIcon,
SmartphoneIcon, SmartphoneIcon,
MessageSquareIcon, TrashIcon,
QrCodeIcon,
LayersIcon,
PaletteIcon,
UsersIcon, UsersIcon,
LayoutIcon,
XCircleIcon, XCircleIcon,
BoxSelectIcon
} from "lucide-react"; } from "lucide-react";
import { import { useEffect } from "react";
CommandDialog,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList
} from "@components/UI/Command.js";
export interface Group { export interface Group {
label: string; label: string;
@ -64,7 +64,7 @@ export const CommandPalette = (): JSX.Element => {
selectedDevice, selectedDevice,
darkMode, darkMode,
setDarkMode, setDarkMode,
setAccent setAccent,
} = useAppStore(); } = useAppStore();
const { getDevices } = useDeviceStore(); const { getDevices } = useDeviceStore();
const { setDialogOpen, setActivePage, connection } = useDevice(); const { setDialogOpen, setActivePage, connection } = useDevice();
@ -79,14 +79,14 @@ export const CommandPalette = (): JSX.Element => {
icon: MessageSquareIcon, icon: MessageSquareIcon,
action() { action() {
setActivePage("messages"); setActivePage("messages");
} },
}, },
{ {
label: "Map", label: "Map",
icon: MapIcon, icon: MapIcon,
action() { action() {
setActivePage("map"); setActivePage("map");
} },
}, },
{ {
label: "Config", label: "Config",
@ -94,23 +94,23 @@ export const CommandPalette = (): JSX.Element => {
action() { action() {
setActivePage("config"); setActivePage("config");
}, },
tags: ["settings"] tags: ["settings"],
}, },
{ {
label: "Channels", label: "Channels",
icon: LayersIcon, icon: LayersIcon,
action() { action() {
setActivePage("channels"); setActivePage("channels");
} },
}, },
{ {
label: "Peers", label: "Peers",
icon: UsersIcon, icon: UsersIcon,
action() { action() {
setActivePage("peers"); setActivePage("peers");
} },
} },
] ],
}, },
{ {
label: "Manage", label: "Manage",
@ -132,18 +132,18 @@ export const CommandPalette = (): JSX.Element => {
), ),
action() { action() {
setSelectedDevice(device.id); setSelectedDevice(device.id);
} },
}; };
}) }),
}, },
{ {
label: "Connect New Node", label: "Connect New Node",
icon: PlusIcon, icon: PlusIcon,
action() { action() {
setSelectedDevice(0); setSelectedDevice(0);
} },
} },
] ],
}, },
{ {
label: "Contextual", label: "Contextual",
@ -158,16 +158,16 @@ export const CommandPalette = (): JSX.Element => {
icon: <QrCodeIcon size={16} />, icon: <QrCodeIcon size={16} />,
action() { action() {
setDialogOpen("QR", true); setDialogOpen("QR", true);
} },
}, },
{ {
label: "Import", label: "Import",
icon: <QrCodeIcon size={16} />, icon: <QrCodeIcon size={16} />,
action() { action() {
setDialogOpen("import", true); setDialogOpen("import", true);
} },
} },
] ],
}, },
{ {
label: "Disconnect", label: "Disconnect",
@ -176,37 +176,37 @@ export const CommandPalette = (): JSX.Element => {
void connection?.disconnect(); void connection?.disconnect();
setSelectedDevice(0); setSelectedDevice(0);
removeDevice(selectedDevice ?? 0); removeDevice(selectedDevice ?? 0);
} },
}, },
{ {
label: "Schedule Shutdown", label: "Schedule Shutdown",
icon: PowerIcon, icon: PowerIcon,
action() { action() {
setDialogOpen("shutdown", true); setDialogOpen("shutdown", true);
} },
}, },
{ {
label: "Schedule Reboot", label: "Schedule Reboot",
icon: RefreshCwIcon, icon: RefreshCwIcon,
action() { action() {
setDialogOpen("reboot", true); setDialogOpen("reboot", true);
} },
}, },
{ {
label: "Reset Peers", label: "Reset Peers",
icon: TrashIcon, icon: TrashIcon,
action() { action() {
connection?.resetPeers(); connection?.resetPeers();
} },
}, },
{ {
label: "Factory Reset", label: "Factory Reset",
icon: FactoryIcon, icon: FactoryIcon,
action() { action() {
connection?.factoryReset(); connection?.factoryReset();
} },
} },
] ],
}, },
{ {
label: "Debug", label: "Debug",
@ -217,16 +217,16 @@ export const CommandPalette = (): JSX.Element => {
icon: RefreshCwIcon, icon: RefreshCwIcon,
action() { action() {
void connection?.configure(); void connection?.configure();
} },
}, },
{ {
label: "[WIP] Clear Messages", label: "[WIP] Clear Messages",
icon: EraserIcon, icon: EraserIcon,
action() { action() {
alert("This feature is not implemented"); alert("This feature is not implemented");
} },
} },
] ],
}, },
{ {
label: "Application", label: "Application",
@ -237,7 +237,7 @@ export const CommandPalette = (): JSX.Element => {
icon: MoonIcon, icon: MoonIcon,
action() { action() {
setDarkMode(!darkMode); setDarkMode(!darkMode);
} },
}, },
{ {
label: "Accent Color", label: "Accent Color",
@ -254,7 +254,7 @@ export const CommandPalette = (): JSX.Element => {
), ),
action() { action() {
setAccent("red"); setAccent("red");
} },
}, },
{ {
label: "Orange", label: "Orange",
@ -267,7 +267,7 @@ export const CommandPalette = (): JSX.Element => {
), ),
action() { action() {
setAccent("orange"); setAccent("orange");
} },
}, },
{ {
label: "Yellow", label: "Yellow",
@ -280,7 +280,7 @@ export const CommandPalette = (): JSX.Element => {
), ),
action() { action() {
setAccent("yellow"); setAccent("yellow");
} },
}, },
{ {
label: "Green", label: "Green",
@ -293,7 +293,7 @@ export const CommandPalette = (): JSX.Element => {
), ),
action() { action() {
setAccent("green"); setAccent("green");
} },
}, },
{ {
label: "Blue", label: "Blue",
@ -306,7 +306,7 @@ export const CommandPalette = (): JSX.Element => {
), ),
action() { action() {
setAccent("blue"); setAccent("blue");
} },
}, },
{ {
label: "Purple", label: "Purple",
@ -319,7 +319,7 @@ export const CommandPalette = (): JSX.Element => {
), ),
action() { action() {
setAccent("purple"); setAccent("purple");
} },
}, },
{ {
label: "Pink", label: "Pink",
@ -332,12 +332,12 @@ export const CommandPalette = (): JSX.Element => {
), ),
action() { action() {
setAccent("pink"); setAccent("pink");
} },
} },
] ],
} },
] ],
} },
]; ];
useEffect(() => { useEffect(() => {
@ -394,7 +394,7 @@ export const CommandPalette = (): JSX.Element => {
const SubItem = ({ const SubItem = ({
label, label,
icon, icon,
action action,
}: { }: {
label: string; label: string;
icon: React.ReactNode; icon: React.ReactNode;

2
src/components/Dashboard.tsx

@ -8,7 +8,7 @@ import {
CalendarIcon, CalendarIcon,
BluetoothIcon, BluetoothIcon,
UsbIcon, UsbIcon,
NetworkIcon NetworkIcon,
} from "lucide-react"; } from "lucide-react";
import { Subtle } from "@components/UI/Typography/Subtle.js"; import { Subtle } from "@components/UI/Typography/Subtle.js";
import { H3 } from "@components/UI/Typography/H3.js"; import { H3 } from "@components/UI/Typography/H3.js";

4
src/components/DeviceSelector.tsx

@ -8,7 +8,7 @@ import {
SunIcon, SunIcon,
MoonIcon, MoonIcon,
GithubIcon, GithubIcon,
TerminalIcon TerminalIcon,
} from "lucide-react"; } from "lucide-react";
import { Separator } from "@components/UI/Seperator.js"; import { Separator } from "@components/UI/Seperator.js";
import { Code } from "@components/UI/Typography/Code.js"; import { Code } from "@components/UI/Typography/Code.js";
@ -22,7 +22,7 @@ export const DeviceSelector = (): JSX.Element => {
darkMode, darkMode,
setDarkMode, setDarkMode,
setCommandPaletteOpen, setCommandPaletteOpen,
setConnectDialogOpen setConnectDialogOpen,
} = useAppStore(); } = useAppStore();
return ( return (

2
src/components/DeviceSelectorButton.tsx

@ -9,7 +9,7 @@ export interface DeviceSelectorButtonProps {
export const DeviceSelectorButton = ({ export const DeviceSelectorButton = ({
active, active,
onClick, onClick,
children children,
}: DeviceSelectorButtonProps): JSX.Element => ( }: DeviceSelectorButtonProps): JSX.Element => (
<li className="aspect-w-1 aspect-h-1 relative w-full" onClick={onClick}> <li className="aspect-w-1 aspect-h-1 relative w-full" onClick={onClick}>
{active && ( {active && (

12
src/components/Dialog/DeviceNameDialog.tsx

@ -5,7 +5,7 @@ import {
DialogDescription, DialogDescription,
DialogFooter, DialogFooter,
DialogHeader, DialogHeader,
DialogTitle DialogTitle,
} from "@components/UI/Dialog.js"; } from "@components/UI/Dialog.js";
import { Button } from "@components/UI/Button.js"; import { Button } from "@components/UI/Button.js";
import { useDevice } from "@app/core/stores/deviceStore.js"; import { useDevice } from "@app/core/stores/deviceStore.js";
@ -25,7 +25,7 @@ export interface DeviceNameDialogProps {
export const DeviceNameDialog = ({ export const DeviceNameDialog = ({
open, open,
onOpenChange onOpenChange,
}: DeviceNameDialogProps): JSX.Element => { }: DeviceNameDialogProps): JSX.Element => {
const { hardware, nodes, connection } = useDevice(); const { hardware, nodes, connection } = useDevice();
@ -34,16 +34,16 @@ export const DeviceNameDialog = ({
const { register, handleSubmit } = useForm<User>({ const { register, handleSubmit } = useForm<User>({
values: { values: {
longName: myNode?.user?.longName ?? "Unknown", longName: myNode?.user?.longName ?? "Unknown",
shortName: myNode?.user?.shortName ?? "Unknown" shortName: myNode?.user?.shortName ?? "Unknown",
} },
}); });
const onSubmit = handleSubmit((data) => { const onSubmit = handleSubmit((data) => {
connection?.setOwner( connection?.setOwner(
new Protobuf.User({ new Protobuf.User({
...myNode?.user, ...myNode?.user,
...data ...data,
}) }),
); );
onOpenChange(false); onOpenChange(false);
}); });

14
src/components/Dialog/ImportDialog.tsx

@ -8,7 +8,7 @@ import {
DialogDescription, DialogDescription,
DialogFooter, DialogFooter,
DialogHeader, DialogHeader,
DialogTitle DialogTitle,
} from "@components/UI/Dialog.js"; } from "@components/UI/Dialog.js";
import { Protobuf } from "@meshtastic/meshtasticjs"; import { Protobuf } from "@meshtastic/meshtasticjs";
import { Switch } from "@components/UI/Switch.js"; import { Switch } from "@components/UI/Switch.js";
@ -24,7 +24,7 @@ export interface ImportDialogProps {
export const ImportDialog = ({ export const ImportDialog = ({
open, open,
onOpenChange onOpenChange,
}: ImportDialogProps): JSX.Element => { }: ImportDialogProps): JSX.Element => {
const [QRCodeURL, setQRCodeURL] = useState<string>(""); const [QRCodeURL, setQRCodeURL] = useState<string>("");
const [channelSet, setChannelSet] = useState<Protobuf.ChannelSet>(); const [channelSet, setChannelSet] = useState<Protobuf.ChannelSet>();
@ -55,8 +55,8 @@ export const ImportDialog = ({
index === 0 index === 0
? Protobuf.Channel_Role.PRIMARY ? Protobuf.Channel_Role.PRIMARY
: Protobuf.Channel_Role.SECONDARY, : Protobuf.Channel_Role.SECONDARY,
settings: ch settings: ch,
}) }),
); );
}); });
@ -65,9 +65,9 @@ export const ImportDialog = ({
new Protobuf.Config({ new Protobuf.Config({
payloadVariant: { payloadVariant: {
case: "lora", case: "lora",
value: channelSet.loraConfig value: channelSet.loraConfig,
} },
}) }),
); );
} }
}; };

14
src/components/Dialog/NewDeviceDialog.tsx

@ -3,13 +3,13 @@ import {
DialogContent, DialogContent,
DialogDescription, DialogDescription,
DialogHeader, DialogHeader,
DialogTitle DialogTitle,
} from "@components/UI/Dialog.js"; } from "@components/UI/Dialog.js";
import { import {
Tabs, Tabs,
TabsContent, TabsContent,
TabsList, TabsList,
TabsTrigger TabsTrigger,
} from "@components/UI/Tabs.js"; } from "@components/UI/Tabs.js";
import { Subtle } from "@components/UI/Typography/Subtle.js"; import { Subtle } from "@components/UI/Typography/Subtle.js";
import { Link } from "@components/UI/Typography/Link.js"; import { Link } from "@components/UI/Typography/Link.js";
@ -22,7 +22,7 @@ const tabs = [
label: "HTTP", label: "HTTP",
element: HTTP, element: HTTP,
disabled: false, disabled: false,
disabledMessage: "Unsuported connection method" disabledMessage: "Unsuported connection method",
}, },
{ {
label: "Bluetooth", label: "Bluetooth",
@ -31,15 +31,15 @@ const tabs = [
disabledMessage: disabledMessage:
"Web Bluetooth is currently only supported by Chromium-based browsers", "Web Bluetooth is currently only supported by Chromium-based browsers",
disabledLink: disabledLink:
"https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility" "https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility",
}, },
{ {
label: "Serial", label: "Serial",
element: Serial, element: Serial,
disabled: !navigator.serial, disabled: !navigator.serial,
disabledMessage: disabledMessage:
"WebSerial is currently only supported by Chromium based browsers: https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility" "WebSerial is currently only supported by Chromium based browsers: https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility",
} },
]; ];
export interface NewDeviceProps { export interface NewDeviceProps {
open: boolean; open: boolean;
@ -48,7 +48,7 @@ export interface NewDeviceProps {
export const NewDeviceDialog = ({ export const NewDeviceDialog = ({
open, open,
onOpenChange onOpenChange,
}: NewDeviceProps): JSX.Element => { }: NewDeviceProps): JSX.Element => {
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>

14
src/components/Dialog/QRDialog.tsx

@ -9,7 +9,7 @@ import {
DialogDescription, DialogDescription,
DialogFooter, DialogFooter,
DialogHeader, DialogHeader,
DialogTitle DialogTitle,
} from "@components/UI/Dialog.js"; } from "@components/UI/Dialog.js";
import { ClipboardIcon } from "lucide-react"; import { ClipboardIcon } from "lucide-react";
import { Protobuf, Types } from "@meshtastic/meshtasticjs"; import { Protobuf, Types } from "@meshtastic/meshtasticjs";
@ -26,7 +26,7 @@ export const QRDialog = ({
open, open,
onOpenChange, onOpenChange,
loraConfig, loraConfig,
channels channels,
}: QRDialogProps): JSX.Element => { }: QRDialogProps): JSX.Element => {
const [selectedChannels, setSelectedChannels] = useState<number[]>([0]); const [selectedChannels, setSelectedChannels] = useState<number[]>([0]);
const [QRCodeURL, setQRCodeURL] = useState<string>(""); const [QRCodeURL, setQRCodeURL] = useState<string>("");
@ -41,8 +41,8 @@ export const QRDialog = ({
const encoded = new Protobuf.ChannelSet( const encoded = new Protobuf.ChannelSet(
new Protobuf.ChannelSet({ new Protobuf.ChannelSet({
loraConfig, loraConfig,
settings: channelsToEncode settings: channelsToEncode,
}) }),
); );
const base64 = fromByteArray(encoded.toBinary()) const base64 = fromByteArray(encoded.toBinary())
.replace(/=/g, "") .replace(/=/g, "")
@ -79,12 +79,12 @@ export const QRDialog = ({
onCheckedChange={() => { onCheckedChange={() => {
if (selectedChannels.includes(channel.index)) { if (selectedChannels.includes(channel.index)) {
setSelectedChannels( setSelectedChannels(
selectedChannels.filter((c) => c !== channel.index) selectedChannels.filter((c) => c !== channel.index),
); );
} else { } else {
setSelectedChannels([ setSelectedChannels([
...selectedChannels, ...selectedChannels,
channel.index channel.index,
]); ]);
} }
}} }}
@ -104,7 +104,7 @@ export const QRDialog = ({
icon: ClipboardIcon, icon: ClipboardIcon,
onClick() { onClick() {
void navigator.clipboard.writeText(QRCodeURL); void navigator.clipboard.writeText(QRCodeURL);
} },
}} }}
/> />
</DialogFooter> </DialogFooter>

6
src/components/Dialog/RebootDialog.tsx

@ -6,7 +6,7 @@ import {
DialogDescription, DialogDescription,
DialogFooter, DialogFooter,
DialogHeader, DialogHeader,
DialogTitle DialogTitle,
} from "@components/UI/Dialog.js"; } from "@components/UI/Dialog.js";
import { ClockIcon, RefreshCwIcon } from "lucide-react"; import { ClockIcon, RefreshCwIcon } from "lucide-react";
import { Button } from "@components/UI/Button.js"; import { Button } from "@components/UI/Button.js";
@ -19,7 +19,7 @@ export interface RebootDialogProps {
export const RebootDialog = ({ export const RebootDialog = ({
open, open,
onOpenChange onOpenChange,
}: RebootDialogProps): JSX.Element => { }: RebootDialogProps): JSX.Element => {
const { connection } = useDevice(); const { connection } = useDevice();
@ -43,7 +43,7 @@ export const RebootDialog = ({
icon: ClockIcon, icon: ClockIcon,
onClick() { onClick() {
connection?.reboot(time * 60).then(() => onOpenChange(false)); connection?.reboot(time * 60).then(() => onOpenChange(false));
} },
}} }}
/> />
<Button <Button

4
src/components/Dialog/ShutdownDialog.tsx

@ -5,7 +5,7 @@ import {
DialogContent, DialogContent,
DialogDescription, DialogDescription,
DialogHeader, DialogHeader,
DialogTitle DialogTitle,
} from "@components/UI/Dialog.js"; } from "@components/UI/Dialog.js";
import { ClockIcon, PowerIcon } from "lucide-react"; import { ClockIcon, PowerIcon } from "lucide-react";
import { Button } from "@components/UI/Button.js"; import { Button } from "@components/UI/Button.js";
@ -18,7 +18,7 @@ export interface ShutdownDialogProps {
export const ShutdownDialog = ({ export const ShutdownDialog = ({
open, open,
onOpenChange onOpenChange,
}: ShutdownDialogProps): JSX.Element => { }: ShutdownDialogProps): JSX.Element => {
const { connection } = useDevice(); const { connection } = useDevice();

8
src/components/Form/DynamicForm.tsx

@ -4,7 +4,7 @@ import {
FieldValues, FieldValues,
Path, Path,
SubmitHandler, SubmitHandler,
useForm useForm,
} from "react-hook-form"; } from "react-hook-form";
import { H4 } from "@components/UI/Typography/H4.js"; import { H4 } from "@components/UI/Typography/H4.js";
import { Subtle } from "@components/UI/Typography/Subtle.js"; import { Subtle } from "@components/UI/Typography/Subtle.js";
@ -49,11 +49,11 @@ export function DynamicForm<T extends FieldValues>({
submitType = "onChange", submitType = "onChange",
hasSubmitButton, hasSubmitButton,
defaultValues, defaultValues,
fieldGroups fieldGroups,
}: DynamicFormProps<T>) { }: DynamicFormProps<T>) {
const { handleSubmit, control, getValues } = useForm<T>({ const { handleSubmit, control, getValues } = useForm<T>({
mode: submitType, mode: submitType,
defaultValues: defaultValues defaultValues: defaultValues,
}); });
const isDisabled = (disabledBy?: DisabledBy<T>[]): boolean => { const isDisabled = (disabledBy?: DisabledBy<T>[]): boolean => {
@ -76,7 +76,7 @@ export function DynamicForm<T extends FieldValues>({
{...(submitType === "onSubmit" {...(submitType === "onSubmit"
? { onSubmit: handleSubmit(onSubmit) } ? { onSubmit: handleSubmit(onSubmit) }
: { : {
onChange: handleSubmit(onSubmit) onChange: handleSubmit(onSubmit),
})} })}
> >
{fieldGroups.map((fieldGroup, index) => ( {fieldGroups.map((fieldGroup, index) => (

2
src/components/Form/DynamicFormField.tsx

@ -17,7 +17,7 @@ export interface DynamicFormFieldProps<T extends FieldValues> {
export function DynamicFormField<T extends FieldValues>({ export function DynamicFormField<T extends FieldValues>({
field, field,
control, control,
disabled disabled,
}: DynamicFormFieldProps<T>) { }: DynamicFormFieldProps<T>) {
switch (field.type) { switch (field.type) {
case "text": case "text":

6
src/components/Form/FormInput.tsx

@ -1,7 +1,7 @@
import type { LucideIcon } from "lucide-react"; import type { LucideIcon } from "lucide-react";
import type { import type {
BaseFormBuilderProps, BaseFormBuilderProps,
GenericFormElementProps GenericFormElementProps,
} from "./DynamicForm.js"; } from "./DynamicForm.js";
import { Input } from "../UI/Input.js"; import { Input } from "../UI/Input.js";
import { Controller, FieldValues } from "react-hook-form"; import { Controller, FieldValues } from "react-hook-form";
@ -21,7 +21,7 @@ export interface InputFieldProps<T> extends BaseFormBuilderProps<T> {
export function GenericInput<T extends FieldValues>({ export function GenericInput<T extends FieldValues>({
control, control,
disabled, disabled,
field field,
}: GenericFormElementProps<T, InputFieldProps<T>>) { }: GenericFormElementProps<T, InputFieldProps<T>>) {
return ( return (
<Controller <Controller
@ -35,7 +35,7 @@ export function GenericInput<T extends FieldValues>({
onChange( onChange(
field.type === "number" field.type === "number"
? parseInt(e.target.value) ? parseInt(e.target.value)
: e.target.value : e.target.value,
) )
} }
disabled={disabled} disabled={disabled}

8
src/components/Form/FormSelect.tsx

@ -1,6 +1,6 @@
import type { import type {
BaseFormBuilderProps, BaseFormBuilderProps,
GenericFormElementProps GenericFormElementProps,
} from "./DynamicForm.js"; } from "./DynamicForm.js";
import { Controller, FieldValues } from "react-hook-form"; import { Controller, FieldValues } from "react-hook-form";
import { import {
@ -8,7 +8,7 @@ import {
SelectContent, SelectContent,
SelectItem, SelectItem,
SelectTrigger, SelectTrigger,
SelectValue SelectValue,
} from "../UI/Select.js"; } from "../UI/Select.js";
export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> { export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {
@ -24,7 +24,7 @@ export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {
export function SelectInput<T extends FieldValues>({ export function SelectInput<T extends FieldValues>({
control, control,
disabled, disabled,
field field,
}: GenericFormElementProps<T, SelectFieldProps<T>>) { }: GenericFormElementProps<T, SelectFieldProps<T>>) {
return ( return (
<Controller <Controller
@ -35,7 +35,7 @@ export function SelectInput<T extends FieldValues>({
field.properties; field.properties;
const optionsEnumValues = enumValue const optionsEnumValues = enumValue
? Object.entries(enumValue).filter( ? Object.entries(enumValue).filter(
(value) => typeof value[1] === "number" (value) => typeof value[1] === "number",
) )
: []; : [];
return ( return (

21
src/components/Form/FormToggle.tsx

@ -1,9 +1,10 @@
import { Switch } from "../UI/Switch.js";
import type { import type {
BaseFormBuilderProps, BaseFormBuilderProps,
GenericFormElementProps GenericFormElementProps,
} from "./DynamicForm.js"; } from "./DynamicForm.js";
import { Controller, FieldValues } from "react-hook-form"; import { ChangeEvent } from "react";
import { Switch } from "../UI/Switch.js"; import { Controller, FieldPathValue, FieldValues } from "react-hook-form";
export interface ToggleFieldProps<T> extends BaseFormBuilderProps<T> { export interface ToggleFieldProps<T> extends BaseFormBuilderProps<T> {
type: "toggle"; type: "toggle";
@ -12,8 +13,18 @@ export interface ToggleFieldProps<T> extends BaseFormBuilderProps<T> {
export function ToggleInput<T extends FieldValues>({ export function ToggleInput<T extends FieldValues>({
control, control,
disabled, disabled,
field field,
}: GenericFormElementProps<T, ToggleFieldProps<T>>) { }: GenericFormElementProps<T, ToggleFieldProps<T>>) {
const onChangeHandler = (e: (event: ChangeEvent) => void) => {
return (value: boolean) => {
e({
target: {
value: value,
},
} as unknown as ChangeEvent);
};
};
return ( return (
<Controller <Controller
name={field.name} name={field.name}
@ -21,7 +32,7 @@ export function ToggleInput<T extends FieldValues>({
render={({ field: { value, onChange, ...rest } }) => ( render={({ field: { value, onChange, ...rest } }) => (
<Switch <Switch
checked={value} checked={value}
onCheckedChange={onChange} onCheckedChange={onChangeHandler(onChange)}
disabled={disabled} disabled={disabled}
{...field.properties} {...field.properties}
{...rest} {...rest}

2
src/components/Form/FormWrapper.tsx

@ -11,7 +11,7 @@ export interface FieldWrapperProps {
export const FieldWrapper = ({ export const FieldWrapper = ({
label, label,
description, description,
children children,
}: FieldWrapperProps): JSX.Element => ( }: FieldWrapperProps): JSX.Element => (
<div className="pt-6 sm:pt-5"> <div className="pt-6 sm:pt-5">
<div role="group" aria-labelledby="label-notifications"> <div role="group" aria-labelledby="label-notifications">

34
src/components/PageComponents/Channel.tsx

@ -18,12 +18,12 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
...data, ...data,
settings: { settings: {
...data.settings, ...data.settings,
psk: toByteArray(data.settings.psk ?? "") psk: toByteArray(data.settings.psk ?? ""),
} },
}); });
connection?.setChannel(channel).then(() => { connection?.setChannel(channel).then(() => {
toast({ toast({
title: `Saved Channel: ${channel.settings?.name}` title: `Saved Channel: ${channel.settings?.name}`,
}); });
addChannel(channel); addChannel(channel);
}); });
@ -39,9 +39,9 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
...{ ...{
settings: { settings: {
...channel?.settings, ...channel?.settings,
psk: fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)) psk: fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)),
} },
} },
}} }}
fieldGroups={[ fieldGroups={[
{ {
@ -54,8 +54,8 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
label: "Role", label: "Role",
description: "Description", description: "Description",
properties: { properties: {
enumValue: Protobuf.Channel_Role enumValue: Protobuf.Channel_Role,
} },
}, },
{ {
type: "password", type: "password",
@ -64,40 +64,40 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
description: "Description", description: "Description",
properties: { properties: {
// act // act
} },
}, },
{ {
type: "number", type: "number",
name: "settings.channelNum", name: "settings.channelNum",
label: "Channel Number", label: "Channel Number",
description: "Description" description: "Description",
}, },
{ {
type: "text", type: "text",
name: "settings.name", name: "settings.name",
label: "Name", label: "Name",
description: "Description" description: "Description",
}, },
{ {
type: "number", type: "number",
name: "settings.id", name: "settings.id",
label: "ID", label: "ID",
description: "Description" description: "Description",
}, },
{ {
type: "toggle", type: "toggle",
name: "settings.uplinkEnabled", name: "settings.uplinkEnabled",
label: "Uplink Enabled", label: "Uplink Enabled",
description: "Description" description: "Description",
}, },
{ {
type: "toggle", type: "toggle",
name: "settings.downlinkEnabled", name: "settings.downlinkEnabled",
label: "Downlink Enabled", label: "Downlink Enabled",
description: "Description" description: "Description",
} },
] ],
} },
]} ]}
/> />
); );

30
src/components/PageComponents/Config/Bluetooth.tsx

@ -11,9 +11,9 @@ export const Bluetooth = (): JSX.Element => {
new Protobuf.Config({ new Protobuf.Config({
payloadVariant: { payloadVariant: {
case: "bluetooth", case: "bluetooth",
value: data value: data,
} },
}) }),
); );
}; };
@ -30,7 +30,7 @@ export const Bluetooth = (): JSX.Element => {
type: "toggle", type: "toggle",
name: "enabled", name: "enabled",
label: "Enabled", label: "Enabled",
description: "Enable or disable Bluetooth" description: "Enable or disable Bluetooth",
}, },
{ {
type: "select", type: "select",
@ -39,13 +39,13 @@ export const Bluetooth = (): JSX.Element => {
description: "Pin selection behaviour.", description: "Pin selection behaviour.",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
], ],
properties: { properties: {
enumValue: Protobuf.Config_BluetoothConfig_PairingMode, enumValue: Protobuf.Config_BluetoothConfig_PairingMode,
formatEnumName: true formatEnumName: true,
} },
}, },
{ {
type: "number", type: "number",
@ -57,16 +57,16 @@ export const Bluetooth = (): JSX.Element => {
fieldName: "mode", fieldName: "mode",
selector: selector:
Protobuf.Config_BluetoothConfig_PairingMode.FIXED_PIN, Protobuf.Config_BluetoothConfig_PairingMode.FIXED_PIN,
invert: true invert: true,
}, },
{ {
fieldName: "enabled" fieldName: "enabled",
} },
], ],
properties: {} properties: {},
} },
] ],
} },
]} ]}
/> />
); );

46
src/components/PageComponents/Config/Device.tsx

@ -1,7 +1,7 @@
import type { DeviceValidation } from "@app/validation/config/device.js"; import type { DeviceValidation } from "@app/validation/config/device.js";
import { DynamicForm } from "@components/Form/DynamicForm.js";
import { useDevice } from "@core/stores/deviceStore.js"; import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs"; import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/Form/DynamicForm.js";
export const Device = (): JSX.Element => { export const Device = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice(); const { config, setWorkingConfig } = useDevice();
@ -11,9 +11,9 @@ export const Device = (): JSX.Element => {
new Protobuf.Config({ new Protobuf.Config({
payloadVariant: { payloadVariant: {
case: "device", case: "device",
value: data value: data,
} },
}) }),
); );
}; };
@ -33,33 +33,33 @@ export const Device = (): JSX.Element => {
description: "What role the device performs on the mesh", description: "What role the device performs on the mesh",
properties: { properties: {
enumValue: Protobuf.Config_DeviceConfig_Role, enumValue: Protobuf.Config_DeviceConfig_Role,
formatEnumName: true formatEnumName: true,
} },
}, },
{ {
type: "toggle", type: "toggle",
name: "serialEnabled", name: "serialEnabled",
label: "Serial Output Enabled", label: "Serial Output Enabled",
description: "Enable the device's serial console" description: "Enable the device's serial console",
}, },
{ {
type: "toggle", type: "toggle",
name: "debugLogEnabled", name: "debugLogEnabled",
label: "Enabled Debug Log", label: "Enabled Debug Log",
description: description:
"Output debugging information to the device's serial port (auto disables when serial client is connected)" "Output debugging information to the device's serial port (auto disables when serial client is connected)",
}, },
{ {
type: "number", type: "number",
name: "buttonGpio", name: "buttonGpio",
label: "Button Pin", label: "Button Pin",
description: "Button pin override" description: "Button pin override",
}, },
{ {
type: "number", type: "number",
name: "buzzerGpio", name: "buzzerGpio",
label: "Buzzer Pin", label: "Buzzer Pin",
description: "Buzzer pin override" description: "Buzzer pin override",
}, },
{ {
type: "select", type: "select",
@ -68,8 +68,8 @@ export const Device = (): JSX.Element => {
description: "How to handle rebroadcasting", description: "How to handle rebroadcasting",
properties: { properties: {
enumValue: Protobuf.Config_DeviceConfig_RebroadcastMode, enumValue: Protobuf.Config_DeviceConfig_RebroadcastMode,
formatEnumName: true formatEnumName: true,
} },
}, },
{ {
type: "number", type: "number",
@ -77,11 +77,23 @@ export const Device = (): JSX.Element => {
label: "Node Info Broadcast Interval", label: "Node Info Broadcast Interval",
description: "How often to broadcast node info", description: "How often to broadcast node info",
properties: { properties: {
suffix: "Seconds" suffix: "Seconds",
} },
} },
] {
} type: "toggle",
name: "doubleTapAsButtonPress",
label: "Double Tap as Button Press",
description: "Treat double tap as button press",
},
{
type: "toggle",
name: "isManaged",
label: "Managed",
description: "Is this device managed by a mesh administator",
},
],
},
]} ]}
/> />
); );

48
src/components/PageComponents/Config/Display.tsx

@ -1,7 +1,7 @@
import type { DisplayValidation } from "@app/validation/config/display.js"; import type { DisplayValidation } from "@app/validation/config/display.js";
import { DynamicForm } from "@components/Form/DynamicForm.js";
import { useDevice } from "@core/stores/deviceStore.js"; import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs"; import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/Form/DynamicForm.js";
export const Display = (): JSX.Element => { export const Display = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice(); const { config, setWorkingConfig } = useDevice();
@ -11,9 +11,9 @@ export const Display = (): JSX.Element => {
new Protobuf.Config({ new Protobuf.Config({
payloadVariant: { payloadVariant: {
case: "display", case: "display",
value: data value: data,
} },
}) }),
); );
}; };
@ -32,8 +32,8 @@ export const Display = (): JSX.Element => {
label: "Screen Timeout", label: "Screen Timeout",
description: "Turn off the display after this long", description: "Turn off the display after this long",
properties: { properties: {
suffix: "seconds" suffix: "seconds",
} },
}, },
{ {
type: "select", type: "select",
@ -41,26 +41,26 @@ export const Display = (): JSX.Element => {
label: "GPS Display Units", label: "GPS Display Units",
description: "Coordinate display format", description: "Coordinate display format",
properties: { properties: {
enumValue: Protobuf.Config_DisplayConfig_GpsCoordinateFormat enumValue: Protobuf.Config_DisplayConfig_GpsCoordinateFormat,
} },
}, },
{ {
type: "number", type: "number",
name: "autoScreenCarouselSecs", name: "autoScreenCarouselSecs",
label: "Carousel Delay", label: "Carousel Delay",
description: "How fast to cycle through windows" description: "How fast to cycle through windows",
}, },
{ {
type: "toggle", type: "toggle",
name: "compassNorthTop", name: "compassNorthTop",
label: "Compass North Top", label: "Compass North Top",
description: "Fix north to the top of compass" description: "Fix north to the top of compass",
}, },
{ {
type: "toggle", type: "toggle",
name: "flipScreen", name: "flipScreen",
label: "Flip Screen", label: "Flip Screen",
description: "Flip display 180 degrees" description: "Flip display 180 degrees",
}, },
{ {
type: "select", type: "select",
@ -69,8 +69,8 @@ export const Display = (): JSX.Element => {
description: "Display metric or imperial units", description: "Display metric or imperial units",
properties: { properties: {
enumValue: Protobuf.Config_DisplayConfig_DisplayUnits, enumValue: Protobuf.Config_DisplayConfig_DisplayUnits,
formatEnumName: true formatEnumName: true,
} },
}, },
{ {
type: "select", type: "select",
@ -78,8 +78,8 @@ export const Display = (): JSX.Element => {
label: "OLED Type", label: "OLED Type",
description: "Type of OLED screen attached to the device", description: "Type of OLED screen attached to the device",
properties: { properties: {
enumValue: Protobuf.Config_DisplayConfig_OledType enumValue: Protobuf.Config_DisplayConfig_OledType,
} },
}, },
{ {
type: "select", type: "select",
@ -88,17 +88,23 @@ export const Display = (): JSX.Element => {
description: "Screen layout variant", description: "Screen layout variant",
properties: { properties: {
enumValue: Protobuf.Config_DisplayConfig_DisplayMode, enumValue: Protobuf.Config_DisplayConfig_DisplayMode,
formatEnumName: true formatEnumName: true,
} },
}, },
{ {
type: "toggle", type: "toggle",
name: "headingBold", name: "headingBold",
label: "Bold Heading", label: "Bold Heading",
description: "Bolden the heading text" description: "Bolden the heading text",
} },
] {
} type: "toggle",
name: "wakeOnTapOrMotion",
label: "Wake on Tap or Motion",
description: "Wake the device on tap or motion",
},
],
},
]} ]}
/> />
); );

78
src/components/PageComponents/Config/LoRa.tsx

@ -11,9 +11,9 @@ export const LoRa = (): JSX.Element => {
new Protobuf.Config({ new Protobuf.Config({
payloadVariant: { payloadVariant: {
case: "lora", case: "lora",
value: data value: data,
} },
}) }),
); );
}; };
@ -32,22 +32,22 @@ export const LoRa = (): JSX.Element => {
label: "Region", label: "Region",
description: "Sets the region for your node", description: "Sets the region for your node",
properties: { properties: {
enumValue: Protobuf.Config_LoRaConfig_RegionCode enumValue: Protobuf.Config_LoRaConfig_RegionCode,
} },
}, },
{ {
type: "number", type: "number",
name: "hopLimit", name: "hopLimit",
label: "Hop Limit", label: "Hop Limit",
description: "Maximum number of hops" description: "Maximum number of hops",
}, },
{ {
type: "number", type: "number",
name: "channelNum", name: "channelNum",
label: "Channel Number", label: "Channel Number",
description: "LoRa channel number" description: "LoRa channel number",
} },
] ],
}, },
{ {
label: "Waveform Settings", label: "Waveform Settings",
@ -57,7 +57,7 @@ export const LoRa = (): JSX.Element => {
type: "toggle", type: "toggle",
name: "usePreset", name: "usePreset",
label: "Use Preset", label: "Use Preset",
description: "Use one of the predefined modem presets" description: "Use one of the predefined modem presets",
}, },
{ {
type: "select", type: "select",
@ -66,13 +66,13 @@ export const LoRa = (): JSX.Element => {
description: "Modem preset to use", description: "Modem preset to use",
disabledBy: [ disabledBy: [
{ {
fieldName: "usePreset" fieldName: "usePreset",
} },
], ],
properties: { properties: {
enumValue: Protobuf.Config_LoRaConfig_ModemPreset, enumValue: Protobuf.Config_LoRaConfig_ModemPreset,
formatEnumName: true formatEnumName: true,
} },
}, },
{ {
type: "number", type: "number",
@ -82,12 +82,12 @@ export const LoRa = (): JSX.Element => {
disabledBy: [ disabledBy: [
{ {
fieldName: "usePreset", fieldName: "usePreset",
invert: true invert: true,
} },
], ],
properties: { properties: {
suffix: "MHz" suffix: "MHz",
} },
}, },
{ {
type: "number", type: "number",
@ -98,12 +98,12 @@ export const LoRa = (): JSX.Element => {
disabledBy: [ disabledBy: [
{ {
fieldName: "usePreset", fieldName: "usePreset",
invert: true invert: true,
} },
], ],
properties: { properties: {
suffix: "CPS" suffix: "CPS",
} },
}, },
{ {
type: "number", type: "number",
@ -113,11 +113,11 @@ export const LoRa = (): JSX.Element => {
disabledBy: [ disabledBy: [
{ {
fieldName: "usePreset", fieldName: "usePreset",
invert: true invert: true,
} },
] ],
} },
] ],
}, },
{ {
label: "Radio Settings", label: "Radio Settings",
@ -127,7 +127,7 @@ export const LoRa = (): JSX.Element => {
type: "toggle", type: "toggle",
name: "txEnabled", name: "txEnabled",
label: "Tramsmit Enabled", label: "Tramsmit Enabled",
description: "Enable/Disable transmit (TX) from the LoRa radio" description: "Enable/Disable transmit (TX) from the LoRa radio",
}, },
{ {
type: "number", type: "number",
@ -135,14 +135,14 @@ export const LoRa = (): JSX.Element => {
label: "Transmit Power", label: "Transmit Power",
description: "Max transmit power", description: "Max transmit power",
properties: { properties: {
suffix: "dBm" suffix: "dBm",
} },
}, },
{ {
type: "toggle", type: "toggle",
name: "overrideDutyCycle", name: "overrideDutyCycle",
label: "Override Duty Cycle", label: "Override Duty Cycle",
description: "Override Duty Cycle" description: "Override Duty Cycle",
}, },
{ {
type: "number", type: "number",
@ -151,14 +151,14 @@ export const LoRa = (): JSX.Element => {
description: description:
"Frequency offset to correct for crystal calibration errors", "Frequency offset to correct for crystal calibration errors",
properties: { properties: {
suffix: "Hz" suffix: "Hz",
} },
}, },
{ {
type: "toggle", type: "toggle",
name: "sx126xRxBoostedGain", name: "sx126xRxBoostedGain",
label: "Boosted RX Gain", label: "Boosted RX Gain",
description: "Boosted RX gain" description: "Boosted RX gain",
}, },
{ {
type: "number", type: "number",
@ -166,11 +166,11 @@ export const LoRa = (): JSX.Element => {
label: "Override Frequency", label: "Override Frequency",
description: "Override frequency", description: "Override frequency",
properties: { properties: {
suffix: "Hz" suffix: "Hz",
} },
} },
] ],
} },
]} ]}
/> />
); );

80
src/components/PageComponents/Config/Network.tsx

@ -14,11 +14,11 @@ export const Network = (): JSX.Element => {
value: { value: {
...data, ...data,
ipv4Config: new Protobuf.Config_NetworkConfig_IpV4Config( ipv4Config: new Protobuf.Config_NetworkConfig_IpV4Config(
data.ipv4Config data.ipv4Config,
) ),
} },
} },
}) }),
); );
}; };
@ -35,7 +35,7 @@ export const Network = (): JSX.Element => {
type: "toggle", type: "toggle",
name: "wifiEnabled", name: "wifiEnabled",
label: "Enabled", label: "Enabled",
description: "Enable or disable the WiFi radio" description: "Enable or disable the WiFi radio",
}, },
{ {
type: "text", type: "text",
@ -44,9 +44,9 @@ export const Network = (): JSX.Element => {
description: "Network name", description: "Network name",
disabledBy: [ disabledBy: [
{ {
fieldName: "wifiEnabled" fieldName: "wifiEnabled",
} },
] ],
}, },
{ {
type: "password", type: "password",
@ -55,11 +55,11 @@ export const Network = (): JSX.Element => {
description: "Network password", description: "Network password",
disabledBy: [ disabledBy: [
{ {
fieldName: "wifiEnabled" fieldName: "wifiEnabled",
} },
] ],
} },
] ],
}, },
{ {
label: "Ethernet Config", label: "Ethernet Config",
@ -69,9 +69,9 @@ export const Network = (): JSX.Element => {
type: "toggle", type: "toggle",
name: "ethEnabled", name: "ethEnabled",
label: "Enabled", label: "Enabled",
description: "Enable or disable the Ethernet port" description: "Enable or disable the Ethernet port",
} },
] ],
}, },
{ {
label: "IP Config", label: "IP Config",
@ -83,8 +83,8 @@ export const Network = (): JSX.Element => {
label: "Address Mode", label: "Address Mode",
description: "Address assignment selection", description: "Address assignment selection",
properties: { properties: {
enumValue: Protobuf.Config_NetworkConfig_AddressMode enumValue: Protobuf.Config_NetworkConfig_AddressMode,
} },
}, },
{ {
type: "text", type: "text",
@ -94,9 +94,9 @@ export const Network = (): JSX.Element => {
disabledBy: [ disabledBy: [
{ {
fieldName: "addressMode", fieldName: "addressMode",
selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP,
} },
] ],
}, },
{ {
type: "text", type: "text",
@ -106,9 +106,9 @@ export const Network = (): JSX.Element => {
disabledBy: [ disabledBy: [
{ {
fieldName: "addressMode", fieldName: "addressMode",
selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP,
} },
] ],
}, },
{ {
type: "text", type: "text",
@ -118,9 +118,9 @@ export const Network = (): JSX.Element => {
disabledBy: [ disabledBy: [
{ {
fieldName: "addressMode", fieldName: "addressMode",
selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP,
} },
] ],
}, },
{ {
type: "text", type: "text",
@ -130,11 +130,11 @@ export const Network = (): JSX.Element => {
disabledBy: [ disabledBy: [
{ {
fieldName: "addressMode", fieldName: "addressMode",
selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP selector: Protobuf.Config_NetworkConfig_AddressMode.DHCP,
} },
] ],
} },
] ],
}, },
{ {
label: "NTP Config", label: "NTP Config",
@ -143,9 +143,9 @@ export const Network = (): JSX.Element => {
{ {
type: "text", type: "text",
name: "ntpServer", name: "ntpServer",
label: "NTP Server" label: "NTP Server",
} },
] ],
}, },
{ {
label: "Rsyslog Config", label: "Rsyslog Config",
@ -154,10 +154,10 @@ export const Network = (): JSX.Element => {
{ {
type: "text", type: "text",
name: "rsyslogServer", name: "rsyslogServer",
label: "Rsyslog Server" label: "Rsyslog Server",
} },
] ],
} },
]} ]}
/> />
); );

62
src/components/PageComponents/Config/Position.tsx

@ -1,7 +1,7 @@
import type { PositionValidation } from "@app/validation/config/position.js"; import type { PositionValidation } from "@app/validation/config/position.js";
import { DynamicForm } from "@components/Form/DynamicForm.js";
import { useDevice } from "@core/stores/deviceStore.js"; import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs"; import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/Form/DynamicForm.js";
export const Position = (): JSX.Element => { export const Position = (): JSX.Element => {
const { config, nodes, hardware, setWorkingConfig } = useDevice(); const { config, nodes, hardware, setWorkingConfig } = useDevice();
@ -11,9 +11,9 @@ export const Position = (): JSX.Element => {
new Protobuf.Config({ new Protobuf.Config({
payloadVariant: { payloadVariant: {
case: "position", case: "position",
value: data value: data,
} },
}) }),
); );
}; };
@ -31,20 +31,20 @@ export const Position = (): JSX.Element => {
name: "positionBroadcastSmartEnabled", name: "positionBroadcastSmartEnabled",
label: "Enable Smart Position", label: "Enable Smart Position",
description: description:
"Only send position when there has been a meaningful change in location" "Only send position when there has been a meaningful change in location",
}, },
{ {
type: "toggle", type: "toggle",
name: "fixedPosition", name: "fixedPosition",
label: "Fixed Position", label: "Fixed Position",
description: description:
"Don't report GPS position, but a manually-specified one" "Don't report GPS position, but a manually-specified one",
}, },
{ {
type: "toggle", type: "toggle",
name: "gpsEnabled", name: "gpsEnabled",
label: "GPS Enabled", label: "GPS Enabled",
description: "Enable the internal GPS module" description: "Enable the internal GPS module",
}, },
{ {
type: "multiSelect", type: "multiSelect",
@ -52,22 +52,22 @@ export const Position = (): JSX.Element => {
label: "Position Flags", label: "Position Flags",
description: "Configuration options for Position messages", description: "Configuration options for Position messages",
properties: { properties: {
enumValue: Protobuf.Config_PositionConfig_PositionFlags enumValue: Protobuf.Config_PositionConfig_PositionFlags,
} },
}, },
{ {
type: "number", type: "number",
name: "rxGpio", name: "rxGpio",
label: "Receive Pin", label: "Receive Pin",
description: "GPS Module RX pin override" description: "GPS Module RX pin override",
}, },
{ {
type: "number", type: "number",
name: "txGpio", name: "txGpio",
label: "Transmit Pin", label: "Transmit Pin",
description: "GPS Module TX pin override" description: "GPS Module TX pin override",
} },
] ],
}, },
{ {
label: "Intervals", label: "Intervals",
@ -77,22 +77,46 @@ export const Position = (): JSX.Element => {
type: "number", type: "number",
name: "positionBroadcastSecs", name: "positionBroadcastSecs",
label: "Broadcast Interval", label: "Broadcast Interval",
description: "How often your position is sent out over the mesh" description: "How often your position is sent out over the mesh",
}, },
{ {
type: "number", type: "number",
name: "gpsUpdateInterval", name: "gpsUpdateInterval",
label: "GPS Update Interval", label: "GPS Update Interval",
description: "How often a GPS fix should be acquired" description: "How often a GPS fix should be acquired",
}, },
{ {
type: "number", type: "number",
name: "gpsAttemptTime", name: "gpsAttemptTime",
label: "Fix Attempt Duration", label: "Fix Attempt Duration",
description: "How long the device will try to get a fix for" description: "How long the device will try to get a fix for",
} },
] {
} type: "number",
name: "broadcastSmartMinimumDistance",
label: "Smart Position Minimum Distance",
description:
"Minimum distance (in meters) that must be traveled before a position update is sent",
disabledBy: [
{
fieldName: "positionBroadcastSmartEnabled",
},
],
},
{
type: "number",
name: "broadcastSmartMinimumIntervalSecs",
label: "Smart Position Minimum Interval",
description:
"Minimum interval (in seconds) that must pass before a position update is sent",
disabledBy: [
{
fieldName: "positionBroadcastSmartEnabled",
},
],
},
],
},
]} ]}
/> />
); );

52
src/components/PageComponents/Config/Power.tsx

@ -1,7 +1,7 @@
import type { PowerValidation } from "@app/validation/config/power.js"; import type { PowerValidation } from "@app/validation/config/power.js";
import { DynamicForm } from "@components/Form/DynamicForm.js";
import { useDevice } from "@core/stores/deviceStore.js"; import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs"; import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/Form/DynamicForm.js";
export const Power = (): JSX.Element => { export const Power = (): JSX.Element => {
const { config, setWorkingConfig } = useDevice(); const { config, setWorkingConfig } = useDevice();
@ -11,9 +11,9 @@ export const Power = (): JSX.Element => {
new Protobuf.Config({ new Protobuf.Config({
payloadVariant: { payloadVariant: {
case: "power", case: "power",
value: data value: data,
} },
}) }),
); );
}; };
@ -31,7 +31,7 @@ export const Power = (): JSX.Element => {
name: "isPowerSaving", name: "isPowerSaving",
label: "Enable power saving mode", label: "Enable power saving mode",
description: description:
"Select if powered from a low-current source (i.e. solar), to minimize power consumption as much as possible." "Select if powered from a low-current source (i.e. solar), to minimize power consumption as much as possible.",
}, },
{ {
type: "number", type: "number",
@ -40,14 +40,14 @@ export const Power = (): JSX.Element => {
description: description:
"Automatically shutdown node after this long when on battery, 0 for indefinite", "Automatically shutdown node after this long when on battery, 0 for indefinite",
properties: { properties: {
suffix: "Seconds" suffix: "Seconds",
} },
}, },
{ {
type: "number", type: "number",
name: "adcMultiplierOverride", name: "adcMultiplierOverride",
label: "ADC Multiplier Override ratio", label: "ADC Multiplier Override ratio",
description: "Used for tweaking battery voltage reading" description: "Used for tweaking battery voltage reading",
}, },
{ {
type: "number", type: "number",
@ -56,10 +56,16 @@ export const Power = (): JSX.Element => {
description: description:
"If the device does not receive a Bluetooth connection, the BLE radio will be disabled after this long", "If the device does not receive a Bluetooth connection, the BLE radio will be disabled after this long",
properties: { properties: {
suffix: "Seconds" suffix: "Seconds",
} },
} },
] {
type: "number",
name: "deviceBatteryInaAddress",
label: "INA219 Address",
description: "Address of the INA219 battery monitor",
},
],
}, },
{ {
label: "Sleep Settings", label: "Sleep Settings",
@ -72,8 +78,8 @@ export const Power = (): JSX.Element => {
description: description:
"The device will enter super deep sleep after this time", "The device will enter super deep sleep after this time",
properties: { properties: {
suffix: "Seconds" suffix: "Seconds",
} },
}, },
{ {
type: "number", type: "number",
@ -82,8 +88,8 @@ export const Power = (): JSX.Element => {
description: description:
"How long the device will be in super deep sleep for", "How long the device will be in super deep sleep for",
properties: { properties: {
suffix: "Seconds" suffix: "Seconds",
} },
}, },
{ {
type: "number", type: "number",
@ -91,8 +97,8 @@ export const Power = (): JSX.Element => {
label: "Light Sleep Duration", label: "Light Sleep Duration",
description: "How long the device will be in light sleep for", description: "How long the device will be in light sleep for",
properties: { properties: {
suffix: "Seconds" suffix: "Seconds",
} },
}, },
{ {
type: "number", type: "number",
@ -101,11 +107,11 @@ export const Power = (): JSX.Element => {
description: description:
"Minimum amount of time the device will stay awake for after receiving a packet", "Minimum amount of time the device will stay awake for after receiving a packet",
properties: { properties: {
suffix: "Seconds" suffix: "Seconds",
} },
} },
] ],
} },
]} ]}
/> />
); );

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

@ -26,7 +26,7 @@ export const BLE = (): JSX.Element => {
setSelectedDevice(id); setSelectedDevice(id);
const connection = new IBLEConnection(id); const connection = new IBLEConnection(id);
await connection.connect({ await connection.connect({
device: BLEDevice device: BLEDevice,
}); });
device.addConnection(connection); device.addConnection(connection);
subscribeAll(device, connection); subscribeAll(device, connection);
@ -53,7 +53,7 @@ export const BLE = (): JSX.Element => {
onClick={() => { onClick={() => {
void navigator.bluetooth void navigator.bluetooth
.requestDevice({ .requestDevice({
filters: [{ services: [Constants.serviceUUID] }] filters: [{ services: [Constants.serviceUUID] }],
}) })
.then((device) => { .then((device) => {
const exists = bleDevices.findIndex((d) => d.id === device.id); const exists = bleDevices.findIndex((d) => d.id === device.id);

10
src/components/PageComponents/Connect/HTTP.tsx

@ -19,18 +19,18 @@ export const HTTP = (): JSX.Element => {
}>({ }>({
defaultValues: { defaultValues: {
ip: ["client.meshtastic.org", "localhost"].includes( ip: ["client.meshtastic.org", "localhost"].includes(
window.location.hostname window.location.hostname,
) )
? "meshtastic.local" ? "meshtastic.local"
: window.location.hostname, : window.location.hostname,
tls: location.protocol === "https:" tls: location.protocol === "https:",
} },
}); });
const TLSEnabled = useWatch({ const TLSEnabled = useWatch({
control, control,
name: "tls", name: "tls",
defaultValue: location.protocol === "https:" defaultValue: location.protocol === "https:",
}); });
const onSubmit = handleSubmit((data) => { const onSubmit = handleSubmit((data) => {
@ -42,7 +42,7 @@ export const HTTP = (): JSX.Element => {
void connection.connect({ void connection.connect({
address: data.ip, address: data.ip,
fetchInterval: 2000, fetchInterval: 2000,
tls: data.tls tls: data.tls,
}); });
device.addConnection(connection); device.addConnection(connection);
subscribeAll(device, connection); subscribeAll(device, connection);

2
src/components/PageComponents/Connect/Serial.tsx

@ -35,7 +35,7 @@ export const Serial = (): JSX.Element => {
.connect({ .connect({
port, port,
baudRate: undefined, baudRate: undefined,
concurrentLogOutput: true concurrentLogOutput: true,
}) })
.catch((e: Error) => console.log(`Unable to Connect: ${e.message}`)); .catch((e: Error) => console.log(`Unable to Connect: ${e.message}`));
device.addConnection(connection); device.addConnection(connection);

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

@ -14,7 +14,7 @@ export interface ChannelChatProps {
export const ChannelChat = ({ export const ChannelChat = ({
messages, messages,
channel, channel,
to to,
}: ChannelChatProps): JSX.Element => { }: ChannelChatProps): JSX.Element => {
const { nodes } = useDevice(); const { nodes } = useDevice();

6
src/components/PageComponents/Messages/Message.tsx

@ -2,7 +2,7 @@ import { Hashicon } from "@emeraldpay/hashicon-react";
import { import {
CircleEllipsisIcon, CircleEllipsisIcon,
AlertCircleIcon, AlertCircleIcon,
CheckCircle2Icon CheckCircle2Icon,
} from "lucide-react"; } from "lucide-react";
import type { Protobuf } from "@meshtastic/meshtasticjs"; import type { Protobuf } from "@meshtastic/meshtasticjs";
import type { MessageWithState } from "@app/core/stores/deviceStore.js"; import type { MessageWithState } from "@app/core/stores/deviceStore.js";
@ -16,7 +16,7 @@ export interface MessageProps {
export const Message = ({ export const Message = ({
lastMsgSameUser, lastMsgSameUser,
message, message,
sender sender,
}: MessageProps): JSX.Element => { }: MessageProps): JSX.Element => {
return lastMsgSameUser ? ( return lastMsgSameUser ? (
<div className="ml-5 flex"> <div className="ml-5 flex">
@ -47,7 +47,7 @@ export const Message = ({
<span className="mt-1 font-mono text-xs text-textSecondary"> <span className="mt-1 font-mono text-xs text-textSecondary">
{message.rxTime.toLocaleTimeString(undefined, { {message.rxTime.toLocaleTimeString(undefined, {
hour: "2-digit", hour: "2-digit",
minute: "2-digit" minute: "2-digit",
})} })}
</span> </span>
</div> </div>

12
src/components/PageComponents/Messages/MessageInput.tsx

@ -11,14 +11,14 @@ export interface MessageInputProps {
export const MessageInput = ({ export const MessageInput = ({
to, to,
channel channel,
}: MessageInputProps): JSX.Element => { }: MessageInputProps): JSX.Element => {
const { const {
connection, connection,
setMessageState, setMessageState,
messageDraft, messageDraft,
setMessageDraft, setMessageDraft,
hardware hardware,
} = useDevice(); } = useDevice();
const myNodeNum = hardware.myNodeNum; const myNodeNum = hardware.myNodeNum;
@ -33,8 +33,8 @@ export const MessageInput = ({
to as number, to as number,
myNodeNum, myNodeNum,
id, id,
"ack" "ack",
) ),
) )
.catch((e: Types.PacketError) => .catch((e: Types.PacketError) =>
setMessageState( setMessageState(
@ -43,8 +43,8 @@ export const MessageInput = ({
to as number, to as number,
myNodeNum, myNodeNum,
e.id, e.id,
e.error e.error,
) ),
); );
}; };

28
src/components/PageComponents/ModuleConfig/Audio.tsx

@ -11,9 +11,9 @@ export const Audio = (): JSX.Element => {
new Protobuf.ModuleConfig({ new Protobuf.ModuleConfig({
payloadVariant: { payloadVariant: {
case: "audio", case: "audio",
value: data value: data,
} },
}) }),
); );
}; };
@ -30,13 +30,13 @@ export const Audio = (): JSX.Element => {
type: "toggle", type: "toggle",
name: "codec2Enabled", name: "codec2Enabled",
label: "Codec 2 Enabled", label: "Codec 2 Enabled",
description: "Enable Codec 2 audio encoding" description: "Enable Codec 2 audio encoding",
}, },
{ {
type: "number", type: "number",
name: "pttPin", name: "pttPin",
label: "PTT Pin", label: "PTT Pin",
description: "GPIO pin to use for PTT" description: "GPIO pin to use for PTT",
}, },
{ {
type: "select", type: "select",
@ -44,35 +44,35 @@ export const Audio = (): JSX.Element => {
label: "Bitrate", label: "Bitrate",
description: "Bitrate to use for audio encoding", description: "Bitrate to use for audio encoding",
properties: { properties: {
enumValue: Protobuf.ModuleConfig_AudioConfig_Audio_Baud enumValue: Protobuf.ModuleConfig_AudioConfig_Audio_Baud,
} },
}, },
{ {
type: "number", type: "number",
name: "i2sWs", name: "i2sWs",
label: "i2S WS", label: "i2S WS",
description: "GPIO pin to use for i2S WS" description: "GPIO pin to use for i2S WS",
}, },
{ {
type: "number", type: "number",
name: "i2sSd", name: "i2sSd",
label: "i2S SD", label: "i2S SD",
description: "GPIO pin to use for i2S SD" description: "GPIO pin to use for i2S SD",
}, },
{ {
type: "number", type: "number",
name: "i2sDin", name: "i2sDin",
label: "i2S DIN", label: "i2S DIN",
description: "GPIO pin to use for i2S DIN" description: "GPIO pin to use for i2S DIN",
}, },
{ {
type: "number", type: "number",
name: "i2sSck", name: "i2sSck",
label: "i2S SCK", label: "i2S SCK",
description: "GPIO pin to use for i2S SCK" description: "GPIO pin to use for i2S SCK",
} },
] ],
} },
]} ]}
/> />
); );

38
src/components/PageComponents/ModuleConfig/CannedMessage.tsx

@ -11,9 +11,9 @@ export const CannedMessage = (): JSX.Element => {
new Protobuf.ModuleConfig({ new Protobuf.ModuleConfig({
payloadVariant: { payloadVariant: {
case: "cannedMessage", case: "cannedMessage",
value: data value: data,
} },
}) }),
); );
}; };
@ -30,25 +30,25 @@ export const CannedMessage = (): JSX.Element => {
type: "toggle", type: "toggle",
name: "rotary1Enabled", name: "rotary1Enabled",
label: "Rotary Encoder #1 Enabled", label: "Rotary Encoder #1 Enabled",
description: "Enable the rotary encoder" description: "Enable the rotary encoder",
}, },
{ {
type: "number", type: "number",
name: "inputbrokerPinA", name: "inputbrokerPinA",
label: "Encoder Pin A", label: "Encoder Pin A",
description: "GPIO Pin Value (1-39) For encoder port A" description: "GPIO Pin Value (1-39) For encoder port A",
}, },
{ {
type: "number", type: "number",
name: "inputbrokerPinB", name: "inputbrokerPinB",
label: "Encoder Pin B", label: "Encoder Pin B",
description: "GPIO Pin Value (1-39) For encoder port B" description: "GPIO Pin Value (1-39) For encoder port B",
}, },
{ {
type: "number", type: "number",
name: "inputbrokerPinPress", name: "inputbrokerPinPress",
label: "Encoder Pin Press", label: "Encoder Pin Press",
description: "GPIO Pin Value (1-39) For encoder Press" description: "GPIO Pin Value (1-39) For encoder Press",
}, },
{ {
type: "select", type: "select",
@ -57,8 +57,8 @@ export const CannedMessage = (): JSX.Element => {
description: "Select input event.", description: "Select input event.",
properties: { properties: {
enumValue: enumValue:
Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar,
} },
}, },
{ {
type: "select", type: "select",
@ -67,8 +67,8 @@ export const CannedMessage = (): JSX.Element => {
description: "Select input event.", description: "Select input event.",
properties: { properties: {
enumValue: enumValue:
Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar,
} },
}, },
{ {
type: "select", type: "select",
@ -77,30 +77,30 @@ export const CannedMessage = (): JSX.Element => {
description: "Select input event", description: "Select input event",
properties: { properties: {
enumValue: enumValue:
Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar Protobuf.ModuleConfig_CannedMessageConfig_InputEventChar,
} },
}, },
{ {
type: "toggle", type: "toggle",
name: "updown1Enabled", name: "updown1Enabled",
label: "Up Down enabled", label: "Up Down enabled",
description: "Enable the up / down encoder" description: "Enable the up / down encoder",
}, },
{ {
type: "text", type: "text",
name: "allowInputSource", name: "allowInputSource",
label: "Allow Input Source", label: "Allow Input Source",
description: description:
"Select from: '_any', 'rotEnc1', 'upDownEnc1', 'cardkb'" "Select from: '_any', 'rotEnc1', 'upDownEnc1', 'cardkb'",
}, },
{ {
type: "toggle", type: "toggle",
name: "sendBell", name: "sendBell",
label: "Send Bell", label: "Send Bell",
description: "Sends a bell character with each message" description: "Sends a bell character with each message",
} },
] ],
} },
]} ]}
/> />
); );

94
src/components/PageComponents/ModuleConfig/ExternalNotification.tsx

@ -11,9 +11,9 @@ export const ExternalNotification = (): JSX.Element => {
new Protobuf.ModuleConfig({ new Protobuf.ModuleConfig({
payloadVariant: { payloadVariant: {
case: "externalNotification", case: "externalNotification",
value: data value: data,
} },
}) }),
); );
}; };
@ -30,7 +30,7 @@ export const ExternalNotification = (): JSX.Element => {
type: "toggle", type: "toggle",
name: "enabled", name: "enabled",
label: "Module Enabled", label: "Module Enabled",
description: "Enable External Notification" description: "Enable External Notification",
}, },
{ {
type: "number", type: "number",
@ -40,12 +40,12 @@ export const ExternalNotification = (): JSX.Element => {
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
], ],
properties: { properties: {
suffix: "ms" suffix: "ms",
} },
}, },
{ {
type: "number", type: "number",
@ -54,9 +54,9 @@ export const ExternalNotification = (): JSX.Element => {
description: "Output", description: "Output",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "number", type: "number",
@ -65,9 +65,9 @@ export const ExternalNotification = (): JSX.Element => {
description: "Output Vibrate", description: "Output Vibrate",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "number", type: "number",
@ -76,9 +76,9 @@ export const ExternalNotification = (): JSX.Element => {
description: "Output Buzzer", description: "Output Buzzer",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "toggle", type: "toggle",
@ -87,9 +87,9 @@ export const ExternalNotification = (): JSX.Element => {
description: "Active", description: "Active",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "toggle", type: "toggle",
@ -98,9 +98,9 @@ export const ExternalNotification = (): JSX.Element => {
description: "Alert Message", description: "Alert Message",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "toggle", type: "toggle",
@ -109,9 +109,9 @@ export const ExternalNotification = (): JSX.Element => {
description: "Alert Message Vibrate", description: "Alert Message Vibrate",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "toggle", type: "toggle",
@ -120,9 +120,9 @@ export const ExternalNotification = (): JSX.Element => {
description: "Alert Message Buzzer", description: "Alert Message Buzzer",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "toggle", type: "toggle",
@ -132,9 +132,9 @@ export const ExternalNotification = (): JSX.Element => {
"Should an alert be triggered when receiving an incoming bell?", "Should an alert be triggered when receiving an incoming bell?",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "toggle", type: "toggle",
@ -143,9 +143,9 @@ export const ExternalNotification = (): JSX.Element => {
description: "Alert Bell Vibrate", description: "Alert Bell Vibrate",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "toggle", type: "toggle",
@ -154,9 +154,9 @@ export const ExternalNotification = (): JSX.Element => {
description: "Alert Bell Buzzer", description: "Alert Bell Buzzer",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "toggle", type: "toggle",
@ -165,9 +165,9 @@ export const ExternalNotification = (): JSX.Element => {
description: "Use PWM", description: "Use PWM",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "number", type: "number",
@ -176,12 +176,12 @@ export const ExternalNotification = (): JSX.Element => {
description: "Nag Timeout", description: "Nag Timeout",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
} },
] ],
} },
]} ]}
/> />
); );

82
src/components/PageComponents/ModuleConfig/MQTT.tsx

@ -1,7 +1,7 @@
import { useDevice } from "@app/core/stores/deviceStore.js";
import type { MQTTValidation } from "@app/validation/moduleConfig/mqtt.js"; import type { MQTTValidation } from "@app/validation/moduleConfig/mqtt.js";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/Form/DynamicForm.js"; import { DynamicForm } from "@components/Form/DynamicForm.js";
import { useDevice } from "@app/core/stores/deviceStore.js"; import { Protobuf } from "@meshtastic/meshtasticjs";
export const MQTT = (): JSX.Element => { export const MQTT = (): JSX.Element => {
const { moduleConfig, setWorkingModuleConfig } = useDevice(); const { moduleConfig, setWorkingModuleConfig } = useDevice();
@ -11,9 +11,9 @@ export const MQTT = (): JSX.Element => {
new Protobuf.ModuleConfig({ new Protobuf.ModuleConfig({
payloadVariant: { payloadVariant: {
case: "mqtt", case: "mqtt",
value: data value: data,
} },
}) }),
); );
}; };
@ -30,7 +30,7 @@ export const MQTT = (): JSX.Element => {
type: "toggle", type: "toggle",
name: "enabled", name: "enabled",
label: "Enabled", label: "Enabled",
description: "Enable or disable MQTT" description: "Enable or disable MQTT",
}, },
{ {
type: "text", type: "text",
@ -40,9 +40,9 @@ export const MQTT = (): JSX.Element => {
"MQTT server address to use for default/custom servers", "MQTT server address to use for default/custom servers",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "text", type: "text",
@ -51,9 +51,9 @@ export const MQTT = (): JSX.Element => {
description: "MQTT username to use for default/custom servers", description: "MQTT username to use for default/custom servers",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "password", type: "password",
@ -62,9 +62,9 @@ export const MQTT = (): JSX.Element => {
description: "MQTT password to use for default/custom servers", description: "MQTT password to use for default/custom servers",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "toggle", type: "toggle",
@ -73,9 +73,9 @@ export const MQTT = (): JSX.Element => {
description: "Enable or disable MQTT encryption", description: "Enable or disable MQTT encryption",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "toggle", type: "toggle",
@ -84,12 +84,46 @@ export const MQTT = (): JSX.Element => {
description: "Whether to send/consume JSON packets on MQTT", description: "Whether to send/consume JSON packets on MQTT",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
} },
] {
} type: "toggle",
name: "tlsEnabled",
label: "TLS Enabled",
description: "Enable or disable TLS",
disabledBy: [
{
fieldName: "enabled",
},
],
},
{
type: "text",
name: "root",
label: "Root topic",
description: "MQTT root topic to use for default/custom servers",
disabledBy: [
{
fieldName: "enabled",
},
],
},
{
type: "toggle",
name: "proxyToClientEnabled",
label: "Proxy to Client Enabled",
description:
"Whether to proxy MQTT packets to the client (for example to Home Assistant)",
disabledBy: [
{
fieldName: "enabled",
},
],
},
],
},
]} ]}
/> />
); );

26
src/components/PageComponents/ModuleConfig/RangeTest.tsx

@ -11,9 +11,9 @@ export const RangeTest = (): JSX.Element => {
new Protobuf.ModuleConfig({ new Protobuf.ModuleConfig({
payloadVariant: { payloadVariant: {
case: "rangeTest", case: "rangeTest",
value: data value: data,
} },
}) }),
); );
}; };
@ -30,7 +30,7 @@ export const RangeTest = (): JSX.Element => {
type: "toggle", type: "toggle",
name: "enabled", name: "enabled",
label: "Module Enabled", label: "Module Enabled",
description: "Enable Range Test" description: "Enable Range Test",
}, },
{ {
type: "number", type: "number",
@ -39,9 +39,9 @@ export const RangeTest = (): JSX.Element => {
description: "How long to wait between sending test packets", description: "How long to wait between sending test packets",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "toggle", type: "toggle",
@ -50,12 +50,12 @@ export const RangeTest = (): JSX.Element => {
description: "ESP32 Only", description: "ESP32 Only",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
} },
] ],
} },
]} ]}
/> />
); );

65
src/components/PageComponents/ModuleConfig/Serial.tsx

@ -1,7 +1,7 @@
import type { SerialValidation } from "@app/validation/moduleConfig/serial.js"; import type { SerialValidation } from "@app/validation/moduleConfig/serial.js";
import { DynamicForm } from "@components/Form/DynamicForm.js";
import { useDevice } from "@core/stores/deviceStore.js"; import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs"; import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/Form/DynamicForm.js";
export const Serial = (): JSX.Element => { export const Serial = (): JSX.Element => {
const { moduleConfig, setWorkingModuleConfig } = useDevice(); const { moduleConfig, setWorkingModuleConfig } = useDevice();
@ -11,9 +11,9 @@ export const Serial = (): JSX.Element => {
new Protobuf.ModuleConfig({ new Protobuf.ModuleConfig({
payloadVariant: { payloadVariant: {
case: "serial", case: "serial",
value: data value: data,
} },
}) }),
); );
}; };
@ -30,7 +30,7 @@ export const Serial = (): JSX.Element => {
type: "toggle", type: "toggle",
name: "enabled", name: "enabled",
label: "Module Enabled", label: "Module Enabled",
description: "Enable Serial output" description: "Enable Serial output",
}, },
{ {
type: "toggle", type: "toggle",
@ -40,9 +40,9 @@ export const Serial = (): JSX.Element => {
"Any packets you send will be echoed back to your device", "Any packets you send will be echoed back to your device",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "number", type: "number",
@ -51,9 +51,9 @@ export const Serial = (): JSX.Element => {
description: "Set the GPIO pin to the RXD pin you have set up.", description: "Set the GPIO pin to the RXD pin you have set up.",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "number", type: "number",
@ -62,9 +62,9 @@ export const Serial = (): JSX.Element => {
description: "Set the GPIO pin to the TXD pin you have set up.", description: "Set the GPIO pin to the TXD pin you have set up.",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "select", type: "select",
@ -74,12 +74,12 @@ export const Serial = (): JSX.Element => {
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
], ],
properties: { properties: {
enumValue: Protobuf.ModuleConfig_SerialConfig_Serial_Baud enumValue: Protobuf.ModuleConfig_SerialConfig_Serial_Baud,
} },
}, },
{ {
type: "number", type: "number",
@ -90,12 +90,12 @@ export const Serial = (): JSX.Element => {
"Seconds to wait before we consider your packet as 'done'", "Seconds to wait before we consider your packet as 'done'",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
], ],
properties: { properties: {
suffix: "Seconds" suffix: "Seconds",
} },
}, },
{ {
type: "select", type: "select",
@ -105,16 +105,23 @@ export const Serial = (): JSX.Element => {
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
], ],
properties: { properties: {
enumValue: Protobuf.ModuleConfig_SerialConfig_Serial_Mode, enumValue: Protobuf.ModuleConfig_SerialConfig_Serial_Mode,
formatEnumName: true formatEnumName: true,
} },
} },
] {
} type: "toggle",
name: "overrideConsoleSerialPort",
label: "Override Console Serial Port",
description:
"If you have a serial port connected to the console, this will override it.",
},
],
},
]} ]}
/> />
); );

40
src/components/PageComponents/ModuleConfig/StoreForward.tsx

@ -11,9 +11,9 @@ export const StoreForward = (): JSX.Element => {
new Protobuf.ModuleConfig({ new Protobuf.ModuleConfig({
payloadVariant: { payloadVariant: {
case: "storeForward", case: "storeForward",
value: data value: data,
} },
}) }),
); );
}; };
@ -30,7 +30,7 @@ export const StoreForward = (): JSX.Element => {
type: "toggle", type: "toggle",
name: "enabled", name: "enabled",
label: "Module Enabled", label: "Module Enabled",
description: "Enable Store & Forward" description: "Enable Store & Forward",
}, },
{ {
type: "toggle", type: "toggle",
@ -39,9 +39,9 @@ export const StoreForward = (): JSX.Element => {
description: "Enable Store & Forward heartbeat", description: "Enable Store & Forward heartbeat",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "number", type: "number",
@ -51,12 +51,12 @@ export const StoreForward = (): JSX.Element => {
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
], ],
properties: { properties: {
suffix: "Records" suffix: "Records",
} },
}, },
{ {
type: "number", type: "number",
@ -65,9 +65,9 @@ export const StoreForward = (): JSX.Element => {
description: "Max number of records to return", description: "Max number of records to return",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
}, },
{ {
type: "number", type: "number",
@ -76,12 +76,12 @@ export const StoreForward = (): JSX.Element => {
description: "Max number of records to return", description: "Max number of records to return",
disabledBy: [ disabledBy: [
{ {
fieldName: "enabled" fieldName: "enabled",
} },
] ],
} },
] ],
} },
]} ]}
/> />
); );

40
src/components/PageComponents/ModuleConfig/Telemetry.tsx

@ -1,7 +1,7 @@
import type { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js"; import type { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js";
import { DynamicForm } from "@components/Form/DynamicForm.js";
import { useDevice } from "@core/stores/deviceStore.js"; import { useDevice } from "@core/stores/deviceStore.js";
import { Protobuf } from "@meshtastic/meshtasticjs"; import { Protobuf } from "@meshtastic/meshtasticjs";
import { DynamicForm } from "@components/Form/DynamicForm.js";
export const Telemetry = (): JSX.Element => { export const Telemetry = (): JSX.Element => {
const { moduleConfig, setWorkingModuleConfig } = useDevice(); const { moduleConfig, setWorkingModuleConfig } = useDevice();
@ -11,9 +11,9 @@ export const Telemetry = (): JSX.Element => {
new Protobuf.ModuleConfig({ new Protobuf.ModuleConfig({
payloadVariant: { payloadVariant: {
case: "telemetry", case: "telemetry",
value: data value: data,
} },
}) }),
); );
}; };
@ -32,8 +32,8 @@ export const Telemetry = (): JSX.Element => {
label: "Query Interval", label: "Query Interval",
description: "Interval to get telemetry data", description: "Interval to get telemetry data",
properties: { properties: {
suffix: "seconds" suffix: "seconds",
} },
}, },
{ {
type: "number", type: "number",
@ -41,29 +41,41 @@ export const Telemetry = (): JSX.Element => {
label: "Update Interval", label: "Update Interval",
description: "How often to send Metrics over the mesh", description: "How often to send Metrics over the mesh",
properties: { properties: {
suffix: "seconds" suffix: "seconds",
} },
}, },
{ {
type: "toggle", type: "toggle",
name: "environmentMeasurementEnabled", name: "environmentMeasurementEnabled",
label: "Module Enabled", label: "Module Enabled",
description: "Enable the Environment Telemetry" description: "Enable the Environment Telemetry",
}, },
{ {
type: "toggle", type: "toggle",
name: "environmentScreenEnabled", name: "environmentScreenEnabled",
label: "Displayed on Screen", label: "Displayed on Screen",
description: "Show the Telemetry Module on the OLED" description: "Show the Telemetry Module on the OLED",
}, },
{ {
type: "toggle", type: "toggle",
name: "environmentDisplayFahrenheit", name: "environmentDisplayFahrenheit",
label: "Display Fahrenheit", label: "Display Fahrenheit",
description: "Display temp in Fahrenheit" description: "Display temp in Fahrenheit",
} },
] {
} type: "toggle",
name: "airQualityEnabled",
label: "Air Quality Enabled",
description: "Enable the Air Quality Telemetry",
},
{
type: "number",
name: "airQualityInterval",
label: "Air Quality Update Interval",
description: "How often to send Air Quality data over the mesh",
},
],
},
]} ]}
/> />
); );

4
src/components/PageLayout.tsx

@ -15,7 +15,7 @@ export const PageLayout = ({
label, label,
noPadding, noPadding,
actions, actions,
children children,
}: PageLayoutProps): JSX.Element => { }: PageLayoutProps): JSX.Element => {
return ( return (
<div className="relative flex h-full w-full flex-col"> <div className="relative flex h-full w-full flex-col">
@ -43,7 +43,7 @@ export const PageLayout = ({
<div <div
className={cn( className={cn(
"flex h-full w-full flex-col overflow-y-auto", "flex h-full w-full flex-col overflow-y-auto",
!noPadding && "p-3" !noPadding && "p-3",
)} )}
> >
{children} {children}

14
src/components/Sidebar.tsx

@ -8,7 +8,7 @@ import {
LayersIcon, LayersIcon,
UsersIcon, UsersIcon,
EditIcon, EditIcon,
LayoutGrid LayoutGrid,
} from "lucide-react"; } from "lucide-react";
import { Subtle } from "@components/UI/Typography/Subtle.js"; import { Subtle } from "@components/UI/Typography/Subtle.js";
import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js"; import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
@ -33,28 +33,28 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
{ {
name: "Messages", name: "Messages",
icon: MessageSquareIcon, icon: MessageSquareIcon,
page: "messages" page: "messages",
}, },
{ {
name: "Map", name: "Map",
icon: MapIcon, icon: MapIcon,
page: "map" page: "map",
}, },
{ {
name: "Config", name: "Config",
icon: SettingsIcon, icon: SettingsIcon,
page: "config" page: "config",
}, },
{ {
name: "Channels", name: "Channels",
icon: LayersIcon, icon: LayersIcon,
page: "channels" page: "channels",
}, },
{ {
name: "Peers", name: "Peers",
icon: UsersIcon, icon: UsersIcon,
page: "peers" page: "peers",
} },
]; ];
return ( return (

2
src/components/Toaster.tsx

@ -6,7 +6,7 @@ import {
ToastDescription, ToastDescription,
ToastProvider, ToastProvider,
ToastTitle, ToastTitle,
ToastViewport ToastViewport,
} from "@components/UI/Toast.js"; } from "@components/UI/Toast.js";
export function Toaster() { export function Toaster() {

14
src/components/UI/Button.tsx

@ -18,19 +18,19 @@ const buttonVariants = cva(
"bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100", "bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100",
ghost: ghost:
"bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent", "bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent",
link: "bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent" link: "bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent",
}, },
size: { size: {
default: "h-10 py-2 px-4", default: "h-10 py-2 px-4",
sm: "h-9 px-2 rounded-md", sm: "h-9 px-2 rounded-md",
lg: "h-11 px-8 rounded-md" lg: "h-11 px-8 rounded-md",
} },
}, },
defaultVariants: { defaultVariants: {
variant: "default", variant: "default",
size: "default" size: "default",
} },
} },
); );
export interface ButtonProps export interface ButtonProps
@ -46,7 +46,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{...props} {...props}
/> />
); );
} },
); );
Button.displayName = "Button"; Button.displayName = "Button";

2
src/components/UI/Checkbox.tsx

@ -12,7 +12,7 @@ const Checkbox = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900", "peer h-4 w-4 shrink-0 rounded-sm border border-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
className className,
)} )}
{...props} {...props}
> >

12
src/components/UI/Command.tsx

@ -14,7 +14,7 @@ const Command = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"flex h-full w-full flex-col overflow-hidden rounded-lg bg-white dark:bg-slate-800", "flex h-full w-full flex-col overflow-hidden rounded-lg bg-white dark:bg-slate-800",
className className,
)} )}
{...props} {...props}
/> />
@ -48,7 +48,7 @@ const CommandInput = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-slate-400 disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-50", "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-slate-400 disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-50",
className className,
)} )}
{...props} {...props}
/> />
@ -91,7 +91,7 @@ const CommandGroup = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"overflow-hidden py-3 px-2 text-slate-700 dark:text-slate-400 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-slate-900 [&_[cmdk-group-heading]]:dark:text-slate-300", "overflow-hidden py-3 px-2 text-slate-700 dark:text-slate-400 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-slate-900 [&_[cmdk-group-heading]]:dark:text-slate-300",
className className,
)} )}
{...props} {...props}
/> />
@ -119,7 +119,7 @@ const CommandItem = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-md py-1.5 px-2 text-sm font-medium outline-none aria-selected:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-slate-700", "relative flex cursor-default select-none items-center rounded-md py-1.5 px-2 text-sm font-medium outline-none aria-selected:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-slate-700",
className className,
)} )}
{...props} {...props}
/> />
@ -135,7 +135,7 @@ const CommandShortcut = ({
<span <span
className={cn( className={cn(
"ml-auto text-xs tracking-widest text-slate-500", "ml-auto text-xs tracking-widest text-slate-500",
className className,
)} )}
{...props} {...props}
/> />
@ -152,5 +152,5 @@ export {
CommandGroup, CommandGroup,
CommandItem, CommandItem,
CommandShortcut, CommandShortcut,
CommandSeparator CommandSeparator,
}; };

12
src/components/UI/Dialog.tsx

@ -28,7 +28,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay <DialogPrimitive.Overlay
className={cn( className={cn(
"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity animate-in fade-in", "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity animate-in fade-in",
className className,
)} )}
{...props} {...props}
ref={ref} ref={ref}
@ -47,7 +47,7 @@ const DialogContent = React.forwardRef<
className={cn( className={cn(
"fixed z-50 grid w-full scale-100 gap-4 bg-white p-6 opacity-100 animate-in fade-in-90 slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0", "fixed z-50 grid w-full scale-100 gap-4 bg-white p-6 opacity-100 animate-in fade-in-90 slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0",
"dark:bg-slate-900", "dark:bg-slate-900",
className className,
)} )}
{...props} {...props}
> >
@ -68,7 +68,7 @@ const DialogHeader = ({
<div <div
className={cn( className={cn(
"flex flex-col space-y-2 text-center sm:text-left", "flex flex-col space-y-2 text-center sm:text-left",
className className,
)} )}
{...props} {...props}
/> />
@ -82,7 +82,7 @@ const DialogFooter = ({
<div <div
className={cn( className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className className,
)} )}
{...props} {...props}
/> />
@ -98,7 +98,7 @@ const DialogTitle = React.forwardRef<
className={cn( className={cn(
"text-lg font-semibold text-slate-900", "text-lg font-semibold text-slate-900",
"dark:text-slate-50", "dark:text-slate-50",
className className,
)} )}
{...props} {...props}
/> />
@ -124,5 +124,5 @@ export {
DialogHeader, DialogHeader,
DialogFooter, DialogFooter,
DialogTitle, DialogTitle,
DialogDescription DialogDescription,
}; };

18
src/components/UI/DropdownMenu.tsx

@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
className={cn( className={cn(
"flex cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm font-medium outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-700 dark:data-[state=open]:bg-slate-700", "flex cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm font-medium outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-700 dark:data-[state=open]:bg-slate-700",
inset && "pl-8", inset && "pl-8",
className className,
)} )}
{...props} {...props}
> >
@ -46,7 +46,7 @@ const DropdownMenuSubContent = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md animate-in slide-in-from-left-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400", "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md animate-in slide-in-from-left-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
className className,
)} )}
{...props} {...props}
/> />
@ -64,7 +64,7 @@ const DropdownMenuContent = React.forwardRef<
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400", "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
className className,
)} )}
{...props} {...props}
/> />
@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700", "relative flex cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700",
inset && "pl-8", inset && "pl-8",
className className,
)} )}
{...props} {...props}
/> />
@ -98,7 +98,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700", "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700",
className className,
)} )}
checked={checked} checked={checked}
{...props} {...props}
@ -122,7 +122,7 @@ const DropdownMenuRadioItem = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700", "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700",
className className,
)} )}
{...props} {...props}
> >
@ -147,7 +147,7 @@ const DropdownMenuLabel = React.forwardRef<
className={cn( className={cn(
"px-2 py-1.5 text-sm font-semibold text-slate-900 dark:text-slate-300", "px-2 py-1.5 text-sm font-semibold text-slate-900 dark:text-slate-300",
inset && "pl-8", inset && "pl-8",
className className,
)} )}
{...props} {...props}
/> />
@ -174,7 +174,7 @@ const DropdownMenuShortcut = ({
<span <span
className={cn( className={cn(
"ml-auto text-xs tracking-widest text-slate-500", "ml-auto text-xs tracking-widest text-slate-500",
className className,
)} )}
{...props} {...props}
/> />
@ -197,5 +197,5 @@ export {
DropdownMenuSub, DropdownMenuSub,
DropdownMenuSubContent, DropdownMenuSubContent,
DropdownMenuSubTrigger, DropdownMenuSubTrigger,
DropdownMenuRadioGroup DropdownMenuRadioGroup,
}; };

4
src/components/UI/Input.tsx

@ -26,7 +26,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
className={cn( className={cn(
"flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900", "flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
action && "pr-8", action && "pr-8",
className className,
)} )}
ref={ref} ref={ref}
{...props} {...props}
@ -46,7 +46,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
)} )}
</div> </div>
); );
} },
); );
Input.displayName = "Input"; Input.displayName = "Input";

2
src/components/UI/Label.tsx

@ -11,7 +11,7 @@ const Label = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
className className,
)} )}
{...props} {...props}
/> />

26
src/components/UI/Menubar.tsx

@ -22,7 +22,7 @@ const Menubar = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"flex h-10 items-center space-x-1 rounded-md border border-slate-300 bg-white p-1 dark:border-slate-700 dark:bg-slate-800", "flex h-10 items-center space-x-1 rounded-md border border-slate-300 bg-white p-1 dark:border-slate-700 dark:bg-slate-800",
className className,
)} )}
{...props} {...props}
/> />
@ -37,7 +37,7 @@ const MenubarTrigger = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"flex cursor-default select-none items-center rounded-[0.2rem] py-1.5 px-3 text-sm font-medium outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-700 dark:data-[state=open]:bg-slate-700", "flex cursor-default select-none items-center rounded-[0.2rem] py-1.5 px-3 text-sm font-medium outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-700 dark:data-[state=open]:bg-slate-700",
className className,
)} )}
{...props} {...props}
/> />
@ -55,7 +55,7 @@ const MenubarSubTrigger = React.forwardRef<
className={cn( className={cn(
"flex cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm font-medium outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-700 dark:data-[state=open]:bg-slate-700", "flex cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm font-medium outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-700 dark:data-[state=open]:bg-slate-700",
inset && "pl-8", inset && "pl-8",
className className,
)} )}
{...props} {...props}
> >
@ -73,7 +73,7 @@ const MenubarSubContent = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 shadow-md animate-in slide-in-from-left-1 dark:border-slate-700 dark:bg-slate-800", "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 shadow-md animate-in slide-in-from-left-1 dark:border-slate-700 dark:bg-slate-800",
className className,
)} )}
{...props} {...props}
/> />
@ -86,7 +86,7 @@ const MenubarContent = React.forwardRef<
>( >(
( (
{ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
ref ref,
) => ( ) => (
<MenubarPrimitive.Portal> <MenubarPrimitive.Portal>
<MenubarPrimitive.Content <MenubarPrimitive.Content
@ -96,12 +96,12 @@ const MenubarContent = React.forwardRef<
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"z-50 min-w-[12rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md animate-in slide-in-from-top-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400", "z-50 min-w-[12rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md animate-in slide-in-from-top-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
className className,
)} )}
{...props} {...props}
/> />
</MenubarPrimitive.Portal> </MenubarPrimitive.Portal>
) ),
); );
MenubarContent.displayName = MenubarPrimitive.Content.displayName; MenubarContent.displayName = MenubarPrimitive.Content.displayName;
@ -116,7 +116,7 @@ const MenubarItem = React.forwardRef<
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700", "relative flex cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700",
inset && "pl-8", inset && "pl-8",
className className,
)} )}
{...props} {...props}
/> />
@ -131,7 +131,7 @@ const MenubarCheckboxItem = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700", "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700",
className className,
)} )}
checked={checked} checked={checked}
{...props} {...props}
@ -154,7 +154,7 @@ const MenubarRadioItem = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700", "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700",
className className,
)} )}
{...props} {...props}
> >
@ -179,7 +179,7 @@ const MenubarLabel = React.forwardRef<
className={cn( className={cn(
"px-2 py-1.5 text-sm font-semibold text-slate-900 dark:text-slate-300", "px-2 py-1.5 text-sm font-semibold text-slate-900 dark:text-slate-300",
inset && "pl-8", inset && "pl-8",
className className,
)} )}
{...props} {...props}
/> />
@ -206,7 +206,7 @@ const MenubarShortcut = ({
<span <span
className={cn( className={cn(
"ml-auto text-xs tracking-widest text-slate-500", "ml-auto text-xs tracking-widest text-slate-500",
className className,
)} )}
{...props} {...props}
/> />
@ -230,5 +230,5 @@ export {
MenubarSubTrigger, MenubarSubTrigger,
MenubarGroup, MenubarGroup,
MenubarSub, MenubarSub,
MenubarShortcut MenubarShortcut,
}; };

2
src/components/UI/Popover.tsx

@ -18,7 +18,7 @@ const PopoverContent = React.forwardRef<
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"z-50 w-72 rounded-md border border-slate-100 bg-white p-4 shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-800", "z-50 w-72 rounded-md border border-slate-100 bg-white p-4 shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-800",
className className,
)} )}
{...props} {...props}
/> />

2
src/components/UI/ScrollArea.tsx

@ -34,7 +34,7 @@ const ScrollBar = React.forwardRef<
"h-full w-2.5 border-l border-l-transparent p-[1px]", "h-full w-2.5 border-l border-l-transparent p-[1px]",
orientation === "horizontal" && orientation === "horizontal" &&
"h-2.5 border-t border-t-transparent p-[1px]", "h-2.5 border-t border-t-transparent p-[1px]",
className className,
)} )}
{...props} {...props}
> >

10
src/components/UI/Select.tsx

@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"flex h-10 w-full items-center justify-between rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900", "flex h-10 w-full items-center justify-between rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
className className,
)} )}
{...props} {...props}
> >
@ -37,7 +37,7 @@ const SelectContent = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white text-slate-700 shadow-md animate-in fade-in-80 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400", "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white text-slate-700 shadow-md animate-in fade-in-80 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
className className,
)} )}
{...props} {...props}
> >
@ -57,7 +57,7 @@ const SelectLabel = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"py-1.5 pr-2 pl-8 text-sm font-semibold text-slate-900 dark:text-slate-300", "py-1.5 pr-2 pl-8 text-sm font-semibold text-slate-900 dark:text-slate-300",
className className,
)} )}
{...props} {...props}
/> />
@ -72,7 +72,7 @@ const SelectItem = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700", "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700",
className className,
)} )}
{...props} {...props}
> >
@ -107,5 +107,5 @@ export {
SelectContent, SelectContent,
SelectLabel, SelectLabel,
SelectItem, SelectItem,
SelectSeparator SelectSeparator,
}; };

6
src/components/UI/Seperator.tsx

@ -9,7 +9,7 @@ const Separator = React.forwardRef<
>( >(
( (
{ className, orientation = "horizontal", decorative = true, ...props }, { className, orientation = "horizontal", decorative = true, ...props },
ref ref,
) => ( ) => (
<SeparatorPrimitive.Root <SeparatorPrimitive.Root
ref={ref} ref={ref}
@ -18,11 +18,11 @@ const Separator = React.forwardRef<
className={cn( className={cn(
"bg-slate-200 dark:bg-slate-700", "bg-slate-200 dark:bg-slate-700",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className className,
)} )}
{...props} {...props}
/> />
) ),
); );
Separator.displayName = SeparatorPrimitive.Root.displayName; Separator.displayName = SeparatorPrimitive.Root.displayName;

2
src/components/UI/Sidebar/SidebarSection.tsx

@ -8,7 +8,7 @@ export interface SidebarSectionProps {
export const SidebarSection = ({ export const SidebarSection = ({
label: title, label: title,
children children,
}: SidebarSectionProps): JSX.Element => ( }: SidebarSectionProps): JSX.Element => (
<div className="px-4 py-2"> <div className="px-4 py-2">
<H4 className="mb-2 ml-2">{title}</H4> <H4 className="mb-2 ml-2">{title}</H4>

2
src/components/UI/Sidebar/sidebarButton.tsx

@ -14,7 +14,7 @@ export const SidebarButton = ({
active, active,
icon: Icon, icon: Icon,
element, element,
onClick onClick,
}: SidebarButtonProps): JSX.Element => ( }: SidebarButtonProps): JSX.Element => (
<Button <Button
onClick={onClick} onClick={onClick}

4
src/components/UI/Switch.tsx

@ -10,14 +10,14 @@ const Switch = React.forwardRef<
<SwitchPrimitives.Root <SwitchPrimitives.Root
className={cn( className={cn(
"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-slate-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=unchecked]:bg-slate-700 dark:data-[state=checked]:bg-slate-400", "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-slate-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=unchecked]:bg-slate-700 dark:data-[state=checked]:bg-slate-400",
className className,
)} )}
{...props} {...props}
ref={ref} ref={ref}
> >
<SwitchPrimitives.Thumb <SwitchPrimitives.Thumb
className={cn( className={cn(
"pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-5" "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-5",
)} )}
/> />
</SwitchPrimitives.Root> </SwitchPrimitives.Root>

6
src/components/UI/Tabs.tsx

@ -13,7 +13,7 @@ const TabsList = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"inline-flex items-center justify-center rounded-md bg-slate-100 p-1 dark:bg-slate-800", "inline-flex items-center justify-center rounded-md bg-slate-100 p-1 dark:bg-slate-800",
className className,
)} )}
{...props} {...props}
/> />
@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger <TabsPrimitive.Trigger
className={cn( className={cn(
"inline-flex min-w-[100px] items-center justify-center rounded-[0.185rem] px-3 py-1.5 text-sm font-medium text-slate-700 transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm dark:text-slate-200 dark:data-[state=active]:bg-slate-900 dark:data-[state=active]:text-slate-100", "inline-flex min-w-[100px] items-center justify-center rounded-[0.185rem] px-3 py-1.5 text-sm font-medium text-slate-700 transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm dark:text-slate-200 dark:data-[state=active]:bg-slate-900 dark:data-[state=active]:text-slate-100",
className className,
)} )}
{...props} {...props}
ref={ref} ref={ref}
@ -42,7 +42,7 @@ const TabsContent = React.forwardRef<
<TabsPrimitive.Content <TabsPrimitive.Content
className={cn( className={cn(
"mt-2 rounded-md border border-slate-200 p-6 dark:border-slate-700", "mt-2 rounded-md border border-slate-200 p-6 dark:border-slate-700",
className className,
)} )}
{...props} {...props}
ref={ref} ref={ref}

18
src/components/UI/Toast.tsx

@ -15,7 +15,7 @@ const ToastViewport = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"fixed top-0 z-50 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:bottom-0 sm:right-0 sm:flex-col md:max-w-[420px]", "fixed top-0 z-50 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:bottom-0 sm:right-0 sm:flex-col md:max-w-[420px]",
className className,
)} )}
{...props} {...props}
/> />
@ -30,13 +30,13 @@ const toastVariants = cva(
default: default:
"bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700", "bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700",
destructive: destructive:
"group destructive bg-red-600 text-white border-red-600 dark:border-red-600" "group destructive bg-red-600 text-white border-red-600 dark:border-red-600",
} },
}, },
defaultVariants: { defaultVariants: {
variant: "default" variant: "default",
} },
} },
); );
const Toast = React.forwardRef< const Toast = React.forwardRef<
@ -62,7 +62,7 @@ const ToastAction = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-slate-200 bg-transparent px-3 text-sm font-medium transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-red-100 group-[.destructive]:hover:border-slate-50 group-[.destructive]:hover:bg-red-100 group-[.destructive]:hover:text-red-600 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-slate-700 dark:hover:text-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=open]:bg-slate-800", "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-slate-200 bg-transparent px-3 text-sm font-medium transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-red-100 group-[.destructive]:hover:border-slate-50 group-[.destructive]:hover:bg-red-100 group-[.destructive]:hover:text-red-600 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-slate-700 dark:hover:text-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=open]:bg-slate-800",
className className,
)} )}
{...props} {...props}
/> />
@ -77,7 +77,7 @@ const ToastClose = React.forwardRef<
ref={ref} ref={ref}
className={cn( className={cn(
"absolute top-2 right-2 rounded-md p-1 text-slate-500 opacity-0 transition-opacity hover:text-slate-900 focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:hover:text-slate-50", "absolute top-2 right-2 rounded-md p-1 text-slate-500 opacity-0 transition-opacity hover:text-slate-900 focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:hover:text-slate-50",
className className,
)} )}
toast-close="" toast-close=""
{...props} {...props}
@ -124,5 +124,5 @@ export {
ToastTitle, ToastTitle,
ToastDescription, ToastDescription,
ToastClose, ToastClose,
ToastAction ToastAction,
}; };

2
src/components/UI/Tooltip.tsx

@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400", "z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
className className,
)} )}
{...props} {...props}
/> />

2
src/components/UI/Typography/H4.tsx

@ -9,7 +9,7 @@ export const H4 = ({ className, children }: H4Props): JSX.Element => (
<h4 <h4
className={cn( className={cn(
"scroll-m-20 text-xl font-semibold tracking-tight", "scroll-m-20 text-xl font-semibold tracking-tight",
className className,
)} )}
> >
{children} {children}

2
src/components/generic/ThemeController.tsx

@ -6,7 +6,7 @@ export interface ThemeControllerProps {
} }
export const ThemeController = ({ export const ThemeController = ({
children children,
}: ThemeControllerProps): JSX.Element => { }: ThemeControllerProps): JSX.Element => {
const { darkMode, accent } = useAppStore(); const { darkMode, accent } = useAppStore();

30
src/core/hooks/useToast.ts

@ -16,7 +16,7 @@ const actionTypes = {
ADD_TOAST: "ADD_TOAST", ADD_TOAST: "ADD_TOAST",
UPDATE_TOAST: "UPDATE_TOAST", UPDATE_TOAST: "UPDATE_TOAST",
DISMISS_TOAST: "DISMISS_TOAST", DISMISS_TOAST: "DISMISS_TOAST",
REMOVE_TOAST: "REMOVE_TOAST" REMOVE_TOAST: "REMOVE_TOAST",
} as const; } as const;
let count = 0; let count = 0;
@ -61,7 +61,7 @@ const addToRemoveQueue = (toastId: string) => {
toastTimeouts.delete(toastId); toastTimeouts.delete(toastId);
dispatch({ dispatch({
type: "REMOVE_TOAST", type: "REMOVE_TOAST",
toastId: toastId toastId: toastId,
}); });
}, TOAST_REMOVE_DELAY); }, TOAST_REMOVE_DELAY);
@ -73,15 +73,15 @@ export const reducer = (state: State, action: Action): State => {
case "ADD_TOAST": case "ADD_TOAST":
return { return {
...state, ...state,
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT) toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
}; };
case "UPDATE_TOAST": case "UPDATE_TOAST":
return { return {
...state, ...state,
toasts: state.toasts.map((t) => toasts: state.toasts.map((t) =>
t.id === action.toast.id ? { ...t, ...action.toast } : t t.id === action.toast.id ? { ...t, ...action.toast } : t,
) ),
}; };
case "DISMISS_TOAST": case "DISMISS_TOAST":
@ -103,21 +103,21 @@ export const reducer = (state: State, action: Action): State => {
t.id === toastId || toastId === undefined t.id === toastId || toastId === undefined
? { ? {
...t, ...t,
open: false open: false,
} }
: t : t,
) ),
}; };
case "REMOVE_TOAST": case "REMOVE_TOAST":
if (action.toastId === undefined) { if (action.toastId === undefined) {
return { return {
...state, ...state,
toasts: [] toasts: [],
}; };
} }
return { return {
...state, ...state,
toasts: state.toasts.filter((t) => t.id !== action.toastId) toasts: state.toasts.filter((t) => t.id !== action.toastId),
}; };
} }
}; };
@ -141,7 +141,7 @@ function toast({ ...props }: Toast) {
const update = (props: ToasterToast) => const update = (props: ToasterToast) =>
dispatch({ dispatch({
type: "UPDATE_TOAST", type: "UPDATE_TOAST",
toast: { ...props, id } toast: { ...props, id },
}); });
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id }); const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
@ -153,14 +153,14 @@ function toast({ ...props }: Toast) {
open: true, open: true,
onOpenChange: (open) => { onOpenChange: (open) => {
if (!open) dismiss(); if (!open) dismiss();
} },
} },
}); });
return { return {
id: id, id: id,
dismiss, dismiss,
update update,
}; };
} }
@ -180,7 +180,7 @@ function useToast() {
return { return {
...state, ...state,
toast, toast,
dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }) dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
}; };
} }

24
src/core/stores/appStore.ts

@ -48,7 +48,7 @@ export const useAppStore = create<AppState>()((set) => ({
currentPage: "messages", currentPage: "messages",
rasterSources: [], rasterSources: [],
commandPaletteOpen: false, commandPaletteOpen: false,
darkMode: window.matchMedia('(prefers-color-scheme: dark)').matches, darkMode: window.matchMedia("(prefers-color-scheme: dark)").matches,
accent: "orange", accent: "orange",
connectDialogOpen: false, connectDialogOpen: false,
@ -56,61 +56,61 @@ export const useAppStore = create<AppState>()((set) => ({
set( set(
produce<AppState>((draft) => { produce<AppState>((draft) => {
draft.rasterSources = sources; draft.rasterSources = sources;
}) }),
); );
}, },
addRasterSource: (source: RasterSource) => { addRasterSource: (source: RasterSource) => {
set( set(
produce<AppState>((draft) => { produce<AppState>((draft) => {
draft.rasterSources.push(source); draft.rasterSources.push(source);
}) }),
); );
}, },
removeRasterSource: (index: number) => { removeRasterSource: (index: number) => {
set( set(
produce<AppState>((draft) => { produce<AppState>((draft) => {
draft.rasterSources.splice(index, 1); draft.rasterSources.splice(index, 1);
}) }),
); );
}, },
setSelectedDevice: (deviceId) => setSelectedDevice: (deviceId) =>
set(() => ({ set(() => ({
selectedDevice: deviceId selectedDevice: deviceId,
})), })),
addDevice: (device) => addDevice: (device) =>
set((state) => ({ set((state) => ({
devices: [...state.devices, device] devices: [...state.devices, device],
})), })),
removeDevice: (deviceId) => removeDevice: (deviceId) =>
set((state) => ({ set((state) => ({
devices: state.devices.filter((device) => device.id !== deviceId) devices: state.devices.filter((device) => device.id !== deviceId),
})), })),
setCommandPaletteOpen: (open: boolean) => { setCommandPaletteOpen: (open: boolean) => {
set( set(
produce<AppState>((draft) => { produce<AppState>((draft) => {
draft.commandPaletteOpen = open; draft.commandPaletteOpen = open;
}) }),
); );
}, },
setDarkMode: (enabled: boolean) => { setDarkMode: (enabled: boolean) => {
set( set(
produce<AppState>((draft) => { produce<AppState>((draft) => {
draft.darkMode = enabled; draft.darkMode = enabled;
}) }),
); );
}, },
setAccent(color) { setAccent(color) {
set( set(
produce<AppState>((draft) => { produce<AppState>((draft) => {
draft.accent = color; draft.accent = color;
}) }),
); );
}, },
setConnectDialogOpen: (open: boolean) => { setConnectDialogOpen: (open: boolean) => {
set( set(
produce<AppState>((draft) => { produce<AppState>((draft) => {
draft.connectDialogOpen = open; draft.connectDialogOpen = open;
}) }),
); );
} },
})); }));

72
src/core/stores/deviceStore.ts

@ -81,7 +81,7 @@ export interface Device {
to: number, to: number,
from: number, from: number,
messageId: number, messageId: number,
state: MessageState state: MessageState,
) => void; ) => void;
setDialogOpen: (dialog: DialogVariant, open: boolean) => void; setDialogOpen: (dialog: DialogVariant, open: boolean) => void;
processPacket: (data: processPacketParams) => void; processPacket: (data: processPacketParams) => void;
@ -118,7 +118,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
metadata: new Map(), metadata: new Map(),
messages: { messages: {
direct: new Map(), direct: new Map(),
broadcast: new Map() broadcast: new Map(),
}, },
connection: undefined, connection: undefined,
activePage: "messages", activePage: "messages",
@ -130,7 +130,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
QR: false, QR: false,
shutdown: false, shutdown: false,
reboot: false, reboot: false,
deviceName: false deviceName: false,
}, },
pendingSettingsChanges: false, pendingSettingsChanges: false,
messageDraft: "", messageDraft: "",
@ -142,7 +142,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
if (device) { if (device) {
device.status = status; device.status = status;
} }
}) }),
); );
}, },
setConfig: (config: Protobuf.Config) => { setConfig: (config: Protobuf.Config) => {
@ -175,7 +175,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
break; break;
} }
} }
}) }),
); );
}, },
setModuleConfig: (config: Protobuf.ModuleConfig) => { setModuleConfig: (config: Protobuf.ModuleConfig) => {
@ -215,7 +215,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
device.moduleConfig.audio = config.payloadVariant.value; device.moduleConfig.audio = config.payloadVariant.value;
} }
} }
}) }),
); );
}, },
setWorkingConfig: (config: Protobuf.Config) => { setWorkingConfig: (config: Protobuf.Config) => {
@ -226,14 +226,14 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
return; return;
} }
const workingConfigIndex = device?.workingConfig.findIndex( const workingConfigIndex = device?.workingConfig.findIndex(
(wc) => wc.payloadVariant.case === config.payloadVariant.case (wc) => wc.payloadVariant.case === config.payloadVariant.case,
); );
if (workingConfigIndex !== -1) { if (workingConfigIndex !== -1) {
device.workingConfig[workingConfigIndex] = config; device.workingConfig[workingConfigIndex] = config;
} else { } else {
device?.workingConfig.push(config); device?.workingConfig.push(config);
} }
}) }),
); );
}, },
setWorkingModuleConfig: (moduleConfig: Protobuf.ModuleConfig) => { setWorkingModuleConfig: (moduleConfig: Protobuf.ModuleConfig) => {
@ -247,7 +247,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
device?.workingModuleConfig.findIndex( device?.workingModuleConfig.findIndex(
(wmc) => (wmc) =>
wmc.payloadVariant.case === wmc.payloadVariant.case ===
moduleConfig.payloadVariant.case moduleConfig.payloadVariant.case,
); );
if (workingModuleConfigIndex !== -1) { if (workingModuleConfigIndex !== -1) {
device.workingModuleConfig[workingModuleConfigIndex] = device.workingModuleConfig[workingModuleConfigIndex] =
@ -255,7 +255,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
} else { } else {
device?.workingModuleConfig.push(moduleConfig); device?.workingModuleConfig.push(moduleConfig);
} }
}) }),
); );
}, },
setHardware: (hardware: Protobuf.MyNodeInfo) => { setHardware: (hardware: Protobuf.MyNodeInfo) => {
@ -265,7 +265,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
if (device) { if (device) {
device.hardware = hardware; device.hardware = hardware;
} }
}) }),
); );
}, },
// setMetrics: (metrics: Types.PacketMetadata<Protobuf.Telemetry>) => { // setMetrics: (metrics: Types.PacketMetadata<Protobuf.Telemetry>) => {
@ -319,7 +319,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
if (device) { if (device) {
device.activePage = page; device.activePage = page;
} }
}) }),
); );
}, },
setPendingSettingsChanges: (state) => { setPendingSettingsChanges: (state) => {
@ -329,7 +329,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
if (device) { if (device) {
device.pendingSettingsChanges = state; device.pendingSettingsChanges = state;
} }
}) }),
); );
}, },
addChannel: (channel: Protobuf.Channel) => { addChannel: (channel: Protobuf.Channel) => {
@ -340,7 +340,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
return; return;
} }
device.channels.set(channel.index, channel); device.channels.set(channel.index, channel);
}) }),
); );
}, },
addWaypoint: (waypoint: Protobuf.Waypoint) => { addWaypoint: (waypoint: Protobuf.Waypoint) => {
@ -349,7 +349,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
const device = draft.devices.get(id); const device = draft.devices.get(id);
if (device) { if (device) {
const waypointIndex = device.waypoints.findIndex( const waypointIndex = device.waypoints.findIndex(
(wp) => wp.id === waypoint.id (wp) => wp.id === waypoint.id,
); );
if (waypointIndex !== -1) { if (waypointIndex !== -1) {
@ -358,7 +358,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
device.waypoints.push(waypoint); device.waypoints.push(waypoint);
} }
} }
}) }),
); );
}, },
addNodeInfo: (nodeInfo) => { addNodeInfo: (nodeInfo) => {
@ -369,7 +369,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
return; return;
} }
device.nodes.set(nodeInfo.num, nodeInfo); device.nodes.set(nodeInfo.num, nodeInfo);
}) }),
); );
}, },
setActivePeer: (peer) => { setActivePeer: (peer) => {
@ -379,7 +379,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
if (device) { if (device) {
device.activePeer = peer; device.activePeer = peer;
} }
}) }),
); );
}, },
addUser: (user) => { addUser: (user) => {
@ -393,7 +393,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
device.nodes.get(user.from) ?? new Protobuf.NodeInfo(); device.nodes.get(user.from) ?? new Protobuf.NodeInfo();
currentNode.user = user.data; currentNode.user = user.data;
device.nodes.set(user.from, currentNode); device.nodes.set(user.from, currentNode);
}) }),
); );
}, },
addPosition: (position) => { addPosition: (position) => {
@ -407,7 +407,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
device.nodes.get(position.from) ?? new Protobuf.NodeInfo(); device.nodes.get(position.from) ?? new Protobuf.NodeInfo();
currentNode.position = position.data; currentNode.position = position.data;
device.nodes.set(position.from, currentNode); device.nodes.set(position.from, currentNode);
}) }),
); );
}, },
addConnection: (connection) => { addConnection: (connection) => {
@ -417,7 +417,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
if (device) { if (device) {
device.connection = connection; device.connection = connection;
} }
}) }),
); );
}, },
addMessage: (message) => { addMessage: (message) => {
@ -442,7 +442,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
} else { } else {
messageGroup.set(messageIndex, [message]); messageGroup.set(messageIndex, [message]);
} }
}) }),
); );
}, },
addMetadata: (from, metadata) => { addMetadata: (from, metadata) => {
@ -453,7 +453,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
return; return;
} }
device.metadata.set(from, metadata); device.metadata.set(from, metadata);
}) }),
); );
}, },
setMessageState: ( setMessageState: (
@ -462,7 +462,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
to: number, to: number,
from: number, from: number,
messageId: number, messageId: number,
state: MessageState state: MessageState,
) => { ) => {
set( set(
produce<DeviceState>((draft) => { produce<DeviceState>((draft) => {
@ -494,9 +494,9 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
msg.state = state; msg.state = state;
} }
return msg; return msg;
}) }),
); );
}) }),
); );
}, },
setDialogOpen: (dialog: DialogVariant, open: boolean) => { setDialogOpen: (dialog: DialogVariant, open: boolean) => {
@ -507,7 +507,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
return; return;
} }
device.dialog[dialog] = open; device.dialog[dialog] = open;
}) }),
); );
}, },
processPacket(data: processPacketParams) { processPacket(data: processPacketParams) {
@ -524,17 +524,17 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
new Protobuf.NodeInfo({ new Protobuf.NodeInfo({
num: data.from, num: data.from,
lastHeard: data.time, lastHeard: data.time,
snr: data.snr snr: data.snr,
}) }),
); );
} else { } else {
device.nodes.set(data.from, { device.nodes.set(data.from, {
...node, ...node,
lastHeard: data.time, lastHeard: data.time,
snr: data.snr snr: data.snr,
}); });
} }
}) }),
); );
}, },
setMessageDraft: (message: string) => { setMessageDraft: (message: string) => {
@ -544,11 +544,11 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
if (device) { if (device) {
device.messageDraft = message; device.messageDraft = message;
} }
}) }),
); );
} },
}); });
}) }),
); );
const device = get().devices.get(id); const device = get().devices.get(id);
@ -562,13 +562,13 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
set( set(
produce<DeviceState>((draft) => { produce<DeviceState>((draft) => {
draft.devices.delete(id); draft.devices.delete(id);
}) }),
); );
}, },
getDevices: () => Array.from(get().devices.values()), getDevices: () => Array.from(get().devices.values()),
getDevice: (id) => get().devices.get(id) getDevice: (id) => get().devices.get(id),
})); }));
export const DeviceContext = createContext<Device | undefined>(undefined); export const DeviceContext = createContext<Device | undefined>(undefined);

6
src/core/subscriptions.ts

@ -3,7 +3,7 @@ import { Protobuf, Types } from "@meshtastic/meshtasticjs";
export const subscribeAll = ( export const subscribeAll = (
device: Device, device: Device,
connection: Types.ConnectionType connection: Types.ConnectionType,
) => { ) => {
let myNodeNum = 0; let myNodeNum = 0;
@ -79,7 +79,7 @@ export const subscribeAll = (
connection.events.onMessagePacket.subscribe((messagePacket) => { connection.events.onMessagePacket.subscribe((messagePacket) => {
device.addMessage({ device.addMessage({
...messagePacket, ...messagePacket,
state: messagePacket.from !== myNodeNum ? "ack" : "waiting" state: messagePacket.from !== myNodeNum ? "ack" : "waiting",
}); });
}); });
@ -91,7 +91,7 @@ export const subscribeAll = (
device.processPacket({ device.processPacket({
from: meshPacket.from, from: meshPacket.from,
snr: meshPacket.rxSnr, snr: meshPacket.rxSnr,
time: meshPacket.rxTime time: meshPacket.rxTime,
}); });
}); });
}; };

2
src/core/utils/bitwise.ts

@ -8,7 +8,7 @@ export const bitwiseEncode = (enumValues: number[]): number => {
export const bitwiseDecode = ( export const bitwiseDecode = (
value: number, value: number,
decodeEnum: enumLike decodeEnum: enumLike,
): number[] => { ): number[] => {
const enumValues = Object.keys(decodeEnum).map(Number).filter(Boolean); const enumValues = Object.keys(decodeEnum).map(Number).filter(Boolean);
return enumValues.map((b) => value & b).filter(Boolean); return enumValues.map((b) => value & b).filter(Boolean);

2
src/index.tsx

@ -15,5 +15,5 @@ enableMapSet();
root.render( root.render(
<StrictMode> <StrictMode>
<App /> <App />
</StrictMode> </StrictMode>,
); );

10
src/pages/Channels.tsx

@ -10,7 +10,7 @@ import {
Tabs, Tabs,
TabsContent, TabsContent,
TabsList, TabsList,
TabsTrigger TabsTrigger,
} from "@app/components/UI/Tabs.js"; } from "@app/components/UI/Tabs.js";
export const getChannelName = (channel: Protobuf.Channel) => export const getChannelName = (channel: Protobuf.Channel) =>
@ -23,7 +23,7 @@ export const getChannelName = (channel: Protobuf.Channel) =>
export const ChannelsPage = (): JSX.Element => { export const ChannelsPage = (): JSX.Element => {
const { channels, setDialogOpen } = useDevice(); const { channels, setDialogOpen } = useDevice();
const [activeChannel, setActiveChannel] = useState<Types.ChannelNumber>( const [activeChannel, setActiveChannel] = useState<Types.ChannelNumber>(
Types.ChannelNumber.PRIMARY Types.ChannelNumber.PRIMARY,
); );
const currentChannel = channels.get(activeChannel); const currentChannel = channels.get(activeChannel);
@ -41,14 +41,14 @@ export const ChannelsPage = (): JSX.Element => {
icon: ImportIcon, icon: ImportIcon,
onClick() { onClick() {
setDialogOpen("import", true); setDialogOpen("import", true);
} },
}, },
{ {
icon: QrCodeIcon, icon: QrCodeIcon,
onClick() { onClick() {
setDialogOpen("QR", true); setDialogOpen("QR", true);
} },
} },
]} ]}
> >
<Tabs defaultValue="0"> <Tabs defaultValue="0">

18
src/pages/Config/DeviceConfig.tsx

@ -11,7 +11,7 @@ import {
Tabs, Tabs,
TabsContent, TabsContent,
TabsList, TabsList,
TabsTrigger TabsTrigger,
} from "@components/UI/Tabs.js"; } from "@components/UI/Tabs.js";
export const DeviceConfig = (): JSX.Element => { export const DeviceConfig = (): JSX.Element => {
@ -21,33 +21,33 @@ export const DeviceConfig = (): JSX.Element => {
{ {
label: "Device", label: "Device",
element: Device, element: Device,
count: 0 count: 0,
}, },
{ {
label: "Position", label: "Position",
element: Position element: Position,
}, },
{ {
label: "Power", label: "Power",
element: Power element: Power,
}, },
{ {
label: "Network", label: "Network",
element: Network, element: Network,
disabled: !hardware.hasWifi disabled: !hardware.hasWifi,
}, },
{ {
label: "Display", label: "Display",
element: Display element: Display,
}, },
{ {
label: "LoRa", label: "LoRa",
element: LoRa element: LoRa,
}, },
{ {
label: "Bluetooth", label: "Bluetooth",
element: Bluetooth element: Bluetooth,
} },
]; ];
return ( return (

20
src/pages/Config/ModuleConfig.tsx

@ -12,7 +12,7 @@ import {
Tabs, Tabs,
TabsContent, TabsContent,
TabsList, TabsList,
TabsTrigger TabsTrigger,
} from "@components/UI/Tabs.js"; } from "@components/UI/Tabs.js";
export const ModuleConfig = (): JSX.Element => { export const ModuleConfig = (): JSX.Element => {
@ -21,36 +21,36 @@ export const ModuleConfig = (): JSX.Element => {
const tabs = [ const tabs = [
{ {
label: "MQTT", label: "MQTT",
element: MQTT element: MQTT,
}, },
{ {
label: "Serial", label: "Serial",
element: Serial element: Serial,
}, },
{ {
label: "Ext Notif", label: "Ext Notif",
element: ExternalNotification element: ExternalNotification,
}, },
{ {
label: "S&F", label: "S&F",
element: StoreForward element: StoreForward,
}, },
{ {
label: "Range Test", label: "Range Test",
element: RangeTest element: RangeTest,
}, },
{ {
label: "Telemetry", label: "Telemetry",
element: Telemetry element: Telemetry,
}, },
{ {
label: "Canned", label: "Canned",
element: CannedMessage element: CannedMessage,
}, },
{ {
label: "Audio", label: "Audio",
element: Audio element: Audio,
} },
]; ];
return ( return (

16
src/pages/Config/index.tsx

@ -47,24 +47,24 @@ export const ConfigPage = (): JSX.Element => {
async (config) => async (config) =>
await connection?.setConfig(config).then(() => await connection?.setConfig(config).then(() =>
toast({ toast({
title: `Config ${config.payloadVariant.case} saved` title: `Config ${config.payloadVariant.case} saved`,
}) }),
) ),
); );
} else { } else {
workingModuleConfig.map( workingModuleConfig.map(
async (moduleConfig) => async (moduleConfig) =>
await connection?.setModuleConfig(moduleConfig).then(() => await connection?.setModuleConfig(moduleConfig).then(() =>
toast({ toast({
title: `Config ${moduleConfig.payloadVariant.case} saved` title: `Config ${moduleConfig.payloadVariant.case} saved`,
}) }),
) ),
); );
} }
await connection?.commitEditSettings(); await connection?.commitEditSettings();
} },
} },
]} ]}
> >
{activeConfigSection === "device" ? <DeviceConfig /> : <ModuleConfig />} {activeConfigSection === "device" ? <DeviceConfig /> : <ModuleConfig />}

30
src/pages/Map.tsx

@ -9,7 +9,7 @@ import {
ZoomInIcon, ZoomInIcon,
ZoomOutIcon, ZoomOutIcon,
BoxSelectIcon, BoxSelectIcon,
MapPinIcon MapPinIcon,
} from "lucide-react"; } from "lucide-react";
import { bbox, lineString } from "@turf/turf"; import { bbox, lineString } from "@turf/turf";
import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js"; import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
@ -30,7 +30,7 @@ export const MapPage = (): JSX.Element => {
const getBBox = () => { const getBBox = () => {
if (!map) return; if (!map) return;
const nodesWithPosition = allNodes.filter( const nodesWithPosition = allNodes.filter(
(node) => node.position?.latitudeI (node) => node.position?.latitudeI,
); );
if (!nodesWithPosition.length) return; if (!nodesWithPosition.length) return;
if (nodesWithPosition.length === 1) { if (nodesWithPosition.length === 1) {
@ -38,24 +38,24 @@ export const MapPage = (): JSX.Element => {
zoom: 12, zoom: 12,
center: [ center: [
(nodesWithPosition[0].position?.longitudeI ?? 0) / 1e7, (nodesWithPosition[0].position?.longitudeI ?? 0) / 1e7,
(nodesWithPosition[0].position?.latitudeI ?? 0) / 1e7 (nodesWithPosition[0].position?.latitudeI ?? 0) / 1e7,
] ],
}); });
return; return;
} }
const line = lineString( const line = lineString(
nodesWithPosition.map((n) => [ nodesWithPosition.map((n) => [
(n.position?.latitudeI ?? 0) / 1e7, (n.position?.latitudeI ?? 0) / 1e7,
(n.position?.longitudeI ?? 0) / 1e7 (n.position?.longitudeI ?? 0) / 1e7,
]) ]),
); );
const bounds = bbox(line); const bounds = bbox(line);
const center = map.cameraForBounds( const center = map.cameraForBounds(
[ [
[bounds[1], bounds[0]], [bounds[1], bounds[0]],
[bounds[3], bounds[2]] [bounds[3], bounds[2]],
], ],
{ padding: { top: 10, bottom: 10, left: 10, right: 10 } } { padding: { top: 10, bottom: 10, left: 10, right: 10 } },
); );
if (center) map.easeTo(center); if (center) map.easeTo(center);
}; };
@ -89,20 +89,20 @@ export const MapPage = (): JSX.Element => {
icon: ZoomInIcon, icon: ZoomInIcon,
onClick() { onClick() {
map?.zoomIn(); map?.zoomIn();
} },
}, },
{ {
icon: ZoomOutIcon, icon: ZoomOutIcon,
onClick() { onClick() {
map?.zoomOut(); map?.zoomOut();
} },
}, },
{ {
icon: BoxSelectIcon, icon: BoxSelectIcon,
onClick() { onClick() {
getBBox(); getBBox();
} },
} },
]} ]}
> >
<Map <Map
@ -126,7 +126,7 @@ export const MapPage = (): JSX.Element => {
initialViewState={{ initialViewState={{
zoom: 10, zoom: 10,
latitude: -38, latitude: -38,
longitude: 145 longitude: 145,
}} }}
> >
{waypoints.map((wp) => ( {waypoints.map((wp) => (
@ -162,8 +162,8 @@ export const MapPage = (): JSX.Element => {
zoom: 12, zoom: 12,
center: [ center: [
(node.position?.longitudeI ?? 0) / 1e7, (node.position?.longitudeI ?? 0) / 1e7,
(node.position?.latitudeI ?? 0) / 1e7 (node.position?.latitudeI ?? 0) / 1e7,
] ],
}); });
}} }}
> >

10
src/pages/Messages.tsx

@ -15,14 +15,14 @@ export const MessagesPage = (): JSX.Element => {
const [chatType, setChatType] = const [chatType, setChatType] =
useState<Types.PacketDestination>("broadcast"); useState<Types.PacketDestination>("broadcast");
const [activeChat, setActiveChat] = useState<number>( const [activeChat, setActiveChat] = useState<number>(
Types.ChannelNumber.PRIMARY Types.ChannelNumber.PRIMARY,
); );
const filteredNodes = Array.from(nodes.values()).filter( const filteredNodes = Array.from(nodes.values()).filter(
(n) => n.num !== hardware.myNodeNum (n) => n.num !== hardware.myNodeNum,
); );
const allChannels = Array.from(channels.values()); const allChannels = Array.from(channels.values());
const filteredChannels = allChannels.filter( const filteredChannels = allChannels.filter(
(ch) => ch.role !== Protobuf.Channel_Role.DISABLED (ch) => ch.role !== Protobuf.Channel_Role.DISABLED,
); );
const currentChannel = channels.get(activeChat); const currentChannel = channels.get(activeChat);
@ -82,7 +82,7 @@ export const MessagesPage = (): JSX.Element => {
messages={messages.broadcast.get(channel.index)} messages={messages.broadcast.get(channel.index)}
channel={channel.index} channel={channel.index}
/> />
) ),
)} )}
{filteredNodes.map( {filteredNodes.map(
(node) => (node) =>
@ -93,7 +93,7 @@ export const MessagesPage = (): JSX.Element => {
messages={messages.direct.get(node.num)} messages={messages.direct.get(node.num)}
channel={Types.ChannelNumber.PRIMARY} channel={Types.ChannelNumber.PRIMARY}
/> />
) ),
)} )}
</PageLayout> </PageLayout>
</> </>

17
src/pages/Peers.tsx

@ -11,7 +11,7 @@ export const PeersPage = (): JSX.Element => {
const { nodes, hardware } = useDevice(); const { nodes, hardware } = useDevice();
const filteredNodes = Array.from(nodes.values()).filter( const filteredNodes = Array.from(nodes.values()).filter(
(n) => n.num !== hardware.myNodeNum (n) => n.num !== hardware.myNodeNum,
); );
return ( return (
@ -25,16 +25,17 @@ export const PeersPage = (): JSX.Element => {
{ title: "Model", type: "normal", sortable: true }, { title: "Model", type: "normal", sortable: true },
{ title: "MAC Address", type: "normal", sortable: true }, { title: "MAC Address", type: "normal", sortable: true },
{ title: "Last Heard", type: "normal", sortable: true }, { title: "Last Heard", type: "normal", sortable: true },
{ title: "SNR", type: "normal", sortable: true } { title: "SNR", type: "normal", sortable: true },
]} ]}
rows={filteredNodes.map((node) => [ rows={filteredNodes.map((node) => [
<Hashicon size={24} value={node.num.toString()} />, <Hashicon size={24} value={node.num.toString()} />,
<h1> <h1>
{node.user?.longName ?? (node.user?.macaddr {node.user?.longName ??
? `Meshtastic ${base16 (node.user?.macaddr
.stringify(node.user?.macaddr.subarray(4, 6) ?? []) ? `Meshtastic ${base16
.toLowerCase()}` .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
: `UNK: ${node.num}`)} .toLowerCase()}`
: `UNK: ${node.num}`)}
</h1>, </h1>,
<Mono>{Protobuf.HardwareModel[node.user?.hwModel ?? 0]}</Mono>, <Mono>{Protobuf.HardwareModel[node.user?.hwModel ?? 0]}</Mono>,
@ -53,7 +54,7 @@ export const PeersPage = (): JSX.Element => {
{node.snr}db/ {node.snr}db/
{Math.min(Math.max((node.snr + 10) * 5, 0), 100)}%/ {Math.min(Math.max((node.snr + 10) * 5, 0), 100)}%/
{(node.snr + 10) * 5}raw {(node.snr + 10) * 5}raw
</Mono> </Mono>,
])} ])}
/> />
</div> </div>

2
src/validation/channel.ts

@ -4,7 +4,7 @@ import {
IsInt, IsInt,
IsNumber, IsNumber,
IsString, IsString,
Length Length,
} from "class-validator"; } from "class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs"; import { Protobuf } from "@meshtastic/meshtasticjs";

6
src/validation/config/device.ts

@ -25,4 +25,10 @@ export class DeviceValidation
@IsInt() @IsInt()
nodeInfoBroadcastSecs: number; nodeInfoBroadcastSecs: number;
@IsBoolean()
doubleTapAsButtonPress: boolean;
@IsBoolean()
isManaged: boolean;
} }

3
src/validation/config/display.ts

@ -31,4 +31,7 @@ export class DisplayValidation
@IsBoolean() @IsBoolean()
headingBold: boolean; headingBold: boolean;
@IsBoolean()
wakeOnTapOrMotion: boolean;
} }

2
src/validation/config/network.ts

@ -4,7 +4,7 @@ import {
IsIP, IsIP,
IsOptional, IsOptional,
IsString, IsString,
Length Length,
} from "class-validator"; } from "class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs"; import { Protobuf } from "@meshtastic/meshtasticjs";

9
src/validation/config/position.ts

@ -3,8 +3,7 @@ import { IsBoolean, IsInt, IsNumber } from "class-validator";
import type { Protobuf } from "@meshtastic/meshtasticjs"; import type { Protobuf } from "@meshtastic/meshtasticjs";
export class PositionValidation export class PositionValidation
implements implements Omit<Protobuf.Config_PositionConfig, keyof Protobuf.native.Message>
Omit<Protobuf.Config_PositionConfig, keyof Protobuf.native.Message>
{ {
@IsInt() @IsInt()
positionBroadcastSecs: number; positionBroadcastSecs: number;
@ -32,4 +31,10 @@ export class PositionValidation
@IsInt() @IsInt()
txGpio: number; txGpio: number;
@IsInt()
broadcastSmartMinimumDistance: number;
@IsInt()
broadcastSmartMinimumIntervalSecs: number;
} }

3
src/validation/config/power.ts

@ -30,4 +30,7 @@ export class PowerValidation
@IsInt() @IsInt()
minWakeSecs: number; minWakeSecs: number;
@IsInt()
deviceBatteryInaAddress: number;
} }

11
src/validation/moduleConfig/mqtt.ts

@ -1,4 +1,4 @@
import { IsBoolean, Length } from "class-validator"; import { IsBoolean, IsString, Length } from "class-validator";
import type { Protobuf } from "@meshtastic/meshtasticjs"; import type { Protobuf } from "@meshtastic/meshtasticjs";
@ -23,4 +23,13 @@ export class MQTTValidation
@IsBoolean() @IsBoolean()
jsonEnabled: boolean; jsonEnabled: boolean;
@IsBoolean()
tlsEnabled: boolean;
@IsString()
root: string;
@IsBoolean()
proxyToClientEnabled: boolean;
} }

3
src/validation/moduleConfig/serial.ts

@ -26,4 +26,7 @@ export class SerialValidation
@IsEnum(Protobuf.ModuleConfig_SerialConfig_Serial_Mode) @IsEnum(Protobuf.ModuleConfig_SerialConfig_Serial_Mode)
mode: Protobuf.ModuleConfig_SerialConfig_Serial_Mode; mode: Protobuf.ModuleConfig_SerialConfig_Serial_Mode;
@IsBoolean()
overrideConsoleSerialPort: boolean;
} }

6
src/validation/moduleConfig/telemetry.ts

@ -20,4 +20,10 @@ export class TelemetryValidation
@IsBoolean() @IsBoolean()
environmentDisplayFahrenheit: boolean; environmentDisplayFahrenheit: boolean;
@IsBoolean()
airQualityEnabled: boolean;
@IsInt()
airQualityInterval: number;
} }

1
tsconfig.json

@ -28,7 +28,6 @@
"removeComments": true, "removeComments": true,
"strictNullChecks": true, "strictNullChecks": true,
"types": ["vite/client", "node"], "types": ["vite/client", "node"],
"importsNotUsedAsValues": "error",
"strictPropertyInitialization": false, "strictPropertyInitialization": false,
"experimentalDecorators": true "experimentalDecorators": true
} }

Loading…
Cancel
Save