87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
'use client'
|
|
|
|
import { AppSidebar } from '@/app/app-sidebar'
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
} from '@/components/ui/breadcrumb'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import {
|
|
SidebarInset,
|
|
SidebarProvider,
|
|
SidebarTrigger,
|
|
} from '@/components/ui/sidebar'
|
|
import { MapComponent } from '@/components/map-component';
|
|
import { ThemeToggle } from '@/components/theme-toggle';
|
|
// import { Timeline } from '@/app/timeline';
|
|
import { Timeline } from '@/app/tl';
|
|
import { cn } from '@/lib/utils';
|
|
import { useTimeline } from '@/hooks/use-timeline';
|
|
import { useEffect } from 'react'
|
|
import { useRadarTile } from '@/hooks/use-radartile'
|
|
import { gql, useSubscription } from '@apollo/client'
|
|
|
|
const SUBSCRIPTION_QUERY = gql`
|
|
subscription {
|
|
statusUpdates {
|
|
id
|
|
message
|
|
status
|
|
}
|
|
}
|
|
`
|
|
|
|
export default function Page() {
|
|
|
|
|
|
const now = new Date();
|
|
const startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000); // 7天前
|
|
const endDate = new Date(now.getTime() + 3 * 24 * 60 * 60 * 1000); // 3天后
|
|
const { setTime } = useTimeline()
|
|
const { imgBitmap, fetchRadarTile } = useRadarTile({})
|
|
|
|
const { data, loading, error } = useSubscription(SUBSCRIPTION_QUERY)
|
|
|
|
useEffect(() => {
|
|
if (data) {
|
|
console.log(data.statusUpdates)
|
|
}
|
|
}, [data])
|
|
|
|
return (
|
|
<SidebarProvider>
|
|
<AppSidebar />
|
|
<SidebarInset>
|
|
<header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
|
|
{/* <SidebarTrigger className="-ml-1" /> */}
|
|
{/* <Separator orientation="vertical" className="mr-2 h-4" /> */}
|
|
<div className="flex items-center gap-2 justify-between w-full">
|
|
{/* <ThemeToggle /> */}
|
|
</div>
|
|
</header>
|
|
<div className="relative h-full w-full flex flex-col">
|
|
<MapComponent imgBitmap={imgBitmap} />
|
|
{/* <Timeline
|
|
className={
|
|
cn(
|
|
"backdrop-blur-lg border shadow-lg",
|
|
"bg-background/90 border-border",
|
|
"z-10"
|
|
)
|
|
}
|
|
startDate={startDate}
|
|
endDate={endDate}
|
|
onDateChange={(date) => {
|
|
console.log('Selected date:', date);
|
|
setTime(date)
|
|
}}
|
|
/> */}
|
|
<Timeline />
|
|
</div>
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
)
|
|
}
|