mergepaths
This commit is contained in:
parent
2828c0f9c8
commit
0ce7addff7
@ -7,11 +7,7 @@
|
||||
|
||||
<!-- Routes Data Table -->
|
||||
<div class="routes-table-container">
|
||||
<DataTable
|
||||
:data="tableData"
|
||||
:columns="columns"
|
||||
@row-click="viewRouteDetails"
|
||||
/>
|
||||
<DataTable :data="tableData" :columns="columns" @row-click="viewRouteDetails" />
|
||||
</div>
|
||||
|
||||
<!-- Route Details Modal -->
|
||||
@ -20,13 +16,12 @@
|
||||
<v-card-title class="d-flex justify-space-between align-center pa-4">
|
||||
<div>
|
||||
<h3>{{ selectedRoute.routeName }}</h3>
|
||||
<span class="text-subtitle-1 text-medium-emphasis">{{ selectedRoute.routeId }} - {{ selectedRoute.date }}</span>
|
||||
<span class="text-subtitle-1 text-medium-emphasis"
|
||||
>{{ selectedRoute.routeId }} - {{ selectedRoute.date }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-chip
|
||||
:color="getStatusColor(selectedRoute.status)"
|
||||
size="small"
|
||||
>
|
||||
<v-chip :color="getStatusColor(selectedRoute.status)" size="small">
|
||||
{{ selectedRoute.status.toUpperCase() }}
|
||||
</v-chip>
|
||||
<v-btn
|
||||
@ -48,7 +43,9 @@
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<v-icon class="mr-2" size="small">mdi-account-hard-hat</v-icon>
|
||||
<v-icon class="mr-2" size="small"
|
||||
>mdi-account-hard-hat</v-icon
|
||||
>
|
||||
<span class="label">Technician:</span>
|
||||
<span class="value">{{ selectedRoute.technician }}</span>
|
||||
</div>
|
||||
@ -66,21 +63,33 @@
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<v-icon class="mr-2" size="small">mdi-map-marker-distance</v-icon>
|
||||
<v-icon class="mr-2" size="small"
|
||||
>mdi-map-marker-distance</v-icon
|
||||
>
|
||||
<span class="label">Total Miles:</span>
|
||||
<span class="value">{{ selectedRoute.totalMileage }} mi</span>
|
||||
<span class="value"
|
||||
>{{ selectedRoute.totalMileage }} mi</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<v-icon class="mr-2" size="small">mdi-timer</v-icon>
|
||||
<span class="label">Est. Duration:</span>
|
||||
<span class="value">{{ selectedRoute.estimatedDuration }}</span>
|
||||
<span class="value">{{
|
||||
selectedRoute.estimatedDuration
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<v-icon class="mr-2" size="small">mdi-map-marker-multiple</v-icon>
|
||||
<v-icon class="mr-2" size="small"
|
||||
>mdi-map-marker-multiple</v-icon
|
||||
>
|
||||
<span class="label">Stops:</span>
|
||||
<span class="value">{{ selectedRoute.completedStops }}/{{ selectedRoute.totalStops }}</span>
|
||||
<span class="value"
|
||||
>{{ selectedRoute.completedStops }}/{{
|
||||
selectedRoute.totalStops
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -100,7 +109,9 @@
|
||||
|
||||
<div class="stop-content">
|
||||
<div class="stop-header">
|
||||
<span class="customer-name">{{ stop.customer }}</span>
|
||||
<span class="customer-name">{{
|
||||
stop.customer
|
||||
}}</span>
|
||||
<v-chip
|
||||
:color="getStopStatusColor(stop.status)"
|
||||
size="x-small"
|
||||
@ -111,18 +122,27 @@
|
||||
|
||||
<div class="stop-details">
|
||||
<div class="stop-address">
|
||||
<v-icon size="x-small" class="mr-1">mdi-map-marker</v-icon>
|
||||
<v-icon size="x-small" class="mr-1"
|
||||
>mdi-map-marker</v-icon
|
||||
>
|
||||
{{ stop.address }}
|
||||
</div>
|
||||
|
||||
<div class="stop-service">
|
||||
<v-icon size="x-small" class="mr-1">mdi-wrench</v-icon>
|
||||
<v-icon size="x-small" class="mr-1"
|
||||
>mdi-wrench</v-icon
|
||||
>
|
||||
{{ stop.serviceType }}
|
||||
</div>
|
||||
|
||||
<div class="stop-time">
|
||||
<v-icon size="x-small" class="mr-1">mdi-clock</v-icon>
|
||||
{{ stop.estimatedTime }} ({{ stop.duration }} min)
|
||||
<v-icon size="x-small" class="mr-1"
|
||||
>mdi-clock</v-icon
|
||||
>
|
||||
{{ stop.estimatedTime }} ({{
|
||||
stop.duration
|
||||
}}
|
||||
min)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -138,7 +158,9 @@
|
||||
<div class="map-content">
|
||||
<v-icon size="64" color="primary">mdi-map</v-icon>
|
||||
<h4 class="mt-3 mb-2">Route Map</h4>
|
||||
<p class="text-body-2 text-center mb-4">Interactive map showing route path and stops</p>
|
||||
<p class="text-body-2 text-center mb-4">
|
||||
Interactive map showing route path and stops
|
||||
</p>
|
||||
|
||||
<!-- Mock Map Legend -->
|
||||
<div class="map-legend">
|
||||
@ -159,15 +181,27 @@
|
||||
<!-- Mock Route Stats -->
|
||||
<div class="route-stats mt-4">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ selectedRoute.totalMileage }}</div>
|
||||
<div class="stat-value">
|
||||
{{ selectedRoute.totalMileage }}
|
||||
</div>
|
||||
<div class="stat-label">Total Miles</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ selectedRoute.totalStops }}</div>
|
||||
<div class="stat-value">
|
||||
{{ selectedRoute.totalStops }}
|
||||
</div>
|
||||
<div class="stat-label">Stops</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ Math.round(selectedRoute.totalMileage / selectedRoute.totalStops * 10) / 10 }}</div>
|
||||
<div class="stat-value">
|
||||
{{
|
||||
Math.round(
|
||||
(selectedRoute.totalMileage /
|
||||
selectedRoute.totalStops) *
|
||||
10,
|
||||
) / 10
|
||||
}}
|
||||
</div>
|
||||
<div class="stat-label">Avg Miles/Stop</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -182,19 +216,10 @@
|
||||
|
||||
<v-card-actions class="pa-4">
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
@click="routeDialog = false"
|
||||
>
|
||||
<v-btn color="primary" variant="outlined" @click="routeDialog = false">
|
||||
Close
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="optimizeRoute"
|
||||
>
|
||||
Optimize Route
|
||||
</v-btn>
|
||||
<v-btn color="primary" @click="optimizeRoute"> Optimize Route </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@ -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 = () => {
|
||||
@ -274,7 +299,7 @@ onMounted(async () => {
|
||||
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,7 +309,7 @@ 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);
|
||||
|
||||
@ -1127,6 +1127,7 @@ class DataUtils {
|
||||
},
|
||||
],
|
||||
},
|
||||
<<<<<<< Updated upstream
|
||||
];
|
||||
|
||||
static dummyWarrantyData = [
|
||||
@ -1280,6 +1281,8 @@ class DataUtils {
|
||||
warrantyType: "Parts Only",
|
||||
systemType: "Commercial Irrigation",
|
||||
},
|
||||
=======
|
||||
>>>>>>> Stashed changes
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user