update project to use GTFS data

- add support for GTFS-RT (incl. delays, speed, etc. data)
- add stops
- add new panel for stop times
- refactor existing code
- add support for custom format of AVL data
- allow changing between GTFS and AVL data

Author: Dimitar5555

data/expected_models.js

@@ -1186,7 +1186,7 @@ const expected_models_per_line = [
 
 export function is_vehicle_expected_on_line(type, route_ref, inv_number) {
     if(typeof inv_number === 'string') {
-        inv_number = parseInt(inv_number.split('+')[0]);
+        inv_number = parseInt(inv_number.split('/')[0]);
     }
     const line = expected_models_per_line.find(line => 
         line.type === type

data/models.js

@@ -293,7 +293,7 @@ const models = {
 
 export function get_vehicle_model(type, inv_number) {
     if(typeof inv_number === 'string') {
-        inv_number = parseInt(inv_number.split('+')[0]);
+        inv_number = parseInt(inv_number.split('/')[0]);
     }
 
     for (const model of models[type]) {

src/js/app.js

@@ -6,24 +6,25 @@ import { LocateControl } from 'leaflet.locatecontrol';
 import { depots_data, get_vehicle_depot } from '/data/depots';
 import { get_vehicle_model } from '/data/models';
 
-import { preprocess_vehicle, handle_tram_compositions, add_to_cache } from './cache';
-import { update_map_markers } from './map';
+import { handle_tram_compositions, add_to_cache } from './cache';
+import { update_map_markers, show_markers_in_view } from './map_vehicles';
+import { load_stops, show_stops_in_view } from './map_stops';
 import { WEBSOCKET_URL } from './config';
 import { set_route_classes, proper_inv_number, proper_inv_number_for_sorting, register_vehicle_view } from './utils';
 import { is_vehicle_expected_on_line } from '/data/expected_models';
 
 var websocket_connection = null;
-var cache = [];
+export var cache = [];
 
 function init_websocket(attempts=1) {
     if(websocket_connection !== null) {
         websocket_connection.close();
         websocket_connection = null;
     }
     if(attempts >= 2) {
-        const el = document.querySelector('.container.mb-3');
+        const el = document.querySelector('body');
         const alert = document.createElement('div');
-        alert.classList.add('alert', 'alert-danger', 'text-center');
+        alert.classList.add('alert', 'alert-danger', 'text-center', 'm-3');
         alert.textContent = 'Услугата е временно недостъпна. Моля опитайте по-късно.';
         el.innerHTML = '';
         el.appendChild(alert);
@@ -34,38 +35,36 @@ function init_websocket(attempts=1) {
         let data = JSON.parse(ev.data);
         const now = Date.now();
 
-        console.time('update cache', data.avl.length);
+        console.time('update cache', data.length);
         const tables_to_update = new Set();
         const already_processed = new Set();
-        for(const vehicle of data.avl) {
-            if(already_processed.has(vehicle.vehicleId)) {
-                continue;
+        for(const vehicle of data) {
+            if(!vehicle.route_ref && vehicle.cgm_route_id) {
+                vehicle.route_ref = routes.find(r => r.cgm_id == vehicle.cgm_route_id)?.route_ref;
             }
-            already_processed.add(vehicle.vehicleId);
-            const processed = preprocess_vehicle(vehicle, now, routes);
-            if(!processed) {
-                continue;
+            if(!vehicle.type && vehicle.cgm_route_id) {
+                vehicle.type = routes.find(r => r.cgm_id == vehicle.cgm_route_id)?.type;
             }
-            add_to_cache(processed, tables_to_update, cache);
+            const fake_trolleys = ['60', '73', '74', '123', '288', '801'];
+            if(fake_trolleys.includes(vehicle.route_ref)) {
+                vehicle.type = 'bus';
+            }
+            add_to_cache(vehicle, tables_to_update, cache);
         }
-        handle_tram_compositions(cache);
+        handle_tram_compositions(cache, get_setting('data_source'));
+        hide_inactive_vehicles();
         update_map_markers(cache, map);
+        show_markers_in_view(map, vehicles_layer, cache);
         console.timeEnd('update cache');
-        for(const table of tables_to_update) {
-            if(table == '') {
-                continue;
-            }
-            const [type, line] = table.split('/');
-            update_route_table(type, line);
-        }
+        update_route_tables(tables_to_update);
         apply_filters();
     };
     websocket_connection.onerror = () => {
         setTimeout(() => init_websocket(attempts + 1), 1000);
     }
 }
 
-var map = null;
+export var map = null;
 
 function init_map() {
     map = L.map('map', {
@@ -154,7 +153,7 @@ function init_map() {
     new LocateControl({position: 'topright'}).addTo(map);
 }
 
-var routes = [];
+export let routes = [];
 function init_routes_tables() {
     return fetch('https://raw.githubusercontent.com/Dimitar5555/sofiatraffic-schedules/refs/heads/master/data/routes.json')
     .then(data => data.json())
@@ -169,12 +168,6 @@ function init_routes_tables() {
             const tbody = generate_route_table(route.type, route.route_ref);
             table.appendChild(tbody);
         }
-        //skip metro
-        //fill table
-        //section per line
-        //also include models?
-        //typical models?
-        //filter/search on top by line line_ref() or by type(select) or by inv_number and type
     });
 }
 
@@ -216,29 +209,60 @@ function init_depots() {
         if(!depot.hide && depot.geometry) {
             if(depot.geometry) {
                 depot.polygon = polygon(depot.geometry);
-                for(const geometry of depot.geometry) {
-                    L.polygon(geometry).addTo(map).bindPopup(depot.name);
-                }
             }
         }
     });
 }
 
+let vehicles_layer = null;
+export let stops_layer = null;
+
 window.onload = async () => {
     await init_routes_tables();
     init_map();
     init_depots();
     init_websocket();
     init_selectors();
+    init_settings();
+    vehicles_layer = L.layerGroup().addTo(map);
+    stops_layer = L.layerGroup().addTo(map);
+    load_stops(stops_layer);
+    map.on('load', () => {
+        console.log('Fired map load');
+        show_stops_in_view(map, stops_layer);
+        show_markers_in_view(map, vehicles_layer, cache);
+    });
+    map.on('zoomend', () => {
+        show_stops_in_view(map, stops_layer);
+        show_markers_in_view(map, vehicles_layer, cache);
+    });
+    map.on('moveend', () => {
+        show_stops_in_view(map, stops_layer);
+        show_markers_in_view(map, vehicles_layer, cache);
+    });
+
+    document.addEventListener('keyup', (e) => {
+        if(e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') {
+            return;
+        }
+        const prev_btn = document.querySelector('.bi-arrow-left')?.parentElement;
+        const next_btn = document.querySelector('.bi-arrow-right')?.parentElement;
+        if(e.key === 'ArrowLeft' && prev_btn && !prev_btn.hasAttribute('disabled')) {
+            prev_btn.click();
+        }
+        else if(e.key === 'ArrowRight' && next_btn && !next_btn.hasAttribute('disabled')) {
+            next_btn.click();
+        }
+    });
 };
 
 function generate_route_table(type, route_ref) {
-    let tbody = document.createElement('tbody');
+    const tbody = document.createElement('tbody');
     tbody.setAttribute('id', `${type}_${route_ref}`);
     tbody.setAttribute('data-type', type);
     {
-        let tr = document.createElement('tr');
-        let th = document.createElement('th');
+        const tr = document.createElement('tr');
+        const th = document.createElement('th');
         set_route_classes(th, type, route_ref);
         th.colSpan = 2;
         tr.appendChild(th);
@@ -251,16 +275,18 @@ function populate_route_table(relevant_vehicles, tbody) {
     relevant_vehicles.sort((a, b) => proper_inv_number_for_sorting(a.inv_number)-proper_inv_number_for_sorting(b.inv_number));
     const tr = document.createElement('tr');
     const td = document.createElement('td');
+    const btns = [];
     for(const vehicle of relevant_vehicles) {
         const btn = document.createElement('button');
         btn.classList.add('vehicle-btn', 'btn', 'btn-outline-dark', 'btn-sm');
         btn.addEventListener('click', (e) => {
             zoom_to_vehicle(vehicle.type, vehicle.inv_number);
         });
-        const vehicle_inv_number = typeof vehicle.inv_number == 'string' ? vehicle.inv_number.split('+')[0] : vehicle.inv_number;
+        const vehicle_inv_number = typeof vehicle.inv_number == 'string' ? vehicle.inv_number.split('/')[0] : vehicle.inv_number;
         const depot = get_vehicle_depot(vehicle.type, vehicle_inv_number);
+        if(!depot) console.log(depot, vehicle.type, vehicle.inv_number);
         btn.setAttribute('data-depot-id', depot.id);
-        btn.setAttribute('data-inv-number', vehicle.inv_number);
+        btn.setAttribute('data-inv-number', vehicle.full_inv_number ?? vehicle.inv_number);
         if(vehicle.is_unexpected) {
             btn.classList.add('btn-warning');
             btn.classList.remove('btn-outline-dark');
@@ -273,9 +299,12 @@ function populate_route_table(relevant_vehicles, tbody) {
             tbody.setAttribute('data-double-decker', 'true');
         }
         btn.classList.add('text-center', 'align-middle')
-        btn.innerText = proper_inv_number(vehicle.inv_number);
-        td.appendChild(btn);
+        btn.setAttribute('data-car', vehicle.car);
+        btn.innerText = `${vehicle.car ? vehicle.car + ' / ' : ''}${proper_inv_number(vehicle.inv_number)}`;
+        btns.push(btn);
     }
+    btns.sort((a, b) => a.dataset.car - b.dataset.car);
+    btns.forEach(btn => td.appendChild(btn));
     tr.appendChild(td);
     tbody.appendChild(tr);
 }
@@ -285,40 +314,92 @@ function is_screen_width_lg_or_less() {
 }
 
 function zoom_to_vehicle(type, inv_number) {
-    const marker = cache.find(v => v.type == type && v.inv_number == inv_number).marker;
-    const left_panel = document.querySelector('#left_panel');
+    const vehicle = cache.find(v => v.type === type && v.inv_number === inv_number);
+    const marker = vehicle.marker;
+    const vehicles_panel = document.querySelector('#vehicles-panel');
     if(is_screen_width_lg_or_less()){
-        left_panel.classList.add('d-none');
+        vehicles_panel.classList.add('d-none');
     }
-    map.flyTo(marker.getLatLng(), 17, { animate: false });
+    map.flyTo(vehicle.coords, 17, { animate: false });
     marker.fireEvent('click');
     register_vehicle_view(type, inv_number);
 }
+window.zoom_to_vehicle = zoom_to_vehicle;
 
-function update_route_table(type, route_ref) {
-    if(route_ref === 'null' || route_ref === 'undefined') {
-        route_ref = 'outOfService';
-    }
-    let old_tbody = document.querySelector(`#${type}_${route_ref}`);
-    try {
-        let relevant_vehicles;
-        if(route_ref != 'outOfService') {
-            const cgm_route_id = routes.find(route => route.type == type && route.route_ref == route_ref).cgm_id;
-            relevant_vehicles = cache.filter(vehicle => vehicle.cgm_route_id == cgm_route_id && vehicle.route_ref && !vehicle.hidden);
+function update_route_tables(route_tables) {
+    for(const table of route_tables) {
+        let [type, route_ref] = table.split('/');
+        if(route_ref === 'undefined') {
+            route_ref = 'outOfService';
         }
-        else {
-            relevant_vehicles = cache.filter(vehicle => vehicle.type == type && !vehicle.route_ref && !vehicle.hidden);
+        
+        const old_tbody = document.querySelector(`#${type}_${route_ref}`);
+        try {
+            const cgm_route_id = routes.find(route => route.type == type && route.route_ref == route_ref).cgm_id;
+            const relevant_vehicles = cache.filter(vehicle => vehicle.cgm_route_id == cgm_route_id && vehicle.route_ref && vehicle.hidden !== true);
+            for(const v of relevant_vehicles) {
+                v.is_unexpected = !is_vehicle_expected_on_line(type, route_ref, v.inv_number);
+            }
+            const new_tbody = old_tbody.cloneNode();
+            new_tbody.appendChild(old_tbody.children[0]);
+            populate_route_table(relevant_vehicles, new_tbody)
+            old_tbody.replaceWith(new_tbody);
         }
-        for(const v of relevant_vehicles) {
-            v.is_unexpected = !is_vehicle_expected_on_line(type, route_ref, v.inv_number);
+        catch (err){
+            console.error(err)
+            console.log(old_tbody, route_ref,`#${type}_${route_ref}`);
         }
-        const new_tbody = old_tbody.cloneNode();
-        new_tbody.appendChild(old_tbody.children[0]);
-        populate_route_table(relevant_vehicles, new_tbody)
-        old_tbody.replaceWith(new_tbody);
     }
-    catch (err){
-        console.error(err)
-        console.log(old_tbody, route_ref,`#${type}_${route_ref}`);
+}
+
+
+function hide_inactive_vehicles() {
+    const update_tables = new Set();
+    const now = Date.now() / 1000;
+    cache.forEach(vehicle => {
+        if(now - vehicle.timestamp <= 120) {
+            return;
+        }
+        if(vehicle.marker) {
+            vehicle.marker.remove();
+            vehicle.marker = null;
+        }
+        vehicle.hidden = true;
+        update_tables.add(`${vehicle.type}/${vehicle.route_ref}`);
+    });
+    update_route_tables(update_tables);
+}
+
+export function get_setting(key) {
+    const defaults = {
+        data_source: 'gtfs'
+    };
+    return localStorage.getItem(`livemap_${key}`) || defaults[key];
+}
+
+function set_setting(key, value) {
+    localStorage.setItem(`livemap_${key}`, value);
+}
+
+function update_data_source(new_source) {
+    const old_source = get_setting('data_source');
+    if(new_source === old_source) {
+        return;
     }
+    set_setting('data_source', new_source);
+    location.reload();
+}
+// window.update_data_source = update_data_source;
+
+function init_settings() {
+    const data_source = get_setting('data_source');
+    const data_source_radios = document.querySelectorAll('input[name="positions_data_source"]');
+    data_source_radios.forEach(radio => {
+        radio.toggleAttribute('checked', radio.value === data_source);
+        radio.addEventListener('change', (e) => {
+            if(e.target.checked) {
+                update_data_source(e.target.value);
+            }
+        });
+    });
 }