Multi select upstream providers to send spots to #95

static/js/add-spot.js

@@ -63,46 +63,46 @@ function updateUpstreamArea() {
 
     $("#upstream-area").show();
 
-    // Update the provider selector
-    $("#upstream-provider-select").empty();
+    // Rebuild the provider checkboxes, keeping any that were already checked for the previous activity
+    const previouslyChecked = getSelectedUpstreamProviders();
+    const container = $("#upstream-providers").empty();
     $.each(providers, function (i, name) {
-        $("#upstream-provider-select").append($('<option>', {value: name, text: name}));
+        const id = "submit-upstream-" + i;
+        const row = $("<div class='row g-2 align-items-center mb-1'></div>");
+        const check = $("<div class='form-check'></div>");
+        check.append($("<input class='form-check-input upstream-provider-check' type='checkbox'>")
+            .attr("id", id).val(name).prop("checked", previouslyChecked.includes(name)));
+        check.append($("<label class='form-check-label'></label>").attr("for", id).text(name));
+        row.append($("<div class='col-auto'></div>").append(check));
+
+        // Add a credentials button if this provider has an authentication mechanism and we need input from the user
+        if (PROVIDER_CREDENTIAL_SCHEMAS[name]) {
+            const button = $("<button type='button' class='btn btn-sm btn-outline-secondary'></button>")
+                .attr("aria-label", "Credentials for " + name)
+                .html("<i class='fa-solid fa-key'></i> Credentials")
+                .click(() => showCredentialsModal(name));
+            row.append($("<div class='col-auto'></div>").append(button));
+        }
+        container.append(row);
     });
-
-    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();
+    updateSpotholeOnlyCheck();
 }
 
-// Update the credentials button visibility based on selected provider
-function updateCredentialsButton() {
-    const providerName = getSelectedUpstreamProvider();
-    if (providerName && PROVIDER_CREDENTIAL_SCHEMAS[providerName]) {
-        $("#upstream-credentials-btn").show();
-    } else {
-        $("#upstream-credentials-btn").hide();
-    }
+// The "Spothole only" checkbox is checked when no upstream providers are selected
+function updateSpotholeOnlyCheck() {
+    $("#spothole-only").prop("checked", getSelectedUpstreamProviders().length === 0);
 }
 
-// Get the currently selected upstream provider name
-function getSelectedUpstreamProvider() {
-    const providers = SPOT_SUBMIT_PROVIDERS[$("#activity").val()] || [];
-    if (providers.length === 0) return null;
-    if (providers.length === 1) return providers[0];
-    return $("#upstream-provider-select").val();
+// Get the names of the upstream providers the user has chosen to send the spot to
+function getSelectedUpstreamProviders() {
+    return $(".upstream-provider-check:checked").map(function () {
+        return $(this).val();
+    }).get();
 }
 
-// Show the credentials modal for the currently selected upstream provider
-function showCredentialsModal() {
-    const providerName = getSelectedUpstreamProvider();
-    if (!providerName || !PROVIDER_CREDENTIAL_SCHEMAS[providerName]) return;
+// Show the credentials modal for the given upstream provider
+function showCredentialsModal(providerName) {
+    if (!PROVIDER_CREDENTIAL_SCHEMAS[providerName]) return;
 
     const schema = PROVIDER_CREDENTIAL_SCHEMAS[providerName];
     const stored = loadCredentials(providerName);
@@ -187,12 +187,13 @@ function addSpot() {
         }
 
         // Upstream submission
-        const submitUpstream = $("#submit-upstream").is(":checked");
-        const upstreamProviderName = getSelectedUpstreamProvider();
-        if (submitUpstream && upstreamProviderName) {
-            handling["submit_upstream"] = true;
-            handling["upstream_provider"] = upstreamProviderName;
-            handling["upstream_credentials"] = loadCredentials(upstreamProviderName);
+        const upstreamProviders = getSelectedUpstreamProviders();
+        if (upstreamProviders.length > 0) {
+            handling["upstream_providers"] = upstreamProviders;
+            handling["upstream_credentials"] = {};
+            $.each(upstreamProviders, function (i, name) {
+                handling["upstream_credentials"][name] = loadCredentials(name);
+            });
         }
 
         $.ajax("/api/v3/spot", {
@@ -262,14 +263,21 @@ $("#mode").change(function () {
     $(this).val($(this).val().trim().toUpperCase());
 });
 
-// Update upstream area and credentials button when activity changes
+// Update upstream area when activity changes
 $("#activity").change(function () {
     updateUpstreamArea();
 });
 
-// Update credentials button when provider selector changes
-$("#upstream-provider-select").change(function () {
-    updateCredentialsButton();
+// Keep the "Spothole only" checkbox in sync with the upstream provider checkboxes
+$("#upstream-providers").on("change", ".upstream-provider-check", function () {
+    updateSpotholeOnlyCheck();
+});
+
+// Clicking "Spothole only" deselects all upstream providers. It can't be unchecked directly, as that would leave
+// nowhere to send the spot; the user unchecks it implicitly by choosing an upstream provider instead.
+$("#spothole-only").change(function () {
+    $(".upstream-provider-check").prop("checked", false);
+    updateSpotholeOnlyCheck();
 });
 
 // Startup