= total ? "bg-green-500" : "bg-[#f9e3aa]"
+ }`}
+ />
+
+
= total
+ ? "bg-green-500 border-green-500"
+ : "bg-[#f9e3aa] border-green-500"
+ }`}
+ >
+ 0 ? "bg-green-500" : "bg-[#f9e3aa]"
+ }`}
+ />
+
+
+
+ {title}
+
+ ({current}
+ {total !== 0 && `/${total}`})
+
+
+
+
+ );
+};
diff --git a/src/components/Widgets/DeviceWidget.tsx b/src/components/Widgets/DeviceWidget.tsx
new file mode 100644
index 00000000..b1d4ef68
--- /dev/null
+++ b/src/components/Widgets/DeviceWidget.tsx
@@ -0,0 +1,50 @@
+import type React from "react";
+
+import { Hashicon } from "@emeraldpay/hashicon-react";
+import { XCircleIcon } from "@heroicons/react/24/outline";
+
+import { Button } from "../Button.js";
+
+export interface DeviceWidgetProps {
+ name: string;
+ nodeNum: string;
+ disconnected: boolean;
+ disconnect: () => void;
+ reconnect: () => void;
+}
+
+export const DeviceWidget = ({
+ name,
+ nodeNum,
+ disconnected,
+ disconnect,
+ reconnect,
+}: DeviceWidgetProps): JSX.Element => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ {name}
+
+
+ }
+ >
+ {disconnected ? "Reconnect" : "Disconnect"}
+
+
+
+
+
+ );
+};
diff --git a/src/components/Widgets/NodeInfoWidget.tsx b/src/components/Widgets/NodeInfoWidget.tsx
new file mode 100644
index 00000000..cbb8beb8
--- /dev/null
+++ b/src/components/Widgets/NodeInfoWidget.tsx
@@ -0,0 +1,11 @@
+import type React from "react";
+
+export interface NodeInfoWidgetProps {}
+
+export const NodeInfoWidget = ({}: NodeInfoWidgetProps): JSX.Element => {
+ return (
+
+ node info
+
+ );
+};
diff --git a/src/components/Widgets/PeersWidget.tsx b/src/components/Widgets/PeersWidget.tsx
new file mode 100644
index 00000000..74057b54
--- /dev/null
+++ b/src/components/Widgets/PeersWidget.tsx
@@ -0,0 +1,11 @@
+import type React from "react";
+
+export interface PeersWidgetProps {}
+
+export const PeersWidget = ({}: PeersWidgetProps): JSX.Element => {
+ return (
+
+ Peers
+
+ );
+};
diff --git a/src/components/Widgets/PositionWidget.tsx b/src/components/Widgets/PositionWidget.tsx
new file mode 100644
index 00000000..c0d5e833
--- /dev/null
+++ b/src/components/Widgets/PositionWidget.tsx
@@ -0,0 +1,11 @@
+import type React from "react";
+
+export interface PositionWidgetProps {}
+
+export const PositionWidget = ({}: PositionWidgetProps): JSX.Element => {
+ return (
+
+ position
+
+ );
+};
diff --git a/src/components/form/Checkbox.tsx b/src/components/form/Checkbox.tsx
new file mode 100644
index 00000000..8505dd1d
--- /dev/null
+++ b/src/components/form/Checkbox.tsx
@@ -0,0 +1,53 @@
+import type React from "react";
+import { forwardRef, InputHTMLAttributes } from "react";
+
+export interface CheckboxProps extends InputHTMLAttributes
{
+ label: string;
+ description?: string;
+ options?: string[];
+ prefix?: string;
+ suffix?: string;
+ action?: {
+ icon: JSX.Element;
+ action: () => void;
+ };
+ error?: string;
+}
+
+export const Checkbox = forwardRef(
+ function Input(
+ {
+ label,
+ description,
+ options,
+ prefix,
+ suffix,
+ action,
+ error,
+ children,
+ ...rest
+ }: CheckboxProps,
+ ref
+ ) {
+ return (
+
+
+
+
+
+
+
+
+
+ {/* Label */}
+
+ {/* */}
+
+ {prefix && (
+
+ {prefix}
+
+ )}
+
+ {suffix && (
+
+
+ {suffix}
+
+
+ )}
+ {action && (
+
+ )}
+ {error && (
+
+
+
+ )}
+
+ {description && (
+
+ {description}
+
+ )}
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+
+ {action && (
+
+ )}
+
+
-
- {Entry.name}
-
- ))}
-
-
-
- {actions?.map((Action, index) => (
-
- ))}
-
-
-
- {tabs.map((Entry, index) => (
-
- {!Entry.disabled && }
-
- ))}
-
+ {entry.icon && (
+
{entry.icon}
+ )}
+
{entry.name}
+
+ {actions?.map((Action, index) => (
+
+ ))}
+
+ {Config.label}
+
+ )}
+
))}
-
-
+
+
+ {configSections.map((Config, index) => (
+
+
+
+ ))}
+
+
);
};
diff --git a/src/pages/Config/DeviceConfig.tsx b/src/pages/Config/DeviceConfig.tsx
index 92938c43..5bf29ebb 100644
--- a/src/pages/Config/DeviceConfig.tsx
+++ b/src/pages/Config/DeviceConfig.tsx
@@ -1,7 +1,5 @@
import type React from "react";
-import { useState } from "react";
-
-import { Pane, Tab, Tablist } from "evergreen-ui";
+import { Fragment } from "react";
import { Network } from "@app/components/PageComponents/Config/Network.js";
import { Bluetooth } from "@components/PageComponents/Config/Bluetooth.js";
@@ -12,9 +10,9 @@ import { Position } from "@components/PageComponents/Config/Position.js";
import { Power } from "@components/PageComponents/Config/Power.js";
import { User } from "@components/PageComponents/Config/User.js";
import { useDevice } from "@core/providers/useDevice.js";
+import { Tab } from "@headlessui/react";
export const DeviceConfig = (): JSX.Element => {
- const [selectedIndex, setSelectedIndex] = useState(0);
const { hardware } = useDevice();
const configSections = [
@@ -54,32 +52,31 @@ export const DeviceConfig = (): JSX.Element => {
];
return (
-
-
-
- {configSections.map((Config, index) => (
- setSelectedIndex(index)}
- disabled={Config.disabled}
- >
- {Config.label}
-
- ))}
-
-
-
+
+
{configSections.map((Config, index) => (
-
-
-
+
+ {({ selected }) => (
+
+ {Config.label}
+
+ )}
+
))}
-
-
+
+
+ {configSections.map((Config, index) => (
+
+
+
+ ))}
+
+
);
};
diff --git a/src/pages/Config/ModuleConfig.tsx b/src/pages/Config/ModuleConfig.tsx
index dba9c378..ca396908 100644
--- a/src/pages/Config/ModuleConfig.tsx
+++ b/src/pages/Config/ModuleConfig.tsx
@@ -1,7 +1,5 @@
import type React from "react";
-import { useState } from "react";
-
-import { Pane, Tab, Tablist } from "evergreen-ui";
+import { Fragment, useState } from "react";
import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage";
import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.js";
@@ -10,6 +8,7 @@ import { RangeTest } from "@components/PageComponents/ModuleConfig/RangeTest.js"
import { Serial } from "@components/PageComponents/ModuleConfig/Serial.js";
import { StoreForward } from "@components/PageComponents/ModuleConfig/StoreForward.js";
import { Telemetry } from "@components/PageComponents/ModuleConfig/Telemetry.js";
+import { Tab } from "@headlessui/react";
export const ModuleConfig = (): JSX.Element => {
const [selectedIndex, setSelectedIndex] = useState(0);
@@ -46,31 +45,31 @@ export const ModuleConfig = (): JSX.Element => {
];
return (
-
-
-
- {configSections.map((Config, index) => (
- setSelectedIndex(index)}
- >
- {Config.label}
-
- ))}
-
-
-
+
+
{configSections.map((Config, index) => (
-
-
-
+
+ {({ selected }) => (
+
+ {Config.label}
+
+ )}
+
))}
-
-
+
+
+ {configSections.map((Config, index) => (
+
+
+
+ ))}
+
+
);
};
diff --git a/src/pages/Config/index.tsx b/src/pages/Config/index.tsx
index 42dd1437..e8b431b4 100644
--- a/src/pages/Config/index.tsx
+++ b/src/pages/Config/index.tsx
@@ -1,8 +1,11 @@
import type React from "react";
-import { ApplicationsIcon, CogIcon, CubeIcon } from "evergreen-ui";
-
import { TabbedContent, TabType } from "@components/layout/page/TabbedContent";
+import {
+ Cog8ToothIcon,
+ CubeTransparentIcon,
+ WindowIcon,
+} from "@heroicons/react/24/outline";
import { AppConfig } from "@pages/Config/AppConfig.js";
import { DeviceConfig } from "@pages/Config/DeviceConfig.js";
import { ModuleConfig } from "@pages/Config/ModuleConfig.js";
@@ -11,17 +14,17 @@ export const ConfigPage = (): JSX.Element => {
const tabs: TabType[] = [
{
name: "Device Config",
- icon: CogIcon,
+ icon: ,
element: DeviceConfig,
},
{
name: "Module Config",
- icon: CubeIcon,
+ icon: ,
element: ModuleConfig,
},
{
name: "App Config",
- icon: ApplicationsIcon,
+ icon: ,
element: AppConfig,
},
];
diff --git a/src/pages/Extensions/Environment.tsx b/src/pages/Extensions/Environment.tsx
index 171f92f9..39b4338b 100644
--- a/src/pages/Extensions/Environment.tsx
+++ b/src/pages/Extensions/Environment.tsx
@@ -1,17 +1,15 @@
import type React from "react";
-import { Pane } from "evergreen-ui";
-
import { useDevice } from "@core/providers/useDevice.js";
export const Environment = (): JSX.Element => {
const { nodes } = useDevice();
return (
-
+
{nodes.map((node, index) => (
-
{JSON.stringify(node.environmentMetrics)}
+
{JSON.stringify(node.environmentMetrics)}
))}
-
+
{data?.data.files.map((file) => (
-
+
))}
-
+
-
+
);
};
diff --git a/src/pages/Map/index.tsx b/src/pages/Map.tsx
similarity index 60%
rename from src/pages/Map/index.tsx
rename to src/pages/Map.tsx
index 47628033..cde11dbf 100644
--- a/src/pages/Map/index.tsx
+++ b/src/pages/Map.tsx
@@ -1,61 +1,29 @@
import type React from "react";
-import {
- Heading,
- IconButton,
- LocateIcon,
- majorScale,
- MapMarkerIcon,
- Pane,
- Text,
-} from "evergreen-ui";
import maplibregl from "maplibre-gl";
import { Map, Marker, useMap } from "react-map-gl";
+import { IconButton } from "@app/components/IconButton.js";
import { useDevice } from "@core/providers/useDevice.js";
import { Hashicon } from "@emeraldpay/hashicon-react";
+import { MapPinIcon } from "@heroicons/react/24/outline";
export const MapPage = (): JSX.Element => {
const { nodes, waypoints } = useDevice();
const { current: map } = useMap();
return (
-
-
-
- Title
-
-
+
+
+
Title
+
{nodes.map((n) => (
-
+
-
{n.data.user?.longName}
+
{n.data.user?.longName}
}
+ size="sm"
onClick={() => {
if (n.data.position?.latitudeI) {
map?.flyTo({
@@ -68,10 +36,10 @@ export const MapPage = (): JSX.Element => {
}
}}
/>
-
+
))}
-
-
+
+
-
+
(
-
- {
- setActivePage("channels");
- }}
- />
-
+ }
+ onClick={() => {
+ setActivePage("channels");
+ }}
+ />
),
]}
/>
-
+
);
};
diff --git a/src/pages/Messages/ChannelChat.tsx b/src/pages/Messages/ChannelChat.tsx
deleted file mode 100644
index ab2a0aae..00000000
--- a/src/pages/Messages/ChannelChat.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import type React from "react";
-import { ChangeEvent, useState } from "react";
-
-import {
- AddLocationIcon,
- IconButton,
- majorScale,
- Pane,
- Popover,
- SendMessageIcon,
- TextInputField,
- Tooltip,
-} from "evergreen-ui";
-
-import { useDevice } from "@core/providers/useDevice.js";
-import type { Channel } from "@core/stores/deviceStore.js";
-import { Message } from "@pages/Messages/Message.js";
-import { NewLocationMessage } from "@pages/Messages/NewLocationMessage.js";
-
-export interface ChannelChatProps {
- channel: Channel;
-}
-
-export const ChannelChat = ({ channel }: ChannelChatProps): JSX.Element => {
- const { nodes, connection, ackMessage } = useDevice();
- const [currentMessage, setCurrentMessage] = useState("");
-
- const sendMessage = (): void => {
- void connection?.sendText(
- currentMessage,
- undefined,
- true,
- channel.config.index,
- (id) => {
- ackMessage(channel.config.index, id);
- return Promise.resolve();
- }
- );
- setCurrentMessage("");
- };
-
- return (
-
-
- {channel.messages.map((message, index) => (
- node.data.num === message.packet.from)?.data
- }
- />
- ))}
-
-
-
-
- }>
-
-
-
-
-
- );
-};
diff --git a/src/pages/Messages/Message.tsx b/src/pages/Messages/Message.tsx
deleted file mode 100644
index 787d3356..00000000
--- a/src/pages/Messages/Message.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import type React from "react";
-
-import {
- CircleIcon,
- FullCircleIcon,
- majorScale,
- Pane,
- Small,
- Strong,
- Text,
-} from "evergreen-ui";
-
-import type { AllMessageTypes } from "@app/core/stores/deviceStore.js";
-import { WaypointMessage } from "@app/pages/Messages/WaypointMessage.js";
-import { useDevice } from "@core/providers/useDevice.js";
-import { Hashicon } from "@emeraldpay/hashicon-react";
-import type { Protobuf } from "@meshtastic/meshtasticjs";
-
-export interface MessageProps {
- lastMsgSameUser: boolean;
- message: AllMessageTypes;
- sender?: Protobuf.NodeInfo;
-}
-
-export const Message = ({
- lastMsgSameUser,
- message,
- sender,
-}: MessageProps): JSX.Element => {
- const { setPeerInfoOpen, setActivePeer } = useDevice();
-
- const openPeer = (): void => {
- setActivePeer(message.packet.from);
- setPeerInfoOpen(true);
- };
-
- return lastMsgSameUser ? (
-
- {message.ack ? (
-
- ) : (
-
- )}
- {"waypointID" in message ? (
-
- ) : (
-
- {message.text}
-
- )}
-
- ) : (
-
-
-
-
-
-
- {sender?.user?.longName ?? "UNK"}
-
-
- {new Date(message.packet.rxTime).toLocaleTimeString(undefined, {
- hour: "2-digit",
- minute: "2-digit",
- })}
-
-
-
- {message.ack ? (
-
- ) : (
-
- )}
- {"waypointID" in message ? (
-
- ) : (
-
- {message.text}
-
- )}
-
-
- );
-};
diff --git a/src/pages/Messages/WaypointMessage.tsx b/src/pages/Messages/WaypointMessage.tsx
deleted file mode 100644
index 445ea192..00000000
--- a/src/pages/Messages/WaypointMessage.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import type React from "react";
-
-import {
- Heading,
- LocateIcon,
- majorScale,
- minorScale,
- Pane,
- Small,
- Text,
-} from "evergreen-ui";
-
-import { useDevice } from "@app/core/providers/useDevice.js";
-import { toMGRS } from "@core/utils/toMGRS.js";
-
-export interface WaypointMessageProps {
- waypointID: number;
-}
-
-export const WaypointMessage = ({
- waypointID,
-}: WaypointMessageProps): JSX.Element => {
- const { waypoints } = useDevice();
- const waypoint = waypoints.find((wp) => wp.id === waypointID);
-
- return (
-
-
-
-
-
- {waypoint?.name}
-
- {toMGRS(waypoint?.latitudeI, waypoint?.longitudeI)}
-
-
- {waypoint?.description}
-
-
-
- );
-};
diff --git a/src/validation/config/device.ts b/src/validation/config/device.ts
index e96713d3..09c556d2 100644
--- a/src/validation/config/device.ts
+++ b/src/validation/config/device.ts
@@ -1,16 +1,13 @@
-import { IsBoolean, IsEnum } from "class-validator";
+import { IsBoolean, IsEnum } from 'class-validator';
-import { Protobuf } from "@meshtastic/meshtasticjs";
+import { Protobuf } from '@meshtastic/meshtasticjs';
export class DeviceValidation implements Protobuf.Config_DeviceConfig {
@IsEnum(Protobuf.Config_DeviceConfig_Role)
role: Protobuf.Config_DeviceConfig_Role;
@IsBoolean()
- serialDisabled: boolean;
-
- @IsBoolean()
- factoryReset: boolean;
+ serialEnabled: boolean;
@IsBoolean()
debugLogEnabled: boolean;
diff --git a/src/validation/config/lora.ts b/src/validation/config/lora.ts
index 2708fc65..7b574900 100644
--- a/src/validation/config/lora.ts
+++ b/src/validation/config/lora.ts
@@ -3,10 +3,8 @@ import { IsArray, IsBoolean, IsEnum, IsInt, Max, Min } from "class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
export class LoRaValidation implements Protobuf.Config_LoRaConfig {
- @IsInt()
- @Min(0)
- @Max(10)
- txPower: number;
+ @IsBoolean()
+ usePreset: boolean;
@IsEnum(Protobuf.Config_LoRaConfig_ModemPreset)
modemPreset: Protobuf.Config_LoRaConfig_ModemPreset;
@@ -36,7 +34,11 @@ export class LoRaValidation implements Protobuf.Config_LoRaConfig {
hopLimit: number;
@IsBoolean()
- txDisabled: boolean;
+ txEnabled: boolean;
+
+ @IsInt()
+ @Min(0)
+ txPower: number;
@IsArray()
ignoreIncoming: number[];
diff --git a/src/validation/config/position.ts b/src/validation/config/position.ts
index a67c93da..9ec3320a 100644
--- a/src/validation/config/position.ts
+++ b/src/validation/config/position.ts
@@ -1,19 +1,19 @@
-import { IsBoolean, IsInt } from "class-validator";
+import { IsBoolean, IsInt } from 'class-validator';
-import type { Protobuf } from "@meshtastic/meshtasticjs";
+import type { Protobuf } from '@meshtastic/meshtasticjs';
export class PositionValidation implements Protobuf.Config_PositionConfig {
@IsInt()
positionBroadcastSecs: number;
@IsBoolean()
- positionBroadcastSmartDisabled: boolean;
+ positionBroadcastSmartEnabled: boolean;
@IsBoolean()
fixedPosition: boolean;
@IsBoolean()
- gpsDisabled: boolean;
+ gpsEnabled: boolean;
@IsInt()
gpsUpdateInterval: number;
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
new file mode 100644
index 00000000..ffb9a839
--- /dev/null
+++ b/tailwind.config.cjs
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./index.html", "./src/**/*.{ts,tsx}"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+};
+