refactor(mobile): more look and feel work
All checks were successful
Build and Push LST Docker Image / docker (push) Successful in 1m17s

This commit is contained in:
2026-04-28 19:49:07 -05:00
parent 7d2f048932
commit bb6155c969
14 changed files with 409 additions and 108 deletions

View File

@@ -1,6 +1,9 @@
import { format } from "date-fns-tz";
import { useCallback, useEffect, useState } from "react";
import { Text, View } from "react-native";
import { useAppStore } from "../hooks/useAppStore";
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";
@@ -9,23 +12,32 @@ const STX = "\x02";
const ETX = "\x03";
export default function ProdScanner() {
const [lastScan, setLastScan] = useState<any>(null);
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) => {
const scanned = scan.data;
let commandToSend = `${STX}${scannerIdFromStore}@${scanned}${ETX}`;
let commandToSend = `${STX}${scannerIdFromStore}@${scan.data}${ETX}`;
await scannerFeedback({
type: "good",
sound: true,
vibrate: true,
led: true,
});
// if we are sscc we need to scan like this .... <STX>98@]C100090087710038712256<ETX>
if (scan.data.startsWith("000")) {
commandToSend = `${STX}${scannerIdFromStore}@]C1${scanned}${ETX}`;
commandToSend = `${STX}${scannerIdFromStore}@]C1${scan.data}${ETX}`;
setTagScans((prev: any) => [
parseInt(scanned.slice(10, -1) || "000", 10).toString(),
{
label: parseInt(scan.data.slice(10, -1) || "000", 10).toString(),
date: format(new Date(Date.now()), "HH:mm"),
},
...prev,
]);
}
@@ -35,19 +47,44 @@ export default function ProdScanner() {
setTagScans([]);
}
const something = await sendTcpMessage(
const scanned = (await sendTcpMessage(
commandToSend,
serverIp,
parseInt(serverPort || "0", 10),
);
)) as any;
// Later this is where your TCP send goes.
// const response = await sendTcpMessage(tcpMessage);
setLastScan(something.data[0]);
console.log(scanned);
await scannerFeedback({
type: scanned.data[0]?.type === "error" ? "bad" : "good",
sound: true,
vibrate: true,
led: true,
});
if (scanned.data[0]?.type !== "error") {
setBGColor("bg-green-500");
setTimeout(() => {
setBGColor(null);
}, 1 * 1000);
}
if (scanned.data[0]?.type === "error") {
setBGColor("bg-red-500");
setTimeout(() => {
setBGColor(null);
}, 1 * 1000);
}
setLastScan(scanned.data[0]);
//console.log("TCP response:", something);
},
[scannerIdFromStore, serverIp, serverPort],
[scannerIdFromStore, serverIp, serverPort, setLastScan],
);
const clearScans = () => {
setTagScans([]);
};
console.log(lastScan);
useEffect(() => {
@@ -65,21 +102,17 @@ export default function ProdScanner() {
};
}, [handleScan]);
return (
<View>
<View className={`${bgColor ?? ""} flex-1 w-screen`}>
<View>
<View style={{ alignItems: "center", margin: 10 }}>
<Text style={{ fontSize: 20, fontWeight: "600" }}>
<Text style={{ fontSize: 15, fontWeight: "600" }}>
Scanner ID: {parseInt(scannerIdFromStore || "0", 10)}
</Text>
</View>
{!lastScan ? (
<View
style={{
marginTop: 10,
alignItems: "center",
}}
>
<Text className="text-xl font-bold">Waiting on scan....</Text>
<View style={{ marginTop: 10, alignItems: "center" }}>
<Text className="text-xl font-bold">Ready to scan</Text>
<Text>Waiting for first scan...</Text>
</View>
) : (
<View
@@ -88,34 +121,25 @@ export default function ProdScanner() {
alignItems: "center",
}}
>
<Text style={{ fontSize: 20, fontWeight: "600" }}>
{lastScan?.action}
</Text>
{lastScan?.type === "error" ? (
<View style={{ marginTop: 10, alignItems: "center" }}>
<Text style={{ fontSize: 20, fontWeight: "600" }}>
{lastScan?.message}
{lastScan.action}
</Text>
) : (
<View
style={{
marginTop: 15,
alignItems: "center",
}}
>
<Text style={{ fontSize: 20, fontWeight: "600" }}>
{lastScan?.prompt}
</Text>
<Text style={{ fontSize: 20, fontWeight: "600" }}>
{lastScan?.message}
</Text>
</View>
)}
<Text style={{ fontSize: 20, fontWeight: "600" }}>
{lastScan.message}
</Text>
</View>
</View>
)}
</View>
<ScannedLabelBox labels={tagScans} />
<View className="flex-1 w-full px-4">
<ScannedLabelBox
labels={tagScans}
color={bgColor}
clearScan={clearScans}
/>
</View>
</View>
);
}