Tesla Fleet Management

Tesla Fleet Management System

Fleet Summary

Total Vehicles

0

Vehicles Available

0

Vehicles Charging

0

Vehicles In Use

0

Vehicles Maintenance

0

Fleet Map

Map Placeholder - Future Map Integration

Vehicle List

Vehicle ID	Status	Battery Level	Location

body { font-family: sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } header { background-color: #222; color: #fff; padding: 1em 0; text-align: center; } main { padding: 20px; } section { margin-bottom: 20px; background-color: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h2 { color: #222; border-bottom: 2px solid #eee; padding-bottom: 0.5em; } #summary-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; } .metric-card { background-color: #eee; padding: 15px; border-radius: 8px; text-align: center; } .metric-card h3 { margin-top: 0; color: #555; font-size: 1.2em; } .metric-card p { font-size: 1.5em; font-weight: bold; color: #333; margin: 0; } #map-container { height: 300px; border: 1px solid #ccc; border-radius: 5px; display: flex; justify-content: center; align-items: center; color: #777; font-style: italic; } #vehicles-table { width: 100%; border-collapse: collapse; margin-top: 10px; } #vehicles-table th, #vehicles-table td { border: 1px solid #ddd; padding: 8px; text-align: left; } #vehicles-table th { background-color: #f0f0f0; } footer { text-align: center; padding: 1em 0; background-color: #222; color: #fff; position: fixed; bottom: 0; width: 100%; } import fleetData from './fleet-data.js'; document.addEventListener('DOMContentLoaded', () => { const totalVehiclesSpan = document.getElementById('total-vehicles'); const availableVehiclesSpan = document.getElementById('vehicles-available'); const chargingVehiclesSpan = document.getElementById('vehicles-charging'); const inUseVehiclesSpan = document.getElementById('vehicles-in-use'); const maintenanceVehiclesSpan = document.getElementById('vehicles-maintenance'); const vehiclesTableBody = document.getElementById('vehicles-table-body'); let availableCount = 0; let chargingCount = 0; let inUseCount = 0; let maintenanceCount = 0; fleetData.forEach(vehicle => { switch (vehicle.status) { case 'Available': availableCount++; break; case 'Charging': chargingCount++; break; case 'In Use': inUseCount++; break; case 'Maintenance': maintenanceCount++; break; } const row = vehiclesTableBody.insertRow(); const idCell = row.insertCell(); const statusCell = row.insertCell(); const batteryCell = row.insertCell(); const locationCell = row.insertCell(); idCell.textContent = vehicle.id; statusCell.textContent = vehicle.status; batteryCell.textContent = `${vehicle.batteryLevel}%`; locationCell.textContent = `Lat: ${vehicle.location.lat}, Lon: ${vehicle.location.lon}`; // Display location }); totalVehiclesSpan.textContent = fleetData.length; availableVehiclesSpan.textContent = availableCount; chargingVehiclesSpan.textContent = chargingCount; inUseVehiclesSpan.textContent = inUseCount; maintenanceVehiclesSpan.textContent = maintenanceCount; }); const fleetData = [ { id: 'tesla-1', status: 'Available', batteryLevel: 85, location: { lat: 34.0522, lon: -118.2437 } }, // Los Angeles { id: 'tesla-2', status: 'In Use', batteryLevel: 40, location: { lat: 37.7749, lon: -122.4194 } }, // San Francisco { id: 'tesla-3', status: 'Charging', batteryLevel: 60, location: { lat: 40.7128, lon: -74.0060 } }, // New York City { id: 'tesla-4', status: 'Maintenance', batteryLevel: 95, location: { lat: 51.5074, lon: 0.1278 } }, // London { id: 'tesla-5', status: 'Available', batteryLevel: 70, location: { lat: 48.8566, lon: 2.3522 } }, // Paris { id: 'tesla-6', status: 'In Use', batteryLevel: 25, location: { lat: 35.6895, lon: 139.6917 } }, // Tokyo { id: 'tesla-7', status: 'Charging', batteryLevel: 55, location: { lat: -33.8688, lon: 151.2093 } }, // Sydney { id: 'tesla-8', status: 'Available', batteryLevel: 90, location: { lat: 41.3851, lon: 2.1734 } }, // Barcelona { id: 'tesla-9', status: 'Maintenance', batteryLevel: 30, location: { lat: 52.5200, lon: 13.4050 } }, // Berlin { id: 'tesla-10', status: 'In Use', batteryLevel: 15, location: { lat: 25.2048, lon: 55.2708 } } // Dubai ]; export default fleetData;