mantine kjhkjh

package.json

@@ -5,11 +5,15 @@
   "dependencies": {
     "@dnd-kit/core": "^6.0.7",
     "@emotion/react": "^11.10.5",
+    "@ionic/cli": "^6.20.8",
+    "@ionic/react": "^6.5.4",
     "@mantine/core": "^5.10.3",
     "@mantine/dropzone": "^5.10.3",
     "@mantine/form": "^5.10.3",
     "@mantine/hooks": "^5.10.3",
     "@mantine/notifications": "^5.10.3",
+    "@radix-ui/react-icons": "^1.1.1",
+    "@tabler/icons": "^2.4.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -20,6 +24,7 @@
     "axios": "^1.2.1",
     "bootstrap": "^5.2.3",
     "env-cmd": "^10.1.0",
+    "ionicons": "^6.1.3",
     "qr-code-styling": "^1.6.0-rc.1",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
@@ -27,7 +32,7 @@
     "react-hot-toast": "^2.4.0",
     "react-repeatable": "^2.0.1",
     "react-router-dom": "^6.4.5",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "swr": "^2.0.2",
     "typescript": "^4.9.4",
     "use-fit-text": "^2.4.0",

src/App.tsx

@@ -17,6 +17,8 @@ import toast, { Toaster } from 'react-hot-toast';
 import { TUser } from './context/UserContext';
 import PasswordReset from './components/PasswordReset';
 import WantNewPw from './components/WantNewPw';
+import { MantineProvider } from '@mantine/core';
+import { NotificationsProvider } from '@mantine/notifications';
 
 const App: React.FC = () => 
 {
@@ -47,6 +49,8 @@ const App: React.FC = () =>
   }
   
   return (
+    <MantineProvider withNormalizeCSS withGlobalStyles>
+    <NotificationsProvider position="top-center" >       
     <div className="App">
           <div className="col middle">
             <BrowserRouter basename='/dog/'>
@@ -71,6 +75,8 @@ const App: React.FC = () =>
           </div>
         
     </div>
+    </NotificationsProvider>
+    </MantineProvider>
   );
 }
 

src/components/Login.tsx

@@ -2,8 +2,12 @@ import {useState} from 'react';
 import { Link/*, useNavigate*/ } from 'react-router-dom';
 import './InputForm.css';
 import {getUser, loginUser} from '../services/PhpApi'
-import { toast, Toaster } from 'react-hot-toast';
 import useSWR from 'swr';
+import { PasswordInput, Stack, TextInput } from '@mantine/core';
+import { showNotification } from '@mantine/notifications';
+//import {IonIcon} from '@ionic/react'
+import { CheckCircledIcon, CrossCircledIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
+
 
 const Login = () => 
 {
@@ -19,10 +23,15 @@ const Login = () =>
 
     if (error)
     { 
-      toast.error(error.message);
+        showNotification(
+            {
+                icon: <CrossCircledIcon />,
+                color: 'red',
+                message: error.message
+            });
+
       return (
         <>
-          <Toaster toastOptions={{ position: "top-center" }} />
           <div>failed to load</div>
         </>);
     }
@@ -50,37 +59,67 @@ const Login = () =>
 
         if(!Object.values(formData).every(val => val.trim() !== ''))
         {
-            toast.error('Please Fill in all Required Fields!');
+            showNotification(
+                {
+                    icon: <ExclamationTriangleIcon/>,
+                    color: 'orange',
+                    message: 'Please Fill in all Required Fields!'
+                });
             return;
         }
 
         const logResp = await loginUser(formData);
         if(logResp.success)
         {
-            toast.success(logResp.message);
+            showNotification(
+                {
+                    icon: <CheckCircledIcon/>,
+                    color: 'green',
+                    message: logResp.message
+                });
             mutate(); // update swr
         }
         else
         {
-            toast.error(logResp.message);
+            // if(logResp.message === undefined)
+            // {
+            //     toast.error(logResp);
+            // }
+            // else
+            showNotification(
+                {
+                    icon: <CrossCircledIcon width={30}/>,
+                    color: 'red',
+                    message: logResp.message
+                });
         }
     }
 
     return (
         <div className='InputForm'>
-            <Toaster toastOptions={{ position: "top-center" }} />
             <h2>Login</h2>
             <div className='frameCenter'>
             <div className='frame'>
             <form onSubmit={submitForm}>
-                <div className='neben'>
+                <Stack align="flex-start" sx={{textAlign: 'left'}}>
-                    <label htmlFor="email">Email:</label>
+                <TextInput
-                    <input type="email" name="email" onChange={onChangeInput} placeholder="Your email" id="email" value={formData.email} required />
+                    label = 'Email:'
-                </div>
+                    type="email" 
-                <div className='neben'>
+                    name="email" 
-                    <label htmlFor="password">Password:</label>
+                    onChange={onChangeInput} 
-                    <input type="password" name="password" onChange={onChangeInput} placeholder="New password" id="password" value={formData.password} required />
+                    placeholder="Deine Email" 
-                </div>
+                    id="email" 
+                    value={formData.email} 
+                    required />
+                <PasswordInput 
+                    sx = {{  maxWidth: '80vw', minWidth: '30vw', width: '300px' }}
+                    label = 'Passwort:'
+                    name="password" 
+                    onChange={onChangeInput} 
+                    placeholder="New password" 
+                    id="password" value={formData.password} 
+                    required/>
+                </Stack>
                 <button type="submit">Login</button>
                 <div className="bottom-link"><Link to="/reg">Register</Link></div>
                 <div className="bottom-link"><Link to="/wantnewpw">Passwort vergessen</Link></div>

src/components/Qr.css

@@ -127,12 +127,6 @@ img
     width: 55px;
 }
 
-label
-{
-    margin-right: 10px;
-    margin-left: 15px;
-}
-
 @media print 
 {
     .qrSettings

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> ) => 
+    const onChangeHeight = (val: number) => 
-    // {
-    //     dog.qr_width_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0;
-    //     setDogRender(dog);
-    // }
-
-    const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) => 
     {
-        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>
+                <Stack align="flex-start" sx={{textAlign: 'left'}}>
-                        <div>Anhänger</div>
+                <div>Anhänger</div>
-                        <label htmlFor='width'>Breite [mm] </label>
+                        <NumberInput 
-                        <NumberInput className='qr-input' type='number' id='width' name='width' 
+                        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>
+                        <NumberInput
-                        <input className='qr-input' type='number' id='height' name='height' 
+                        type='number' id='height' name='height' 
-                        min="1" max="100"
+                        label = 'Höhe [mm]'
+                        min={1} max={100}
+                        stepHoldDelay={500}
+                        stepHoldInterval={100}
                         onChange={onChangeHeight} value={dog.qr_height_cm*10}/>
-                    </div>
+                </Stack>
-                    <div>
+
-                        <label htmlFor='fontSize'>Schriftgröße </label>
+                <NumberInput sx={{textAlign:'left'}}
-                        <input className='qr-input' type='number' id='fontSize' name='fontSize' 
+                    type='number' id='fontSize' name='fontSize' 
-                        min="1" max="200"
+                    label = 'Schriftgröße'
-                        onChange={onChangeFontSize} value={dog.qr_fontsize} />
+                    min={1} max={200}
-                    </div>
+                    stepHoldDelay={500}
-                    <div>
+                    stepHoldInterval={100}
-                        <div>Sichtbare Elemente</div>
+                    onChange={onChangeFontSize} value={dog.qr_fontsize}/>
-                        <Checkbox 
+                <div>
-                            id='name' 
+                    <div>Sichtbare Elemente</div>
-                            label={'Name'} 
+                    <Checkbox 
-                            checked={(dog.qr_visible_items & 0b100) > 0} 
+                        id='name' 
-                            changeEvent={checkBoxChange}
+                        label={'Name'} 
-                            />
+                        checked={(dog.qr_visible_items & 0b100) > 0} 
-                        <Checkbox 
+//                            changeEvent={checkBoxChange}
-                            id='phone' 
+                        onChange={(e) => {checkBoxChange(e.currentTarget)}}
-                            label={'Telefon'} 
+                        />
-                            checked={(dog.qr_visible_items & 0b010) > 0} 
+                    <Checkbox 
-                            changeEvent={checkBoxChange}
+                        id='phone' 
-                            />
+                        label={'Telefon'} 
-                        <Checkbox 
+                        checked={(dog.qr_visible_items & 0b010) > 0} 
-                            id='email' 
+                        //changeEvent={checkBoxChange}
-                            label={'Email'} 
+                        onChange={(e) => {checkBoxChange(e.currentTarget)}}
-                            checked={(dog.qr_visible_items & 0b001) > 0} 
+                        />
-                            changeEvent={checkBoxChange}
+                    <Checkbox 
-                            />
+                        id='email' 
-                    </div>
+                        label={'Email'} 
-                    <div>
+                        checked={(dog.qr_visible_items & 0b001) > 0} 
-                        <div>Reihenfolge</div>
+                        //changeEvent={checkBoxChange}
-                        <div className='beschreibung'>Ändern durch Drag'n Drop</div>
+                        onChange={(e) => {checkBoxChange(e.currentTarget)}}
-                        <div className="list-container">
+                        />
-                            <DndList dragEndHandler={callBackDragEnd} dataprops={dndList.current} />
-                        </div>
-                    </div>
                 </div>
-                <div className='column'>
+                <div>
-                    <button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>
+                    <div>Reihenfolge</div>
-                    <button id="printButton" className='printButton' onClick={printHandler} >QR-Code drucken</button>
+                    <div className='beschreibung'>Ändern durch Drag'n Drop</div>
+                    <div className="list-container">
+                        <DndList dragEndHandler={callBackDragEnd} dataprops={dndList.current} />
+                    </div>
                 </div>
             </div>
-            <div className='blockRepeat'>
+            <div className='column'>
-                {oneQrBlock()}
+                <button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>
-                {oneQrBlock()}
+                <button id="printButton" className='printButton' onClick={printHandler} >QR-Code drucken</button>
-                {oneQrBlock()}
-                {oneQrBlock()}
-                {oneQrBlock()}
-                {oneQrBlock()}
             </div>
         </div>
-      </NotificationsProvider>
+        <div className='blockRepeat'>
-    </MantineProvider>
+            {oneQrBlock()}
+            {oneQrBlock()}
+            {oneQrBlock()}
+            {oneQrBlock()}
+            {oneQrBlock()}
+            {oneQrBlock()}
+        </div>
+    </div> 
      );
 }

tsconfig.json

@@ -19,7 +19,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "preserve"
   },
   "include": [
     "src"