Meik/Pickup-Config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace single-date picker with unified date range control

Browse Source
This commit is contained in:
root
2025-11-09 19:22:13 +01:00
parent 3f8f1f24eb
commit 4cebada1ed
3 changed files with 273 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
services/pickupScheduler.js
View File

@@ -99,10 +99,12 @@ function matchesDesiredDate(pickupDate, desiredDate, desiredDateRange) {
if (hasRange) {
const startValue = toDateValue(desiredDateRange.start);
const endValue = toDateValue(desiredDateRange.end);
if (startValue !== null && pickupValue < startValue) {
const normalizedStart = startValue !== null ? startValue : endValue;
const normalizedEnd = endValue !== null ? endValue : startValue;
if (normalizedStart !== null && pickupValue < normalizedStart) {
return false;
}
if (endValue !== null && pickupValue > endValue) {
if (normalizedEnd !== null && pickupValue > normalizedEnd) {
return false;
}
return true;

148
src/App.js
View File

@@ -31,6 +31,42 @@ function App() {
const [confirmDialog, setConfirmDialog] = useState({ open: false, resolve: null });
const weekdays = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'];
const normalizeConfigEntries = useCallback((entries) => {
if (!Array.isArray(entries)) {
return [];
}
return entries.map((entry) => {
if (!entry || typeof entry !== 'object') {
return entry;
}
const normalized = { ...entry };
if (normalized.desiredDate) {
if (normalized.desiredDate) {
normalized.desiredDateRange = {
start: normalized.desiredDate,
end: normalized.desiredDate
};
}
delete normalized.desiredDate;
}
if (normalized.desiredDateRange) {
const startValue = normalized.desiredDateRange.start || null;
const endValue = normalized.desiredDateRange.end || null;
const normalizedStart = startValue || endValue || null;
const normalizedEnd = endValue || startValue || null;
if (!normalizedStart && !normalizedEnd) {
delete normalized.desiredDateRange;
} else {
normalized.desiredDateRange = {
start: normalizedStart,
end: normalizedEnd
};
}
}
return normalized;
});
}, []);
const delay = useCallback((ms) => new Promise((resolve) => setTimeout(resolve, ms)), []);
const startSyncProgress = useCallback((message, percent, block = false) => {
@@ -163,7 +199,7 @@ function App() {
}
const configData = await configResponse.json();
progress?.update?.('Konfiguration wird geladen...', 75);
setConfig(Array.isArray(configData) ? configData : []);
setConfig(normalizeConfigEntries(Array.isArray(configData) ? configData : []));
progress?.update?.('Synchronisierung abgeschlossen', 95);
return {
storeRefreshJob: data.storeRefreshJob,
@@ -176,7 +212,7 @@ function App() {
}
return {};
},
[handleUnauthorized, normalizeAdminSettings]
[handleUnauthorized, normalizeAdminSettings, normalizeConfigEntries]
);
const authorizedFetch = useCallback(
@@ -321,7 +357,7 @@ function App() {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
setConfig(Array.isArray(data) ? data : []);
setConfig(normalizeConfigEntries(Array.isArray(data) ? data : []));
if (!silent) {
setStatus('Konfiguration aktualisiert.');
setTimeout(() => setStatus(''), 3000);
@@ -331,7 +367,7 @@ function App() {
} finally {
setLoading(false);
}
}, [session?.token, authorizedFetch]);
}, [session?.token, authorizedFetch, normalizeConfigEntries]);
const fetchStoresList = useCallback(async (tokenOverride) => {
const tokenToUse = tokenOverride || session?.token;
@@ -745,28 +781,6 @@ function App() {
return item;
}
const updated = { ...item, desiredWeekday: value || null };
if (value && updated.desiredDate) {
delete updated.desiredDate;
}
if (value && updated.desiredDateRange) {
delete updated.desiredDateRange;
}
return updated;
})
);
};
const handleDateChange = (entryId, value) => {
setIsDirty(true);
setConfig((prev) =>
prev.map((item) => {
if (item.id !== entryId) {
return item;
}
const updated = { ...item, desiredDate: value || null };
if (value && updated.desiredWeekday) {
delete updated.desiredWeekday;
}
if (value && updated.desiredDateRange) {
delete updated.desiredDateRange;
}
@@ -782,19 +796,31 @@ function App() {
if (item.id !== entryId) {
return item;
}
const sanitizedValue = value || null;
const currentRange = item.desiredDateRange
? { ...item.desiredDateRange }
: item.desiredDate
? { start: item.desiredDate, end: item.desiredDate }
: { start: null, end: null };
const nextRange = {
start: item.desiredDateRange?.start || null,
end: item.desiredDateRange?.end || null
start: currentRange.start || null,
end: currentRange.end || null
};
if (field === 'start') {
nextRange.start = value || null;
if (nextRange.end && value && value > nextRange.end) {
nextRange.end = value;
nextRange.start = sanitizedValue;
if (!nextRange.start) {
nextRange.end = null;
} else if (!nextRange.end || nextRange.end < nextRange.start) {
nextRange.end = nextRange.start;
}
} else if (field === 'end') {
nextRange.end = value || null;
if (nextRange.start && value && value < nextRange.start) {
nextRange.start = value;
nextRange.end = sanitizedValue;
if (!nextRange.end && nextRange.start) {
nextRange.end = nextRange.start;
} else if (!nextRange.start && nextRange.end) {
nextRange.start = nextRange.end;
} else if (nextRange.start && nextRange.end < nextRange.start) {
nextRange.start = nextRange.end;
}
}
const hasRange = Boolean(nextRange.start || nextRange.end);
@@ -804,12 +830,12 @@ function App() {
if (updated.desiredWeekday) {
delete updated.desiredWeekday;
}
if (updated.desiredDate) {
delete updated.desiredDate;
}
} else if (updated.desiredDateRange) {
delete updated.desiredDateRange;
}
if (updated.desiredDate) {
delete updated.desiredDate;
}
return updated;
})
);
@@ -1210,21 +1236,27 @@ function App() {
<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">Datumsbereich</th>
<th className="px-4 py-2 border-b">Zeitraum (Datum oder Range)</th>
<th className="px-4 py-2 border-b">Aktionen</th>
</tr>
</thead>
<tbody>
{visibleConfig.length === 0 && (
<tr>
<td colSpan="8" className="px-4 py-6 text-center text-sm text-gray-500">
<td colSpan="7" className="px-4 py-6 text-center text-sm text-gray-500">
Keine sichtbaren Einträge. Nutze „Verfügbare Betriebe“, um Betriebe hinzuzufügen oder ausgeblendete Einträge zurückzuholen.
</td>
</tr>
)}
{visibleConfig.map((item, index) => {
const hasDateRange = Boolean(item.desiredDateRange?.start || item.desiredDateRange?.end);
const normalizedRange = item.desiredDateRange
? { ...item.desiredDateRange }
: item.desiredDate
? { start: item.desiredDate, end: item.desiredDate }
: null;
const rangeStart = normalizedRange?.start || '';
const rangeEnd = normalizedRange?.end || '';
const hasDateRange = Boolean(rangeStart || rangeEnd);
return (
<tr key={`${item.id}-${index}`} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
<td className="px-4 py-2 border-b text-center">
@@ -1263,7 +1295,7 @@ function App() {
value={item.desiredWeekday || ''}
onChange={(e) => handleWeekdayChange(item.id, 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 || hasDateRange}
disabled={hasDateRange}
>
<option value="">Kein Wochentag</option>
{weekdays.map((day) => (
@@ -1274,37 +1306,27 @@ function App() {
</select>
</td>
<td className="px-4 py-2 border-b">
<div className="border rounded p-2 bg-gray-50">
<label className="block text-xs font-medium text-gray-600 mb-1">Datum / Zeitraum</label>
<div className="flex items-center gap-2">
<input
type="date"
value={item.desiredDate || ''}
onChange={(e) => handleDateChange(item.id, 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 || hasDateRange}
/>
</td>
<td className="px-4 py-2 border-b">
<div className="grid grid-cols-1 gap-2">
<div>
<label className="block text-xs text-gray-500 mb-1">Von</label>
<input
type="date"
value={item.desiredDateRange?.start || ''}
value={rangeStart}
onChange={(e) => handleDateRangeChange(item.id, 'start', 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 || item.desiredDate}
disabled={Boolean(item.desiredWeekday)}
/>
</div>
<div>
<label className="block text-xs text-gray-500 mb-1">Bis</label>
<span className="text-xs text-gray-500">bis</span>
<input
type="date"
value={item.desiredDateRange?.end || ''}
value={rangeEnd}
onChange={(e) => handleDateRangeChange(item.id, 'end', 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 || item.desiredDate}
min={item.desiredDateRange?.start || undefined}
disabled={Boolean(item.desiredWeekday)}
min={rangeStart || undefined}
/>
</div>
<p className="text-xs text-gray-500 mt-1">Ein einzelner Tag: Start und Ende identisch wählen.</p>
</div>
</td>
<td className="px-4 py-2 border-b">
@@ -1324,7 +1346,7 @@ function App() {
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" />
<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 1v3M4 7h16" />
</svg>
</button>
</div>

99
src/PickupConfigEditor.js
View File

@@ -30,7 +30,14 @@ const PickupConfigEditor = () => {
{ 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: "44975",
active: false,
checkProfileId: true,
onlyNotify: false,
label: "Aldi Kuppenheim",
desiredDateRange: { start: "2025-05-18", end: "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" }
@@ -90,23 +97,6 @@ const PickupConfigEditor = () => {
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;
}
if (newConfig[index].desiredDateRange) {
delete newConfig[index].desiredDateRange;
}
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;
}
if (newConfig[index].desiredDateRange) {
delete newConfig[index].desiredDateRange;
}
@@ -115,19 +105,30 @@ const PickupConfigEditor = () => {
const handleDateRangeChange = (index, field, value) => {
const newConfig = [...config];
const currentRange = newConfig[index].desiredDateRange
? { ...newConfig[index].desiredDateRange }
: newConfig[index].desiredDate
? { start: newConfig[index].desiredDate, end: newConfig[index].desiredDate }
: { start: null, end: null };
const nextRange = {
start: newConfig[index].desiredDateRange?.start || null,
end: newConfig[index].desiredDateRange?.end || null
start: currentRange.start || null,
end: currentRange.end || null
};
if (field === 'start') {
nextRange.start = value || null;
if (nextRange.end && value && value > nextRange.end) {
nextRange.end = value;
if (!nextRange.start) {
nextRange.end = null;
} else if (!nextRange.end || nextRange.end < nextRange.start) {
nextRange.end = nextRange.start;
}
} else if (field === 'end') {
nextRange.end = value || null;
if (nextRange.start && value && value < nextRange.start) {
nextRange.start = value;
if (!nextRange.end && nextRange.start) {
nextRange.end = nextRange.start;
} else if (!nextRange.start && nextRange.end) {
nextRange.start = nextRange.end;
} else if (nextRange.start && nextRange.end < nextRange.start) {
nextRange.start = nextRange.end;
}
}
const hasRange = Boolean(nextRange.start || nextRange.end);
@@ -136,12 +137,12 @@ const PickupConfigEditor = () => {
if (newConfig[index].desiredWeekday) {
delete newConfig[index].desiredWeekday;
}
if (newConfig[index].desiredDate) {
delete newConfig[index].desiredDate;
}
} else if (newConfig[index].desiredDateRange) {
delete newConfig[index].desiredDateRange;
}
if (newConfig[index].desiredDate) {
delete newConfig[index].desiredDate;
}
setConfig(newConfig);
};
@@ -176,13 +177,19 @@ const PickupConfigEditor = () => {
<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>
<th className="px-4 py-2">Datumsbereich</th>
<th className="px-4 py-2">Datum / Zeitraum</th>
</tr>
</thead>
<tbody>
{config.map((item, index) => {
const hasDateRange = Boolean(item.desiredDateRange?.start || item.desiredDateRange?.end);
const normalizedRange = item.desiredDateRange
? { ...item.desiredDateRange }
: item.desiredDate
? { start: item.desiredDate, end: item.desiredDate }
: null;
const rangeStart = normalizedRange?.start || '';
const rangeEnd = normalizedRange?.end || '';
const hasDateRange = Boolean(rangeStart || rangeEnd);
return (
<tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
<td className="px-4 py-2 text-center">
@@ -219,7 +226,7 @@ const PickupConfigEditor = () => {
value={item.desiredWeekday || ''}
onChange={(e) => handleWeekdayChange(index, e.target.value)}
className="border rounded p-1 w-full"
disabled={item.desiredDate || hasDateRange}
disabled={hasDateRange}
>
<option value="">Kein Wochentag</option>
{weekdays.map((day) => (
@@ -228,37 +235,27 @@ const PickupConfigEditor = () => {
</select>
</td>
<td className="px-4 py-2">
<div className="border rounded p-2 bg-gray-50">
<label className="block text-xs text-gray-500 mb-1">Datum / Zeitraum</label>
<div className="flex items-center gap-2">
<input
type="date"
value={item.desiredDate || ''}
onChange={(e) => handleDateChange(index, e.target.value)}
className="border rounded p-1 w-full"
disabled={item.desiredWeekday || hasDateRange}
/>
</td>
<td className="px-4 py-2">
<div className="grid grid-cols-1 gap-2">
<div>
<label className="block text-xs text-gray-500 mb-1">Von</label>
<input
type="date"
value={item.desiredDateRange?.start || ''}
value={rangeStart}
onChange={(e) => handleDateRangeChange(index, 'start', e.target.value)}
className="border rounded p-1 w-full"
disabled={item.desiredWeekday || item.desiredDate}
disabled={Boolean(item.desiredWeekday)}
/>
</div>
<div>
<label className="block text-xs text-gray-500 mb-1">Bis</label>
<span className="text-xs text-gray-500">bis</span>
<input
type="date"
value={item.desiredDateRange?.end || ''}
value={rangeEnd}
onChange={(e) => handleDateRangeChange(index, 'end', e.target.value)}
className="border rounded p-1 w-full"
disabled={item.desiredWeekday || item.desiredDate}
min={item.desiredDateRange?.start || undefined}
disabled={Boolean(item.desiredWeekday)}
min={rangeStart || undefined}
/>
</div>
<p className="text-xs text-gray-500 mt-1">Ein einzelner Tag: Start = Ende.</p>
</div>
</td>
</tr>