120 lines
3.5 KiB
JavaScript
120 lines
3.5 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import { startOfDay } from 'date-fns';
|
|
import PickupConfigTable from './components/PickupConfigTable';
|
|
import RangePickerModal from './components/RangePickerModal';
|
|
import usePickupConfig from './hooks/usePickupConfig';
|
|
import 'react-date-range/dist/styles.css';
|
|
import 'react-date-range/dist/theme/default.css';
|
|
|
|
const PickupConfigEditor = () => {
|
|
const {
|
|
config,
|
|
loading,
|
|
status,
|
|
error,
|
|
fetchConfig,
|
|
saveConfig,
|
|
toggleActive,
|
|
toggleProfileCheck,
|
|
toggleOnlyNotify,
|
|
changeWeekday,
|
|
updateDateRange
|
|
} = usePickupConfig();
|
|
const [activeRangePicker, setActiveRangePicker] = useState(null);
|
|
const minSelectableDate = startOfDay(new Date());
|
|
|
|
const handleWeekdayChange = (index, value, entryId) => {
|
|
changeWeekday(index, value);
|
|
if (value && entryId) {
|
|
setActiveRangePicker((prev) => (prev === entryId ? null : prev));
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!activeRangePicker) {
|
|
return;
|
|
}
|
|
const entry = config.find((item) => item.id === activeRangePicker);
|
|
if (!entry || entry.desiredWeekday) {
|
|
setActiveRangePicker(null);
|
|
}
|
|
}, [activeRangePicker, config]);
|
|
|
|
const activeRangeEntry = activeRangePicker
|
|
? config.find((item) => item.id === activeRangePicker) || null
|
|
: null;
|
|
|
|
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>
|
|
)}
|
|
|
|
<PickupConfigTable
|
|
config={config}
|
|
weekdays={weekdays}
|
|
onToggleActive={toggleActive}
|
|
onToggleProfileCheck={toggleProfileCheck}
|
|
onToggleOnlyNotify={toggleOnlyNotify}
|
|
onWeekdayChange={handleWeekdayChange}
|
|
onRangePickerRequest={setActiveRangePicker}
|
|
/>
|
|
|
|
<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"
|
|
>
|
|
Konfiguration 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>
|
|
|
|
{activeRangeEntry && (
|
|
<RangePickerModal
|
|
entry={activeRangeEntry}
|
|
minDate={minSelectableDate}
|
|
onSelectRange={(startDate, endDate) =>
|
|
updateDateRange(activeRangeEntry.id, startDate, endDate)
|
|
}
|
|
onResetRange={() => {
|
|
updateDateRange(activeRangeEntry.id, null, null);
|
|
setActiveRangePicker(null);
|
|
}}
|
|
onClose={() => setActiveRangePicker(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PickupConfigEditor;
|