Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Startseite und Kabelüberwachung

Browse Source
This commit is contained in:
ISA
2024-09-23 12:36:54 +02:00
parent c9e55dd66c
commit 067d2e0200
11 changed files with 216 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/globals.css
View File

@@ -1,3 +1,4 @@
/* global.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

8
app/kabelueberwachung/page.jsx
View File

@@ -1,5 +1,6 @@
"use client"; // Ganz oben hinzufügen
import React, { useState } from "react";
import Layout from "../components/Layout";
import Layout from "../layout"; // Korrigierter Pfad zu Layout
function Kabelueberwachung() {
const [activeTab, setActiveTab] = useState(1);
@@ -14,8 +15,6 @@ function Kabelueberwachung() {
return (
<Layout>
<div className="bg-gray-100 flex-1 p-4 overflow-hidden">
{" "}
{/* overflow-hidden hinzugefügt */}
{/* Tabs */}
<ul className="flex border-b border-gray-200">
{racks.map((rack) => (
@@ -40,8 +39,6 @@ function Kabelueberwachung() {
</ul>
{/* Rack-Inhalte */}
<div className="mt-4 p-4 bg-white rounded-lg shadow overflow-auto max-h-full">
{" "}
{/* max-h-full und overflow-auto für Inhalt */}
{racks.map(
(rack) =>
activeTab === rack.id && (
@@ -49,7 +46,6 @@ function Kabelueberwachung() {
<h2 className="text-lg font-bold mb-4">
{rack.name} Inhalte
</h2>
{/* Hier kannst du den Inhalt für jedes Rack einfügen */}
<table className="min-w-full bg-white border border-gray-300">
<thead>
<tr className="w-full bg-gray-200 text-gray-600 uppercase text-sm leading-normal">

37
app/layout.js
View File

@@ -1,21 +1,26 @@
// src/components/Layout.jsx
"use client"; // Ganz oben hinzufügen
import React from "react";
import Header from "../components/Header"; // Passe den Pfad an, falls nötig
import Navigation from "../components/Navigation"; // Passe den Pfad an, falls nötig
import Footer from "../components/Footer"; // Passe den Pfad an, falls nötig
import Header from "../components/Header";
import Navigation from "../components/Navigation";
import Footer from "../components/Footer";
import "../app/globals.css";
function Layout({ children }) {
// Diese Datei befindet sich in /app/layout.jsx
export default function RootLayout({ children }) {
return (
<div className="bg-gray-100 flex flex-col min-h-screen">
<Header className="bg-gray-300 p-4 flex-shrink-0" />
<div className="flex flex-grow w-full">
<Navigation />
{/* Der eigentliche Seiteninhalt */}
<main className="flex-1 p-8">{children}</main>
</div>
<Footer className="bg-gray-300 p-4 flex-shrink-0" />
</div>
<html lang="de">
<head>
{/* Hier können Meta-Tags oder Links für CSS hinzugefügt werden */}
</head>
<body className="bg-gray-100 flex flex-col min-h-screen">
{/* Hier das Layout mit Header, Navigation und Footer */}
<Header className="bg-gray-300 p-4 flex-shrink-0" />
<div className="flex flex-grow w-full">
<Navigation />
<main className="flex-1 p-8">{children}</main>
</div>
<Footer className="bg-gray-300 p-4 flex-shrink-0" />
</body>
</html>
);
}
export default Layout;

94
app/page.js
View File

@@ -3,99 +3,7 @@ import Image from "next/image";
export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
<Image
className="dark:invert"
src="https://nextjs.org/icons/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
app/page.js
</code>
.
</li>
<li>Save and see your changes instantly.</li>
</ol>
<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="https://nextjs.org/icons/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
</div>
</main>
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
<h1>Next.js startseite</h1>
</div>
);
}

4
components/Footer.jsx
View File

@@ -1,5 +1,5 @@
// src/components/Footer.jsx
import React from 'react';
// components/Footer.jsx
import React from "react";
function Footer() {
return (

3
components/Header.jsx
View File

@@ -1,6 +1,7 @@
// src/components/Header.jsx
// components/Header.jsx
import React from "react";
import Image from "next/image";
import "bootstrap-icons/font/bootstrap-icons.css";
function Header() {
return (

21
components/Layout.jsx
View File

@@ -1,21 +0,0 @@
// src/components/Layout.jsx
import React from "react";
import Header from "./Header"; // Passe den Pfad an, falls nötig
import Navigation from "./Navigation"; // Passe den Pfad an, falls nötig
import Footer from "./Footer"; // Passe den Pfad an, falls nötig
function Layout({ children }) {
return (
<div className="bg-gray-100 flex flex-col min-h-screen">
<Header className="bg-gray-300 p-4 flex-shrink-0" />
<div className="flex flex-grow w-full">
<Navigation />
{/* Der eigentliche Seiteninhalt */}
<main className="flex-1 p-8">{children}</main>
</div>
<Footer className="bg-gray-300 p-4 flex-shrink-0" />
</div>
);
}
export default Layout;

38
components/Navigation.jsx
View File

@@ -1,41 +1,41 @@
// src/components/Navigation.jsx
"use client";
import React, { useEffect, useState } from "react";
import Link from "next/link"; // Importiere Link von Next.js
import { useRouter } from "next/router";
import Link from "next/link";
import { usePathname } from "next/navigation";
function Navigation() {
const router = useRouter();
const [activeLink, setActiveLink] = useState(router.pathname); // Verwende den aktuellen Pfad als initialen Wert
const pathname = usePathname();
const [activeLink, setActiveLink] = useState("");
useEffect(() => {
// Wenn sich die Route ändert, wird der activeLink-Zustand aktualisiert
setActiveLink(router.pathname);
}, [router.pathname]);
if (pathname) {
setActiveLink(pathname);
}
}, [pathname]);
const menuItems = [
{ name: "Übersicht", path: "/" },
{ name: "Kabelüberwachung", path: "/Kabelueberwachung" },
{ name: "Zutrittskontrolle", path: "/Access" }, // Pfad angepasst
{ name: "Ein- und Ausgänge", path: "/Einausgaenge" },
{ name: "Analoge Eingänge", path: "/AnalogeEingaenge" },
{ name: "Meldungen", path: "/Meldungen" },
{ name: "Kabelüberwachung", path: "/kabelueberwachung" },
{ name: "Zutrittskontrolle", path: "/access" },
{ name: "Ein- und Ausgänge", path: "/einausgaenge" },
{ name: "Analoge Eingänge", path: "/analogeEingaenge" },
{ name: "Meldungen", path: "/meldungen" },
];
return (
<aside className="w-1/6 flex-shrink-0 h-full mt-24">
<nav className="space-y-6 p-4">
{menuItems.map((item) => (
<Link href={item.path} key={item.name} legacyBehavior>
<a
<Link href={item.path} key={item.name}>
<div
className={`block px-4 py-2 font-bold whitespace-nowrap transition duration-300 ${
activeLink === item.path
? "bg-sky-500 text-white rounded-r-full" // Aktivierte Schaltfläche
: "text-black hover:bg-gray-200 rounded-r-full" // Nicht aktive Schaltfläche bei Hover
? "bg-sky-500 text-white rounded-r-full"
: "text-black hover:bg-gray-200 rounded-r-full"
}`}
onClick={() => setActiveLink(item.path)} // Setzt das aktive Element beim Klick
>
{item.name}
</a>
</div>
</Link>
))}
</nav>

165
package-lock.json generated
View File

@@ -8,13 +8,16 @@
"name": "23.09.2024-cpl-v4",
"version": "0.1.0",
"dependencies": {
"@fontsource/roboto": "^5.1.0",
"autoprefixer": "^10.4.20",
"bootstrap-icons": "^1.11.3",
"next": "14.2.13",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"postcss": "^8",
"tailwindcss": "^3.4.1"
"postcss": "^8.4.47",
"tailwindcss": "^3.4.12"
}
},
"node_modules/@alloc/quick-lru": {
@@ -29,6 +32,11 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@fontsource/roboto": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.1.0.tgz",
"integrity": "sha512-cFRRC1s6RqPygeZ8Uw/acwVHqih8Czjt6Q0MwoUoDe9U3m4dH1HmNDRBZyqlMSFwgNAUKgFImncKdmDHyKpwdg=="
},
"node_modules/@isaacs/cliui": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -342,6 +350,42 @@
"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
"dev": true
},
"node_modules/autoprefixer": {
"version": "10.4.20",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
"integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/autoprefixer"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"dependencies": {
"browserslist": "^4.23.3",
"caniuse-lite": "^1.0.30001646",
"fraction.js": "^4.3.7",
"normalize-range": "^0.1.2",
"picocolors": "^1.0.1",
"postcss-value-parser": "^4.2.0"
},
"bin": {
"autoprefixer": "bin/autoprefixer"
},
"engines": {
"node": "^10 || ^12 || >=14"
},
"peerDependencies": {
"postcss": "^8.1.0"
}
},
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -360,6 +404,21 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/bootstrap-icons": {
"version": "1.11.3",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
"integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
]
},
"node_modules/brace-expansion": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -381,6 +440,37 @@
"node": ">=8"
}
},
"node_modules/browserslist": {
"version": "4.23.3",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
"integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/browserslist"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/browserslist"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"dependencies": {
"caniuse-lite": "^1.0.30001646",
"electron-to-chromium": "^1.5.4",
"node-releases": "^2.0.18",
"update-browserslist-db": "^1.1.0"
},
"bin": {
"browserslist": "cli.js"
},
"engines": {
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
}
},
"node_modules/busboy": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -532,12 +622,25 @@
"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
"dev": true
},
"node_modules/electron-to-chromium": {
"version": "1.5.27",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.27.tgz",
"integrity": "sha512-o37j1vZqCoEgBuWWXLHQgTN/KDKe7zwpiY5CPeq2RvUqOyJw9xnrULzZAEVQ5p4h+zjMk7hgtOoPdnLxr7m/jw=="
},
"node_modules/emoji-regex": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
"dev": true
},
"node_modules/escalade": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
"integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
"engines": {
"node": ">=6"
}
},
"node_modules/fast-glob": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -603,6 +706,18 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/fraction.js": {
"version": "4.3.7",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
"integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
"engines": {
"node": "*"
},
"funding": {
"type": "patreon",
"url": "https://github.com/sponsors/rawify"
}
},
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -958,6 +1073,11 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/node-releases": {
"version": "2.0.18",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
"integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g=="
},
"node_modules/normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -967,6 +1087,14 @@
"node": ">=0.10.0"
}
},
"node_modules/normalize-range": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -1061,7 +1189,6 @@
"version": "8.4.47",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
"integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
"dev": true,
"funding": [
{
"type": "opencollective",
@@ -1209,8 +1336,7 @@
"node_modules/postcss-value-parser": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
"dev": true
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
},
"node_modules/queue-microtask": {
"version": "1.2.3",
@@ -1616,6 +1742,35 @@
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
"integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
},
"node_modules/update-browserslist-db": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
"integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/browserslist"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/browserslist"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"dependencies": {
"escalade": "^3.1.2",
"picocolors": "^1.0.1"
},
"bin": {
"update-browserslist-db": "cli.js"
},
"peerDependencies": {
"browserslist": ">= 4.21.0"
}
},
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

11
package.json
View File

@@ -9,12 +9,15 @@
"lint": "next lint"
},
"dependencies": {
"@fontsource/roboto": "^5.1.0",
"autoprefixer": "^10.4.20",
"bootstrap-icons": "^1.11.3",
"next": "14.2.13",
"react": "^18",
"react-dom": "^18",
"next": "14.2.13"
"react-dom": "^18"
},
"devDependencies": {
"postcss": "^8",
"tailwindcss": "^3.4.1"
"postcss": "^8.4.47",
"tailwindcss": "^3.4.12"
}
}

7
tailwind.config.js
View File

@@ -6,12 +6,7 @@ module.exports = {
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
extend: {},
},
plugins: [],
};