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

Cleanup & start transition of moduleConfig

Browse Source
This commit is contained in:
Sacha Weatherstone
2023-01-29 19:03:43 +10:00
parent e36032045f
commit c184c5add6
28 changed files with 297 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Nav/NavBar.tsx
+37
View File
@@ -0,0 +1,37 @@
import { Button } from "@app/components/form/Button.js";
import { ChevronRightIcon, HomeIcon } from "@primer/octicons-react";
export interface NavBarProps {
breadcrumb: string[];
actions?: {
label: string;
onClick: () => void;
}[];
}
export const NavBar = ({ breadcrumb, actions }: NavBarProps): JSX.Element => {
return (
<div className="flex rounded-md bg-backgroundSecondary p-2">
<ol className="my-auto ml-2 flex gap-4 text-textSecondary">
<li className="cursor-pointer hover:brightness-disabled">
<HomeIcon className="h-5 w-5 flex-shrink-0" />
</li>
{breadcrumb.map((breadcrumb, index) => (
<li key={index} className="my-auto flex gap-4">
<ChevronRightIcon className="h-5 w-5 flex-shrink-0 brightness-disabled" />
<span className="cursor-pointer text-sm font-medium hover:brightness-disabled">
{breadcrumb}
</span>
</li>
))}
</ol>
<div className="ml-auto">
{actions?.map((Action, index) => (
<Button key={index} onClick={Action.onClick}>
{Action.label}
</Button>
))}
</div>
</div>
);
};
src/Nav/PageNav.tsx
-5
View File
@@ -30,11 +30,6 @@ export const PageNav = (): JSX.Element => {
icon: MapIcon,
page: "map"
},
{
name: "Extensions",
icon: BeakerIcon,
page: "extensions"
},
{
name: "Config",
icon: Cog8ToothIcon,
src/PageRouter.tsx
-2
View File
@@ -1,7 +1,6 @@
import { useDevice } from "@core/providers/useDevice.js";
import { ChannelsPage } from "@pages/Channels.js";
import { ConfigPage } from "@pages/Config/index.js";
import { ExtensionsPage } from "@pages/Extensions/Index.js";
import { MapPage } from "@pages/Map.js";
import { MessagesPage } from "@pages/Messages.js";
import { PeersPage } from "@pages/Peers.js";
@@ -12,7 +11,6 @@ export const PageRouter = (): JSX.Element => {
<div className="flex-grow overflow-y-auto bg-backgroundPrimary">
{activePage === "messages" && <MessagesPage />}
{activePage === "map" && <MapPage />}
{activePage === "extensions" && <ExtensionsPage />}
{activePage === "config" && <ConfigPage />}
{activePage === "channels" && <ChannelsPage />}
{activePage === "peers" && <PeersPage />}
src/components/CommandPalette/GroupView.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ export interface GroupViewProps {
export const GroupView = ({ group }: GroupViewProps): JSX.Element => {
return (
<Combobox.Option
value={group.name}
value={group.label}
className={({ active }) =>
`flex cursor-default select-none items-center rounded-md px-3 py-2 ${
active ? "bg-backgroundPrimary text-textPrimary" : ""
@@ -19,7 +19,7 @@ export const GroupView = ({ group }: GroupViewProps): JSX.Element => {
{({ active }) => (
<>
<group.icon className="h-6 w-6" />
<span className="ml-3 flex-auto truncate">{group.name}</span>
<span className="ml-3 flex-auto truncate">{group.label}</span>
{active && <ChevronRightIcon className="h-5 text-textSecondary" />}
</>
)}
src/components/CommandPalette/Index.tsx
+37 -44
View File
@@ -40,12 +40,12 @@ import { Blur } from "@components/generic/Blur.js";
import { ThemeController } from "@components/generic/ThemeController.js";
export interface Group {
name: string;
label: string;
icon: ComponentType<SVGProps<SVGSVGElement>>;
commands: Command[];
}
export interface Command {
name: string;
label: string;
icon: ComponentType<SVGProps<SVGSVGElement>>;
action?: () => void;
subItems?: SubItem[];
@@ -53,7 +53,7 @@ export interface Command {
}
export interface SubItem {
name: string;
label: string;
icon: JSX.Element;
action: () => void;
}
@@ -77,32 +77,25 @@ export const CommandPalette = (): JSX.Element => {
const groups: Group[] = [
{
name: "Goto",
label: "Goto",
icon: LinkIcon,
commands: [
{
name: "Messages",
label: "Messages",
icon: InboxIcon,
action() {
setActivePage("messages");
}
},
{
name: "Map",
label: "Map",
icon: MapIcon,
action() {
setActivePage("map");
}
},
{
name: "Extensions",
icon: BeakerIcon,
action() {
setActivePage("extensions");
}
},
{
name: "Config",
label: "Config",
icon: Cog8ToothIcon,
action() {
setActivePage("config");
@@ -110,14 +103,14 @@ export const CommandPalette = (): JSX.Element => {
tags: ["settings"]
},
{
name: "Channels",
label: "Channels",
icon: Square3Stack3DIcon,
action() {
setActivePage("channels");
}
},
{
name: "Peers",
label: "Peers",
icon: UsersIcon,
action() {
setActivePage("peers");
@@ -126,15 +119,15 @@ export const CommandPalette = (): JSX.Element => {
]
},
{
name: "Manage",
label: "Manage",
icon: DevicePhoneMobileIcon,
commands: [
{
name: "Switch Node",
label: "Switch Node",
icon: ArrowsRightLeftIcon,
subItems: getDevices().map((device) => {
return {
name:
label:
device.nodes.find(
(n) => n.data.num === device.hardware.myNodeNum
)?.data.user?.longName ?? device.hardware.myNodeNum.toString(),
@@ -151,7 +144,7 @@ export const CommandPalette = (): JSX.Element => {
})
},
{
name: "Connect New Node",
label: "Connect New Node",
icon: PlusIcon,
action() {
setSelectedDevice(0);
@@ -160,22 +153,22 @@ export const CommandPalette = (): JSX.Element => {
]
},
{
name: "Contextual",
label: "Contextual",
icon: CubeTransparentIcon,
commands: [
{
name: "QR Code",
label: "QR Code",
icon: QrCodeIcon,
subItems: [
{
name: "Generator",
label: "Generator",
icon: <QueueListIcon className="w-4" />,
action() {
setDialogOpen("QR", true);
}
},
{
name: "Import",
label: "Import",
icon: <ArrowDownOnSquareStackIcon className="w-4" />,
action() {
setDialogOpen("import", true);
@@ -184,7 +177,7 @@ export const CommandPalette = (): JSX.Element => {
]
},
{
name: "Disconnect",
label: "Disconnect",
icon: XCircleIcon,
action() {
void connection?.disconnect();
@@ -193,21 +186,21 @@ export const CommandPalette = (): JSX.Element => {
}
},
{
name: "Schedule Shutdown",
label: "Schedule Shutdown",
icon: PowerIcon,
action() {
setDialogOpen("shutdown", true);
}
},
{
name: "Schedule Reboot",
label: "Schedule Reboot",
icon: ArrowPathIcon,
action() {
setDialogOpen("reboot", true);
}
},
{
name: "Reset Peers",
label: "Reset Peers",
icon: TrashIcon,
action() {
if (connection) {
@@ -220,7 +213,7 @@ export const CommandPalette = (): JSX.Element => {
}
},
{
name: "Factory Reset",
label: "Factory Reset",
icon: ArrowPathRoundedSquareIcon,
action() {
if (connection) {
@@ -235,18 +228,18 @@ export const CommandPalette = (): JSX.Element => {
]
},
{
name: "Debug",
label: "Debug",
icon: BugAntIcon,
commands: [
{
name: "Reconfigure",
label: "Reconfigure",
icon: ArrowPathIcon,
action() {
void connection?.configure();
}
},
{
name: "[WIP] Clear Messages",
label: "[WIP] Clear Messages",
icon: ArchiveBoxXMarkIcon,
action() {
alert("This feature is not implemented");
@@ -255,22 +248,22 @@ export const CommandPalette = (): JSX.Element => {
]
},
{
name: "Application",
label: "Application",
icon: WindowIcon,
commands: [
{
name: "Toggle Dark Mode",
label: "Toggle Dark Mode",
icon: MoonIcon,
action() {
setDarkMode(!darkMode);
}
},
{
name: "Accent Color",
label: "Accent Color",
icon: SwatchIcon,
subItems: [
{
name: "Red",
label: "Red",
icon: (
<span
className={`h-3 w-3 rounded-full ${
@@ -283,7 +276,7 @@ export const CommandPalette = (): JSX.Element => {
}
},
{
name: "Orange",
label: "Orange",
icon: (
<span
className={`h-3 w-3 rounded-full ${
@@ -296,7 +289,7 @@ export const CommandPalette = (): JSX.Element => {
}
},
{
name: "Yellow",
label: "Yellow",
icon: (
<span
className={`h-3 w-3 rounded-full ${
@@ -309,7 +302,7 @@ export const CommandPalette = (): JSX.Element => {
}
},
{
name: "Green",
label: "Green",
icon: (
<span
className={`h-3 w-3 rounded-full ${
@@ -322,7 +315,7 @@ export const CommandPalette = (): JSX.Element => {
}
},
{
name: "Blue",
label: "Blue",
icon: (
<span
className={`h-3 w-3 rounded-full ${
@@ -335,7 +328,7 @@ export const CommandPalette = (): JSX.Element => {
}
},
{
name: "Purple",
label: "Purple",
icon: (
<span
className={`h-3 w-3 rounded-full ${
@@ -348,7 +341,7 @@ export const CommandPalette = (): JSX.Element => {
}
},
{
name: "Pink",
label: "Pink",
icon: (
<span
className={`h-3 w-3 rounded-full ${
@@ -386,7 +379,7 @@ export const CommandPalette = (): JSX.Element => {
return {
...group,
commands: group.commands.filter((command) => {
const nameIncludes = `${group.name} ${command.name}`
const nameIncludes = `${group.label} ${command.label}`
.toLowerCase()
.includes(query.toLowerCase());
@@ -399,7 +392,7 @@ export const CommandPalette = (): JSX.Element => {
const subItemsInclude = (
command.subItems
?.map((s) =>
s.name.toLowerCase().includes(query.toLowerCase())
s.label.toLowerCase().includes(query.toLowerCase())
)
.filter(Boolean) ?? []
).length;
src/components/CommandPalette/SearchResult.tsx
+3 -3
View File
@@ -11,7 +11,7 @@ export const SearchResult = ({ group }: SearchResultProps): JSX.Element => {
<div className="rounded-md border-2 border-backgroundPrimary py-2">
<div className="flex items-center px-3 py-2">
<group.icon className="text-gray-900 h-6 w-6 flex-none text-opacity-40" />
<span className="ml-3 flex-auto truncate">{group.name}</span>
<span className="ml-3 flex-auto truncate">{group.label}</span>
</div>
{group.commands.map((command, index) => (
<div key={index}>
@@ -30,7 +30,7 @@ export const SearchResult = ({ group }: SearchResultProps): JSX.Element => {
active ? "text-opacity-100" : ""
}`}
/>
<span className="ml-3">{command.name}</span>
<span className="ml-3">{command.label}</span>
{active && (
<ChevronRightIcon className="text-gray-400 ml-auto h-4" />
)}
@@ -54,7 +54,7 @@ export const SearchResult = ({ group }: SearchResultProps): JSX.Element => {
{({ active }) => (
<>
{item.icon}
<span className="ml-3">{item.name}</span>
<span className="ml-3">{item.label}</span>
{active && (
<ChevronRightIcon className="text-gray-400 ml-auto h-4" />
)}
src/components/Dialog/RebootDialog.tsx
+3 -1
View File
@@ -41,11 +41,13 @@ export const RebootDialog = ({
/>
<Button
className="w-24"
iconBefore={<ArrowPathIcon className="w-4" />}
onClick={() => {
connection?.reboot(2).then(() => setDialogOpen("reboot", false));
}}
>
<span>
<ArrowPathIcon className="w-4" />
</span>
Now
</Button>
</div>
src/components/Dialog/ShutdownDialog.tsx
+2 -2
View File
@@ -41,14 +41,14 @@ export const ShutdownDialog = ({
/>
<Button
className="w-24"
iconBefore={<PowerIcon className="w-4" />}
onClick={() => {
connection
?.shutdown(2)
.then(() => setDialogOpen("shutdown", false));
}}
>
Now
<PowerIcon className="w-4" />
<span>Now</span>
</Button>
</div>
</Dialog>
src/components/Drawer/index.tsx
+4 -4
View File
@@ -10,9 +10,9 @@ export const Drawer = (): JSX.Element => {
const [drawerOpen, setDrawerOpen] = useState(false);
const tabs: TabType[] = [
{ name: "Notifications", element: Notifications },
{ name: "Metrics", element: Metrics },
{ name: "Sensor", element: Sensor }
{ label: "Notifications", element: Notifications },
{ label: "Metrics", element: Metrics },
{ label: "Sensor", element: Sensor }
];
return (
<Tab.Group as="div">
@@ -30,7 +30,7 @@ export const Drawer = (): JSX.Element => {
: "border-backgroundPrimary text-textSecondary"
}`}
>
<span className="m-auto select-none">{tab.name}</span>
<span className="m-auto select-none">{tab.label}</span>
</div>
)}
</Tab>
src/components/NewDevice.tsx
+3 -3
View File
@@ -12,7 +12,7 @@ export const NewDevice = () => {
const tabs: TabType[] = [
{
name: "Bluetooth",
label: "Bluetooth",
element: BLE,
disabled: !navigator.bluetooth,
disabledMessage:
@@ -21,13 +21,13 @@ export const NewDevice = () => {
"https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility"
},
{
name: "HTTP",
label: "HTTP",
element: HTTP,
disabled: false,
disabledMessage: "Unsuported connection method"
},
{
name: "Serial",
label: "Serial",
element: Serial,
disabled: !navigator.serial,
disabledMessage:
src/components/PageComponents/Channel.tsx
+99 -84
View File
@@ -15,6 +15,7 @@ import {
} from "@heroicons/react/24/outline";
import { classValidatorResolver } from "@hookform/resolvers/class-validator";
import { Protobuf } from "@meshtastic/meshtasticjs";
import { NavBar } from "@app/Nav/NavBar.js";
export interface SettingsPanelProps {
channel: Protobuf.Channel;
@@ -102,92 +103,106 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
});
return (
<Form onSubmit={onSubmit}>
{channel?.index !== 0 && (
<>
<Controller
name="enabled"
control={control}
render={({ field: { value, ...rest } }) => (
<Toggle
label="Enabled"
description="Description"
checked={value}
{...rest}
/>
)}
/>
<Input
label="Name"
description="Max transmit power in dBm"
error={errors.name?.message}
{...register("name")}
/>
</>
)}
<Select
label="Key Size"
description="Desired size of generated key."
value={keySize}
onChange={(e): void => {
setKeySize(parseInt(e.target.value) as 128 | 256);
}}
action={{
icon: <ArrowPathIcon className="h-4" />,
action: () => {
const key = new Uint8Array(keySize / 8);
crypto.getRandomValues(key);
setValue("psk", fromByteArray(key), {
shouldDirty: true
});
<div className="flex flex-grow flex-col gap-2">
<NavBar
breadcrumb={["Channels", channel?.index.toString()]}
actions={[
{
label: "Apply",
async onClick() {
await onSubmit();
}
}
}}
>
<option value={128}>128 Bit</option>
<option value={256}>256 Bit</option>
</Select>
<Input
width="100%"
label="Pre-Shared Key"
description="Channel key to encrypt data"
type={pskHidden ? "password" : "text"}
action={{
icon: pskHidden ? (
<EyeIcon className="w-4" />
) : (
<EyeSlashIcon className="w-4" />
),
action: () => {
setPskHidden(!pskHidden);
}
}}
error={errors.psk?.message}
{...register("psk")}
]}
/>
<Controller
name="uplinkEnabled"
control={control}
render={({ field: { value, ...rest } }) => (
<Toggle
label="Uplink Enabled"
description="Send packets to designated MQTT server"
checked={value}
{...rest}
/>
<Form onSubmit={onSubmit}>
{channel?.index !== 0 && (
<>
<Controller
name="enabled"
control={control}
render={({ field: { value, ...rest } }) => (
<Toggle
label="Enabled"
description="Description"
checked={value}
{...rest}
/>
)}
/>
<Input
label="Name"
description="Max transmit power in dBm"
error={errors.name?.message}
{...register("name")}
/>
</>
)}
/>
<Controller
name="downlinkEnabled"
control={control}
render={({ field: { value, ...rest } }) => (
<Toggle
label="Downlink Enabled"
description="Recieve packets to designated MQTT server"
checked={value}
{...rest}
/>
)}
/>
</Form>
<Select
label="Key Size"
description="Desired size of generated key."
value={keySize}
onChange={(e): void => {
setKeySize(parseInt(e.target.value) as 128 | 256);
}}
action={{
icon: <ArrowPathIcon className="h-4" />,
action: () => {
const key = new Uint8Array(keySize / 8);
crypto.getRandomValues(key);
setValue("psk", fromByteArray(key), {
shouldDirty: true
});
}
}}
>
<option value={128}>128 Bit</option>
<option value={256}>256 Bit</option>
</Select>
<Input
width="100%"
label="Pre-Shared Key"
description="Channel key to encrypt data"
type={pskHidden ? "password" : "text"}
action={{
icon: pskHidden ? (
<EyeIcon className="w-4" />
) : (
<EyeSlashIcon className="w-4" />
),
action: () => {
setPskHidden(!pskHidden);
}
}}
error={errors.psk?.message}
{...register("psk")}
/>
<Controller
name="uplinkEnabled"
control={control}
render={({ field: { value, ...rest } }) => (
<Toggle
label="Uplink Enabled"
description="Send packets to designated MQTT server"
checked={value}
{...rest}
/>
)}
/>
<Controller
name="downlinkEnabled"
control={control}
render={({ field: { value, ...rest } }) => (
<Toggle
label="Downlink Enabled"
description="Recieve packets to designated MQTT server"
checked={value}
{...rest}
/>
)}
/>
</Form>
</div>
);
};
src/components/PageComponents/Connect/BLE.tsx
+2 -2
View File
@@ -51,7 +51,6 @@ export const BLE = (): JSX.Element => {
)}
</div>
<Button
iconBefore={<PlusCircleIcon className="w-4" />}
onClick={() => {
void navigator.bluetooth
.requestDevice({
@@ -65,7 +64,8 @@ export const BLE = (): JSX.Element => {
});
}}
>
New device
<PlusCircleIcon className="w-4" />
<span>New device</span>
</Button>
</div>
);
src/components/PageComponents/Connect/HTTP.tsx
+3 -2
View File
@@ -71,8 +71,9 @@ export const HTTP = (): JSX.Element => {
)}
/>
</div>
<Button iconBefore={<PlusCircleIcon className="w-4" />} type="submit">
Connect
<Button type="submit">
<PlusCircleIcon className="w-4" />
<span>Connect</span>
</Button>
</form>
);
src/components/PageComponents/Connect/Serial.tsx
+2 -2
View File
@@ -64,14 +64,14 @@ export const Serial = (): JSX.Element => {
)}
</div>
<Button
iconBefore={<PlusCircleIcon className="w-4" />}
onClick={() => {
void navigator.serial.requestPort().then((port) => {
setSerialPorts(serialPorts.concat(port));
});
}}
>
New device
<PlusCircleIcon className="w-4" />
<span>New device</span>
</Button>
</div>
);
src/components/Widgets/DeviceWidget.tsx
+2 -6
View File
@@ -28,12 +28,8 @@ export const DeviceWidget = ({
{name}
</span>
<div className="my-auto ml-auto">
<Button
onClick={disconnected ? reconnect : disconnect}
size="sm"
iconBefore={<XCircleIcon className="h-4" />}
>
{disconnected ? "Reconnect" : "Disconnect"}
<Button onClick={disconnected ? reconnect : disconnect} size="sm">
<span>{disconnected ? "Reconnect" : "Disconnect"}</span>
</Button>
</div>
</div>
src/components/form/Button.tsx
+1 -4
View File
@@ -1,13 +1,11 @@
import type { ButtonHTMLAttributes } from "react";
import type { ButtonHTMLAttributes, ComponentType, SVGProps } from "react";
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
size?: "sm" | "md" | "lg";
iconBefore?: JSX.Element;
}
export const Button = ({
size = "md",
iconBefore,
children,
disabled,
className,
@@ -30,7 +28,6 @@ export const Button = ({
{...rest}
>
<div className="m-auto flex shrink-0 items-center gap-2 font-medium">
{iconBefore}
{children}
</div>
</button>
src/components/form/Form.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ export const Form = ({
}: FormProps): JSX.Element => {
return (
<form
className="mr-2 w-full rounded-md bg-backgroundSecondary px-2"
className="w-full rounded-md bg-backgroundSecondary px-2"
onSubmit={onSubmit}
onChange={onSubmit}
{...props}
src/components/generic/TabbedContent.tsx
+3 -3
View File
@@ -3,7 +3,7 @@ import { Mono } from "@components/generic/Mono";
import { Tab } from "@headlessui/react";
export interface TabType {
name: string;
label: string;
icon?: JSX.Element;
element: () => JSX.Element;
disabled?: boolean;
@@ -46,7 +46,7 @@ export const TabbedContent = ({
{entry.icon && (
<div className="text-slate-500 m-auto">{entry.icon}</div>
)}
<span className="m-auto">{entry.name}</span>
<span className="m-auto">{entry.label}</span>
</div>
)}
</Tab>
@@ -65,7 +65,7 @@ export const TabbedContent = ({
</Tab.List>
<Tab.Panels as={Fragment}>
{tabs.map((entry, index) => (
<Tab.Panel key={index} className="flex flex-grow">
<Tab.Panel key={index} className="m-2 flex flex-grow">
{!entry.disabled ? (
<entry.element />
) : (
src/components/generic/VerticalTabbedContent.tsx
+49
View File
@@ -0,0 +1,49 @@
import { Fragment } from "react";
import { Mono } from "@components/generic/Mono";
import { Tab } from "@headlessui/react";
export interface TabType {
label: string;
element: () => JSX.Element;
disabled?: boolean;
}
export interface TabbedContentProps {
tabs: TabType[];
}
export const VerticalTabbedContent = ({
tabs
}: TabbedContentProps): JSX.Element => {
return (
<Tab.Group as="div" className="flex w-full gap-3">
<Tab.List className="flex w-44 flex-col">
{tabs.map((tab, index) => (
<Tab key={index} as={Fragment}>
{({ selected }) => (
<div
className={`flex cursor-pointer items-center border-l-4 p-4 text-sm font-medium ${
selected
? "border-accent bg-accentMuted bg-opacity-10 text-textPrimary"
: "border-backgroundPrimary text-textSecondary"
}`}
>
{tab.label}
<span className="ml-auto rounded-full bg-accent px-3 text-textPrimary">
3
</span>
</div>
)}
</Tab>
))}
</Tab.List>
<Tab.Panels as={Fragment}>
{tabs.map((tab, index) => (
<Tab.Panel key={index} as={Fragment}>
<tab.element />
</Tab.Panel>
))}
</Tab.Panels>
</Tab.Group>
);
};
src/core/stores/deviceStore.ts
-1
View File
@@ -8,7 +8,6 @@ import { Protobuf, Types } from "@meshtastic/meshtasticjs";
export type Page =
| "messages"
| "map"
| "extensions"
| "config"
| "channels"
| "peers";
src/pages/Channels.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export const ChannelsPage = (): JSX.Element => {
const tabs: TabType[] = channels.map((channel) => {
return {
name: channel.config.settings?.name.length
label: channel.config.settings?.name.length
? channel.config.settings.name
: channel.config.role === Protobuf.Channel_Role.PRIMARY
? "Primary"
src/pages/Config/DeviceConfig.tsx
+15 -55
View File
@@ -12,11 +12,13 @@ import { Tab } from "@headlessui/react";
import { ChevronRightIcon, HomeIcon } from "@heroicons/react/24/outline";
import { Button } from "@components/form/Button.js";
import { CheckIcon } from "@primer/octicons-react";
import { NavBar } from "@app/Nav/NavBar.js";
import { VerticalTabbedContent } from "@app/components/generic/VerticalTabbedContent.js";
export const DeviceConfig = (): JSX.Element => {
const { hardware, workingConfig, connection } = useDevice();
const configSections = [
const tabs = [
{
label: "User",
element: User
@@ -53,65 +55,23 @@ export const DeviceConfig = (): JSX.Element => {
];
return (
<div className="w-full">
<div className="m-2 flex rounded-md bg-backgroundSecondary p-2">
<ol className="my-auto ml-2 flex gap-4 text-textSecondary">
<li className="cursor-pointer hover:brightness-disabled">
<HomeIcon className="h-5 w-5 flex-shrink-0" />
</li>
{["Config", "User"].map((breadcrumb, index) => (
<li key={index} className="flex gap-4">
<ChevronRightIcon className="h-5 w-5 flex-shrink-0 brightness-disabled" />
<span className="cursor-pointer text-sm font-medium hover:brightness-disabled">
{breadcrumb}
</span>
</li>
))}
</ol>
<div className="ml-auto">
<Button
onClick={async () => {
<div className="flex flex-grow flex-col gap-2">
<NavBar
breadcrumb={["Config"]}
actions={[
{
label: "Apply & Reboot",
async onClick() {
workingConfig.map(async (config) => {
await connection?.setConfig(config);
});
await connection?.commitEditSettings();
}}
iconBefore={<CheckIcon className="w-4" />}
>
Apply & Reboot
</Button>
</div>
</div>
}
}
]}
/>
<Tab.Group as="div" className="flex w-full gap-3">
<Tab.List className="flex w-44 flex-col">
{configSections.map((Config, index) => (
<Tab key={index} as={Fragment}>
{({ selected }) => (
<div
className={`flex cursor-pointer items-center border-l-4 p-4 text-sm font-medium ${
selected
? "border-accent bg-accentMuted bg-opacity-10 text-textPrimary"
: "border-backgroundPrimary text-textSecondary"
}`}
>
{Config.label}
<span className="ml-auto rounded-full bg-accent px-3 text-textPrimary">
3
</span>
</div>
)}
</Tab>
))}
</Tab.List>
<Tab.Panels as={Fragment}>
{configSections.map((Config, index) => (
<Tab.Panel key={index} as={Fragment}>
<Config.element />
</Tab.Panel>
))}
</Tab.Panels>
</Tab.Group>
<VerticalTabbedContent tabs={tabs} />
</div>
);
};
src/pages/Config/ModuleConfig.tsx
+24 -28
View File
@@ -7,10 +7,14 @@ 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";
import { useDevice } from "@app/core/providers/useDevice.js";
import { NavBar } from "@app/Nav/NavBar.js";
import { VerticalTabbedContent } from "@app/components/generic/VerticalTabbedContent.js";
export const ModuleConfig = (): JSX.Element => {
const configSections = [
const { workingModuleConfig, connection } = useDevice();
const tabs = [
{
label: "MQTT",
element: MQTT
@@ -46,31 +50,23 @@ export const ModuleConfig = (): JSX.Element => {
];
return (
<Tab.Group as="div" className="flex w-full gap-3">
<Tab.List className="flex w-44 flex-col gap-1">
{configSections.map((Config, index) => (
<Tab key={index} as={Fragment}>
{({ selected }) => (
<div
className={`flex cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium ${
selected
? "bg-gray-100 text-gray-900"
: "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
}`}
>
{Config.label}
</div>
)}
</Tab>
))}
</Tab.List>
<Tab.Panels as={Fragment}>
{configSections.map((Config, index) => (
<Tab.Panel key={index} as={Fragment}>
<Config.element />
</Tab.Panel>
))}
</Tab.Panels>
</Tab.Group>
<div className="flex flex-grow flex-col gap-2">
<NavBar
breadcrumb={["Module Config"]}
actions={[
{
label: "Apply & Reboot",
async onClick() {
workingModuleConfig.map(async (moduleConfig) => {
await connection?.setModuleConfig(moduleConfig);
});
await connection?.commitEditSettings();
}
}
]}
/>
<VerticalTabbedContent tabs={tabs} />
</div>
);
};
src/pages/Config/index.tsx
+3 -3
View File
@@ -14,17 +14,17 @@ export const ConfigPage = (): JSX.Element => {
const tabs: TabType[] = [
{
name: "Device Config",
label: "Device Config",
icon: <Cog8ToothIcon className="h-4" />,
element: DeviceConfig
},
{
name: "Module Config",
label: "Module Config",
icon: <CubeTransparentIcon className="h-4" />,
element: ModuleConfig
},
{
name: "App Config",
label: "App Config",
icon: <WindowIcon className="h-4" />,
element: AppConfig
}
src/pages/Extensions/Environment.tsx
-13
View File
@@ -1,13 +0,0 @@
import { useDevice } from "@core/providers/useDevice.js";
export const Environment = (): JSX.Element => {
const { nodes } = useDevice();
return (
<div>
{nodes.map((node, index) => (
<div key={index}>{JSON.stringify(node.environmentMetrics)}</div>
))}
</div>
);
};
src/pages/Extensions/FileBrowser.tsx
-47
View File
@@ -1,47 +0,0 @@
import { useEffect, useState } from "react";
export interface File {
nameModified: string;
name: string;
size: number;
}
export interface Files {
data: {
files: File[];
fileSystem: {
total: number;
used: number;
free: number;
};
};
status: string;
}
export const FileBrowser = (): JSX.Element => {
const [data, setData] = useState<Files>();
useEffect(() => {
void fetch("http://meshtastic.local/json/fs/browse/static").then(
async (res) => {
setData((await res.json()) as Files);
}
);
}, []);
return (
<div>
{data?.data.files.map((file) => (
<div key={file.name}>
<a
target="_blank"
rel="noopener noreferrer"
href={`http://meshtastic.local/${file.name.replace("static/", "")}`}
>
{file.name.replace("static/", "").replace(".gz", "")}
</a>
</div>
))}
</div>
);
};
src/pages/Extensions/Index.tsx
-35
View File
@@ -1,35 +0,0 @@
import { TabbedContent, TabType } from "@components/generic/TabbedContent";
import { useDevice } from "@core/providers/useDevice.js";
import {
CloudIcon,
DocumentIcon,
SignalIcon
} from "@heroicons/react/24/outline";
import { Environment } from "@pages/Extensions/Environment.js";
import { FileBrowser } from "@pages/Extensions/FileBrowser";
export const ExtensionsPage = (): JSX.Element => {
const { hardware } = useDevice();
const tabs: TabType[] = [
{
name: "File Browser",
icon: <DocumentIcon className="h-4" />,
element: FileBrowser,
disabled: !hardware.hasWifi
},
{
name: "Range Test",
icon: <SignalIcon className="h-4" />,
element: FileBrowser,
disabled: !hardware.hasWifi
},
{
name: "Environment",
icon: <CloudIcon className="h-4" />,
element: Environment
}
];
return <TabbedContent tabs={tabs} />;
};
src/pages/Messages.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ export const MessagesPage = (): JSX.Element => {
const tabs: TabType[] = channels.map((channel) => {
return {
name: channel.config.settings?.name.length
label: channel.config.settings?.name.length
? channel.config.settings?.name
: channel.config.index === 0
? "Primary"