first commit

src/App.js

@@ -0,0 +1,484 @@
+import React, { useState, useEffect } from 'react';
+import './App.css';
+
+function App() {
+  const [config, setConfig] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [status, setStatus] = useState('');
+  const [error, setError] = useState('');
+  const [newEntry, setNewEntry] = useState({
+    id: "",
+    label: "",
+    active: false,
+    checkProfileId: true,
+    onlyNotify: false
+  });
+  const [showNewEntryForm, setShowNewEntryForm] = useState(false);
+
+  // API-URL für Server-Endpunkte
+  const API_URL = '/api/iobroker/pickup-config';
+
+  // Beim Laden der Komponente die aktuelle Konfiguration abrufen
+  useEffect(() => {
+    fetchConfig();
+  }, []);
+
+  // Konfiguration vom Server abrufen
+  const fetchConfig = async () => {
+    setLoading(true);
+    setError('');
+    
+    try {
+      const response = await fetch(API_URL);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      
+      const data = await response.json();
+      setConfig(data);
+      setLoading(false);
+    } catch (err) {
+      console.error("Fehler beim Laden der Konfiguration:", err);
+      setError(`Fehler beim Laden der Konfiguration: ${err.message}`);
+      setLoading(false);
+      
+      // Fallback zur statischen Konfiguration bei Fehler
+      setConfig([
+        { id: "63448", active: false, checkProfileId: true, onlyNotify: true, label: "Penny Baden-Oos" },
+        { id: "44975", active: false, checkProfileId: true, onlyNotify: false, label: "Aldi Kuppenheim", desiredWeekday: "Samstag" },
+        { id: "44972", active: false, checkProfileId: true, onlyNotify: false, label: "Aldi Biblisweg", desiredWeekday: "Dienstag" },
+        { id: "44975", active: false, checkProfileId: true, onlyNotify: false, label: "Aldi Kuppenheim", desiredDate: "2025-05-18" },
+        { id: "33875", active: false, checkProfileId: true, onlyNotify: false, label: "Cap Markt", desiredWeekday: "Donnerstag" },
+        { id: "42322", active: false, checkProfileId: false, onlyNotify: false, label: "Edeka Haueneberstein" },
+        { id: "51450", active: false, checkProfileId: true, onlyNotify: false, label: "Hornbach Grünwinkel" }
+      ]);
+    }
+  };
+
+  // Konfiguration auf dem Server speichern
+  const saveConfig = async () => {
+    setStatus('Speichere...');
+    setError('');
+    
+    try {
+      const response = await fetch(API_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(config),
+      });
+      
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      
+      const result = await response.json();
+      
+      if (result.success) {
+        setStatus('Konfiguration erfolgreich gespeichert!');
+        // Status nach 3 Sekunden wieder zurücksetzen
+        setTimeout(() => setStatus(''), 3000);
+      } else {
+        throw new Error(result.error || 'Unbekannter Fehler beim Speichern');
+      }
+    } catch (err) {
+      console.error("Fehler beim Speichern:", err);
+      setError(`Fehler beim Speichern: ${err.message}`);
+    }
+  };
+
+  // Eintrag hinzufügen
+  const addEntry = () => {
+    // Validierung
+    if (!newEntry.id || !newEntry.label) {
+      setError('ID und Bezeichnung müssen ausgefüllt werden!');
+      return;
+    }
+    
+    // Neuen Eintrag zur Konfiguration hinzufügen
+    const updatedConfig = [...config, newEntry];
+    setConfig(updatedConfig);
+    
+    // Formular zurücksetzen
+    setNewEntry({
+      id: "",
+      label: "",
+      active: false,
+      checkProfileId: true,
+      onlyNotify: false
+    });
+    
+    // Formular ausblenden
+    setShowNewEntryForm(false);
+    
+    // Erfolgsmeldung anzeigen
+    setStatus('Neuer Eintrag hinzugefügt!');
+    setTimeout(() => setStatus(''), 3000);
+  };
+
+  // Eintrag löschen
+  const deleteEntry = (index) => {
+    if (window.confirm('Sind Sie sicher, dass Sie diesen Eintrag löschen möchten?')) {
+      const updatedConfig = [...config];
+      updatedConfig.splice(index, 1);
+      setConfig(updatedConfig);
+      
+      setStatus('Eintrag gelöscht!');
+      setTimeout(() => setStatus(''), 3000);
+    }
+  };
+
+  // Event-Handler für verschiedene Änderungen an der Konfiguration
+  const handleToggleActive = (index) => {
+    const newConfig = [...config];
+    newConfig[index].active = !newConfig[index].active;
+    setConfig(newConfig);
+  };
+  
+  const handleToggleProfileCheck = (index) => {
+    const newConfig = [...config];
+    newConfig[index].checkProfileId = !newConfig[index].checkProfileId;
+    setConfig(newConfig);
+  };
+  
+  const handleToggleOnlyNotify = (index) => {
+    const newConfig = [...config];
+    newConfig[index].onlyNotify = !newConfig[index].onlyNotify;
+    setConfig(newConfig);
+  };
+  
+  const handleWeekdayChange = (index, value) => {
+    const newConfig = [...config];
+    newConfig[index].desiredWeekday = value || null;
+    
+    // Wenn ein Wochentag gesetzt wird, entfernen wir das spezifische Datum
+    if (value && newConfig[index].desiredDate) {
+      delete newConfig[index].desiredDate;
+    }
+    
+    setConfig(newConfig);
+  };
+  
+  const handleDateChange = (index, value) => {
+    const newConfig = [...config];
+    newConfig[index].desiredDate = value || null;
+    
+    // Wenn ein spezifisches Datum gesetzt wird, entfernen wir den Wochentag
+    if (value && newConfig[index].desiredWeekday) {
+      delete newConfig[index].desiredWeekday;
+    }
+    
+    setConfig(newConfig);
+  };
+
+  // Neue Eintragsdaten verwalten
+  const handleNewEntryChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    setNewEntry({
+      ...newEntry,
+      [name]: type === 'checkbox' ? checked : value
+    });
+  };
+
+  // Lade-Indikator anzeigen, während die Daten geladen werden
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-screen bg-gray-100">
+        <div className="text-center p-8">
+          <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto mb-4"></div>
+          <p className="text-xl">Lade Konfiguration...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Definiere die Wochentage
+  const weekdays = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'];
+
+  // Hauptkomponente rendern
+  return (
+    <div className="p-4 max-w-6xl mx-auto bg-white shadow-lg rounded-lg mt-4">
+      <h1 className="text-2xl font-bold mb-6 text-center text-gray-800">Foodsharing Abholung-Konfiguration</h1>
+      
+	  {/* Externe Links */}
+      <div className="flex justify-center mb-4 space-x-4">
+        <a 
+          href="https://foodsharing.de/?page=dashboard" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="text-blue-600 hover:text-blue-800 flex items-center"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+          </svg>
+          Foodsharing
+        </a>
+        <a 
+          href="https://iobroker.srv.medeba-media.de/#tab-intro" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="text-blue-600 hover:text-blue-800 flex items-center"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+          </svg>
+          ioBroker Admin
+        </a>
+      </div>
+      {/* Fehler- und Status-Meldungen */}
+      {error && (
+        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4 relative">
+          <span className="block sm:inline">{error}</span>
+          <button 
+            className="absolute top-0 bottom-0 right-0 px-4 py-3" 
+            onClick={() => setError('')}
+          >
+            <span className="text-xl">&times;</span>
+          </button>
+        </div>
+      )}
+      
+      {status && (
+        <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4 relative">
+          <span className="block sm:inline">{status}</span>
+        </div>
+      )}
+      
+      {/* Konfigurationstabelle */}
+      <div className="overflow-x-auto mb-6">
+        <table className="min-w-full bg-white border border-gray-200 rounded-lg overflow-hidden">
+          <thead>
+            <tr className="bg-gray-100">
+              <th className="px-4 py-2 border-b">Aktiv</th>
+              <th className="px-4 py-2 border-b">Geschäft</th>
+              <th className="px-4 py-2 border-b">Profil prüfen</th>
+              <th className="px-4 py-2 border-b">Nur benachrichtigen</th>
+              <th className="px-4 py-2 border-b">Wochentag</th>
+              <th className="px-4 py-2 border-b">Spezifisches Datum</th>
+              <th className="px-4 py-2 border-b">Aktionen</th>
+            </tr>
+          </thead>
+          <tbody>
+            {config.map((item, index) => (
+              <tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
+                <td className="px-4 py-2 border-b text-center">
+                  <label className="inline-flex items-center">
+                    <input 
+                      type="checkbox" 
+                      checked={item.active || false} 
+                      onChange={() => handleToggleActive(index)}
+                      className="h-5 w-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
+                    />
+                  </label>
+                </td>
+                <td className="px-4 py-2 border-b">
+                  <div>
+                    <span className="font-medium">{item.label}</span>
+                    <br />
+                    <span className="text-sm text-gray-500">ID: {item.id}</span>
+                  </div>
+                </td>
+                <td className="px-4 py-2 border-b text-center">
+                  <label className="inline-flex items-center">
+                    <input 
+                      type="checkbox" 
+                      checked={item.checkProfileId || false} 
+                      onChange={() => handleToggleProfileCheck(index)}
+                      className="h-5 w-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
+                    />
+                  </label>
+                </td>
+                <td className="px-4 py-2 border-b text-center">
+                  <label className="inline-flex items-center">
+                    <input 
+                      type="checkbox" 
+                      checked={item.onlyNotify || false} 
+                      onChange={() => handleToggleOnlyNotify(index)}
+                      className="h-5 w-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
+                    />
+                  </label>
+                </td>
+                <td className="px-4 py-2 border-b">
+                  <select 
+                    value={item.desiredWeekday || ''}
+                    onChange={(e) => handleWeekdayChange(index, e.target.value)}
+                    className="border rounded p-2 w-full bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    disabled={item.desiredDate}
+                  >
+                    <option value="">Kein Wochentag</option>
+                    {weekdays.map((day) => (
+                      <option key={day} value={day}>{day}</option>
+                    ))}
+                  </select>
+                </td>
+                <td className="px-4 py-2 border-b">
+                  <input 
+                    type="date" 
+                    value={item.desiredDate || ''}
+                    onChange={(e) => handleDateChange(index, e.target.value)}
+                    className="border rounded p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    disabled={item.desiredWeekday}
+                  />
+                </td>
+                <td className="px-4 py-2 border-b text-center">
+                  <button
+                    onClick={() => deleteEntry(index)}
+                    className="bg-red-500 hover:bg-red-600 text-white rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-red-500"
+                    title="Löschen"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      
+      {/* Neuer Eintrag Formular */}
+      {showNewEntryForm ? (
+        <div className="bg-gray-50 p-4 rounded-lg border border-gray-200 mb-6">
+          <h2 className="text-lg font-semibold mb-4">Neuen Eintrag hinzufügen</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">ID *</label>
+              <input
+                type="text"
+                name="id"
+                value={newEntry.id}
+                onChange={handleNewEntryChange}
+                className="border rounded p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                required
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Bezeichnung *</label>
+              <input
+                type="text"
+                name="label"
+                value={newEntry.label}
+                onChange={handleNewEntryChange}
+                className="border rounded p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                required
+              />
+            </div>
+          </div>
+          
+          <div className="flex flex-wrap gap-6 mb-4">
+            <div className="flex items-center">
+              <input
+                type="checkbox"
+                name="active"
+                checked={newEntry.active}
+                onChange={handleNewEntryChange}
+                className="h-5 w-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500 mr-2"
+              />
+              <label className="text-sm font-medium text-gray-700">Aktiv</label>
+            </div>
+            
+            <div className="flex items-center">
+              <input
+                type="checkbox"
+                name="checkProfileId"
+                checked={newEntry.checkProfileId}
+                onChange={handleNewEntryChange}
+                className="h-5 w-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500 mr-2"
+              />
+              <label className="text-sm font-medium text-gray-700">Profil prüfen</label>
+            </div>
+            
+            <div className="flex items-center">
+              <input
+                type="checkbox"
+                name="onlyNotify"
+                checked={newEntry.onlyNotify}
+                onChange={handleNewEntryChange}
+                className="h-5 w-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500 mr-2"
+              />
+              <label className="text-sm font-medium text-gray-700">Nur benachrichtigen</label>
+            </div>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Wochentag</label>
+              <select
+                name="desiredWeekday"
+                value={newEntry.desiredWeekday || ''}
+                onChange={handleNewEntryChange}
+                className="border rounded p-2 w-full bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              >
+                <option value="">Kein Wochentag</option>
+                {weekdays.map((day) => (
+                  <option key={day} value={day}>{day}</option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Spezifisches Datum</label>
+              <input
+                type="date"
+                name="desiredDate"
+                value={newEntry.desiredDate || ''}
+                onChange={handleNewEntryChange}
+                className="border rounded p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                disabled={newEntry.desiredWeekday}
+              />
+            </div>
+          </div>
+          
+          <div className="flex justify-end space-x-2">
+            <button
+              onClick={() => setShowNewEntryForm(false)}
+              className="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-gray-500"
+            >
+              Abbrechen
+            </button>
+            <button
+              onClick={addEntry}
+              className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              Hinzufügen
+            </button>
+          </div>
+        </div>
+      ) : (
+        <button
+          onClick={() => setShowNewEntryForm(true)}
+          className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded mb-6 focus:outline-none focus:ring-2 focus:ring-green-500"
+        >
+          Neuen Eintrag hinzufügen
+        </button>
+      )}
+      
+      {/* Aktionsbuttons */}
+      <div className="flex justify-between mb-6">
+        <button 
+          onClick={fetchConfig} 
+          className="bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors"
+        >
+          Aktualisieren
+        </button>
+        <button 
+          onClick={saveConfig} 
+          className="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
+        >
+          Konfiguration speichern
+        </button>
+      </div>
+      
+      {/* JSON Vorschau
+      <div className="mt-8 p-4 border rounded bg-gray-50">
+        <h2 className="text-lg font-bold mb-2">Aktuelle JSON-Konfiguration:</h2>
+        <pre className="bg-gray-100 p-4 rounded overflow-x-auto text-sm">
+          {JSON.stringify(config, null, 2)}
+        </pre>
+      </div> */}
+    </div>
+  );
+}
+
+export default App;