pgaes Verzeichnis Struktur verbessert
This commit is contained in:
133
pages/access.tsx
133
pages/access.tsx
@@ -1,133 +0,0 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
|
||||
function Access() {
|
||||
return (
|
||||
<div className="bg-gray-100 min-h-screen p-8">
|
||||
<div className="bg-white rounded-lg shadow p-6 mb-8">
|
||||
<h2 className="text-xl font-bold text-blue-500 mb-4">
|
||||
Zutrittskontrolle 1
|
||||
</h2>
|
||||
<div className="flex justify-between">
|
||||
<div className="w-full lg:w-1/2 p-4">
|
||||
<table className="min-w-full text-sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="py-3 px-4">
|
||||
<b>Betrieb</b>
|
||||
</td>
|
||||
<td className="py-3 px-4">Status: ...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-3 px-4">
|
||||
<b>Status</b>
|
||||
</td>
|
||||
<td className="py-3 px-4">...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-3 px-4">Letzte Chip-ID</td>
|
||||
<td className="py-3 px-4">...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-3 px-4">Zeitstempel</td>
|
||||
<td className="py-3 px-4">...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-3 px-4">Access Typ</td>
|
||||
<td className="py-3 px-4">...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="w-full lg:w-1/2 p-4">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="bg-gray-200">
|
||||
<tr>
|
||||
<th className="py-3 px-4 text-center">Eingang</th>
|
||||
<th className="py-3 px-4 text-center">Zustand</th>
|
||||
<th className="py-3 px-4">Bezeichnung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="py-3 px-4 text-center">1</td>
|
||||
<td className="py-3 px-4 text-center">...</td>
|
||||
<td className="py-3 px-4">...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-3 px-4 text-center">2</td>
|
||||
<td className="py-3 px-4 text-center">...</td>
|
||||
<td className="py-3 px-4">...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Zutrittskontrolle 2 */}
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="text-xl font-bold text-blue-500 mb-4">
|
||||
Zutrittskontrolle 2
|
||||
</h2>
|
||||
<div className="flex justify-between">
|
||||
<div className="w-full lg:w-1/2 p-4">
|
||||
<table className="min-w-full text-sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="py-3 px-4">
|
||||
<b>Betrieb</b>
|
||||
</td>
|
||||
<td className="py-3 px-4">Status: ...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-3 px-4">
|
||||
<b>Status</b>
|
||||
</td>
|
||||
<td className="py-3 px-4">...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-3 px-4">Letzte Chip-ID</td>
|
||||
<td className="py-3 px-4">...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-3 px-4">Zeitstempel</td>
|
||||
<td className="py-3 px-4">...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-3 px-4">Access Typ</td>
|
||||
<td className="py-3 px-4">...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="w-full lg:w-1/2 p-4">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="bg-gray-200">
|
||||
<tr>
|
||||
<th className="py-3 px-4 text-center">Eingang</th>
|
||||
<th className="py-3 px-4 text-center">Zustand</th>
|
||||
<th className="py-3 px-4">Bezeichnung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="py-3 px-4 text-center">1</td>
|
||||
<td className="py-3 px-4 text-center">...</td>
|
||||
<td className="py-3 px-4">...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-3 px-4 text-center">2</td>
|
||||
<td className="py-3 px-4 text-center">...</td>
|
||||
<td className="py-3 px-4">...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Access;
|
||||
@@ -1,25 +0,0 @@
|
||||
// pages/generate-hash.js
|
||||
import React from "react";
|
||||
|
||||
import bcrypt from "bcryptjs";
|
||||
|
||||
export default function GenerateHash() {
|
||||
const password = "Littwin"; // Das Passwort, das du hashen möchtest
|
||||
const saltRounds = 10; // Die Anzahl der Salt-Runden
|
||||
|
||||
// Hash generieren
|
||||
const hash = bcrypt.hashSync(password, saltRounds);
|
||||
|
||||
return (
|
||||
<div style={{ padding: "20px", fontFamily: "Arial" }}>
|
||||
<h1>Hash-Generator</h1>
|
||||
<p>
|
||||
<strong>Passwort:</strong> {password}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Generierter Hash:</strong> {hash}
|
||||
</p>
|
||||
<p>Kopiere den Hash und speichere ihn in deinem Projekt.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,135 +1,5 @@
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import React from "react";
|
||||
|
||||
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 (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Filterleiste */}
|
||||
<div className="flex justify-between items-center bg-blue-500 p-4 text-white rounded-t">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span>Interner Meldungsspeicher</span>
|
||||
<select
|
||||
value={selectedMonth}
|
||||
onChange={(e) => setSelectedMonth(e.target.value)}
|
||||
className="bg-white text-black p-1 rounded"
|
||||
>
|
||||
<option value="01">Januar</option>
|
||||
<option value="02">Februar</option>
|
||||
<option value="03">März</option>
|
||||
<option value="04">April</option>
|
||||
<option value="05">Mai</option>
|
||||
<option value="06">Juni</option>
|
||||
<option value="07">Juli</option>
|
||||
<option value="08">August</option>
|
||||
<option value="09">September</option>
|
||||
<option value="10">Oktober</option>
|
||||
<option value="11">November</option>
|
||||
<option value="12">Dezember</option>
|
||||
</select>
|
||||
<select
|
||||
value={selectedYear}
|
||||
onChange={(e) => setSelectedYear(e.target.value)}
|
||||
className="bg-white text-black p-1 rounded"
|
||||
>
|
||||
<option value="22">2022</option>
|
||||
<option value="23">2023</option>
|
||||
<option value="24">2024</option>
|
||||
<option value="25">2025</option>
|
||||
<option value="26">2026</option>
|
||||
</select>
|
||||
<input
|
||||
type="number"
|
||||
value={selectedDay}
|
||||
onChange={(e) => setSelectedDay(e.target.value)}
|
||||
min="1"
|
||||
max="31"
|
||||
placeholder="Tag"
|
||||
className="bg-white text-black p-1 rounded"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<input
|
||||
type="text"
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
placeholder="Filter"
|
||||
className="bg-white text-black p-1 rounded"
|
||||
/>
|
||||
<select
|
||||
value={rowsPerPage}
|
||||
onChange={(e) => setRowsPerPage(e.target.value)}
|
||||
className="bg-white text-black p-1 rounded"
|
||||
>
|
||||
<option value="5">5</option>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Meldungen Tabelle */}
|
||||
<div className="flex-grow overflow-auto mt-4">
|
||||
<table className="min-w-full bg-white border border-gray-300">
|
||||
<thead>
|
||||
<tr className="bg-gray-200 text-gray-600 text-sm leading-normal">
|
||||
<th className="py-3 px-4 text-left">Datum</th>
|
||||
<th className="py-3 px-4 text-left">Meldung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-gray-600 text-sm">
|
||||
{filteredMessages.slice(0, rowsPerPage).map((msg, index) => (
|
||||
<tr key={index} className="border-b border-gray-200">
|
||||
<td className="py-3 px-4">{msg.date}</td>
|
||||
<td className="py-3 px-4">{msg.message}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="flex justify-center mt-4">
|
||||
<ul className="flex space-x-2">
|
||||
{Array.from(
|
||||
{ length: Math.ceil(filteredMessages.length / rowsPerPage) },
|
||||
(_, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className="cursor-pointer bg-blue-500 text-white p-2 rounded"
|
||||
>
|
||||
{i + 1}
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
export default function Messages() {
|
||||
return <div>Messages</div>;
|
||||
}
|
||||
|
||||
export default Meldungen;
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
export default function Messages() {
|
||||
return <div>Messages</div>;
|
||||
}
|
||||
9
pages/zutrittskontrolle.tsx
Normal file
9
pages/zutrittskontrolle.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Zutrittskontrolle from "../components/main/zutrittskontrolle/Zutrittskontrolle"; // Neuer Name
|
||||
|
||||
export default function zutrittskontrollePage() {
|
||||
// Klein geschrieben, falls du das willst
|
||||
return <Zutrittskontrolle />;
|
||||
}
|
||||
Reference in New Issue
Block a user