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

aaa

Browse Source
This commit is contained in:
Peter Hoppe
2022-12-26 23:56:36 +01:00
parent c894022b31
commit 0187c464db
15 changed files with 204 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Img.tsx
View File

@ -4,7 +4,7 @@ export default function Img({pth}: {pth: string})
{
return (
<div>
<img src={'./uploads' + pth} width="300" />
<img src={'./uploads' + pth} />
</div>
)
}

49
src/components/Qr.css Normal file
View File

@ -0,0 +1,49 @@
img
{
width: 2.4cm;
background: #ffffff;
}
.qrCode
{
align-items: center;
display: flex;
flex-direction: column;
height: 3.7cm;
justify-content: space-evenly;
background: #fff;
width: 2.4cm;
}
.qrCodeBackFront
{
display: flex;
flex-direction: row;
}
.vertFont
{
writing-mode: vertical-lr;
}
.qrCodeVert
{
align-items: center;
display: flex;
flex-direction: row-reverse;
height: 3.7cm;
justify-content: space-evenly;
background: #fff;
width: 2.4cm;
}
.frame
{
border-style: solid;
border-width: 1px;
}
.blockRepeat
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

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>
</>
}
</>
)
}