Add instructions on how to print a member card

This commit is contained in:
Tanner Collin 2020-07-18 22:38:07 +00:00
parent edb2128cbf
commit 570c5f2aeb

View File

@ -122,6 +122,7 @@ export function AdminMemberCards(props) {
const [error, setError] = useState(false); const [error, setError] = useState(false);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false); const [success, setSuccess] = useState(false);
const [viewCard, setViewCard] = useState(false);
const { id } = useParams(); const { id } = useParams();
useEffect(() => { useEffect(() => {
@ -176,14 +177,28 @@ export function AdminMemberCards(props) {
{result.member.card_photo ? {result.member.card_photo ?
<p> <p>
<a href={staticUrl + '/' + result.member.card_photo} target='_blank'> <Button onClick={() => setViewCard(true)}>View card image</Button>
Print card image
</a>
</p> </p>
: :
<p>No card image, member photo missing!</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.Group widths='equal'>
<Form.Input <Form.Input
label='Card Number' label='Card Number'