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

feat: dynamische URL-Anpassung für Entwicklungs- und Produktionsumgebung

Browse Source 
- Navigation und Weiterleitungen angepasst, um dynamisch `.html`-Endungen in Produktionsumgebung anzuhängen.
- Nutzung von `NEXT_PUBLIC_NODE_ENV` ermöglicht unterschiedliche URL-Strukturen in Entwicklungs- und Produktionsumgebung.
- `Navigation`-Komponente und `index.js` entsprechend konfiguriert, um `.html` in der Produktionsumgebung automatisch anzuhängen.
- Verbesserte Konsistenz und Funktionalität zwischen beiden Umgebungen, 404-Fehler in Produktion behoben.
This commit is contained in:
ISA
2024-10-25 11:21:56 +02:00
parent 655a86e915
commit ab8a80f34c
21 changed files with 108 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
pages/analogeEingaenge.js Normal file
View File

@@ -0,0 +1,222 @@
"use client";
import React, { useState } from "react";
function AnalogeEingaenge() {
const [activeConfig, setActiveConfig] = useState(null);
// Beispiel-Daten, du kannst die Daten dynamisch laden
const inputs = [
{
id: 1,
value: 0,
name: "------------------",
uG: true,
uW: true,
oW: true,
oG: true,
},
{
id: 2,
value: 0,
name: "------------------",
uG: true,
uW: true,
oW: true,
oG: true,
},
{
id: 3,
value: 0,
name: "------------------",
uG: true,
uW: true,
oW: true,
oG: true,
},
{
id: 4,
value: 0,
name: "------------------",
uG: true,
uW: true,
oW: true,
oG: true,
},
{
id: 5,
value: 0,
name: "------------------",
uG: true,
uW: true,
oW: true,
oG: true,
},
{
id: 6,
value: 0,
name: "------------------",
uG: true,
uW: true,
oW: true,
oG: true,
},
{
id: 7,
value: 0,
name: "------------------",
uG: true,
uW: true,
oW: true,
oG: true,
},
{
id: 8,
value: 0,
name: "------------------",
uG: true,
uW: true,
oW: true,
oG: true,
},
];
return (
<div className="bg-gray-100 min-h-screen p-8">
<h1 className="text-2xl font-bold mb-4">Analoge Eingänge</h1>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{inputs.map((input) => (
<div key={input.id} className="bg-white rounded-lg shadow-lg p-6">
<div className="flex justify-between items-center bg-blue-500 text-white rounded-t-lg p-4">
<h2 className="text-lg">XIO-PM {input.id}</h2>
<button
className="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded"
onClick={() => setActiveConfig(input.id)}
>
Online
</button>
</div>
<div className="p-4">
<table className="min-w-full bg-white border border-gray-300">
<thead>
<tr className="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
<th className="py-3 px-4 text-center">Eingang</th>
<th className="py-3 px-4 text-center">Wert</th>
<th className="py-3 px-4 text-left">Bezeichnung</th>
<th className="py-3 px-4 text-center">uG</th>
<th className="py-3 px-4 text-center">uW</th>
<th className="py-3 px-4 text-center">oW</th>
<th className="py-3 px-4 text-center">oG</th>
<th className="py-3 px-4 text-center">Konfig</th>
</tr>
</thead>
<tbody className="text-gray-600 text-sm">
<tr className="border-b border-gray-200">
<td className="py-3 px-4 text-center">{input.id}</td>
<td className="py-3 px-4 text-right">{input.value}</td>
<td className="py-3 px-4">{input.name}</td>
<td className="py-3 px-4 text-center">
<i
className={`bi bi-circle-fill text-${
input.uG ? "green" : "gray"
}-500`}
></i>
</td>
<td className="py-3 px-4 text-center">
<i
className={`bi bi-circle-fill text-${
input.uW ? "green" : "gray"
}-500`}
></i>
</td>
<td className="py-3 px-4 text-center">
<i
className={`bi bi-circle-fill text-${
input.oW ? "green" : "gray"
}-500`}
></i>
</td>
<td className="py-3 px-4 text-center">
<i
className={`bi bi-circle-fill text-${
input.oG ? "green" : "gray"
}-500`}
></i>
</td>
<td className="py-3 px-4 text-center">
<button
className="text-blue-500"
onClick={() => setActiveConfig(input.id)}
>
<i className="bi bi-gear-fill"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
))}
</div>
{/* Modal für Konfiguration */}
{activeConfig && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white p-8 rounded-lg shadow-lg w-96">
<h2 className="text-xl font-bold mb-4">
Konfiguration - XIO-PM {activeConfig}
</h2>
<button
className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
onClick={() => setActiveConfig(null)}
>
<i className="bi bi-x-lg"></i>
</button>
{/* Konfigurationsformular hier einfügen */}
<form>
<div className="mb-4">
<label
className="block text-gray-700 text-sm font-bold mb-2"
htmlFor="bezeichnung"
>
Bezeichnung
</label>
<input
type="text"
id="bezeichnung"
name="bezeichnung"
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
placeholder="Bezeichnung eingeben"
/>
</div>
<div className="mb-4">
<label
className="block text-gray-700 text-sm font-bold mb-2"
htmlFor="ug"
>
Unterer Grenzwert
</label>
<input
type="number"
id="ug"
name="ug"
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
placeholder="Wert eingeben"
/>
</div>
{/* Weitere Felder hier hinzufügen */}
<button
type="button"
className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
onClick={() => setActiveConfig(null)}
>
Speichern
</button>
</form>
</div>
</div>
)}
</div>
);
}
export default AnalogeEingaenge;