From 37977c606605a90e8d3a8f49f4d6bde84d2c9a38 Mon Sep 17 00:00:00 2001
From: Peter Hoppe <p.hoppe@gmx.de>
Date: Tue, 7 Feb 2023 00:25:30 +0100
Subject: [PATCH] contact

---
 src/components/ContactForm.css    | 90 +++++++++++++++++++++++++++++++
 src/components/ContactForm2.css   | 60 +++++++++++++++++++++
 src/components/Dog.css            |  5 ++
 src/components/DogContactForm.tsx | 69 +++++++++++++++++-------
 src/components/DogNameTxt.tsx     |  6 +--
 src/components/test.html          | 39 ++++++++++++++
 6 files changed, 247 insertions(+), 22 deletions(-)
 create mode 100644 src/components/ContactForm.css
 create mode 100644 src/components/ContactForm2.css
 create mode 100644 src/components/test.html

diff --git a/src/components/ContactForm.css b/src/components/ContactForm.css
new file mode 100644
index 0000000..728e307
--- /dev/null
+++ b/src/components/ContactForm.css
@@ -0,0 +1,90 @@
+/* Style inputs, select elements and textareas */
+input[type=email], select, textarea{
+  width: 100%;
+  padding: 3px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+  resize: vertical;
+  background-color: #f26e0a;
+
+}  
+
+input[type=submit] {
+  background-color: #aa0404;
+  color: white;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  width: 50%;
+  height: 25px;
+}
+
+
+  /* Style the label to display next to the inputs */
+  label 
+  {
+    padding: 2px 12px 2px 0;
+    display: inline-block;
+  }
+  
+  .flexCenter
+  {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
+  .containerForm
+  {
+    display: flex;
+    flex-direction: row;
+    border-radius: 5px;
+    background-color: #f6602e;
+    padding: 20px;
+    justify-content: center;   
+    width: 400px;
+  }
+  
+  .formForm
+  {
+    display: flex;
+    flex-direction: column;
+    max-width: 600px;
+  }
+  
+  
+  /* Floating column for labels: 25% width */
+  .col-25 
+  {
+    float: left;
+    width: 25%;
+    margin-top: 6px;
+  }
+  
+  /* Floating column for inputs: 75% width */
+  .col-75 
+  {
+    float: left;
+    width: 75%;
+    margin-top: 6px;
+  }
+  
+  .rowForm
+  {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+  
+  .row
+  {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .textArea
+  {
+    height: 100px;
+  }
+  
\ No newline at end of file
diff --git a/src/components/ContactForm2.css b/src/components/ContactForm2.css
new file mode 100644
index 0000000..14279ab
--- /dev/null
+++ b/src/components/ContactForm2.css
@@ -0,0 +1,60 @@
+/* Style inputs, select elements and textareas */
+  
+  /* Style the label to display next to the inputs */
+  label 
+  {
+    padding: 12px 12px 12px 0;
+    display: inline-block;
+  }
+  
+  
+  .formForm
+  {
+    display: flex;
+    flex-direction: column;
+   
+  }
+  /* Style the container */
+  .containerForm
+  {
+    display: flex;
+    flex-direction: row;
+    border-radius: 5px;
+    background-color: #f2f2f2;
+    padding: 20px;
+    width: 600px;
+  }
+  
+  /* Floating column for labels: 25% width */
+  .col-25 
+  {
+    float: left;
+    width: 25%;
+    margin-top: 6px;
+  }
+  
+  /* Floating column for inputs: 75% width */
+  .col-75 
+  {
+    float: left;
+    width: 75%;
+    margin-top: 6px;
+  }
+  
+  .rowForm
+  {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .row
+  {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .textArea
+  {
+    height: 200px;
+  }
+  
\ No newline at end of file
diff --git a/src/components/Dog.css b/src/components/Dog.css
index cb1c1d1..2006ddc 100644
--- a/src/components/Dog.css
+++ b/src/components/Dog.css
@@ -5,6 +5,11 @@
     margin: 5px;
 }
 
+.text
+{
+    margin: 5px;
+}
+
 button
 { 
     max-width: 30%;
diff --git a/src/components/DogContactForm.tsx b/src/components/DogContactForm.tsx
index 9531494..98de99b 100644
--- a/src/components/DogContactForm.tsx
+++ b/src/components/DogContactForm.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import toast, { Toaster } from "react-hot-toast";
 import { foundMsg, logFormData } from "../services/PhpApi";
-
+import './ContactForm.css';
 
 export default function DogContactForm(
     {toEmail, name, qr_id}: 
@@ -20,6 +20,16 @@ export default function DogContactForm(
         })
 
         
+    }
+
+    const onChangeInputTextArea = (e: React.FormEvent<HTMLTextAreaElement> ) => 
+    {
+        setFormData({
+            ...formData,
+            [e.currentTarget.name]:e.currentTarget.value
+        })
+
+        
     }
 
     const submitForm = async (e: React.FormEvent<HTMLFormElement>) => 
@@ -41,8 +51,6 @@ export default function DogContactForm(
         {
             const index = keys.indexOf(key);
             sendData.append(key, values[index]);
-
-            console.log(key + ' ' + sendData.get(key));
         }
 
         sendData.append('toEmail', toEmail);
@@ -51,11 +59,11 @@ export default function DogContactForm(
 
         logFormData(sendData);
 
-        const data = await foundMsg(sendData);
-// const data =    {
-//                     success:0,
-//                     message: 'yyy'
-//                 };
+        //const data = await foundMsg(sendData);
+const data =    {
+                    success:0,
+                    message: 'error'
+                };
 
         if(data.success)
         {
@@ -68,18 +76,43 @@ export default function DogContactForm(
     }
 
     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 className="flexCenter">
+    <div className="containerForm">
+    <Toaster toastOptions={{ position: "top-center" }} />
+    <form className="formForm" id='idForm' onSubmit={submitForm}>
+    <p>Bitte schreib eine Email:</p>
+    <div className="rowForm">
+        <div className="col-25">
+            <label htmlFor="email">Email</label>
+        </div>
+        <div className="col-75">
+            <input type="email" id="fromEmail" name="fromEmail" placeholder="Deine Email.." onChange={onChangeInput} required />
+        </div>
+    </div>
+    <div className="rowForm">
+        <div className="col-25">
+            <label>An</label>
+        </div>
+        <div className="col-75">
+            <label>{toEmail}</label>
+        </div>
+    </div>
+    <div className="rowForm">
+        <div className="col-25">
+            <label htmlFor="msg">Nachricht</label>
+        </div>
+        <div className="col-75">
+            <textarea className="textArea" id="msg" name="msg" placeholder={`Ich habe ${name} gefunden! Bitte rufen Sie mich an, Telefon:(bitte angeben...)`} onChange={onChangeInputTextArea} required/>
+        </div>
+    </div>
+        <div className="rowForm">
+        <div></div><input type="submit" value="Nachricht senden!"/>
         </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>
+    </div>
+</div>
+    </>
 );
 
 }
\ No newline at end of file
diff --git a/src/components/DogNameTxt.tsx b/src/components/DogNameTxt.tsx
index 74ae6be..3a74718 100644
--- a/src/components/DogNameTxt.tsx
+++ b/src/components/DogNameTxt.tsx
@@ -6,13 +6,11 @@ export default function DogNameTxt(
     {name: string, email: string, phone: string, qr_id: string}) {
   return (
     <div>
-      <p>Hallo ich bin 
+      <p className='text'>Hallo ich bin 
         <p className='Content'>{name}!</p>
       </p>
         <DogContactForm toEmail={email} name={name} qr_id={qr_id} />
-      <p>
-        schreib eine Mail an 
-        <p className='Content'>{email}</p>  
+      <p className='text'>
         oder ruf 
         <div className='neben'>
           <div className='Content'>{phone}</div> 
diff --git a/src/components/test.html b/src/components/test.html
new file mode 100644
index 0000000..111e6db
--- /dev/null
+++ b/src/components/test.html
@@ -0,0 +1,39 @@
+<html>
+
+<head>
+    <link href="./ContactForm.css" rel="stylesheet">
+</head>
+
+<body>
+<div class="flexCenter">
+
+    <div class="containerForm">
+        <div style="position: fixed; z-index: 9999; inset: 16px; pointer-events: none;"></div>
+        <form class="formForm" id="idForm">
+            <p>Bitte schreib eine Email:</p>
+            <div class="rowForm">
+                <div class="col-25"><label for="email">Email</label></div>
+                <div class="col-75"><input type="email" id="fromEmail" name="fromEmail" placeholder="Deine Email.."
+                        required=""></div>
+            </div>
+            <div class="rowForm">
+                <div class="col-25">
+                    <label>An</label>
+                </div>
+                <div class="col-75">
+                    <label>a@q.q</label>
+                </div>
+            </div>
+                    <div class="rowForm">
+                <div class="col-25"><label for="msg">Nachricht</label></div>
+                <div class="col-75"><textarea class="textArea" id="msg" name="msg"
+                        placeholder="Ich habe Ursula gefunden! Bitte rufen Sie mich an, Telefon:(bitte angeben...)"
+                        required=""></textarea></div>
+            </div>
+            <div class="rowForm"><input type="submit" value="Nachricht senden!"></div>
+        </form>
+    </div>
+</div>
+</body>
+
+</html>
\ No newline at end of file