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

refactoring

Browse Source
This commit is contained in:
Meik
2025-11-10 13:56:22 +01:00
parent 33626c7e45
commit 36e8f0e5bc
4 changed files with 0 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/App.js
View File

@@ -21,7 +21,6 @@ import DirtyNavigationDialog from './components/DirtyNavigationDialog';
import ConfirmationDialog from './components/ConfirmationDialog'; import ConfirmationDialog from './components/ConfirmationDialog';
import StoreSyncOverlay from './components/StoreSyncOverlay'; import StoreSyncOverlay from './components/StoreSyncOverlay';
import RangePickerModal from './components/RangePickerModal'; import RangePickerModal from './components/RangePickerModal';
import PickupConfigEditor from './PickupConfigEditor';
function App() { function App() {
const [credentials, setCredentials] = useState({ email: '', password: '' }); const [credentials, setCredentials] = useState({ email: '', password: '' });
@@ -695,25 +694,6 @@ function App() {
<AdminAccessMessage /> <AdminAccessMessage />
); );
const legacyEditorContent = session?.isAdmin ? (
<PickupConfigEditor
config={config}
loading={loading}
status={status}
error={error}
weekdays={weekdays}
onToggleActive={handleToggleActive}
onToggleProfileCheck={handleToggleProfileCheck}
onToggleOnlyNotify={handleToggleOnlyNotify}
onWeekdayChange={handleWeekdayChange}
onRangePickerRequest={setActiveRangePicker}
onResetConfig={() => fetchConfig()}
onSaveConfig={saveConfig}
/>
) : (
<AdminAccessMessage />
);
return ( return (
<Router> <Router>
<> <>
@@ -722,7 +702,6 @@ function App() {
<NavigationTabs isAdmin={session?.isAdmin} onProtectedNavigate={requestNavigation} /> <NavigationTabs isAdmin={session?.isAdmin} onProtectedNavigate={requestNavigation} />
<Routes> <Routes>
<Route path="/" element={dashboardContent} /> <Route path="/" element={dashboardContent} />
<Route path="/legacy" element={legacyEditorContent} />
<Route path="/admin" element={adminPageContent} /> <Route path="/admin" element={adminPageContent} />
<Route path="*" element={<Navigate to="/" replace />} /> <Route path="*" element={<Navigate to="/" replace />} />
</Routes> </Routes>

116
src/PickupConfigEditor.js
View File

@@ -1,116 +0,0 @@
import PickupConfigTable from './components/PickupConfigTable';
const PickupConfigEditor = ({
config,
loading,
status,
error,
weekdays,
onToggleActive,
onToggleProfileCheck,
onToggleOnlyNotify,
onWeekdayChange,
onRangePickerRequest,
onResetConfig,
onSaveConfig
}) => {
const resolvedWeekdays =
weekdays || ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'];
const resolveEntryId = (entryId, index) => {
if (entryId) {
return entryId;
}
if (typeof index === 'number' && config[index]?.id) {
return config[index].id;
}
return null;
};
const handleToggleActive = (entryId, index) => {
const resolvedId = resolveEntryId(entryId, index);
if (resolvedId && onToggleActive) {
onToggleActive(resolvedId);
}
};
const handleToggleProfileCheck = (entryId, index) => {
const resolvedId = resolveEntryId(entryId, index);
if (resolvedId && onToggleProfileCheck) {
onToggleProfileCheck(resolvedId);
}
};
const handleToggleOnlyNotify = (entryId, index) => {
const resolvedId = resolveEntryId(entryId, index);
if (resolvedId && onToggleOnlyNotify) {
onToggleOnlyNotify(resolvedId);
}
};
const handleWeekdayChange = (entryId, value, index) => {
const resolvedId = resolveEntryId(entryId, index);
if (resolvedId && onWeekdayChange) {
onWeekdayChange(resolvedId, value);
}
};
const handleRangePickerRequest = (entryId, index) => {
const resolvedId = resolveEntryId(entryId, index);
if (resolvedId && onRangePickerRequest) {
onRangePickerRequest(resolvedId);
}
};
if (loading && !config.length) {
return <div className="text-center p-8">Lade Konfiguration...</div>;
}
return (
<div className="p-4 max-w-4xl mx-auto">
<h1 className="text-2xl font-bold mb-6">Tabellarischer Editor</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={resolvedWeekdays}
onToggleActive={handleToggleActive}
onToggleProfileCheck={handleToggleProfileCheck}
onToggleOnlyNotify={handleToggleOnlyNotify}
onWeekdayChange={handleWeekdayChange}
onRangePickerRequest={handleRangePickerRequest}
/>
<div className="mt-6 flex justify-between gap-3">
<button
type="button"
onClick={onResetConfig}
className="flex-1 bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded"
>
Zurücksetzen
</button>
<button
type="button"
onClick={onSaveConfig}
className="flex-1 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>
</div>
);
};
export default PickupConfigEditor;

1
src/components/NavigationTabs.js
View File

@@ -10,7 +10,6 @@ const NavigationTabs = ({ isAdmin, onProtectedNavigate }) => {
const tabs = [ const tabs = [
{ to: '/', label: 'Konfiguration' }, { to: '/', label: 'Konfiguration' },
{ to: '/legacy', label: 'Tabelleneditor' },
{ to: '/admin', label: 'Admin' } { to: '/admin', label: 'Admin' }
]; ];

108
src/components/PickupConfigTable.js
View File

@@ -1,108 +0,0 @@
import { formatRangeLabel } from '../utils/dateUtils';
const PickupConfigTable = ({
config,
weekdays,
onToggleActive,
onToggleProfileCheck,
onToggleOnlyNotify,
onWeekdayChange,
onRangePickerRequest
}) => {
return (
<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">Datum / Zeitraum</th>
</tr>
</thead>
<tbody>
{config.map((item, index) => {
const itemId = item?.id;
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);
const rowKey = item.id ? `${item.id}-${index}` : `row-${index}`;
return (
<tr key={rowKey} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
<td className="px-4 py-2 text-center">
<input
type="checkbox"
checked={item.active}
onChange={() => onToggleActive(itemId, index)}
className="h-5 w-5"
/>
</td>
<td className="px-4 py-2">
<span className="font-medium">{item.label}</span>
</td>
<td className="px-4 py-2 text-center">
<input
type="checkbox"
checked={item.checkProfileId}
onChange={() => onToggleProfileCheck(itemId, index)}
className="h-5 w-5"
/>
</td>
<td className="px-4 py-2 text-center">
<input
type="checkbox"
checked={item.onlyNotify}
onChange={() => onToggleOnlyNotify(itemId, index)}
className="h-5 w-5"
/>
</td>
<td className="px-4 py-2">
<select
value={item.desiredWeekday || ''}
onChange={(e) => onWeekdayChange(itemId, e.target.value, index)}
className="border rounded p-1 w-full"
disabled={hasDateRange}
>
<option value="">Kein Wochentag</option>
{weekdays.map((day) => (
<option key={day} value={day}>
{day}
</option>
))}
</select>
</td>
<td className="px-4 py-2">
<button
type="button"
onClick={() => {
if (item.desiredWeekday) {
return;
}
onRangePickerRequest(itemId, index);
}}
disabled={Boolean(item.desiredWeekday)}
className={`w-full border rounded p-2 text-left transition focus:outline-none focus:ring-2 focus:ring-blue-500 ${
item.desiredWeekday ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white hover:border-blue-400'
}`}
>
<span className="block text-sm text-gray-700">{formatRangeLabel(rangeStart, rangeEnd)}</span>
<span className="block text-xs text-gray-500">Klicke zum Auswählen</span>
</button>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
};
export default PickupConfigTable;