Please add or select a vehicle.
`;
}
}
function renderLogTable() {
logTableBody.innerHTML = '';
const vehicle = vehicles.find(v => v.id == selectedVehicleId);
if (!vehicle || vehicle.logs.length === 0) {
logTableBody.innerHTML = `
| No maintenance logs found for this vehicle. |
`;
return;
}
// Sort logs by date, most recent first
const sortedLogs = [...vehicle.logs].sort((a,b) => new Date(b.date) - new Date(a.date));
sortedLogs.forEach(log => {
const row = document.createElement('tr');
row.innerHTML = `
${log.date} |
${log.service} |
${log.mileage.toLocaleString()} |
$${log.cost.toFixed(2)} |
${log.notes} |
|
`;
logTableBody.appendChild(row);
});
}
function updateLogFormState() {
if (vehicles.length === 0) {
noVehicleWarning.classList.remove('hidden');
logFormFields.classList.add('hidden');
} else {
noVehicleWarning.classList.add('hidden');
logFormFields.classList.remove('hidden');
}
}
// --- EVENT HANDLERS ---
vehicleSelect.addEventListener('change', (e) => {
selectedVehicleId = e.target.value;
renderVehicleInfo();
renderLogTable();
});
addVehicleForm.addEventListener('submit', (e) => {
e.preventDefault();
const make = document.getElementById('vehicle-make').value;
const model = document.getElementById('vehicle-model').value;
const year = document.getElementById('vehicle-year').value;
const newId = vehicles.length > 0 ? Math.max(...vehicles.map(v => v.id)) + 1 : 1;
vehicles.push({ id: newId, make, model, year, logs: [] });
selectedVehicleId = newId;
addVehicleForm.reset();
renderAll();
showTab('dashboard'); // Switch to dashboard to see the new vehicle
});
addLogForm.addEventListener('submit', (e) => {
e.preventDefault();
const vehicleId = document.getElementById('log-vehicle-select').value;
const vehicle = vehicles.find(v => v.id == vehicleId);
if (!vehicle) return;
const newLogId = vehicle.logs.length > 0 ? Math.max(...vehicle.logs.map(l => l.logId)) + 1 : (vehicle.id * 100 + 1);
const log = {
logId: newLogId,
date: document.getElementById('log-date').value,
service: document.getElementById('log-service').value,
mileage: parseInt(document.getElementById('log-mileage').value),
cost: parseFloat(document.getElementById('log-cost').value),
notes: document.getElementById('log-notes').value,
};
vehicle.logs.push(log);
selectedVehicleId = vehicleId;
addLogForm.reset();
document.getElementById('log-vehicle-select').value = vehicleId; // Keep vehicle selected
renderAll();
showTab('dashboard');
});
// --- GLOBAL FUNCTIONS for inline onclick ---
window.deleteLogEntry = (vehicleId, logId) => {
const vehicle = vehicles.find(v => v.id == vehicleId);
if (vehicle) {
vehicle.logs = vehicle.logs.filter(l => l.logId !== logId);
renderLogTable();
}
};
window.showTab = (tabName) => {
currentTab = tabName;
Object.values(tabs).forEach(tab => tab.classList.add('hidden'));
Object.values(tabButtons).forEach(btn => btn.classList.replace('active', 'inactive'));
tabs[tabName].classList.remove('hidden');
tabButtons[tabName].classList.replace('inactive', 'active');
updateNavButtons();
};
window.navigateTabs = (direction) => {
const tabOrder = ['dashboard', 'config'];
const currentIndex = tabOrder.indexOf(currentTab);
let newIndex = currentIndex;
if (direction === 'next' && currentIndex < tabOrder.length - 1) newIndex++;
else if (direction === 'prev' && currentIndex > 0) newIndex--;
showTab(tabOrder[newIndex]);
};
function updateNavButtons() {
navButtons.prev.disabled = (currentTab === 'dashboard');
navButtons.next.disabled = (currentTab === 'config');
}
window.downloadPDF = async () => {
const { jsPDF } = window.jspdf;
const content = document.getElementById('pdf-content');
const vehicle = vehicles.find(v => v.id == selectedVehicleId);
if (!content || !vehicle) {
alert('Please select a vehicle with logs to download.');
return;
}
// Temporarily add a title for the PDF
const pdfTitle = document.createElement('h2');
pdfTitle.className = 'text-xl font-bold mb-4';
pdfTitle.innerText = `Maintenance Log for ${vehicle.year} ${vehicle.make} ${vehicle.model}`;
content.prepend(pdfTitle);
try {
const canvas = await html2canvas(content, { scale: 2, useCORS: true, backgroundColor: '#ffffff' });
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'px',
format: [canvas.width, canvas.height]
});
pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
pdf.save(`${vehicle.year}_${vehicle.make}_${vehicle.model}_Log.pdf`);
} catch (error) {
console.error('Error generating PDF:', error);
} finally {
// Clean up the added title
pdfTitle.remove();
}
};
// --- INITIALIZATION ---
renderAll();
updateNavButtons();
});
