Automatically fill out card number

apiserver/apiserver/api/utils_stats.py

@@ -28,6 +28,7 @@ DEFAULTS = {
     'track': {},
     'alarm': {},
     'sign': '',
+    'autoscan': '',
 }
 
 if secrets.MUMBLE:

apiserver/apiserver/api/views.py

@@ -538,6 +538,7 @@ class StatsViewSet(viewsets.ViewSet, List):
         user = self.request.user
         if not user.is_authenticated:
             stats.pop('alarm', None)
+            stats.pop('autoscan', None)
 
         stats['at_protospace'] = utils.is_request_from_protospace(request)
 
@@ -682,6 +683,14 @@ class StatsViewSet(viewsets.ViewSet, List):
 
         return Response(200)
 
+    @action(detail=False, methods=['post'])
+    def autoscan(self, request):
+        if 'autoscan' not in request.data:
+            raise exceptions.ValidationError(dict(autoscan='This field is required.'))
+
+        cache.set('autoscan', request.data['autoscan'])
+        return Response(200)
+
 
 class MemberCountViewSet(Base, List):
     pagination_class = None

webclient/src/AdminMembers.js

@@ -122,6 +122,8 @@ function AdminCardDetail(props) {
 	);
 };
 
+let prevAutoscan = '';
+
 export function AdminMemberCards(props) {
 	const { token, result, refreshResult } = props;
 	const cards = result.cards;
@@ -163,6 +165,35 @@ export function AdminMemberCards(props) {
 		});
 	};
 
+	const getAutoscan = () => {
+		return requester('/stats/', 'GET', token)
+		.then(res => {
+			return res?.autoscan;
+		})
+		.catch(err => {
+			console.log(err);
+		});
+	};
+
+	const checkAutoscan = () => {
+		getAutoscan().then(newScan => {
+			if (newScan != prevAutoscan) {
+				prevAutoscan = newScan;
+				setInput({ ...input, card_number: newScan });
+			}
+		});
+	};
+
+	useEffect(() => {
+		if (cardPhoto) {
+			getAutoscan().then(scan => {
+				prevAutoscan = scan;
+			});
+			const interval = setInterval(checkAutoscan, 1000);
+			return () => clearInterval(interval);
+		}
+	}, [cardPhoto]);
+
 	const getCardPhoto = (e) => {
 		e.preventDefault();
 		requester('/members/' + id + '/card_photo/', 'GET', token)
@@ -193,18 +224,16 @@ export function AdminMemberCards(props) {
 		<div>
 			<Header size='medium'>Edit Member Cards</Header>
 
-			<Form onSubmit={handleSubmit}>
-				<Header size='small'>Add a Card</Header>
-
 			{result.member.photo_large ?
 				<p>
-						<Button onClick={(e) => getCardPhoto(e)}>View card image</Button>
+					<Button onClick={(e) => getCardPhoto(e)}>Add a Card</Button>
 				</p>
 			:
 				<p>No card image, member photo missing!</p>
 			}
 
-				{cardPhoto && <>
+			{cardPhoto &&
+				<Form onSubmit={handleSubmit}>
 					<p>
 						<Image rounded size='medium' src={cardPhoto} />
 					</p>
@@ -219,11 +248,10 @@ export function AdminMemberCards(props) {
 						<li>Scan card, add the number</li>
 						<li><b>Have them test their card</b></li>
 					</ol>
-				</>}
 
 					<Form.Group widths='equal'>
 						<Form.Input
-						label='Card Number'
+							label='Card Number (Listening...)'
 							fluid
 							{...makeProps('card_number')}
 						/>
@@ -254,6 +282,7 @@ export function AdminMemberCards(props) {
 					</Form.Button>
 					{success && <div>Success!</div>}
 				</Form>
+			}
 
 			<Header size='small'>Current Cards</Header>