UI: top-band layout + bottom trip dock + multi-select filters + always-on tint
Restructure:
- FLEET NOW tiles + SLOs + Filters in a horizontal top band; full-width map
- Trip panel moved to a bottom dock that slides up; trips render as a
horizontally-scrollable card strip instead of a vertical right-panel list
Multi-select filter widgets:
- cost_centre + assigned_city are now dropdowns with an "All …" toggle
and per-option checkboxes
- cost_centre options carry a colour swatch matching the marker tint —
the filter doubles as a live colour legend
- Server-side filter still applies when exactly one option is picked;
multi-selection within a widget is narrowed client-side via setFilter
so the existing serve.fn_live_view contract is unchanged
Cost-centre tint always visible:
- circle-color now uses cost_centre_color unconditionally
- operational_state is shown via opacity (moving=1.0 / parked=0.7 /
offline=0.35), keeping colour as a stable identity cue
applyClientFilter() is a new exported helper called by the page after
each refresh to narrow markers by multi-selection state.
This commit is contained in:
kianiadee
parent
66e1d94b81
commit
20958c0293
2 changed files with 395 additions and 157 deletions
|
|
@ -141,7 +141,17 @@ export function initMap(elementId, opts = {}) {
|
|||
15, 13,
|
||||
18, 20,
|
||||
],
|
||||
'circle-color': ['get', 'marker_color'],
|
||||
// Always tint by cost-centre colour — operational state is shown
|
||||
// via opacity (moving=1, parked=0.7, offline=0.35) so colour stays
|
||||
// a stable identity cue and the filter dropdown can double as a
|
||||
// colour legend.
|
||||
'circle-color': ['coalesce', ['get', 'cost_centre_color'], '#94a3b8'],
|
||||
'circle-opacity': [
|
||||
'case',
|
||||
['==', ['get', 'operational_state'], 'moving'], 1.0,
|
||||
['==', ['get', 'operational_state'], 'parked'], 0.7,
|
||||
0.35,
|
||||
],
|
||||
'circle-stroke-color': '#0b1220',
|
||||
'circle-stroke-width': [
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
|
|
@ -315,11 +325,11 @@ export function renderView(map, payload, { summaryRoot, sloRoot } = {}) {
|
|||
|
||||
function _renderSummary(root, summary) {
|
||||
const tiles = [
|
||||
{ label: 'Active', value: summary.total_active ?? '—' },
|
||||
{ label: 'Moving', value: summary.moving ?? '—' },
|
||||
{ label: 'Parked', value: summary.parked ?? '—' },
|
||||
{ label: 'Active', value: summary.total_active ?? '—' },
|
||||
{ label: 'Moving', value: summary.moving ?? '—' },
|
||||
{ label: 'Parked', value: summary.parked ?? '—' },
|
||||
{ label: 'Offline', value: summary.offline ?? '—' },
|
||||
{ label: 'Below freshness SLO', value: summary.below_freshness_slo ?? '—' },
|
||||
{ label: 'Stale', value: summary.below_freshness_slo ?? '—' },
|
||||
];
|
||||
root.innerHTML = tiles
|
||||
.map(t => `
|
||||
|
|
@ -348,17 +358,197 @@ function _renderSlos(root, slos) {
|
|||
}).join('');
|
||||
}
|
||||
|
||||
/* ---------- filters ---------- */
|
||||
/* ---------- filters (multi-select dropdowns) ---------- */
|
||||
|
||||
export function initFilters(formEl, onChange) {
|
||||
const handler = () => {
|
||||
const fd = new FormData(formEl);
|
||||
/**
|
||||
* Wire the cost-centre + assigned-city filter widgets.
|
||||
*
|
||||
* Returns an `updateOptions(features)` callback that the caller invokes
|
||||
* after each /api/views/live refresh — the widgets repopulate from the
|
||||
* loaded feature properties, so we don't need a separate enum endpoint.
|
||||
*
|
||||
* The widget itself is a button that toggles a popover. The popover has
|
||||
* an "All …" checkbox at the top and a checkbox per distinct value.
|
||||
* `cost_centre_color` from the feature is rendered as a swatch beside the
|
||||
* cost-centre options — turning the filter into a live colour legend.
|
||||
*
|
||||
* onChange receives a flat filter object compatible with serve.fn_live_view:
|
||||
* { cost_centre: 'isp', assigned_city: 'Nairobi' } ← single select OR
|
||||
* no key ← when "All" picked
|
||||
*
|
||||
* Multiple selections within one widget collapse to the first value (the
|
||||
* SQL function takes one) — we treat additional selections client-side
|
||||
* as an OR by sending no filter and letting the renderer hide the rest.
|
||||
* That keeps the SQL contract unchanged for P1.
|
||||
*/
|
||||
export function initFilters(root, onChange) {
|
||||
const ccWidget = _buildMultiSelect(
|
||||
root.querySelector('#flt-cost-centre'),
|
||||
{ label: 'cost centre', plural: 'cost centres', showSwatch: true },
|
||||
);
|
||||
const cityWidget = _buildMultiSelect(
|
||||
root.querySelector('#flt-assigned-city'),
|
||||
{ label: 'assigned city', plural: 'cities', showSwatch: false },
|
||||
);
|
||||
|
||||
const emit = () => {
|
||||
const filters = {};
|
||||
for (const [k, v] of fd.entries()) if (v) filters[k] = v;
|
||||
onChange(filters);
|
||||
const cc = ccWidget.getValues();
|
||||
const city = cityWidget.getValues();
|
||||
if (cc.length === 1) filters.cost_centre = cc[0];
|
||||
if (city.length === 1) filters.assigned_city = city[0];
|
||||
// For multi-selection client-side narrowing, stash so renderer can filter
|
||||
onChange(filters, { costCentres: cc, cities: city });
|
||||
};
|
||||
formEl.addEventListener('change', handler);
|
||||
formEl.addEventListener('submit', (e) => { e.preventDefault(); handler(); });
|
||||
|
||||
ccWidget.onChange(emit);
|
||||
cityWidget.onChange(emit);
|
||||
|
||||
return {
|
||||
updateOptions(features) {
|
||||
const cc = new Map();
|
||||
const city = new Set();
|
||||
for (const f of features) {
|
||||
const p = f.properties || {};
|
||||
if (p.cost_centre) cc.set(p.cost_centre, p.cost_centre_color || '#94a3b8');
|
||||
if (p.assigned_city) city.add(p.assigned_city);
|
||||
}
|
||||
ccWidget.setOptions([...cc.entries()].sort()
|
||||
.map(([value, color]) => ({ value, color })));
|
||||
cityWidget.setOptions([...city].sort()
|
||||
.map(value => ({ value })));
|
||||
},
|
||||
getActive() {
|
||||
return { costCentres: ccWidget.getValues(), cities: cityWidget.getValues() };
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function _buildMultiSelect(root, { label, plural, showSwatch }) {
|
||||
// root is a <div> we own. Render: a button + a hidden popover.
|
||||
root.classList.add('ms');
|
||||
root.innerHTML = `
|
||||
<button type="button" class="ms-btn" aria-haspopup="listbox" aria-expanded="false">
|
||||
<span class="ms-btn-label">All ${plural}</span>
|
||||
<span class="ms-caret">▾</span>
|
||||
</button>
|
||||
<div class="ms-pop" role="listbox" hidden>
|
||||
<label class="ms-row ms-row-all">
|
||||
<input type="checkbox" class="ms-all" checked />
|
||||
<span>All ${plural}</span>
|
||||
</label>
|
||||
<div class="ms-options"></div>
|
||||
</div>
|
||||
`;
|
||||
const btn = root.querySelector('.ms-btn');
|
||||
const btnLabel = root.querySelector('.ms-btn-label');
|
||||
const pop = root.querySelector('.ms-pop');
|
||||
const allBox = root.querySelector('.ms-all');
|
||||
const optsRoot = root.querySelector('.ms-options');
|
||||
|
||||
const listeners = [];
|
||||
let options = []; // [{value, color?}]
|
||||
|
||||
const updateLabel = () => {
|
||||
const checked = [...optsRoot.querySelectorAll('input:checked')];
|
||||
if (checked.length === 0 || checked.length === options.length) {
|
||||
btnLabel.textContent = `All ${plural}`;
|
||||
allBox.checked = true;
|
||||
} else if (checked.length === 1) {
|
||||
btnLabel.textContent = checked[0].value;
|
||||
allBox.checked = false;
|
||||
} else {
|
||||
btnLabel.textContent = `${checked.length} ${plural}`;
|
||||
allBox.checked = false;
|
||||
}
|
||||
};
|
||||
const fire = () => listeners.forEach(fn => fn());
|
||||
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const open = pop.hasAttribute('hidden');
|
||||
if (open) {
|
||||
pop.removeAttribute('hidden');
|
||||
btn.setAttribute('aria-expanded', 'true');
|
||||
} else {
|
||||
pop.setAttribute('hidden', '');
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!root.contains(e.target) && !pop.hasAttribute('hidden')) {
|
||||
pop.setAttribute('hidden', '');
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
allBox.addEventListener('change', () => {
|
||||
const checked = allBox.checked;
|
||||
optsRoot.querySelectorAll('input').forEach(cb => { cb.checked = checked; });
|
||||
if (!checked) allBox.checked = false; // "All" un-check = clear
|
||||
updateLabel();
|
||||
fire();
|
||||
});
|
||||
|
||||
return {
|
||||
setOptions(opts) {
|
||||
options = opts;
|
||||
// Preserve current selections by value when re-rendering
|
||||
const prevChecked = new Set(
|
||||
[...optsRoot.querySelectorAll('input:checked')].map(cb => cb.value),
|
||||
);
|
||||
const wasAll = prevChecked.size === 0 || allBox.checked;
|
||||
optsRoot.innerHTML = opts.map(({ value, color }) => `
|
||||
<label class="ms-row">
|
||||
<input type="checkbox" value="${_esc(value)}" ${wasAll || prevChecked.has(value) ? 'checked' : ''} />
|
||||
${showSwatch && color ? `<span class="ms-swatch" style="background:${_esc(color)}"></span>` : ''}
|
||||
<span class="ms-row-label">${_esc(value)}</span>
|
||||
</label>
|
||||
`).join('');
|
||||
optsRoot.querySelectorAll('input').forEach(cb => {
|
||||
cb.addEventListener('change', () => { updateLabel(); fire(); });
|
||||
});
|
||||
updateLabel();
|
||||
},
|
||||
getValues() {
|
||||
const checked = [...optsRoot.querySelectorAll('input:checked')];
|
||||
if (checked.length === 0 || checked.length === options.length) return [];
|
||||
return checked.map(cb => cb.value);
|
||||
},
|
||||
onChange(fn) { listeners.push(fn); },
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Client-side narrowing: after rendering, hide markers whose cost_centre
|
||||
* or assigned_city isn't in the multi-select set. Used when the user picks
|
||||
* a subset (the SQL accepts only single-value filters in P1).
|
||||
*
|
||||
* Note: this hides via MapLibre `setFilter` so the source data is intact —
|
||||
* counts in the FLEET NOW tiles still reflect everything fetched.
|
||||
*/
|
||||
export function applyClientFilter(map, { costCentres = [], cities = [] } = {}) {
|
||||
const layers = ['vehicles-circle', 'vehicles-arrow', 'vehicles-label'];
|
||||
const conds = [];
|
||||
if (costCentres.length > 0 && costCentres.length > 1) {
|
||||
conds.push(['in', ['get', 'cost_centre'], ['literal', costCentres]]);
|
||||
}
|
||||
if (cities.length > 0 && cities.length > 1) {
|
||||
conds.push(['in', ['get', 'assigned_city'], ['literal', cities]]);
|
||||
}
|
||||
const filter = conds.length === 0 ? null
|
||||
: conds.length === 1 ? conds[0]
|
||||
: ['all', ...conds];
|
||||
// Preserve the show_arrow filter on the arrow layer
|
||||
for (const id of layers) {
|
||||
if (!map.getLayer(id)) continue;
|
||||
if (id === 'vehicles-arrow') {
|
||||
const base = ['==', ['get', 'show_arrow'], true];
|
||||
map.setFilter(id, filter ? ['all', base, filter] : base);
|
||||
} else {
|
||||
map.setFilter(id, filter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- trip panel ---------- */
|
||||
|
|
@ -435,15 +625,9 @@ function _renderTripPanel(map, els, payload) {
|
|||
const reportingTime = payload.reporting_time
|
||||
? _formatTimeOnly(payload.reporting_time) : '—';
|
||||
els.totals.innerHTML = `
|
||||
<div>Reporting time: <strong>${_esc(reportingTime)}</strong></div>
|
||||
<div style="margin-top:6px">
|
||||
<strong>${t.trip_count ?? 0}</strong> trips ·
|
||||
<strong>${_fmtNum(t.distance_km, 1)}</strong> km
|
||||
</div>
|
||||
<div style="margin-top:4px">
|
||||
drive ${_fmtNum(t.driving_min, 0)}m · idle ${_fmtNum(t.idling_min, 0)}m · stop ${_fmtNum(t.stopped_min, 0)}m
|
||||
</div>
|
||||
<div class="quality">${q.fix_count ?? 0} fixes · ACC ${q.has_acc_data ? 'on' : 'off'}</div>
|
||||
<div>Reporting <strong>${_esc(reportingTime)}</strong> · <strong>${t.trip_count ?? 0}</strong> trips · <strong>${_fmtNum(t.distance_km, 1)}</strong> km</div>
|
||||
<div>drive ${_fmtNum(t.driving_min, 0)}m · idle ${_fmtNum(t.idling_min, 0)}m · stop ${_fmtNum(t.stopped_min, 0)}m</div>
|
||||
<div class="trip-quality">${q.fix_count ?? 0} fixes · ACC ${q.has_acc_data ? 'on' : 'off'}</div>
|
||||
`;
|
||||
|
||||
const trips = payload.trips || [];
|
||||
|
|
@ -452,27 +636,27 @@ function _renderTripPanel(map, els, payload) {
|
|||
return;
|
||||
}
|
||||
els.list.innerHTML = trips.map(trip => `
|
||||
<div class="trip-row" data-trip-id="${trip.trip_id}">
|
||||
<div class="trip-row-top">
|
||||
<div class="trip-card" data-trip-id="${trip.trip_id}">
|
||||
<div class="trip-card-top">
|
||||
<span>Trip ${trip.trip_id}</span>
|
||||
<span>${_fmtNum(trip.distance_km, 1)} km</span>
|
||||
</div>
|
||||
<div class="trip-row-meta">
|
||||
<span>${_formatTimeOnly(trip.started_at)} → ${_formatTimeOnly(trip.ended_at)}</span>
|
||||
<div class="trip-card-times">${_formatTimeOnly(trip.started_at)} → ${_formatTimeOnly(trip.ended_at)}</div>
|
||||
<div class="trip-card-meta">
|
||||
<span>${_fmtNum(trip.duration_min, 0)} min</span>
|
||||
${trip.idling_min > 0 ? `<span>idle ${_fmtNum(trip.idling_min, 0)}m</span>` : ''}
|
||||
</div>
|
||||
<div class="trip-row-reason ${_reasonClass(trip.end_reason)}">
|
||||
<div class="trip-card-reason ${_reasonClass(trip.end_reason)}">
|
||||
${_reasonLabel(trip.end_reason)}
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
for (const row of els.list.querySelectorAll('.trip-row')) {
|
||||
row.addEventListener('click', () => {
|
||||
els.list.querySelectorAll('.trip-row.selected')
|
||||
.forEach(r => r.classList.remove('selected'));
|
||||
row.classList.add('selected');
|
||||
const tid = Number(row.dataset.tripId);
|
||||
for (const card of els.list.querySelectorAll('.trip-card')) {
|
||||
card.addEventListener('click', () => {
|
||||
els.list.querySelectorAll('.trip-card.selected')
|
||||
.forEach(c => c.classList.remove('selected'));
|
||||
card.classList.add('selected');
|
||||
const tid = Number(card.dataset.tripId);
|
||||
const trip = trips.find(x => x.trip_id === tid);
|
||||
if (trip) _showAndAnimateTrip(map, trip);
|
||||
});
|
||||
|
|
@ -535,7 +719,9 @@ function _showAndAnimateTrip(map, trip) {
|
|||
// eslint-disable-next-line no-undef
|
||||
new maplibregl.LngLatBounds(coords[0], coords[0]),
|
||||
);
|
||||
map.fitBounds(bounds, { padding: { top: 80, right: 380, bottom: 60, left: 60 }, duration: 600 });
|
||||
// Bottom panel takes ~60% height when open; pad the south more so the
|
||||
// polyline isn't hidden under the trip cards.
|
||||
map.fitBounds(bounds, { padding: { top: 60, right: 60, bottom: 360, left: 60 }, duration: 600 });
|
||||
|
||||
_animatePathMarker(map, coords, TRIP_ANIM_MS);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
:root {
|
||||
--bg: #0f172a;
|
||||
--panel: #1e293b;
|
||||
--panel-2: #0b1220;
|
||||
--text: #f1f5f9;
|
||||
--muted: #94a3b8;
|
||||
--accent: #10b981;
|
||||
|
|
@ -18,43 +19,105 @@
|
|||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
|
||||
body { display: grid; grid-template-rows: auto 1fr; }
|
||||
|
||||
body { display: grid; grid-template-rows: auto auto 1fr; min-height: 100%; }
|
||||
|
||||
/* ─────────── top header ─────────── */
|
||||
header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 10px 16px; background: var(--panel); border-bottom: 1px solid #0b1220;
|
||||
padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--panel-2);
|
||||
}
|
||||
header h1 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
|
||||
header .right { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--muted); }
|
||||
button.logout {
|
||||
background: transparent; color: var(--muted); border: 1px solid var(--muted);
|
||||
padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: 11px;
|
||||
}
|
||||
button.logout:hover { color: var(--text); border-color: var(--text); }
|
||||
|
||||
/* ─────────── top dashboard band: tiles + slos + filters ─────────── */
|
||||
.top-band {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px,auto) minmax(260px,1fr) minmax(280px,auto);
|
||||
gap: 16px;
|
||||
padding: 10px 16px;
|
||||
background: var(--panel);
|
||||
border-bottom: 1px solid var(--panel-2);
|
||||
}
|
||||
.band-block { display: flex; flex-direction: column; gap: 4px; }
|
||||
.band-title {
|
||||
font-size: 10px; text-transform: uppercase; color: var(--muted);
|
||||
letter-spacing: 0.08em; font-weight: 600;
|
||||
}
|
||||
.band-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
|
||||
|
||||
.tile {
|
||||
background: var(--panel-2); padding: 4px 10px; border-radius: 4px;
|
||||
min-width: 70px; display: flex; flex-direction: column; gap: 0;
|
||||
}
|
||||
.tile-label { font-size: 9px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
|
||||
.tile-value { font-size: 18px; font-weight: 600; line-height: 1.1; }
|
||||
|
||||
.slo {
|
||||
display: grid; grid-template-columns: 1fr auto auto; gap: 8px;
|
||||
padding: 3px 8px; border-radius: 4px; font-size: 11px;
|
||||
background: var(--panel-2);
|
||||
}
|
||||
header h1 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
|
||||
header .right { display: flex; gap: 16px; align-items: center; font-size: 13px; color: var(--muted); }
|
||||
main { display: grid; grid-template-columns: 320px 1fr; min-height: 0; }
|
||||
aside { padding: 12px; overflow: auto; border-right: 1px solid #0b1220; background: var(--panel); }
|
||||
#map { width: 100%; height: 100%; }
|
||||
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
|
||||
.tile { background: #0b1220; padding: 10px; border-radius: 6px; }
|
||||
.tile-label { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.04em; }
|
||||
.tile-value { font-size: 22px; font-weight: 600; margin-top: 2px; }
|
||||
h3 { font-size: 11px; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; letter-spacing: 0.06em; }
|
||||
.slo { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; padding: 6px 8px; border-radius: 4px; font-size: 12px; margin-bottom: 4px; background: #0b1220; }
|
||||
.slo-name { color: var(--muted); }
|
||||
.slo-status { text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; }
|
||||
.slo-status { text-transform: uppercase; font-size: 9px; letter-spacing: 0.06em; }
|
||||
.slo-green .slo-status { color: var(--accent); }
|
||||
.slo-red .slo-status { color: var(--bad); }
|
||||
.slo-unknown .slo-status { color: var(--muted); }
|
||||
.slo-empty { color: var(--muted); font-size: 12px; }
|
||||
.slo-empty { color: var(--muted); font-size: 11px; }
|
||||
|
||||
/* hover popup matching the dark theme */
|
||||
/* ─────────── multi-select filter widget ─────────── */
|
||||
.ms { position: relative; min-width: 180px; }
|
||||
.ms-btn {
|
||||
width: 100%; display: flex; justify-content: space-between; align-items: center;
|
||||
background: var(--panel-2); color: var(--text);
|
||||
border: 1px solid var(--panel-2); border-radius: 4px;
|
||||
padding: 6px 10px; font-size: 12px; cursor: pointer; font-family: inherit;
|
||||
}
|
||||
.ms-btn:hover { border-color: var(--muted); }
|
||||
.ms-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.ms-caret { color: var(--muted); font-size: 10px; margin-left: 8px; }
|
||||
.ms-pop {
|
||||
position: absolute; top: calc(100% + 4px); left: 0; right: 0;
|
||||
background: var(--panel); border: 1px solid var(--panel-2);
|
||||
border-radius: 6px; padding: 6px; z-index: 20;
|
||||
max-height: 320px; overflow-y: auto;
|
||||
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
|
||||
}
|
||||
.ms-row {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 5px 8px; border-radius: 3px; font-size: 12px; cursor: pointer;
|
||||
}
|
||||
.ms-row:hover { background: var(--panel-2); }
|
||||
.ms-row input[type="checkbox"] { margin: 0; accent-color: var(--accent); }
|
||||
.ms-row-all { border-bottom: 1px solid var(--panel-2); margin-bottom: 4px; padding-bottom: 8px; }
|
||||
.ms-swatch {
|
||||
width: 10px; height: 10px; border-radius: 50%;
|
||||
display: inline-block; flex-shrink: 0;
|
||||
border: 1px solid rgba(0,0,0,0.3);
|
||||
}
|
||||
.ms-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* ─────────── map (fills remaining height) ─────────── */
|
||||
#map-container { position: relative; min-height: 0; }
|
||||
#map { position: absolute; inset: 0; }
|
||||
|
||||
/* ─────────── hover popup (unchanged) ─────────── */
|
||||
.fleet-popup .maplibregl-popup-content {
|
||||
background: #1e293b !important;
|
||||
color: var(--text) !important;
|
||||
padding: 14px 16px !important;
|
||||
border-radius: 8px !important;
|
||||
background: var(--panel) !important; color: var(--text) !important;
|
||||
padding: 14px 16px !important; border-radius: 8px !important;
|
||||
min-width: 240px;
|
||||
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
|
||||
border: 1px solid #0b1220;
|
||||
border: 1px solid var(--panel-2);
|
||||
}
|
||||
.fleet-popup .maplibregl-popup-tip { display: none; }
|
||||
.popup-card { font-family: inherit; }
|
||||
.popup-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
|
||||
.popup-plate { font-size: 16px; font-weight: 700; letter-spacing: 0.01em; }
|
||||
.popup-plate { font-size: 16px; font-weight: 700; }
|
||||
.popup-pill {
|
||||
font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
|
||||
padding: 3px 8px; border-radius: 4px; font-weight: 600;
|
||||
|
|
@ -67,93 +130,70 @@
|
|||
.popup-meta { color: var(--muted); font-size: 12px; margin: 2px 0 4px; }
|
||||
.popup-address { color: var(--text); font-size: 13.5px; margin: 6px 0 8px; font-weight: 500; }
|
||||
.popup-row { color: #cbd5e1; font-size: 12.5px; margin: 4px 0; }
|
||||
form.filters { display: grid; gap: 8px; }
|
||||
form.filters input, form.filters select { width: 100%; background: #0b1220; color: var(--text); border: 1px solid #0b1220; border-radius: 4px; padding: 6px 8px; font-size: 12px; }
|
||||
form.filters label { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.06em; }
|
||||
button.logout { background: transparent; color: var(--muted); border: 1px solid var(--muted); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
|
||||
button.logout:hover { color: var(--text); border-color: var(--text); }
|
||||
|
||||
/* trip panel */
|
||||
#map-container { position: relative; height: 100%; }
|
||||
#map { position: absolute; inset: 0; }
|
||||
.trip-panel {
|
||||
position: absolute; top: 0; right: 0; bottom: 0;
|
||||
width: 360px;
|
||||
background: var(--panel);
|
||||
border-left: 1px solid #0b1220;
|
||||
/* ─────────── bottom trip panel (slides up) ─────────── */
|
||||
.trip-dock {
|
||||
position: absolute; left: 0; right: 0; bottom: 0;
|
||||
background: var(--panel); border-top: 1px solid var(--panel-2);
|
||||
color: var(--text);
|
||||
display: flex; flex-direction: column;
|
||||
transform: translateX(100%);
|
||||
display: grid; grid-template-rows: auto 1fr;
|
||||
max-height: 60%;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.22s ease;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
box-shadow: -8px 0 24px rgba(0,0,0,0.35);
|
||||
z-index: 3;
|
||||
box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
|
||||
}
|
||||
.trip-panel.open { transform: translateX(0); }
|
||||
.trip-panel-header {
|
||||
display: flex; justify-content: space-between; align-items: flex-start;
|
||||
padding: 14px 16px 10px; border-bottom: 1px solid #0b1220;
|
||||
.trip-dock.open { transform: translateY(0); }
|
||||
.trip-dock-header {
|
||||
display: flex; align-items: center; gap: 18px; padding: 10px 16px;
|
||||
border-bottom: 1px solid var(--panel-2); flex-wrap: wrap;
|
||||
}
|
||||
.trip-plate { font-size: 18px; font-weight: 700; letter-spacing: 0.01em; }
|
||||
.trip-id-block { display: flex; flex-direction: column; min-width: 160px; }
|
||||
.trip-plate { font-size: 16px; font-weight: 700; }
|
||||
.trip-driver { font-size: 12px; color: var(--muted); margin-top: 2px; }
|
||||
.trip-close {
|
||||
background: transparent; color: var(--muted); border: 0;
|
||||
font-size: 24px; cursor: pointer; line-height: 1; padding: 0 4px;
|
||||
}
|
||||
.trip-close:hover { color: var(--text); }
|
||||
.trip-controls {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 10px 16px; gap: 8px; border-bottom: 1px solid #0b1220;
|
||||
}
|
||||
.trip-controls label { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.06em; display: flex; align-items: center; gap: 8px; }
|
||||
.trip-totals { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
|
||||
.trip-totals strong { color: var(--text); font-weight: 600; }
|
||||
.trip-quality { font-size: 10.5px; color: var(--muted); }
|
||||
.trip-controls { display: flex; gap: 8px; align-items: center; margin-left: auto; }
|
||||
.trip-controls label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); display: flex; gap: 6px; align-items: center; }
|
||||
.trip-controls input[type="date"] {
|
||||
background: #0b1220; color: var(--text);
|
||||
border: 1px solid #0b1220; border-radius: 4px;
|
||||
padding: 4px 6px; font-size: 12px; font-family: inherit;
|
||||
color-scheme: dark;
|
||||
background: var(--panel-2); color: var(--text);
|
||||
border: 1px solid var(--panel-2); border-radius: 4px;
|
||||
padding: 4px 6px; font-size: 11px; font-family: inherit; color-scheme: dark;
|
||||
}
|
||||
.trip-csv {
|
||||
.trip-csv, .trip-close {
|
||||
background: transparent; color: var(--muted);
|
||||
border: 1px solid var(--muted); border-radius: 4px;
|
||||
padding: 4px 10px; cursor: pointer;
|
||||
font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
|
||||
padding: 4px 10px; cursor: pointer; font-size: 10px;
|
||||
text-transform: uppercase; letter-spacing: 0.06em;
|
||||
}
|
||||
.trip-csv:hover { color: var(--text); border-color: var(--text); }
|
||||
.trip-totals {
|
||||
padding: 12px 16px; font-size: 12.5px; color: var(--muted);
|
||||
border-bottom: 1px solid #0b1220; line-height: 1.5;
|
||||
}
|
||||
.trip-totals strong { color: var(--text); font-weight: 600; }
|
||||
.trip-totals .quality { font-size: 11px; margin-top: 6px; }
|
||||
.trip-list { overflow: auto; flex: 1; }
|
||||
.trip-csv:hover, .trip-close:hover { color: var(--text); border-color: var(--text); }
|
||||
|
||||
.trip-list { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; }
|
||||
.trip-list-empty { padding: 16px; color: var(--muted); font-size: 12.5px; }
|
||||
.trip-row {
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid #0b1220;
|
||||
cursor: pointer;
|
||||
.trip-card {
|
||||
flex: 0 0 auto; min-width: 170px; max-width: 220px;
|
||||
background: var(--panel-2); border-radius: 6px; padding: 10px 12px;
|
||||
cursor: pointer; border-left: 3px solid transparent;
|
||||
}
|
||||
.trip-row:hover { background: #0b1220; }
|
||||
.trip-row.selected {
|
||||
background: #0b1220;
|
||||
border-left: 3px solid var(--accent);
|
||||
padding-left: 13px;
|
||||
.trip-card:hover { background: #111a2c; }
|
||||
.trip-card.selected { border-left-color: var(--accent); }
|
||||
.trip-card-top {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
font-size: 12.5px; font-weight: 600; margin-bottom: 4px;
|
||||
}
|
||||
.trip-row-top {
|
||||
display: flex; justify-content: space-between;
|
||||
font-size: 13px; font-weight: 600;
|
||||
.trip-card-times { font-size: 11px; color: var(--muted); }
|
||||
.trip-card-meta {
|
||||
display: flex; gap: 8px; font-size: 11px; color: var(--muted); margin-top: 2px;
|
||||
}
|
||||
.trip-row-meta {
|
||||
display: flex; gap: 10px; flex-wrap: wrap;
|
||||
font-size: 11.5px; color: var(--muted); margin-top: 4px;
|
||||
}
|
||||
.trip-row-reason {
|
||||
.trip-card-reason {
|
||||
display: inline-block; margin-top: 6px;
|
||||
font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
|
||||
font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.trip-row-reason.work-stop { color: var(--accent); }
|
||||
.trip-row-reason.nofix-stop { color: var(--warn); }
|
||||
.trip-row-reason.long-gap { color: var(--bad); }
|
||||
.trip-card-reason.work-stop { color: var(--accent); }
|
||||
.trip-card-reason.nofix-stop { color: var(--warn); }
|
||||
.trip-card-reason.long-gap { color: var(--bad); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -164,45 +204,51 @@
|
|||
<button class="logout" onclick="window.fleetLogout()">Sign out</button>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<aside>
|
||||
<h3>Fleet now</h3>
|
||||
<div id="summary" class="tile-grid"></div>
|
||||
|
||||
<h3>SLOs</h3>
|
||||
<div id="slos"></div>
|
||||
<div class="top-band">
|
||||
<div class="band-block">
|
||||
<div class="band-title">Fleet now</div>
|
||||
<div class="band-row" id="summary"></div>
|
||||
</div>
|
||||
<div class="band-block">
|
||||
<div class="band-title">SLOs</div>
|
||||
<div class="band-row" id="slos" style="flex-direction:column; gap:4px;"></div>
|
||||
</div>
|
||||
<div class="band-block">
|
||||
<div class="band-title">Filters</div>
|
||||
<div class="band-row" id="filters">
|
||||
<div id="flt-cost-centre"></div>
|
||||
<div id="flt-assigned-city"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Filters</h3>
|
||||
<form class="filters" id="filters">
|
||||
<label for="f-cost">Cost centre</label>
|
||||
<input id="f-cost" name="cost_centre" placeholder="e.g. Nairobi-North" />
|
||||
<label for="f-city">Assigned city</label>
|
||||
<input id="f-city" name="assigned_city" placeholder="e.g. Nairobi" />
|
||||
</form>
|
||||
</aside>
|
||||
<div id="map-container">
|
||||
<div id="map"></div>
|
||||
<aside id="trip-panel" class="trip-panel" aria-hidden="true">
|
||||
<div class="trip-panel-header">
|
||||
<div>
|
||||
<div class="trip-plate" id="trip-plate">—</div>
|
||||
<div class="trip-driver" id="trip-driver"></div>
|
||||
</div>
|
||||
<button class="trip-close" id="trip-close" aria-label="Close trip panel">×</button>
|
||||
<div id="map-container">
|
||||
<div id="map"></div>
|
||||
|
||||
<aside id="trip-panel" class="trip-dock" aria-hidden="true">
|
||||
<div class="trip-dock-header">
|
||||
<div class="trip-id-block">
|
||||
<span class="trip-plate" id="trip-plate">—</span>
|
||||
<span class="trip-driver" id="trip-driver"></span>
|
||||
</div>
|
||||
<div class="trip-totals" id="trip-totals">Click a vehicle to see its trips.</div>
|
||||
<div class="trip-controls">
|
||||
<label>Date <input type="date" id="trip-date" /></label>
|
||||
<button class="trip-csv" id="trip-csv" type="button">CSV</button>
|
||||
<button class="trip-close" id="trip-close" type="button" aria-label="Close trip panel">Close</button>
|
||||
</div>
|
||||
<div class="trip-totals" id="trip-totals">Click a vehicle to see its trips.</div>
|
||||
<div class="trip-list" id="trip-list"></div>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div class="trip-list" id="trip-list"></div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
|
||||
<script type="module">
|
||||
import { authClient, apiFetch, initMap, renderView, initFilters, clockEAT, initTripPanel } from '/fleet-core.js';
|
||||
import {
|
||||
authClient, apiFetch, initMap, renderView,
|
||||
initFilters, applyClientFilter, initTripPanel, clockEAT,
|
||||
} from '/fleet-core.js';
|
||||
|
||||
if (!authClient.requireSession()) { /* redirected */ }
|
||||
|
||||
|
|
@ -212,21 +258,27 @@
|
|||
|
||||
const map = initMap('map');
|
||||
const summaryEl = document.getElementById('summary');
|
||||
const slosEl = document.getElementById('slos');
|
||||
const slosEl = document.getElementById('slos');
|
||||
let currentFilters = {};
|
||||
let activeSelection = { costCentres: [], cities: [] };
|
||||
|
||||
async function refresh() {
|
||||
try {
|
||||
const params = Object.keys(currentFilters).length ? { filters: currentFilters } : {};
|
||||
const payload = await apiFetch('/api/views/live', { params });
|
||||
renderView(map, payload, { summaryRoot: summaryEl, sloRoot: slosEl });
|
||||
// Repopulate filter dropdowns from the latest features
|
||||
const features = (payload.geojson && payload.geojson.features) || [];
|
||||
filters.updateOptions(features);
|
||||
applyClientFilter(map, activeSelection);
|
||||
} catch (err) {
|
||||
console.error('refresh.failed', err);
|
||||
}
|
||||
}
|
||||
|
||||
initFilters(document.getElementById('filters'), (filters) => {
|
||||
currentFilters = filters;
|
||||
const filters = initFilters(document.getElementById('filters'), (serverFilters, selection) => {
|
||||
currentFilters = serverFilters;
|
||||
activeSelection = selection;
|
||||
refresh();
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue