diff --git a/app/access/page.jsx b/app/access/page.jsx new file mode 100644 index 0000000..d7c1b25 --- /dev/null +++ b/app/access/page.jsx @@ -0,0 +1,136 @@ +// pages/Zutrittskontrolle.jsx +import React from "react"; +import Layout from "../components/Layout"; + +function Access() { + return ( + +
+
+

+ Zutrittskontrolle 1 +

+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+ Betrieb + Status: ...
+ Status + ...
Letzte Chip-ID...
Zeitstempel...
Access Typ...
+
+
+ + + + + + + + + + + + + + + + + + + + +
EingangZustandBezeichnung
1......
2......
+
+
+
+ + {/* Zutrittskontrolle 2 */} +
+

+ Zutrittskontrolle 2 +

+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+ Betrieb + Status: ...
+ Status + ...
Letzte Chip-ID...
Zeitstempel...
Access Typ...
+
+
+ + + + + + + + + + + + + + + + + + + + +
EingangZustandBezeichnung
1......
2......
+
+
+
+
+ + ); +} + +export default Access; diff --git a/app/analogeEingaenge/page.jsx b/app/analogeEingaenge/page.jsx new file mode 100644 index 0000000..2977ef9 --- /dev/null +++ b/app/analogeEingaenge/page.jsx @@ -0,0 +1,224 @@ +import React, { useState } from "react"; +import Layout from "../components/Layout"; + +function AnalogeEingaenge() { + const [activeConfig, setActiveConfig] = useState(null); + + // Beispiel-Daten, du kannst die Daten dynamisch laden + const inputs = [ + { + id: 1, + value: 0, + name: "------------------", + uG: true, + uW: true, + oW: true, + oG: true, + }, + { + id: 2, + value: 0, + name: "------------------", + uG: true, + uW: true, + oW: true, + oG: true, + }, + { + id: 3, + value: 0, + name: "------------------", + uG: true, + uW: true, + oW: true, + oG: true, + }, + { + id: 4, + value: 0, + name: "------------------", + uG: true, + uW: true, + oW: true, + oG: true, + }, + { + id: 5, + value: 0, + name: "------------------", + uG: true, + uW: true, + oW: true, + oG: true, + }, + { + id: 6, + value: 0, + name: "------------------", + uG: true, + uW: true, + oW: true, + oG: true, + }, + { + id: 7, + value: 0, + name: "------------------", + uG: true, + uW: true, + oW: true, + oG: true, + }, + { + id: 8, + value: 0, + name: "------------------", + uG: true, + uW: true, + oW: true, + oG: true, + }, + ]; + + return ( + +
+

Analoge Eingänge

+
+ {inputs.map((input) => ( +
+
+

XIO-PM {input.id}

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
EingangWertBezeichnunguGuWoWoGKonfig
{input.id}{input.value}{input.name} + + + + + + + + + +
+
+
+ ))} +
+ + {/* Modal für Konfiguration */} + {activeConfig && ( +
+
+

+ Konfiguration - XIO-PM {activeConfig} +

+ + {/* Konfigurationsformular hier einfügen */} +
+
+ + +
+
+ + +
+ {/* Weitere Felder hier hinzufügen */} + +
+
+
+ )} +
+ + ); +} + +export default AnalogeEingaenge; diff --git a/app/dashboard/page.jsx b/app/dashboard/page.jsx new file mode 100644 index 0000000..8a5ac1c --- /dev/null +++ b/app/dashboard/page.jsx @@ -0,0 +1,24 @@ +import React, { useEffect } from "react"; +import Layout from "../components/Layout"; +import Image from "next/image"; +import "tailwindcss/tailwind.css"; // Stelle sicher, dass Tailwind CSS korrekt importiert wird +import "@fontsource/roboto"; // Standardimport für alle Schriftstärken +import "bootstrap-icons/font/bootstrap-icons.css"; + +function Dashboard() { + return ( + +
+
+ {/* Main Section */} +
+ {/* Hauptinhalt */} +

Dashboard Übersicht

+
+
+
+ + ); +} + +export default Dashboard; diff --git a/app/einausgaenge/page.jsx b/app/einausgaenge/page.jsx new file mode 100644 index 0000000..8d1a72e --- /dev/null +++ b/app/einausgaenge/page.jsx @@ -0,0 +1,166 @@ +// pages/Einausgaenge.jsx +import React, { useState } from "react"; +import Layout from "../components/Layout"; + +function Einausgaenge() { + // Beispiel-Daten für Ein- und Ausgänge (kannst du durch deine Daten ersetzen) + const inputs = [ + { + id: 1, + name: "Eingang 1", + status: "Aktiv", + description: "Beschreibung 1", + }, + { + id: 2, + name: "Eingang 2", + status: "Inaktiv", + description: "Beschreibung 2", + }, + { + id: 3, + name: "Eingang 3", + status: "Aktiv", + description: "Beschreibung 3", + }, + { + id: 4, + name: "Eingang 4", + status: "Inaktiv", + description: "Beschreibung 4", + }, + ]; + + const outputs = [ + { + id: 1, + name: "Ausgang 1", + status: "Aktiv", + description: "Beschreibung 1", + }, + { + id: 2, + name: "Ausgang 2", + status: "Inaktiv", + description: "Beschreibung 2", + }, + { + id: 3, + name: "Ausgang 3", + status: "Aktiv", + description: "Beschreibung 3", + }, + { + id: 4, + name: "Ausgang 4", + status: "Inaktiv", + description: "Beschreibung 4", + }, + ]; + + // Zustand für aktiven Tab (Ein- oder Ausgänge) + const [activeTab, setActiveTab] = useState("inputs"); + + return ( + +
+ {/* Tabs für Ein- und Ausgänge */} + + + {/* Inhalt für die aktiven Tabs */} +
+ {activeTab === "inputs" && ( +
+

Eingänge

+ + + + + + + + + + + {inputs.map((input) => ( + + + + + + + ))} + +
IDNameStatusBeschreibung
{input.id}{input.name}{input.status} + {input.description} +
+
+ )} + + {activeTab === "outputs" && ( +
+

Ausgänge

+ + + + + + + + + + + {outputs.map((output) => ( + + + + + + + ))} + +
IDNameStatusBeschreibung
{output.id}{output.name}{output.status} + {output.description} +
+
+ )} +
+
+ + ); +} + +export default Einausgaenge; diff --git a/app/kabelueberwachung/page.jsx b/app/kabelueberwachung/page.jsx new file mode 100644 index 0000000..620c27a --- /dev/null +++ b/app/kabelueberwachung/page.jsx @@ -0,0 +1,98 @@ +import React, { useState } from "react"; +import Layout from "../components/Layout"; + +function Kabelueberwachung() { + const [activeTab, setActiveTab] = useState(1); + + const racks = [ + { id: 1, name: "Rack 1" }, + { id: 2, name: "Rack 2" }, + { id: 3, name: "Rack 3" }, + { id: 4, name: "Rack 4" }, + ]; + + return ( + +
+ {" "} + {/* overflow-hidden hinzugefügt */} + {/* Tabs */} + + {/* Rack-Inhalte */} +
+ {" "} + {/* max-h-full und overflow-auto für Inhalt */} + {racks.map( + (rack) => + activeTab === rack.id && ( +
+

+ {rack.name} Inhalte +

+ {/* Hier kannst du den Inhalt für jedes Rack einfügen */} + + + + + + + + + + + + + {Array.from({ length: 8 }, (_, index) => ( + + + + + + + + + ))} + +
SlotBezeichnung + Isolationsgrenzwert + + Schleifengrenzwert + FilterzeitAktionen
+ Slot {index + 1} + + Beispielbezeichnung + 0.5 MOhm10 kOhm5 sek. + +
+
+ ) + )} +
+
+ + ); +} + +export default Kabelueberwachung; diff --git a/app/layout.js b/app/layout.js index 9800bf8..84087ad 100644 --- a/app/layout.js +++ b/app/layout.js @@ -1,30 +1,21 @@ -import localFont from "next/font/local"; -import "./globals.css"; +// src/components/Layout.jsx +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 -const geistSans = localFont({ - src: "./fonts/GeistVF.woff", - variable: "--font-geist-sans", - weight: "100 900", -}); -const geistMono = localFont({ - src: "./fonts/GeistMonoVF.woff", - variable: "--font-geist-mono", - weight: "100 900", -}); - -export const metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; - -export default function RootLayout({ children }) { +function Layout({ children }) { return ( - - - {children} - - +
+
+
+ + {/* Der eigentliche Seiteninhalt */} +
{children}
+
+
); } + +export default Layout; diff --git a/app/meldungen/page.jsx b/app/meldungen/page.jsx new file mode 100644 index 0000000..bfd9aae --- /dev/null +++ b/app/meldungen/page.jsx @@ -0,0 +1,138 @@ +// pages/Meldungen.jsx +import React, { useState } from "react"; +import Layout from "../components/Layout"; + +function Meldungen() { + const [rowsPerPage, setRowsPerPage] = useState(25); + const [filter, setFilter] = useState(""); + const [selectedMonth, setSelectedMonth] = useState("01"); + const [selectedYear, setSelectedYear] = useState("23"); + const [selectedDay, setSelectedDay] = useState(""); + + // Platzhalter für Meldungen + const messages = Array.from({ length: 50 }, (_, i) => ({ + date: `2023-01-${String(i + 1).padStart(2, "0")}`, + message: `Meldung ${i + 1}`, + })); + + const filteredMessages = messages.filter((msg) => { + const dayMatch = selectedDay + ? msg.date.split("-")[2] === selectedDay.padStart(2, "0") + : true; + const monthMatch = msg.date.split("-")[1] === selectedMonth; + const yearMatch = msg.date.split("-")[0].substring(2) === selectedYear; + const filterMatch = msg.message + .toLowerCase() + .includes(filter.toLowerCase()); + return dayMatch && monthMatch && yearMatch && filterMatch; + }); + + return ( + +
+ {/* Filterleiste */} +
+
+ Interner Meldungsspeicher + + + setSelectedDay(e.target.value)} + min="1" + max="31" + placeholder="Tag" + className="bg-white text-black p-1 rounded" + /> +
+
+ setFilter(e.target.value)} + placeholder="Filter" + className="bg-white text-black p-1 rounded" + /> + +
+
+ + {/* Meldungen Tabelle */} +
+ + + + + + + + + {filteredMessages.slice(0, rowsPerPage).map((msg, index) => ( + + + + + ))} + +
DatumMeldung
{msg.date}{msg.message}
+
+ + {/* Pagination */} +
+
    + {Array.from( + { length: Math.ceil(filteredMessages.length / rowsPerPage) }, + (_, i) => ( +
  • + {i + 1} +
    • + ) + )} +
+
+
+ + ); +} + +export default Meldungen; diff --git a/components/Footer.jsx b/components/Footer.jsx new file mode 100644 index 0000000..e14f6be --- /dev/null +++ b/components/Footer.jsx @@ -0,0 +1,21 @@ +// src/components/Footer.jsx +import React from 'react'; + +function Footer() { + return ( + + ); +} + +export default Footer; diff --git a/components/Header.jsx b/components/Header.jsx new file mode 100644 index 0000000..382c59f --- /dev/null +++ b/components/Header.jsx @@ -0,0 +1,63 @@ +// src/components/Header.jsx +import React from "react"; +import Image from "next/image"; + +function Header() { + return ( +
+
+ Logo +
+ + {/* CPL Status und Stationsname */} +
+
+

Stationsname

+

CPLV4Rastede

+
+
+

CPL Status

+ normiert +
+
+ + {/* Temperatur und Icons */} +
+ {/* Temperatur und Luftfeuchtigkeit */} +
+
+ +

20.5 °C

+
+
+ +

60%

+
+
+ + {/* Toggle Switch light and dark mode */} +
+ +
+ + +
+
+ + {/* User Icon */} +
+ +
+
+
+ ); +} + +export default Header; diff --git a/components/Layout.jsx b/components/Layout.jsx new file mode 100644 index 0000000..420e34b --- /dev/null +++ b/components/Layout.jsx @@ -0,0 +1,21 @@ +// 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 ( +
+
+
+ + {/* Der eigentliche Seiteninhalt */} +
{children}
+
+
+ ); +} + +export default Layout; diff --git a/components/Navigation.jsx b/components/Navigation.jsx new file mode 100644 index 0000000..6e5f0c8 --- /dev/null +++ b/components/Navigation.jsx @@ -0,0 +1,46 @@ +// src/components/Navigation.jsx +import React, { useEffect, useState } from "react"; +import Link from "next/link"; // Importiere Link von Next.js +import { useRouter } from "next/router"; + +function Navigation() { + const router = useRouter(); + const [activeLink, setActiveLink] = useState(router.pathname); // Verwende den aktuellen Pfad als initialen Wert + + useEffect(() => { + // Wenn sich die Route ändert, wird der activeLink-Zustand aktualisiert + setActiveLink(router.pathname); + }, [router.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" }, + ]; + + return ( + + ); +} + +export default Navigation; diff --git a/next.config.mjs b/next.config.mjs index 4678774..0448bad 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,4 +1,10 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = { + reactStrictMode: true, + output: "export", // Stellt den statischen Export sicher + images: { + unoptimized: true, // Deaktiviert Bildoptimierung für den Export + }, +}; export default nextConfig; diff --git a/public/images/Logo.png b/public/images/Logo.png new file mode 100644 index 0000000..8c8b2f0 Binary files /dev/null and b/public/images/Logo.png differ