aaa
This commit is contained in:
120
src/components/Qr.tsx
Normal file
120
src/components/Qr.tsx
Normal 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>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user