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>
-					</p>
-				:
-					<p>No card image, member photo missing!</p>
-				}
+			{result.member.photo_large ?
+				<p>
+					<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,41 +248,41 @@ 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'
-						fluid
-						{...makeProps('card_number')}
-					/>
-					<Form.Select
-						label='Card Status'
-						options={statusOptions}
-						fluid
-						{...makeProps('active_status')}
-						onChange={handleValues}
-					/>
-					<Form.Input
-						label='Optional Note'
-						fluid
-						{...makeProps('notes')}
-					/>
-				</Form.Group>
+					<Form.Group widths='equal'>
+						<Form.Input
+							label='Card Number (Listening...)'
+							fluid
+							{...makeProps('card_number')}
+						/>
+						<Form.Select
+							label='Card Status'
+							options={statusOptions}
+							fluid
+							{...makeProps('active_status')}
+							onChange={handleValues}
+						/>
+						<Form.Input
+							label='Optional Note'
+							fluid
+							{...makeProps('notes')}
+						/>
+					</Form.Group>
 
-				<Form.Checkbox
-					label='Confirmed that the member has been given a tour and knows the alarm code'
-					required
-					{...makeProps('given_tour')}
-					onChange={handleCheck}
-					checked={input.given_tour}
-				/>
+					<Form.Checkbox
+						label='Confirmed that the member has been given a tour and knows the alarm code'
+						required
+						{...makeProps('given_tour')}
+						onChange={handleCheck}
+						checked={input.given_tour}
+					/>
 
-				<Form.Button disabled={!input.given_tour} loading={loading} error={error.non_field_errors}>
-					Submit
-				</Form.Button>
-				{success && <div>Success!</div>}
-			</Form>
+					<Form.Button disabled={!input.given_tour} loading={loading} error={error.non_field_errors}>
+						Submit
+					</Form.Button>
+					{success && <div>Success!</div>}
+				</Form>
+			}
 
 			<Header size='small'>Current Cards</Header>