feat(mobile): auth added in

lstMobile/src/components/LSTScanner.tsx

@@ -1,15 +1,133 @@
-import { useCallback, useEffect } from "react";
-import { Text, View } from "react-native";
+import axios from "axios";
+import { format } from "date-fns-tz";
+import { useCallback, useEffect, useState } from "react";
+import { Alert, Button, Text, View } from "react-native";
+import { useAppStore } from "../hooks/useAppStore";
+import { useMobileAuthStore } from "../hooks/useMobileAuth";
+import { useScannerStore } from "../hooks/useScannerStore";
+import { scannerFeedback } from "../lib/feedbackScan";
+import { sendTcpMessage } from "../lib/tcpScan";
+import { type ZebraScanResult, zebraScanner } from "../lib/ZebraScanner";
+import { ScannedLabelBox } from "./ScannedLabels";
+import { GlobalFooter } from "./UpdateFooter";
+import { Separator } from "./ui/separator";
 
-import { zebraScanner } from "../lib/ZebraScanner";
+const STX = "\x02";
+const ETX = "\x03";
+
+const formatName = (name?: string) =>
+	name ? name.charAt(0).toUpperCase() + name.slice(1).toLowerCase() : "";
 
 export default function LSTScanner() {
-	const handleScan = useCallback(async (scan: any) => {
-		console.log(scan);
-	}, []);
+	const user = useMobileAuthStore((s) => s.user);
+	const logout = useMobileAuthStore((s) => s.logout);
+
+	// TODO : move to off tcp stuff after od
+	const lastScan = useScannerStore((s) => s.lastScan);
+	const setLastScan = useScannerStore((s) => s.setLastScan);
+	const [tagScans, setTagScans] = useState<any>([]);
+	const scannerIdFromStore = useAppStore((s) => s.scannerId);
+	const serverIp = useAppStore((s) => s.serverIp);
+	const serverPort = useAppStore((s) => s.serverPort);
+	const [bgColor, setBGColor] = useState<string | null>(null);
+
+	const handleScan = useCallback(
+		async (scan: ZebraScanResult) => {
+			await scannerFeedback({
+				type: "scan",
+				sound: true,
+				vibrate: true,
+				led: true,
+			});
+
+			const isAlphaStart = /^[a-zA-Z]/.test(scan.data);
+			const isExcluded = (user?.excludedCommand ?? []).some((cmd) =>
+				scan.data.toLowerCase().includes(cmd.toLowerCase()),
+			);
+
+			if (isAlphaStart && isExcluded) {
+				Alert.alert(
+					`Command: ${scan.data} is not allowed to be used, please contact logistics if this is an error`,
+				);
+			}
+
+			let commandToSend = `${STX}${user?.scannerId}@${scan.data}${ETX}`;
+
+			// if we are sscc we need to scan like this .... <STX>98@]C100090087710038712256<ETX>
+			if (scan.data.startsWith("000")) {
+				commandToSend = `${STX}${user?.scannerId}@]C1${scan.data}${ETX}`;
+				setTagScans((prev: any) => [
+					{
+						label: parseInt(scan.data.slice(10, -1) || "000", 10).toString(),
+						date: format(new Date(Date.now()), "HH:mm"),
+					},
+					...prev,
+				]);
+			}
+
+			const scanned = (await sendTcpMessage(
+				commandToSend,
+				serverIp,
+				parseInt(serverPort || "0", 10),
+			)) as any;
+			// send the logs to lst but allow it to time out if it dose not exist just bc.
+			const logInfo = { ...scanned, user: user?.name };
+
+			try {
+				await axios.post(
+					`http://${serverIp.trim()}:3000/lst/api/mobile/logs`,
+					logInfo,
+				);
+			} catch (error) {
+				console.log(error);
+			}
+			// const response = await sendTcpMessage(tcpMessage);
+			console.log(scanned.data);
+			if (scanned.data.status !== "error") {
+				await scannerFeedback({
+					type: "good",
+					sound: true,
+					vibrate: true,
+					led: true,
+				});
+				setBGColor("bg-green-500");
+				setTimeout(() => {
+					setBGColor(null);
+				}, 1 * 1000);
+			}
+
+			if (scanned.data.status === "error") {
+				await scannerFeedback({
+					type: scanned.data.status === "error" ? "bad" : "good",
+					sound: true,
+					vibrate: true,
+					led: true,
+				});
+				setBGColor("bg-red-500");
+				setTimeout(() => {
+					setBGColor(null);
+				}, 1 * 1000);
+			}
+			setLastScan(scanned.data);
+
+			// if we change commands we want to zero out the last scanned labels
+			if (isAlphaStart) {
+				setTagScans([]);
+			}
+		},
+		[
+			serverIp,
+			serverPort,
+			setLastScan,
+			user?.scannerId,
+			user?.name,
+			user?.excludedCommand?.some,
+			user?.excludedCommand,
+		],
+	);
 
 	const clearScans = () => {
-		// add in
+		setTagScans([]);
 	};
 
 	//console.log(lastScan);
@@ -29,23 +147,69 @@ export default function LSTScanner() {
 		};
 	}, [handleScan]);
 	return (
-		<View>
-			<View style={{ alignItems: "center", margin: 10 }}>
-				<Text style={{ fontSize: 20, fontWeight: "600" }}>LST Scanner</Text>
+		<View className={`${bgColor ?? ""} flex-1 w-screen`}>
+			<View style={{ alignItems: "center", margin: 5 }}>
+				<Text style={{ fontSize: 14, fontWeight: "600" }}>
+					User: {formatName(user?.name ?? "")}
+				</Text>
+				<Text style={{ fontSize: 18, fontWeight: "600" }}>
+					LST Scanner id: {user?.scannerId}
+				</Text>
+				<View
+					style={{
+						marginTop: 5,
+						alignItems: "center",
+					}}
+				>
+					{!lastScan ? (
+						<View style={{ marginTop: 10, alignItems: "center" }}>
+							<Text className="text-xl font-bold">Ready to scan</Text>
+							<Text>Waiting for first scan...</Text>
+						</View>
+					) : (
+						<View
+							style={{
+								marginTop: 10,
+								alignItems: "center",
+							}}
+						>
+							{lastScan.lines
+								?.filter((line) => !/^\d+@$/.test(line))
+								.map((i) => {
+									return (
+										<View
+											style={{ marginTop: 10, alignItems: "center" }}
+											key={i}
+										>
+											<Text style={{ fontSize: 18, fontWeight: "600" }}>
+												{i}
+											</Text>
+										</View>
+									);
+								})}
+						</View>
+					)}
+				</View>
 			</View>
-			<View
-				style={{
-					marginTop: 50,
-					alignItems: "center",
-				}}
-			>
-				<Text>Relocate</Text>
-				<Text>0 / 4</Text>
+			<Separator className="m-2" />
+			<View className="flex-1 w-full px-4">
+				<ScannedLabelBox
+					labels={tagScans}
+					color={bgColor}
+					clearScan={clearScans}
+				/>
 			</View>
 
-			{/* <View>
-                         <Text>List of recent scanned pallets TBA</Text>
-                     </View> */}
+			<View className="m-2">
+				{user && (
+					<View className="items-center">
+						<Button title="Logout" onPress={logout} />
+					</View>
+				)}
+			</View>
+			<View>
+				<GlobalFooter />
+			</View>
 		</View>
 	);
 }