diff --git a/frontend/src/components/pages/Routes.vue b/frontend/src/components/pages/Routes.vue index 5534eb2..53a4ecd 100644 --- a/frontend/src/components/pages/Routes.vue +++ b/frontend/src/components/pages/Routes.vue @@ -7,11 +7,7 @@
- +
@@ -20,18 +16,17 @@

{{ selectedRoute.routeName }}

- {{ selectedRoute.routeId }} - {{ selectedRoute.date }} + {{ selectedRoute.routeId }} - {{ selectedRoute.date }}
- + {{ selectedRoute.status.toUpperCase() }} -
@@ -45,42 +40,56 @@

Route Summary

- +
- mdi-account-hard-hat + mdi-account-hard-hat Technician: {{ selectedRoute.technician }}
- +
mdi-clock-start Start Time: {{ selectedRoute.startTime }}
- +
mdi-car Vehicle: {{ selectedRoute.vehicleId }}
- +
- mdi-map-marker-distance + mdi-map-marker-distance Total Miles: - {{ selectedRoute.totalMileage }} mi + {{ selectedRoute.totalMileage }} mi
- +
mdi-timer Est. Duration: - {{ selectedRoute.estimatedDuration }} + {{ + selectedRoute.estimatedDuration + }}
- +
- mdi-map-marker-multiple + mdi-map-marker-multiple Stops: - {{ selectedRoute.completedStops }}/{{ selectedRoute.totalStops }} + {{ selectedRoute.completedStops }}/{{ + selectedRoute.totalStops + }}
@@ -88,41 +97,52 @@

Route Stops

- +
-
{{ stop.stopId }}
- +
- {{ stop.customer }} - {{ + stop.customer + }} + {{ stop.status }}
- +
- mdi-map-marker + mdi-map-marker {{ stop.address }}
- -
- mdi-wrench + +
+ mdi-wrench {{ stop.serviceType }}
- +
- mdi-clock - {{ stop.estimatedTime }} ({{ stop.duration }} min) + mdi-clock + {{ stop.estimatedTime }} ({{ + stop.duration + }} + min)
@@ -138,8 +158,10 @@
mdi-map

Route Map

-

Interactive map showing route path and stops

- +

+ Interactive map showing route path and stops +

+
@@ -155,19 +177,31 @@ Not Started
- +
-
{{ selectedRoute.totalMileage }}
+
+ {{ selectedRoute.totalMileage }} +
Total Miles
-
{{ selectedRoute.totalStops }}
+
+ {{ selectedRoute.totalStops }} +
Stops
-
{{ Math.round(selectedRoute.totalMileage / selectedRoute.totalStops * 10) / 10 }}
+
+ {{ + Math.round( + (selectedRoute.totalMileage / + selectedRoute.totalStops) * + 10, + ) / 10 + }} +
Avg Miles/Stop
@@ -182,19 +216,10 @@ - + Close - - Optimize Route - + Optimize Route @@ -221,13 +246,13 @@ const columns = [ { label: "Progress", fieldName: "progress", type: "text", sortable: true }, { label: "Total Stops", fieldName: "totalStops", type: "text", sortable: true }, { label: "Est. Duration", fieldName: "estimatedDuration", type: "text", sortable: true }, - { label: "Actions", fieldName: "actions", type: "button", sortable: false } + { label: "Actions", fieldName: "actions", type: "button", sortable: false }, ]; // Methods const viewRouteDetails = (event) => { const routeId = event.data.routeId; - const route = tableData.value.find(r => r.routeId === routeId); + const route = tableData.value.find((r) => r.routeId === routeId); if (route && route.fullData) { selectedRoute.value = route.fullData; routeDialog.value = true; @@ -261,7 +286,7 @@ const getStopStatusColor = (status) => { }; const getStopStatusClass = (status) => { - return `stop-status-${status.replace(' ', '-')}`; + return `stop-status-${status.replace(" ", "-")}`; }; const optimizeRoute = () => { @@ -272,9 +297,9 @@ const optimizeRoute = () => { onMounted(async () => { try { const data = await Api.getRouteData(); - + // Transform data for table display and keep full data reference - tableData.value = data.map(route => ({ + tableData.value = data.map((route) => ({ routeId: route.routeId, routeName: route.routeName, technician: route.technician, @@ -284,9 +309,9 @@ onMounted(async () => { totalStops: route.totalStops, estimatedDuration: route.estimatedDuration, actions: "View Details", - fullData: route // Keep reference to full route data + fullData: route, // Keep reference to full route data })); - + console.log("Loaded routes:", tableData.value); } catch (error) { console.error("Error loading routes:", error); @@ -316,7 +341,7 @@ onMounted(async () => { .routes-table-container { background: white; border-radius: 8px; - box-shadow: 0 2px 8px rgba(0,0,0,0.1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); overflow: hidden; } @@ -379,7 +404,7 @@ onMounted(async () => { } .stop-item:hover { - box-shadow: 0 2px 8px rgba(0,0,0,0.1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .stop-item.stop-status-completed { @@ -465,7 +490,7 @@ onMounted(async () => { background: white; padding: 32px; border-radius: 12px; - box-shadow: 0 4px 16px rgba(0,0,0,0.1); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .map-legend { @@ -529,17 +554,17 @@ onMounted(async () => { flex-direction: column; height: auto; } - + .route-info-panel { border-right: none; border-bottom: 1px solid #e0e0e0; } - + .map-panel { width: 100%; min-height: 300px; } - + .info-grid { grid-template-columns: 1fr; } diff --git a/frontend/src/utils.js b/frontend/src/utils.js index d99089b..613b5e1 100644 --- a/frontend/src/utils.js +++ b/frontend/src/utils.js @@ -1127,6 +1127,7 @@ class DataUtils { }, ], }, +<<<<<<< Updated upstream ]; static dummyWarrantyData = [ @@ -1280,6 +1281,8 @@ class DataUtils { warrantyType: "Parts Only", systemType: "Commercial Irrigation", }, +======= +>>>>>>> Stashed changes ]; }