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

hoehe breite qr

Browse Source
This commit is contained in:
Peter Hoppe
2023-01-10 00:19:13 +01:00
parent b0c90945af
commit bb1f560d62
2 changed files with 29 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Qr.css
View File

@ -33,6 +33,15 @@ img
} }
.qrCode .qrCode
{
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-evenly;
background: #fff;
}
.qrCode____
{ {
align-items: center; align-items: center;
display: flex; display: flex;

23
src/components/Qr.tsx
View File

@ -1,4 +1,4 @@
import React, { MouseEventHandler, useCallback, useContext, useEffect, useState } from 'react' import React, { ChangeEvent, MouseEventHandler, useContext, useState } from 'react'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { UserCtx, UserCtxT, DogT, Axios, ResponseT, TUser } from '../context/UserContext'; import { UserCtx, UserCtxT, DogT, Axios, ResponseT, TUser } from '../context/UserContext';
import Checkbox from './Checkbox'; import Checkbox from './Checkbox';
@ -141,11 +141,11 @@ export default function Qr()
{ {
return( return(
<div className='qrCodeBackFront'> <div className='qrCodeBackFront'>
<div className='qrCode frame'> <div className='qrCode frame' style={{height : height + 'cm', width : width + 'cm'}}>
<div className='qrCode__'>SCAN ME</div> <div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/> <Img pth={dog.data.qr_code}/>
</div> </div>
<div className='qrCode vert frame' style={{ fontSize: fontSize + '%' }}> <div className='qrCode vert frame' style={{ height : height + 'cm', width : width + 'cm', fontSize: fontSize + '%' }}>
{((visibleItem & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.data.name}</div>} {((visibleItem & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.data.name}</div>}
{((visibleItem & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.data.phone}</div>} {((visibleItem & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.data.phone}</div>}
{((visibleItem & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.data.email}</div>} {((visibleItem & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.data.email}</div>}
@ -208,6 +208,14 @@ export default function Qr()
_itemList.push(item!); _itemList.push(item!);
setItemList(_itemList); setItemList(_itemList);
} }
const onChangeWidth = (e: ChangeEvent<HTMLInputElement> ) =>
{
setWidth(parseInt(e.target.value) ? parseInt(e.target.value) : 0);
}
const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) => {
setHeight(parseInt(e.target.value) ? parseInt(e.target.value) : 0);
}
if(user && dog.success === undefined) if(user && dog.success === undefined)
{ {
@ -219,6 +227,8 @@ export default function Qr()
{ {
let locDog: DogT = resDog.data.data; let locDog: DogT = resDog.data.data;
setDog(resDog.data); // ResponseT setDog(resDog.data); // ResponseT
setWidth(locDog.qr_width_cm);
setHeight(locDog.qr_height_cm);
setFontSize(locDog.qr_fontsize); setFontSize(locDog.qr_fontsize);
setVisibleItem(locDog.qr_visible_items); setVisibleItem(locDog.qr_visible_items);
setItemOrder(locDog.qr_item_sequence); setItemOrder(locDog.qr_item_sequence);
@ -235,6 +245,13 @@ export default function Qr()
<Link to={"/profil"}>Zurück zum Profil</Link> <Link to={"/profil"}>Zurück zum Profil</Link>
<div className='qrSettings____'> <div className='qrSettings____'>
<div className='qrSettings'> <div className='qrSettings'>
<div>
<div>Anhänger</div>
<div>Breite [cm]</div>
<input type='number' id='width' name='width' onChange={onChangeWidth} value={width}/>
<div>Höhe [cm]</div>
<input type='number' id='height' name='height'onChange={onChangeHeight} value={height}/>
</div>
<div> <div>
<div>Schriftgröße</div> <div>Schriftgröße</div>
<div className='spinBtn'> <div className='spinBtn'>