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

127
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 ( return (
<div className="h-screen w-full "> <div className="ml-5 w-11/12 h-9/10">
<div className="flex flex-row gap-2"> <ResizablePanelGroup
<div className="flex flex-col w-4/5 h-dvh"> direction="horizontal"
<div className=""> //className="rounded-lg border"
autoSaveId="ocpPage"
>
<ResizablePanel>
<ResizablePanelGroup direction="vertical">
<ResizablePanel>
<div style={{ overflow: "auto" }}>
<Lots /> <Lots />
</div> </div>
</ResizablePanel>
<div className="w-5/6 h-1/2"> <ResizableHandle />
<Tabs defaultValue="ocplogs" className="w-full"> <ResizablePanel>
<TabsList className="grid w-full grid-cols-2"> <ResizablePanelGroup direction="horizontal">
<TabsTrigger value="ocplogs"> <ResizablePanel className="overflow: auto">
OcpLogs <div style={{ overflow: "auto" }}>
</TabsTrigger> <LabelLog />
<TabsTrigger value="labels">Labels</TabsTrigger> </div>
</TabsList> </ResizablePanel>
<TabsContent value="ocplogs"> <ResizableHandle />
<div className="w-full"> <ResizablePanel>
<div style={{ overflow: "auto" }}>
<OcpLogs /> <OcpLogs />
</div> </div>
</TabsContent> </ResizablePanel>
<TabsContent value="labels"> </ResizablePanelGroup>
<LabelLog /> </ResizablePanel>
</TabsContent> </ResizablePanelGroup>
</Tabs> </ResizablePanel>
</div> <ResizableHandle />
</div> <ResizablePanel defaultSize={25}>
<div className="flex flex-col"> <ResizablePanelGroup direction="vertical">
{server[0].value === "usday1vms006" && ( {server[0].value === "usday1vms006" && (
<div> <ResizablePanel className="max-h-[300px]">
<WrapperManualTrigger /> <WrapperManualTrigger />
</div> </ResizablePanel>
)} )}
{server[0].value === "localhost" && ( {server[0].value === "usday1vms006" && (
<div> <ResizablePanel className="max-h-[300px]">
<WrapperManualTrigger /> <WrapperManualTrigger />
</div> </ResizablePanel>
)} )}
<div>
<ResizableHandle />
<ResizablePanel>
<PrinterStatus /> <PrinterStatus />
</div> </ResizablePanel>
</div> </ResizablePanelGroup>
</div> </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>
// );
} }