added selenium testing example

25_04_11/piac/src/components/Termekfeltoltes.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { useState } from "react";
+import '../styles/Termekfeltoltes.css';
+
+function Termekfeltoltes() {
+    let [ujTermek, setUjTermek] = useState({
+        elado: "",
+        email: "",
+        telefonszam: "",
+        termekNev: "",
+        leiras: "",
+        ar: null
+    });
+
+    let esemenykezeles = (event) => {
+        let name = event.target.name;
+        let value = event.target.value;
+        setUjTermek(prevState => ({
+            ...prevState,
+            [name]: value
+        }));
+    };
+
+    let feldolgozas = async (event) => {
+        try {
+            let api = await fetch("http://localhost:8000/termekek", {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(ujTermek)
+            });
+
+            if (!api.ok) {
+                throw new Error(`Hiba történt! Hibajelzés: ${api.status}`);
+            }
+        } catch (error) {
+            console.error("Hiba történt az adatfeltöltés során:", error);
+        }
+    };
+
+    return (
+        <>
+            <h1>Termék feltöltése</h1>
+            <div>
+                <form onSubmit={feldolgozas} action="/termekek">
+                    <div>
+                        <label>Termék neve:</label>
+                        <input type='text' name="termekNev" value={ujTermek.termekNev} onChange={esemenykezeles}/>
+                        <label>Termék leírása:</label>
+                        <input type='text' name="leiras" value={ujTermek.leiras} onChange={esemenykezeles}/>
+                        <label>Termék ára:</label>
+                        <input type='number' name="ar" value={ujTermek.ar} onChange={esemenykezeles}/>
+                        <label>Eladó neve:</label>
+                        <input type='text' name="elado" value={ujTermek.elado} onChange={esemenykezeles}/>
+                        <label>Email cím:</label>
+                        <input type='email' name="email" value={ujTermek.email} onChange={esemenykezeles}/>
+                        <label>Telefonszám:</label>
+                        <input type='tel' name="telefonszam" value={ujTermek.telefonszam} onChange={esemenykezeles}/>
+                        
+                        <select name="atveteliMod">
+                            <option value="szemelyes">Személyes átvétel</option>
+                            <option value="futar">Futárszolgálat</option>
+                            <option value="mindketto">Mindkét lehetőség</option>
+                        </select>
+
+                        <button type='submit' name="elkuldes" >Termék feltöltése</button>
+                    </div>
+                </form>
+            </div>
+        </>
+    );
+}
+
+export default Termekfeltoltes;