cowch/lstV2
1
0
Fork 0
Code Issues 37 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(ocme): added in option to manually add running number if camera isnt working

Browse Source
This commit is contained in:
Blake Matthes
2025-04-24 21:26:25 -05:00
parent 3cb7fd2e1b
commit 9cea76e01f
2 changed files with 166 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/src/components/ocme/ManuallyEnterRn.tsx Normal file
View File

@@ -0,0 +1,106 @@
import { useForm } from "@tanstack/react-form";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import axios from "axios";
import { toast } from "sonner";
import { Button } from "../ui/button";
import { useState } from "react";
export default function ManuallyEnterRn() {
const [sending, setSendingRn] = useState(false);
const form = useForm({
defaultValues: {
runningNr: "",
},
onSubmit: async ({ value }) => {
console.log(value);
setSendingRn(true);
try {
const res = await axios.post("/ocme/api/v1/postRunningNumber", {
runningNr: value.runningNr,
areaFrom: "wrapper_1",
completed: true,
});
if (res.data.success) {
form.reset();
toast.success(
`${value.runningNr} was just created please login`
);
setTimeout(() => {
setSendingRn(false);
}, 3 * 1000);
}
if (!res.data.success) {
toast.error(res.data.message);
setTimeout(() => {
setSendingRn(false);
}, 3 * 1000);
}
} catch (error) {
//console.log(error);
toast.error("There was an error registering");
setTimeout(() => {
setSendingRn(false);
}, 3 * 1000);
}
},
});
return (
<div>
<form
onSubmit={(e) => {
e.preventDefault();
//e.stopPropagation();
}}
>
<form.Field
name="runningNr"
validators={{
// We can choose between form-wide and field-specific validators
onChange: ({ value }) =>
value.length > 3
? undefined
: "pallet number must be greater than 4 numbers",
}}
children={(field) => {
return (
<div className="m-2 min-w-48 max-w-96 p-2 flex flex-row">
<div>
<Label htmlFor="runningNr" className="mb-2">
Running Number
</Label>
<Input
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
type="number"
onChange={(e) =>
field.handleChange(e.target.value)
}
/>
{field.state.meta.errors.length ? (
<em>
{field.state.meta.errors.join(",")}
</em>
) : null}
</div>
<div className="ml-1 mt-5">
<Button
className="ml-1"
type="submit"
onClick={form.handleSubmit}
disabled={sending}
>
Submit
</Button>
</div>
</div>
);
}}
/>
</form>
</div>
);
}

115
frontend/src/components/ocme/WrapperCard.tsx
View File

@@ -16,6 +16,8 @@ import { getOcmeInfo } from "@/utils/querys/production/getOcmeInfo";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { format } from "date-fns"; import { format } from "date-fns";
import { Trash } from "lucide-react"; import { Trash } from "lucide-react";
import ManuallyEnterRn from "./ManuallyEnterRn";
import { Separator } from "../ui/separator";
const currentPallets = [ const currentPallets = [
{ key: "line", label: "Line" }, { key: "line", label: "Line" },
@@ -88,76 +90,79 @@ export default function WrapperManualTrigger() {
const info = data?.filter((r: any) => r.areaFrom === "wrapper_1"); const info = data?.filter((r: any) => r.areaFrom === "wrapper_1");
return ( return (
<LstCard className="m-2 p-2"> <LstCard className="m-2 p-2 w-auto">
<ScrollArea className="max-h-[200px]"> <ScrollArea className="max-h-[200px]">
<span>Wrapper Pallet Info</span> <span>Wrapper Pallet Info</span>
<div>
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
{currentPallets.map((l) => ( {currentPallets.map((l) => (
<TableHead key={l.key}>{l.label}</TableHead> <TableHead key={l.key}>{l.label}</TableHead>
))} ))}
</TableRow> </TableRow>
</TableHeader> </TableHeader>
{isLoading ? ( {isLoading ? (
<TableBody> <TableBody>
{Array(3) {Array(3)
.fill(0) .fill(0)
.map((_, i) => ( .map((_, i) => (
<TableRow key={i}> <TableRow key={i}>
<TableCell className="font-medium">
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
</TableRow>
))}
</TableBody>
) : (
<TableBody>
{info.map((i: any) => (
<TableRow key={i.runningNr}>
<TableCell className="font-medium"> <TableCell className="font-medium">
<Skeleton className="h-4" /> {i.lineNum}
</TableCell> </TableCell>
<TableCell>{i.runningNr}</TableCell>
<TableCell> <TableCell>
<Skeleton className="h-4" /> {format(
i?.upd_date.replace("Z", ""),
"M/d/yyyy hh:mm"
)}
</TableCell> </TableCell>
<TableCell>{i.waitingFor}</TableCell>
<TableCell> <TableCell>
<Skeleton className="h-4" /> <Button
</TableCell> variant="destructive"
<TableCell> size="icon"
<Skeleton className="h-4" /> onClick={() => clearLabel(i)}
</TableCell> >
<TableCell> <Trash />
<Skeleton className="h-4" /> </Button>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
) : ( )}
<TableBody> </Table>
{info.map((i: any) => ( </div>
<TableRow key={i.runningNr}>
<TableCell className="font-medium">
{i.lineNum}
</TableCell>
<TableCell>{i.runningNr}</TableCell>
<TableCell>
{format(
i?.upd_date.replace("Z", ""),
"M/d/yyyy hh:mm"
)}
</TableCell>
<TableCell>{i.waitingFor}</TableCell>
<TableCell>
<Button
variant="destructive"
size="icon"
onClick={() => clearLabel(i)}
>
<Trash />
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
)}
</Table>
</ScrollArea> </ScrollArea>
<div> <div>
<hr /> <hr />
<p className="text-center mb-3">Manual Trigger</p> <p className="text-center mb-3">Manual Trigger</p>
<ManuallyEnterRn />
<Separator className="m-1" />
<div className="flex flex-row justify-between"> <div className="flex flex-row justify-between">
<Button onClick={cameraTrigger}>Camera</Button> <Button onClick={cameraTrigger}>Camera</Button>
</div> </div>