Asszem kész

2025-05-05 13:17:26 +02:00
parent 7b3467ee70
commit 11067d20f0
5 changed files with 1 additions and 52 deletions
--- a/frontend/peepal_react/src/WC_Komponens/Csempe/Csempe.jsx
+++ b/frontend/peepal_react/src/WC_Komponens/Csempe/Csempe.jsx
@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from "react";
+import { TfiWheelchair } from "react-icons/tfi";
+import { mosdokFetch } from "../../apiFetch";
+import { useAuth } from "../Bejel_Regisz/AuthContext";
+
+export default function Csempe() {
+    const [mosdok, setMosdok] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const { user } = useAuth();
+
+    useEffect(() => {
+        const getData = async () => {
+            setLoading(true);
+            setError(null);
+            const data = await mosdokFetch();
+            if (data) {
+                setMosdok(data);
+            } else {
+                setError("Nem sikerült betölteni az adatokat.");
+            }
+            setLoading(false);
+        };
+        getData();
+    }, []);
+
+    function mosdoTorles(mosdoId){
+        fetch("http://localhost:8000/api/mosdotorles/" + mosdoId, {
+            method: "DELETE",
+            header: {
+                "Accept" : "application/json",
+                "Content-Type" : "application/json"
+            }
+        })
+        .then(response => {
+            if (response.ok) {
+                // Sikeres törlés után szűrd ki az adott elemet a state-ből
+                setMosdok(prev => prev.filter(m => m.id !== mosdoId));
+            } else {
+                console.error("Törlés sikertelen");
+            }
+        })
+        .catch(error => {
+            console.error("Hiba a törlés során:", error);
+        });
+    }
+
+    if (loading) {
+        return(
+          <div className="flex justify-center items-center h-32">
+              <div 
+                role="status"
+                className="w-12 h-12 border-4 border-gray-300 border-t-yellow-500 rounded-full animate-spin"
+              ></div>
+          </div>
+        );
+    }
+
+    if (error) {
+        return <div className="text-center text-red-600 p-4">{error}</div>;
+    }
+
+    if(user && user.is_admin){
+        return (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-4">
+                {mosdok.map((mosdo, index) => (
+                    <div key={index} className="bg-white shadow-lg rounded-xl p-6 border border-gray-200 relative">
+                        <h1 className="text-xl font-semibold text-gray-800 mb-3">{mosdo.nev}</h1>
+                        <div className="text-gray-600 space-y-1">
+                            <p><span className="font-medium text-gray-800">Kerület:</span> {mosdo.kerulet?.kerulet_nev}</p>
+                            <p><span className="font-medium text-gray-800">Legközelebbi megálló:</span> {mosdo.kozeli_megall}</p>
+                            <p><span className="font-medium text-gray-800">Ár:</span> {mosdo.ar} Ft</p>
+                            <p><span className="font-medium text-gray-800">Nyitvatartás:</span> {mosdo.nyitva}</p>
+                        </div>
+                        {mosdo.akadalym === 1 ? <TfiWheelchair className="absolute bottom-10 right-10 w-8 h-8"/> : ""}
+                        <a
+                            href={mosdo.utvonal}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="font-bold mt-4 inline-block bg-yellow-500 text-white py-2 px-4 rounded-lg shadow-md hover:bg-yellow-600 transition"
+                        >
+                            Útvonalterv
+                        </a>
+                        <button
+                            onClick={() => mosdoTorles(mosdo.id)}
+                            className="font-bold mt-4 inline-block bg-red-500 text-white py-2 px-4 rounded-lg shadow-md hover:bg-red-600 transition"
+                        >
+                            Törlés
+                        </button>
+                    </div>
+                ))}
+            </div>
+        );
+    } else {
+        return(
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-4">
+                {mosdok.map((mosdo, index) => (
+                    <div key={index} className="bg-white shadow-lg rounded-xl p-6 border border-gray-200 relative">
+                        <h1 className="text-xl font-semibold text-gray-800 mb-3">{mosdo.nev}</h1>
+                        <div className="text-gray-600 space-y-1">
+                            <p><span className="font-medium text-gray-800">Kerület:</span> {mosdo.kerulet?.kerulet_nev}</p>
+                            <p><span className="font-medium text-gray-800">Legközelebbi megálló:</span> {mosdo.kozeli_megall}</p>
+                            <p><span className="font-medium text-gray-800">Ár:</span> {mosdo.ar} Ft</p>
+                            <p><span className="font-medium text-gray-800">Nyitvatartás:</span> {mosdo.nyitva}</p>
+                        </div>
+                        {mosdo.akadalym === 1 ? <TfiWheelchair className="absolute bottom-10 right-10 w-8 h-8"/> : ""}
+                        <a
+                            href={mosdo.utvonal}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="font-bold mt-4 inline-block bg-yellow-500 text-white py-2 px-4 rounded-lg shadow-md hover:bg-yellow-600 transition"
+                        >
+                            Útvonalterv
+                        </a>
+                    </div>
+                ))}
+            </div>
+        )
+    }
+}
+