h/car
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add car reordering and AM/PM period for reservations

Browse Source 
Agent-Logs-Url: https://github.com/pdf114514/CarReservation/sessions/c0a4b7dc-228e-4e7d-a985-61b9a17de159

Co-authored-by: pdf114514 <57948770+pdf114514@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-04-06 07:12:49 +00:00
committed by GitHub
parent 2e9e100178
commit 675e5f6fe8
8 changed files with 176 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/components/ReservationModal.jsx
View File

@@ -2,12 +2,20 @@ import { useState, useEffect } from 'react';
import { format } from 'date-fns';
import styles from './ReservationModal.module.css';
const PERIOD_OPTIONS = [
{ value: '', label: '指定なし' },
{ value: '午前', label: '午前' },
{ value: '午後', label: '午後' },
];
export default function ReservationModal({ cars, reservation, onSave, onDelete, onClose }) {
const isEdit = !!reservation?.id;
const [carId, setCarId] = useState('');
const [startDate, setStartDate] = useState('');
const [startPeriod, setStartPeriod] = useState('');
const [endDate, setEndDate] = useState('');
const [endPeriod, setEndPeriod] = useState('');
const [customerName, setCustomerName] = useState('');
const [notes, setNotes] = useState('');
const [submitting, setSubmitting] = useState(false);
@@ -16,7 +24,9 @@ export default function ReservationModal({ cars, reservation, onSave, onDelete,
if (reservation) {
setCarId(String(reservation.car_id || (cars[0]?.id ?? '')));
setStartDate(reservation.start_date || format(new Date(), 'yyyy-MM-dd'));
setStartPeriod(reservation.start_period || '');
setEndDate(reservation.end_date || format(new Date(), 'yyyy-MM-dd'));
setEndPeriod(reservation.end_period || '');
setCustomerName(reservation.customer_name || '');
setNotes(reservation.notes || '');
}
@@ -34,7 +44,9 @@ export default function ReservationModal({ cars, reservation, onSave, onDelete,
await onSave({
car_id: Number(carId),
start_date: startDate,
start_period: startPeriod,
end_date: endDate,
end_period: endPeriod,
customer_name: customerName,
notes,
});
@@ -90,6 +102,21 @@ export default function ReservationModal({ cars, reservation, onSave, onDelete,
required
/>
</div>
<div className={styles.field}>
<label className={styles.label}>開始時間帯</label>
<select
className={styles.select}
value={startPeriod}
onChange={(e) => setStartPeriod(e.target.value)}
>
{PERIOD_OPTIONS.map((o) => (
<option key={o.value} value={o.value}>{o.label}</option>
))}
</select>
</div>
</div>
<div className={styles.fieldRow}>
<div className={styles.field}>
<label className={styles.label}>終了日 <span className={styles.required}>*</span></label>
<input
@@ -101,6 +128,18 @@ export default function ReservationModal({ cars, reservation, onSave, onDelete,
required
/>
</div>
<div className={styles.field}>
<label className={styles.label}>終了時間帯</label>
<select
className={styles.select}
value={endPeriod}
onChange={(e) => setEndPeriod(e.target.value)}
>
{PERIOD_OPTIONS.map((o) => (
<option key={o.value} value={o.value}>{o.label}</option>
))}
</select>
</div>
</div>
<div className={styles.field}>