cowch/lstV2
1
0
Fork 0
Code Issues 37 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(ocp page): changed to resizable panels as its kinda customizable

Browse Source
This commit is contained in:
Blake Matthes
2025-04-13 08:26:35 -05:00
parent 3241cf810a
commit 17b6c0ac66
1 changed files with 104 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
frontend/src/components/production/ocp/OcpPage.tsx
View File

@@ -4,56 +4,117 @@ import Lots from "./Lots";
import OcpLogs from "./OcpLogs";
import PrinterStatus from "./PrinterStatus";
import { useSettingStore } from "@/lib/store/useSettings";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import LabelLog from "./LabelLog";
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable-panels";
export default function OCPPage() {
const { settings } = useSettingStore();
let server = settings.filter((n) => n.name === "server");
return (
<div className="h-screen w-full ">
<div className="flex flex-row gap-2">
<div className="flex flex-col w-4/5 h-dvh">
<div className="">
<Lots />
</div>
<div className="w-5/6 h-1/2">
<Tabs defaultValue="ocplogs" className="w-full">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="ocplogs">
OcpLogs
</TabsTrigger>
<TabsTrigger value="labels">Labels</TabsTrigger>
</TabsList>
<TabsContent value="ocplogs">
<div className="w-full">
<OcpLogs />
</div>
</TabsContent>
<TabsContent value="labels">
<LabelLog />
</TabsContent>
</Tabs>
</div>
</div>
<div className="flex flex-col">
{server[0].value === "usday1vms006" && (
<div>
<WrapperManualTrigger />
</div>
)}
{server[0].value === "localhost" && (
<div>
<WrapperManualTrigger />
</div>
)}
<div>
<PrinterStatus />
</div>
</div>
</div>
return (
<div className="ml-5 w-11/12 h-9/10">
<ResizablePanelGroup
direction="horizontal"
//className="rounded-lg border"
autoSaveId="ocpPage"
>
<ResizablePanel>
<ResizablePanelGroup direction="vertical">
<ResizablePanel>
<div style={{ overflow: "auto" }}>
<Lots />
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel>
<ResizablePanelGroup direction="horizontal">
<ResizablePanel className="overflow: auto">
<div style={{ overflow: "auto" }}>
<LabelLog />
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel>
<div style={{ overflow: "auto" }}>
<OcpLogs />
</div>
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={25}>
<ResizablePanelGroup direction="vertical">
{server[0].value === "usday1vms006" && (
<ResizablePanel className="max-h-[300px]">
<WrapperManualTrigger />
</ResizablePanel>
)}
{server[0].value === "usday1vms006" && (
<ResizablePanel className="max-h-[300px]">
<WrapperManualTrigger />
</ResizablePanel>
)}
<ResizableHandle />
<ResizablePanel>
<PrinterStatus />
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
</ResizablePanelGroup>
</div>
);
// return (
// <div className="h-screen w-full ">
// <div className="flex flex-row gap-2">
// <div className="flex flex-col w-4/5 h-dvh">
// <div className="">
// <Lots />
// </div>
// <div className="w-5/6 h-1/2">
// <Tabs defaultValue="ocplogs" className="w-full">
// <TabsList className="grid w-full grid-cols-2">
// <TabsTrigger value="ocplogs">
// OcpLogs
// </TabsTrigger>
// <TabsTrigger value="labels">Labels</TabsTrigger>
// </TabsList>
// <TabsContent value="ocplogs">
// <div className="w-full">
// <OcpLogs />
// </div>
// </TabsContent>
// <TabsContent value="labels">
// <LabelLog />
// </TabsContent>
// </Tabs>
// </div>
// </div>
// <div className="flex flex-col">
// {server[0].value === "usday1vms006" && (
// <div>
// <WrapperManualTrigger />
// </div>
// )}
// {server[0].value === "localhost" && (
// <div>
// <WrapperManualTrigger />
// </div>
// )}
// <div>
// <PrinterStatus />
// </div>
// </div>
// </div>
// </div>
// );
}