From bb1f560d62a5cee30dfe828a564ddc7ef8da4c6f Mon Sep 17 00:00:00 2001
From: Peter Hoppe <p.hoppe@gmx.de>
Date: Tue, 10 Jan 2023 00:19:13 +0100
Subject: [PATCH] hoehe breite qr

---
 src/components/Qr.css |  9 +++++++++
 src/components/Qr.tsx | 23 ++++++++++++++++++++---
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/Qr.css b/src/components/Qr.css
index 22f8857..db32fa3 100644
--- a/src/components/Qr.css
+++ b/src/components/Qr.css
@@ -33,6 +33,15 @@ img
 }
 
 .qrCode
+{
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    background: #fff;
+}
+
+.qrCode____
 {
     align-items: center;
     display: flex;
diff --git a/src/components/Qr.tsx b/src/components/Qr.tsx
index eeea828..b764d93 100644
--- a/src/components/Qr.tsx
+++ b/src/components/Qr.tsx
@@ -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 { UserCtx, UserCtxT, DogT, Axios, ResponseT, TUser } from '../context/UserContext';
 import Checkbox from './Checkbox';
@@ -141,11 +141,11 @@ export default function Qr()
     {
         return(
     <div className='qrCodeBackFront'>
-        <div className='qrCode frame'>
+        <div className='qrCode frame' style={{height : height + 'cm', width : width + 'cm'}}>
             <div className='qrCode__'>SCAN ME</div>
             <Img pth={dog.data.qr_code}/>
         </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 & 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>}
@@ -208,6 +208,14 @@ export default function Qr()
         _itemList.push(item!);
         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)
     {
@@ -219,6 +227,8 @@ export default function Qr()
         {
             let locDog: DogT = resDog.data.data;
             setDog(resDog.data); // ResponseT
+            setWidth(locDog.qr_width_cm);
+            setHeight(locDog.qr_height_cm);
             setFontSize(locDog.qr_fontsize);
             setVisibleItem(locDog.qr_visible_items);
             setItemOrder(locDog.qr_item_sequence);
@@ -235,6 +245,13 @@ export default function Qr()
                 <Link to={"/profil"}>Zurück zum Profil</Link>
                 <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>Schriftgröße</div>
                         <div className='spinBtn'>