dolgozat

src/App.jsx

@@ -11,7 +11,39 @@ import UjAutoForm from './components/UjAutoForm'
 function App() {
   const [autok, setAutok] = useState([])
 
+  const kezdoAllapot = () => {
+    fetch("http://localhost:3000/api/autok")
+    .then(response => response.json())
+    .then(json => {
+      setAutok(json);
+    });
+  };
 
+  useEffect(() => {
+    kezdoAllapot()
+  }, [])
+  
+
+  const elemTorles = (elem) => {
+    const requestOptions = {
+      method:'Delete'
+    };
+    fetch(`http://localhost:3000/api/autok/${elem.id}`,requestOptions)
+          .then(response =>response.json())
+          .then(data => {
+            kezdoAllapot();
+          })
+  }
+
+  const hozzaAdas = (ujAuto) => {
+    fetch("http://localhost:3000/api/autok", {
+      method: "POST",
+      headers: {"Content-Type": "application/json"},
+      body: JSON.stringify(ujAuto)
+    })
+    .then(res => res.json)
+    .then(()=> kezdoAllapot())
+  }
 
 
   return (
@@ -27,15 +59,17 @@ function App() {
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<FoOldal />}>
+          <Route index element={<Navigate to='osszefoglalas' replace />}/>
+            <Route path="osszefoglalas" element={<Osszefoglalas autok={autok} />}></Route>
+            <Route path="autolista" element={<AutoLista autok={autok} torles={elemTorles} />}></Route>
+            <Route path="ujautoform" element={<UjAutoForm hozzaad={hozzaAdas} />}></Route>
+          
+          </Route>
             {/* 3 alútvonal létrehozása: 
             -összefoglalás (alapértelmezett legyen) <Osszefoglalas autok={autok} />
             -autók listája <AutoLista autok={autok} torles={elemTorles} />
             -új autó hozzáadás <UjAutoForm hozzaad={hozzaAdas} /> */}
-            
-
-          </Route>
         </Routes>
-
       </BrowserRouter>
     </>
   )

src/components/AutoKartya.jsx

@@ -6,11 +6,11 @@ const AutoKartya = ({ auto, torles }) => {
     return (
         <div className='card col-md-4'>
             <div className="card-body">
-                <h5 className="card-title">Márka</h5>
+                <h5 className="card-title">Márka: {auto.marka}</h5>
-                <h6 className="card-subtitle mb-2 text-muted">Típus</h6>
+                <h6 className="card-subtitle mb-2 text-muted">Típus: {auto.tipus}</h6>
-                <p className="card-text">Évjárat - Szín - Uzemanyag</p>
+                <p className="card-text">Évjárat: {auto.evjarat} - Szín:{auto.szin} - Uzemanyag:{auto.uzemanyag}</p>
-                <h5 className="card-title">Ár: xxxxxxxxxxxx Ft.</h5>
+                <h5 className="card-title">Ár: {auto.ar} Ft.</h5>
-                {/* Törlés gomb */}
+                <button onClick={() => torles(auto)}>Törlés</button>
             </div>
         </div>
     )

src/components/AutoLista.jsx

@@ -4,7 +4,9 @@ import AutoKartya from './AutoKartya'
 const AutoLista = ({autok, torles}) => {
   return (
     <div className='row mt-5'>
-      {/* Az autókat megjelenítő <AutoKartya /> komponensek */}
+      {autok.map(auto => (
+        <AutoKartya key={auto.id} auto={auto} torles={torles} />
+      ))}
     </div>
   )
 }

src/components/FoMenu.jsx

@@ -5,9 +5,9 @@ const FoMenu = () => {
     return (
         <nav className='nav d-flex gap-3'>
             {/* 3 alútvonalra navigáló főmenü */}
-            <a className='btn btn-outline-dark flex-fill' href="#">Összefoglalás</a>
+            <a className='btn btn-outline-dark flex-fill' href="/osszefoglalas">Összefoglalás</a>
-            <a className='btn btn-outline-dark flex-fill' href="#">Autók listája</a>
+            <a className='btn btn-outline-dark flex-fill' href="/autolista">Autók listája</a>
-            <a className='btn btn-outline-dark flex-fill' href="#">Új autó hozzáadása</a>
+            <a className='btn btn-outline-dark flex-fill' href="/ujautoform">Új autó hozzáadása</a>
 
         </nav>
     )

src/components/Osszefoglalas.jsx

@@ -1,9 +1,18 @@
 import React from 'react'
 
-const Osszefoglalas = () => {
+const Osszefoglalas = ({autok}) => {
+  const db = autok.length;
+  const osszertek = autok.reduce((sum, auto) => sum + Number(auto.ar), 0)
+  const legrégebbi = Math.min(...autok.map(a => Number(a.evjarat)))
+const legújabb = Math.max(...autok.map(a => Number(a.evjarat)))
+/*Összefoglalas - egy rövid statisztika tetszőleges formátumban az autók számáról, azok összértékéröl,
+      a legrégebbi és a legújabb évjáratról.*/
   return (
-    <div>Összefoglalas - egy rövid statisztika tetszőleges formátumban az autók számáról, azok összértékéröl,
+    <div>
-      a legrégebbi és a legújabb évjáratról.
+      <p>Autók száma: {db}</p>
+      <p>Autók összértéke: {osszertek} Ft</p>
+      <p>legrégebbi autó: {legrégebbi} év</p>
+      <p>Legújabb autó: {legújabb} év</p>
     </div>
   )
 }

src/components/UjAutoForm.jsx

@@ -1,48 +1,64 @@
-import React from 'react'
+import React, { useState } from 'react'
-import { useState } from 'react'
 
 const UjAutoForm = ({ hozzaad }) => {
 
+    const [marka, setMarka] = useState("Audi")
+    const [tipus, setTipus] = useState("")
+    const [evjarat, setEvjarat] = useState("")
+    const [szin, setSzin] = useState("")
+    const [ar, setAr] = useState("")
+    const [uzemanyag, setUzemanyag] = useState("")
 
+    const handleSubmit = (e) => {
+        e.preventDefault()
 
+        const ujAuto = { marka, tipus, evjarat, szin, ar, uzemanyag }
+
+        hozzaad(ujAuto)
+    }
 
     return (
         <div className='py-4 text-start'>
-            <form className="row g-3" >
+            <form className="row g-3" onSubmit={handleSubmit}>
                 <div className="col-md-6">
                     <label htmlFor="marka" className="form-label">Márka</label>
-                    <select id="marka" className="form-select" name='marka' required  >
+                    <select id="marka" className="form-select" value={marka} onChange={(e) => setMarka(e.target.value)}
-                        <option value={"Audi"}>Audi</option>
+                    >
-                        <option value={"BMW"}>BMW</option>
+                        <option value="Audi">Audi</option>
-                        <option value={"Citroen"}>Citroen</option>
+                        <option value="BMW">BMW</option>
-                        <option value={"Ferrari"}>Ferrari</option>
+                        <option value="Citroen">Citroen</option>
-                        <option value={"Honda"}>Honda</option>
+                        <option value="Ferrari">Ferrari</option>
-                        <option value={"KIA"}>KIA</option>
+                        <option value="Honda">Honda</option>
-                        <option value={"Opel"}>Opel</option>
+                        <option value="KIA">KIA</option>
-                        <option value={"Volkswagen"}>Volkswagen</option>
+                        <option value="Opel">Opel</option>
+                        <option value="Volkswagen">Volkswagen</option>
                     </select>
                 </div>
                 <div className="col-md-6">
                     <label htmlFor="tipus" className="form-label">Típus</label>
-                    <input type="text" className="form-control" id="tipus" name="tipus" required   />
+                    <input type="text" className="form-control" id="tipus" value={tipus} onChange={(e) => setTipus(e.target.value)} required
+                    />
                 </div>
                 <div className="col-md-6">
                     <label htmlFor="evjarat" className="form-label">Évjárat</label>
-                    <input type="number" className="form-control" id="evjarat" name="evjarat" required   />
+                    <input type="number" className="form-control" id="evjarat" value={evjarat} onChange={(e) => setEvjarat(e.target.value)} required
+                    />
                 </div>
                 <div className="col-md-6">
                     <label htmlFor="szin" className="form-label">Szín</label>
-                    <input type="text" className="form-control" id="szin" name="szin"    />
+                    <input type="text" className="form-control" id="szin" value={szin} onChange={(e) => setSzin(e.target.value)}
+                    />
                 </div>
                 <div className="col-md-6">
                     <label htmlFor="ar" className="form-label">Ár</label>
-                    <input type="number" className="form-control" id="ar" name="ar"   required />
+                    <input type="number" className="form-control" id="ar" value={ar} onChange={(e) => setAr(e.target.value)} required
+                    />
                 </div>
                 <div className="col-md-6">
-                    <label htmlFor="uzemanyagform-label">Üzemanyag</label>
+                    <label htmlFor="uzemanyag" className="form-label">Üzemanyag</label>
-                    <input type="text" className="form-control" id="uzemanyag" name="uzemanyag"   placeholder="benzin, dízel, elektromos stb." />
+                    <input type="text" className="form-control" id="uzemanyag" value={uzemanyag} onChange={(e) => setUzemanyag(e.target.value)} placeholder="benzin, dízel, elektromos stb."
+                    />
                 </div>
-
                 <div className="col-12">
                     <button type="submit" className="btn btn-primary">Felvesz</button>
                 </div>