first commit
This commit is contained in:
root
229
src/PickupConfigEditor.js
Normal file
229
src/PickupConfigEditor.js
Normal file
@@ -0,0 +1,229 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
const PickupConfigEditor = () => {
|
||||
const [config, setConfig] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [status, setStatus] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
|
||||
// Simulierte API-Endpunkte - diese müssen in Ihrer tatsächlichen Implementierung angepasst werden
|
||||
const API_URL = '/api/iobroker/pickup-config';
|
||||
|
||||
useEffect(() => {
|
||||
// Beim Laden der Komponente die aktuelle Konfiguration abrufen
|
||||
fetchConfig();
|
||||
}, []);
|
||||
|
||||
const fetchConfig = async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
// In einer echten Implementierung würden Sie Ihre API aufrufen
|
||||
// Hier wird die statische Konfiguration verwendet
|
||||
// const response = await fetch(API_URL);
|
||||
// const data = await response.json();
|
||||
|
||||
// Simulierte Verzögerung und Antwort mit der statischen Konfiguration
|
||||
setTimeout(() => {
|
||||
const staticConfig = [
|
||||
{ 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" }
|
||||
];
|
||||
setConfig(staticConfig);
|
||||
setLoading(false);
|
||||
}, 500);
|
||||
} catch (err) {
|
||||
setError('Fehler beim Laden der Konfiguration: ' + err.message);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const saveConfig = async () => {
|
||||
setStatus('Speichere...');
|
||||
setError('');
|
||||
|
||||
try {
|
||||
// API-Aufruf zum Speichern der Konfiguration in ioBroker
|
||||
// In einer echten Implementierung würden Sie Ihre API aufrufen
|
||||
// const response = await fetch(API_URL, {
|
||||
// method: 'POST',
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json',
|
||||
// },
|
||||
// body: JSON.stringify(config),
|
||||
// });
|
||||
|
||||
// Simulierte Verzögerung zum Darstellen des Speichervorgangs
|
||||
setTimeout(() => {
|
||||
setStatus('Konfiguration erfolgreich gespeichert!');
|
||||
setTimeout(() => setStatus(''), 3000);
|
||||
}, 1000);
|
||||
} catch (err) {
|
||||
setError('Fehler beim Speichern: ' + err.message);
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
// Wenn ein Wochentag gesetzt wird, entfernen wir das spezifische Datum
|
||||
if (newConfig[index].desiredDate) {
|
||||
delete newConfig[index].desiredDate;
|
||||
}
|
||||
setConfig(newConfig);
|
||||
};
|
||||
|
||||
const handleDateChange = (index, value) => {
|
||||
const newConfig = [...config];
|
||||
newConfig[index].desiredDate = value;
|
||||
// Wenn ein spezifisches Datum gesetzt wird, entfernen wir den Wochentag
|
||||
if (newConfig[index].desiredWeekday) {
|
||||
delete newConfig[index].desiredWeekday;
|
||||
}
|
||||
setConfig(newConfig);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-center p-8">Lade Konfiguration...</div>;
|
||||
}
|
||||
|
||||
const weekdays = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'];
|
||||
|
||||
return (
|
||||
<div className="p-4 max-w-4xl mx-auto">
|
||||
<h1 className="text-2xl font-bold mb-6">ioBroker Abholung-Konfiguration</h1>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status && (
|
||||
<div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
|
||||
{status}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full bg-white border border-gray-200">
|
||||
<thead>
|
||||
<tr className="bg-gray-100">
|
||||
<th className="px-4 py-2">Aktiv</th>
|
||||
<th className="px-4 py-2">Geschäft</th>
|
||||
<th className="px-4 py-2">Profil prüfen</th>
|
||||
<th className="px-4 py-2">Nur benachrichtigen</th>
|
||||
<th className="px-4 py-2">Wochentag</th>
|
||||
<th className="px-4 py-2">Spezifisches Datum</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 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.active}
|
||||
onChange={() => handleToggleActive(index)}
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<span className="font-medium">{item.label}</span>
|
||||
<br />
|
||||
<span className="text-sm text-gray-500">ID: {item.id}</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.checkProfileId}
|
||||
onChange={() => handleToggleProfileCheck(index)}
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.onlyNotify}
|
||||
onChange={() => handleToggleOnlyNotify(index)}
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<select
|
||||
value={item.desiredWeekday || ''}
|
||||
onChange={(e) => handleWeekdayChange(index, e.target.value)}
|
||||
className="border rounded p-1 w-full"
|
||||
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">
|
||||
<input
|
||||
type="date"
|
||||
value={item.desiredDate || ''}
|
||||
onChange={(e) => handleDateChange(index, e.target.value)}
|
||||
className="border rounded p-1 w-full"
|
||||
disabled={item.desiredWeekday}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-between">
|
||||
<button
|
||||
onClick={fetchConfig}
|
||||
className="bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded"
|
||||
>
|
||||
Zurücksetzen
|
||||
</button>
|
||||
<button
|
||||
onClick={saveConfig}
|
||||
className="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded"
|
||||
>
|
||||
In ioBroker speichern
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
{JSON.stringify(config, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PickupConfigEditor;
|
||||
Reference in New Issue
Block a user