Spiele Liste und Grundstruktur App Routing

This commit is contained in:
klaas 2024-09-29 00:20:21 +02:00
parent 5444cf7c79
commit 6862abf583
24 changed files with 307 additions and 16 deletions

9
app/app/admin/page.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react'
function admin() {
return (
<div>admin</div>
)
}
export default admin

11
app/app/error.tsx Normal file
View File

@ -0,0 +1,11 @@
'use client'
import React from 'react'
function error({error}: {error: Error}) {
return (
<div>error {error.message}</div>
)
}
export default error

View File

@ -0,0 +1,9 @@
import React from 'react'
function features() {
return (
<div>features</div>
)
}
export default features

Binary file not shown.

BIN
app/app/fonts/lato-bold.woff Executable file

Binary file not shown.

BIN
app/app/fonts/lato-regular.woff Executable file

Binary file not shown.

View File

@ -24,4 +24,4 @@ body {
.text-balance {
text-wrap: balance;
}
}
}

View File

@ -0,0 +1,9 @@
import React from 'react'
function impressum() {
return (
<div>about</div>
)
}
export default impressum

View File

@ -2,33 +2,43 @@ import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
const latoregular = localFont({
src: "./fonts/lato-regular.woff",
variable: "--font-lato",
weight: "100 900",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
})
const latobold = localFont({
src: "./fonts/lato-bold.woff",
variable: "--font-lato-bold",
weight: "100 900",
});
})
export const metadata: Metadata = {
title: "Create Next App",
title: "SJTKD Abteilungen",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
}: {
children: React.ReactNode;
}>) {
}) {
return (
<html lang="en">
<html lang="de">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
className={latoregular.variable}
>
<header>
<Navbar />
</header>
<main className="max-w-3xl mx-auto">
{children}
</main>
<Footer />
</body>
</html>
);

View File

@ -0,0 +1,9 @@
import React from 'react'
function mitglied() {
return (
<div> Mitglieder</div>
)
}
export default mitglied

View File

@ -1,8 +1,14 @@
import Image from "next/image";
import Counter from "@/components/Counter";
export default function Home() {
return (<div>
return (<div >
<h1 className="text-7xl font-bold underline">My first Next App</h1>
< Counter />
</div>
)
}

View File

@ -0,0 +1,9 @@
import React from 'react'
function settings() {
return (
<div>settings</div>
)
}
export default settings

View File

View File

@ -0,0 +1,11 @@
'use client';
import React from 'react'
function loading() {
return (
<div>loading</div>
)
}
export default loading

34
app/app/spiele/page.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from 'react'
import Link from "next/link";
type response = {
message: string;
games: spiel[];
}
type spiel = {
id: number;
name: string;
type: number;
};
async function spiele() {
const response = await fetch("http://localhost:2006/spiele");
const data:response[] = await response.json();
return (
<div>
<h1> Spiele </h1>
<ul>
{data.games.map((spiel) => (
<li key={spiel.id}>
<Link href={`/spiele/${spiel.id}`}>{spiel.name}</Link>
</li>
))}
</ul>
</div>
)
}
export default spiele

View File

@ -0,0 +1,9 @@
import React from 'react'
function training() {
return (
<div>training</div>
)
}
export default training

9
app/app/user/page.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react'
function user() {
return (
<div>user</div>
)
}
export default user

View File

@ -0,0 +1,9 @@
import React from 'react'
function register() {
return (
<div>register</div>
)
}
export default register

View File

@ -0,0 +1,13 @@
'use client';
import React, { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<div className='flex flex-col items-center w-[100px]'>
<p className='text-5xl font-bold'>{count}</p>
<button onClick={() => setCount(count + 1)} className='bg-blue-500 rounded hover:bg-blue-800 text-white px-4 py-2 mt-2'>Increase</button>
</div>
)
}

View File

@ -0,0 +1,9 @@
import React from 'react'
function Footer() {
return (
<div className='max-w-3xl mx-auto'>Footer</div>
)
}
export default Footer

21
app/components/Navbar.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from 'react'
import Link from "next/link";
function Navbar() {
return (
<nav className='max-w-3xl mx-auto py-4 flex gap-x-4 border-b-2'>Navbar
<Link href="/">Home</Link>
<Link href="/spiele">Spiele</Link>
<Link href="/training">Training</Link>
<Link href="/user">User</Link>
<Link href="/user/register">Register</Link>
<Link href="/admin">Admin</Link>
<Link href="/features">Feature</Link>
<Link href="/impressum">Impressum</Link>
</nav>
)
}
export default Navbar

View File

@ -3,6 +3,7 @@ const express = require("express");
const app = express();
const authRoutes = require("./routes/auth");
const memberRoutes = require("./routes/members");
const spieleRoutes = require("./routes/spiele");
const bodyParser = require("body-parser");
// Middleware
@ -14,6 +15,7 @@ const authenticateToken = require("./middleware/authenticateToken");
// Routes
app.use("/auth", authRoutes);
app.use("/members", memberRoutes);
app.use("/spiele", spieleRoutes);
// Server starten
const PORT = process.env.PORT || 2005;

View File

@ -0,0 +1,85 @@
const jwt = require("jsonwebtoken");
const { Pool } = require("pg");
// Datenbankverbindung
const pool = new Pool({
user: process.env.DB_USER,
host: process.env.DB_HOST,
database: process.env.DB_NAME,
password: process.env.DB_PASSWORD,
port: 5432,
});
// Registrierungsfunktion
const newGame = async (req, res) => {
const { name } = req.body;
try {
// Überprüfen, ob der Benutzer bereits existiert
const newGame = await pool.query(
"INSERT INTO spiele (name) VALUES ($1) RETURNING id",
[name]
);
res.status(201).json({ message: "Spiel angelegt", id: newGame.rows[0].id });
} catch (err) {
res
.status(500)
.json({ message: "Fehler beim Anlegen", error: err.message });
}
};
const allGames = async (req, res) => {
try {
// Überprüfen, ob der Benutzer existiert
const games = await pool.query("SELECT * FROM spiele");
if (games.rows.length === 0) {
return res.status(400).json({ message: "Keine Spiele vorhanden" });
}
// Passwort vergleichen
res.status(200).json({ message: "Login erfolgreich", games: games.rows });
} catch (err) {
res.status(500).json({ message: "Fehler beim Login", error: err.message });
}
};
const updateGame = async (req, res) => {
const { id } = req.params;
const { name } = req.body;
try {
const updateUser = await pool.query(
"UPDATE spiele SET name = $1 WHERE id = $2 RETURNING *",
[name, id]
);
res.status(200).json({
message: "Benutzerdaten aktualisiert",
user: updateUser.rows[0],
});
} catch (err) {
res.status(500).json({
message: "Fehler beim Aktualisieren der Benutzerdaten",
error: err.message,
});
}
};
const Game = async (req, res) => {
const { id } = req.params;
try {
const games = await pool.query("SELECT * FROM spiele Where id = $1", [id]);
if (games.rows.length === 0) {
return res.status(400).json({ message: "Spiel nicht gefunden" });
}
// Passwort vergleichen
res.status(200).json({ message: "Spiel gefunden", game: games.rows[0] });
} catch (err) {
res.status(500).json({
message: "Fehler beim Aktualisieren der Benutzerdaten",
error: err.message,
});
}
};
module.exports = { newGame, allGames, updateGame, Game };

17
server/routes/spiele.js Normal file
View File

@ -0,0 +1,17 @@
const express = require("express");
const {
allGames,
newGame,
Game,
updateGame,
} = require("../controllers/gameController");
const router = express.Router();
const authenticateToken = require("../middleware/authenticateToken");
// Loginroute
router.get("/", allGames);
router.post("/new", newGame);
router.get("/:id", Game);
router.post("/:spiel", authenticateToken, updateGame);
module.exports = router;