Initial commit - Current state of vip-coordinator
This commit is contained in:
188
frontend/src/components/EditDriverForm.tsx
Normal file
188
frontend/src/components/EditDriverForm.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface Driver {
|
||||
id: string;
|
||||
name: string;
|
||||
phone: string;
|
||||
currentLocation: { lat: number; lng: number };
|
||||
assignedVipIds: string[];
|
||||
vehicleCapacity?: number;
|
||||
}
|
||||
|
||||
interface EditDriverFormProps {
|
||||
driver: Driver;
|
||||
onSubmit: (driverData: any) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const EditDriverForm: React.FC<EditDriverFormProps> = ({ driver, onSubmit, onCancel }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
name: driver.name,
|
||||
phone: driver.phone,
|
||||
vehicleCapacity: driver.vehicleCapacity || 4,
|
||||
currentLocation: {
|
||||
lat: driver.currentLocation.lat,
|
||||
lng: driver.currentLocation.lng
|
||||
}
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onSubmit({
|
||||
...formData,
|
||||
id: driver.id
|
||||
});
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||||
const { name, value, type } = e.target;
|
||||
|
||||
if (name === 'lat' || name === 'lng') {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
currentLocation: {
|
||||
...prev.currentLocation,
|
||||
[name]: parseFloat(value) || 0
|
||||
}
|
||||
}));
|
||||
} else if (name === 'vehicleCapacity') {
|
||||
setFormData(prev => ({ ...prev, [name]: parseInt(value) || 0 }));
|
||||
} else {
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-content">
|
||||
{/* Modal Header */}
|
||||
<div className="modal-header">
|
||||
<h2 className="text-2xl font-bold text-slate-800">Edit Driver</h2>
|
||||
<p className="text-slate-600 mt-2">Update driver information for {driver.name}</p>
|
||||
</div>
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className="modal-body">
|
||||
<form onSubmit={handleSubmit} className="space-y-8">
|
||||
{/* Basic Information Section */}
|
||||
<div className="form-section">
|
||||
<div className="form-section-header">
|
||||
<h3 className="form-section-title">Basic Information</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="form-group">
|
||||
<label htmlFor="name" className="form-label">Driver Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
className="form-input"
|
||||
placeholder="Enter driver's full name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="phone" className="form-label">Phone Number *</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
className="form-input"
|
||||
placeholder="Enter phone number"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="vehicleCapacity" className="form-label">Vehicle Capacity *</label>
|
||||
<select
|
||||
id="vehicleCapacity"
|
||||
name="vehicleCapacity"
|
||||
value={formData.vehicleCapacity}
|
||||
onChange={handleChange}
|
||||
className="form-input"
|
||||
required
|
||||
>
|
||||
<option value={2}>2 passengers (Sedan/Coupe)</option>
|
||||
<option value={4}>4 passengers (Standard Car)</option>
|
||||
<option value={6}>6 passengers (SUV/Van)</option>
|
||||
<option value={8}>8 passengers (Large Van)</option>
|
||||
<option value={12}>12 passengers (Mini Bus)</option>
|
||||
</select>
|
||||
<p className="text-sm text-slate-600 mt-1">
|
||||
🚗 Select the maximum number of passengers this vehicle can accommodate
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Location Section */}
|
||||
<div className="form-section">
|
||||
<div className="form-section-header">
|
||||
<h3 className="form-section-title">Current Location</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="form-group">
|
||||
<label htmlFor="lat" className="form-label">Latitude *</label>
|
||||
<input
|
||||
type="number"
|
||||
id="lat"
|
||||
name="lat"
|
||||
value={formData.currentLocation.lat}
|
||||
onChange={handleChange}
|
||||
className="form-input"
|
||||
placeholder="Enter latitude"
|
||||
step="any"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="lng" className="form-label">Longitude *</label>
|
||||
<input
|
||||
type="number"
|
||||
id="lng"
|
||||
name="lng"
|
||||
value={formData.currentLocation.lng}
|
||||
onChange={handleChange}
|
||||
className="form-input"
|
||||
placeholder="Enter longitude"
|
||||
step="any"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<p className="text-sm text-blue-700">
|
||||
<strong>Current coordinates:</strong> {formData.currentLocation.lat.toFixed(6)}, {formData.currentLocation.lng.toFixed(6)}
|
||||
</p>
|
||||
<p className="text-xs text-blue-600 mt-1">
|
||||
You can use GPS coordinates or get them from a mapping service
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="button" className="btn btn-secondary" onClick={onCancel}>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Update Driver
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditDriverForm;
|
||||
Reference in New Issue
Block a user