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,18 +16,17 @@
|
||||
<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
|
||||
icon="mdi-close"
|
||||
variant="text"
|
||||
<v-btn
|
||||
icon="mdi-close"
|
||||
variant="text"
|
||||
@click="routeDialog = false"
|
||||
></v-btn>
|
||||
</div>
|
||||
@ -45,42 +40,56 @@
|
||||
<div class="route-info-panel">
|
||||
<div class="route-summary pa-4">
|
||||
<h4 class="mb-3">Route Summary</h4>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<div class="info-item">
|
||||
<v-icon class="mr-2" size="small">mdi-clock-start</v-icon>
|
||||
<span class="label">Start Time:</span>
|
||||
<span class="value">{{ selectedRoute.startTime }}</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="info-item">
|
||||
<v-icon class="mr-2" size="small">mdi-car</v-icon>
|
||||
<span class="label">Vehicle:</span>
|
||||
<span class="value">{{ selectedRoute.vehicleId }}</span>
|
||||
</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>
|
||||
@ -88,41 +97,52 @@
|
||||
<!-- Stops List -->
|
||||
<div class="stops-section pa-4">
|
||||
<h4 class="mb-3">Route Stops</h4>
|
||||
|
||||
|
||||
<div class="stops-list">
|
||||
<div
|
||||
v-for="stop in selectedRoute.stops"
|
||||
<div
|
||||
v-for="stop in selectedRoute.stops"
|
||||
:key="stop.stopId"
|
||||
class="stop-item"
|
||||
:class="getStopStatusClass(stop.status)"
|
||||
>
|
||||
<div class="stop-number">{{ stop.stopId }}</div>
|
||||
|
||||
|
||||
<div class="stop-content">
|
||||
<div class="stop-header">
|
||||
<span class="customer-name">{{ stop.customer }}</span>
|
||||
<v-chip
|
||||
:color="getStopStatusColor(stop.status)"
|
||||
<span class="customer-name">{{
|
||||
stop.customer
|
||||
}}</span>
|
||||
<v-chip
|
||||
:color="getStopStatusColor(stop.status)"
|
||||
size="x-small"
|
||||
>
|
||||
{{ stop.status }}
|
||||
</v-chip>
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<div class="stop-service">
|
||||
<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,8 +158,10 @@
|
||||
<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">
|
||||
<div class="legend-item">
|
||||
@ -155,19 +177,31 @@
|
||||
<span>Not Started</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 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 = () => {
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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