feat(ocp): printer cycling backend and frontend done :)
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user