You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.6 KiB
55 lines
1.6 KiB
import type React from "react";
|
|
import { useState } from "react";
|
|
|
|
import { Channel } from "@app/components/PageComponents/Channel.js";
|
|
import { Button } from "@components/Button.js";
|
|
import { QRDialog } from "@components/Dialog/QRDialog.js";
|
|
import { TabbedContent, TabType } from "@components/layout/page/TabbedContent";
|
|
import { useDevice } from "@core/providers/useDevice.js";
|
|
import { QrCodeIcon } from "@heroicons/react/24/outline";
|
|
import { Protobuf } from "@meshtastic/meshtasticjs";
|
|
|
|
export const ChannelsPage = (): JSX.Element => {
|
|
const { channels, config } = useDevice();
|
|
const [QRDialogOpen, setQRDialogOpen] = useState(false);
|
|
|
|
const tabs: TabType[] = channels.map((channel) => {
|
|
return {
|
|
name: channel.config.settings?.name.length
|
|
? channel.config.settings.name
|
|
: channel.config.role === Protobuf.Channel_Role.PRIMARY
|
|
? "Primary"
|
|
: `Channel: ${channel.config.index}`,
|
|
element: () => <Channel channel={channel.config} />,
|
|
};
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<QRDialog
|
|
isOpen={QRDialogOpen}
|
|
close={() => {
|
|
setQRDialogOpen(false);
|
|
}}
|
|
channels={channels.map((ch) => ch.config)}
|
|
loraConfig={config.lora}
|
|
/>
|
|
<TabbedContent
|
|
tabs={tabs}
|
|
actions={[
|
|
() => (
|
|
<Button
|
|
variant="secondary"
|
|
iconBefore={<QrCodeIcon className="w-4" />}
|
|
onClick={() => {
|
|
setQRDialogOpen(true);
|
|
}}
|
|
>
|
|
QR Code
|
|
</Button>
|
|
),
|
|
]}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|