Skip to content

Commit

Permalink
fix: QR scanner library changed
Browse files Browse the repository at this point in the history
  • Loading branch information
@gmat224
gmat224 committed Dec 13, 2024
1 parent 50d6a36 commit 69cffa7
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 10 deletions.
1 change: 1 addition & 0 deletions web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "^5.3.3",
"@types/react-slick": "^0.23.13",
"@yudiel/react-qr-scanner": "^2.0.8",
"axios": "^1.6.7",
"dayjs": "^1.11.11",
"graphql": "^16.8.2",
Expand Down
49 changes: 39 additions & 10 deletions web/src/screens/AttendanceScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useAttendanceList } from "../hooks/api/useAttendanceList";
import { AttendanceList } from "../types/types";
import LoadingSpinner from "@components/navigation/LoadingSpinner";
import { useUpdateAttendance } from "../hooks/api/useAttendanceUpdateMutation";
import { IDetectedBarcode, IScannerStyles, Scanner, useDevices } from '@yudiel/react-qr-scanner';

function filterDataByUserTicketCodeOrName(
data: AttendanceList[],
Expand All @@ -30,6 +31,10 @@ export default function AttendanceScreen({ navbar }: { navbar: JSX.Element }) {
queryId = parseInt(id);
}

// testing

const absc = useDevices()

// useStates
const [scannedQRCode, setScannedQRCode] = useState("");
const [currentSearchField, setCurrentSearchField] = useState("");
Expand Down Expand Up @@ -77,21 +82,34 @@ export default function AttendanceScreen({ navbar }: { navbar: JSX.Element }) {
setStatusText("Update failed");
}
}, [statusText, status]);

// QR decoding
const { ref } = useZxing({
onDecodeResult(decodedQRCode) {
if (scannedQRCode != decodedQRCode.getText()) {
// const { ref } = useZxing({
// onDecodeResult(decodedQRCode) {
// if (scannedQRCode != decodedQRCode.getText()) {
// const filteredData = filterDataByUserTicketCodeOrName(
// originalAttendanceList,
// decodedQRCode.getText()
// );
// setScannedQRCode(decodedQRCode.getText());
// setCurrentSearchField(decodedQRCode.getText());
// setFilteredAttendanceList(filteredData);
// }
// },
// });

function onQRcodeScanned(decodedQRCode: IDetectedBarcode[]){
if (scannedQRCode != decodedQRCode[0].rawValue) {
const filteredData = filterDataByUserTicketCodeOrName(
originalAttendanceList,
decodedQRCode.getText()
decodedQRCode[0].rawValue
);
setScannedQRCode(decodedQRCode.getText());
setCurrentSearchField(decodedQRCode.getText());
setScannedQRCode(decodedQRCode[0].rawValue);
setCurrentSearchField(decodedQRCode[0].rawValue);
setFilteredAttendanceList(filteredData);
}
},
});
}



// update search
function handleOnSearchChanged(event: React.ChangeEvent<HTMLInputElement>) {
Expand Down Expand Up @@ -126,13 +144,24 @@ export default function AttendanceScreen({ navbar }: { navbar: JSX.Element }) {
return <LoadingSpinner />;
}

console.log(absc)

// const abc : MediaTrackConstraints = {
// deviceId: "98cba60747c2d8c10ee870fae5b7a320aa26180dae4b90a6569ce6e77c6e18a1"
// }

return (
<div className="from-AUIS-dark-teal to-AUIS-teal min-h-[calc(100vh)] bg-gradient-to-b">
{navbar}
<h1 className="text-center text-white">{statusText}</h1>
<h1 className="text-center text-white">Last Scanned: {scannedQRCode}</h1>
<div className="flex items-center justify-center">
<video className="w-[40rem] py-2" ref={ref} />
{/* <div>TESTING</div>
<video className="w-[40rem] py-2" ref={ref} /> */}
<div className="w-[35rem] py-2">
<Scanner onScan={(result) =>onQRcodeScanned(result)} allowMultiple={true} scanDelay={1000}/>

</div>
</div>
<div className="flex items-center justify-center">
<input
Expand Down
45 changes: 45 additions & 0 deletions web/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -947,6 +947,16 @@
dependencies:
"@types/ms" "*"

"@types/[email protected]":
version "0.1.11"
resolved "https://registry.yarnpkg.com/@types/dom-webcodecs/-/dom-webcodecs-0.1.11.tgz#2e36e5cc71789551f107e2fe15d956845fa19567"
integrity sha512-yPEZ3z7EohrmOxbk/QTAa0yonMFkNkjnVXqbGb7D4rMr+F1dGQ8ZUFxXkyLLJuiICPejZ0AZE9Rrk9wUCczx4A==

"@types/emscripten@^1.39.13":
version "1.39.13"
resolved "https://registry.yarnpkg.com/@types/emscripten/-/emscripten-1.39.13.tgz#afeb1648648dc096efe57983e20387627306e2aa"
integrity sha512-cFq+fO/isvhvmuP/+Sl4K4jtU6E23DoivtbO4r50e3odaxAiVdbfSYRDdJ4gCdxx+3aRjhphS5ZMwIH4hFy/Cw==

"@types/estree-jsx@^1.0.0":
version "1.0.5"
resolved "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz"
Expand Down Expand Up @@ -1259,6 +1269,14 @@
dependencies:
tslib "^2.3.0"

"@yudiel/react-qr-scanner@^2.0.8":
version "2.0.8"
resolved "https://registry.yarnpkg.com/@yudiel/react-qr-scanner/-/react-qr-scanner-2.0.8.tgz#a5193e27785be292aaddd1dd6469a8e87c5d3e52"
integrity sha512-/7WHsdC1a/Z909J2zZxqgpUQ1iI554fZxIagucH/tFu1MhZkNIeykYI1OdZgDEwV4CzuSi+h90wwNrhmETcmRw==
dependencies:
barcode-detector "^2.2.7"
webrtc-adapter "9.0.1"

"@zxing/library@^0.20.0":
version "0.20.0"
resolved "https://registry.yarnpkg.com/@zxing/library/-/library-0.20.0.tgz#11bc411b87693015389555c589da61532879be7b"
Expand Down Expand Up @@ -1415,6 +1433,14 @@ balanced-match@^1.0.0:
resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==

barcode-detector@^2.2.7:
version "2.3.1"
resolved "https://registry.yarnpkg.com/barcode-detector/-/barcode-detector-2.3.1.tgz#91d0d4e3b913d87f94bae5d024b6b9b5cedc420c"
integrity sha512-D9KEtrquS1tmBZduxBZl8qublIKnRrFqD8TAHDYcLCyrHQBo+vitIxmjMJ61LvXjXyAMalOlO7q0Oh/9Rl2PbQ==
dependencies:
"@types/dom-webcodecs" "0.1.11"
zxing-wasm "1.3.4"

[email protected]:
version "1.0.0"
resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
Expand Down Expand Up @@ -3986,6 +4012,11 @@ scheduler@^0.23.0:
dependencies:
loose-envify "^1.1.0"

sdp@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/sdp/-/sdp-3.2.0.tgz#8961420552b36663b4d13ddba6f478d1461896a5"
integrity sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw==

semver@^6.3.1:
version "6.3.1"
resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz"
Expand Down Expand Up @@ -4584,6 +4615,13 @@ webidl-conversions@^7.0.0:
resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz"
integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==

[email protected]:
version "9.0.1"
resolved "https://registry.yarnpkg.com/webrtc-adapter/-/webrtc-adapter-9.0.1.tgz#d4efa22ca9604cb2c8cdb9e492815ba37acfa0b2"
integrity sha512-1AQO+d4ElfVSXyzNVTOewgGT/tAomwwztX/6e3totvyyzXPvXIIuUUjAmyZGbKBKbZOXauuJooZm3g6IuFuiNQ==
dependencies:
sdp "^3.2.0"

whatwg-encoding@^3.1.1:
version "3.1.1"
resolved "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz"
Expand Down Expand Up @@ -4703,3 +4741,10 @@ zwitch@^2.0.0:
version "2.0.4"
resolved "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz"
integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==

[email protected]:
version "1.3.4"
resolved "https://registry.yarnpkg.com/zxing-wasm/-/zxing-wasm-1.3.4.tgz#4bc45b78dc3594278bb0c24233bfb035ca9efab1"
integrity sha512-9l0QymyATF19FmI92QHe7Dayb+BUN7P7zFAt5iDgTnUf0dFWokz6GVA/W9EepjW5q8s3e89fIE/7uxpX27yqEQ==
dependencies:
"@types/emscripten" "^1.39.13"

0 comments on commit 69cffa7

Please sign in to comment.