File size: 2,933 Bytes
f6213fc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import { formatClock, kindLabel } from '../models.mjs';

export function renderData({ currentPlan, dataBody, onRecommend }) {
  dataBody.innerHTML = '';
  dataBody.appendChild(buildVehicleTable(currentPlan));
  dataBody.appendChild(buildDeliveryTable(currentPlan, onRecommend));
}

function buildVehicleTable(currentPlan) {
  const wrapper = SF.el('div');
  wrapper.appendChild(SF.el('h4', null, 'Vehicles'));
  const table = SF.el('table', { className: 'deliveries-table' });
  table.appendChild(
    SF.el(
      'thead',
      null,
      SF.el(
        'tr',
        null,
        SF.el('th', null, 'Name'),
        SF.el('th', null, 'Depot'),
        SF.el('th', null, 'Capacity'),
        SF.el('th', null, 'Departure'),
      ),
    ),
  );
  const body = SF.el('tbody');
  currentPlan.vehicles.forEach((vehicle) => {
    body.appendChild(
      SF.el(
        'tr',
        null,
        SF.el('td', null, vehicle.name),
        SF.el('td', null, `${vehicle.homeLat.toFixed(4)}, ${vehicle.homeLng.toFixed(4)}`),
        SF.el('td', null, String(vehicle.capacity)),
        SF.el('td', null, formatClock(vehicle.departureTime)),
      ),
    );
  });
  table.appendChild(body);
  wrapper.appendChild(table);
  return wrapper;
}

function buildDeliveryTable(currentPlan, onRecommend) {
  const wrapper = SF.el('div');
  wrapper.appendChild(SF.el('h4', null, 'Deliveries'));
  const table = SF.el('table', { className: 'deliveries-table' });
  table.appendChild(buildDeliveryHeader());
  const body = SF.el('tbody');
  const previewDeliveries = currentPlan.viewState.preview.deliveries;
  previewDeliveries.forEach((deliveryPreview) => {
    const recommendButton = SF.createButton({ text: 'Recommend', variant: 'ghost', size: 'small' });
    recommendButton.addEventListener('click', () => onRecommend(deliveryPreview.deliveryId));
    body.appendChild(buildDeliveryRow(deliveryPreview, recommendButton));
  });
  table.appendChild(body);
  wrapper.appendChild(table);
  return wrapper;
}

function buildDeliveryHeader() {
  return SF.el(
    'thead',
    null,
    SF.el(
      'tr',
      null,
      SF.el('th', null, 'Label'),
      SF.el('th', null, 'Kind'),
      SF.el('th', null, 'Window'),
      SF.el('th', null, 'Demand'),
      SF.el('th', null, 'Assignment'),
      SF.el('th', null, 'Actions'),
    ),
  );
}

function buildDeliveryRow(deliveryPreview, recommendButton) {
  return SF.el(
    'tr',
    null,
    SF.el('td', null, deliveryPreview.label),
    SF.el('td', null, kindLabel(deliveryPreview.kind)),
    SF.el(
      'td',
      null,
      `${formatClock(deliveryPreview.minStartTime)} to ${formatClock(deliveryPreview.maxEndTime)}`,
    ),
    SF.el('td', null, String(deliveryPreview.demand)),
    SF.el('td', null, deliveryPreview.assignedVehicleName || 'Unassigned'),
    SF.el(
      'td',
      null,
      SF.el('div', { className: 'deliveries-actions-inline' }, recommendButton),
    ),
  );
}