Navigáció első menet kész

2025-12-08 12:14:18 +01:00
parent 70385e9e1b
commit dc8102b545
9 changed files with 144 additions and 30 deletions
--- a/index.html
+++ b/index.html
@@ -1,13 +1,21 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>bevasarlolista</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>bevasarlolista</title>
+  <!-- Latest compiled and minified CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+
+  <!-- Latest compiled JavaScript -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
      "version": "0.0.0",
      "dependencies": {
        "react": "^19.2.0",
-        "react-dom": "^19.2.0"
+        "react-dom": "^19.2.0",
+        "react-router-dom": "^7.10.1"
      },
      "devDependencies": {
        "@eslint/js": "^9.39.1",
@@ -1628,6 +1629,19 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2526,6 +2540,44 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-router": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.10.1.tgz",
+      "integrity": "sha512-gHL89dRa3kwlUYtRQ+m8NmxGI6CgqN+k4XyGjwcFoQwwCWF6xXpOCUlDovkXClS0d0XJN/5q7kc5W3kiFEd0Yw==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.10.1.tgz",
+      "integrity": "sha512-JNBANI6ChGVjA5bwsUIwJk7LHKmqB4JYnYfzFwyp2t12Izva11elds2jx7Yfoup2zssedntwU0oZ5DEmk5Sdaw==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.10.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
    "node_modules/resolve-from": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -2594,6 +2646,12 @@
        "semver": "bin/semver.js"
      }
    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
  },
  "dependencies": {
    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.10.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.39.1",
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,6 +5,8 @@ import './App.css'
 import BevasarloLista from './components/BevasarloLista';
 import HozzaAdasForm from './components/HozzaAdasForm';
 import Statisztika from './components/Statisztika';
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import Fooldal from './components/Fooldal';

 function App() {
  /* const [venniKell, setVenniKell] = useState(
@@ -51,13 +53,15 @@ function App() {
   const megvett = venniKell.filter(a => a.megveve).length

  return (
-    <>
-      <h1>Bevásárlólista</h1>
-      <Statisztika total={total} megvett={megvett}/>
-      <HozzaAdasForm hozzaAd={hozzaAdas} />
-      <BevasarloLista aruk={venniKell} vetelk={vetelKezeles}
-             torlesk={elemTorles} elemMod={elemModositas} />
-    </>
+    <BrowserRouter>
+      <Routes>
+        <Route path='/' element={<Fooldal/>} />
+        <Route path='/lista' element={<BevasarloLista aruk={venniKell} vetelk={vetelKezeles}
+             torlesk={elemTorles} elemMod={elemModositas} />} />
+        <Route path='/stat' element={<Statisztika total={total} megvett={megvett}/>} />
+        <Route path='/hozzaad' element={<HozzaAdasForm hozzaAd={hozzaAdas} />} />
+      </Routes>
+    </BrowserRouter>
  )
 }

--- a/src/components/BevasarloLista.jsx
+++ b/src/components/BevasarloLista.jsx
@@ -1,17 +1,23 @@
 import React from 'react'
 import ListaElem from './ListaElem'
+import Fomenu from './Fomenu'
+import { Link } from 'react-router-dom'

-const BevasarloLista = ({aruk, vetelk, torlesk, elemMod}) => {
+const BevasarloLista = ({ aruk, vetelk, torlesk, elemMod }) => {
  return (
-    <div>
-        {aruk.map((elem,index) => {
-            //console.log(elem.megveve)
-            return (
-                <ListaElem key={index} aru={elem} vetelk={vetelk} torlesk={torlesk} elemMod={elemMod}/>
-            )
-            })
+    <>
+      <Fomenu />
+      <Link to="/">Főoldal</Link>
+      <div>
+        {aruk.map((elem, index) => {
+          //console.log(elem.megveve)
+          return (
+            <ListaElem key={index} aru={elem} vetelk={vetelk} torlesk={torlesk} elemMod={elemMod} />
+          )
+        })
        }
-    </div>
+      </div>
+    </>
  )
 }

--- a/src/components/Fomenu.jsx
+++ b/src/components/Fomenu.jsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+const Fomenu = () => {
+  return (
+    <nav>
+        <Link className='btn btn-outline-info mx-3' to="/lista">Lista megjelenítése</Link>
+        <Link className='btn btn-outline-info mx-3' to="/stat">Statisztika</Link>
+        <Link className='btn btn-outline-info mx-3' to="/hozzaad">Áru hozzáadása</Link>
+    </nav>
+  )
+}
+
+export default Fomenu
--- a/src/components/Fooldal.jsx
+++ b/src/components/Fooldal.jsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import Fomenu from './Fomenu'
+
+const Fooldal = () => {
+  return (
+    <div>
+        
+        <header>
+            <h1>Bevásárlólista</h1>
+            <Fomenu />
+        </header>
+    </div>
+  )
+}
+
+export default Fooldal
--- a/src/components/HozzaAdasForm.jsx
+++ b/src/components/HozzaAdasForm.jsx
@@ -1,10 +1,13 @@
 import React, {useState} from 'react'
+import Fomenu from './Fomenu'
+import { useNavigate } from 'react-router-dom'

 const HozzaAdasForm = ({hozzaAd}) => {

    const [nev, setNev] = useState("")
    const [mennyiseg, setMennyiseg] = useState("")
    const [egyseg, setEgyseg] = useState("")
+    const oldalvaltas = useNavigate();

    const hozzaAdKezel = (e) => { 
        if (nev==="") return
@@ -12,11 +15,13 @@ const HozzaAdasForm = ({hozzaAd}) => {
        hozzaAd({nev,mennyiseg,egyseg,megjegyzes: "",megveve: false, id: Date.now()}) 
        setNev("")
        setMennyiseg("")
-        setEgyseg("")   
+        setEgyseg("")
+        oldalvaltas("/lista")   
    }

  return (
    <div>
+      <Fomenu />
        <form onSubmit={hozzaAdKezel}>
            <input type="text" value={nev} onChange={(e) => setNev(e.target.value)} placeholder="Név" />
            <input type="text" value={mennyiseg} onChange={(e) => setMennyiseg(e.target.value)} placeholder="Mennyiség" />
--- a/src/components/Statisztika.jsx
+++ b/src/components/Statisztika.jsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import Fomenu from './Fomenu';

 const Statisztika = ({total, megvett}) => {

@@ -6,6 +7,7 @@ const Statisztika = ({total, megvett}) => {

  return (
    <div>
+        <Fomenu />
        <table>
            <tbody>
            <tr>