115 lines
3.9 KiB
TypeScript
115 lines
3.9 KiB
TypeScript
import { LstCard } from "@/components/extendedUI/LstCard";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { getPrinters } from "@/utils/querys/production/printers";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
|
|
let printerCols = [
|
|
{
|
|
key: "printer",
|
|
label: "Printer",
|
|
},
|
|
{
|
|
key: "statusMessage",
|
|
label: "Status Message",
|
|
},
|
|
];
|
|
export default function PrinterStatus() {
|
|
const { data, isError, isLoading } = useQuery(getPrinters());
|
|
|
|
if (isError) {
|
|
return (
|
|
<ScrollArea className="h-[400px]">
|
|
<p className="text-center">Printer Staus error</p>
|
|
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
{printerCols.map((l) => (
|
|
<TableHead key={l.key}>{l.label}</TableHead>
|
|
))}
|
|
</TableRow>
|
|
</TableHeader>
|
|
|
|
<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>
|
|
</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>
|
|
);
|
|
}
|