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

6
components/modales/kueModal/TDRPopup.tsx
View File

@@ -1,4 +1,4 @@
"use client"; // components/modules/KueModal/TDRPopup.tsx "use client"; // components/modules/KueModal/TDRChartActionBar.tsx
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import ReactModal from "react-modal"; import ReactModal from "react-modal";
import Chart from "chart.js/auto"; import Chart from "chart.js/auto";
@@ -12,7 +12,7 @@ import {
setSelectedChartData, setSelectedChartData,
setSelectedFileName, setSelectedFileName,
} from "../../../redux/store/variablesSlice"; } from "../../../redux/store/variablesSlice";
const TDRPopup: React.FC = () => { const TDRChartActionBar: React.FC = () => {
const [jahr, setJahr] = useState(new Date().getFullYear()); const [jahr, setJahr] = useState(new Date().getFullYear());
const [monat, setMonat] = useState(new Date().getMonth() + 1); const [monat, setMonat] = useState(new Date().getMonth() + 1);
const [dateiListe, setDateiListe] = useState<string[]>([]); // Liste der Dateien const [dateiListe, setDateiListe] = useState<string[]>([]); // Liste der Dateien
@@ -205,4 +205,4 @@ const TDRPopup: React.FC = () => {
); );
}; };
export default TDRPopup; export default TDRChartActionBar;

41
components/modules/AnalogeEingaengeComponent.tsx
View File

@@ -1,48 +1,11 @@
"use client"; // components/modules/AnalogeEingaengeComponent.tsx "use client"; // components/modules/AnalogeEingaengeComponent.tsx
import React, { useState } from "react"; import React, { useState } from "react";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import { analogInputs } from "../../data/mockdata/analogInputs";
interface Input {
id: number;
value: number;
name: string;
uW: boolean;
uG: boolean;
oW: boolean;
oG: boolean;
}
const AnalogeEingaengeComponent = () => { const AnalogeEingaengeComponent = () => {
const [activeConfig, setActiveConfig] = useState<number | null>(null); const [activeConfig, setActiveConfig] = useState<number | null>(null);
// Mock-Daten für die analogen Eingänge
const inputs = [
{ id: 1, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
{
id: 2,
value: 22.91,
name: "Feuchtigkeit",
uW: true,
uG: true,
oW: true,
oG: false,
},
{ id: 3, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
{ id: 4, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
{ id: 5, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
{
id: 6,
value: 21.0,
name: "Temperatur",
uW: true,
uG: true,
oW: false,
oG: false,
},
{ id: 7, value: 0, name: "----", uW: true, uG: true, oW: true, oG: true },
{ id: 8, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
];
return ( return (
<div className="border rounded-lg shadow-md p-6 bg-white flex flex-col h-full"> <div className="border rounded-lg shadow-md p-6 bg-white flex flex-col h-full">
<h3 className="text-sm font-semibold mb-1">Analoge Eingänge</h3> <h3 className="text-sm font-semibold mb-1">Analoge Eingänge</h3>
@@ -63,7 +26,7 @@ const AnalogeEingaengeComponent = () => {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{inputs.map((input) => ( {analogInputs.map((input) => (
<tr key={input.id} className="border-t"> <tr key={input.id} className="border-t">
<td className="px-2 py-1">{input.id}</td> <td className="px-2 py-1">{input.id}</td>
<td className="px-2 py-1">{input.value}</td> <td className="px-2 py-1">{input.value}</td>

32
data/mockdata/analogInputs.ts Normal file
View File

@@ -0,0 +1,32 @@
// /data/mockdata/analogInputs.ts
/**
Da alle Eingänge (xioPm1Inputs, xioPm2Inputs, analogInputs) die gleiche Struktur haben, können wir ein gemeinsames Interface verwenden
*/
import { InputData } from "./types";
export const analogInputs: InputData[] = [
{ id: 1, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
{
id: 2,
value: 22.91,
name: "Feuchtigkeit",
uW: true,
uG: true,
oW: true,
oG: false,
},
{ id: 3, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
{ id: 4, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
{ id: 5, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
{
id: 6,
value: 21.0,
name: "Temperatur",
uW: true,
uG: true,
oW: false,
oG: false,
},
{ id: 7, value: 0, name: "----", uW: true, uG: true, oW: true, oG: true },
{ id: 8, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
];

13
data/mockdata/types.ts Normal file
View File

@@ -0,0 +1,13 @@
// /data/mockdata/types.ts
/**
Da alle Eingänge (xioPm1Inputs, xioPm2Inputs, analogInputs) die gleiche Struktur haben, können wir ein gemeinsames Interface verwenden
*/
export interface InputData {
id: number;
value: number;
name: string;
uW: boolean;
uG: boolean;
oW: boolean;
oG: boolean;
}

80
data/mockdata/xioPm1Inputs.ts Normal file
View File

@@ -0,0 +1,80 @@
// /data/mockdata/xioPm1Inputs.ts
/**
Da alle Eingänge (xioPm1Inputs, xioPm2Inputs, analogInputs) die gleiche Struktur haben, können wir ein gemeinsames Interface verwenden
*/
import { InputData } from "./types";
export const xioPm1Inputs: InputData[] = [
{
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,
},
];

80
data/mockdata/xioPm2Inputs.ts Normal file
View File

@@ -0,0 +1,80 @@
// /data/mockdata/xioPm1Inputs.ts
/**
Da alle Eingänge (xioPm1Inputs, xioPm2Inputs, analogInputs) die gleiche Struktur haben, können wir ein gemeinsames Interface verwenden
*/
import { InputData } from "./types";
export const xioPm2Inputs: InputData[] = [
{
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,
},
];

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 React, { useState } from "react";
import AnalogeEingaengeComponent from "../components/modules/AnalogeEingaengeComponent"; import AnalogeEingaengeComponent from "../components/modules/AnalogeEingaengeComponent";
import XioPM from "../components/modules/XioPM"; 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() { function AnalogeEingaenge() {
const [activeConfig, setActiveConfig] = useState<number | null>(null); 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 ( 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 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"> <div className="flex-grow grid grid-cols-2 gap-4 p-4">
<AnalogeEingaengeComponent /> <AnalogeEingaengeComponent />
{/* Zweite Box */}
<div className="border rounded-lg shadow-md p-2 bg-white"> <div className="border rounded-lg shadow-md p-2 bg-white">
<h3 className="text-sm font-semibold mb-1">Diagramm</h3> <h3 className="text-sm font-semibold mb-1">Diagramm</h3>
<p>Diagramm wird hier eingefügt</p> <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 KabelModulStatus from "../components/modulesStatus/KabelModulStatus";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { RootState } from "../store/store"; import { RootState } from "../redux/store/store";
function Dashboard() { function Dashboard() {
const router = useRouter(); const router = useRouter();
@@ -115,7 +115,7 @@ function Dashboard() {
}; };
return ( 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 items-center w-full lg:w-2/3">
<div className="flex justify-between gap-1 "> <div className="flex justify-between gap-1 ">
<Icon <Icon
@@ -128,7 +128,7 @@ function Dashboard() {
</div> </div>
</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 "> <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 "> <table className="min-w-full border border-gray-200 text-left table-fixed ">
<thead className="bg-gray-100 border-b border-gray-300"> <thead className="bg-gray-100 border-b border-gray-300">