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

git commit -m "feat: UI-Optimierung für analoge Eingänge & Diagramm

Browse Source 
- Layout verbessert: Tabelle und Diagramm jetzt nebeneinander (grid-responsive)
- Responsivität optimiert: Kein unnötiges horizontales Scrollen mehr
- Diagramm verbessert:
  - Höhere Lesbarkeit mit stärkeren Linien und Abstand für Achsenbeschriftungen
  - Anpassung der Höhe und Breite für mobile & große Bildschirme
- Tabelle optimiert:
  - Bessere Lesbarkeit mit größeren Abständen
  - Hover-Effekte für Zeilen
  - Dynamisches Spaltenlayout für kleine & große Bildschirme
- Code aufgeräumt und verbessert

Test auf verschiedenen Bildschirmgrößen erfolgreich!"
This commit is contained in:
Ismail Ali
2025-02-25 19:46:52 +01:00
parent 327a101386
commit 8c01dd3fc3
12 changed files with 591 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
pages/analogeEingaenge.tsx
View File

@@ -1,37 +1,32 @@
"use client"; ///pages/analogeEingaenge.tsx
import React, { useState } from "react";
import AnalogeEingaengeComponent from "../components/main/analogeEingaenge/AnalogeEingaengeComponent";
import XioPM from "../components/main/analogeEingaenge/XioPM";
import { analogInputs } from "../data/mockdata/analogInputs";
import { xioPm1Inputs } from "../data/mockdata/xioPm1Inputs";
import { xioPm2Inputs } from "../data/mockdata/xioPm2Inputs";
import AnalogeEingaengeTabelle from "../components/main/analogeEingaenge/AnalogeEingaengeTable";
import AnalogInputsChart from "../components/main/analogeEingaenge/AnalogInputsChart";
function AnalogeEingaenge() {
const [activeConfig, setActiveConfig] = useState<number | null>(null);
return (
<div className="flex flex-col h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-6vh)] xl:h-[calc(100vh-10vh-6vh)] bg-gray-100">
<div className="flex-grow grid grid-cols-2 gap-1 laptop:gap-2 2xl:p-4 laptop:p-1 overflow-auto">
<AnalogeEingaengeComponent />
<div className="min-h-screen bg-gray-100 p-4">
<div className="container mx-auto">
{/* Responsive Grid: 1 Spalte auf mobilen Geräten, 2 Spalten auf größeren Geräten */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Tabelle als Card */}
<div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
<h2 className="text-xl font-semibold mb-4 text-gray-700">
Analoge Eingänge
</h2>
<AnalogeEingaengeTabelle />
</div>
<div className="border rounded-lg shadow-md p-2 bg-white laptop:p-4">
<h3 className="text-sm font-semibold mb-1">Diagramm</h3>
<p>Diagramm wird hier eingefügt</p>
{/* Diagramm als Card */}
<div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
<h2 className="text-xl font-semibold mb-4 text-gray-700">
Analog Inputs Chart
</h2>
<AnalogInputsChart />
</div>
</div>
{/*
<XioPM
title="XIO-PM 1"
data={xioPm1Inputs}
onConfigClick={(id) => setActiveConfig(id)}
/>
<XioPM
title="XIO-PM 2"
data={xioPm2Inputs}
onConfigClick={(id) => setActiveConfig(id)}
/>
*/}
</div>
</div>
);