Enhance backend and frontend setup with MySQL integration, Docker configurations, and toast notifications

- Updated .gitignore to include additional environment and build files
- Configured Dockerfiles for backend and frontend with npm install and port exposure
- Added MySQL connection pool and query function in backend services
- Implemented form submission with toast notifications in MainForm component
- Updated package.json and package-lock.json for new dependencies
- Enhanced routing and layout in frontend with toast notifications

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import Admin from './components/Admin'; // Beispiel-Komponente
-import Home from './components/Home';   // Beispiel-Komponente
+import Admin from './components/Admin';
+import Home from './components/Home';
+import "react-toastify/dist/ReactToastify.css";
 
 function App() {
   return (

frontend/src/components/Home.tsx

@@ -1,6 +1,7 @@
 import "../App.css";
 import Layout from "../layout/Layout";
 import MainForm from "./MainForm";
+import "react-toastify/dist/ReactToastify.css";
 
 function App() {
   return (

frontend/src/components/MainForm.tsx

@@ -1,11 +1,16 @@
 import React from "react";
 import { registerLos } from "../utils/register";
+import { toast } from "react-toastify";
 
 const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
   event.preventDefault();
   const formData = new FormData(event.currentTarget);
   const data = Object.fromEntries(formData.entries());
-  await registerLos(data);
+  toast.promise(registerLos(data), {
+    pending: "Registriere Los...",
+    success: "Los erfolgreich registriert!",
+    error: "Fehler bei der Registrierung des Loses.",
+  });
 };
 
 const MainForm: React.FC = () => {
@@ -72,15 +77,15 @@ const MainForm: React.FC = () => {
 
         <div className="space-y-1">
           <label
-            htmlFor="strasse"
+            htmlFor="adresse"
             className="text-sm font-medium text-zinc-800"
           >
             Straße + Haus Nr.:
           </label>
           <input
             type="text"
-            id="strasse"
-            name="strasse"
+            id="adresse"
+            name="adresse"
             placeholder="Musterstraße 1"
             required
             className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"

frontend/src/layout/Layout.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Header from "../components/Header";
 import "../App.css";
+import { ToastContainer } from "react-toastify";
 
 type LayoutProps = {
   children: React.ReactNode;
@@ -12,6 +13,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
       <Header />
       <main>{children}</main>
       <footer></footer>
+      <ToastContainer />
     </>
   );
 };

frontend/src/utils/register.ts

@@ -1,3 +1,17 @@
+import { myToast } from "./toastify";
+
 export const registerLos = async (data: any) => {
-    console.log(data);
-}
+  await fetch("http://localhost:8002/lose", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  }).then((response) => {
+    if (response.ok) {
+      myToast("Los erfolgreich registriert!", "success");
+    } else {
+      myToast("Fehler bei der Registrierung des Loses.", "error");
+    }
+  });
+};

frontend/src/utils/toastify.ts

@@ -0,0 +1,17 @@
+import { toast, type ToastOptions } from "react-toastify";
+
+export type ToastType = "success" | "error" | "info" | "warning";
+
+export const myToast = (message: string, msgType: ToastType) => {
+  let config: ToastOptions = {
+    position: "top-right",
+    autoClose: 5000,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    progress: undefined,
+    theme: "dark",
+  };
+  toast[msgType](message, config);
+};