Kész formázás és hibakezelés

frontend/peepal_react/src/WC_Komponens/Hozzadas/HozzaadForm.jsx

@@ -1,4 +1,4 @@
-import React, { useState} from "react";
+import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 export default function HozzaadForm() {
@@ -10,43 +10,53 @@ export default function HozzaadForm() {
     const [nyitva, setNyitva] = useState("");
     const [utvonal, setUtvonal] = useState("");
     const [koordinatak, setKoordinatak] = useState("");
+    const [errors, setErrors] = useState({});
 
     const navigate = useNavigate();
 
-    const handleSubmit = (event) => {
+    const handleSubmit = async (event) => {
         event.preventDefault();
-        const wcInfo = {
+
-            nev: nev,
+        // Validáció: egyszerű kötelező mező ellenőrzések
-            kerulet_id: kerulet_id,
+        const newErrors = {};
-            kozeli_megall: kozeli_megall,
+        if (!nev.trim()) newErrors.nev = "A név megadása kötelező.";
-            akadalym: akadalym,
+        if (!kerulet_id) newErrors.kerulet_id = "Kerület kiválasztása kötelező.";
-            ar: ar,
+        if (!kozeli_megall.trim()) newErrors.kozeli_megall = "A megálló megadása kötelező.";
-            nyitva: nyitva,
+        if (!koordinatak.trim()) newErrors.koordinatak = "A koordináták megadása kötelező.";
-            utvonal: utvonal,
+        if (!/^-?\d+\.\d+, ?-?\d+\.\d+$/.test(koordinatak)) newErrors.koordinatak = "Helytelen formátum. (pl. 47.1234, 19.1234)";
-            koordinatak: koordinatak,
+
-            felhasznalo_id: null
+        if (Object.keys(newErrors).length > 0) {
+            setErrors(newErrors);
+            return;
         }
 
-        fetch("http://localhost:8000/api/hozzaadas", {
+        const wcInfo = {
-            method: "POST",
+            nev,
-            headers: {
+            kerulet_id,
-                "Content-Type": "application/json"
+            kozeli_megall,
-            },
+            akadalym,
-            body: JSON.stringify(wcInfo)
+            ar,
-        })
+            nyitva,
-        .then(async (response) => {
+            utvonal,
+            koordinatak,
+            felhasznalo_id: null
+        };
+
+        try {
+            const response = await fetch("http://localhost:8000/api/hozzaadas", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(wcInfo)
+            });
+
             if (!response.ok) {
                 const errorData = await response.json();
                 console.error("Hiba a POST kérésnél:", errorData);
                 alert("Hiba történt az adatok mentésekor.");
                 return;
             }
-        
+
-            const newWC = await response.json();
+            await response.json();
-        
-            console.log("Sikeres mentés:", newWC);
-        
-            // csak siker után törlünk mindent és navigálunk
             setNev("");
             setKeruletId("");
             setKozeli("");
@@ -55,163 +65,131 @@ export default function HozzaadForm() {
             setNyitva("");
             setUtvonal("");
             setKoordinatak("");
+            setErrors({});
             navigate("/");
-        })
+
-        .catch((error) => {
+        } catch (error) {
-            console.log("Hálózati hiba:", error);
+            console.error("Hálózati hiba:", error);
             alert("Nem sikerült csatlakozni a szerverhez.");
-        });
+        }
-    }
+    };
-    
+
-    const ToolTip = ({children, text}) => {
+    const ToolTip = ({ children, text }) => (
-        return(
+        <div className="relative group">
-            <div className="relative group">
+            {children}
-                {children}
+            <div className="absolute left-full transform -translate-x-1/2 bottom-full mb-2 hidden group-hover:block bg-gray-800 text-white text-xs rounded-md py-2 px-3 w-48 z-10 shadow-lg opacity-0 group-hover:opacity-100">
-                <div className="absolute left-full transform -translate-x-1/2 bottom-full mb-2 hidden group-hover:block bg-gray-800 text-white text-xs rounded-md py-2 px-3 w-48 z-10 shadow-lg opacity-0 group-hover:opacity-100">
+                {text}
-                    {text}
-                </div>
             </div>
+        </div>
+    );
 
-
+    const convertToRoman = (num) => {
-        )
+        const roman = { M: 1000, CM: 900, D: 500, CD: 400, C: 100, XC: 90, L: 50, XL: 40, X: 10, IX: 9, V: 5, IV: 4, I: 1 };
-    }
+        let str = "";
+        for (let i in roman) {
+            const q = Math.floor(num / roman[i]);
+            num -= q * roman[i];
+            str += i.repeat(q);
+        }
+        return str;
+    };
 
     return (
         <div className="flex justify-center items-center min-h-screen bg-yellow-100">
-            <form
+            <form onSubmit={handleSubmit} className="bg-white p-6 rounded-lg shadow-lg w-96 space-y-4">
-                onSubmit={handleSubmit}
-                className="bg-white p-6 rounded-lg shadow-lg w-96 space-y-4"
-            >
                 <h2 className="text-2xl font-bold text-center">Adjon hozzá nyilvános mosdót, ha nem találja az oldalon</h2>
-                
+
                 <label className="block text-gray-700">Mosdó neve:</label>
-                <input 
+                <input
                     type="text"
-                    name="nev"
+                    value={nev}
-                    value={nev} 
+                    onChange={(e) => setNev(e.target.value)}
-                    onChange={(event) => setNev(event.target.value)}
-                    placeholder="Mosdó neve"
                     className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder="Mosdó neve"
                 />
+                {errors.nev && <p className="text-red-600 text-sm">{errors.nev}</p>}
 
                 <label className="block text-gray-700">Kerület:</label>
-
                 <select
-                    id="kerulet"
-                    name="kerulet_id"
                     value={kerulet_id}
-                    onChange={(event) => setKeruletId(event.target.value)}
+                    onChange={(e) => setKeruletId(e.target.value)}
+                    className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                 >
                     <option value="">Válassz kerületet</option>
                     {Array.from({ length: 23 }, (_, i) => (
                         <option key={i + 1} value={i + 1}>
-                            {i + 1}. kerület
+                            {convertToRoman(i + 1)}. kerület
                         </option>
                     ))}
                 </select>
-
+                {errors.kerulet_id && <p className="text-red-600 text-sm">{errors.kerulet_id}</p>}
-                {/* 
-                <input 
-                    type="text"
-                    name="kerulet"
-                    value={kerulet_id} 
-                    onChange={(event) => setKerulet(event.target.value)}
-                    placeholder="Kerület"
-                    className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                />
-                */}
 
                 <label className="block text-gray-700">Legközelebbi megálló:</label>
-                <input 
+                <input
                     type="text"
-                    name="kozeli_megall"
+                    value={kozeli_megall}
-                    value={kozeli_megall}  
+                    onChange={(e) => setKozeli(e.target.value)}
-                    onChange={(event) => setKozeli(event.target.value)}
-                    placeholder="Legközelebbi megálló"
                     className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder="Legközelebbi megálló"
                 />
+                {errors.kozeli_megall && <p className="text-red-600 text-sm">{errors.kozeli_megall}</p>}
 
                 <label className="block text-gray-700">Ár:</label>
-                <input 
+                <input
-                    type="number" 
+                    type="number"
-                    name="ar"
+                    value={ar}
-                    value={ar} 
+                    onChange={(e) => setAr(e.target.value)}
-                    onChange={(event) => setAr(event.target.value)}
-                    placeholder="Ár (HUF)"
                     className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder="Ár (HUF)"
                 />
 
                 <label className="block text-gray-700">Nyitvatartás:</label>
-                <input 
+                <input
-                    type="text" 
+                    type="text"
-                    name="nyitva"
+                    value={nyitva}
-                    value={nyitva} 
+                    onChange={(e) => setNyitva(e.target.value)}
-                    onChange={(event) => setNyitva(event.target.value)}
-                    placeholder="Nyitvatartás (Óra:Perc-Óra:Perc)"
                     className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder="Nyitvatartás (Óra:Perc-Óra:Perc)"
                 />
 
                 <fieldset className="mt-4">
                     <legend className="block text-gray-700">Akadálymentes:</legend>
                     <div className="flex space-x-4 mt-2">
                         <label className="flex items-center">
-                            <input
+                            <input type="radio" checked={akadalym === true} onChange={() => setAkadalym(true)} className="mr-2" /> Igen
-                                type="radio"
-                                id="igen"
-                                name="akadalym"
-                                value="igen"
-                                checked={akadalym === true}
-                                onChange={() => setAkadalym(true)}
-                                className="mr-2"
-                            />
-                            Igen
                         </label>
                         <label className="flex items-center">
-                            <input
+                            <input type="radio" checked={akadalym === false} onChange={() => setAkadalym(false)} className="mr-2" /> Nem
-                                type="radio"
-                                id="nem"
-                                name="akadalym"
-                                value="nem"
-                                checked={akadalym === false}
-                                onChange={() => setAkadalym(false)}
-                                className="mr-2"
-                            />
-                            Nem
                         </label>
                     </div>
                 </fieldset>
 
                 <div className="flex items-center space-x-2">
                     <label className="text-gray-700">Útvonalterv link:</label>
-                    <ToolTip children={"❔"} text={"Az útvonalterv linket a Google Maps-en éri el (Megosztás ➡ Link másolása)"} />
+                    <ToolTip text="Az útvonalterv linket a Google Maps-en éri el (Megosztás ➡ Link másolása)">❔</ToolTip>
                 </div>
-                <input 
+                <input
-                    type="text" 
+                    type="text"
-                    name="utvonal"
+                    value={utvonal}
-                    value={utvonal} 
+                    onChange={(e) => setUtvonal(e.target.value)}
-                    onChange={(event) => setUtvonal(event.target.value)}
-                    placeholder="Útvonal link"
                     className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder="Útvonal link"
                 />
-                
 
                 <div className="flex items-center space-x-2">
                     <label className="text-gray-700">Koordináták:</label>
-                    <ToolTip children={"❔"} text={"A koordinátákat a helyre kattintva tudja a vágólapra másolni [Jobbklikk ➡ Koordináták (pl. 41.1212, 21.3213)]"} />
+                    <ToolTip text="A koordinátákat a helyre kattintva tudja a vágólapra másolni [Jobbklikk ➡ Koordináták (pl. 41.1212, 21.3213)]">❔</ToolTip>
                 </div>
-                <input 
+                <input
-                    type="text" 
+                    type="text"
-                    name="koordinatak"
+                    value={koordinatak}
-                    value={koordinatak} 
+                    onChange={(e) => setKoordinatak(e.target.value)}
-                    onChange={(event) => setKoordinatak(event.target.value)}
-                    placeholder="Koordináták"
                     className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder="Koordináták"
                 />
+                {errors.koordinatak && <p className="text-red-600 text-sm">{errors.koordinatak}</p>}
 
-                <button 
+                <button className="w-full bg-yellow-600 text-white py-2 rounded-lg hover:bg-yellow-700 transition">Hozzáadás</button>
-                    className="w-full bg-yellow-600 text-white py-2 rounded-lg hover:bg-yellow-700 transition">
-                    Hozzáadás
-                </button>
             </form>
         </div>
     );