126 lines
5 KiB
HTML
126 lines
5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Vehicles - Masina-Dock</title>
|
||
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<div class="logo">
|
||
|
|
<img src="/static/images/logo.svg" alt="Masina-Dock">
|
||
|
|
<h1>Masina-Dock</h1>
|
||
|
|
</div>
|
||
|
|
<nav>
|
||
|
|
<a href="/dashboard">Dashboard</a>
|
||
|
|
<button class="theme-toggle" onclick="toggleTheme()">Toggle Theme</button>
|
||
|
|
<button class="btn btn-danger" onclick="logout()">Logout</button>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<h2>All Vehicles</h2>
|
||
|
|
<button class="btn btn-success" onclick="showModal('add-vehicle-modal')">+ Add Vehicle</button>
|
||
|
|
|
||
|
|
<div id="vehicles-container" class="vehicle-grid"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="add-vehicle-modal" class="modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<h2>Add New Vehicle</h2>
|
||
|
|
<form id="add-vehicle-form" enctype="multipart/form-data">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="photo">Vehicle Photo</label>
|
||
|
|
<input type="file" id="photo" name="photo" accept="image/*">
|
||
|
|
<div id="photo-preview" style="margin-top: 10px;"></div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="year">Year</label>
|
||
|
|
<input type="number" id="year" name="year" required min="1900" max="2099">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="make">Make</label>
|
||
|
|
<input type="text" id="make" name="make" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="model">Model</label>
|
||
|
|
<input type="text" id="model" name="model" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="vin">VIN (Optional)</label>
|
||
|
|
<input type="text" id="vin" name="vin" maxlength="17">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="license_plate">License Plate (Optional)</label>
|
||
|
|
<input type="text" id="license_plate" name="license_plate">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="odometer">Current Odometer</label>
|
||
|
|
<input type="number" id="odometer" name="odometer" required min="0">
|
||
|
|
</div>
|
||
|
|
<div style="display: flex; gap: 10px; margin-top: 20px;">
|
||
|
|
<button type="submit" class="btn btn-success">Add Vehicle</button>
|
||
|
|
<button type="button" class="btn" onclick="closeModal('add-vehicle-modal')">Cancel</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="/static/js/app.js"></script>
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
loadVehicles();
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('photo').addEventListener('change', (e) => {
|
||
|
|
const file = e.target.files[0];
|
||
|
|
if (file) {
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.onload = (e) => {
|
||
|
|
document.getElementById('photo-preview').innerHTML =
|
||
|
|
`<img src="${e.target.result}" style="max-width: 200px; border-radius: 8px;">`;
|
||
|
|
};
|
||
|
|
reader.readAsDataURL(file);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('add-vehicle-form').addEventListener('submit', async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
let photoUrl = null;
|
||
|
|
const photoFile = document.getElementById('photo').files[0];
|
||
|
|
|
||
|
|
if (photoFile) {
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append('photo', photoFile);
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch('/api/upload/photo', {
|
||
|
|
method: 'POST',
|
||
|
|
credentials: 'include',
|
||
|
|
body: formData
|
||
|
|
});
|
||
|
|
const data = await response.json();
|
||
|
|
photoUrl = data.photo_url;
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Photo upload failed:', error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const vehicleData = {
|
||
|
|
year: parseInt(document.getElementById('year').value),
|
||
|
|
make: document.getElementById('make').value,
|
||
|
|
model: document.getElementById('model').value,
|
||
|
|
vin: document.getElementById('vin').value || null,
|
||
|
|
license_plate: document.getElementById('license_plate').value || null,
|
||
|
|
odometer: parseInt(document.getElementById('odometer').value),
|
||
|
|
photo: photoUrl
|
||
|
|
};
|
||
|
|
|
||
|
|
await addVehicle(vehicleData);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|