Browse Source
* Channel config rework Add staged channel config with tabbed UI, import/export workflow, and global form state refactor * Improve import dialog config comparison and UI labels * Review fixes * Improve state handling * Fix default filter behaviour --------- Co-authored-by: philon- <[email protected]>pull/824/head
Jeremy Gallant
10 months ago
committed by
GitHub
GitHub
42 changed files with 598 additions and 457 deletions
@ -1,86 +0,0 @@ |
|||||
import { Channel } from "@components/PageComponents/Channel.tsx"; |
|
||||
import { PageLayout } from "@components/PageLayout.tsx"; |
|
||||
import { Sidebar } from "@components/Sidebar.tsx"; |
|
||||
import { |
|
||||
Tabs, |
|
||||
TabsContent, |
|
||||
TabsList, |
|
||||
TabsTrigger, |
|
||||
} from "@components/UI/Tabs.tsx"; |
|
||||
import { useDevice } from "@core/stores"; |
|
||||
import type { Protobuf } from "@meshtastic/core"; |
|
||||
import { Types } from "@meshtastic/core"; |
|
||||
import i18next from "i18next"; |
|
||||
import { QrCodeIcon, UploadIcon } from "lucide-react"; |
|
||||
import { useState } from "react"; |
|
||||
import { useTranslation } from "react-i18next"; |
|
||||
|
|
||||
export const getChannelName = (channel: Protobuf.Channel.Channel) => { |
|
||||
return channel.settings?.name.length |
|
||||
? channel.settings?.name |
|
||||
: channel.index === 0 |
|
||||
? i18next.t("page.broadcastLabel") |
|
||||
: i18next.t("page.channelIndex", { |
|
||||
ns: "channels", |
|
||||
index: channel.index, |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
const ChannelsPage = () => { |
|
||||
const { t } = useTranslation("channels"); |
|
||||
const { channels, setDialogOpen } = useDevice(); |
|
||||
const [activeChannel] = useState<Types.ChannelNumber>( |
|
||||
Types.ChannelNumber.Primary, |
|
||||
); |
|
||||
|
|
||||
const currentChannel = channels.get(activeChannel); |
|
||||
const allChannels = Array.from(channels.values()); |
|
||||
|
|
||||
return ( |
|
||||
<PageLayout |
|
||||
contentClassName="overflow-auto" |
|
||||
leftBar={<Sidebar />} |
|
||||
label={ |
|
||||
currentChannel |
|
||||
? getChannelName(currentChannel) |
|
||||
: t("loading", { ns: "common" }) |
|
||||
} |
|
||||
actions={[ |
|
||||
{ |
|
||||
key: "import", |
|
||||
icon: UploadIcon, |
|
||||
onClick() { |
|
||||
setDialogOpen("import", true); |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
key: "qr", |
|
||||
icon: QrCodeIcon, |
|
||||
onClick() { |
|
||||
setDialogOpen("QR", true); |
|
||||
}, |
|
||||
}, |
|
||||
]} |
|
||||
> |
|
||||
<Tabs defaultValue="0"> |
|
||||
<TabsList className="dark:bg-slate-800"> |
|
||||
{allChannels.map((channel) => ( |
|
||||
<TabsTrigger |
|
||||
key={channel.index} |
|
||||
value={channel.index.toString()} |
|
||||
className="dark:text-white" |
|
||||
> |
|
||||
{getChannelName(channel)} |
|
||||
</TabsTrigger> |
|
||||
))} |
|
||||
</TabsList> |
|
||||
{allChannels.map((channel) => ( |
|
||||
<TabsContent key={channel.index} value={channel.index.toString()}> |
|
||||
<Channel key={channel.index} channel={channel} /> |
|
||||
</TabsContent> |
|
||||
))} |
|
||||
</Tabs> |
|
||||
</PageLayout> |
|
||||
); |
|
||||
}; |
|
||||
export default ChannelsPage; |
|
||||
@ -0,0 +1,95 @@ |
|||||
|
import { Channel } from "@app/components/PageComponents/ChannelConfig/Channel"; |
||||
|
import { Button } from "@components/UI/Button.tsx"; |
||||
|
import { Spinner } from "@components/UI/Spinner.tsx"; |
||||
|
import { |
||||
|
Tabs, |
||||
|
TabsContent, |
||||
|
TabsList, |
||||
|
TabsTrigger, |
||||
|
} from "@components/UI/Tabs.tsx"; |
||||
|
import { useDevice } from "@core/stores"; |
||||
|
import type { Protobuf } from "@meshtastic/core"; |
||||
|
import i18next from "i18next"; |
||||
|
import { QrCodeIcon, UploadIcon } from "lucide-react"; |
||||
|
import { Suspense, useMemo } from "react"; |
||||
|
import type { UseFormReturn } from "react-hook-form"; |
||||
|
import { useTranslation } from "react-i18next"; |
||||
|
|
||||
|
interface ConfigProps { |
||||
|
onFormInit: <T extends object>(methods: UseFormReturn<T>) => void; |
||||
|
} |
||||
|
|
||||
|
export const getChannelName = (channel: Protobuf.Channel.Channel) => { |
||||
|
return channel.settings?.name.length |
||||
|
? channel.settings?.name |
||||
|
: channel.index === 0 |
||||
|
? i18next.t("page.broadcastLabel") |
||||
|
: i18next.t("page.channelIndex", { |
||||
|
ns: "channels", |
||||
|
index: channel.index, |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
export const ChannelConfig = ({ onFormInit }: ConfigProps) => { |
||||
|
const { channels, getWorkingChannelConfig, setDialogOpen } = useDevice(); |
||||
|
const { t } = useTranslation("channels"); |
||||
|
|
||||
|
const allChannels = Array.from(channels.values()); |
||||
|
const flags = useMemo( |
||||
|
() => |
||||
|
new Map( |
||||
|
allChannels.map((channel) => [ |
||||
|
channel.index, |
||||
|
getWorkingChannelConfig(channel.index), |
||||
|
]), |
||||
|
), |
||||
|
[allChannels, getWorkingChannelConfig], |
||||
|
); |
||||
|
|
||||
|
return ( |
||||
|
<Tabs defaultValue="channel_0"> |
||||
|
<TabsList className="w-full dark:bg-slate-700"> |
||||
|
{allChannels.map((channel) => ( |
||||
|
<TabsTrigger |
||||
|
key={`channel_${channel.index}`} |
||||
|
value={`channel_${channel.index}`} |
||||
|
className="dark:text-white relative" |
||||
|
> |
||||
|
{getChannelName(channel)} |
||||
|
{flags.get(channel.index) && ( |
||||
|
<span className="absolute -top-0.5 -right-0.5 z-50 flex size-3"> |
||||
|
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-500 opacity-25" /> |
||||
|
<span className="relative inline-flex size-3 rounded-full bg-sky-500" /> |
||||
|
</span> |
||||
|
)} |
||||
|
</TabsTrigger> |
||||
|
))} |
||||
|
<Button |
||||
|
className="ml-auto mr-1 h-8" |
||||
|
onClick={() => setDialogOpen("import", true)} |
||||
|
> |
||||
|
<UploadIcon className="mr-2" size={14} /> |
||||
|
{t("page.import")} |
||||
|
</Button> |
||||
|
<Button className=" h-8" onClick={() => setDialogOpen("QR", true)}> |
||||
|
<QrCodeIcon className="mr-2" size={14} /> |
||||
|
{t("page.export")} |
||||
|
</Button> |
||||
|
</TabsList> |
||||
|
{allChannels.map((channel) => ( |
||||
|
<TabsContent |
||||
|
key={`channel_${channel.index}`} |
||||
|
value={`channel_${channel.index}`} |
||||
|
> |
||||
|
<Suspense fallback={<Spinner size="lg" className="my-5" />}> |
||||
|
<Channel |
||||
|
key={channel.index} |
||||
|
onFormInit={onFormInit} |
||||
|
channel={channel} |
||||
|
/> |
||||
|
</Suspense> |
||||
|
</TabsContent> |
||||
|
))} |
||||
|
</Tabs> |
||||
|
); |
||||
|
}; |
||||
Loading…
Reference in new issue