CPLv4.0/app/analogeEingaenge/page.jsx

import React, { useState } from "react";
import Layout from "../components/Layout";

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 (
    <Layout>
      <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>
    </Layout>
  );
}

export default AnalogeEingaenge;