mantine kjhkjh

src/components/Qr.tsx

@@ -2,11 +2,11 @@ import React, { ChangeEvent, MouseEventHandler, useState } from 'react'
 import { Link } from 'react-router-dom';
 import { DogT } from '../context/UserContext';
 import {getDog, updateQR} from '../services/PhpApi';
-import Checkbox from './Checkbox';
+//import Checkbox from './Checkbox';
 import Img from './Img';
 import './Qr.css';
 import useSWR from 'swr';
-import { MantineProvider, NumberInput } from '@mantine/core';
+import { MantineProvider, NumberInput, Stack, Checkbox } from '@mantine/core';
 import { NotificationsProvider, showNotification } from '@mantine/notifications';
 import {DndList, DndListProps, TDataItem} from './DndList';
 
@@ -77,21 +77,22 @@ export default function Qr()
         return val;
     }
 
-    function checkBoxChange(id: string, checked: boolean) : void
+    function checkBoxChange(e: HTMLInputElement) 
     {
         let value = dog.qr_visible_items;
         console.log(value);
-        if(id==="name")
+        console.log(e);
+        if(e.id==="name")
         {
-            value = setBitField(value, checked, 0b100);
+            value = setBitField(value, (e.checked), 0b100);
         }
-        if(id==="phone")
+        if(e.id==="phone")
         {
-            value = setBitField(value, checked, 0b010);
+            value = setBitField(value, (e.checked), 0b010);
         }
-        if(id==="email")
+        if(e.id==="email")
         {
-            value = setBitField(value, checked, 0b001);
+            value = setBitField(value, (e.checked), 0b001);
         }
         console.log(value);
         dog.qr_visible_items = value;
@@ -209,21 +210,15 @@ export default function Qr()
         setDogRender(dog);
     }
 
-    // const onChangeWidth = (e: ChangeEvent<HTMLInputElement> ) => 
-    // {
-    //     dog.qr_width_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0;
-    //     setDogRender(dog);
-    // }
-
-    const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) => 
+    const onChangeHeight = (val: number) => 
     {
-        dog.qr_height_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0;
+        dog.qr_height_cm = val/10;
         setDogRender(dog);
     }
 
-    const onChangeFontSize = (e: ChangeEvent<HTMLInputElement> ) => 
+    const onChangeFontSize = (val: number) => 
     {
-        dog.qr_fontsize = parseInt(e.target.value) ? parseInt(e.target.value) : 0;
+        dog.qr_fontsize = val;
         setDogRender(dog);
     }
 
@@ -285,74 +280,81 @@ export default function Qr()
     console.log(dndList);
 
     return (
-<MantineProvider withNormalizeCSS withGlobalStyles>
-      <NotificationsProvider position="top-center" >       
       <div>
             <h1>Qr-Code Druck</h1>
             <Link to={"/profil"}>Zurück zum Profil</Link>
             <div className='qrSettings____'>
                 <div className='qrSettings'>
-                    <div>
-                        <div>Anhänger</div>
-                        <label htmlFor='width'>Breite [mm] </label>
-                        <NumberInput className='qr-input' type='number' id='width' name='width' 
+                <Stack align="flex-start" sx={{textAlign: 'left'}}>
+                <div>Anhänger</div>
+                        <NumberInput 
+                        type='number' id='width' name='width' 
+                        label = 'Breite [mm]'
                         min={1} max={100}
+                        stepHoldDelay={500}
+                        stepHoldInterval={100}
                         onChange={onChangeWidth} value={dog.qr_width_cm*10}/>
-                        <label htmlFor='height'>Höhe [mm] </label>
-                        <input className='qr-input' type='number' id='height' name='height' 
-                        min="1" max="100"
+                        <NumberInput
+                        type='number' id='height' name='height' 
+                        label = 'Höhe [mm]'
+                        min={1} max={100}
+                        stepHoldDelay={500}
+                        stepHoldInterval={100}
                         onChange={onChangeHeight} value={dog.qr_height_cm*10}/>
-                    </div>
-                    <div>
-                        <label htmlFor='fontSize'>Schriftgröße </label>
-                        <input className='qr-input' type='number' id='fontSize' name='fontSize' 
-                        min="1" max="200"
-                        onChange={onChangeFontSize} value={dog.qr_fontsize} />
-                    </div>
-                    <div>
-                        <div>Sichtbare Elemente</div>
-                        <Checkbox 
-                            id='name' 
-                            label={'Name'} 
-                            checked={(dog.qr_visible_items & 0b100) > 0} 
-                            changeEvent={checkBoxChange}
-                            />
-                        <Checkbox 
-                            id='phone' 
-                            label={'Telefon'} 
-                            checked={(dog.qr_visible_items & 0b010) > 0} 
-                            changeEvent={checkBoxChange}
-                            />
-                        <Checkbox 
-                            id='email' 
-                            label={'Email'} 
-                            checked={(dog.qr_visible_items & 0b001) > 0} 
-                            changeEvent={checkBoxChange}
-                            />
-                    </div>
-                    <div>
-                        <div>Reihenfolge</div>
-                        <div className='beschreibung'>Ändern durch Drag'n Drop</div>
-                        <div className="list-container">
-                            <DndList dragEndHandler={callBackDragEnd} dataprops={dndList.current} />
-                        </div>
+                </Stack>
+
+                <NumberInput sx={{textAlign:'left'}}
+                    type='number' id='fontSize' name='fontSize' 
+                    label = 'Schriftgröße'
+                    min={1} max={200}
+                    stepHoldDelay={500}
+                    stepHoldInterval={100}
+                    onChange={onChangeFontSize} value={dog.qr_fontsize}/>
+                <div>
+                    <div>Sichtbare Elemente</div>
+                    <Checkbox 
+                        id='name' 
+                        label={'Name'} 
+                        checked={(dog.qr_visible_items & 0b100) > 0} 
+//                            changeEvent={checkBoxChange}
+                        onChange={(e) => {checkBoxChange(e.currentTarget)}}
+                        />
+                    <Checkbox 
+                        id='phone' 
+                        label={'Telefon'} 
+                        checked={(dog.qr_visible_items & 0b010) > 0} 
+                        //changeEvent={checkBoxChange}
+                        onChange={(e) => {checkBoxChange(e.currentTarget)}}
+                        />
+                    <Checkbox 
+                        id='email' 
+                        label={'Email'} 
+                        checked={(dog.qr_visible_items & 0b001) > 0} 
+                        //changeEvent={checkBoxChange}
+                        onChange={(e) => {checkBoxChange(e.currentTarget)}}
+                        />
+                </div>
+                <div>
+                    <div>Reihenfolge</div>
+                    <div className='beschreibung'>Ändern durch Drag'n Drop</div>
+                    <div className="list-container">
+                        <DndList dragEndHandler={callBackDragEnd} dataprops={dndList.current} />
                     </div>
                 </div>
-                <div className='column'>
-                    <button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>
-                    <button id="printButton" className='printButton' onClick={printHandler} >QR-Code drucken</button>
-                </div>
             </div>
-            <div className='blockRepeat'>
-                {oneQrBlock()}
-                {oneQrBlock()}
-                {oneQrBlock()}
-                {oneQrBlock()}
-                {oneQrBlock()}
-                {oneQrBlock()}
+            <div className='column'>
+                <button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>
+                <button id="printButton" className='printButton' onClick={printHandler} >QR-Code drucken</button>
             </div>
-        </div> 
-      </NotificationsProvider>
-    </MantineProvider>
+        </div>
+        <div className='blockRepeat'>
+            {oneQrBlock()}
+            {oneQrBlock()}
+            {oneQrBlock()}
+            {oneQrBlock()}
+            {oneQrBlock()}
+            {oneQrBlock()}
+        </div>
+    </div> 
      );
 }