Sacha Weatherstone
3 years ago
105 changed files with 3403 additions and 2535 deletions
File diff suppressed because it is too large
@ -1,20 +0,0 @@ |
|||
import { GitBranchIcon } from "@primer/octicons-react"; |
|||
import type { ReactNode } from "react"; |
|||
|
|||
export interface BottomNavProps { |
|||
children: ReactNode; |
|||
} |
|||
|
|||
export const BottomNav = ({ children }: BottomNavProps): JSX.Element => { |
|||
return ( |
|||
<div className="flex bg-backgroundPrimary"> |
|||
<div className="flex h-8 cursor-pointer select-none gap-1 bg-accent px-1 text-textPrimary hover:brightness-hover active:brightness-press"> |
|||
<GitBranchIcon className="my-auto w-4" /> |
|||
<span className="my-auto font-mono text-sm"> |
|||
{process.env.COMMIT_HASH} |
|||
</span> |
|||
</div> |
|||
{children} |
|||
</div> |
|||
); |
|||
}; |
|||
@ -1,37 +0,0 @@ |
|||
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> |
|||
); |
|||
}; |
|||
@ -1,3 +0,0 @@ |
|||
export const NavSpacer = (): JSX.Element => { |
|||
return <div className="h-1 w-10 rounded-full bg-accentMuted" />; |
|||
}; |
|||
@ -1,69 +0,0 @@ |
|||
import type { ComponentType, SVGProps } from "react"; |
|||
import { useDevice } from "@core/providers/useDevice.js"; |
|||
import type { Page } from "@core/stores/deviceStore.js"; |
|||
import { |
|||
BeakerIcon, |
|||
ChatBubbleBottomCenterTextIcon, |
|||
Cog8ToothIcon, |
|||
MapIcon, |
|||
Square3Stack3DIcon, |
|||
UsersIcon |
|||
} from "@heroicons/react/24/outline"; |
|||
|
|||
export const PageNav = (): JSX.Element => { |
|||
const { activePage, setActivePage } = useDevice(); |
|||
|
|||
interface NavLink { |
|||
name: string; |
|||
icon: ComponentType<SVGProps<SVGSVGElement>>; |
|||
page: Page; |
|||
} |
|||
|
|||
const pages: NavLink[] = [ |
|||
{ |
|||
name: "Messages", |
|||
icon: ChatBubbleBottomCenterTextIcon, |
|||
page: "messages" |
|||
}, |
|||
{ |
|||
name: "Map", |
|||
icon: MapIcon, |
|||
page: "map" |
|||
}, |
|||
{ |
|||
name: "Config", |
|||
icon: Cog8ToothIcon, |
|||
page: "config" |
|||
}, |
|||
{ |
|||
name: "Channels", |
|||
icon: Square3Stack3DIcon, |
|||
page: "channels" |
|||
}, |
|||
{ |
|||
name: "Peers", |
|||
icon: UsersIcon, |
|||
page: "peers" |
|||
} |
|||
]; |
|||
|
|||
return ( |
|||
<div className="flex text-textPrimary"> |
|||
{pages.map((Link) => ( |
|||
<div |
|||
key={Link.name} |
|||
onClick={() => { |
|||
setActivePage(Link.page); |
|||
}} |
|||
className={`border-x-4 border-backgroundPrimary bg-backgroundPrimary py-5 px-4 hover:brightness-hover active:brightness-press ${ |
|||
Link.page === activePage |
|||
? "border-l-accent text-textPrimary" |
|||
: "text-textSecondary hover:text-textPrimary" |
|||
}`}
|
|||
> |
|||
<Link.icon className="w-4" /> |
|||
</div> |
|||
))} |
|||
</div> |
|||
); |
|||
}; |
|||
@ -1,69 +1,86 @@ |
|||
import { useAppStore } from "@core/stores/appStore.js"; |
|||
import { useDeviceStore } from "@core/stores/deviceStore.js"; |
|||
import { NavSpacer } from "@app/Nav/NavSpacer.js"; |
|||
import { PageNav } from "@app/Nav/PageNav.js"; |
|||
import { Hashicon } from "@emeraldpay/hashicon-react"; |
|||
import { PlusIcon } from "@heroicons/react/24/outline"; |
|||
import { MoonIcon, SunIcon } from "@primer/octicons-react"; |
|||
import { |
|||
PlusIcon, |
|||
HomeIcon, |
|||
LanguagesIcon, |
|||
SunIcon, |
|||
MoonIcon, |
|||
GithubIcon, |
|||
TerminalIcon |
|||
} from "lucide-react"; |
|||
import { Separator } from "./UI/Seperator.js"; |
|||
import { cn } from "@app/core/utils/cn.js"; |
|||
import { Code } from "./UI/Typography/Code.js"; |
|||
|
|||
export const DeviceSelector = (): JSX.Element => { |
|||
const { getDevices } = useDeviceStore(); |
|||
const { selectedDevice, setSelectedDevice, darkMode, setDarkMode } = |
|||
useAppStore(); |
|||
const { |
|||
selectedDevice, |
|||
setSelectedDevice, |
|||
darkMode, |
|||
setDarkMode, |
|||
setCommandPaletteOpen |
|||
} = useAppStore(); |
|||
|
|||
return ( |
|||
<div className="flex h-full w-14 items-center gap-3 bg-backgroundPrimary pt-3 [writing-mode:vertical-rl]"> |
|||
<div className="flex items-center gap-3"> |
|||
<span className="flex font-bold text-textPrimary"> |
|||
<nav className="drag custom-border flex flex-col justify-between border-r-[0.5px] bg-transparent pt-2"> |
|||
<div className="flex flex-col overflow-y-hidden"> |
|||
<ul className="flex w-20 shrink-0 flex-col items-center justify-end space-y-2.5 bg-transparent px-5 pt-1 pb-px"> |
|||
<li className="aspect-w-1 aspect-h-1 w-full"> |
|||
<a className="text-primary-500 ring-primary-300 flex flex-col items-center justify-center rounded-full outline-none ring transition-all focus:outline-none sm:duration-300"> |
|||
<HomeIcon /> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
<ul className="flex w-20 grow flex-col items-center space-y-4 bg-transparent py-4 px-5"> |
|||
{getDevices().map((device) => ( |
|||
<div |
|||
<li |
|||
key={device.id} |
|||
className="aspect-w-1 aspect-h-1 w-full" |
|||
onClick={() => { |
|||
setSelectedDevice(device.id); |
|||
}} |
|||
className={`cursor-pointer border-x-4 border-backgroundPrimary bg-backgroundPrimary py-3 px-2 hover:brightness-hover active:brightness-press ${ |
|||
selectedDevice === device.id ? "border-l-accent" : "" |
|||
}`}
|
|||
> |
|||
<Hashicon |
|||
size={32} |
|||
value={device.hardware.myNodeNum.toString()} |
|||
/> |
|||
</div> |
|||
<div |
|||
className={cn( |
|||
"flex aspect-square cursor-pointer flex-col items-center justify-center rounded-full ring ring-accent", |
|||
selectedDevice === device.id ? "ring" : "ring-0" |
|||
)} |
|||
> |
|||
<Hashicon |
|||
size={24} |
|||
value={device.hardware.myNodeNum.toString()} |
|||
/> |
|||
</div> |
|||
</li> |
|||
))} |
|||
<div |
|||
onClick={() => { |
|||
setSelectedDevice(0); |
|||
}} |
|||
className={`cursor-pointer border-x-4 border-backgroundPrimary bg-backgroundPrimary py-4 px-3 hover:brightness-hover active:brightness-press ${ |
|||
selectedDevice === 0 ? "border-l-accent" : "" |
|||
}`}
|
|||
> |
|||
<PlusIcon className="w-6" /> |
|||
<Separator /> |
|||
<div className="transition-all duration-300 hover:text-accent"> |
|||
<PlusIcon /> |
|||
</div> |
|||
</span> |
|||
</ul> |
|||
</div> |
|||
|
|||
{selectedDevice !== 0 && ( |
|||
<> |
|||
<NavSpacer /> |
|||
<PageNav /> |
|||
</> |
|||
)} |
|||
|
|||
<NavSpacer /> |
|||
|
|||
<div |
|||
onClick={() => setDarkMode(!darkMode)} |
|||
className="bg-backgroundPrimary py-5 px-4 text-textSecondary hover:text-textPrimary hover:brightness-hover active:brightness-press" |
|||
> |
|||
{darkMode ? <SunIcon className="w-4" /> : <MoonIcon className="w-4" />} |
|||
<div className="flex w-20 flex-col items-center space-y-5 bg-transparent px-5 pb-5"> |
|||
<button |
|||
className="transition-all hover:text-accent" |
|||
onClick={() => setDarkMode(!darkMode)} |
|||
> |
|||
{darkMode ? <SunIcon /> : <MoonIcon />} |
|||
</button> |
|||
<button |
|||
className="transition-all hover:text-accent" |
|||
onClick={() => setCommandPaletteOpen(true)} |
|||
> |
|||
<TerminalIcon /> |
|||
</button> |
|||
<button className="transition-all hover:text-accent"> |
|||
<LanguagesIcon /> |
|||
</button> |
|||
<Separator /> |
|||
<Code>{process.env.COMMIT_HASH}</Code> |
|||
</div> |
|||
|
|||
<img |
|||
src={darkMode ? "Logo_White.svg" : "Logo_Black.svg"} |
|||
className="mt-auto px-2 py-3" |
|||
/> |
|||
</div> |
|||
</nav> |
|||
); |
|||
}; |
|||
|
|||
@ -0,0 +1,80 @@ |
|||
import { Input } from "@components/form/Input.js"; |
|||
import { |
|||
Dialog, |
|||
DialogContent, |
|||
DialogDescription, |
|||
DialogFooter, |
|||
DialogHeader, |
|||
DialogTitle |
|||
} from "@components/UI/Dialog.js"; |
|||
import { Button } from "../form/Button.js"; |
|||
import { useDevice } from "@app/core/stores/deviceStore.js"; |
|||
import { useForm } from "react-hook-form"; |
|||
import { Protobuf } from "@meshtastic/meshtasticjs"; |
|||
|
|||
export interface User { |
|||
longName: string; |
|||
shortName: string; |
|||
} |
|||
|
|||
export interface DeviceNameDialogProps { |
|||
open: boolean; |
|||
onOpenChange: (open: boolean) => void; |
|||
} |
|||
|
|||
export const DeviceNameDialog = ({ |
|||
open, |
|||
onOpenChange |
|||
}: DeviceNameDialogProps): JSX.Element => { |
|||
const { hardware, nodes, connection, setDialogOpen } = useDevice(); |
|||
|
|||
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum); |
|||
|
|||
const { register, handleSubmit } = useForm<User>({ |
|||
defaultValues: { |
|||
longName: myNode?.data.user?.longName, |
|||
shortName: myNode?.data.user?.shortName |
|||
} |
|||
}); |
|||
|
|||
const onSubmit = handleSubmit((data) => { |
|||
connection?.setOwner( |
|||
new Protobuf.User({ |
|||
...myNode?.data.user, |
|||
...data |
|||
}) |
|||
); |
|||
setDialogOpen("deviceName", false); |
|||
}); |
|||
|
|||
return ( |
|||
<Dialog open={open} onOpenChange={onOpenChange}> |
|||
<DialogContent> |
|||
<DialogHeader> |
|||
<DialogTitle>Change Device Name</DialogTitle> |
|||
<DialogDescription> |
|||
The Device will restart once the config is saved. |
|||
</DialogDescription> |
|||
</DialogHeader> |
|||
<div className="gap-4"> |
|||
<form onSubmit={onSubmit}> |
|||
<Input |
|||
label="Long Name" |
|||
description="Personalised name for this device." |
|||
{...register("longName")} |
|||
/> |
|||
<Input |
|||
label="Short Name" |
|||
description="Shown on small screens." |
|||
maxLength={4} |
|||
{...register("shortName")} |
|||
/> |
|||
</form> |
|||
</div> |
|||
<DialogFooter> |
|||
<Button onClick={() => onSubmit()}>Save</Button> |
|||
</DialogFooter> |
|||
</DialogContent> |
|||
</Dialog> |
|||
); |
|||
}; |
|||
@ -1,41 +1,48 @@ |
|||
import { useDevice } from "@core/providers/useDevice.js"; |
|||
import { useDevice } from "@core/stores/deviceStore.js"; |
|||
import { QRDialog } from "@components/Dialog/QRDialog.js"; |
|||
import { RebootDialog } from "@components/Dialog/RebootDialog.js"; |
|||
import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.js"; |
|||
import { ImportDialog } from "@components/Dialog/ImportDialog.js"; |
|||
import { DeviceNameDialog } from "./DeviceNameDialog.js"; |
|||
|
|||
export const DialogManager = (): JSX.Element => { |
|||
const { channels, config, dialog, setDialogOpen } = useDevice(); |
|||
return ( |
|||
<> |
|||
<QRDialog |
|||
isOpen={dialog.QR} |
|||
close={() => { |
|||
setDialogOpen("QR", false); |
|||
open={dialog.QR} |
|||
onOpenChange={(open) => { |
|||
setDialogOpen("QR", open); |
|||
}} |
|||
channels={channels.map((ch) => ch.config)} |
|||
loraConfig={config.lora} |
|||
/> |
|||
<ImportDialog |
|||
isOpen={dialog.import} |
|||
close={() => { |
|||
setDialogOpen("import", false); |
|||
open={dialog.import} |
|||
onOpenChange={(open) => { |
|||
setDialogOpen("import", open); |
|||
}} |
|||
channels={channels.map((ch) => ch.config)} |
|||
loraConfig={config.lora} |
|||
/> |
|||
<ShutdownDialog |
|||
isOpen={dialog.shutdown} |
|||
close={() => { |
|||
open={dialog.shutdown} |
|||
onOpenChange={() => { |
|||
setDialogOpen("shutdown", false); |
|||
}} |
|||
/> |
|||
<RebootDialog |
|||
isOpen={dialog.reboot} |
|||
close={() => { |
|||
open={dialog.reboot} |
|||
onOpenChange={() => { |
|||
setDialogOpen("reboot", false); |
|||
}} |
|||
/> |
|||
<DeviceNameDialog |
|||
open={dialog.deviceName} |
|||
onOpenChange={(open) => { |
|||
setDialogOpen("deviceName", open); |
|||
}} |
|||
/> |
|||
</> |
|||
); |
|||
}; |
|||
|
|||
@ -1,56 +1,64 @@ |
|||
import { useState } from "react"; |
|||
import { useDevice } from "@core/providers/useDevice.js"; |
|||
import { Dialog } from "@components/generic/Dialog.js"; |
|||
import { ArrowPathIcon, ClockIcon } from "@heroicons/react/24/outline"; |
|||
import { useDevice } from "@core/stores/deviceStore.js"; |
|||
import { |
|||
Dialog, |
|||
DialogContent, |
|||
DialogDescription, |
|||
DialogFooter, |
|||
DialogHeader, |
|||
DialogTitle |
|||
} from "@components/UI/Dialog.js"; |
|||
import { ClockIcon, RefreshCwIcon } from "lucide-react"; |
|||
import { Button } from "@components/form/Button.js"; |
|||
import { Input } from "@components/form/Input.js"; |
|||
|
|||
export interface RebootDialogProps { |
|||
isOpen: boolean; |
|||
close: () => void; |
|||
open: boolean; |
|||
onOpenChange: (open: boolean) => void; |
|||
} |
|||
|
|||
export const RebootDialog = ({ |
|||
isOpen, |
|||
close |
|||
open, |
|||
onOpenChange |
|||
}: RebootDialogProps): JSX.Element => { |
|||
const { connection, setDialogOpen } = useDevice(); |
|||
|
|||
const [time, setTime] = useState<number>(5); |
|||
|
|||
return ( |
|||
<Dialog |
|||
title={"Schedule Reboot"} |
|||
description={"Reboot the connected node after x minutes."} |
|||
isOpen={isOpen} |
|||
close={close} |
|||
> |
|||
<div className="flex gap-2 p-4"> |
|||
<Input |
|||
type="number" |
|||
value={time} |
|||
onChange={(e) => setTime(parseInt(e.target.value))} |
|||
action={{ |
|||
icon: <ClockIcon className="w-4" />, |
|||
action() { |
|||
connection |
|||
?.reboot(time * 60) |
|||
.then(() => setDialogOpen("reboot", false)); |
|||
} |
|||
}} |
|||
/> |
|||
<Button |
|||
className="w-24" |
|||
onClick={() => { |
|||
connection?.reboot(2).then(() => setDialogOpen("reboot", false)); |
|||
}} |
|||
> |
|||
<span> |
|||
<ArrowPathIcon className="w-4" /> |
|||
</span> |
|||
Now |
|||
</Button> |
|||
</div> |
|||
<Dialog open={open} onOpenChange={onOpenChange}> |
|||
<DialogContent> |
|||
<DialogHeader> |
|||
<DialogTitle>Schedule Reboot</DialogTitle> |
|||
<DialogDescription> |
|||
Reboot the connected node after x minutes. |
|||
</DialogDescription> |
|||
</DialogHeader> |
|||
<div className="flex gap-2 p-4"> |
|||
<Input |
|||
type="number" |
|||
value={time} |
|||
onChange={(e) => setTime(parseInt(e.target.value))} |
|||
action={{ |
|||
icon: <ClockIcon size={16} />, |
|||
action() { |
|||
connection |
|||
?.reboot(time * 60) |
|||
.then(() => setDialogOpen("reboot", false)); |
|||
} |
|||
}} |
|||
/> |
|||
<Button |
|||
className="w-24" |
|||
onClick={() => { |
|||
connection?.reboot(2).then(() => setDialogOpen("reboot", false)); |
|||
}} |
|||
> |
|||
<RefreshCwIcon size={16} /> |
|||
Now |
|||
</Button> |
|||
</div> |
|||
</DialogContent> |
|||
</Dialog> |
|||
); |
|||
}; |
|||
|
|||
@ -1,56 +1,66 @@ |
|||
import { useState } from "react"; |
|||
import { useDevice } from "@core/providers/useDevice.js"; |
|||
import { Dialog } from "@components/generic/Dialog.js"; |
|||
import { ClockIcon, PowerIcon } from "@heroicons/react/24/outline"; |
|||
import { useDevice } from "@core/stores/deviceStore.js"; |
|||
import { |
|||
Dialog, |
|||
DialogContent, |
|||
DialogDescription, |
|||
DialogHeader, |
|||
DialogTitle |
|||
} from "@components/UI/Dialog.js"; |
|||
import { ClockIcon, PowerIcon } from "lucide-react"; |
|||
import { Button } from "@components/form/Button.js"; |
|||
import { Input } from "@components/form/Input.js"; |
|||
|
|||
export interface ShutdownDialogProps { |
|||
isOpen: boolean; |
|||
close: () => void; |
|||
open: boolean; |
|||
onOpenChange: (open: boolean) => void; |
|||
} |
|||
|
|||
export const ShutdownDialog = ({ |
|||
isOpen, |
|||
close |
|||
open, |
|||
onOpenChange |
|||
}: ShutdownDialogProps): JSX.Element => { |
|||
const { connection, setDialogOpen } = useDevice(); |
|||
|
|||
const [time, setTime] = useState<number>(5); |
|||
|
|||
return ( |
|||
<Dialog |
|||
title={"Schedule Shutdown"} |
|||
description={"Turn off the connected node after x minutes."} |
|||
isOpen={isOpen} |
|||
close={close} |
|||
> |
|||
<div className="flex gap-2 p-4"> |
|||
<Input |
|||
type="number" |
|||
value={time} |
|||
onChange={(e) => setTime(parseInt(e.target.value))} |
|||
action={{ |
|||
icon: <ClockIcon className="w-4" />, |
|||
action() { |
|||
<Dialog open={open} onOpenChange={onOpenChange}> |
|||
<DialogContent> |
|||
<DialogHeader> |
|||
<DialogTitle>Schedule Shutdown</DialogTitle> |
|||
<DialogDescription> |
|||
Turn off the connected node after x minutes. |
|||
</DialogDescription> |
|||
</DialogHeader> |
|||
|
|||
<div className="flex gap-2 p-4"> |
|||
<Input |
|||
type="number" |
|||
value={time} |
|||
onChange={(e) => setTime(parseInt(e.target.value))} |
|||
action={{ |
|||
icon: <ClockIcon size={16} />, |
|||
action() { |
|||
connection |
|||
?.shutdown(time * 60) |
|||
.then(() => setDialogOpen("shutdown", false)); |
|||
} |
|||
}} |
|||
/> |
|||
<Button |
|||
className="w-24" |
|||
onClick={() => { |
|||
connection |
|||
?.shutdown(time * 60) |
|||
?.shutdown(2) |
|||
.then(() => setDialogOpen("shutdown", false)); |
|||
} |
|||
}} |
|||
/> |
|||
<Button |
|||
className="w-24" |
|||
onClick={() => { |
|||
connection |
|||
?.shutdown(2) |
|||
.then(() => setDialogOpen("shutdown", false)); |
|||
}} |
|||
> |
|||
<PowerIcon className="w-4" /> |
|||
<span>Now</span> |
|||
</Button> |
|||
</div> |
|||
}} |
|||
> |
|||
<PowerIcon size={16} /> |
|||
<span>Now</span> |
|||
</Button> |
|||
</div> |
|||
</DialogContent> |
|||
</Dialog> |
|||
); |
|||
}; |
|||
|
|||
@ -1,134 +0,0 @@ |
|||
import "chartjs-adapter-date-fns"; |
|||
import { |
|||
Chart as ChartJS, |
|||
Filler, |
|||
Legend, |
|||
LinearScale, |
|||
LineElement, |
|||
PointElement, |
|||
TimeSeriesScale, |
|||
Tooltip |
|||
} from "chart.js"; |
|||
import { Line } from "react-chartjs-2"; |
|||
import { useDevice } from "@core/providers/useDevice.js"; |
|||
|
|||
export const Metrics = (): JSX.Element => { |
|||
const { nodes, hardware } = useDevice(); |
|||
|
|||
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum); |
|||
|
|||
ChartJS.register( |
|||
LinearScale, |
|||
PointElement, |
|||
LineElement, |
|||
Tooltip, |
|||
Filler, |
|||
Legend, |
|||
TimeSeriesScale |
|||
); |
|||
|
|||
return ( |
|||
<div className="flex h-full w-full flex-grow"> |
|||
<Line |
|||
className="h-full w-full flex-grow" |
|||
options={{ |
|||
responsive: true, |
|||
maintainAspectRatio: false, |
|||
interaction: { |
|||
mode: "index", |
|||
intersect: false |
|||
}, |
|||
line: { |
|||
datasets: { |
|||
tension: 0.5 |
|||
} |
|||
}, |
|||
scales: { |
|||
x: { |
|||
type: "timeseries", |
|||
ticks: { |
|||
display: false |
|||
} |
|||
}, |
|||
y: { |
|||
ticks: { |
|||
display: false |
|||
} |
|||
}, |
|||
y1: { |
|||
display: false |
|||
}, |
|||
y2: { |
|||
display: false |
|||
}, |
|||
y3: { |
|||
display: false |
|||
} |
|||
}, |
|||
plugins: {} |
|||
}} |
|||
data={{ |
|||
labels: [], |
|||
datasets: [ |
|||
{ |
|||
fill: true, |
|||
label: "airUtilTx", |
|||
yAxisID: "y", |
|||
data: myNode?.deviceMetrics.map((metric) => { |
|||
return { |
|||
x: metric.timestamp, |
|||
y: metric.metric.airUtilTx |
|||
}; |
|||
}), |
|||
backgroundColor: "rgba(102, 126, 234, 0.25)", |
|||
borderColor: "rgba(102, 126, 234, 1)", |
|||
pointBackgroundColor: "rgba(102, 126, 234, 1)" |
|||
}, |
|||
{ |
|||
fill: true, |
|||
label: "channelUtilization", |
|||
yAxisID: "y1", |
|||
data: myNode?.deviceMetrics.map((metric) => { |
|||
return { |
|||
x: metric.timestamp, |
|||
y: metric.metric.channelUtilization |
|||
}; |
|||
}), |
|||
backgroundColor: "rgba(237, 100, 166, 0.25)", |
|||
borderColor: "rgba(237, 100, 166, 1)", |
|||
pointBackgroundColor: "rgba(237, 100, 166, 1)" |
|||
}, |
|||
{ |
|||
fill: true, |
|||
label: "batteryLevel", |
|||
yAxisID: "y2", |
|||
data: myNode?.deviceMetrics.map((metric) => { |
|||
return { |
|||
x: metric.timestamp, |
|||
y: metric.metric.batteryLevel |
|||
}; |
|||
}), |
|||
backgroundColor: "rgba(113, 234, 102, 0.25)", |
|||
borderColor: "rgba(113, 234, 102, 1)", |
|||
pointBackgroundColor: "rgba(113, 234, 102, 1)" |
|||
}, |
|||
{ |
|||
fill: true, |
|||
label: "voltage", |
|||
yAxisID: "y3", |
|||
data: myNode?.deviceMetrics.map((metric) => { |
|||
return { |
|||
x: metric.timestamp, |
|||
y: metric.metric.voltage |
|||
}; |
|||
}), |
|||
backgroundColor: "rgba(234, 166, 102, 0.25)", |
|||
borderColor: "rgba(234, 166, 102, 1)", |
|||
pointBackgroundColor: "rgba(234, 166, 102, 1)" |
|||
} |
|||
] |
|||
}} |
|||
/> |
|||
</div> |
|||
); |
|||
}; |
|||
@ -1,3 +0,0 @@ |
|||
export const Notifications = (): JSX.Element => { |
|||
return <div></div>; |
|||
}; |
|||
@ -1,170 +0,0 @@ |
|||
import "chartjs-adapter-date-fns"; |
|||
|
|||
import { |
|||
Chart as ChartJS, |
|||
Filler, |
|||
Legend, |
|||
LinearScale, |
|||
LineElement, |
|||
PointElement, |
|||
TimeSeriesScale, |
|||
Tooltip |
|||
} from "chart.js"; |
|||
import { Line } from "react-chartjs-2"; |
|||
|
|||
import { useDevice } from "@core/providers/useDevice.js"; |
|||
|
|||
export const Sensor = (): JSX.Element => { |
|||
const { nodes, hardware } = useDevice(); |
|||
|
|||
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum); |
|||
|
|||
ChartJS.register( |
|||
LinearScale, |
|||
PointElement, |
|||
LineElement, |
|||
Tooltip, |
|||
Filler, |
|||
Legend, |
|||
TimeSeriesScale |
|||
); |
|||
|
|||
return ( |
|||
<div className="flex h-full w-full flex-grow"> |
|||
<Line |
|||
className="h-full w-full flex-grow" |
|||
options={{ |
|||
responsive: true, |
|||
maintainAspectRatio: false, |
|||
interaction: { |
|||
mode: "index", |
|||
intersect: false |
|||
}, |
|||
line: { |
|||
datasets: { |
|||
tension: 0.5 |
|||
} |
|||
}, |
|||
scales: { |
|||
x: { |
|||
type: "timeseries", |
|||
ticks: { |
|||
display: false |
|||
} |
|||
}, |
|||
y: { |
|||
ticks: { |
|||
display: false |
|||
} |
|||
}, |
|||
y1: { |
|||
display: false |
|||
}, |
|||
y2: { |
|||
display: false |
|||
}, |
|||
y3: { |
|||
display: false |
|||
}, |
|||
y4: { |
|||
display: false |
|||
}, |
|||
y5: { |
|||
display: false |
|||
} |
|||
}, |
|||
plugins: {} |
|||
}} |
|||
data={{ |
|||
labels: [], |
|||
datasets: [ |
|||
{ |
|||
fill: true, |
|||
label: "barometricPressure", |
|||
yAxisID: "y", |
|||
data: myNode?.environmentMetrics.map((metric) => { |
|||
return { |
|||
x: metric.timestamp, |
|||
y: metric.metric.barometricPressure |
|||
}; |
|||
}), |
|||
backgroundColor: "rgba(102, 126, 234, 0.25)", |
|||
borderColor: "rgba(102, 126, 234, 1)", |
|||
pointBackgroundColor: "rgba(102, 126, 234, 1)" |
|||
}, |
|||
{ |
|||
fill: true, |
|||
label: "current", |
|||
yAxisID: "y1", |
|||
data: myNode?.environmentMetrics.map((metric) => { |
|||
return { |
|||
x: metric.timestamp, |
|||
y: metric.metric.current |
|||
}; |
|||
}), |
|||
backgroundColor: "rgba(237, 100, 166, 0.25)", |
|||
borderColor: "rgba(237, 100, 166, 1)", |
|||
pointBackgroundColor: "rgba(237, 100, 166, 1)" |
|||
}, |
|||
{ |
|||
fill: true, |
|||
label: "gasResistance", |
|||
yAxisID: "y2", |
|||
data: myNode?.environmentMetrics.map((metric) => { |
|||
return { |
|||
x: metric.timestamp, |
|||
y: metric.metric.gasResistance |
|||
}; |
|||
}), |
|||
backgroundColor: "rgba(113, 234, 102, 0.25)", |
|||
borderColor: "rgba(113, 234, 102, 1)", |
|||
pointBackgroundColor: "rgba(113, 234, 102, 1)" |
|||
}, |
|||
{ |
|||
fill: true, |
|||
label: "relativeHumidity", |
|||
yAxisID: "y3", |
|||
data: myNode?.environmentMetrics.map((metric) => { |
|||
return { |
|||
x: metric.timestamp, |
|||
y: metric.metric.relativeHumidity |
|||
}; |
|||
}), |
|||
backgroundColor: "rgba(234, 166, 102, 0.25)", |
|||
borderColor: "rgba(234, 166, 102, 1)", |
|||
pointBackgroundColor: "rgba(234, 166, 102, 1)" |
|||
}, |
|||
{ |
|||
fill: true, |
|||
label: "temperature", |
|||
yAxisID: "y4", |
|||
data: myNode?.environmentMetrics.map((metric) => { |
|||
return { |
|||
x: metric.timestamp, |
|||
y: metric.metric.temperature |
|||
}; |
|||
}), |
|||
backgroundColor: "rgba(38, 255, 212, 0.25)", |
|||
borderColor: "rgba(38, 255, 212, 1)", |
|||
pointBackgroundColor: "rgba(38, 255, 212, 1)" |
|||
}, |
|||
{ |
|||
fill: true, |
|||
label: "voltage", |
|||
yAxisID: "y5", |
|||
data: myNode?.environmentMetrics.map((metric) => { |
|||
return { |
|||
x: metric.timestamp, |
|||
y: metric.metric.voltage |
|||
}; |
|||
}), |
|||
backgroundColor: "rgba(247, 255, 15, 0.25)", |
|||
borderColor: "rgba(247, 255, 15, 1)", |
|||
pointBackgroundColor: "rgba(247, 255, 15, 1)" |
|||
} |
|||
] |
|||
}} |
|||
/> |
|||
</div> |
|||
); |
|||
}; |
|||
@ -1,66 +0,0 @@ |
|||
import { useState } from "react"; |
|||
import { Metrics } from "@components/Drawer/Metrics.js"; |
|||
import { Notifications } from "@components/Drawer/Notifications.js"; |
|||
import { Sensor } from "@components/Drawer/Sensor.js"; |
|||
import type { TabType } from "@components/generic/TabbedContent.js"; |
|||
import { Tab } from "@headlessui/react"; |
|||
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline"; |
|||
|
|||
export const Drawer = (): JSX.Element => { |
|||
const [drawerOpen, setDrawerOpen] = useState(false); |
|||
|
|||
const tabs: TabType[] = [ |
|||
{ label: "Notifications", element: Notifications }, |
|||
{ label: "Metrics", element: Metrics }, |
|||
{ label: "Sensor", element: Sensor } |
|||
]; |
|||
return ( |
|||
<Tab.Group as="div"> |
|||
<Tab.List className="flex w-full"> |
|||
{tabs.map((tab, index) => ( |
|||
<Tab key={index}> |
|||
{({ selected }) => ( |
|||
<div |
|||
onClick={() => { |
|||
setDrawerOpen(true); |
|||
}} |
|||
className={`flex h-full cursor-pointer border-b-4 px-1 first:pl-2 last:pr-2 hover:text-textPrimary ${ |
|||
selected |
|||
? "border-accent text-textPrimary" |
|||
: "border-backgroundPrimary text-textSecondary" |
|||
}`}
|
|||
> |
|||
<span className="m-auto select-none">{tab.label}</span> |
|||
</div> |
|||
)} |
|||
</Tab> |
|||
))} |
|||
|
|||
<div className="ml-auto flex h-8"> |
|||
<div |
|||
onClick={() => { |
|||
setDrawerOpen(!drawerOpen); |
|||
}} |
|||
className="flex cursor-pointer px-2" |
|||
> |
|||
<div className="m-auto text-textSecondary"> |
|||
{drawerOpen ? ( |
|||
<ChevronDownIcon className="h-4" /> |
|||
) : ( |
|||
<ChevronUpIcon className="h-4" /> |
|||
)} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</Tab.List> |
|||
|
|||
<Tab.Panels className={`${drawerOpen ? "flex" : "hidden"}`}> |
|||
{tabs.map((tab, index) => ( |
|||
<Tab.Panel key={index} className="flex h-40 flex-grow"> |
|||
{tab.element} |
|||
</Tab.Panel> |
|||
))} |
|||
</Tab.Panels> |
|||
</Tab.Group> |
|||
); |
|||
}; |
|||
@ -0,0 +1,57 @@ |
|||
import { |
|||
Menubar, |
|||
MenubarContent, |
|||
MenubarItem, |
|||
MenubarMenu, |
|||
MenubarSeparator, |
|||
MenubarShortcut, |
|||
MenubarTrigger |
|||
} from "@app/components/UI/Menubar.js"; |
|||
import { useAppStore } from "@app/core/stores/appStore.js"; |
|||
|
|||
export const Menu = (): JSX.Element => { |
|||
const { darkMode } = useAppStore(); |
|||
return ( |
|||
<Menubar className="rounded-none dark:bg-slate-900"> |
|||
<MenubarMenu> |
|||
<MenubarTrigger> |
|||
<img |
|||
src={darkMode ? "Logo_White.svg" : "Logo_Black.svg"} |
|||
className="h-4" |
|||
/> |
|||
</MenubarTrigger> |
|||
<MenubarContent> |
|||
<MenubarItem>About Music</MenubarItem> |
|||
<MenubarSeparator /> |
|||
<MenubarItem> |
|||
Preferences... <MenubarShortcut>⌘,</MenubarShortcut> |
|||
</MenubarItem> |
|||
<MenubarSeparator /> |
|||
<MenubarItem> |
|||
Hide Music... <MenubarShortcut>⌘H</MenubarShortcut> |
|||
</MenubarItem> |
|||
<MenubarItem> |
|||
Hide Others... <MenubarShortcut>⇧⌘H</MenubarShortcut> |
|||
</MenubarItem> |
|||
<MenubarShortcut /> |
|||
<MenubarItem> |
|||
Quit Music <MenubarShortcut>⌘Q</MenubarShortcut> |
|||
</MenubarItem> |
|||
</MenubarContent> |
|||
</MenubarMenu> |
|||
<MenubarMenu> |
|||
<MenubarTrigger>File</MenubarTrigger> |
|||
<MenubarContent> |
|||
<MenubarItem> |
|||
New Tab <MenubarShortcut>⌘T</MenubarShortcut> |
|||
</MenubarItem> |
|||
<MenubarItem>New Window</MenubarItem> |
|||
<MenubarSeparator /> |
|||
<MenubarItem>Share</MenubarItem> |
|||
<MenubarSeparator /> |
|||
<MenubarItem>Print</MenubarItem> |
|||
</MenubarContent> |
|||
</MenubarMenu> |
|||
</Menubar> |
|||
); |
|||
}; |
|||
@ -1,118 +0,0 @@ |
|||
import { Controller, useFieldArray, useForm } from "react-hook-form"; |
|||
import { Button } from "@components/form/Button.js"; |
|||
import { IconButton } from "@components/form/IconButton.js"; |
|||
import { InfoWrapper } from "@components/form/InfoWrapper.js"; |
|||
import { Input } from "@components/form/Input.js"; |
|||
import { Toggle } from "@components/form/Toggle.js"; |
|||
import { useAppStore } from "@core/stores/appStore.js"; |
|||
import { MapValidation } from "@app/validation/appConfig/map.js"; |
|||
import { Form } from "@components/form/Form"; |
|||
import { TrashIcon } from "@heroicons/react/24/outline"; |
|||
import { classValidatorResolver } from "@hookform/resolvers/class-validator"; |
|||
|
|||
export const Map = (): JSX.Element => { |
|||
const { rasterSources, setRasterSources } = useAppStore(); |
|||
|
|||
const { |
|||
register, |
|||
handleSubmit, |
|||
formState: { errors, isDirty }, |
|||
control, |
|||
reset |
|||
} = useForm<MapValidation>({ |
|||
defaultValues: { |
|||
// wmsSources: wmsSources ?? [
|
|||
// {
|
|||
// url: "",
|
|||
// tileSize: 512,
|
|||
// type: "raster"
|
|||
// }
|
|||
// ]
|
|||
}, |
|||
resolver: classValidatorResolver(MapValidation) |
|||
}); |
|||
|
|||
const { fields, append, remove, insert } = useFieldArray({ |
|||
control, |
|||
name: "rasterSources" |
|||
}); |
|||
|
|||
const onSubmit = handleSubmit((data) => { |
|||
setRasterSources(data.rasterSources); |
|||
}); |
|||
|
|||
// useEffect(() => {
|
|||
// reset(rasterSources);
|
|||
// }, [reset, rasterSources]);
|
|||
|
|||
return ( |
|||
<Form onSubmit={onSubmit}> |
|||
<InfoWrapper label="WMS Sources"> |
|||
<div className="flex flex-col gap-2"> |
|||
{fields.map((field, index) => ( |
|||
<div key={field.id} className="flex w-full gap-2"> |
|||
<Controller |
|||
name={`rasterSources.${index}.enabled`} |
|||
control={control} |
|||
render={({ field: { value, ...rest } }) => ( |
|||
<Toggle checked={value} {...rest} /> |
|||
)} |
|||
/> |
|||
<Input |
|||
placeholder="Name" |
|||
error={ |
|||
errors.rasterSources |
|||
? errors.rasterSources[index]?.title?.message |
|||
: undefined |
|||
} |
|||
{...register(`rasterSources.${index}.title`)} |
|||
/> |
|||
<Input |
|||
placeholder="Tile Size" |
|||
type="number" |
|||
error={ |
|||
errors.rasterSources |
|||
? errors.rasterSources[index]?.tileSize?.message |
|||
: undefined |
|||
} |
|||
{...register(`rasterSources.${index}.tileSize`, { |
|||
valueAsNumber: true |
|||
})} |
|||
/> |
|||
<Input |
|||
placeholder="URL" |
|||
error={ |
|||
errors.rasterSources |
|||
? errors.rasterSources[index]?.tiles?.message |
|||
: undefined |
|||
} |
|||
{...register(`rasterSources.${index}.tiles`)} |
|||
/> |
|||
<IconButton |
|||
className="shrink-0" |
|||
icon={<TrashIcon className="w-4" />} |
|||
onClick={() => { |
|||
remove(index); |
|||
}} |
|||
/> |
|||
</div> |
|||
))} |
|||
<Button |
|||
onClick={() => { |
|||
append({ |
|||
enabled: true, |
|||
title: "", |
|||
tiles: [ |
|||
"https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015" |
|||
], |
|||
tileSize: 512 |
|||
}); |
|||
}} |
|||
> |
|||
New Source |
|||
</Button> |
|||
</div> |
|||
</InfoWrapper> |
|||
</Form> |
|||
); |
|||
}; |
|||
@ -1,105 +0,0 @@ |
|||
import { useEffect } from "react"; |
|||
import { Controller, useForm } from "react-hook-form"; |
|||
import { toast } from "react-hot-toast"; |
|||
import { base16 } from "rfc4648"; |
|||
import { Input } from "@components/form/Input.js"; |
|||
import { Select } from "@components/form/Select.js"; |
|||
import { Toggle } from "@components/form/Toggle.js"; |
|||
import { UserValidation } from "@app/validation/config/user.js"; |
|||
import { Form } from "@components/form/Form"; |
|||
import { useDevice } from "@core/providers/useDevice.js"; |
|||
import { renderOptions } from "@core/utils/selectEnumOptions.js"; |
|||
import { classValidatorResolver } from "@hookform/resolvers/class-validator"; |
|||
import { Protobuf } from "@meshtastic/meshtasticjs"; |
|||
|
|||
export const User = (): JSX.Element => { |
|||
const { hardware, nodes, connection } = useDevice(); |
|||
|
|||
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum); |
|||
|
|||
const { register, handleSubmit, reset, control } = useForm<UserValidation>({ |
|||
defaultValues: myNode?.data.user, |
|||
resolver: classValidatorResolver(UserValidation) |
|||
}); |
|||
|
|||
useEffect(() => { |
|||
reset({ |
|||
longName: myNode?.data.user?.longName, |
|||
shortName: myNode?.data.user?.shortName, |
|||
isLicensed: myNode?.data.user?.isLicensed |
|||
}); |
|||
}, [reset, myNode]); |
|||
|
|||
const onSubmit = handleSubmit((data) => { |
|||
if (connection && myNode?.data.user) { |
|||
void toast.promise( |
|||
connection |
|||
.setOwner( |
|||
new Protobuf.User({ |
|||
...myNode.data.user, |
|||
...data |
|||
}) |
|||
) |
|||
.then(() => reset({ ...data })), |
|||
{ |
|||
loading: "Saving...", |
|||
success: "Saved User, Restarting Node", |
|||
error: "No response received" |
|||
} |
|||
); |
|||
} |
|||
}); |
|||
|
|||
return ( |
|||
<Form onSubmit={onSubmit}> |
|||
<Input |
|||
label="Device Name" |
|||
description="Personalised name for this device." |
|||
{...register("longName")} |
|||
/> |
|||
<Input |
|||
label="Short Name" |
|||
description="Shown on small screens." |
|||
maxLength={4} |
|||
{...register("shortName")} |
|||
/> |
|||
<Controller |
|||
name="isLicensed" |
|||
control={control} |
|||
render={({ field: { value, ...rest } }) => ( |
|||
<Toggle |
|||
label="Licenced Operator?" |
|||
description="Remove bandwidth restrictions in certain regions (HAM license required)" |
|||
checked={value} |
|||
{...rest} |
|||
/> |
|||
)} |
|||
/> |
|||
<Input |
|||
label="Mac Address" |
|||
description="Hardware address for this node." |
|||
disabled |
|||
value={ |
|||
base16 |
|||
.stringify(myNode?.data.user?.macaddr ?? []) |
|||
.match(/.{1,2}/g) |
|||
?.join(":") ?? "" |
|||
} |
|||
/> |
|||
<Input |
|||
label="Device ID" |
|||
disabled |
|||
description="Preset unique identifier for this device." |
|||
value={myNode?.data.user?.id} |
|||
/> |
|||
<Select |
|||
label="Hardware" |
|||
description="Hardware model of this device." |
|||
disabled |
|||
value={myNode?.data.user?.hwModel} |
|||
> |
|||
{renderOptions(Protobuf.HardwareModel)} |
|||
</Select> |
|||
</Form> |
|||
); |
|||
}; |
|||
@ -1,77 +0,0 @@ |
|||
import { useEffect } from "react"; |
|||
|
|||
import { useMap } from "react-map-gl"; |
|||
|
|||
import { useDevice } from "@core/providers/useDevice.js"; |
|||
import { |
|||
MagnifyingGlassMinusIcon, |
|||
MagnifyingGlassPlusIcon, |
|||
ShareIcon |
|||
} from "@heroicons/react/24/outline"; |
|||
import { bbox, lineString } from "@turf/turf"; |
|||
|
|||
export const MapControlls = (): JSX.Element => { |
|||
const { current: map } = useMap(); |
|||
const { nodes } = useDevice(); |
|||
|
|||
const getBBox = () => { |
|||
const nodesWithPosition = nodes.filter((n) => n.data.position?.latitudeI); |
|||
if (!nodesWithPosition.length) return; |
|||
const line = lineString( |
|||
nodesWithPosition.map((n) => [ |
|||
(n.data.position?.latitudeI ?? 0) / 1e7, |
|||
(n.data.position?.longitudeI ?? 0) / 1e7 |
|||
]) |
|||
); |
|||
const bounds = bbox(line); |
|||
const center = map?.cameraForBounds( |
|||
[ |
|||
[bounds[1], bounds[0]], |
|||
[bounds[3], bounds[2]] |
|||
], |
|||
{ padding: { top: 10, bottom: 10, left: 10, right: 10 } } |
|||
); |
|||
if (center) map?.easeTo(center); |
|||
else if (nodesWithPosition.length === 1) |
|||
map?.easeTo({ |
|||
zoom: 12, |
|||
center: [ |
|||
(nodesWithPosition[0].data.position?.longitudeI ?? 0) / 1e7, |
|||
(nodesWithPosition[0].data.position?.latitudeI ?? 0) / 1e7 |
|||
] |
|||
}); |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
getBBox(); |
|||
}, []); |
|||
|
|||
return ( |
|||
<div className="absolute right-0 top-0 z-10 m-2 "> |
|||
<div className="divide-y-2 divide-backgroundSecondary overflow-hidden rounded-md bg-backgroundPrimary text-textSecondary"> |
|||
<div |
|||
className="hover:bg-orange-200 cursor-pointer p-3 hover:text-accent" |
|||
onClick={() => { |
|||
map?.zoomIn(); |
|||
}} |
|||
> |
|||
<MagnifyingGlassPlusIcon className="h-4 w-4" /> |
|||
</div> |
|||
<div |
|||
className="hover:bg-orange-200 cursor-pointer p-3 hover:text-accent" |
|||
onClick={() => { |
|||
map?.zoomOut(); |
|||
}} |
|||
> |
|||
<MagnifyingGlassMinusIcon className="h-4 w-4" /> |
|||
</div> |
|||
<div |
|||
className="hover:bg-orange-200 cursor-pointer p-3 hover:text-accent" |
|||
onClick={() => getBBox()} |
|||
> |
|||
<ShareIcon className="h-4 w-4" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
@ -0,0 +1,44 @@ |
|||
import { LucideIcon, AlignLeftIcon } from "lucide-react"; |
|||
|
|||
export interface PageLayoutProps { |
|||
title: string; |
|||
children: React.ReactNode; |
|||
actions?: { |
|||
icon: LucideIcon; |
|||
onClick: () => void; |
|||
}[]; |
|||
} |
|||
|
|||
export const PageLayout = ({ |
|||
title, |
|||
actions, |
|||
children |
|||
}: PageLayoutProps): JSX.Element => { |
|||
return ( |
|||
<div className="relative flex h-full w-full flex-col"> |
|||
<div className="flex h-14 shrink-0 border-b-[0.5px] md:h-16 md:px-4"> |
|||
<button className="pl-4 transition-all hover:text-accent md:hidden"> |
|||
<AlignLeftIcon /> |
|||
</button> |
|||
<div className="flex flex-1 items-center justify-between px-4 md:px-0"> |
|||
<div className="flex w-full items-center"> |
|||
<span className="text-palette-800 w-full text-lg font-medium"> |
|||
{title} |
|||
</span> |
|||
<div className="flex justify-end space-x-4"> |
|||
{actions?.map((action) => ( |
|||
<button |
|||
className="transition-all hover:text-accent" |
|||
onClick={() => action.onClick()} |
|||
> |
|||
<action.icon /> |
|||
</button> |
|||
))} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
{children} |
|||
</div> |
|||
); |
|||
}; |
|||
@ -0,0 +1,53 @@ |
|||
import * as React from "react"; |
|||
import { VariantProps, cva } from "class-variance-authority"; |
|||
|
|||
import { cn } from "@core/utils/cn.js"; |
|||
|
|||
const buttonVariants = cva( |
|||
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800", |
|||
{ |
|||
variants: { |
|||
variant: { |
|||
default: |
|||
"bg-slate-900 text-white hover:bg-slate-700 dark:bg-slate-50 dark:text-slate-900", |
|||
destructive: |
|||
"bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600", |
|||
outline: |
|||
"bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-100", |
|||
subtle: |
|||
"bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100", |
|||
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", |
|||
link: "bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent" |
|||
}, |
|||
size: { |
|||
default: "h-10 py-2 px-4", |
|||
sm: "h-9 px-2 rounded-md", |
|||
lg: "h-11 px-8 rounded-md" |
|||
} |
|||
}, |
|||
defaultVariants: { |
|||
variant: "default", |
|||
size: "default" |
|||
} |
|||
} |
|||
); |
|||
|
|||
export interface ButtonProps |
|||
extends React.ButtonHTMLAttributes<HTMLButtonElement>, |
|||
VariantProps<typeof buttonVariants> {} |
|||
|
|||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( |
|||
({ className, variant, size, ...props }, ref) => { |
|||
return ( |
|||
<button |
|||
className={cn(buttonVariants({ variant, size, className }))} |
|||
ref={ref} |
|||
{...props} |
|||
/> |
|||
); |
|||
} |
|||
); |
|||
Button.displayName = "Button"; |
|||
|
|||
export { Button, buttonVariants }; |
|||
@ -0,0 +1,128 @@ |
|||
import * as React from "react"; |
|||
import * as DialogPrimitive from "@radix-ui/react-dialog"; |
|||
import { X } from "lucide-react"; |
|||
|
|||
import { cn } from "@core/utils/cn.js"; |
|||
|
|||
const Dialog = DialogPrimitive.Root; |
|||
|
|||
const DialogTrigger = DialogPrimitive.Trigger; |
|||
|
|||
const DialogPortal = ({ |
|||
className, |
|||
children, |
|||
...props |
|||
}: DialogPrimitive.DialogPortalProps) => ( |
|||
<DialogPrimitive.Portal className={cn(className)} {...props}> |
|||
<div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center"> |
|||
{children} |
|||
</div> |
|||
</DialogPrimitive.Portal> |
|||
); |
|||
DialogPortal.displayName = DialogPrimitive.Portal.displayName; |
|||
|
|||
const DialogOverlay = React.forwardRef< |
|||
React.ElementRef<typeof DialogPrimitive.Overlay>, |
|||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> |
|||
>(({ className, children, ...props }, ref) => ( |
|||
<DialogPrimitive.Overlay |
|||
className={cn( |
|||
"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity animate-in fade-in", |
|||
className |
|||
)} |
|||
{...props} |
|||
ref={ref} |
|||
/> |
|||
)); |
|||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; |
|||
|
|||
const DialogContent = React.forwardRef< |
|||
React.ElementRef<typeof DialogPrimitive.Content>, |
|||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> |
|||
>(({ className, children, ...props }, ref) => ( |
|||
<DialogPortal> |
|||
<DialogOverlay /> |
|||
<DialogPrimitive.Content |
|||
ref={ref} |
|||
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", |
|||
"dark:bg-slate-900", |
|||
className |
|||
)} |
|||
{...props} |
|||
> |
|||
{children} |
|||
<DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=open]:bg-slate-800"> |
|||
<X className="h-4 w-4" /> |
|||
<span className="sr-only">Close</span> |
|||
</DialogPrimitive.Close> |
|||
</DialogPrimitive.Content> |
|||
</DialogPortal> |
|||
)); |
|||
DialogContent.displayName = DialogPrimitive.Content.displayName; |
|||
|
|||
const DialogHeader = ({ |
|||
className, |
|||
...props |
|||
}: React.HTMLAttributes<HTMLDivElement>) => ( |
|||
<div |
|||
className={cn( |
|||
"flex flex-col space-y-2 text-center sm:text-left", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
); |
|||
DialogHeader.displayName = "DialogHeader"; |
|||
|
|||
const DialogFooter = ({ |
|||
className, |
|||
...props |
|||
}: React.HTMLAttributes<HTMLDivElement>) => ( |
|||
<div |
|||
className={cn( |
|||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
); |
|||
DialogFooter.displayName = "DialogFooter"; |
|||
|
|||
const DialogTitle = React.forwardRef< |
|||
React.ElementRef<typeof DialogPrimitive.Title>, |
|||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> |
|||
>(({ className, ...props }, ref) => ( |
|||
<DialogPrimitive.Title |
|||
ref={ref} |
|||
className={cn( |
|||
"text-lg font-semibold text-slate-900", |
|||
"dark:text-slate-50", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
)); |
|||
DialogTitle.displayName = DialogPrimitive.Title.displayName; |
|||
|
|||
const DialogDescription = React.forwardRef< |
|||
React.ElementRef<typeof DialogPrimitive.Description>, |
|||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> |
|||
>(({ className, ...props }, ref) => ( |
|||
<DialogPrimitive.Description |
|||
ref={ref} |
|||
className={cn("text-sm text-slate-500", "dark:text-slate-400", className)} |
|||
{...props} |
|||
/> |
|||
)); |
|||
DialogDescription.displayName = DialogPrimitive.Description.displayName; |
|||
|
|||
export { |
|||
Dialog, |
|||
DialogTrigger, |
|||
DialogContent, |
|||
DialogHeader, |
|||
DialogFooter, |
|||
DialogTitle, |
|||
DialogDescription |
|||
}; |
|||
@ -0,0 +1,21 @@ |
|||
import * as React from "react"; |
|||
import * as LabelPrimitive from "@radix-ui/react-label"; |
|||
|
|||
import { cn } from "@core/utils/cn.js"; |
|||
|
|||
const Label = React.forwardRef< |
|||
React.ElementRef<typeof LabelPrimitive.Root>, |
|||
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> |
|||
>(({ className, ...props }, ref) => ( |
|||
<LabelPrimitive.Root |
|||
ref={ref} |
|||
className={cn( |
|||
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
)); |
|||
Label.displayName = LabelPrimitive.Root.displayName; |
|||
|
|||
export { Label }; |
|||
@ -0,0 +1,234 @@ |
|||
import * as React from "react"; |
|||
import * as MenubarPrimitive from "@radix-ui/react-menubar"; |
|||
import { Check, ChevronRight, Circle } from "lucide-react"; |
|||
|
|||
import { cn } from "@core/utils/cn.js"; |
|||
|
|||
const MenubarMenu = MenubarPrimitive.Menu; |
|||
|
|||
const MenubarGroup = MenubarPrimitive.Group; |
|||
|
|||
const MenubarPortal = MenubarPrimitive.Portal; |
|||
|
|||
const MenubarSub = MenubarPrimitive.Sub; |
|||
|
|||
const MenubarRadioGroup = MenubarPrimitive.RadioGroup; |
|||
|
|||
const Menubar = React.forwardRef< |
|||
React.ElementRef<typeof MenubarPrimitive.Root>, |
|||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root> |
|||
>(({ className, ...props }, ref) => ( |
|||
<MenubarPrimitive.Root |
|||
ref={ref} |
|||
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", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
)); |
|||
Menubar.displayName = MenubarPrimitive.Root.displayName; |
|||
|
|||
const MenubarTrigger = React.forwardRef< |
|||
React.ElementRef<typeof MenubarPrimitive.Trigger>, |
|||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger> |
|||
>(({ className, ...props }, ref) => ( |
|||
<MenubarPrimitive.Trigger |
|||
ref={ref} |
|||
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", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
)); |
|||
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName; |
|||
|
|||
const MenubarSubTrigger = React.forwardRef< |
|||
React.ElementRef<typeof MenubarPrimitive.SubTrigger>, |
|||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & { |
|||
inset?: boolean; |
|||
} |
|||
>(({ className, inset, children, ...props }, ref) => ( |
|||
<MenubarPrimitive.SubTrigger |
|||
ref={ref} |
|||
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", |
|||
inset && "pl-8", |
|||
className |
|||
)} |
|||
{...props} |
|||
> |
|||
{children} |
|||
<ChevronRight className="ml-auto h-4 w-4" /> |
|||
</MenubarPrimitive.SubTrigger> |
|||
)); |
|||
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName; |
|||
|
|||
const MenubarSubContent = React.forwardRef< |
|||
React.ElementRef<typeof MenubarPrimitive.SubContent>, |
|||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent> |
|||
>(({ className, ...props }, ref) => ( |
|||
<MenubarPrimitive.SubContent |
|||
ref={ref} |
|||
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", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
)); |
|||
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName; |
|||
|
|||
const MenubarContent = React.forwardRef< |
|||
React.ElementRef<typeof MenubarPrimitive.Content>, |
|||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> |
|||
>( |
|||
( |
|||
{ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, |
|||
ref |
|||
) => ( |
|||
<MenubarPrimitive.Portal> |
|||
<MenubarPrimitive.Content |
|||
ref={ref} |
|||
align={align} |
|||
alignOffset={alignOffset} |
|||
sideOffset={sideOffset} |
|||
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", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
</MenubarPrimitive.Portal> |
|||
) |
|||
); |
|||
MenubarContent.displayName = MenubarPrimitive.Content.displayName; |
|||
|
|||
const MenubarItem = React.forwardRef< |
|||
React.ElementRef<typeof MenubarPrimitive.Item>, |
|||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & { |
|||
inset?: boolean; |
|||
} |
|||
>(({ className, inset, ...props }, ref) => ( |
|||
<MenubarPrimitive.Item |
|||
ref={ref} |
|||
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", |
|||
inset && "pl-8", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
)); |
|||
MenubarItem.displayName = MenubarPrimitive.Item.displayName; |
|||
|
|||
const MenubarCheckboxItem = React.forwardRef< |
|||
React.ElementRef<typeof MenubarPrimitive.CheckboxItem>, |
|||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem> |
|||
>(({ className, children, checked, ...props }, ref) => ( |
|||
<MenubarPrimitive.CheckboxItem |
|||
ref={ref} |
|||
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", |
|||
className |
|||
)} |
|||
checked={checked} |
|||
{...props} |
|||
> |
|||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> |
|||
<MenubarPrimitive.ItemIndicator> |
|||
<Check className="h-4 w-4" /> |
|||
</MenubarPrimitive.ItemIndicator> |
|||
</span> |
|||
{children} |
|||
</MenubarPrimitive.CheckboxItem> |
|||
)); |
|||
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName; |
|||
|
|||
const MenubarRadioItem = React.forwardRef< |
|||
React.ElementRef<typeof MenubarPrimitive.RadioItem>, |
|||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem> |
|||
>(({ className, children, ...props }, ref) => ( |
|||
<MenubarPrimitive.RadioItem |
|||
ref={ref} |
|||
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", |
|||
className |
|||
)} |
|||
{...props} |
|||
> |
|||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> |
|||
<MenubarPrimitive.ItemIndicator> |
|||
<Circle className="h-2 w-2 fill-current" /> |
|||
</MenubarPrimitive.ItemIndicator> |
|||
</span> |
|||
{children} |
|||
</MenubarPrimitive.RadioItem> |
|||
)); |
|||
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName; |
|||
|
|||
const MenubarLabel = React.forwardRef< |
|||
React.ElementRef<typeof MenubarPrimitive.Label>, |
|||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & { |
|||
inset?: boolean; |
|||
} |
|||
>(({ className, inset, ...props }, ref) => ( |
|||
<MenubarPrimitive.Label |
|||
ref={ref} |
|||
className={cn( |
|||
"px-2 py-1.5 text-sm font-semibold text-slate-900 dark:text-slate-300", |
|||
inset && "pl-8", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
)); |
|||
MenubarLabel.displayName = MenubarPrimitive.Label.displayName; |
|||
|
|||
const MenubarSeparator = React.forwardRef< |
|||
React.ElementRef<typeof MenubarPrimitive.Separator>, |
|||
React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator> |
|||
>(({ className, ...props }, ref) => ( |
|||
<MenubarPrimitive.Separator |
|||
ref={ref} |
|||
className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-700", className)} |
|||
{...props} |
|||
/> |
|||
)); |
|||
MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName; |
|||
|
|||
const MenubarShortcut = ({ |
|||
className, |
|||
...props |
|||
}: React.HTMLAttributes<HTMLSpanElement>) => { |
|||
return ( |
|||
<span |
|||
className={cn( |
|||
"ml-auto text-xs tracking-widest text-slate-500", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
); |
|||
}; |
|||
MenubarShortcut.displayname = "MenubarShortcut"; |
|||
|
|||
export { |
|||
Menubar, |
|||
MenubarMenu, |
|||
MenubarTrigger, |
|||
MenubarContent, |
|||
MenubarItem, |
|||
MenubarSeparator, |
|||
MenubarLabel, |
|||
MenubarCheckboxItem, |
|||
MenubarRadioGroup, |
|||
MenubarRadioItem, |
|||
MenubarPortal, |
|||
MenubarSubContent, |
|||
MenubarSubTrigger, |
|||
MenubarGroup, |
|||
MenubarSub, |
|||
MenubarShortcut |
|||
}; |
|||
@ -0,0 +1,29 @@ |
|||
import * as React from "react"; |
|||
import * as PopoverPrimitive from "@radix-ui/react-popover"; |
|||
|
|||
import { cn } from "@core/utils/cn.js"; |
|||
|
|||
const Popover = PopoverPrimitive.Root; |
|||
|
|||
const PopoverTrigger = PopoverPrimitive.Trigger; |
|||
|
|||
const PopoverContent = React.forwardRef< |
|||
React.ElementRef<typeof PopoverPrimitive.Content>, |
|||
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> |
|||
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( |
|||
<PopoverPrimitive.Portal> |
|||
<PopoverPrimitive.Content |
|||
ref={ref} |
|||
align={align} |
|||
sideOffset={sideOffset} |
|||
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", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
</PopoverPrimitive.Portal> |
|||
)); |
|||
PopoverContent.displayName = PopoverPrimitive.Content.displayName; |
|||
|
|||
export { Popover, PopoverTrigger, PopoverContent }; |
|||
@ -0,0 +1,111 @@ |
|||
import * as React from "react"; |
|||
import * as SelectPrimitive from "@radix-ui/react-select"; |
|||
import { Check, ChevronDown } from "lucide-react"; |
|||
|
|||
import { cn } from "@core/utils/cn.js"; |
|||
|
|||
const Select = SelectPrimitive.Root; |
|||
|
|||
const SelectGroup = SelectPrimitive.Group; |
|||
|
|||
const SelectValue = SelectPrimitive.Value; |
|||
|
|||
const SelectTrigger = React.forwardRef< |
|||
React.ElementRef<typeof SelectPrimitive.Trigger>, |
|||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> |
|||
>(({ className, children, ...props }, ref) => ( |
|||
<SelectPrimitive.Trigger |
|||
ref={ref} |
|||
className={cn( |
|||
"border-slate-300 placeholder:text-slate-400 focus:ring-slate-400 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 bg-transparent py-2 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", |
|||
className |
|||
)} |
|||
{...props} |
|||
> |
|||
{children} |
|||
<ChevronDown className="h-4 w-4 opacity-50" /> |
|||
</SelectPrimitive.Trigger> |
|||
)); |
|||
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; |
|||
|
|||
const SelectContent = React.forwardRef< |
|||
React.ElementRef<typeof SelectPrimitive.Content>, |
|||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> |
|||
>(({ className, children, ...props }, ref) => ( |
|||
<SelectPrimitive.Portal> |
|||
<SelectPrimitive.Content |
|||
ref={ref} |
|||
className={cn( |
|||
"border-slate-100 bg-white text-slate-700 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400 relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md animate-in fade-in-80", |
|||
className |
|||
)} |
|||
{...props} |
|||
> |
|||
<SelectPrimitive.Viewport className="p-1"> |
|||
{children} |
|||
</SelectPrimitive.Viewport> |
|||
</SelectPrimitive.Content> |
|||
</SelectPrimitive.Portal> |
|||
)); |
|||
SelectContent.displayName = SelectPrimitive.Content.displayName; |
|||
|
|||
const SelectLabel = React.forwardRef< |
|||
React.ElementRef<typeof SelectPrimitive.Label>, |
|||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> |
|||
>(({ className, ...props }, ref) => ( |
|||
<SelectPrimitive.Label |
|||
ref={ref} |
|||
className={cn( |
|||
"text-slate-900 dark:text-slate-300 py-1.5 pr-2 pl-8 text-sm font-semibold", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
)); |
|||
SelectLabel.displayName = SelectPrimitive.Label.displayName; |
|||
|
|||
const SelectItem = React.forwardRef< |
|||
React.ElementRef<typeof SelectPrimitive.Item>, |
|||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> |
|||
>(({ className, children, ...props }, ref) => ( |
|||
<SelectPrimitive.Item |
|||
ref={ref} |
|||
className={cn( |
|||
"focus:bg-slate-100 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 data-[disabled]:pointer-events-none data-[disabled]:opacity-50", |
|||
className |
|||
)} |
|||
{...props} |
|||
> |
|||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> |
|||
<SelectPrimitive.ItemIndicator> |
|||
<Check className="h-4 w-4" /> |
|||
</SelectPrimitive.ItemIndicator> |
|||
</span> |
|||
|
|||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> |
|||
</SelectPrimitive.Item> |
|||
)); |
|||
SelectItem.displayName = SelectPrimitive.Item.displayName; |
|||
|
|||
const SelectSeparator = React.forwardRef< |
|||
React.ElementRef<typeof SelectPrimitive.Separator>, |
|||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> |
|||
>(({ className, ...props }, ref) => ( |
|||
<SelectPrimitive.Separator |
|||
ref={ref} |
|||
className={cn("bg-slate-100 dark:bg-slate-700 -mx-1 my-1 h-px", className)} |
|||
{...props} |
|||
/> |
|||
)); |
|||
SelectSeparator.displayName = SelectPrimitive.Separator.displayName; |
|||
|
|||
export { |
|||
Select, |
|||
SelectGroup, |
|||
SelectValue, |
|||
SelectTrigger, |
|||
SelectContent, |
|||
SelectLabel, |
|||
SelectItem, |
|||
SelectSeparator |
|||
}; |
|||
@ -0,0 +1,29 @@ |
|||
import * as React from "react"; |
|||
import * as SeparatorPrimitive from "@radix-ui/react-separator"; |
|||
|
|||
import { cn } from "@core/utils/cn.js"; |
|||
|
|||
const Separator = React.forwardRef< |
|||
React.ElementRef<typeof SeparatorPrimitive.Root>, |
|||
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> |
|||
>( |
|||
( |
|||
{ className, orientation = "horizontal", decorative = true, ...props }, |
|||
ref |
|||
) => ( |
|||
<SeparatorPrimitive.Root |
|||
ref={ref} |
|||
decorative={decorative} |
|||
orientation={orientation} |
|||
className={cn( |
|||
"bg-slate-200 dark:bg-slate-700", |
|||
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
) |
|||
); |
|||
Separator.displayName = SeparatorPrimitive.Root.displayName; |
|||
|
|||
export { Separator }; |
|||
@ -0,0 +1,30 @@ |
|||
import { cn } from "@app/core/utils/cn.js"; |
|||
import type { LucideIcon } from "lucide-react"; |
|||
|
|||
export interface SidebarItemProps { |
|||
icon?: LucideIcon; |
|||
element?: JSX.Element; |
|||
onClick?: () => void; |
|||
active?: boolean; |
|||
label: string; |
|||
} |
|||
|
|||
export const SidebarItem = ({ |
|||
icon: Icon, |
|||
element, |
|||
onClick, |
|||
active, |
|||
label |
|||
}: SidebarItemProps): JSX.Element => ( |
|||
<button |
|||
className={cn( |
|||
"text-palette-600 flex w-full cursor-pointer items-center space-x-2.5 rounded-xl bg-transparent px-2.5 py-2.5 transition-all duration-300 hover:text-accent", |
|||
active && "bg-backgroundPrimary text-accent" |
|||
)} |
|||
onClick={() => onClick && onClick()} |
|||
> |
|||
{element} |
|||
{Icon && <Icon size={16} />} |
|||
<span className="align-middle font-mono text-sm">{label}</span> |
|||
</button> |
|||
); |
|||
@ -0,0 +1,32 @@ |
|||
import type { LucideIcon } from "lucide-react"; |
|||
|
|||
export interface SidebarSectionProps { |
|||
title: string; |
|||
action?: { |
|||
icon: LucideIcon; |
|||
onClick: () => void; |
|||
}; |
|||
subheader?: string; |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
export const SidebarSection = ({ |
|||
title, |
|||
action, |
|||
children |
|||
}: SidebarSectionProps): JSX.Element => ( |
|||
<div className="space-y-1.5"> |
|||
<div className="mb-2 flex items-center justify-between px-2"> |
|||
<div className="font-medium">{title}</div> |
|||
{action && ( |
|||
<button |
|||
className="transition-all duration-300 hover:text-accent" |
|||
onClick={() => action.onClick} |
|||
> |
|||
<action.icon size={16} /> |
|||
</button> |
|||
)} |
|||
</div> |
|||
<ul className="space-y-1">{children}</ul> |
|||
</div> |
|||
); |
|||
@ -0,0 +1,27 @@ |
|||
import * as React from "react"; |
|||
import * as SwitchPrimitives from "@radix-ui/react-switch"; |
|||
|
|||
import { cn } from "@core/utils/cn.js"; |
|||
|
|||
const Switch = React.forwardRef< |
|||
React.ElementRef<typeof SwitchPrimitives.Root>, |
|||
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> |
|||
>(({ className, ...props }, ref) => ( |
|||
<SwitchPrimitives.Root |
|||
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", |
|||
className |
|||
)} |
|||
{...props} |
|||
ref={ref} |
|||
> |
|||
<SwitchPrimitives.Thumb |
|||
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" |
|||
)} |
|||
/> |
|||
</SwitchPrimitives.Root> |
|||
)); |
|||
Switch.displayName = SwitchPrimitives.Root.displayName; |
|||
|
|||
export { Switch }; |
|||
@ -0,0 +1,53 @@ |
|||
import * as React from "react"; |
|||
import * as TabsPrimitive from "@radix-ui/react-tabs"; |
|||
|
|||
import { cn } from "@core/utils/cn.js"; |
|||
|
|||
const Tabs = TabsPrimitive.Root; |
|||
|
|||
const TabsList = React.forwardRef< |
|||
React.ElementRef<typeof TabsPrimitive.List>, |
|||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> |
|||
>(({ className, ...props }, ref) => ( |
|||
<TabsPrimitive.List |
|||
ref={ref} |
|||
className={cn( |
|||
"inline-flex items-center justify-center rounded-md bg-slate-100 p-1 dark:bg-slate-800", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
)); |
|||
TabsList.displayName = TabsPrimitive.List.displayName; |
|||
|
|||
const TabsTrigger = React.forwardRef< |
|||
React.ElementRef<typeof TabsPrimitive.Trigger>, |
|||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> |
|||
>(({ className, ...props }, ref) => ( |
|||
<TabsPrimitive.Trigger |
|||
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", |
|||
className |
|||
)} |
|||
{...props} |
|||
ref={ref} |
|||
/> |
|||
)); |
|||
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName; |
|||
|
|||
const TabsContent = React.forwardRef< |
|||
React.ElementRef<typeof TabsPrimitive.Content>, |
|||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> |
|||
>(({ className, ...props }, ref) => ( |
|||
<TabsPrimitive.Content |
|||
className={cn( |
|||
"mt-2 rounded-md border border-slate-200 p-6 dark:border-slate-700", |
|||
className |
|||
)} |
|||
{...props} |
|||
ref={ref} |
|||
/> |
|||
)); |
|||
TabsContent.displayName = TabsPrimitive.Content.displayName; |
|||
|
|||
export { Tabs, TabsList, TabsTrigger, TabsContent }; |
|||
@ -0,0 +1,128 @@ |
|||
import * as React from "react"; |
|||
import * as ToastPrimitives from "@radix-ui/react-toast"; |
|||
import { VariantProps, cva } from "class-variance-authority"; |
|||
import { X } from "lucide-react"; |
|||
|
|||
import { cn } from "@core/utils/cn.js"; |
|||
import { buttonVariants } from "./Button.js"; |
|||
|
|||
const ToastProvider = ToastPrimitives.Provider; |
|||
|
|||
const ToastViewport = React.forwardRef< |
|||
React.ElementRef<typeof ToastPrimitives.Viewport>, |
|||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> |
|||
>(({ className, ...props }, ref) => ( |
|||
<ToastPrimitives.Viewport |
|||
ref={ref} |
|||
className={cn( |
|||
"fixed bottom-6 right-6 z-50 max-h-screen w-full space-y-3 md:max-w-[400px]", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
)); |
|||
ToastViewport.displayName = ToastPrimitives.Viewport.displayName; |
|||
|
|||
const toastVariants = cva( |
|||
"data-[swipe=move]:transition-none grow-1 group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full dark:border-slate-700", |
|||
{ |
|||
variants: { |
|||
status: { |
|||
default: |
|||
"bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700", |
|||
destructive: "bg-red-500 text-white border-red-500" |
|||
} |
|||
}, |
|||
defaultVariants: { |
|||
status: "default" |
|||
} |
|||
} |
|||
); |
|||
|
|||
const Toast = React.forwardRef< |
|||
React.ElementRef<typeof ToastPrimitives.Root>, |
|||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & |
|||
VariantProps<typeof toastVariants> |
|||
>(({ className, status, ...props }, ref) => { |
|||
return ( |
|||
<ToastPrimitives.Root |
|||
ref={ref} |
|||
className={cn(toastVariants({ status }), className)} |
|||
{...props} |
|||
/> |
|||
); |
|||
}); |
|||
Toast.displayName = ToastPrimitives.Root.displayName; |
|||
|
|||
const ToastAction = React.forwardRef< |
|||
React.ElementRef<typeof ToastPrimitives.Action>, |
|||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> |
|||
>(({ className, ...props }, ref) => ( |
|||
<ToastPrimitives.Action |
|||
ref={ref} |
|||
className={cn( |
|||
buttonVariants({ size: "sm", variant: "outline" }), |
|||
"h-8 shrink-0 px-3", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
)); |
|||
ToastAction.displayName = ToastPrimitives.Action.displayName; |
|||
|
|||
const ToastClose = React.forwardRef< |
|||
React.ElementRef<typeof ToastPrimitives.Close>, |
|||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> |
|||
>(({ className, ...props }, ref) => ( |
|||
<ToastPrimitives.Close |
|||
ref={ref} |
|||
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 group-hover:opacity-100 dark:hover:text-slate-50", |
|||
className |
|||
)} |
|||
{...props} |
|||
> |
|||
<X className="h-4 w-4" /> |
|||
</ToastPrimitives.Close> |
|||
)); |
|||
ToastClose.displayName = ToastPrimitives.Close.displayName; |
|||
|
|||
const ToastTitle = React.forwardRef< |
|||
React.ElementRef<typeof ToastPrimitives.Title>, |
|||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> |
|||
>(({ className, ...props }, ref) => ( |
|||
<ToastPrimitives.Title |
|||
ref={ref} |
|||
className={cn("text-sm font-semibold", className)} |
|||
{...props} |
|||
/> |
|||
)); |
|||
ToastTitle.displayName = ToastPrimitives.Title.displayName; |
|||
|
|||
const ToastDescription = React.forwardRef< |
|||
React.ElementRef<typeof ToastPrimitives.Description>, |
|||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> |
|||
>(({ className, ...props }, ref) => ( |
|||
<ToastPrimitives.Description |
|||
ref={ref} |
|||
className={cn("text-sm opacity-90", className)} |
|||
{...props} |
|||
/> |
|||
)); |
|||
ToastDescription.displayName = ToastPrimitives.Description.displayName; |
|||
|
|||
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>; |
|||
|
|||
type ToastActionElement = React.ReactElement<typeof ToastAction>; |
|||
|
|||
export { |
|||
type ToastProps, |
|||
type ToastActionElement, |
|||
ToastProvider, |
|||
ToastViewport, |
|||
Toast, |
|||
ToastTitle, |
|||
ToastDescription, |
|||
ToastClose, |
|||
ToastAction |
|||
}; |
|||
@ -0,0 +1,29 @@ |
|||
import * as React from "react"; |
|||
import * as TooltipPrimitive from "@radix-ui/react-tooltip"; |
|||
|
|||
import { cn } from "@core/utils/cn.js"; |
|||
|
|||
const TooltipProvider = TooltipPrimitive.Provider; |
|||
|
|||
const Tooltip = ({ ...props }) => <TooltipPrimitive.Root {...props} />; |
|||
Tooltip.displayName = TooltipPrimitive.Tooltip.displayName; |
|||
|
|||
const TooltipTrigger = TooltipPrimitive.Trigger; |
|||
|
|||
const TooltipContent = React.forwardRef< |
|||
React.ElementRef<typeof TooltipPrimitive.Content>, |
|||
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> |
|||
>(({ className, sideOffset = 4, ...props }, ref) => ( |
|||
<TooltipPrimitive.Content |
|||
ref={ref} |
|||
sideOffset={sideOffset} |
|||
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", |
|||
className |
|||
)} |
|||
{...props} |
|||
/> |
|||
)); |
|||
TooltipContent.displayName = TooltipPrimitive.Content.displayName; |
|||
|
|||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }; |
|||
@ -0,0 +1,9 @@ |
|||
export interface BlockquoteProps { |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
export const BlockQuote = ({ children }: BlockquoteProps): JSX.Element => ( |
|||
<blockquote className="mt-6 border-l-2 border-slate-300 pl-6 italic text-slate-800 dark:border-slate-600 dark:text-slate-200"> |
|||
{children} |
|||
</blockquote> |
|||
); |
|||
@ -0,0 +1,9 @@ |
|||
export interface CodeProps { |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
export const Code = ({ children }: CodeProps): JSX.Element => ( |
|||
<code className="relative rounded bg-slate-100 py-[0.2rem] px-[0.3rem] font-mono text-sm font-semibold text-slate-900 dark:bg-slate-800 dark:text-slate-400"> |
|||
{children} |
|||
</code> |
|||
); |
|||
@ -0,0 +1,9 @@ |
|||
export interface H1Props { |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
export const H1 = ({ children }: H1Props): JSX.Element => ( |
|||
<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"> |
|||
{children} |
|||
</h1> |
|||
); |
|||
@ -0,0 +1,9 @@ |
|||
export interface H2Props { |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
export const H2 = ({ children }: H2Props): JSX.Element => ( |
|||
<h2 className="mt-10 scroll-m-20 border-b border-b-slate-200 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0 dark:border-b-slate-700"> |
|||
{children} |
|||
</h2> |
|||
); |
|||
@ -0,0 +1,9 @@ |
|||
export interface H3Props { |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
export const H3 = ({ children }: H3Props): JSX.Element => ( |
|||
<h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight"> |
|||
{children} |
|||
</h3> |
|||
); |
|||
@ -0,0 +1,9 @@ |
|||
export interface H4Props { |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
export const H4 = ({ children }: H4Props): JSX.Element => ( |
|||
<h4 className="mt-8 scroll-m-20 text-xl font-semibold tracking-tight"> |
|||
{children} |
|||
</h4> |
|||
); |
|||
@ -0,0 +1,15 @@ |
|||
export interface LinkProps { |
|||
href: string; |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
export const Link = ({ href, children }: LinkProps): JSX.Element => ( |
|||
<a |
|||
href={href} |
|||
target={"_blank"} |
|||
rel="noopener noreferrer" |
|||
className="font-medium text-slate-900 underline underline-offset-4 dark:text-slate-50" |
|||
> |
|||
{children} |
|||
</a> |
|||
); |
|||
@ -0,0 +1,7 @@ |
|||
export interface PProps { |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
export const P = ({ children }: PProps): JSX.Element => ( |
|||
<p className="leading-7 [&:not(:first-child)]:mt-6">{children}</p> |
|||
); |
|||
@ -0,0 +1,7 @@ |
|||
export interface SubtleProps { |
|||
children: React.ReactNode; |
|||
} |
|||
|
|||
export const Subtle = ({ children }: SubtleProps): JSX.Element => ( |
|||
<p className="text-sm text-slate-500 dark:text-slate-400">{children}</p> |
|||
); |
|||
@ -1,77 +0,0 @@ |
|||
import { useEffect, useState } from "react"; |
|||
import prettyMilliseconds from "pretty-ms"; |
|||
import { useDevice } from "@core/providers/useDevice.js"; |
|||
import { Battery100Icon, ClockIcon } from "@heroicons/react/24/outline"; |
|||
|
|||
export interface BatteryWidgetProps { |
|||
batteryLevel: number; |
|||
voltage: number; |
|||
} |
|||
|
|||
export const BatteryWidget = ({ |
|||
batteryLevel, |
|||
voltage |
|||
}: BatteryWidgetProps): JSX.Element => { |
|||
const { nodes, hardware } = useDevice(); |
|||
|
|||
const [timeRemaining, setTimeRemaining] = useState("Unknown"); |
|||
|
|||
useEffect(() => { |
|||
const stats = nodes.find( |
|||
(n) => n.data.num === hardware.myNodeNum |
|||
)?.deviceMetrics; |
|||
|
|||
if (stats) { |
|||
let currentStat: number | undefined = undefined; |
|||
let currentTime = new Date(); |
|||
let previousStat: number | undefined = undefined; |
|||
let previousTime = new Date(); |
|||
for (const stat of [...stats].reverse()) { |
|||
if (stat.metric.batteryLevel) { |
|||
if (!currentStat) { |
|||
currentStat = stat.metric.batteryLevel; |
|||
currentTime = stat.timestamp; |
|||
} else { |
|||
previousStat = stat.metric.batteryLevel; |
|||
previousTime = stat.timestamp; |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
|
|||
if (currentStat && previousStat) { |
|||
const timeDiff = currentTime.getTime() - previousTime.getTime(); |
|||
const statDiff = Math.abs(currentStat - previousStat); |
|||
if (statDiff !== 0) { |
|||
//convert to ms/%
|
|||
const msPerPercent = timeDiff / statDiff; |
|||
const formatted = prettyMilliseconds( |
|||
(100 - currentStat) * msPerPercent |
|||
); |
|||
setTimeRemaining(formatted); |
|||
} |
|||
} else setTimeRemaining("Unknown"); |
|||
} |
|||
}, [hardware.myNodeNum, nodes]); |
|||
|
|||
return ( |
|||
<div className="flex gap-3 overflow-hidden rounded-lg bg-backgroundPrimary p-3 text-textSecondary"> |
|||
<div className="rounded-md bg-accent p-3 text-textPrimary"> |
|||
<Battery100Icon className="h-6" /> |
|||
</div> |
|||
<div> |
|||
<p className="truncate text-sm font-medium">Battery State</p> |
|||
<div className="flex gap-1"> |
|||
<p className="text-xl font-semibold">{batteryLevel}%</p> |
|||
<div className="flex text-sm font-semibold"> |
|||
<ClockIcon |
|||
className="h-5 w-5 flex-shrink-0 self-center" |
|||
aria-hidden="true" |
|||
/> |
|||
<span className="my-auto">{timeRemaining}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
@ -1,39 +0,0 @@ |
|||
import { Button } from "@components/form/Button.js"; |
|||
import { Hashicon } from "@emeraldpay/hashicon-react"; |
|||
import { XCircleIcon } from "@heroicons/react/24/outline"; |
|||
|
|||
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 ( |
|||
<div className="relative flex shrink-0 flex-col overflow-hidden rounded-md text-sm text-textPrimary"> |
|||
<div className="flex bg-backgroundPrimary p-3"> |
|||
<div> |
|||
<Hashicon size={96} value={nodeNum} /> |
|||
</div> |
|||
<div className="flex w-full flex-col"> |
|||
<span className="ml-auto whitespace-nowrap text-xl font-bold"> |
|||
{name} |
|||
</span> |
|||
<div className="my-auto ml-auto"> |
|||
<Button onClick={disconnected ? reconnect : disconnect} size="sm"> |
|||
<span>{disconnected ? "Reconnect" : "Disconnect"}</span> |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
@ -1,44 +0,0 @@ |
|||
import { useDevice } from "@core/providers/useDevice.js"; |
|||
import { IconButton } from "@components/form/IconButton.js"; |
|||
import { Mono } from "@components/generic/Mono.js"; |
|||
import { |
|||
EllipsisHorizontalIcon, |
|||
UserGroupIcon |
|||
} from "@heroicons/react/24/outline"; |
|||
import type { Protobuf } from "@meshtastic/meshtasticjs"; |
|||
|
|||
export interface PeersWidgetProps { |
|||
peers: Protobuf.NodeInfo[]; |
|||
} |
|||
|
|||
export const PeersWidget = ({ peers }: PeersWidgetProps): JSX.Element => { |
|||
const { setActivePage } = useDevice(); |
|||
|
|||
return ( |
|||
<div className="flex gap-3 overflow-hidden rounded-lg bg-backgroundPrimary p-3 text-textSecondary"> |
|||
<div className="rounded-md bg-accent p-3"> |
|||
<UserGroupIcon className="h-6 text-textPrimary" /> |
|||
</div> |
|||
<div> |
|||
<p className="truncate text-sm font-medium">Peers</p> |
|||
<div className="flex gap-1"> |
|||
{peers.length > 0 ? ( |
|||
<p className="text-lg font-semibold"> |
|||
{`${peers.length} ${peers.length > 1 ? "Peers" : "Peer"}`} |
|||
</p> |
|||
) : ( |
|||
<Mono className="m-auto">None Discovered.</Mono> |
|||
)} |
|||
</div> |
|||
</div> |
|||
<IconButton |
|||
className="my-auto ml-auto" |
|||
size="sm" |
|||
onClick={() => { |
|||
setActivePage("peers"); |
|||
}} |
|||
icon={<EllipsisHorizontalIcon className="h-4" />} |
|||
/> |
|||
</div> |
|||
); |
|||
}; |
|||
@ -1,21 +0,0 @@ |
|||
import { MapPinIcon } from "@heroicons/react/24/outline"; |
|||
|
|||
export interface PositionWidgetProps { |
|||
grid: string; |
|||
} |
|||
|
|||
export const PositionWidget = ({ grid }: PositionWidgetProps): JSX.Element => { |
|||
return ( |
|||
<div className="flex gap-3 overflow-hidden rounded-lg bg-backgroundPrimary p-3 text-textSecondary"> |
|||
<div className="rounded-md bg-accent p-3 text-textPrimary"> |
|||
<MapPinIcon className="text-white h-6" /> |
|||
</div> |
|||
<div> |
|||
<p className="truncate text-sm font-medium">Current Location</p> |
|||
<div className="flex gap-1"> |
|||
<p className="text-lg font-semibold">{grid}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
@ -1,31 +0,0 @@ |
|||
import type { ButtonHTMLAttributes } from "react"; |
|||
|
|||
export interface IconButtonProps |
|||
extends ButtonHTMLAttributes<HTMLButtonElement> { |
|||
size?: "sm" | "md" | "lg"; |
|||
icon?: JSX.Element; |
|||
} |
|||
|
|||
export const IconButton = ({ |
|||
size = "md", |
|||
icon, |
|||
disabled, |
|||
className, |
|||
...rest |
|||
}: IconButtonProps): JSX.Element => { |
|||
return ( |
|||
<button |
|||
className={`flex rounded-md bg-accentMuted text-textPrimary hover:brightness-hover focus:outline-none active:brightness-press ${ |
|||
size === "sm" ? "h-8 w-8" : size === "md" ? "h-10 w-10" : "h-12 w-12" |
|||
} ${ |
|||
disabled |
|||
? "cursor-not-allowed text-textSecondary brightness-disabled hover:brightness-disabled" |
|||
: "" |
|||
} ${className ?? ""}`}
|
|||
disabled={disabled} |
|||
{...rest} |
|||
> |
|||
<div className="m-auto">{icon}</div> |
|||
</button> |
|||
); |
|||
}; |
|||
@ -1,48 +0,0 @@ |
|||
import { IconButton } from "@components/form/IconButton.js"; |
|||
import { Dialog as DialogUI } from "@headlessui/react"; |
|||
import { XMarkIcon } from "@heroicons/react/24/outline"; |
|||
import { ThemeController } from "@components/generic/ThemeController.js"; |
|||
import { Blur } from "@components/generic/Blur.js"; |
|||
import type { ReactNode } from "react"; |
|||
|
|||
export interface DialogProps { |
|||
title: string; |
|||
description: string; |
|||
isOpen: boolean; |
|||
close: () => void; |
|||
children: ReactNode; |
|||
} |
|||
|
|||
export const Dialog = ({ |
|||
title, |
|||
description, |
|||
isOpen, |
|||
close, |
|||
children |
|||
}: DialogProps): JSX.Element => { |
|||
return ( |
|||
<DialogUI open={isOpen} onClose={close}> |
|||
<ThemeController> |
|||
<Blur /> |
|||
<div className="fixed inset-0 flex items-center justify-center p-4"> |
|||
<DialogUI.Panel> |
|||
<div className="flex bg-backgroundPrimary px-4 py-5 sm:px-6"> |
|||
<div> |
|||
<h1 className="text-lg font-bold text-textPrimary">{title}</h1> |
|||
<h5 className="text-sm text-textSecondary">{description}</h5> |
|||
</div> |
|||
<IconButton |
|||
onClick={close} |
|||
className="my-auto ml-auto" |
|||
size="sm" |
|||
icon={<XMarkIcon className="h-4" />} |
|||
/> |
|||
</div> |
|||
|
|||
<div className="bg-backgroundSecondary p-4">{children}</div> |
|||
</DialogUI.Panel> |
|||
</div> |
|||
</ThemeController> |
|||
</DialogUI> |
|||
); |
|||
}; |
|||
@ -1,97 +0,0 @@ |
|||
import { Fragment } from "react"; |
|||
import { Mono } from "@components/generic/Mono"; |
|||
import { Tab } from "@headlessui/react"; |
|||
|
|||
export interface TabType { |
|||
label: string; |
|||
icon?: JSX.Element; |
|||
element: () => JSX.Element; |
|||
disabled?: boolean; |
|||
disabledMessage?: string; |
|||
disabledLink?: string; |
|||
} |
|||
|
|||
export interface TabbedCOntentAction { |
|||
icon: JSX.Element; |
|||
action: () => void; |
|||
} |
|||
|
|||
export interface TabbedContentProps { |
|||
tabs: TabType[]; |
|||
actions?: TabbedCOntentAction[]; |
|||
} |
|||
|
|||
export const TabbedContent = ({ |
|||
tabs, |
|||
actions |
|||
}: TabbedContentProps): JSX.Element => { |
|||
return ( |
|||
<Tab.Group as="div" className="flex flex-grow flex-col"> |
|||
<Tab.List className="flex bg-backgroundPrimary"> |
|||
{tabs.map((entry, index) => ( |
|||
<Tab key={index} disabled={entry.disabled}> |
|||
{({ selected }) => ( |
|||
<div |
|||
className={`flex h-10 gap-3 truncate border-b-4 px-3 text-sm font-medium ${ |
|||
selected |
|||
? "border-accent text-textPrimary" |
|||
: "border-backgroundPrimary text-textSecondary hover:text-textPrimary" |
|||
} ${ |
|||
entry.disabled |
|||
? "cursor-not-allowed hover:text-textSecondary" |
|||
: "cursor-pointer bg-backgroundPrimary hover:brightness-hover active:brightness-press" |
|||
} |
|||
`}
|
|||
> |
|||
{entry.icon && ( |
|||
<div className="text-slate-500 m-auto">{entry.icon}</div> |
|||
)} |
|||
<span className="m-auto">{entry.label}</span> |
|||
</div> |
|||
)} |
|||
</Tab> |
|||
))} |
|||
<div className="ml-auto flex"> |
|||
{actions?.map((action, index) => ( |
|||
<div |
|||
key={index} |
|||
className="my-auto cursor-pointer bg-backgroundPrimary p-3 text-textSecondary hover:brightness-hover active:brightness-press" |
|||
onClick={action.action} |
|||
> |
|||
{action.icon} |
|||
</div> |
|||
))} |
|||
</div> |
|||
</Tab.List> |
|||
<Tab.Panels as={Fragment}> |
|||
{tabs.map((entry, index) => ( |
|||
<Tab.Panel key={index} className="m-2 flex flex-grow"> |
|||
{!entry.disabled ? ( |
|||
<entry.element /> |
|||
) : ( |
|||
<div> |
|||
<Mono> |
|||
{entry.disabledMessage || "This tab is disabled"}.{" "} |
|||
{entry.disabledLink && ( |
|||
<> |
|||
Click{" "} |
|||
<a |
|||
className="underline" |
|||
target="_blank" |
|||
rel="noreferrer" |
|||
href={entry.disabledLink} |
|||
> |
|||
here |
|||
</a>{" "} |
|||
for more information. |
|||
</> |
|||
)} |
|||
</Mono> |
|||
</div> |
|||
)} |
|||
</Tab.Panel> |
|||
))} |
|||
</Tab.Panels> |
|||
</Tab.Group> |
|||
); |
|||
}; |
|||
@ -1,49 +0,0 @@ |
|||
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> |
|||
); |
|||
}; |
|||
@ -1,13 +0,0 @@ |
|||
import { createContext, useContext } from "react"; |
|||
|
|||
import type { Device } from "@core/stores/deviceStore.js"; |
|||
|
|||
export const DeviceContext = createContext<Device | undefined>(undefined); |
|||
|
|||
export const useDevice = (): Device => { |
|||
const context = useContext(DeviceContext); |
|||
if (context === undefined) { |
|||
throw new Error("useDevice must be used within a DeviceProvider"); |
|||
} |
|||
return context; |
|||
}; |
|||
@ -0,0 +1,6 @@ |
|||
import { ClassValue, clsx } from "clsx"; |
|||
import { twMerge } from "tailwind-merge"; |
|||
|
|||
export function cn(...inputs: ClassValue[]) { |
|||
return twMerge(clsx(inputs)); |
|||
} |
|||
@ -1,39 +1,81 @@ |
|||
import { TabbedContent, TabType } from "@components/generic/TabbedContent"; |
|||
import { Sidebar } from "@app/components/Sidebar.js"; |
|||
import { PageLayout } from "@app/components/Topbar.js"; |
|||
import { cn } from "@app/core/utils/cn.js"; |
|||
import { Channel } from "@components/PageComponents/Channel.js"; |
|||
import { useDevice } from "@core/providers/useDevice.js"; |
|||
import { |
|||
ArrowDownOnSquareStackIcon, |
|||
QrCodeIcon |
|||
} from "@heroicons/react/24/outline"; |
|||
import { Protobuf } from "@meshtastic/meshtasticjs"; |
|||
import { useDevice } from "@core/stores/deviceStore.js"; |
|||
import { QrCodeIcon, ImportIcon } from "lucide-react"; |
|||
import { Protobuf, Types } from "@meshtastic/meshtasticjs"; |
|||
import { SidebarSection } from "@app/components/UI/Sidebar/SidebarSection.js"; |
|||
import { SidebarItem } from "@app/components/UI/Sidebar/SidebarItem.js"; |
|||
import { useState } from "react"; |
|||
|
|||
export const getChannelName = (channel: Protobuf.Channel) => |
|||
channel.settings?.name.length |
|||
? channel.settings?.name |
|||
: channel.index === 0 |
|||
? "Primary" |
|||
: `Ch ${channel.index}`; |
|||
|
|||
export const ChannelsPage = (): JSX.Element => { |
|||
const { channels, setDialogOpen } = useDevice(); |
|||
|
|||
const tabs: TabType[] = channels.map((channel) => { |
|||
return { |
|||
label: 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} /> |
|||
}; |
|||
}); |
|||
const [activeChannel, setActiveChannel] = useState<Types.ChannelNumber>( |
|||
Types.ChannelNumber.PRIMARY |
|||
); |
|||
|
|||
return ( |
|||
<TabbedContent |
|||
tabs={tabs} |
|||
actions={[ |
|||
{ |
|||
icon: <ArrowDownOnSquareStackIcon className="w-4" />, |
|||
action: () => setDialogOpen("import", true) |
|||
}, |
|||
{ |
|||
icon: <QrCodeIcon className="w-4" />, |
|||
action: () => setDialogOpen("QR", true) |
|||
} |
|||
]} |
|||
/> |
|||
<> |
|||
<Sidebar> |
|||
<SidebarSection title="Channels"> |
|||
{channels.map((channel) => ( |
|||
<SidebarItem |
|||
key={channel.config.index} |
|||
active={channel.config.index === activeChannel} |
|||
onClick={() => setActiveChannel(channel.config.index)} |
|||
label={getChannelName(channel.config)} |
|||
element={ |
|||
<span |
|||
className={cn( |
|||
"h-3 w-3 rounded-full", |
|||
channel.config.role === Protobuf.Channel_Role.DISABLED |
|||
? "bg-gray-500" |
|||
: "bg-green-500" |
|||
)} |
|||
/> |
|||
} |
|||
/> |
|||
))} |
|||
</SidebarSection> |
|||
</Sidebar> |
|||
<PageLayout |
|||
title={`Channel: ${ |
|||
channels[activeChannel] |
|||
? getChannelName(channels[activeChannel].config) |
|||
: "Loading..." |
|||
}`}
|
|||
actions={[ |
|||
{ |
|||
icon: ImportIcon, |
|||
onClick() { |
|||
console.log("fired"); |
|||
|
|||
setDialogOpen("import", true); |
|||
} |
|||
}, |
|||
{ |
|||
icon: QrCodeIcon, |
|||
onClick() { |
|||
setDialogOpen("QR", true); |
|||
} |
|||
} |
|||
]} |
|||
> |
|||
{channels.map( |
|||
(channel) => |
|||
channel.config.index === activeChannel && ( |
|||
<Channel key={channel.config.index} channel={channel.config} /> |
|||
) |
|||
)} |
|||
</PageLayout> |
|||
</> |
|||
); |
|||
}; |
|||
|
|||
@ -1,41 +0,0 @@ |
|||
import { Fragment } from "react"; |
|||
import { Map } from "@components/PageComponents/AppConfig/Map.js"; |
|||
import { Tab } from "@headlessui/react"; |
|||
|
|||
export const AppConfig = (): JSX.Element => { |
|||
const configSections = [ |
|||
{ |
|||
label: "Map", |
|||
element: Map |
|||
} |
|||
]; |
|||
|
|||
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> |
|||
); |
|||
}; |
|||
@ -1,34 +1,76 @@ |
|||
import { TabbedContent, TabType } from "@components/generic/TabbedContent"; |
|||
import { useDevice } from "@core/providers/useDevice.js"; |
|||
import { |
|||
Cog8ToothIcon, |
|||
CubeTransparentIcon, |
|||
WindowIcon |
|||
} from "@heroicons/react/24/outline"; |
|||
import { AppConfig } from "@pages/Config/AppConfig.js"; |
|||
import { Sidebar } from "@app/components/Sidebar.js"; |
|||
import { SettingsIcon, BoxesIcon, SaveIcon } from "lucide-react"; |
|||
import { DeviceConfig } from "@pages/Config/DeviceConfig.js"; |
|||
import { ModuleConfig } from "@pages/Config/ModuleConfig.js"; |
|||
import { PageLayout } from "@app/components/Topbar.js"; |
|||
import { SidebarSection } from "@app/components/UI/Sidebar/SidebarSection.js"; |
|||
import { SidebarItem } from "@app/components/UI/Sidebar/SidebarItem.js"; |
|||
import { useState } from "react"; |
|||
import { useDevice } from "@app/core/stores/deviceStore.js"; |
|||
|
|||
export const ConfigPage = (): JSX.Element => { |
|||
const { connection, pendingSettingsChanges } = useDevice(); |
|||
const { workingConfig, workingModuleConfig, connection } = useDevice(); |
|||
const [activeConfigSection, setActiveConfigSection] = useState< |
|||
"device" | "module" |
|||
>("device"); |
|||
|
|||
const tabs: TabType[] = [ |
|||
{ |
|||
label: "Device Config", |
|||
icon: <Cog8ToothIcon className="h-4" />, |
|||
element: DeviceConfig |
|||
}, |
|||
{ |
|||
label: "Module Config", |
|||
icon: <CubeTransparentIcon className="h-4" />, |
|||
element: ModuleConfig |
|||
}, |
|||
{ |
|||
label: "App Config", |
|||
icon: <WindowIcon className="h-4" />, |
|||
element: AppConfig |
|||
} |
|||
]; |
|||
return ( |
|||
<> |
|||
<Sidebar> |
|||
<SidebarSection title="Config Sections"> |
|||
<SidebarItem |
|||
icon={SettingsIcon} |
|||
label="Device Config" |
|||
active={activeConfigSection === "device"} |
|||
onClick={() => setActiveConfigSection("device")} |
|||
/> |
|||
<SidebarItem |
|||
icon={BoxesIcon} |
|||
label="Module Config" |
|||
active={activeConfigSection === "module"} |
|||
onClick={() => setActiveConfigSection("module")} |
|||
/> |
|||
</SidebarSection> |
|||
<div className="space-y-1.5"> |
|||
<div className="bg-palette-0 sticky top-0 pb-2"> |
|||
<div className="text-palette-700 flex items-center justify-between px-2"> |
|||
<div className="text-base font-medium"></div> |
|||
</div> |
|||
</div> |
|||
<ul className="space-y-1"></ul> |
|||
</div> |
|||
</Sidebar> |
|||
<PageLayout |
|||
title={ |
|||
activeConfigSection === "device" ? "Device Config" : "Module Config" |
|||
} |
|||
actions={[ |
|||
{ |
|||
icon: SaveIcon, |
|||
async onClick() { |
|||
if (activeConfigSection === "device") { |
|||
workingConfig.map( |
|||
async (config) => await connection?.setConfig(config) |
|||
); |
|||
} else { |
|||
workingModuleConfig.map( |
|||
async (config) => await connection?.setModuleConfig(config) |
|||
); |
|||
} |
|||
|
|||
return <TabbedContent tabs={tabs} />; |
|||
await connection?.commitEditSettings(); |
|||
} |
|||
} |
|||
]} |
|||
> |
|||
<div className="p-3"> |
|||
{activeConfigSection === "device" ? ( |
|||
<DeviceConfig /> |
|||
) : ( |
|||
<ModuleConfig /> |
|||
)} |
|||
</div> |
|||
</PageLayout> |
|||
</> |
|||
); |
|||
}; |
|||
|
|||
@ -1,64 +1,151 @@ |
|||
import maplibregl from "maplibre-gl"; |
|||
import { Layer, Map, Marker, Source } from "react-map-gl"; |
|||
import { MapControlls } from "@components/PageComponents/Map/MapControlls.js"; |
|||
import { Layer, Map, Marker, Source, useMap } from "react-map-gl"; |
|||
import { useAppStore } from "@core/stores/appStore.js"; |
|||
import { useDevice } from "@core/providers/useDevice.js"; |
|||
import { useDevice } from "@core/stores/deviceStore.js"; |
|||
import { Hashicon } from "@emeraldpay/hashicon-react"; |
|||
import { MapPinIcon } from "@heroicons/react/24/outline"; |
|||
import { Sidebar } from "@app/components/Sidebar.js"; |
|||
import { PageLayout } from "@app/components/Topbar.js"; |
|||
import { |
|||
ZoomInIcon, |
|||
ZoomOutIcon, |
|||
BoxSelectIcon, |
|||
MapPinIcon, |
|||
EditIcon, |
|||
PlusIcon |
|||
} from "lucide-react"; |
|||
import { bbox, lineString } from "@turf/turf"; |
|||
|
|||
export const MapPage = (): JSX.Element => { |
|||
const { nodes, waypoints } = useDevice(); |
|||
const { rasterSources } = useAppStore(); |
|||
const { default: map } = useMap(); |
|||
const tmp = useMap(); |
|||
|
|||
const getBBox = () => { |
|||
const nodesWithPosition = nodes.filter((n) => n.data.position?.latitudeI); |
|||
if (!nodesWithPosition.length) return; |
|||
const line = lineString( |
|||
nodesWithPosition.map((n) => [ |
|||
(n.data.position?.latitudeI ?? 0) / 1e7, |
|||
(n.data.position?.longitudeI ?? 0) / 1e7 |
|||
]) |
|||
); |
|||
const bounds = bbox(line); |
|||
const center = map?.cameraForBounds( |
|||
[ |
|||
[bounds[1], bounds[0]], |
|||
[bounds[3], bounds[2]] |
|||
], |
|||
{ padding: { top: 10, bottom: 10, left: 10, right: 10 } } |
|||
); |
|||
if (center) map?.easeTo(center); |
|||
else if (nodesWithPosition.length === 1) |
|||
map?.easeTo({ |
|||
zoom: 12, |
|||
center: [ |
|||
(nodesWithPosition[0].data.position?.longitudeI ?? 0) / 1e7, |
|||
(nodesWithPosition[0].data.position?.latitudeI ?? 0) / 1e7 |
|||
] |
|||
}); |
|||
}; |
|||
|
|||
return ( |
|||
<div className="h-full flex-grow"> |
|||
<Map |
|||
mapStyle="https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json" |
|||
mapLib={maplibregl} |
|||
attributionControl={false} |
|||
renderWorldCopies={false} |
|||
maxPitch={0} |
|||
dragRotate={false} |
|||
touchZoomRotate={false} |
|||
initialViewState={{ |
|||
zoom: 10, |
|||
latitude: -38, |
|||
longitude: 145 |
|||
}} |
|||
> |
|||
<MapControlls /> |
|||
{waypoints.map((wp) => ( |
|||
<Marker |
|||
key={wp.id} |
|||
longitude={wp.longitudeI / 1e7} |
|||
latitude={wp.latitudeI / 1e7} |
|||
anchor="bottom" |
|||
> |
|||
<div> |
|||
<MapPinIcon className="h-4" /> |
|||
<> |
|||
<Sidebar> |
|||
<div className="space-y-1.5"> |
|||
<div className="bg-palette-0 sticky top-0 pb-2"> |
|||
<div className="text-palette-700 flex items-center justify-between px-2"> |
|||
<div className="text-base font-medium">Sources</div> |
|||
<div> |
|||
<button className="flex h-[22px] items-center transition-all duration-300 hover:text-accent"> |
|||
<PlusIcon size={16} /> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</Marker> |
|||
))} |
|||
{rasterSources.map((source, index) => ( |
|||
<Source key={index} type="raster" {...source}> |
|||
<Layer type="raster" /> |
|||
</Source> |
|||
))} |
|||
{nodes.map((n) => { |
|||
if (n.data.position?.latitudeI) { |
|||
return ( |
|||
<Marker |
|||
key={n.data.num} |
|||
longitude={n.data.position.longitudeI / 1e7} |
|||
latitude={n.data.position.latitudeI / 1e7} |
|||
anchor="bottom" |
|||
> |
|||
<Hashicon value={n.data.num.toString()} size={32} /> |
|||
</Marker> |
|||
); |
|||
</div> |
|||
<ul className="space-y-1"> |
|||
{rasterSources.map((source, index) => ( |
|||
<li key={index}> |
|||
<div className="text-palette-600 flex w-full cursor-pointer items-center space-x-2.5 rounded-xl bg-transparent px-2.5 py-2.5 transition-all duration-300 hover:text-accent"> |
|||
<span className="align-middle font-mono text-sm"> |
|||
{source.title} |
|||
</span> |
|||
</div> |
|||
</li> |
|||
))} |
|||
</ul> |
|||
</div> |
|||
</Sidebar> |
|||
<PageLayout |
|||
title="Map" |
|||
actions={[ |
|||
{ |
|||
icon: ZoomInIcon, |
|||
onClick() { |
|||
map?.zoomIn(); |
|||
} |
|||
}, |
|||
{ |
|||
icon: ZoomOutIcon, |
|||
onClick() { |
|||
map?.zoomOut(); |
|||
} |
|||
}, |
|||
{ |
|||
icon: BoxSelectIcon, |
|||
onClick() { |
|||
getBBox(); |
|||
} |
|||
} |
|||
})} |
|||
</Map> |
|||
</div> |
|||
]} |
|||
> |
|||
<Map |
|||
mapStyle="https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json" |
|||
mapLib={maplibregl} |
|||
attributionControl={false} |
|||
renderWorldCopies={false} |
|||
maxPitch={0} |
|||
dragRotate={false} |
|||
touchZoomRotate={false} |
|||
initialViewState={{ |
|||
zoom: 10, |
|||
latitude: -38, |
|||
longitude: 145 |
|||
}} |
|||
> |
|||
{waypoints.map((wp) => ( |
|||
<Marker |
|||
key={wp.id} |
|||
longitude={wp.longitudeI / 1e7} |
|||
latitude={wp.latitudeI / 1e7} |
|||
anchor="bottom" |
|||
> |
|||
<div> |
|||
<MapPinIcon size={16} /> |
|||
</div> |
|||
</Marker> |
|||
))} |
|||
{rasterSources.map((source, index) => ( |
|||
<Source key={index} type="raster" {...source}> |
|||
<Layer type="raster" /> |
|||
</Source> |
|||
))} |
|||
{nodes.map((n) => { |
|||
if (n.data.position?.latitudeI) { |
|||
return ( |
|||
<Marker |
|||
key={n.data.num} |
|||
longitude={n.data.position.longitudeI / 1e7} |
|||
latitude={n.data.position.latitudeI / 1e7} |
|||
anchor="bottom" |
|||
> |
|||
<Hashicon value={n.data.num.toString()} size={32} /> |
|||
</Marker> |
|||
); |
|||
} |
|||
})} |
|||
</Map> |
|||
</PageLayout> |
|||
</> |
|||
); |
|||
}; |
|||
|
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue