hope/dog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

impressum

Browse Source
This commit is contained in:
Peter Hoppe
2022-12-27 16:33:21 +01:00
parent 0187c464db
commit fd65306aaf
7 changed files with 185 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/components/Qr.tsx
View File

@ -1,20 +1,26 @@
import React, { useContext } from 'react'
import { UserCtx, UserCtxT, DogT } from '../context/UserContext';
import React, { useContext, useState } from 'react'
import { UserCtx, UserCtxT, DogT, Axios, ResponseT, TUser } 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)
const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
const [dog, setDog] = useState<DogT | any>({}); // local dog not the dog in UserContext
if(user)
{
if(user)
Axios.post<ResponseT>('getDog.php',
{
getDog(user?.qr_id); // await not allowed?! => workaraound
}
qr_id: user.qr_id
})
.then((resDog) =>
{
setDog(resDog.data);
})
.catch((err) => console.error(err));
}
return (
<>
@ -33,57 +39,9 @@ export default function Qr()
<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>
@ -94,9 +52,57 @@ export default function Qr()
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
<div className='vertFont order2'>{dog.data.name}</div>
<div className='vertFont order3'>{dog.data.phone}</div>
<div className='vertFont order1'>{dog.data.email}</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.name}</div>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</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.name}</div>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</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.name}</div>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</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.name}</div>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div>
</div>
</div>
</div>