@seedtactics/insight-client 16.4.0

package/dist/components/station-monitor/Material.js

@@ -0,0 +1,489 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* Copyright (c) 2022, John Lenz
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+
+    * Redistributions in binary form must reproduce the above
+      copyright notice, this list of conditions and the following
+      disclaimer in the documentation and/or other materials provided
+      with the distribution.
+
+    * Neither the name of John Lenz, Black Maple Software, SeedTactics,
+      nor the names of other contributors may be used to endorse or
+      promote products derived from this software without specific
+      prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+import { PureComponent, forwardRef, memo, useState, Suspense, } from "react";
+import * as jdenticon from "jdenticon";
+import { Typography, Badge, Box, ButtonBase, Button, Tooltip, Avatar, Paper, CircularProgress, TextField, Dialog, DialogActions, DialogContent, DialogTitle, keyframes, styled, } from "@mui/material";
+import TimeAgo from "react-timeago";
+import { DragIndicator, Warning as WarningIcon, Search as SearchIcon } from "@mui/icons-material";
+import { useSortable } from "@dnd-kit/sortable";
+import * as api from "../../network/api.js";
+import * as matDetails from "../../cell-status/material-details.js";
+import { LogEntries } from "../LogEntry.js";
+import { inproc_mat_to_summary, } from "../../cell-status/material-summary.js";
+import { currentOperator } from "../../data/operators.js";
+import { DisplayLoadingAndError } from "../ErrorsAndLoading.js";
+import { ErrorBoundary } from "react-error-boundary";
+import { currentStatus } from "../../cell-status/current-status.js";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { loadable } from "jotai/utils";
+import { last30Rebookings } from "../../cell-status/rebookings.js";
+export class PartIdenticon extends PureComponent {
+    render() {
+        const iconSize = this.props.size || 50;
+        const icon = jdenticon.toSvg(this.props.part, iconSize);
+        return _jsx("div", { style: { width: iconSize, height: iconSize }, dangerouslySetInnerHTML: { __html: icon } });
+    }
+}
+const shakeSize = 2;
+const shakeHorizKeyframes = keyframes `
+  from, to { transform: translate(0, 0) }
+  10% { transform: translate(${shakeSize}px, 0) }
+  20% { transform: translate(0, 0) }
+  30% { transform: translate(${shakeSize}px, 0) }
+  40% { transform: translate(0, 0) }
+  50% { transform: translate(${shakeSize}px, 0) }
+  60% { transform: translate(0, 0) }
+`;
+const shakeHorizAnimation = `${shakeHorizKeyframes} 1s ease-in-out infinite`;
+// global sync of all shake animations
+// the start time can drift due to the pause on hover, so to keep it in sync always
+// round the start time down to be a multiple of the duration (1s)
+function shakeAnimationIteration(event) {
+    const anim = event.currentTarget
+        .getAnimations()
+        .find((a) => a.animationName === shakeHorizKeyframes.name);
+    if (anim && typeof anim.startTime === "number") {
+        anim.startTime = anim.startTime - (anim.startTime % 1000);
+    }
+    else if (anim && typeof anim.startTime === "object" && anim.startTime instanceof CSSNumericValue) {
+        const msecs = anim.startTime.to("ms").value;
+        anim.startTime = CSS.ms(msecs - (msecs % 1000));
+    }
+}
+const MatCardHeader = styled("div", { shouldForwardProp: (prop) => prop !== "fsize" })(({ fsize, theme }) => {
+    if (!fsize)
+        return { fontSize: "1.25rem" };
+    switch (fsize) {
+        case "normal":
+            return { fontSize: "1.5rem" };
+        case "large":
+            return {
+                fontSize: "1.5rem",
+                [theme.breakpoints.up("lg")]: {
+                    fontSize: "1.75rem",
+                },
+                [theme.breakpoints.up("xl")]: {
+                    fontSize: "2rem",
+                },
+            };
+        case "x-large":
+            return {
+                fontSize: "1.5rem",
+                [theme.breakpoints.up("md")]: {
+                    fontSize: "1.75rem",
+                },
+                [theme.breakpoints.up("lg")]: {
+                    fontSize: "2.75rem",
+                },
+                [theme.breakpoints.up("xl")]: {
+                    fontSize: "3.75rem",
+                },
+            };
+    }
+});
+const MatCardDetail = styled("div", { shouldForwardProp: (prop) => prop !== "fsize" })(({ fsize, theme }) => {
+    if (!fsize)
+        return { fontSize: "0.75rem" };
+    switch (fsize) {
+        case "normal":
+            return { fontSize: "1rem" };
+        case "large":
+            return {
+                fontSize: "1rem",
+                [theme.breakpoints.up("lg")]: {
+                    fontSize: "1.5rem",
+                },
+                [theme.breakpoints.up("xl")]: {
+                    fontSize: "1.75rem",
+                },
+            };
+        case "x-large":
+            return {
+                fontSize: "1rem",
+                [theme.breakpoints.up("md")]: {
+                    fontSize: "1.5rem",
+                },
+                [theme.breakpoints.up("lg")]: {
+                    fontSize: "2.5rem",
+                },
+                [theme.breakpoints.up("xl")]: {
+                    fontSize: "3.5rem",
+                },
+            };
+    }
+});
+export function MaterialAction({ mat, displayActionForSinglePallet, fsize, }) {
+    const curSt = useAtomValue(currentStatus);
+    switch (mat.action.type) {
+        case api.ActionType.Loading:
+            switch (mat.location.type) {
+                case api.LocType.OnPallet:
+                    if (displayActionForSinglePallet === undefined ||
+                        displayActionForSinglePallet === mat.location.palletNum) {
+                        if (mat.action.loadOntoFace === undefined || mat.action.loadOntoFace === mat.location.face) {
+                            // material is not moving, just having some manual work done on it
+                            if (mat.action.processAfterLoad && mat.action.processAfterLoad !== mat.process) {
+                                return (_jsxs(MatCardDetail, { fsize: fsize, children: ["Reclamp material to process # ", mat.action.processAfterLoad] }));
+                            }
+                            else {
+                                return null;
+                            }
+                        }
+                        else {
+                            const faceNum = mat.action.loadOntoFace ?? 0;
+                            const faceName = mat.location.palletNum
+                                ? curSt.pallets[mat.location.palletNum]?.faceNames?.[faceNum - 1]
+                                : null;
+                            return _jsxs(MatCardDetail, { fsize: fsize, children: ["Transfer to ", faceName ?? `face ${faceNum}`] });
+                        }
+                    }
+                    else {
+                        return null;
+                    }
+                default: {
+                    const faceNum = mat.action.loadOntoFace ?? 0;
+                    const faceName = mat.action.loadOntoPalletNum
+                        ? curSt.pallets[mat.action.loadOntoPalletNum]?.faceNames?.[faceNum - 1]
+                        : null;
+                    if (displayActionForSinglePallet === undefined) {
+                        return (_jsxs(MatCardDetail, { fsize: fsize, children: ["Load to ", faceName ?? `face ${faceNum}`, " of pal ", mat.action.loadOntoPalletNum ?? ""] }));
+                    }
+                    else if (displayActionForSinglePallet === mat.action.loadOntoPalletNum) {
+                        return _jsxs(MatCardDetail, { fsize: fsize, children: ["Load to ", faceName ?? `face ${faceNum}`] });
+                    }
+                    else {
+                        return null;
+                    }
+                }
+            }
+        case api.ActionType.UnloadToInProcess:
+        case api.ActionType.UnloadToCompletedMaterial:
+            if (mat.action.unloadIntoQueue) {
+                return _jsxs(MatCardDetail, { fsize: fsize, children: ["Unload into queue ", mat.action.unloadIntoQueue] });
+            }
+            else {
+                return _jsx(MatCardDetail, { fsize: fsize, children: "Unload from pallet" });
+            }
+        case api.ActionType.Waiting:
+            if (mat.location.type === api.LocType.InQueue && !!mat.jobUnique && mat.jobUnique !== "") {
+                return _jsxs(MatCardDetail, { fsize: fsize, children: ["Waiting; next process is #", mat.process + 1] });
+            }
+            else if (mat.location.type === api.LocType.OnPallet &&
+                (mat.lastCompletedMachiningRouteStopIndex === null ||
+                    mat.lastCompletedMachiningRouteStopIndex === undefined)) {
+                return _jsx(MatCardDetail, { fsize: fsize, children: "Waiting for machining" });
+            }
+            break;
+        case api.ActionType.Machining:
+            return _jsxs(MatCardDetail, { fsize: fsize, children: ["Machining program ", mat.action.program ?? ""] });
+    }
+    return null;
+}
+function Warning({ mat }) {
+    let tooltip = null;
+    if (mat.signaledInspections.length > 0) {
+        tooltip = "Inspect: " + mat.signaledInspections.join(", ");
+    }
+    if (mat.quarantineAfterUnload) {
+        if (tooltip === null) {
+            tooltip = "Material will quarantine after unload";
+        }
+        else {
+            tooltip += "; Material will quarantine after unload";
+        }
+    }
+    if (tooltip === null) {
+        return null;
+    }
+    else {
+        return (_jsx(Tooltip, { title: tooltip, children: _jsx(WarningIcon, {}) }));
+    }
+}
+function JobRawMaterial({ fsize, mat }) {
+    const job = useAtomValue(currentStatus).jobs[mat.jobUnique];
+    let path = mat.path;
+    if (mat.action.type === api.ActionType.Loading && mat.action.pathAfterLoad) {
+        path = mat.action.pathAfterLoad;
+    }
+    if (!job) {
+        return null;
+    }
+    const pathData = job.procsAndPaths?.[0]?.paths?.[path - 1];
+    if (pathData && pathData.casting && pathData.casting !== "") {
+        return _jsx(MatCardDetail, { fsize: fsize, children: pathData.casting });
+    }
+    else {
+        return null;
+    }
+}
+function RebookingNoteElipsis({ fsize, uniq }) {
+    const job = useAtomValue(currentStatus).jobs[uniq];
+    const rebookings = useAtomValue(last30Rebookings);
+    if (job && job.bookings && job.bookings.length > 0) {
+        const b = rebookings.get(job.bookings[0]);
+        if (b && b.notes && b.notes !== "") {
+            return (_jsx(MatCardDetail, { fsize: fsize, style: { textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap", maxWidth: "10em" }, children: b.notes }));
+        }
+    }
+    return null;
+}
+export function WorkorderFromBarcode() {
+    const currentSt = useAtomValue(currentStatus);
+    const workorderId = useAtomValue(matDetails.workorderInMaterialDialog);
+    if (!workorderId)
+        return null;
+    const comments = currentSt.workorders?.find((w) => w.workorderId === workorderId)?.comments ?? [];
+    return (_jsxs("div", { style: { marginTop: "1em", marginLeft: "1em" }, children: [_jsxs("p", { children: ["Workorder: ", workorderId] }), _jsx("ul", { children: comments.map((c, idx) => (_jsx("li", { children: c.comment }, idx))) })] }));
+}
+const MatCard = forwardRef(function MatCard(props, ref) {
+    const setMatToShow = useSetAtom(matDetails.materialDialogOpen);
+    const completed = props.mat.completedInspections || {};
+    let completedMsg;
+    if (props.focusInspectionType && completed[props.focusInspectionType]) {
+        completedMsg = (_jsxs(MatCardDetail, { fsize: props.fsize, children: [_jsx("span", { children: "Inspection completed " }), _jsx(TimeAgo, { date: completed[props.focusInspectionType].time })] }));
+    }
+    else if (props.focusInspectionType && props.mat.last_unload_time) {
+        completedMsg = (_jsxs(MatCardDetail, { fsize: props.fsize, children: [_jsx("span", { children: "Unloaded " }), _jsx(TimeAgo, { date: props.mat.last_unload_time })] }));
+    }
+    else if (props.mat.closeout_completed) {
+        completedMsg = (_jsxs(MatCardDetail, { fsize: props.fsize, children: [_jsxs("span", { children: [props.mat.closeout_failed ? "Failed " : "", "Closed Out "] }), _jsx(TimeAgo, { date: props.mat.closeout_completed })] }));
+    }
+    return (_jsxs(Paper, { ref: ref, elevation: 4, sx: {
+            display: "flex",
+            minWidth: "10em",
+            padding: "8px",
+            margin: props.isDragOverlay ? undefined : "8px",
+            opacity: props.isActiveDrag ? 0.2 : 1,
+            animation: props.shake ? shakeHorizAnimation : undefined,
+            "&:hover": {
+                animationPlayState: "paused",
+            },
+        }, onAnimationIteration: shakeAnimationIteration, ...props.dragRootProps, children: [props.showDragHandle ? (_jsx("div", { ref: props.setDragHandleRef, role: "button", tabIndex: 0, style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    cursor: props.isDragOverlay ? "grabbing" : "grab",
+                    touchAction: "none",
+                }, ...props.dragHandleProps, children: _jsx(DragIndicator, { fontSize: "large", color: "action" }) })) : undefined, _jsx(ButtonBase, { focusRipple: true, sx: { width: "100%" }, onClick: () => setMatToShow(props.inProcMat
+                    ? { type: "InProcMat", inproc: props.inProcMat }
+                    : { type: "MatSummary", summary: props.mat }), children: _jsxs(Box, { display: "flex", textAlign: "left", alignItems: "center", width: "100%", children: [_jsx(PartIdenticon, { part: props.mat.partName }), _jsxs(Box, { marginLeft: "8px", flexGrow: 1, children: [_jsx(MatCardHeader, { fsize: props.fsize, children: props.mat.partName }), props.displayJob ? (_jsx(MatCardDetail, { fsize: props.fsize, children: props.mat.jobUnique && props.mat.jobUnique !== ""
+                                        ? "Assigned to " + props.mat.jobUnique
+                                        : "Unassigned material" })) : undefined, !props.hideEmptySerial || props.mat.serial ? (_jsxs(MatCardDetail, { fsize: props.fsize, children: ["Serial: ", props.mat.serial ? props.mat.serial : "none"] })) : undefined, props.mat.workorderId === undefined ||
+                                    props.mat.workorderId === "" ||
+                                    props.mat.workorderId === props.mat.serial ? undefined : (_jsxs(MatCardDetail, { fsize: props.fsize, children: ["Workorder: ", props.mat.workorderId] })), props.mat.jobUnique !== undefined &&
+                                    props.showRawMaterial &&
+                                    props.inProcMat &&
+                                    props.inProcMat.process === 0 ? (_jsx(JobRawMaterial, { fsize: props.fsize, mat: props.inProcMat })) : undefined, props.showJobComment && props.mat.jobUnique && props.mat.jobUnique !== "" ? (_jsx(RebookingNoteElipsis, { fsize: props.fsize, uniq: props.mat.jobUnique })) : undefined, props.inProcMat ? (_jsx(MaterialAction, { mat: props.inProcMat, displayActionForSinglePallet: props.displayActionForSinglePallet, fsize: props.fsize })) : undefined, completedMsg] }), _jsxs(Box, { marginLeft: "4px", display: "flex", flexDirection: "column", justifyContent: "space-between", alignItems: "flex-end", alignSelf: "start", children: [props.mat.serial && props.mat.serial.length >= 1 && !props.hideAvatar ? (_jsx("div", { children: _jsx(Avatar, { style: { width: "30px", height: "30px" }, children: props.mat.serial.slice(-1) }) })) : undefined, props.hideWarningIcon ? undefined : (_jsx("div", { children: _jsx(Warning, { mat: props.mat }) }))] })] }) })] }));
+});
+export const MatSummary = memo(MatCard);
+export const InProcMaterial = memo(function InProcMaterial(props) {
+    return (_jsx(MatCard, { mat: inproc_mat_to_summary(props.mat), inProcMat: props.mat, displayActionForSinglePallet: props.displayActionForSinglePallet, fsize: props.fsize, hideAvatar: props.hideAvatar, displayJob: props.displayJob, showDragHandle: props.showHandle, hideEmptySerial: props.hideEmptySerial, showRawMaterial: props.showRawMaterial, showJobComment: props.showJobComment, shake: props.shake }));
+});
+export const SortableInProcMaterial = memo(function SortableInProcMaterial(props) {
+    const d = { mat: props.mat };
+    const { active, isDragging, attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, } = useSortable({
+        id: props.mat.materialID,
+        data: d,
+    });
+    const handleProps = {
+        ...listeners,
+    };
+    for (const [a, v] of Object.entries(attributes)) {
+        if (a.startsWith("aria")) {
+            handleProps[a] = v;
+        }
+    }
+    const style = {
+        transform: transform
+            ? `translate3d(${Math.round(transform.x)}px, ${Math.round(transform.y)}px, 0)`
+            : undefined,
+        transition: active !== null ? transition : undefined,
+    };
+    return (_jsx(MatCard, { ref: setNodeRef, dragRootProps: { style }, showDragHandle: true, dragHandleProps: handleProps, setDragHandleRef: setActivatorNodeRef, isActiveDrag: isDragging, mat: inproc_mat_to_summary(props.mat), inProcMat: props.mat, displayActionForSinglePallet: props.displayActionForSinglePallet, hideAvatar: props.hideAvatar, displayJob: props.displayJob, hideEmptySerial: props.hideEmptySerial, fsize: props.fsize, shake: active ? undefined : props.shake, showRawMaterial: props.showRawMaterial }));
+});
+export function DragOverlayInProcMaterial(props) {
+    return (_jsx(MatCard, { mat: inproc_mat_to_summary(props.mat), inProcMat: props.mat, displayActionForSinglePallet: props.displayActionForSinglePallet, showDragHandle: true, hideAvatar: props.hideAvatar, displayJob: props.displayJob, fsize: props.fsize, hideEmptySerial: props.hideEmptySerial, isDragOverlay: true }));
+}
+export const MultiMaterial = memo(function MultiMaterial(props) {
+    return (_jsx(Paper, { elevation: 4, sx: { display: "flex", minWidth: "10em", padding: "8px", margin: "8px" }, children: _jsx(Badge, { badgeContent: props.material.length < 2 ? 0 : props.material.length, color: "secondary", children: _jsx(ButtonBase, { focusRipple: true, onClick: () => props.onOpen(), children: _jsxs(Box, { display: "flex", textAlign: "left", children: [_jsx(PartIdenticon, { part: props.partOrCasting }), _jsxs(Box, { marginLeft: "8px", flexGrow: 1, children: [_jsx(Typography, { variant: "h6", children: props.partOrCasting }), _jsx(MatCardDetail, { fsize: props.fsize, children: props.assignedJobUnique && props.assignedJobUnique !== ""
+                                        ? "Assigned to " + props.assignedJobUnique
+                                        : "Unassigned material" })] }), props.material.length > 0 && props.material[0].serial && props.material[0].serial.length >= 1 ? (_jsx("div", { children: _jsx(Avatar, { style: { width: "30px", height: "30px" }, children: props.material[0].serial.slice(-1) }) })) : undefined] }) }) }) }));
+});
+export const MaterialDetailTitle = memo(function MaterialDetailTitle({ partName, serial, subtitle, notes, }) {
+    let title;
+    if (partName === "") {
+        title = serial ?? "Material";
+    }
+    else if (serial === undefined || serial === null || serial === "") {
+        if (notes) {
+            title = "Add note for " + partName;
+        }
+        else {
+            title = partName;
+        }
+    }
+    else {
+        if (notes) {
+            title = "Add note for " + serial;
+        }
+        else {
+            title = partName + " - " + serial;
+        }
+    }
+    return (_jsxs(Box, { display: "flex", textAlign: "left", children: [partName === "" ? _jsx(SearchIcon, {}) : _jsx(PartIdenticon, { part: partName }), _jsxs(Box, { marginLeft: "8px", flexGrow: 1, children: [_jsx(Typography, { variant: "h6", children: title }), subtitle ? _jsx(Typography, { variant: "caption", children: subtitle }) : undefined] })] }));
+});
+function MaterialDialogTitle({ notes }) {
+    const matL = useAtomValue(loadable(matDetails.materialInDialogInfo));
+    const serialL = useAtomValue(loadable(matDetails.serialInMaterialDialog));
+    const mat = matL.state === "hasData" ? matL.data : null;
+    const serial = serialL.state === "hasData" ? serialL.data : null;
+    return _jsx(MaterialDetailTitle, { notes: notes, partName: mat?.partName ?? "", serial: mat?.serial ?? serial });
+}
+function MaterialInspections() {
+    const insps = useAtomValue(matDetails.materialInDialogInspections);
+    function colorForInspType(type) {
+        if (insps.completedInspections.includes(type)) {
+            return "black";
+        }
+        else {
+            return "red";
+        }
+    }
+    if (insps.signaledInspections.length === 0) {
+        return _jsx("small", { children: "Inspections: none" });
+    }
+    else {
+        return (_jsxs("small", { children: ["Inspections:", " ", insps.signaledInspections.map((type, i) => (_jsxs("span", { children: [i === 0 ? "" : ", ", _jsx("span", { style: { color: colorForInspType(type) }, children: type })] }, i)))] }));
+    }
+}
+function MaterialEvents({ highlightProcsGreaterOrEqualTo }) {
+    const events = useAtomValue(matDetails.materialInDialogEvents);
+    return (_jsx(LogEntries, { entries: events, copyToClipboard: true, highlightProcsGreaterOrEqualTo: highlightProcsGreaterOrEqualTo }));
+}
+function RebookingNote() {
+    const mat = useAtomValue(matDetails.inProcessMaterialInDialog);
+    const jobs = useAtomValue(currentStatus).jobs;
+    const rebookigns = useAtomValue(last30Rebookings);
+    const job = mat ? jobs[mat.jobUnique] : null;
+    if (job && job.bookings && job.bookings.length > 0) {
+        const b = rebookigns.get(job.bookings[0]);
+        if (b && b.notes && b.notes !== "") {
+            return (_jsx(Typography, { variant: "caption", sx: { width: "100%", textWrap: "wrap" }, children: b.notes }));
+        }
+    }
+    return null;
+}
+export const MaterialDetailContent = memo(function MaterialDetailContent({ highlightProcsGreaterOrEqualTo, }) {
+    const toShow = useAtomValue(matDetails.materialDialogOpen);
+    const mat = useAtomValue(matDetails.materialInDialogInfo);
+    const barcodeNewMat = useAtomValue(matDetails.barcodePotentialNewMaterial);
+    if (toShow === null)
+        return null;
+    if (mat === null) {
+        if (toShow.type === "AddMatWithEnteredSerial" || toShow.type === "ManuallyEnteredSerial") {
+            return _jsxs("div", { style: { marginLeft: "1em" }, children: ["Material with serial ", toShow.serial, " not found."] });
+        }
+        else if (toShow.type === "Barcode") {
+            if (barcodeNewMat) {
+                return (_jsxs("div", { style: { marginLeft: "1em" }, children: ["Material with barcode ", toShow.barcode, " does not yet exist in the cell."] }));
+            }
+            else {
+                return _jsxs("div", { style: { marginLeft: "1em" }, children: ["Material with barcode ", toShow.barcode, " not found."] });
+            }
+        }
+        else {
+            return _jsx("div", { style: { marginLeft: "1em" }, children: "Material not found." });
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { marginLeft: "1em" }, children: [_jsx("div", { children: _jsxs("small", { children: ["Workorder: ", mat?.workorderId ?? "none"] }) }), _jsx("div", { children: _jsx(DisplayLoadingAndError, { fallback: _jsxs("small", { children: ["Inspections: ", _jsx(CircularProgress, { size: "10" })] }), children: _jsx(MaterialInspections, {}) }) }), _jsx("div", { children: _jsx(DisplayLoadingAndError, { fallback: _jsx("div", {}), children: _jsx(RebookingNote, {}) }) })] }), _jsx(DisplayLoadingAndError, { fallback: _jsx(CircularProgress, {}), children: _jsx(MaterialEvents, { highlightProcsGreaterOrEqualTo: highlightProcsGreaterOrEqualTo }) })] }));
+});
+function NotesDialogBody(props) {
+    const [curNote, setCurNote] = useState("");
+    const operator = useAtomValue(currentOperator);
+    const [addNote] = matDetails.useAddNote();
+    const mat = useAtomValue(matDetails.materialInDialogInfo);
+    if (mat === null)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(DialogContent, { children: _jsx(TextField, { sx: { mt: "5px" }, multiline: true, label: "Note", autoFocus: true, variant: "outlined", value: curNote, onChange: (e) => setCurNote(e.target.value) }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => {
+                            addNote({ matId: mat.materialID, process: 0, operator: operator, notes: curNote });
+                            props.setNotesOpen(false);
+                            setCurNote("");
+                        }, disabled: curNote === "", color: "secondary", children: "Save" }), _jsx(Button, { onClick: () => {
+                            props.setNotesOpen(false);
+                            setCurNote("");
+                        }, color: "secondary", children: "Cancel" })] })] }));
+}
+export function MaterialLoading() {
+    const toShow = useAtomValue(matDetails.materialDialogOpen);
+    if (toShow === null)
+        return null;
+    let msg;
+    switch (toShow.type) {
+        case "Barcode":
+            msg = "Loading material with barcode " + toShow.barcode + "...";
+            break;
+        case "AddMatWithEnteredSerial":
+        case "ManuallyEnteredSerial":
+            msg = "Loading material with serial " + toShow.serial + "...";
+            break;
+        default:
+            msg = "Loading material...";
+            break;
+    }
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [_jsx(CircularProgress, {}), _jsx("div", { style: { marginTop: "1em" }, children: msg })] }));
+}
+function AddNoteButton({ setNotesOpen }) {
+    const mat = useAtomValue(matDetails.materialInDialogInfo);
+    if (mat === null || mat.materialID < 0)
+        return null;
+    return (_jsx(Button, { onClick: () => setNotesOpen(true), color: "primary", children: "Add Note" }));
+}
+export const MaterialDialog = memo(function MaterialDialog(props) {
+    const [notesOpen, setNotesOpen] = useState(false);
+    const [dialogOpen, setOpen] = useAtom(matDetails.materialDialogOpen);
+    function close() {
+        setOpen(null);
+        if (props.onClose)
+            props.onClose();
+    }
+    let body;
+    let notesBody;
+    if (dialogOpen) {
+        body = (_jsxs(_Fragment, { children: [_jsx(DialogTitle, { children: _jsx(MaterialDialogTitle, {}) }), _jsx(DialogContent, { children: _jsxs(DisplayLoadingAndError, { fallback: _jsx(MaterialLoading, {}), children: [_jsx(MaterialDetailContent, { highlightProcsGreaterOrEqualTo: props.highlightProcsGreaterOrEqualTo }), _jsx(DisplayLoadingAndError, { fallback: _jsx(CircularProgress, {}), children: props.extraDialogElements })] }) }), _jsxs(DialogActions, { children: [dialogOpen && (props.buttons || props.allowNote) ? (_jsx(ErrorBoundary, { fallback: _jsx("div", {}), children: _jsxs(Suspense, { fallback: _jsx("div", {}), children: [dialogOpen && props.allowNote ? _jsx(AddNoteButton, { setNotesOpen: setNotesOpen }) : undefined, props.buttons] }) })) : null, _jsx(Button, { onClick: close, color: "secondary", children: "Close" })] })] }));
+        if (props.allowNote) {
+            notesBody = (_jsxs(_Fragment, { children: [_jsx(DialogTitle, { children: _jsx(MaterialDialogTitle, { notes: true }) }), _jsxs(DisplayLoadingAndError, { fallback: _jsx(DialogContent, { children: _jsx(CircularProgress, {}) }), children: [_jsx(NotesDialogBody, { setNotesOpen: setNotesOpen }), ";"] })] }));
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Dialog, { open: dialogOpen !== null, onClose: close, maxWidth: "lg", children: body }), props.allowNote ? (_jsx(Dialog, { open: notesOpen, onClose: () => setNotesOpen(false), maxWidth: "md", children: notesBody })) : undefined] }));
+});

package/dist/components/station-monitor/MoveMaterialArrows.d.ts

@@ -0,0 +1,11 @@
+import { RefObject, ReactNode } from "react";
+import { MoveMaterialNodeKind } from "../../data/move-arrows.js";
+export declare const MoveMaterialArrowContainer: import("react").NamedExoticComponent<{
+    children?: ReactNode;
+    hideArrows?: boolean;
+}>;
+export declare function useMoveMaterialArrowRef(kind: MoveMaterialNodeKind): RefObject<HTMLDivElement | null>;
+export declare function MoveMaterialArrowNode({ kind, children, }: {
+    kind: MoveMaterialNodeKind;
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/station-monitor/MoveMaterialArrows.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Copyright (c) 2022, John Lenz
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+
+    * Redistributions in binary form must reproduce the above
+      copyright notice, this list of conditions and the following
+      disclaimer in the documentation and/or other materials provided
+      with the distribution.
+
+    * Neither the name of John Lenz, Black Maple Software, SeedTactics,
+      nor the names of other contributors may be used to endorse or
+      promote products derived from this software without specific
+      prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+import { memo, useState, useEffect, createContext, useRef, useMemo, useContext, } from "react";
+import { computeArrows, uniqueIdForNodeKind, memoPropsForNodeKind, } from "../../data/move-arrows.js";
+import { HashMap } from "@seedtactics/immutable-collections";
+function elementToRect(e) {
+    const r = e.getBoundingClientRect();
+    return {
+        left: r.left + window.scrollX,
+        top: r.top + window.scrollY,
+        width: r.width,
+        height: r.height,
+        bottom: r.bottom + window.scrollY,
+        right: r.right + window.scrollX,
+    };
+}
+function arrowToPath(arr) {
+    // mid point of line
+    const mpx = (arr.fromX + arr.toX) / 2;
+    const mpy = (arr.fromY + arr.toY) / 2;
+    // angle of perpendicular to line
+    const theta = Math.atan2(arr.toY - arr.fromY, arr.toX - arr.fromX) + (Math.PI * arr.curveDirection) / 2;
+    // control points
+    const cx = mpx + 50 * Math.cos(theta);
+    const cy = mpy + 50 * Math.sin(theta);
+    return `M${arr.fromX},${arr.fromY} Q ${cx} ${cy} ${arr.toX} ${arr.toY}`;
+}
+const MoveMaterialArrows = memo(function MoveMaterialArrows({ container, arrowsWithRefs, }) {
+    const [, setDims] = useState({
+        height: window.innerHeight,
+        width: window.innerWidth,
+    });
+    useEffect(() => {
+        function handleResize() {
+            setDims({ height: window.innerHeight, width: window.innerWidth });
+        }
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [setDims]);
+    const arrows = computeArrows(container.current ? elementToRect(container.current) : null, arrowsWithRefs.collectValues((r) => r.elem.current ? { ...r, elem: elementToRect(r.elem.current) } : null));
+    return (_jsx("g", { children: arrows.map((arr, idx) => (_jsx("path", { style: { fill: "none", stroke: "rgba(0,0,0,0.15)", strokeWidth: 2 }, d: arrowToPath(arr), markerEnd: `url(#arrow)` }, idx))) }));
+});
+const MoveMaterialArrowCtx = createContext(undefined);
+export const MoveMaterialArrowContainer = memo(function MoveMaterialArrowContainer({ children, hideArrows, }) {
+    const container = useRef(null);
+    const [nodes, setNodes] = useState(HashMap.empty());
+    const ctx = useMemo(() => {
+        return {
+            registerNode(id, kind, ref) {
+                if (kind && ref) {
+                    setNodes((ns) => ns.set(id, { ...kind, elem: ref }));
+                }
+                else {
+                    setNodes((nodes) => nodes.delete(id));
+                }
+            },
+        };
+    }, [setNodes]);
+    return (_jsxs("div", { style: { position: "relative" }, children: [_jsxs("svg", { style: {
+                    position: "absolute",
+                    pointerEvents: "none",
+                    width: "100%",
+                    height: "100%",
+                    top: 0,
+                    right: 0,
+                }, children: [_jsx("defs", { children: _jsx("marker", { id: "arrow", markerWidth: 6, markerHeight: 10, refX: "0", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: _jsx("path", { d: "M0,0 L0,6 L5,3 z", fill: "rgba(0,0,0,0.15)" }) }) }), !hideArrows ? _jsx(MoveMaterialArrows, { container: container, arrowsWithRefs: nodes }) : undefined] }), _jsx("div", { ref: container, children: _jsx(MoveMaterialArrowCtx.Provider, { value: ctx, children: children }) })] }));
+});
+export function useMoveMaterialArrowRef(kind) {
+    const ctx = useContext(MoveMaterialArrowCtx);
+    if (!ctx) {
+        throw new Error("useMoveMaterialArrowRef must be used within a MoveMaterialArrowContainer");
+    }
+    const ref = useRef(null);
+    useEffect(() => {
+        const id = uniqueIdForNodeKind(kind);
+        ctx.registerNode(id, kind, ref);
+        return () => {
+            ctx.registerNode(id, null, null);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ctx, ...memoPropsForNodeKind(kind)]);
+    return ref;
+}
+export function MoveMaterialArrowNode({ kind, children, }) {
+    const ref = useMoveMaterialArrowRef(kind);
+    return _jsx("div", { ref: ref, children: children });
+}

package/dist/components/station-monitor/PrintedLabel.d.ts

@@ -0,0 +1,29 @@
+export interface PrintMaterial {
+    readonly partName: string;
+    readonly jobUnique: string;
+    readonly serial?: string;
+}
+export interface PrintedLabelProps {
+    readonly material: ReadonlyArray<PrintMaterial> | null;
+    readonly materialName?: string | null;
+    readonly operator?: string | null;
+    readonly oneJobPerPage: boolean;
+}
+export interface SinglePageProps {
+    readonly partName: string;
+    readonly materialName: string | null | undefined;
+    readonly count: number;
+    readonly uniq: string | null;
+    readonly jobCycles?: number | null | undefined;
+    readonly note: string | null | undefined;
+    readonly operator: string | null | undefined;
+    readonly serial1: string | undefined;
+    readonly serial2: string | undefined;
+}
+export declare function PrintedLabel(props: PrintedLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function PrintOnClientButton({ mat, materialName, operator, }: {
+    mat: PrintMaterial | ReadonlyArray<PrintMaterial>;
+    materialName?: string | null;
+    operator?: string | null;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PrintLabelButton(): import("react/jsx-runtime").JSX.Element | null;