fileinput

.gitignore

@@ -11,6 +11,7 @@
 
 # production
 /build
+/extern/material-design-icons-4.0.0
 
 # misc
 .DS_Store

src/components/DndList.tsx

@@ -12,7 +12,8 @@ const useStyles = createStyles((theme) => ({
       border: `1px solid ${
         theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
       }`,
-      padding: `${theme.spacing.xs}px ${theme.spacing.xl}px`,
+//      padding: `${theme.spacing.xs}px ${theme.spacing.xl}px`,
+      padding: `1px ${theme.spacing.xl}px`,
       backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white,
       marginBottom: theme.spacing.sm,
     },

src/components/FileUpload.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Link } from "react-router-dom";
 import {upload as ApiUpload} from "../services/PhpApi";
 import PreviewUpload from "./PreviewUpload";
+import './InputForm.css';
 
 const FileUpload: React.FC = () => 
 {
@@ -10,11 +11,9 @@ const FileUpload: React.FC = () =>
   const [message, setMessage] = useState("");
 
   
-  const selectFile = (event: React.ChangeEvent<HTMLInputElement>) => 
+  const selectFile = (pl: File) => 
   {
-    const { files } = event.target;
+    setCurrentFile(pl);
-    const selectedFiles = files as FileList;
-    setCurrentFile(selectedFiles?.[0]);
     setProgress(0);
   };
 
@@ -53,16 +52,13 @@ const FileUpload: React.FC = () =>
 
   return (
   <div>
-	<div className="row">
+	<div className="row InputForm">
 	  <div className="col-8">
 	    <PreviewUpload chgFile={selectFile} />
-		{/* <label className="btn btn-default p-0">
-		  <input type="file" onChange={selectFile} />
-		</label> */}
 	  </div>
-	  <div className="col-4">
+	  <div>
 		<button
-		  className="btn btn-success btn-sm"
+		  //className="btn btn-success btn-sm"
 		  disabled={!currentFile}
 		  onClick={upload}
 		>

src/components/Header.tsx

@@ -1,5 +1,6 @@
 import './Header.css';
 import '../App.css';
+import './InputForm.css';
 import {logOut} from '../services/PhpApi'
 import { toast, Toaster } from 'react-hot-toast';
 
@@ -15,7 +16,7 @@ function Header()
     }
         
     return (
-    <div className='logout'>
+    <div className='logout InputForm'>
         <Toaster toastOptions={{ position: "top-center" }} />
         <div className='noprint'>Header</div>
         <button onClick={logOutForm}>Logout</button>

src/components/InputForm.css

@@ -4,6 +4,7 @@ form
     display: flex;
     flex-direction: column;
     align-items: flex-end;
+    text-align: left;
 }
 
 .InputForm
@@ -29,7 +30,7 @@ form
     flex-direction: column;
 }
 
-.InputForm button[type=submit]
+.InputForm button, input
 {
   background-color: #aa0404;
   color: white;
@@ -39,6 +40,7 @@ form
   height: 25px;
   max-width: 100%;
   width: auto;
+  margin-top: 5px;
 }
 
 .InputForm input 

src/components/PreviewUpload.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import {getDog} from '../services/PhpApi';
 import useSWR from 'swr';
+import { FileInput } from '@mantine/core';
 
 function PreviewUpload({chgFile}:{chgFile: any}) 
 {
@@ -18,23 +19,12 @@ function PreviewUpload({chgFile}:{chgFile: any})
   console.log(data);
   let file_loc: string | undefined = "./uploads"+ data.data.picture;
 
-  const handleChange = async (
+  const handleChangeFile = async (pl: File) =>
-    event: React.ChangeEvent<HTMLInputElement>
-  ): Promise<any> => 
   {
-    // const { target } = event;
+    console.log(pl);
-    // const img = new Image();
-    const ImageName = event.target.value.split('\\')[2];
-    const Image = event.target.value;
-    console.log('Image on Kevel: ', Image); // Image on Kevel
-    console.log('ImageName on Kevel: ', ImageName); // ImageName on Kevel
-    console.log('ImageLink on Kevel: ', event.target.value); // ImageLink on Kevel
-    console.log('event current Target files: ', event.target.files![0]);
 
-    const fileLoaded = URL.createObjectURL(event.target.files![0]);
+    const fileLoaded = URL.createObjectURL(pl);
-    const files = event.target.files;
 
-    console.log('files: ', files);
     const dimensions = await someFunction(fileLoaded);
     setDimensionWidth(dimensions.width);
     setDimensionHeight(dimensions.height);
@@ -43,8 +33,9 @@ function PreviewUpload({chgFile}:{chgFile: any})
     console.log('dimensions height: ', dimensions.height);
     setFile(fileLoaded);
 
-    chgFile(event);
+    chgFile(pl);
-  };
+  }
+
   const getHeightAndWidthFromDataUrl = (dataURL: string) =>
     new Promise<{height: number, width: number}>((resolve) => {
       const img = new Image();
@@ -66,10 +57,14 @@ function PreviewUpload({chgFile}:{chgFile: any})
 
 //  return ( <></> );
   return (
-    <div>
+    <div className = 'frameCenter'>
-      <input
+      <FileInput
-        type="file"
+//        label = 'Datei :'
-        onChange={handleChange}
+        name="file" 
+        placeholder="Bild auswählen" 
+        id="file" 
+        required 
+        onChange={handleChangeFile}
         accept="image/jpg,.gif,.png,.svg,.webp audio/wav,.mp3"
       />
       <div className='prevUplImg'>

src/components/Profil.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import useSWR from 'swr';
 import { Link } from 'react-router-dom';
 import toast, { Toaster } from 'react-hot-toast';
@@ -8,6 +8,7 @@ import CreateQr from '../services/CreateQr';
 import Img from './Img';
 import './InputForm.css';
 import './Profil.css';
+import { TextInput } from '@mantine/core';
 
 function Profil() 
 {
@@ -20,6 +21,9 @@ function Profil()
 
 //    const { data, error, isLoading } = useSWR( user?.qr_id, getDog);
     const { data, error, isLoading, mutate } = useSWR( "profilData", getProfilData);
+
+    const edit = useRef(false);
+    const formDataSave = useRef(formData); // just to fill it
 // data ist dogdata, logindata holt sich getProfilData.php aus $_SESSION
     if (error) return (<div>failed to load</div>);
     if (isLoading) return (<div>loading...</div>);
@@ -55,15 +59,9 @@ function Profil()
         qr_code: ''
     };
 
-    if (formData.email)
+    if (edit.current)
     {
-        formData_loc =
+        formData_loc = {...formDataSave.current}; // copy constructor
-        {
-            email: formData.email,
-            name: formData.name,
-            phone: formData.phone,
-            qr_code: formData.qr_code
-        };
     }
     else
     {
@@ -83,7 +81,9 @@ function Profil()
             ...formData_loc,
             [e.currentTarget.name]:e.currentTarget.value
         };
-        setFormData(formData_loc);    
+        setFormData(formData_loc);   
+        edit.current = true; 
+        formDataSave.current = {...formData_loc};
     }
 
     function showData(data: any/*, e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>*/)
@@ -159,18 +159,32 @@ function Profil()
                 <div id="canvas"></div>
             </div>
             <form onSubmit={submitForm}>
-                <div className='neben'>
+            <TextInput
-                    <label htmlFor="email">Email: </label>                    
+                label = 'Email:'
-                    <input type="email" name="email" onChange={onChangeInput} placeholder="Deine email" id="email" value={formData_loc.email} required />
+                type="email" 
-                </div>
+                name="email" 
-                <div className='neben'>
+                onChange={onChangeInput} 
-                    <label htmlFor="name">Name: </label>
+                placeholder="Deine Email" 
-                    <input type="text" name="name" onChange={onChangeInput} id="name" value={formData_loc.name} required />
+                id="email" 
-                </div> 
+                value={formData_loc.email} 
-                <div className='neben'>
+                required />
-                    <label htmlFor="phone">Telefon: </label>
+            <TextInput
-                    <input type="text" name="phone" onChange={onChangeInput} id="phone" value={formData_loc.phone} required />
+                label = 'Name:'
-                </div>
+                type="text" 
+                name="name" 
+                onChange={onChangeInput} 
+                placeholder="Name des Tieres" 
+                id="name" 
+                value={formData_loc.name} 
+                required />
+            <TextInput
+                label = 'Telefon:'
+                type="text" 
+                name="phone" 
+                onChange={onChangeInput} 
+                id="phone" 
+                value={formData_loc.phone} 
+                required />
                 <button type="submit">Update</button>
             </form>
             </div>

src/components/Qr.tsx

@@ -1,13 +1,13 @@
-import React, { ChangeEvent, MouseEventHandler, useState } from 'react'
+import React, { 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 Img from './Img';
 import './Qr.css';
+import './InputForm.css';
 import useSWR from 'swr';
-import { MantineProvider, NumberInput, Stack, Checkbox } from '@mantine/core';
+import { NumberInput, Stack, Checkbox, MantineProvider } from '@mantine/core';
-import { NotificationsProvider, showNotification } from '@mantine/notifications';
+import { showNotification } from '@mantine/notifications';
 import {DndList, DndListProps, TDataItem} from './DndList';
 
 
@@ -338,11 +338,15 @@ export default function Qr()
                     <div>Reihenfolge</div>
                     <div className='beschreibung'>Ändern durch Drag'n Drop</div>
                     <div className="list-container">
-                        <DndList dragEndHandler={callBackDragEnd} dataprops={dndList.current} />
+                            <DndList 
+                                dragEndHandler={callBackDragEnd} 
+                                dataprops={dndList.current} 
+                                
+                                />
                     </div>
                 </div>
             </div>
-            <div className='column'>
+            <div className='column InputForm'>
                 <button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>
                 <button id="printButton" className='printButton' onClick={printHandler} >QR-Code drucken</button>
             </div>

src/components/Register.tsx

@@ -110,7 +110,7 @@ const Register = () =>
                     id="email" 
                     value={formData.email} 
                     required />
-                <PasswordInput 
+                <PasswordInput
                     sx = {{  maxWidth: '80vw', minWidth: '30vw', width: '300px' }}
                     label = 'Passwort:'
                     name="password" 

src/components/WantNewPw.tsx

@@ -1,3 +1,4 @@
+import { TextInput } from '@mantine/core';
 import React, { useState } from 'react'
 import toast, { Toaster } from 'react-hot-toast';
 import {wantNewPw} from '../services/PhpApi'
@@ -44,10 +45,15 @@ function WantNewPw()
             <div className='frame'>
             <form onSubmit={submitForm}>
                 <div className='neben'>
-                    <label htmlFor="email">Email: </label>
+                <TextInput
-                    <input type="email" name="email" onChange={onChangeInput} 
+                    label = 'Email:'
-                        placeholder="Gleiche Email, wie bei der Registrierung angeben" 
+                    type="email" 
-                        id="email" value={email} required />
+                    name="email" 
+                    onChange={onChangeInput} 
+                    placeholder="Deine Email" 
+                    id="email" 
+                    value={email} 
+                    required />
                 </div> 
                 <button type="submit" >Passwort anfordern</button>
             </form>