contact email

src/components/Dog.tsx

@@ -45,7 +45,7 @@ const Dog = () =>
   <p>pic: {picPath}</p>
   <p>qr: {qrPath}</p> */}
   <Img pth={picPath} className=''/>
-  <DogNameTxt name={name} email={email} phone={phone} />
+  <DogNameTxt name={name} email={email} phone={phone} qr_id={dog.qr_id} />
   </div>
 :
 <></>;

src/components/DogContactForm.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import toast, { Toaster } from "react-hot-toast";
+import { foundMsg, logFormData } from "../services/PhpApi";
+
+
+export default function DogContactForm(
+    {toEmail, name, qr_id}: 
+    {toEmail: string, name: string, qr_id: string}) 
+{
+    const formdata_init = new FormData();
+    formdata_init.append('fromEmail', '');
+    formdata_init.append('msg', '');
+    const [formData, setFormData] = useState<FormData>(formdata_init);
+
+    const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => 
+    {
+        setFormData({
+            ...formData,
+            [e.currentTarget.name]:e.currentTarget.value
+        })
+
+        
+    }
+
+    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => 
+    {
+        e.preventDefault();
+
+        if(!Object.values(formData).every(val => val.trim() !== ''))
+        {
+            toast.error('Bitte alle Felder ausfüllen!');
+            return;
+        }
+
+//        const sendData: any = {...formData};
+        const sendData = new FormData();
+        const values = Object.values(formData);
+        const keys = Object.keys(formData);
+
+        for (const key of keys) 
+        {
+            const index = keys.indexOf(key);
+            sendData.append(key, values[index]);
+
+            console.log(key + ' ' + sendData.get(key));
+        }
+
+        sendData.append('toEmail', toEmail);
+        sendData.append('name', name);
+        sendData.append('qr_id', qr_id);
+
+        logFormData(sendData);
+
+        const data = await foundMsg(sendData);
+// const data =    {
+//                     success:0,
+//                     message: 'yyy'
+//                 };
+
+        if(data.success)
+        {
+            toast.success('Nachricht gesendet!');
+        }
+        else if(!data.success && data.message)
+        {
+            toast.error(data.message);
+        }
+    }
+
+    return (
+        <form id='idForm' onSubmit={submitForm}>
+        <Toaster toastOptions={{ position: "top-center" }} />
+        <div className='neben'>
+            <label htmlFor="email">Email: </label>                    
+            <input type="email" name="fromEmail" onChange={onChangeInput} placeholder="Deine Email" id="fromEmail" required />
+        </div>
+        <div className='neben'>
+            <label htmlFor="msg">Passwort: </label>
+            <input type="text" name="msg" onChange={onChangeInput} placeholder='Ich habe ${name} gefunden. Bitte rufen Sie mich an! Meine Telefonnummer: (bitte eintragen)' id="msg" />
+        </div> 
+        <button type="submit">Nachricht senden!</button>
+    </form>
+);
+
+}

src/components/DogNameTxt.tsx

@@ -1,13 +1,25 @@
 import React from 'react'
+import DogContactForm from './DogContactForm'
 
 export default function DogNameTxt(
-    {name, email, phone}: 
+    {name, email, phone, qr_id}: 
-    {name: string, email: string, phone: string}) {
+    {name: string, email: string, phone: string, qr_id: string}) {
   return (
     <div>
-      <p>Hallo ich bin <p className='Content'>{name}!</p></p>
+      <p>Hallo ich bin 
-      <p>bitte schreib eine Mail an <p className='Content'>{email}</p>  
+        <p className='Content'>{name}!</p>
-      oder ruf <div className='neben'><div className='Content'>{phone}</div> an,</div> damit ich schnell wieder Heim komme.</p>
+      </p>
+        <DogContactForm toEmail={email} name={name} qr_id={qr_id} />
+      <p>
+        schreib eine Mail an 
+        <p className='Content'>{email}</p>  
+        oder ruf 
+        <div className='neben'>
+          <div className='Content'>{phone}</div> 
+          an,
+        </div> 
+        damit ich schnell wieder Heim komme.
+      </p>
     </div>
   )
 }

src/components/dog.code-workspace

@@ -1,11 +0,0 @@
-{
-	"folders": [
-		{
-			"path": "../.."
-		},
-		{
-			"path": "../../../../../../../../../opt/lampp/htdocs/dog/php-dog"
-		}
-	],
-	"settings": {}
-}

src/dog.code-workspace

@@ -0,0 +1,11 @@
+{
+	"folders": [
+		{
+			"path": ".."
+		},
+		{
+			"path": "../../../../../../../../opt/lampp/htdocs/dog/php-dog"
+		}
+	],
+	"settings": {}
+}

src/services/PhpApi.ts

@@ -85,6 +85,31 @@ export const registerUser = async ({email,password}:
     }
 }
 
+export function logFormData(form_data: FormData)
+{
+    for (const key of form_data.keys()) 
+    {
+        console.log(key + ' ' + form_data.get(key));
+        
+    }
+}
+
+export const foundMsg = async (form_data:
+    FormData) => 
+{
+    try
+    {
+        const {data} = await Axios.post('foundEmail.php', form_data);
+        console.log('Api foundMsg');
+        console.log(data);
+        return data;
+    }
+    catch(err)
+    {
+        return {success:0, message:'Server Error!'};
+    }
+}
+
 export const updateQR = async ({qr_width_cm, qr_height_cm, qr_fontsize, qr_visible_items, qr_item_sequence}:
     {qr_width_cm: number, qr_height_cm: number, qr_fontsize: number, qr_visible_items: number, qr_item_sequence: number}) => 
 {

tsconfig.json

@@ -6,6 +6,7 @@
       "dom.iterable",
       "esnext"
     ],
+    "downlevelIteration": true,
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,