This commit is contained in:
2022-12-26 23:56:36 +01:00
parent c894022b31
commit 0187c464db
15 changed files with 204 additions and 6 deletions

120
src/components/Qr.tsx Normal file
View File

@ -0,0 +1,120 @@
import React, { useContext } from 'react'
import { UserCtx, UserCtxT, DogT } from '../context/UserContext';
import Img from './Img';
import './Qr.css';
export default function Qr()
{
const {dog, getDog, user} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
var needData = dog.success === undefined;
if(needData)
{
if(user)
{
getDog(user?.qr_id); // await not allowed?! => workaraound
}
}
return (
<>
{user && dog.data &&
<div>
<h1>Qr-Code Druck</h1>
{/* <div>Logged in als:</div>
<div>{user?.email}</div>
<div>{user?.qr_id}</div>
<div>{dog.data.qr_code}</div> */}
<div className='blockRepeat'>
<div className='qrCodeBackFront'>
<div className='qrCode frame'>
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
{/* <div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div> */}
<div className='vertFont'>{dog.data.name}</div>
</div>
</div>
<div className='qrCodeBackFront'>
<div className='qrCode frame'>
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
<div className='vertFont'>{dog.data.phone}</div>
{/* <div className='vertFont'>{dog.data.email}</div> */}
<div className='vertFont'>{dog.data.name}</div>
</div>
</div>
<div className='qrCodeBackFront'>
<div className='qrCode frame'>
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
{/* <div className='vertFont'>{dog.data.phone}</div> */}
<div className='vertFont'>{dog.data.email}</div>
<div className='vertFont'>{dog.data.name}</div>
</div>
</div>
<div className='qrCodeBackFront'>
<div className='qrCode frame'>
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
<div className='vertFont'>{dog.data.phone}</div>
{/* <div className='vertFont'>{dog.data.email}</div>
<div className='vertFont'>{dog.data.name}</div> */}
</div>
</div>
<div className='qrCodeBackFront'>
<div className='qrCode frame'>
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div>
{/* <div className='vertFont'>{dog.data.name}</div> */}
</div>
</div>
<div className='qrCodeBackFront'>
<div className='qrCode frame'>
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div>
<div className='vertFont'>{dog.data.name}</div>
</div>
</div>
</div>
</div> }
{/* { !dog.data && user &&
<>
<h1>Qr-Code Druck</h1>
<div>Logged in als:</div>
<div>{user?.email}</div>
<div>{user?.qr_id}</div>
</>
} */}
{ !dog.data && !user &&
<>
<h1>Qr-Code Druck</h1>
<div>nothing</div>
</>
}
</>
)
}