feat(ocp): printer cycling backend and frontend done :)

frontend/src/components/production/ocp/LabelLog.tsx

@@ -5,6 +5,7 @@ import {
     Table,
     TableBody,
     TableCell,
+    TableFooter,
     TableHead,
     TableHeader,
     TableRow,
@@ -137,6 +138,16 @@ export default function LabelLog() {
                         ))}
                     </TableBody>
                 )}
+
+                <TableFooter>
+                    {labelData.length === 0 && (
+                        <div>
+                            <h2 className="text-center text-2xl">
+                                No labels have been printed in the last 2 hours
+                            </h2>
+                        </div>
+                    )}
+                </TableFooter>
             </Table>
         </LstCard>
     );

frontend/src/components/production/ocp/Lots.tsx

@@ -71,6 +71,7 @@ export default function Lots() {
     const server = settings.filter((n) => n.name === "server")[0]?.value || "";
 
     const roles = ["admin", "manager", "operator"];
+    const lotdata = data ? data : [];
 
     if (user && roles.includes(user.role)) {
         //width = 1280;
@@ -144,7 +145,6 @@ export default function Lots() {
             </div>
         );
     }
-
     return (
         <LstCard className="m-2 p-2 min-h-2/5">
             <ScrollArea className="h-[400px]">
@@ -197,7 +197,7 @@ export default function Lots() {
                         </>
                     ) : (
                         <TableBody>
-                            {data?.map((lot: LotType) => (
+                            {lotdata.map((lot: LotType) => (
                                 <TableRow key={lot.LabelOnlineID}>
                                     <TableCell className="font-medium">
                                         {lot.MachineLocation}

frontend/src/components/production/ocp/OcpPage.tsx

@@ -10,6 +10,7 @@ export default function OCPPage() {
     const { settings } = useSettingStore();
 
     const server = settings.filter((n) => n.plantToken === "usday1");
+    console.log(server);
     return (
         <div className="h-screen w-full ">
             <div className="flex flex-wrap gap-2">
@@ -40,7 +41,7 @@ export default function OCPPage() {
                     </div>
                 </div>
                 <div className="w-1/6 flex flex-col">
-                    {server && (
+                    {server.length >= 1 && (
                         <div>
                             <WrapperManualTrigger />
                         </div>

frontend/src/components/production/ocp/PrinterStatus.tsx

@@ -9,12 +9,10 @@ import {
     TableHeader,
     TableRow,
 } from "@/components/ui/table";
+import { getPrinters } from "@/utils/querys/production/printers";
+import { useQuery } from "@tanstack/react-query";
 
 let printerCols = [
-    {
-        key: "status",
-        label: "Status",
-    },
     {
         key: "printer",
         label: "Printer",
@@ -25,10 +23,12 @@ let printerCols = [
     },
 ];
 export default function PrinterStatus() {
-    return (
-        <LstCard className="m-2 p-2">
-            <ScrollArea className="max-h-[300px]">
-                <p className="text-center">Printer Status</p>
+    const { data, isError, isLoading } = useQuery(getPrinters());
+
+    if (isError) {
+        return (
+            <ScrollArea className="h-[400px]">
+                <p className="text-center">Printer Staus error</p>
 
                 <Table>
                     <TableHeader>
@@ -50,14 +50,65 @@ export default function PrinterStatus() {
                                     <TableCell>
                                         <Skeleton className="h-4" />
                                     </TableCell>
-                                    <TableCell>
-                                        <Skeleton className="h-4" />
-                                    </TableCell>
                                 </TableRow>
                             ))}
                     </TableBody>
                 </Table>
             </ScrollArea>
+        );
+    }
+
+    /**
+     * only show the assigned printers
+     */
+
+    const assigned = data?.filter((a: any) => a.assigned) || [];
+    return (
+        <LstCard className="m-2 p-2">
+            <ScrollArea className="max-h-[800px]">
+                <p className="text-center">
+                    {isLoading ? (
+                        <span>Printers status loading...</span>
+                    ) : (
+                        <span>Printer Status</span>
+                    )}
+                </p>
+
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            {printerCols.map((l) => (
+                                <TableHead key={l.key}>{l.label}</TableHead>
+                            ))}
+                        </TableRow>
+                    </TableHeader>{" "}
+                    {isLoading ? (
+                        <TableBody>
+                            {Array(5)
+                                .fill(0)
+                                .map((_, i) => (
+                                    <TableRow key={i}>
+                                        <TableCell className="font-medium">
+                                            <Skeleton className="h-4" />
+                                        </TableCell>
+                                        <TableCell>
+                                            <Skeleton className="h-4" />
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                        </TableBody>
+                    ) : (
+                        <TableBody>
+                            {assigned?.map((p: any) => (
+                                <TableRow key={p.printer_id}>
+                                    <TableCell>{p.name}</TableCell>
+                                    <TableCell>{p.statusText}</TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    )}
+                </Table>
+            </ScrollArea>
         </LstCard>
     );
 }

frontend/src/utils/querys/production/printers.tsx

@@ -0,0 +1,20 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getPrinters() {
+    return queryOptions({
+        queryKey: ["printers"],
+        queryFn: () => fetchSettings(),
+
+        staleTime: 1000,
+        refetchInterval: 2 * 2000,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetchSettings = async () => {
+    const { data } = await axios.get(`/api/ocp/getprinters`);
+    // if we are not localhost ignore the devDir setting.
+    //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};