Skip to content

Commit cbca0f4

Browse files
committed
added delays panel
1 parent 5359c5c commit cbca0f4

File tree

5 files changed

+79
-1
lines changed

5 files changed

+79
-1
lines changed

src/index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,38 @@
8787
</label>
8888
</p>
8989
</div>
90+
<div id="delay-panel" class="panel position-absolute h-100 d-flex flex-column d-none p-2 pe-3">
91+
<button class="btn btn-outline-secondary float-end fw-bolder fs-3 lh-1" onclick="this.parentElement.classList.add('d-none')">
92+
&lt;
93+
</button>
94+
<h3>Закъснения</h3>
95+
<label>Тип</label>
96+
<select id="delay_type_filter" onchange="update_delay_panel()" class="form-control form-control-sm mb-2">
97+
<option value="late">Закъснели</option>
98+
<option value="ontime">Навреме</option>
99+
<option value="early">Избързали</option>
100+
<option value="all">Всички</option>
101+
</select>
102+
<label>Вид</label>
103+
<select id="delay_vehicle_type_filter" onchange="update_delay_panel()" class="form-control form-control-sm mb-2">
104+
<option value="all">Всички</option>
105+
<option value="tram">Трамваи</option>
106+
<option value="trolley">Тролеи</option>
107+
<option value="bus">Автобуси</option>
108+
</select>
109+
<div class="table-container">
110+
<table class="table table-sm table-bordered overflow-auto text-center align-middle">
111+
<thead>
112+
<tr>
113+
<th>Линия</th>
114+
<th>Инв. номер</th>
115+
<th>Закъснение</th>
116+
</tr>
117+
</thead>
118+
<tbody id="delay_table"></tbody>
119+
</table>
120+
</div>
121+
</div>
90122
<div id="settings-panel" class="panel position-absolute h-100 d-flex flex-column d-none p-2">
91123
<button class="btn btn-outline-secondary float-end fw-bolder fs-3 lh-1" onclick="this.parentElement.classList.add('d-none')">
92124
&lt;

src/js/app.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { set_route_classes, proper_inv_number, proper_inv_number_for_sorting, re
1313
import { is_vehicle_expected_on_line } from '/data/expected_models';
1414
import { init_map, map, vehicles_layer } from './map';
1515
import './filter_stops.js';
16+
import { update_delay_panel } from './delay_panel.js';
1617

1718
var websocket_connection = null;
1819
export var cache = new Map();
@@ -61,6 +62,7 @@ function init_websocket(attempts=1) {
6162
show_markers_in_view(map, vehicles_layer, cache);
6263
console.timeEnd('update cache');
6364
update_route_tables(tables_to_update);
65+
update_delay_panel();
6466
apply_filters();
6567
};
6668
websocket_connection.onerror = () => {

src/js/delay_panel.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { set_route_classes } from './utils.js';
2+
import { cache } from './app.js';
3+
4+
export function update_delay_panel() {
5+
const delay_filter_el = document.querySelector('#delay_type_filter');
6+
const delay_filter = delay_filter_el.value;
7+
const vehicle_filter_el = document.querySelector('#delay_vehicle_type_filter');
8+
const vehicle_filter = vehicle_filter_el.value;
9+
10+
const now_hh_mm = (new Date()).toLocaleTimeString('bg-BG', { hour: '2-digit', minute: '2-digit' }).split(':').map(Number);
11+
const now_mins = (now_hh_mm[0] * 60 + now_hh_mm[1]) % (24 * 60);
12+
const delays = Array.from(cache)
13+
.filter(([key, v]) => !v.hidden)
14+
.map(([key, v]) => ({
15+
route: v.route_ref,
16+
delay: v.delay,
17+
inv_number: v.inv_number,
18+
type: v.type,
19+
delay: now_mins - v.scheduled_time,
20+
cgm_id: key,
21+
}))
22+
.filter((v) => vehicle_filter == 'all' || v.type == vehicle_filter)
23+
.filter((v) => delay_filter == 'all' || delay_filter == 'early' && v.delay < -1 || delay_filter == 'ontime' && -1 <= v.delay && v.delay <= 3 || delay_filter == 'late' && 3 < v.delay);
24+
delays.sort((a, b) => b.delay - a.delay);
25+
26+
const delay_table = document.querySelector('#delay_table');
27+
delay_table.innerHTML = '';
28+
for(const delay of delays) {
29+
const tr = document.createElement('tr');
30+
const span = document.createElement('span');
31+
set_route_classes(span, delay.type, delay.route);
32+
span.classList.add('text-nowrap');
33+
tr.innerHTML = `
34+
<td>${span.outerHTML}</td>
35+
<td><button class="btn btn-sm btn-outline-primary" onclick="zoom_to_vehicle('${delay.cgm_id}')">${delay.inv_number}</button></td>
36+
<td class="${-1 <= delay.delay && delay.delay <= 3 ? 'text-success' : 'text-danger'} ${delay.delay >= 10 ? 'fw-bold' : ''}">${delay.delay > 0 ? '+' : ''}${delay.delay} мин</td>
37+
`;
38+
delay_table.appendChild(tr);
39+
}
40+
}
41+
window.update_delay_panel = update_delay_panel;

src/js/map.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export function init_map() {
2323
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
2424
L.control.openVehiclesPanel({ position: 'topleft' }).addTo(map);
2525
L.control.openStopsPanel({ position: 'topleft' }).addTo(map);
26+
L.control.openDelayPanel({ position: 'topleft' }).addTo(map);
2627
L.control.openInfoPanel({ position: 'topleft' }).addTo(map);
2728
L.control.openSettingsPanel({ position: 'topleft' }).addTo(map);
2829
L.control.zoom({
@@ -104,9 +105,11 @@ function create_panel_control(icon_class, panel_selector) {
104105
L.Control.OpenInfoPanel = create_panel_control('bi bi-info-lg fs-3', '#info-panel');
105106
L.Control.OpenVehiclesPanel = create_panel_control('bi bi-bus-front-fill fs-4', '#vehicles-panel');
106107
L.Control.OpenStopsPanel = create_panel_control('bi bi-menu-button-wide fs-4', '#stops-panel');
108+
L.Control.OpenDelayPanel = create_panel_control('bi bi-clock-fill fs-4', '#delay-panel');
107109
L.Control.OpenSettingsPanel = create_panel_control('bi bi-gear-fill fs-4', '#settings-panel');
108110

109111
L.control.openInfoPanel = opts => new L.Control.OpenInfoPanel(opts);
110112
L.control.openVehiclesPanel = opts => new L.Control.OpenVehiclesPanel(opts);
111113
L.control.openStopsPanel = opts => new L.Control.OpenStopsPanel(opts);
114+
L.control.openDelayPanel = opts => new L.Control.OpenDelayPanel(opts);
112115
L.control.openSettingsPanel = opts => new L.Control.OpenSettingsPanel(opts);

src/styles.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ html[data-bs-theme="dark"] .leaflet-container {
3535
.panel {
3636
z-index: 1100;
3737
background-color: #fff;
38-
max-width: 250px;
38+
max-width: 300px;
3939
}
4040

4141
.panel-bottom {

0 commit comments

Comments
 (0)