spothole/webassets/js/add-spot.js

// Credentials schema per provider name. Defines the fields to collect and how to label them.
var PROVIDER_CREDENTIAL_SCHEMAS = {
    // todo Figure out SOTA authentication
    // see e.g. https://github.com/ham2k/app-polo/blob/main/src/extensions/activities/sota/SOTAAccount.jsx
    //          https://github.com/ham2k/app-polo/blob/main/src/store/apis/apiSOTA/apiSOTA.js
    // Refresh token? Way to show user that they need to log in again because cached credentials aren't valid?
    // todo type: text/password distinction on text boxes so API keys can be obscured
    "SOTA": [
        { key: "access_token", label: "SOTA Access Token", help: "" },
        { key: "id_token", label: "SOTA ID Token", help: "TODO SOTA authentication to provide this..." }
    ],
    "ParksNPeaks": [
        { key: "user_id", label: "Parks N Peaks User ID", help: "" },
        { key: "api_key", label: "Parks N Peaks API Key", help: "Get your API key from your Parks N Peaks account." }
    ],
    "ZLOTA": [
        { key: "user_id", label: "ZLOTA User ID", help: "" },
        { key: "api_key", label: "ZLOTA User PIN", help: "Get your PIN from your ZLOTA account." }
    ],
    "Tiles": [
        { key: "offline_spot_gateway_pin", label: "Offline Spot Gateway PIN", help: "Get your PIN from your Tiles on the Air account profile." }
    ]
};

// Load server options. Once a successful callback is made from this, we can populate the choice boxes in the form and load
// any saved values from local storage.
function loadOptions() {
    $.getJSON('/api/v1/options', function(jsonData) {
        // Store options
        options = jsonData;

        // Populate modes drop-down
        $.each(options["modes"], function (i, m) {
            $('#mode').append($('<option>', {
                value: m,
                text : m
            }));
        });

        // Populate SIG drop-down
        $.each(options["sigs"], function (i, sig) {
            $('#sig').append($('<option>', {
                value: sig.name,
                text : sig.name
            }));
        });

        // Load reCAPTCHA if a site key is configured (key is inlined into page by server)
        if (window._recaptchaSiteKey) {
            loadRecaptcha(window._recaptchaSiteKey);
        }

        // Load settings from settings storage now all the controls are available
        loadSettings();

        // Update the upstream area for any pre-selected SIG
        updateUpstreamArea();
    });
}

// Load and inject the reCAPTCHA script
function loadRecaptcha(siteKey) {
    window._recaptchaSiteKey = siteKey;
    if (!document.getElementById('recaptcha-script')) {
        var script = document.createElement('script');
        script.id = 'recaptcha-script';
        script.src = 'https://www.google.com/recaptcha/api.js?render=explicit&onload=renderRecaptcha';
        script.async = true;
        script.defer = true;
        document.head.appendChild(script);
    }
    $("#recaptcha-area").show();
}

// Called by reCAPTCHA after its script loads
function renderRecaptcha() {
    window._recaptchaWidgetId = grecaptcha.render('recaptcha-widget', {
        sitekey: window._recaptchaSiteKey,
        size: 'normal'
    });
}

// Update the "Send spot to..." area based on the currently selected SIG
function updateUpstreamArea() {
    if (!window._allowUpstreamSpotting || !options || !options["spot_submit_providers"]) {
        $("#upstream-area").hide();
        return;
    }

    var sig = $("#sig").val();
    var providers = (sig && options["spot_submit_providers"][sig]) ? options["spot_submit_providers"][sig] : [];

    if (providers.length === 0) {
        $("#upstream-area").hide();
        return;
    }

    $("#upstream-area").show();

    // Update the provider selector
    $("#upstream-provider-select").empty();
    $.each(providers, function(i, name) {
        $("#upstream-provider-select").append($('<option>', { value: name, text: name }));
    });

    if (providers.length > 1) {
        $("#upstream-provider-label").text("upstream spot sources:");
        $("#upstream-provider-select-col").show();
    } else {
        $("#upstream-provider-label").text(providers[0]);
        $("#upstream-provider-select-col").hide();
    }

    // Show the credentials button if this provider has an authentication mechanism and we need input from the user
    updateCredentialsButton();
}

// Update the credentials button visibility based on selected provider
function updateCredentialsButton() {
    var providerName = getSelectedUpstreamProvider();
    if (providerName && PROVIDER_CREDENTIAL_SCHEMAS[providerName]) {
        $("#upstream-credentials-btn").show();
    } else {
        $("#upstream-credentials-btn").hide();
    }
}

// Get the currently selected upstream provider name
function getSelectedUpstreamProvider() {
    var providers = (options && options["spot_submit_providers"] && $("#sig").val())
        ? (options["spot_submit_providers"][$("#sig").val()] || [])
        : [];
    if (providers.length === 0) return null;
    if (providers.length === 1) return providers[0];
    return $("#upstream-provider-select").val();
}

// Show the credentials modal for the currently selected upstream provider
function showCredentialsModal() {
    var providerName = getSelectedUpstreamProvider();
    if (!providerName || !PROVIDER_CREDENTIAL_SCHEMAS[providerName]) return;

    var schema = PROVIDER_CREDENTIAL_SCHEMAS[providerName];
    var stored = loadCredentials(providerName);

    $("#credentials-provider-name").text(providerName);
    $("#credentials-fields").empty();

    $.each(schema, function(i, field) {
        var val = stored[field.key] || "";
        var html = '<div class="mb-3">';
        html += '<label for="cred-' + field.key + '" class="form-label">' + field.label + '</label>';
        html += '<input type="text" class="form-control" id="cred-' + field.key + '" value="' + $('<div>').text(val).html() + '">';
        if (field.help) {
            html += '<div class="form-text">' + field.help + '</div>';
        }
        html += '</div>';
        $("#credentials-fields").append(html);
    });

    // Store provider name for saveCredentials()
    $("#credentials-modal").data("provider", providerName);
    new bootstrap.Modal(document.getElementById('credentials-modal')).show();
}

// Save credentials from the modal to local storage
function saveCredentials() {
    var providerName = $("#credentials-modal").data("provider");
    if (!providerName || !PROVIDER_CREDENTIAL_SCHEMAS[providerName]) return;

    var schema = PROVIDER_CREDENTIAL_SCHEMAS[providerName];
    var creds = {};
    $.each(schema, function(i, field) {
        creds[field.key] = $("#cred-" + field.key).val();
    });
    localStorage.setItem("upstream-credentials-" + providerName, JSON.stringify(creds));
    bootstrap.Modal.getInstance(document.getElementById('credentials-modal')).hide();
}

// Load credentials for a provider from local storage
function loadCredentials(providerName) {
    var stored = localStorage.getItem("upstream-credentials-" + providerName);
    return stored ? JSON.parse(stored) : {};
}

// Method called to add a spot to the server
function addSpot() {
    try {
        // Save settings (this will save "your call" for future use)
        saveSettings();

        // Unpack the user's entered values
        var dx = $("#dx-call").val().toUpperCase();
        var freqStr = $("#freq").val();
        var mode = $("#mode")[0].value;
        var sig = $("#sig")[0].value;
        var sigRef = $("#sig-ref").val();
        var dxGrid = $("#dx-grid").val();
        var comment = $("#comment").val();
        var de = $("#de-call").val().toUpperCase();

        var spot = {}
        if (dx != "") {
            spot["dx_call"] = dx;
        } else {
            // todo maybe for neatness just make all these error/rejections server side rather than having logic in two places
            showAddSpotError("A DX callsign is required in order to spot.");
            return;
        }
        if (freqStr != "") {
            spot["freq"] = parseFloat(freqStr) * 1000;
        } else {
            showAddSpotError("A frequency is required in order to spot.");
            return;
        }
        if (mode != "") {
            spot["mode"] = mode;
        }
        if (sig != "") {
            spot["sig"] = sig;
        }
        if (sigRef != "") {
            spot["sig_refs"] = [{id: sigRef}];
        }
        if (dxGrid != "") {
            spot["dx_grid"] = dxGrid;
        }
        if (comment != "") {
            spot["comment"] = comment;
        }
        if (de != "") {
            spot["de_call"] = de;
        } else {
            showAddSpotError("A spotter callsign is required in order to spot.");
            return;
        }
        spot["time"] = moment.utc().valueOf() / 1000.0;

        // Upstream submission
        var submitUpstream = $("#submit-upstream").is(":checked");
        var upstreamProviderName = getSelectedUpstreamProvider();
        if (submitUpstream && upstreamProviderName) {
            if (!sig) {
                showAddSpotError("A SIG must be selected to submit upstream.");
                return;
            }
            if (!sigRef && upstreamProviderName !== "Tiles") {
                showAddSpotError("A SIG reference is required to submit upstream.");
                return;
            }
            if (!dxGrid && upstreamProviderName === "Tiles") {
                showAddSpotError("A grid reference is required to submit upstream to Tiles on the Air.");
                return;
            }
            if (!mode && upstreamProviderName === "Tiles") {
                showAddSpotError("A mode is required to submit upstream to Tiles on the Air.");
                return;
            }

            var creds = loadCredentials(upstreamProviderName);
            spot["submit_upstream"] = true;
            spot["upstream_provider"] = upstreamProviderName;
            spot["upstream_credentials"] = creds;

            // Add CAPTCHA token if reCAPTCHA is loaded
            if (window._recaptchaWidgetId !== undefined) {
                var token = grecaptcha.getResponse(window._recaptchaWidgetId);
                if (!token) {
                    showAddSpotError("Please complete the CAPTCHA to submit upstream.");
                    return;
                }
                spot["captcha_token"] = token;
            }
        }

        $.ajax("/api/v1/spot", {
            data : JSON.stringify(spot),
            contentType : 'application/json',
            type : 'POST',
            timeout: 10000,
            success: async function (result) {
                // Reset CAPTCHA for next use
                if (window._recaptchaWidgetId !== undefined) {
                    grecaptcha.reset(window._recaptchaWidgetId);
                }
                if (result && result.startsWith && result.startsWith("Warning")) {
                    $("#result-good").html("<div class='alert alert-warning fade show mb-0 mt-4' role='alert'><i class='fa-solid fa-triangle-exclamation'></i> " + result + " Returning you to the spots list...</div>");
                } else {
                    $("#result-good").html("<div class='alert alert-success fade show mb-0 mt-4' role='alert'><i class='fa-solid fa-check'></i> Spot submitted. Returning you to the spots list...</div>");
                }
                $("#result-bad").html("");
                setTimeout(() => {
                    $("#result-good").hide();
                    window.location.replace("/");
                }, 2000);
            },
            error: function (result) {
                if (window._recaptchaWidgetId !== undefined) {
                    grecaptcha.reset(window._recaptchaWidgetId);
                }
                if (result.responseText) {
                    showAddSpotError(result.responseText.slice(1, -1));
                } else {
                    showAddSpotError("The server did not return a response.");
                }
            }
        });
    } catch (error) {
        showAddSpotError(error);
    }
    return false;
}

// Show an "add spot" error.
function showAddSpotError(text) {
    var div = $("<div class='alert alert-danger alert-dismissible fade show mb-0 mt-4' role='alert'></div>");
    div.append("<i class='fa-solid fa-triangle-exclamation'></i> ");
    div.append(document.createTextNode(text));
    div.append("<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>");
    $("#result-bad").empty().append(div);
}

// Force callsign and mode capitalisation
$("#dx-call").change(function () {
    $(this).val($(this).val().trim().toUpperCase());
});
$("#de-call").change(function () {
    $(this).val($(this).val().trim().toUpperCase());
});
$("#mode").change(function () {
    $(this).val($(this).val().trim().toUpperCase());
});

// Update upstream area and credentials button when SIG changes
$("#sig").change(function () {
    updateUpstreamArea();
});

// Update credentials button when provider selector changes
$("#upstream-provider-select").change(function () {
    updateCredentialsButton();
});

// Startup
$(document).ready(function() {
    // Load options
    loadOptions();
});