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

Dashbord Tabelle responsive mit flex-grow

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

158
pages/analogeEingaenge.tsx
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>

6
pages/dashboard.tsx
View File

@@ -8,7 +8,7 @@ import CPLStatus from "../components/modulesStatus/CPLStatus";
import KabelModulStatus from "../components/modulesStatus/KabelModulStatus";
import { Icon } from "@iconify/react";
import { useSelector } from "react-redux";
import { RootState } from "../store/store";
import { RootState } from "../redux/store/store";
function Dashboard() {
const router = useRouter();
@@ -115,7 +115,7 @@ function Dashboard() {
};
return (
<div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0">
<div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0 ">
<div className="flex justify-between items-center w-full lg:w-2/3">
<div className="flex justify-between gap-1 ">
<Icon
@@ -128,7 +128,7 @@ function Dashboard() {
</div>
</div>
<div className="flex flex-col lg:flex-row gap-0 overflow-hidden ">
<div className="flex flex-col lg:flex-row gap-0 overflow-hidden flex-grow">
<div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex ">
<table className="min-w-full border border-gray-200 text-left table-fixed ">
<thead className="bg-gray-100 border-b border-gray-300">