added vehicle creation functionality
This commit is contained in:
@@ -51,56 +51,6 @@
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
/* New vehicle form */
|
||||
.vehicle-new-form {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
background: #f0f0ff;
|
||||
}
|
||||
|
||||
.vehicle-new-form input {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.vehicle-new-form input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.vehicle-new-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.vehicle-new-actions button {
|
||||
flex: 1;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ccc;
|
||||
background: white;
|
||||
color: #333;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.vehicle-new-actions button:first-child {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.vehicle-new-actions button:first-child:hover {
|
||||
background: #5568d3;
|
||||
}
|
||||
|
||||
/* Vehicle list */
|
||||
.vehicle-list {
|
||||
flex: 1;
|
||||
@@ -367,6 +317,41 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Vehicle form sections */
|
||||
.vehicle-form-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.vehicle-form-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.vehicle-form-cancel {
|
||||
padding: 8px 20px;
|
||||
background: white;
|
||||
color: #666;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.vehicle-form-cancel:hover:not(:disabled) {
|
||||
background: #f5f5f5;
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.vehicle-form-cancel:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.main {
|
||||
|
||||
@@ -13,8 +13,9 @@ export default function Main() {
|
||||
|
||||
const [selectedVehicleId, setSelectedVehicleId] = useState(null);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [newVehicleNumber, setNewVehicleNumber] = useState('');
|
||||
const [showNewForm, setShowNewForm] = useState(false);
|
||||
const [newForm, setNewForm] = useState({ vehicle_number: '', trailer1_number: '', trailer2_number: '', driver_pid: '' });
|
||||
const [newExtraData, setNewExtraData] = useState({});
|
||||
const [error, setError] = useState('');
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
@@ -64,18 +65,48 @@ export default function Main() {
|
||||
}
|
||||
}, [selectedVehicle]);
|
||||
|
||||
// Open new vehicle form
|
||||
const handleNewVehicle = () => {
|
||||
setSelectedVehicleId(null);
|
||||
setShowNewForm(true);
|
||||
setNewForm({ vehicle_number: '', trailer1_number: '', trailer2_number: '', driver_pid: '' });
|
||||
setNewExtraData({});
|
||||
setError('');
|
||||
};
|
||||
|
||||
// Cancel new vehicle form
|
||||
const handleCancelNew = () => {
|
||||
setShowNewForm(false);
|
||||
setNewForm({ vehicle_number: '', trailer1_number: '', trailer2_number: '', driver_pid: '' });
|
||||
setNewExtraData({});
|
||||
setError('');
|
||||
};
|
||||
|
||||
// Create new vehicle
|
||||
const handleCreateVehicle = async () => {
|
||||
if (!newVehicleNumber.trim()) return;
|
||||
if (!newForm.vehicle_number.trim()) return;
|
||||
setIsSaving(true);
|
||||
setError('');
|
||||
try {
|
||||
const res = await api.post('/api/vehicles/', { vehicle_number: newVehicleNumber.trim() });
|
||||
const payload = {
|
||||
vehicle_number: newForm.vehicle_number.trim(),
|
||||
trailer1_number: newForm.trailer1_number.trim() || null,
|
||||
trailer2_number: newForm.trailer2_number.trim() || null,
|
||||
driver_pid: newForm.driver_pid.trim() || null,
|
||||
};
|
||||
// Include extra data if any values set
|
||||
const hasExtra = Object.values(newExtraData).some(v => v !== undefined && v !== null && v !== '');
|
||||
if (hasExtra) {
|
||||
payload.extra = { data: newExtraData };
|
||||
}
|
||||
const res = await api.post('/api/vehicles/', payload);
|
||||
setSelectedVehicleId(res.data.id);
|
||||
setNewVehicleNumber('');
|
||||
setShowNewForm(false);
|
||||
setNewForm({ vehicle_number: '', trailer1_number: '', trailer2_number: '', driver_pid: '' });
|
||||
setNewExtraData({});
|
||||
} catch (err) {
|
||||
const msg = err.response?.data?.vehicle_number?.[0] || err.response?.data?.detail || 'Failed to create vehicle';
|
||||
const data = err.response?.data;
|
||||
const msg = data?.vehicle_number?.[0] || data?.detail || (typeof data === 'string' ? data : JSON.stringify(data)) || 'Failed to create vehicle';
|
||||
setError(msg);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
@@ -142,7 +173,7 @@ export default function Main() {
|
||||
<div className="vehicle-list-header">
|
||||
<button
|
||||
className="vehicle-add-btn"
|
||||
onClick={() => { setShowNewForm(true); setError(''); }}
|
||||
onClick={handleNewVehicle}
|
||||
>
|
||||
+ New Vehicle
|
||||
</button>
|
||||
@@ -155,34 +186,12 @@ export default function Main() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{showNewForm && (
|
||||
<div className="vehicle-new-form">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Vehicle number"
|
||||
value={newVehicleNumber}
|
||||
onChange={e => setNewVehicleNumber(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleCreateVehicle()}
|
||||
disabled={isSaving}
|
||||
autoFocus
|
||||
/>
|
||||
<div className="vehicle-new-actions">
|
||||
<button onClick={handleCreateVehicle} disabled={isSaving}>
|
||||
{isSaving ? '...' : 'Create'}
|
||||
</button>
|
||||
<button onClick={() => { setShowNewForm(false); setNewVehicleNumber(''); setError(''); }}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="vehicle-list">
|
||||
{filteredVehicles.map(v => (
|
||||
<div
|
||||
key={v.id}
|
||||
className={`vehicle-list-item ${selectedVehicleId === v.id ? 'vehicle-list-item--active' : ''}`}
|
||||
onClick={() => { setSelectedVehicleId(v.id); setError(''); }}
|
||||
onClick={() => { setSelectedVehicleId(v.id); setShowNewForm(false); setError(''); }}
|
||||
>
|
||||
<span className="vehicle-list-number">{v.vehicle_number}</span>
|
||||
{v.tare != null && (
|
||||
@@ -196,9 +205,95 @@ export default function Main() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right panel - Vehicle detail */}
|
||||
{/* Right panel - Vehicle detail or New form */}
|
||||
<div className="main-right">
|
||||
{!selectedVehicle ? (
|
||||
{showNewForm ? (
|
||||
<div className="vehicle-detail">
|
||||
{error && <div className="vehicle-error">{error}</div>}
|
||||
|
||||
<h2 className="vehicle-detail-title">New Vehicle</h2>
|
||||
|
||||
<div className="vehicle-form-section">
|
||||
<div className="extra-fields">
|
||||
<div className="extra-field">
|
||||
<label>Vehicle Number *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newForm.vehicle_number}
|
||||
onChange={e => setNewForm(prev => ({ ...prev, vehicle_number: e.target.value }))}
|
||||
disabled={isSaving}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="extra-field">
|
||||
<label>Trailer 1</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newForm.trailer1_number}
|
||||
onChange={e => setNewForm(prev => ({ ...prev, trailer1_number: e.target.value }))}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
</div>
|
||||
<div className="extra-field">
|
||||
<label>Trailer 2</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newForm.trailer2_number}
|
||||
onChange={e => setNewForm(prev => ({ ...prev, trailer2_number: e.target.value }))}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
</div>
|
||||
<div className="extra-field">
|
||||
<label>Driver PID</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newForm.driver_pid}
|
||||
onChange={e => setNewForm(prev => ({ ...prev, driver_pid: e.target.value }))}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{vehicleNomenclatures.length > 0 && (
|
||||
<div className="extra-section">
|
||||
<h3>Additional Data</h3>
|
||||
<div className="extra-fields">
|
||||
{vehicleNomenclatures.map(nom => (
|
||||
<div key={nom.code} className="extra-field">
|
||||
<NomenclatureDropdown
|
||||
nomenclatureCode={nom.code}
|
||||
value={newExtraData[nom.code]}
|
||||
onChange={val => setNewExtraData(prev => ({
|
||||
...prev,
|
||||
[nom.code]: val,
|
||||
}))}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="vehicle-form-actions">
|
||||
<button
|
||||
className="vehicle-form-cancel"
|
||||
onClick={handleCancelNew}
|
||||
disabled={isSaving}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="extra-save-btn"
|
||||
onClick={handleCreateVehicle}
|
||||
disabled={isSaving || !newForm.vehicle_number.trim()}
|
||||
>
|
||||
{isSaving ? 'Creating...' : 'Create Vehicle'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : !selectedVehicle ? (
|
||||
<div className="main-placeholder">
|
||||
Select a vehicle or create a new one
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user