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

responsiv Kabelüberwachung und dashboard

Browse Source
This commit is contained in:
Ismail Ali
2025-01-21 21:30:34 +01:00
parent 5462b90da3
commit b0451c87ef
8 changed files with 62 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
pages/_app.js
View File

@@ -42,7 +42,12 @@ function MyApp({ Component, pageProps }) {
<Header />
<div className="flex flex-grow w-full">
<Navigation className="w-1/5" />
<main className="flex-1 p-4">
<main
className="flex flex-col
w-full sm:w-3/4 md:w-2/3 lg:w-1/2 xl:w-full
h-auto sm:h-[300px] md:h-[350px] lg:h-[400px] xl:h-[75%]
p-1"
>
{sessionExpired && (
<div className="bg-red-500 text-white p-4 text-center">
Ihre Sitzung ist abgelaufen oder die Verbindung ist

60
pages/dashboard.js
View File

@@ -61,7 +61,10 @@ function Dashboard() {
const slots = kueOnline.slice(i * 8, (i + 1) * 8);
baugruppen.push(
<div key={i} className="flex bg-white shadow-md rounded-lg mb-4">
<div
key={i}
className="flex bg-white shadow-md rounded-lg mb-4 xl:mb-0 p-2 sm:p-3 md:p-4 lg:p-5 xl:p-0 border border-gray-200 w-full sm:w-3/4 md:w-2/3 lg:w-1/2 xl:w-full"
>
<div className="flex gap-1">
{slots.map((version, index) => {
const slotNumber = i * 8 + index + 1;
@@ -97,22 +100,27 @@ function Dashboard() {
};
return (
<div className="flex flex-col p-4">
<div
className="flex flex-col
w-full sm:w-3/4 md:w-2/3 lg:w-1/2 xl:w-full
h-80% sm:h-[60%] md:h-[80%] lg:h-[80%] xl:h-[45%]
p-4"
>
<div className="flex justify-between items-center w-full lg:w-2/3">
<div className="flex justify-between gap-1">
<div className="flex justify-between gap-1 ">
<Icon
icon="ri:calendar-schedule-line"
className="text-littwin-blue text-4xl"
className="text-littwin-blue text-4xl xl:text-2xl"
/>
<h1 className="text-xl font-bold text-gray-700">
<h1 className="text-xl font-bold text-gray-700 xl:text-base">
Letzten 20 Meldungen
</h1>
</div>
</div>
<div className="flex flex-col lg:flex-row gap-1 overflow-hidden">
<div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex flex-grow">
<table className="min-w-full border border-gray-200 text-left">
<div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex flex-grow xl:scale-98">
<table className="min-w-full border border-gray-200 text-left xl:scale-90">
<thead className="bg-gray-100 border-b border-gray-300">
<tr>
<th className="py-1 px-4 text-gray-700 text-sm font-medium">
@@ -162,30 +170,44 @@ function Dashboard() {
</table>
</div>
<div className="shadow-md rounded-lg lg:w-1/3 flex flex-col gap-2">
<div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
<h2 className="text-lg font-semibold text-gray-700 mb-2">
<div
className="shadow-md rounded-lg
w-full sm:w-3/4 md:w-2/3 lg:w-1/2 xl:w-1/3
h-auto sm:h-[300px] md:h-[350px] lg:h-[400px] xl:h-[450px]
flex flex-col gap-2"
>
<div className="bg-gray-50 p-2 sm:p-3 md:p-4 lg:p-5 xl:p-1 rounded-lg shadow-sm border border-gray-200 w-full sm:w-3/4 md:w-2/3 lg:w-1/2 xl:w-full">
<h2 className="text-lg sm:text-base md:text-lg lg:text-xl xl:text-base font-semibold text-gray-700 mb-1">
Versionsinformationen
</h2>
<div className="flex flex-row p-2 space-x-2">
<Icon icon="bx:code-block" className="text-xl text-blue-400" />
<p className="text-sm text-gray-600">
<div className="flex flex-row p-2 sm:p-1 md:p-2 space-x-2">
<Icon
icon="bx:code-block"
className="text-xl sm:text-lg md:text-xl text-blue-400"
/>
<p className="text-sm sm:text-xxs md:text-xs lg:text-sm xl:text-sm text-gray-600">
<span className="font-bold"></span> Applikationsversion:{" "}
{appVersion}{" "}
{appVersion}
</p>
</div>
<div className="flex flex-row p-2 space-x-2">
<Icon icon="mdi:web" className="text-xl text-blue-400" />
<p className="text-sm text-gray-600">
<span className="font-bold"> </span>Webserverversion: 1.0.5.0
<div className="flex flex-row p-2 sm:p-1 md:p-2 space-x-2">
<Icon
icon="mdi:web"
className="text-xl sm:text-lg md:text-xl text-blue-400"
/>
<p className="text-sm sm:text-xxs md:text-xs lg:text-sm xl:text-sm text-gray-600">
<span className="font-bold"></span> Webserverversion: 1.0.5.0
</p>
</div>
</div>
{renderBaugruppentraeger()}
</div>
</div>
<div className="flex-shrink-0 flex justify-between items-center mt-2 bg-white p-4 rounded-lg shadow-md border border-gray-200">
<div className="flex-shrink-0 flex justify-between items-center mt-1 bg-white p-1 rounded-lg shadow-md border border-gray-200">
<div className="flex items-center space-x-4">
<img src="/images/IP-icon.svg" alt="IP Address" className="w-6 h-6" />
<div>

6
pages/kabelueberwachung.js
View File

@@ -95,8 +95,8 @@ function Kabelueberwachung() {
}, [activeRack, racks]);
return (
<div className="bg-gray-100 flex-1 p-6 text-black">
<h1 className="text-2xl mb-4">Kabelüberwachung</h1>
<div className="bg-gray-100 flex-1 p-6 text-black xl:p-4 2xl:p-6">
<h1 className="text-2xl xl:text-xl mb-4">Kabelüberwachung</h1>
<div className="mb-4">
{[1, 2, 3, 4].map((rack) => (
<button
@@ -112,7 +112,7 @@ function Kabelueberwachung() {
</button>
))}
</div>
<div className="flex flex-row space-x-4 scale-110 ml-[5%] mt-[5%]">
<div className="flex flex-row space-x-8 xl:space-x-0 2xl:space-x-8 ml-[5%] mt-[5%]">
{racks[`rack${activeRack}`].map((slot, index) => {
const slotIndex = index + (activeRack - 1) * 8;
return (