@olenbetong/synergi-react 2.1.2 → 2.3.0

package/src/elements/ElementDamage/SubmitButtons.tsx

@@ -0,0 +1,40 @@
+import Add from "@mui/icons-material/Add";
+import { Box, Button, type SxProps, type Theme } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+
+type SubmitButtonsProps = {
+	/**
+	 * Whether the form is in edit mode. If true, delete button is visible and submit button's text changes.
+	 */
+	edit?: boolean;
+	/**
+	 * Set loading state for submit button
+	 */
+	loading?: boolean;
+	/**
+	 * Custom styles for Box wrapper around buttons
+	 */
+	sx?: SxProps<Theme>;
+	onDelete?: () => void;
+	onCancel?: () => void;
+	onSubmit?: () => void;
+};
+
+export function SubmitButtons({ edit, loading, onDelete, onCancel, onSubmit, sx }: SubmitButtonsProps) {
+	return (
+		<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2, justifyContent: "flex-end", ...sx }}>
+			{edit && <Button onClick={onDelete}>{getLocalizedString("Delete")}</Button>}
+			<Button onClick={onCancel}>{getLocalizedString("Cancel")}</Button>
+			<Button
+				loading={loading}
+				loadingPosition="start"
+				startIcon={<Add />}
+				type="submit"
+				variant="contained"
+				onClick={onSubmit}
+			>
+				{edit ? getLocalizedString("Save changes") : getLocalizedString("Register damage")}
+			</Button>
+		</Box>
+	);
+}

package/src/elements/ElementDamage/TransportElementSelect.tsx

@@ -0,0 +1,52 @@
+import DropDownArrowIcon from "@mui/icons-material/KeyboardArrowDown";
+import { Button, ListItemText, Menu, MenuItem } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useState } from "react";
+import type { TransportElementsRecord } from "../data/dsTransportElements.js";
+
+type TransportElementSelectProps = {
+	elements: TransportElementsRecord[];
+	onSelect: (element: TransportElementsRecord) => void;
+};
+
+export function TransportElementSelect({ elements, onSelect }: TransportElementSelectProps) {
+	let [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+	let open = !!anchorEl;
+	let [selected, setSelected] = useState<TransportElementsRecord | null>(null);
+
+	function handleChange(element: TransportElementsRecord) {
+		setAnchorEl(null);
+		onSelect(element);
+		setSelected(element);
+	}
+
+	return (
+		<>
+			<Button
+				id="select_element"
+				variant="contained"
+				endIcon={
+					<DropDownArrowIcon
+						style={{ transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s" }}
+					/>
+				}
+				sx={{ width: "165px" }}
+				aria-controls={open ? "basic-menu" : undefined}
+				aria-haspopup="true"
+				aria-expanded={open ? "true" : undefined}
+				onClick={(event) => setAnchorEl(event.currentTarget)}
+			>
+				{selected ? `${selected.ElementID} - ${selected.Name}` : getLocalizedString("Select element")}
+			</Button>
+			<Menu id="menu_element" anchorEl={anchorEl} open={open} onClose={() => setAnchorEl(null)}>
+				{elements.map((element) => (
+					<MenuItem key={element.PrimKey} onClick={() => handleChange(element)}>
+						<ListItemText>
+							{element.ElementID} - {element.Name}
+						</ListItemText>
+					</MenuItem>
+				))}
+			</Menu>
+		</>
+	);
+}

package/src/elements/ElementDamage/index.css

@@ -0,0 +1,3 @@
+.flow > * + * {
+	margin-top: var(--spacing, 1rem) !important;
+}

package/src/elements/ElementLookup.tsx

@@ -0,0 +1,90 @@
+import SearchIcon from "@mui/icons-material/Search";
+import { IconButton, TextField } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { type RefObject, useEffect, useImperativeHandle, useState } from "react";
+import { type AddElement, ElementLookupDialog } from "./ElementLookupDialog";
+
+export type Element = {
+	Domain: string;
+	PrimKey: string;
+	ProjectID: string;
+	ProjectName: string;
+	ElementID: string | null;
+};
+
+export type ElementLookupHandle = {
+	openDialog: () => void;
+	closeDialog: () => void;
+};
+
+export type ElementLookupProps = {
+	value?: Element | null;
+	defaultValue?: Element | null;
+	ref?: RefObject<ElementLookupHandle | null>;
+	openLookupDialogIcon?: boolean;
+	onChange?: (value: Element | null) => void;
+};
+
+export function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon, onChange }: ElementLookupProps) {
+	let [openElementLookupDialog, setOpenElementLookupDialog] = useState<boolean>(false);
+	let [element, setElement] = useState<Element | null>(defaultValue ?? null);
+	let elementValue = value === undefined ? element : value;
+
+	useEffect(() => {
+		if (value === undefined && defaultValue) {
+			setElement(defaultValue);
+		}
+	}, [defaultValue, value]);
+
+	useImperativeHandle(ref, () => ({
+		openDialog: () => setOpenElementLookupDialog(true),
+		closeDialog: () => setOpenElementLookupDialog(false),
+	}));
+
+	async function handleAddElement(addElement: AddElement) {
+		onChange?.(addElement.element);
+		setElement(addElement.element);
+	}
+
+	return (
+		<>
+			<ElementLookupDialog
+				open={openElementLookupDialog}
+				mode="single"
+				onClose={() => setOpenElementLookupDialog(false)}
+				onAdd={handleAddElement}
+			/>
+
+			<input type="hidden" name="ProjectID" value={elementValue?.ProjectID ?? ""} />
+			<input type="hidden" name="ElementRef" value={elementValue?.PrimKey ?? ""} />
+
+			<TextField
+				id="NewElementDamge_Project"
+				value={elementValue ? `${elementValue.ProjectID}: ${elementValue.ProjectName}` : ""}
+				label={getLocalizedString("Project")}
+				fullWidth
+				required
+				autoComplete="off"
+				slotProps={{ htmlInput: { readOnly: true } }}
+			/>
+			<TextField
+				name="ElementID"
+				id="NewElementDamage_ElementID"
+				value={elementValue ? elementValue.ElementID : ""}
+				label={getLocalizedString("Element ID")}
+				fullWidth
+				autoComplete="off"
+				slotProps={{
+					htmlInput: { readOnly: true },
+					input: {
+						endAdornment: openLookupDialogIcon ? (
+							<IconButton onClick={() => setOpenElementLookupDialog(true)}>
+								<SearchIcon />
+							</IconButton>
+						) : undefined,
+					},
+				}}
+			/>
+		</>
+	);
+}

package/src/elements/ElementLookupDialog/BarcodeScanner/DeadIcon.tsx

@@ -0,0 +1,12 @@
+import { SvgIcon, type SvgIconProps } from "@mui/material";
+
+export function Dead(props: SvgIconProps) {
+	return (
+		<SvgIcon {...props}>
+			<path
+				fill="currentColor"
+				d="M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2M6.76,8.82L7.82,7.76L8.88,8.82L9.94,7.76L11,8.82L9.94,9.88L11,10.94L9.94,12L8.88,10.94L7.82,12L6.76,10.94L7.82,9.88L6.76,8.82M6.89,17.5C7.69,15.46 9.67,14 12,14C14.33,14 16.31,15.46 17.11,17.5H6.89M17.24,10.94L16.18,12L15.12,10.94L14.06,12L13,10.94L14.06,9.88L13,8.82L14.06,7.76L15.12,8.82L16.18,7.76L17.24,8.82L16.18,9.88L17.24,10.94Z"
+			/>
+		</SvgIcon>
+	);
+}

package/src/elements/ElementLookupDialog/BarcodeScanner/Error.tsx

@@ -0,0 +1,46 @@
+import styled from "@emotion/styled";
+import Camera from "@mui/icons-material/Camera";
+
+import { Dead as DeadIcon } from "./DeadIcon";
+
+const BarcodeError = styled.div`
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	top: 0;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`;
+
+const ErrorBox = styled.div`
+	background: #111111;
+	border: 1px solid #3e3e3e;
+	border-radius: 3px;
+
+	max-width: 100%;
+	width: 335px;
+
+	color: white;
+	text-align: center;
+`;
+
+export function ErrorIcon({ icon, message }: { icon?: string; message: string }) {
+	let Icon: React.FC<any> = DeadIcon;
+
+	if (icon === "camera") {
+		Icon = Camera;
+	}
+
+	return (
+		<BarcodeError>
+			<ErrorBox>
+				<Icon sx={{ color: "#eee", fontSize: "3.5rem", my: 2 }} />
+				<br />
+				<p>{message}</p>
+			</ErrorBox>
+		</BarcodeError>
+	);
+}

package/src/elements/ElementLookupDialog/BarcodeScanner/index.tsx

@@ -0,0 +1,75 @@
+import SwitchCameraOutlined from "@mui/icons-material/SwitchCameraOutlined";
+import { Box, IconButton, type SxProps } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import type BarcodeReaderType from "dynamsoft-javascript-barcode";
+import { useRef } from "react";
+import { ErrorIcon } from "./Error";
+import { useScanner } from "./useScanner";
+
+declare global {
+	interface Window {
+		BarcodeReader: typeof BarcodeReaderType;
+	}
+}
+
+export type BarcodeScannerProps = {
+	onRead: (barcode: string) => void;
+};
+
+const frameSx: SxProps = {
+	position: "absolute",
+	bottom: 0,
+	left: 0,
+	right: 0,
+	top: 0,
+	height: "100%",
+	width: "100%",
+};
+
+export function BarcodeScanner({ onRead }: BarcodeScannerProps) {
+	let readerRoot = useRef<HTMLElement | null>(null);
+	let canvas = useRef<HTMLCanvasElement | null>(null);
+	let { devices, error, setNextDevice } = useScanner(readerRoot, canvas, onRead);
+
+	return (
+		<Box
+			sx={{
+				position: "relative",
+				bgcolor: "black",
+				height: "100%",
+			}}
+		>
+			<Box height="100%" ref={readerRoot}>
+				<Box component="video" className="dbrScanner-video" playsInline sx={frameSx} />
+				<Box component="canvas" sx={frameSx} width="1280" height="720" ref={canvas} />
+				{error && <ErrorIcon {...error} />}
+			</Box>
+			<Box
+				sx={{
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					position: "absolute",
+					bottom: 0,
+					left: 0,
+					right: 0,
+					py: 1,
+					px: 3,
+					color: "white",
+				}}
+			>
+				{devices.length <= 1 && <span />}
+				{devices.length > 1 && (
+					<IconButton
+						color="inherit"
+						aria-label={getLocalizedString("Switch camera")}
+						onClick={() => setNextDevice()}
+						size="large"
+					>
+						<SwitchCameraOutlined />
+					</IconButton>
+				)}
+			</Box>
+		</Box>
+	);
+}

package/src/elements/ElementLookupDialog/BarcodeScanner/useScanner.ts

@@ -0,0 +1,170 @@
+import { getLocalizedString } from "@olenbetong/appframe-core";
+
+import type BarcodeReaderType from "dynamsoft-javascript-barcode";
+// import BarcodeReader from "dynamsoft-javascript-barcode";
+import { type RefObject, useEffect, useRef, useState } from "react";
+
+declare global {
+	interface Window {
+		BarcodeReader: typeof BarcodeReaderType;
+	}
+}
+
+// (window as any).BarcodeReader = BarcodeReader;
+const { BarcodeReader } = window;
+
+export function useScanner(
+	rootRef: RefObject<HTMLElement | null>,
+	canvasRef: RefObject<HTMLCanvasElement | null>,
+	onRead: (barcode: string) => void,
+) {
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState<{ message: string; icon: string } | null>(null);
+	const [rects, setRects] = useState<Array<BarcodeReaderType.LocalizationResult>>([]);
+	const [devices, setDevices] = useState<BarcodeReaderType.ScannerOpenCallbackInfo>({
+		all: [],
+		current: { deviceId: "", label: "" },
+		width: 0,
+		height: 0,
+	});
+	const currentDevice = useRef<number>(null);
+	const onReadRef = useRef(onRead);
+	const scanner = useRef<BarcodeReaderType.Scanner>(null);
+
+	useEffect(() => {
+		onReadRef.current = onRead;
+	}, [onRead]);
+
+	useEffect(() => {
+		if (!rootRef.current) return;
+
+		let cancel = false;
+		const iPhone = /iPhone|iPad/.test(navigator.userAgent);
+		scanner.current = new BarcodeReader.Scanner({
+			duplicateForgetTime: 1000,
+			htmlElement: rootRef.current,
+			videoSettings: {
+				video: {
+					width: { ideal: iPhone ? 1280 : 720 },
+					height: { ideal: iPhone ? 1280 : 720 },
+					facingMode: { ideal: "environment" },
+				},
+			},
+			runtimeSettings: {
+				mBarcodeFormatIds: BarcodeReader.EnumBarcodeFormat.DATAMATRIX,
+				mAntiDamageLevel: 3,
+				mDeblurLevel: 0,
+			},
+			onFrameRead: (results) => {
+				const newRects: Array<BarcodeReaderType.LocalizationResult> = [];
+
+				for (let result of results) {
+					newRects.push(result.LocalizationResult);
+				}
+
+				if (newRects.length > 0) {
+					setRects((rects) => [...rects, ...newRects]);
+
+					setTimeout(() => {
+						if (!cancel) {
+							setRects((rects) => rects.slice(newRects.length));
+						}
+					}, 300);
+				}
+			},
+
+			onNewCodeRead: (txt) => {
+				if (txt) {
+					onReadRef.current(txt);
+				}
+			},
+		});
+
+		scanner.current
+			.open()
+			.then((videoDeviceInfo) => {
+				if (cancel === false) {
+					const { all, current } = videoDeviceInfo;
+					currentDevice.current = 0;
+
+					if (current?.deviceId) {
+						for (let i = 0; i < all.length; i++) {
+							if (all[i].deviceId === current.deviceId) {
+								currentDevice.current = i;
+							}
+						}
+					}
+
+					setDevices(videoDeviceInfo);
+					setIsLoading(false);
+				}
+			})
+			.catch((ex) => {
+				if (cancel === false) {
+					let error = ex.message || ex;
+					setIsLoading(false);
+
+					if (/Webassembly/.test(error)) {
+						setError({
+							icon: "unsupported",
+							message: getLocalizedString(
+								"Your browser is not supported. A browser that supports WebAssembly is required.",
+							),
+						});
+					} else if (
+						/Permission/i.test(error) ||
+						/video/i.test(error) ||
+						/device/i.test(error) ||
+						/Media/i.test(error) ||
+						/agent/.test(error) ||
+						/found/.test(error)
+					)
+						setError({
+							icon: "camera",
+							message: getLocalizedString("No camera available"),
+						});
+					else {
+						setError({ icon: "generic", message: error });
+					}
+				}
+			});
+
+		return () => {
+			cancel = true;
+
+			if (scanner.current && typeof scanner.current.close === "function") {
+				scanner.current.close();
+			}
+		};
+	}, [rootRef]);
+
+	useEffect(() => {
+		if (canvasRef.current) {
+			const ctx = canvasRef.current.getContext("2d") as CanvasRenderingContext2D;
+			ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+			ctx.fillStyle = "rgba(254,180,32,0.3)";
+
+			const { width, height } = canvasRef.current;
+			const xRatio = width / devices.width;
+			const yRatio = height / devices.height;
+
+			for (let rect of rects) {
+				const { X1, X2, X3, X4, Y1, Y2, Y3, Y4 } = rect;
+
+				ctx.beginPath();
+				ctx.moveTo(X1 * xRatio, Y1 * yRatio);
+				ctx.lineTo(X2 * xRatio, Y2 * yRatio);
+				ctx.lineTo(X3 * xRatio, Y3 * yRatio);
+				ctx.lineTo(X4 * xRatio, Y4 * yRatio);
+				ctx.fill();
+			}
+		}
+	}, [devices, canvasRef, rects]);
+
+	function setNextDevice() {
+		currentDevice.current = ((currentDevice.current ?? 0) + 1) % devices.all.length;
+		scanner.current?.play(devices.all[currentDevice.current].deviceId);
+	}
+
+	return { devices: devices.all, error, isLoading, setNextDevice };
+}

package/src/elements/ElementLookupDialog/HIDScanner/index.css

@@ -0,0 +1,17 @@
+@property --angle {
+	syntax: "<angle>";
+	inherits: false;
+	initial-value: 0deg;
+}
+
+@keyframes MovingBackground {
+	0% {
+		--angle: 0deg;
+	}
+	50% {
+		--angle: 180deg;
+	}
+	100% {
+		--angle: 360deg;
+	}
+}

package/src/elements/ElementLookupDialog/HIDScanner/index.tsx

@@ -0,0 +1,67 @@
+import "./index.css";
+
+import { Box, Button } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+
+import { useEffect, useRef, useState } from "react";
+
+import { useHIDScanner } from "./useHIDScanner";
+
+export function AddElementHIDScanner({ onScan }: { onScan: (id: string) => void }) {
+	let [enabled, setEnabled] = useState(false);
+	let root = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (!root.current) return;
+
+		let rootElem = root.current;
+
+		function handleFocus() {
+			setEnabled(true);
+		}
+
+		function handleBlur() {
+			setEnabled(false);
+		}
+
+		rootElem.addEventListener("focus", handleFocus);
+		rootElem.addEventListener("blur", handleBlur);
+		rootElem.focus();
+
+		return () => {
+			rootElem.removeEventListener("focus", handleFocus);
+			rootElem.removeEventListener("blur", handleBlur);
+		};
+	}, []);
+
+	useHIDScanner(onScan, enabled);
+
+	return (
+		<Box
+			height="100%"
+			bgcolor="#ddd"
+			display="flex"
+			alignItems="center"
+			justifyContent="center"
+			tabIndex={0}
+			ref={root}
+			sx={{
+				backgroundImage: enabled ? "linear-gradient(var(--angle), #777, #bbb, #777)" : "none",
+				animation: enabled ? "MovingBackground 8s linear infinite" : "none",
+			}}
+		>
+			{enabled ? (
+				<span>{getLocalizedString("Listening for scanned elements")}...</span>
+			) : (
+				<Button
+					variant="contained"
+					onClick={() => {
+						if (root.current) root.current.focus();
+					}}
+				>
+					{getLocalizedString("Start listening")}
+				</Button>
+			)}
+		</Box>
+	);
+}

package/src/elements/ElementLookupDialog/HIDScanner/useHIDScanner.ts

@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+
+export function useHIDScanner(onRead: (value: string) => void, enabled = false) {
+	useEffect(() => {
+		if (!enabled) return;
+
+		let hexKeys = "ABCDEFabcdefxX0123456789";
+		let buffer = "";
+		let clearBufferTimeout: NodeJS.Timeout;
+
+		function handleKeyDownEvent(event: KeyboardEvent) {
+			if (hexKeys.includes(event.key)) {
+				clearTimeout(clearBufferTimeout);
+				buffer += event.key;
+				clearBufferTimeout = setTimeout(() => {
+					buffer = "";
+				}, 500);
+			} else if (event.key === "Enter") {
+				onRead(buffer);
+				buffer = "";
+			}
+		}
+
+		document.body.addEventListener("keydown", handleKeyDownEvent);
+
+		return () => {
+			document.body.removeEventListener("keydown", handleKeyDownEvent);
+		};
+	}, [onRead, enabled]);
+}