@olenbetong/synergi-react 2.1.2 → 2.3.0

package/src/elements/ElementLookupDialog/Manual/ManualForm.tsx

@@ -0,0 +1,110 @@
+import Add from "@mui/icons-material/Add";
+import { Alert, Button, TextField } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useId, useRef, useState } from "react";
+import type { ProjectsRecord } from "../../data/dsProjects";
+import { ProjectSelect } from "../../ProjectSelect";
+import { type ElementDetails, getElement } from "../getElement";
+
+const isElementsOnly = /^([a-z]{2,4}[\s]*[0-9]{4,8}[\s,]*)+$/i;
+const matchElements = /([a-z]{2,4}[\s]*[0-9]{4,8})/gi;
+
+export type ProjectRecordBase = {
+	Domain: string;
+	ProjectID: string;
+	ProjectName?: string;
+};
+
+export type AddElementManualFormProps = {
+	onAdd: (element: string | ElementDetails) => Promise<void>;
+	mode?: "single" | "multi";
+	defaultProject?: ProjectRecordBase;
+};
+
+export function AddElementManualForm({ onAdd, mode, defaultProject }: AddElementManualFormProps) {
+	let id = useId();
+	let buttonRef = useRef<HTMLButtonElement>(null);
+	let [working, setWorking] = useState(false);
+	let [elementId, setElementId] = useState<string>("");
+	let [project, setProject] = useState<Partial<ProjectsRecord> | null>(defaultProject ?? null);
+
+	async function handleSubmit(evt: React.FormEvent<HTMLFormElement>) {
+		try {
+			evt.preventDefault();
+			evt.stopPropagation();
+			let formData = new FormData(evt.target as HTMLFormElement);
+			let elements = formData.get("ElementID");
+			let domain = formData.get("Domain");
+			let projectId = formData.get("ProjectID");
+
+			if (!projectId || !domain || !elements) {
+				let warning = getLocalizedString(
+					mode === "multi" ? "Project and elements are required" : "Project and element are required",
+				);
+				alert(warning);
+				return;
+			}
+
+			setWorking(true);
+			let record = (elements as string)
+				.match(matchElements)
+				?.map((elementId) => elementId.replace(/\s+/g, ""))
+				.map((elementId) => getElement({ projectId: projectId as string, elementId: elementId }, { mode: "manual" }));
+
+			if (!record) {
+				alert(getLocalizedString("Invalid elements"));
+				return;
+			}
+
+			let loaded = (await Promise.all(record)).map((record) => onAdd(record));
+			await Promise.all(loaded);
+			setWorking(false);
+		} catch (error) {
+			setWorking(false);
+			alert((error as Error).message);
+		}
+	}
+
+	return (
+		<form id={id} onSubmit={handleSubmit} method="post">
+			<Alert severity="warning" sx={{ mb: 2 }}>
+				{getLocalizedString(
+					"Manually entering elements is a major source of errors. Only use this as a last resort. If the camera or scanner is not working, please contact the IT department.",
+				)}
+			</Alert>
+
+			<ProjectSelect
+				onChange={(project) => (project ? setProject(project) : setProject(null))}
+				value={project}
+				id="AddElement_Project"
+			/>
+
+			<TextField
+				variant="filled"
+				fullWidth
+				autoComplete="off"
+				margin="normal"
+				name="ElementID"
+				id="AddElement_ElementID"
+				label={getLocalizedString("Element ID")}
+				value={elementId}
+				onChange={(evt) => setElementId(evt.target.value)}
+			/>
+
+			<Button
+				form={id}
+				ref={buttonRef}
+				color="primary"
+				variant="contained"
+				size="large"
+				type="submit"
+				disabled={!isElementsOnly.test(elementId) || working}
+				loading={working}
+				loadingPosition="end"
+				endIcon={<Add />}
+			>
+				{getLocalizedString("Add")}
+			</Button>
+		</form>
+	);
+}

package/src/elements/ElementLookupDialog/getElement.ts

@@ -0,0 +1,89 @@
+import { logActivity, startActivity } from "@olenbetong/appframe-core";
+import { DataProviderHandlerAPI } from "@olenbetong/appframe-data";
+import Giai from "./utils/Giai";
+
+export type AddElementSource = "manual" | "camera-barcode" | "loading-list" | "hid-barcode" | "hid-rfid";
+
+export type ElementDetails = {
+	Domain: string;
+	PrimKey: string;
+	Created: Date;
+	ProjectID: string;
+	ProjectName: string;
+	ProjectDomain: string;
+	ElementID: string;
+	DisplayName: string;
+	GiaiUri: string;
+};
+
+const elementsDataHandler = new DataProviderHandlerAPI<ElementDetails>({
+	dataSourceId: "aviw_Fleet_DeliveryTickets_ElementsLookup",
+	fields: [
+		{ name: "PrimKey", type: "string" },
+		{ name: "Created", type: "datetime" },
+		{ name: "Domain", type: "string" },
+		{ name: "ProjectID", type: "string" },
+		{ name: "ProjectName", type: "string" },
+		{ name: "ProjectDomain", type: "string" },
+		{ name: "ElementID", type: "string" },
+		{ name: "DisplayName", type: "string" },
+		{ name: "GiaiUri", type: "string" },
+	],
+});
+
+const elementDetailsCache = new Map<string, ElementDetails>();
+
+export type ElementFilter = {
+	projectId: string;
+	elementId: string;
+};
+
+export type GetElementContext = {
+	filter?: string | ElementFilter;
+	mode?: AddElementSource;
+	method?: "cache" | "database";
+	result?: null | ElementDetails;
+};
+
+export async function getElement(id: string | ElementFilter, context: GetElementContext): Promise<ElementDetails> {
+	let details: ElementDetails;
+	context.filter = id;
+
+	if (typeof id === "string" && elementDetailsCache.has(id)) {
+		details = elementDetailsCache.get(id) as ElementDetails;
+		context.method = "cache";
+		context.result = details;
+		logActivity("GetElement", context);
+	} else {
+		context.method = "database";
+
+		let logActivity = startActivity("GetElement", context);
+		let whereClause: string;
+		if (typeof id === "string") {
+			let uri = Giai.fromString(id);
+			whereClause = `[GiaiUri] = '${uri.toEpcPureIdentityUri()}'`;
+		} else {
+			whereClause = `[ProjectID] = '${id.projectId}' AND [ElementID] = '${id.elementId}'`;
+		}
+
+		let result = await elementsDataHandler.retrieve<ElementDetails>({
+			whereClause,
+		});
+
+		if (!result.length) {
+			context.result = null;
+			logActivity();
+			throw Error(`Element not found`);
+		}
+
+		details = result[0];
+		context.result = details;
+		logActivity();
+
+		if (typeof id === "string") {
+			elementDetailsCache.set(id, details);
+		}
+	}
+
+	return details;
+}

package/src/elements/ElementLookupDialog/index.tsx

@@ -0,0 +1,211 @@
+import Add from "@mui/icons-material/Add";
+import DeleteForeverOutlined from "@mui/icons-material/DeleteForeverOutlined";
+import Edit from "@mui/icons-material/Edit";
+import QrCodeScanner from "@mui/icons-material/QrCodeScanner";
+import TapAndPlay from "@mui/icons-material/TapAndPlay";
+import { Alert, Box, Button, DialogActions, List, ListItem, ListItemText, Tab, Tabs } from "@mui/material";
+import { getLocalizedString, localize } from "@olenbetong/appframe-core";
+import { ResponsiveDialog } from "@olenbetong/appframe-mui";
+import { useEffect, useState } from "react";
+import { flushSync } from "react-dom";
+import { BarcodeScanner } from "./BarcodeScanner";
+import { type AddElementSource, type ElementDetails, getElement } from "./getElement";
+import { AddElementHIDScanner } from "./HIDScanner";
+import { AddElementManualForm } from "./Manual/ManualForm";
+import { useBeeper } from "./utils/beep";
+import Giai from "./utils/Giai";
+
+export type AddElement = {
+	element: ElementDetails;
+	mode: AddElementSource;
+	scanTime?: number;
+};
+
+type InitialTabProps = "camera" | "scanner" | "manual";
+
+export type ElementLookupDialogSharedProps = {
+	open: boolean;
+	onClose: () => void;
+	initialTab?: InitialTabProps | null;
+	useSearch?: boolean;
+};
+
+export type ElementLookupDialogSingleModeProps = ElementLookupDialogSharedProps & {
+	mode: "single" | "search";
+	onAdd: (element: AddElement) => Promise<void>;
+};
+
+export type ElementLookupDialogMultiModeProps = ElementLookupDialogSharedProps & {
+	mode: "multi";
+	onAdd: (element: AddElement[]) => Promise<void>;
+};
+
+export type ElementLookupDialogProps = ElementLookupDialogSingleModeProps | ElementLookupDialogMultiModeProps;
+
+export function ElementLookupDialog(props: ElementLookupDialogProps) {
+	let { open, onClose, initialTab } = props;
+	let [tab, setTab] = useState<"camera" | "scanner" | "manual">("camera");
+	let [elements, setElements] = useState<Array<AddElement>>([]);
+	let [adding, setAdding] = useState(false);
+	let beeper = useBeeper();
+
+	useEffect(() => {
+		if (open && initialTab) {
+			setTab(initialTab);
+		}
+	}, [open, initialTab]);
+
+	async function handleElementAdd(element: string | ElementDetails, mode: AddElementSource) {
+		try {
+			let record = typeof element === "string" ? await getElement(element.replace("\u001d", ""), { mode }) : element;
+
+			// Flush changes to DOM to be able to query newly added elements and animate their background
+			flushSync(() => {
+				setElements((current) => {
+					let now = Date.now();
+					let exists = current.some((e) => e.element.ElementID === record.ElementID);
+					let updated: Array<AddElement>;
+
+					if (exists) {
+						updated = current.map((e) => (e.element.ElementID === record.ElementID ? { ...e, scanTime: now } : e));
+					} else {
+						beeper();
+						updated =
+							props.mode === "multi"
+								? [{ element: record, mode, scanTime: now }, ...current]
+								: [{ element: record, mode, scanTime: now }];
+					}
+
+					if (props.mode === "multi") {
+						updated.sort((a, b) => (b.scanTime ?? 0) - (a.scanTime ?? 0));
+					}
+
+					return updated;
+				});
+			});
+
+			let addedDomElement = document.querySelector(`[data-elementid="${record.ElementID}"]`);
+			if (addedDomElement) {
+				addedDomElement.animate(
+					[
+						{ backgroundColor: "var(--brand-light)", offset: 0 },
+						{ backgroundColor: "var(--brand-light)", offset: 0.2 },
+						{ backgroundColor: "transparent" },
+					],
+					{
+						duration: 1000,
+						easing: "ease-out",
+					},
+				);
+			}
+		} catch (error) {
+			alert((error as Error).message);
+		}
+	}
+
+	if (tab === "manual" && props.mode === "search") {
+		tab = "camera";
+	}
+
+	return (
+		<ResponsiveDialog
+			open={open}
+			onClose={onClose}
+			slotProps={{
+				paper: { sx: { overflow: "hidden" } },
+			}}
+		>
+			<Box display="flex" flexDirection="column" maxHeight="100%" overflow="hidden" flexGrow={1}>
+				<Tabs value={tab} onChange={(_, newTab) => setTab(newTab)} variant="fullWidth" sx={{ flexShrink: 0 }}>
+					{props.mode !== "search" && <Tab icon={<Edit />} label={getLocalizedString("Manual")} value="manual" />}
+					<Tab icon={<TapAndPlay />} label={getLocalizedString("Scanner")} value="scanner" />
+					<Tab icon={<QrCodeScanner />} label={getLocalizedString("Camera")} value="camera" />
+				</Tabs>
+				{tab === "camera" && (
+					<Box flexBasis="12rem" flexGrow={1} flexShrink={2}>
+						<BarcodeScanner onRead={(element) => handleElementAdd(element, "camera-barcode")} />
+					</Box>
+				)}
+				{tab === "manual" && (
+					<Box p={2}>
+						<AddElementManualForm onAdd={(element) => handleElementAdd(element, "manual")} />
+					</Box>
+				)}
+				{tab === "scanner" && (
+					<Box flexBasis="12rem" flexGrow={1} flexShrink={2}>
+						<AddElementHIDScanner
+							onScan={(element) =>
+								handleElementAdd(element, element.startsWith(Giai.BARCODE_PREFIX) ? "hid-barcode" : "hid-rfid")
+							}
+						/>
+					</Box>
+				)}
+
+				<Box flex="3 1 14rem" overflow="auto">
+					{props.mode === "multi" && (
+						<Alert
+							icon={false}
+							severity="info"
+							sx={{ justifyContent: "center", py: 0, position: "sticky", top: 0, zIndex: 1 }}
+							slotProps={{
+								message: { sx: { py: 0.5 } },
+							}}
+						>{localize`${elements.length} elements selected`}</Alert>
+					)}
+					<List disablePadding>
+						{elements.map(({ element }) => (
+							<ListItem
+								key={element.ElementID}
+								data-elementid={element.ElementID}
+								secondaryAction={
+									<Button
+										color="error"
+										variant="outlined"
+										onClick={() => {
+											setElements((current) =>
+												props.mode === "multi" ? current.filter((e) => e.element.ElementID !== element.ElementID) : [],
+											);
+										}}
+									>
+										<DeleteForeverOutlined />
+									</Button>
+								}
+							>
+								<ListItemText primary={element.DisplayName} secondary={element.ElementID} />
+							</ListItem>
+						))}
+					</List>
+				</Box>
+
+				<DialogActions sx={{ flexShrink: 0 }}>
+					<Button onClick={onClose}>{getLocalizedString("Cancel")}</Button>
+					<Button
+						variant="contained"
+						loading={adding}
+						onClick={async () => {
+							try {
+								setAdding(true);
+								if (props.mode === "multi") {
+									await props.onAdd(elements);
+								} else {
+									await props.onAdd(elements[0]!);
+								}
+								setElements([]);
+								setAdding(false);
+								onClose();
+							} catch (error) {
+								setAdding(false);
+								alert((error as Error).message);
+							}
+						}}
+						startIcon={<Add />}
+						loadingPosition="start"
+						disabled={!elements.length}
+					>
+						{props.mode === "search" ? getLocalizedString("Search for element") : getLocalizedString("Add element")}
+					</Button>
+				</DialogActions>
+			</Box>
+		</ResponsiveDialog>
+	);
+}

package/src/elements/ElementLookupDialog/utils/Giai.ts

@@ -0,0 +1,209 @@
+import { getLocalizedString } from "@olenbetong/appframe-core";
+
+export type GiaiProps = {
+	assetReference: string | number | bigint;
+	companyPrefix: string | number | bigint;
+	filter?: string | number | undefined;
+};
+
+/**
+ * GIAI-96 encoder and decoder as defined by the GS1 EPC Tag data standard
+ */
+export default class Giai {
+	/// Bit lengths for company prefix given partition equal to index.
+	///
+	/// Partition   Company prefix          Individual asset reference
+	///             Bits    Digits          Bits        Digits
+	///   0          40       12             42           13
+	///   1          37       11             45           14
+	///   2          34       10             48           15
+	///   3          30        9             52           16
+	///   4          27        8             55           17
+	///   5          24        7             58           18
+	///   6          20        6             62           19
+	static PARTITION_TABLE = [40, 37, 34, 30, 27, 24, 20];
+	// EPC header for GIAI-96 coding scheme
+	static EPC_HEADER = "00110100";
+	// Prefix for GS1 key used in barcodes;
+	static BARCODE_PREFIX = "8004";
+	// Group separator used to separate company prefix and asset reference (FNC1 in GS1-128 barcodes)
+	static GROUP_SEPARATOR = String.fromCodePoint(0x001d);
+
+	static URN_PREFIX = "urn:epc:id:giai:";
+
+	static fromHex = (hexIdentifier: string) => {
+		const bitIdentifier = hexToBitString(hexIdentifier);
+
+		if (bitIdentifier.substring(0, 8) !== Giai.EPC_HEADER) {
+			throw new Error("EPC value is not a valid GIAI value.");
+		}
+
+		const partition = Number.parseInt(bitIdentifier.substr(11, 3), 2);
+		const companyPrefixLength = Giai.PARTITION_TABLE[partition];
+		const filter = Number.parseInt(bitIdentifier.substring(8, 11), 2);
+		const companyPrefix = BigInt(`0b${bitIdentifier.substring(14, 14 + companyPrefixLength)}`);
+		const assetReference = BigInt(`0b${bitIdentifier.substring(14 + companyPrefixLength)}`);
+
+		return new Giai({ assetReference, companyPrefix, filter });
+	};
+
+	/**
+	 *
+	 * @param {string | null | undefined} barcodeString
+	 * @returns
+	 */
+	static fromBarcode = (barcodeString: string) => {
+		const prefixLength = Giai.BARCODE_PREFIX.length;
+
+		if (barcodeString[0] === Giai.GROUP_SEPARATOR) {
+			barcodeString = barcodeString.substr(1);
+		}
+
+		if (barcodeString.substr(0, prefixLength) !== Giai.BARCODE_PREFIX) {
+			throw new Error(`Barcode is not a valid GIAI barcode. (${Giai.BARCODE_PREFIX} prefix expected)`);
+		}
+
+		let giaiString = barcodeString.substring(prefixLength);
+		const gsIndex = giaiString.indexOf(Giai.GROUP_SEPARATOR);
+
+		if (gsIndex >= 0) {
+			return new Giai({
+				assetReference: giaiString.substring(gsIndex + 1),
+				companyPrefix: giaiString.substring(0, gsIndex),
+			});
+		}
+
+		// If no separator is found, assume a company prefix length of 7
+		return new Giai({
+			assetReference: giaiString.substring(7),
+			companyPrefix: giaiString.substring(0, 7),
+		});
+	};
+
+	/**
+	 * Creates a GIAI instance from a purse identity URI (urn:epc:giai:[companyprefix].[assetreference])
+	 * @param {string} uri EPC GIAI pure identity URI
+	 */
+	static fromEpcPureIdentityUri(uri: string) {
+		if (!uri.startsWith(Giai.URN_PREFIX)) {
+			throw Error("URI is not a valid GIAI URI");
+		}
+
+		let [companyPrefix, assetReference] = uri.substring(Giai.URN_PREFIX.length).split(".");
+
+		return new Giai({
+			assetReference,
+			companyPrefix,
+		});
+	}
+
+	/**
+	 * Attempt to create a GIAI instance from a string with unknown format. Could be either a URN, barcode value
+	 * or EPC value.
+	 * @param {string} value
+	 * @returns
+	 */
+	static fromString(value: string, ignoreError?: false): Giai;
+	static fromString(value: string, ignoreError: true): Giai | undefined;
+	static fromString(value: string, ignoreError = false) {
+		try {
+			if (value.startsWith("0x")) {
+				value = value.replace("0x", "");
+				return Giai.fromHex(value.substring(0, 24));
+				// return Giai.fromHex(value.substring(6, value.length - 4));
+			} else if (value.startsWith(Giai.URN_PREFIX)) {
+				return Giai.fromEpcPureIdentityUri(value);
+			} else if (value.startsWith(Giai.BARCODE_PREFIX)) {
+				return Giai.fromBarcode(value);
+			} else if (value.length === 24) {
+				return Giai.fromHex(value);
+			}
+		} catch (ex) {
+			if (!ignoreError) {
+				throw ex;
+			}
+		}
+
+		if (!ignoreError) {
+			throw Error(
+				getLocalizedString(
+					"Can't create GIAI from string. Failed to match value  '{value}' with known input formats.",
+				).replace("{value}", value),
+			);
+		}
+
+		return undefined;
+	}
+
+	/**
+	 * @type {string | number | bigint}
+	 */
+	#assetReference;
+	/**
+	 * @type {string | number | bigint}
+	 */
+	#companyPrefix;
+
+	/**
+	 *
+	 * @param {GiaiProps} options
+	 */
+	constructor({ assetReference, companyPrefix }: GiaiProps) {
+		this.#assetReference = assetReference;
+		this.#companyPrefix = companyPrefix;
+	}
+
+	get assetReference() {
+		return this.#assetReference;
+	}
+
+	get companyPrefix() {
+		return this.#companyPrefix;
+	}
+
+	// Returns the EPC pure identity uri for this identifier - as used by EPCIS.
+	toEpcPureIdentityUri() {
+		return `${Giai.URN_PREFIX}${this.companyPrefix}.${this.assetReference}`;
+	}
+
+	toGiaiBarcode() {
+		return Giai.BARCODE_PREFIX + this.companyPrefix + Giai.GROUP_SEPARATOR + this.assetReference;
+	}
+
+	toEpcHex() {
+		let bitIdentifier = Giai.EPC_HEADER;
+		bitIdentifier += "000"; // Filter
+		bitIdentifier += (5).toString(2).padStart(3, "0"); // Partition
+		let companyPrefix = ["bigint", "number"].includes(typeof this.#companyPrefix)
+			? this.#companyPrefix
+			: BigInt(this.#companyPrefix);
+		let assetReference = ["bigint", "number"].includes(typeof this.#assetReference)
+			? this.#assetReference
+			: BigInt(this.#assetReference);
+		bitIdentifier += companyPrefix.toString(2).padStart(24, "0");
+		bitIdentifier += assetReference.toString(2).padStart(58, "0");
+
+		return BigInt(`0b${bitIdentifier}`).toString(16).toUpperCase();
+	}
+}
+
+export function hexToBitString(hexString: string) {
+	let bitString = "";
+
+	for (let i = 0; i < hexString.length; i += 2) {
+		const byteString = hexString.substr(i, 2);
+		const byteBits = Number.parseInt(byteString, 16).toString(2);
+
+		bitString += byteBits.padStart(8, "0");
+	}
+
+	return bitString;
+}
+
+declare global {
+	interface Window {
+		Giai: typeof Giai | undefined;
+	}
+}
+
+window.Giai = Giai;

package/src/elements/ElementLookupDialog/utils/beep.ts

@@ -0,0 +1,35 @@
+import { useState } from "react";
+
+export type Beeper = (callback?: () => void) => void;
+
+declare global {
+	interface Window {
+		webkitAudioContext: { new (): AudioContext };
+	}
+}
+
+export function createBeeper(duration = 200, type: OscillatorType = "sine"): Beeper {
+	const ctxClass = window.AudioContext || window.webkitAudioContext;
+	const ctx = new ctxClass();
+	return (finishedCallback?: () => void) => {
+		duration = +duration;
+
+		const osc = ctx.createOscillator();
+
+		osc.type = type;
+
+		osc.connect(ctx.destination);
+		osc.start();
+
+		setTimeout(() => {
+			osc.stop();
+			finishedCallback?.();
+		}, duration);
+	};
+}
+
+export function useBeeper(duration = 200, type: OscillatorType = "sine"): Beeper {
+	const [beeper] = useState<Beeper>(() => createBeeper(duration, type));
+
+	return beeper;
+}