From 570c5f2aebb33f152b98b5b6b0357459b1610f76 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Sat, 18 Jul 2020 22:38:07 +0000
Subject: [PATCH] Add instructions on how to print a member card

---
 webclient/src/AdminMembers.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/webclient/src/AdminMembers.js b/webclient/src/AdminMembers.js
index 934cac6..d542ae8 100644
--- a/webclient/src/AdminMembers.js
+++ b/webclient/src/AdminMembers.js
@@ -122,6 +122,7 @@ export function AdminMemberCards(props) {
 	const [error, setError] = useState(false);
 	const [loading, setLoading] = useState(false);
 	const [success, setSuccess] = useState(false);
+	const [viewCard, setViewCard] = useState(false);
 	const { id } = useParams();
 
 	useEffect(() => {
@@ -176,14 +177,28 @@ export function AdminMemberCards(props) {
 
 				{result.member.card_photo ?
 					<p>
-						<a href={staticUrl + '/' + result.member.card_photo} target='_blank'>
-							Print card image
-						</a>
+						<Button onClick={() => setViewCard(true)}>View card image</Button>
 					</p>
 				:
 					<p>No card image, member photo missing!</p>
 				}
 
+				{viewCard && <>
+					<p>
+						<Image rounded size='medium' src={staticUrl + '/' + result.member.card_photo} />
+					</p>
+
+					<Header size='small'>How to Print a Card</Header>
+					<ol>
+						<li>Right click on image > Save image as...</li>
+						<li>Right click on file > Print</li>
+						<li>Select Datacard Printer, Print</li>
+						<li>Plug card scanner in</li>
+						<li>Open "RfidReader" on desktop</li>
+						<li>Scan card, copy the number</li>
+					</ol>
+				</>}
+
 				<Form.Group widths='equal'>
 					<Form.Input
 						label='Card Number'