refactor(mobile): more look and feel work
All checks were successful
Build and Push LST Docker Image / docker (push) Successful in 1m17s
All checks were successful
Build and Push LST Docker Image / docker (push) Successful in 1m17s
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user