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