vatsimfox/src/static/viewer.js

// Fetching user's ATC session informations from API
let userSession = {};

fetch(ATC_API_URL, {}).then(response => response.json()).then(result => {
    if (result && (result["result"] == "not found" || result["result"] == "error")) {
        showAlert("Error while getting ATC information", result["message"]);
        return;
    }

    for (let session of result["items"]) {
        // Separate each session by it's connection ID
        let session_id = session["connection_id"]["id"];
        userSession[session_id] = session;

        // Long line. Not in the whole file, but still bad
        // Open to any suggestions about fix it
        let sessionElement = "<div id='" + session_id + "' class='fox_button fox_atc mb-2 p-2 text-center text-bg-white border border-1 rounded-3'>" + session["connection_id"]["callsign"] + "</div>";
        $("#fox_atc").append(sessionElement);
    }

    // Click event handler to left menu button
    $(".fox_atc").click(function() {
        if ($(this).hasClass("fox_atc_active")) return;
        
        $(".fox_atc_active").removeClass("fox_atc_active");
        $(this).addClass("fox_atc_active");

        showSession(userSession[$(this).attr("id")]);
    });

    showSession(result["items"][0]);
});

// Fetching user's flightplans from VATSIM API
let userFlightplans = {};

fetch(FLIGHTPLANS_API_URL, {}).then(response => response.json()).then(result => {
    if (result && result["result"] == "not found")
        return

    for (let flightplan of result) {
        // Separate each flight by it's connection ID
        // Like it was with ATC session's
        let flightplan_id = flightplan["id"]
        userFlightplans[flightplan_id] = flightplan;
        userFlightplans[flightplan_id]["not_filed"] = flightplan["connection_id"] === 0
        
        // Long line again
        let flightplanElement = "<div id="+ flightplan_id +" class='fox_button mb-2 p-2 text-center text-bg-white border border-1 rounded-3'>" + flightplan["callsign"] + "</div>";
        $("#fox_flightplans").append(flightplanElement);
    }

    $(".fox_button").click(function() {
        if ($(this).hasClass("fox_active")) return;
    
        $(".fox_active").removeClass("fox_active");
        $(this).addClass("fox_active");
    
        showFlight(userFlightplans[$(this).attr("id")]);
    });

    showFlight(result[0]);
});

// Fetching airports information
// Get it from localhost
// Becase I think it would be much faster than getting it from VATSIM API
let airports = {};

$.getJSON("/static/data/airports.json", function(json) {
        airports = json;
    }
);

// Map creation
const MAP_ELEMENT = L.map("fox_map");
const MAP_DEFAULT_ZOOM_VIEW = 2;
const MAP_DEFAULT_TARGET = L.latLng("0", "0");
let line = null;

MAP_ELEMENT.setView(MAP_DEFAULT_TARGET, MAP_DEFAULT_ZOOM_VIEW);

L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    subdomains: "abcd",
    maxZoom: 20,
    minZoom: 2
}).addTo(MAP_ELEMENT);

// Function to delete route line from map
function mapDeleteDraws() {
    if (!line) return;
    MAP_ELEMENT.removeLayer(line);
    line = null;
}

// Function to draw flight path on map
function mapDrawFlight(flight) {
    if (!flight) return;
    mapDeleteDraws();

    let departureAirport = flight["dep"];
    let arrivalAirport = flight["arr"];

    line = L.polyline([
        [
            airports[departureAirport]["lat"],
            airports[departureAirport]["lon"]
        ],
        [
            airports[arrivalAirport]["lat"],
            airports[arrivalAirport]["lon"]
        ]
    ], {color: "red"}).addTo(MAP_ELEMENT);

    MAP_ELEMENT.fitBounds(line.getBounds());
}

// Function to show data in right flight bar
function showFlight(flight) {
    if (!flight) return;

    // Changing text in each class
    // FP before _ - means flightplan
    $(".fp_is_filed").text(flight["not_filed"] ? "This flightplan wasn't used" : "");
    $(".fp_callsign").text(flight["callsign"]);
    $(".fp_depa_city").text(airports[flight["dep"]]["city"]);
    $(".fp_arra_city").text(airports[flight["arr"]]["city"]);
    $(".fp_aicraft").text(flight["aircraft"]);
    $(".fp_entime").text(flight["hrsenroute"] + ":" + flight["minenroute"]);
    $(".fp_depa").text(flight["dep"]);
    $(".fp_arra").text(flight["arr"]);
    $(".fp_altna").text(flight["alt"]);
    $(".fp_type").text(flight["flight_type"]);
    $(".fp_speed").text(flight["cruisespeed"]);
    $(".fp_alt").text(flight["altitude"]);
    $(".fp_route").text(flight["route"]);
    $(".fp_remarks").text(flight["rmks"]);
    $(".fp_squawk").text(flight["assignedsquawk"]);
    $(".fp_filed").text(flight["filed"].replace("T", " "));

    mapDrawFlight(flight);
}

// Function to show ATC session 
function showSession(session) {
    if (!session) return;

    $(".atc_callsign").text(session["connection_id"]["callsign"]);
    $(".atc_start_time").text(session["connection_id"]["start"].replace("T", " "));
    $(".atc_end_time").text(session["connection_id"]["end"].replace("T", " "));
    $(".atc_trackedair").text(session["aircrafttracked"]);
    $(".atc_seenair").text(session["aircraftseen"]);
    $(".atc_squawks").text(session["squawksassigned"]);
    $(".atc_transfers").text(session["handoffsinitiated"]);
    $(".atc_received").text(session["handoffsreceived"]);
}

function showAlert(title, message) {
    $("#notification_wrapper").css("display", "block");
    $("#notification_title").text(title);
    $("#notification_message").text(message);
}