124 lines
3.3 KiB
TypeScript
124 lines
3.3 KiB
TypeScript
import { useState } from "react";
|
|
import { notificationError, notificationSuccess } from "../services/Notifications";
|
|
import { foundMsg, logFormData } from "../services/PhpApi";
|
|
import { Textarea, TextInput } from '@mantine/core';
|
|
import './ContactForm.css';
|
|
|
|
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 onChangeInputTextArea = (e: React.FormEvent<HTMLTextAreaElement> ) =>
|
|
{
|
|
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() !== ''))
|
|
{
|
|
notificationError('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]);
|
|
}
|
|
|
|
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: 'error'
|
|
// };
|
|
|
|
if(data.success)
|
|
{
|
|
notificationSuccess('Eine Kopie wurde auch an ' + toEmail + ' geschickt!');
|
|
notificationSuccess('Nachricht gesendet!');
|
|
}
|
|
else if(!data.success && data.message)
|
|
{
|
|
notificationError(data.message);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="flexCenter">
|
|
<div className="containerForm">
|
|
<form className="formForm" id='idForm' onSubmit={submitForm}>
|
|
<div className="rowForm">
|
|
<div>Bitte schreib eine Email:</div><div></div>
|
|
</div>
|
|
<div className="rowForm">
|
|
<TextInput
|
|
label = 'Email:'
|
|
type="email"
|
|
name="fromEmail"
|
|
onChange={onChangeInput}
|
|
placeholder="Deine Email"
|
|
id="email"
|
|
required />
|
|
</div>
|
|
<div className="rowForm">
|
|
<div className='label'>
|
|
<label>An:</label>
|
|
</div>
|
|
<div>
|
|
<label>{toEmail}</label>
|
|
</div>
|
|
</div>
|
|
<div className="rowForm">
|
|
<Textarea
|
|
label = 'Nachricht:'
|
|
name="msg"
|
|
onChange={onChangeInputTextArea}
|
|
placeholder={`Ich habe ${name} gefunden! Bitte rufen Sie mich an, Telefon:(bitte angeben...)`}
|
|
id="msg"
|
|
required />
|
|
</div>
|
|
<div className="rowForm">
|
|
<div></div><input type="submit" value="Nachricht senden!"/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
} |