Dashbord Tabelle responsive mit flex-grow

This commit is contained in:
ISA
2025-02-07 11:23:17 +01:00
parent 48b1d2f408
commit 898af2bcf1
8 changed files with 217 additions and 199 deletions

View File

@@ -1,169 +1,19 @@
"use client"; // pages/analogeEingaenge.js
"use client"; ///pages/analogeEingaenge.tsx
import React, { useState } from "react";
import AnalogeEingaengeComponent from "../components/modules/AnalogeEingaengeComponent";
import XioPM from "../components/modules/XioPM";
import { analogInputs } from "../data/mockdata/analogInputs";
import { xioPm1Inputs } from "../data/mockdata/xioPm1Inputs";
import { xioPm2Inputs } from "../data/mockdata/xioPm2Inputs";
function AnalogeEingaenge() {
const [activeConfig, setActiveConfig] = useState<number | null>(null);
// Mock-Daten für XIO-PM 1
const xioPm1Inputs = [
{
id: 1,
value: 1.34,
name: "Test1",
uW: true,
uG: true,
oW: false,
oG: true,
},
{
id: 2,
value: 7.94,
name: "----",
uW: true,
uG: true,
oW: true,
oG: true,
},
{
id: 3,
value: 7.94,
name: "----",
uW: false,
uG: true,
oW: true,
oG: true,
},
{
id: 4,
value: 7.94,
name: "----",
uW: true,
uG: true,
oW: true,
oG: true,
},
{
id: 5,
value: 6.13,
name: "----",
uW: true,
uG: true,
oW: true,
oG: true,
},
{
id: 6,
value: 7.94,
name: "----",
uW: true,
uG: true,
oW: true,
oG: true,
},
{
id: 7,
value: 7.94,
name: "----",
uW: true,
uG: true,
oW: true,
oG: true,
},
{
id: 8,
value: 7.94,
name: "----",
uW: true,
uG: true,
oW: true,
oG: true,
},
];
// Mock-Daten für XIO-PM 2
const xioPm2Inputs = [
{
id: 1,
value: 2.78,
name: "Test2",
uW: true,
uG: false,
oW: true,
oG: false,
},
{
id: 2,
value: 4.33,
name: "----",
uW: false,
uG: true,
oW: false,
oG: true,
},
{
id: 3,
value: 8.94,
name: "----",
uW: true,
uG: true,
oW: false,
oG: true,
},
{
id: 4,
value: 9.44,
name: "----",
uW: true,
uG: false,
oW: true,
oG: false,
},
{
id: 5,
value: 6.13,
name: "----",
uW: true,
uG: true,
oW: true,
oG: true,
},
{
id: 6,
value: 7.94,
name: "----",
uW: true,
uG: true,
oW: true,
oG: true,
},
{
id: 7,
value: 7.94,
name: "----",
uW: true,
uG: true,
oW: true,
oG: true,
},
{
id: 8,
value: 7.94,
name: "----",
uW: true,
uG: true,
oW: true,
oG: true,
},
];
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-4 p-4">
<AnalogeEingaengeComponent />
{/* Zweite Box */}
<div className="border rounded-lg shadow-md p-2 bg-white">
<h3 className="text-sm font-semibold mb-1">Diagramm</h3>
<p>Diagramm wird hier eingefügt</p>