From 7bdc26c9264eab8069bdba209c7c0dd95f6fc20d Mon Sep 17 00:00:00 2001 From: Ian Renton Date: Fri, 18 Sep 2026 20:49:24 +0100 Subject: [PATCH] Activity filter on upcoming page #147 --- static/js/alerts.js | 3 +- static/js/common.js | 57 +++++++++++++++++++++++++++++++++++ static/js/spotsbandsandmap.js | 57 ----------------------------------- templates/alerts.html | 8 +++-- 4 files changed, 64 insertions(+), 61 deletions(-) diff --git a/static/js/alerts.js b/static/js/alerts.js index 085c4d5..09a58c7 100644 --- a/static/js/alerts.js +++ b/static/js/alerts.js @@ -24,7 +24,7 @@ function loadAlerts() { // Build a query string for the API, based on the filters that the user has selected. function buildQueryString() { let str = "?"; - ["dx_continent", "source"].forEach(fn => { + ["dx_continent", "source", "sig"].forEach(fn => { if (!allFilterOptionsSelected(fn)) { str = str + getQueryStringFor(fn) + "&"; } @@ -332,6 +332,7 @@ function loadOptions() { // Populate the filters panel generateMultiToggleFilterCard("#dx_continent_options", "dx_continent", options["continents"]); generateMultiToggleFilterCard("#source-options", "source", options["alert_providers"]); + generateActivitiesMultiToggleFilterCard(options["sigs"]); // Load URL params. These may select things from the various filter & display options, so the function needs // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress diff --git a/static/js/common.js b/static/js/common.js index d68c0b8..b5d50c6 100644 --- a/static/js/common.js +++ b/static/js/common.js @@ -135,6 +135,63 @@ function generateMultiToggleFilterCard(elementID, filterQuery, options) { $(elementID).append(`
All   None
`); } +// Generate a collapsable section for the activities filter card, and append it to the given list. The section is +// expanded by default if isExpanded is true. +function appendActivityFilterSection($list, sectionId, heading, isExapanded, buildBody) { + const collapseId = `activity-options-${sectionId}-collapse`; + const $li = $('
  • '); + $li.append(``); + const $body = $(`
    `); + buildBody($body); + $li.append($body); + $list.append($li); +} + +// Generate activities filter card. This one is also a special case. +function generateActivitiesMultiToggleFilterCard(activity_options) { + const $list = $('
      '); + + appendActivityFilterSection($list, 'traditional', 'Traditional', true, $body => { + const $grid = $('
      '); + activity_options.filter(o => o["sig_type"] === "TRADITIONAL").forEach(o => { + const domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, ""); + $grid.append(`
      `); + }); + $body.append(`
      `); + $body.append($grid); + }); + + appendActivityFilterSection($list, 'adventure', 'Adventure', true, $body => { + const $grid = $('
      '); + activity_options.filter(o => o["sig_type"] === "ADVENTURE").forEach(o => { + const domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, ""); + $grid.append(`
      `); + }); + $body.append($grid); + }); + + appendActivityFilterSection($list, 'regional', 'Regional', false, $body => { + const $grid = $('
      '); + activity_options.filter(o => o["sig_type"] === "REGIONAL").forEach(o => { + const domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, ""); + $grid.append(`
      `); + }); + $body.append($grid); + }); + + appendActivityFilterSection($list, 'event', 'Event', false, $body => { + const $grid = $('
      '); + activity_options.filter(o => o["sig_type"] === "EVENT").forEach(o => { + const domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, ""); + $grid.append(`
      `); + }); + $body.append($grid); + }); + + $("#activity-options").append($list); + $("#activity-options").append(`
      All   None
      `); +} + // Method called when "All" or "None" is clicked function toggleFilterButtons(filterQuery, state) { $(".filter-button-" + filterQuery).each(function () { diff --git a/static/js/spotsbandsandmap.js b/static/js/spotsbandsandmap.js index 7854a32..8845a88 100644 --- a/static/js/spotsbandsandmap.js +++ b/static/js/spotsbandsandmap.js @@ -38,63 +38,6 @@ function setHamHFBandToggles() { filtersUpdated(); } -// Generate a collapsable section for the activities filter card, and append it to the given list. The section is -// expanded by default if isExpanded is true. -function appendActivityFilterSection($list, sectionId, heading, isExapanded, buildBody) { - const collapseId = `activity-options-${sectionId}-collapse`; - const $li = $('
    • '); - $li.append(``); - const $body = $(`
      `); - buildBody($body); - $li.append($body); - $list.append($li); -} - -// Generate activities filter card. This one is also a special case. -function generateActivitiesMultiToggleFilterCard(activity_options) { - const $list = $('
        '); - - appendActivityFilterSection($list, 'traditional', 'Traditional', true, $body => { - const $grid = $('
        '); - activity_options.filter(o => o["sig_type"] === "TRADITIONAL").forEach(o => { - const domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, ""); - $grid.append(`
        `); - }); - $body.append(`
        `); - $body.append($grid); - }); - - appendActivityFilterSection($list, 'adventure', 'Adventure', true, $body => { - const $grid = $('
        '); - activity_options.filter(o => o["sig_type"] === "ADVENTURE").forEach(o => { - const domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, ""); - $grid.append(`
        `); - }); - $body.append($grid); - }); - - appendActivityFilterSection($list, 'regional', 'Regional', false, $body => { - const $grid = $('
        '); - activity_options.filter(o => o["sig_type"] === "REGIONAL").forEach(o => { - const domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, ""); - $grid.append(`
        `); - }); - $body.append($grid); - }); - - appendActivityFilterSection($list, 'event', 'Event', false, $body => { - const $grid = $('
        '); - activity_options.filter(o => o["sig_type"] === "EVENT").forEach(o => { - const domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, ""); - $grid.append(`
        `); - }); - $body.append($grid); - }); - - $("#activity-options").append($list); - $("#activity-options").append(`
        All   None
        `); -} - // Generate modes filter card. This one is also a special case. function generateModesMultiToggleFilterCard(mode_options) { const $grid = $('
        '); diff --git a/templates/alerts.html b/templates/alerts.html index b6dc4d8..e25f02e 100644 --- a/templates/alerts.html +++ b/templates/alerts.html @@ -18,13 +18,15 @@
        {% module Template("cards/dx_continent.html", web_ui_options=web_ui_options) %} +
        + {% module Template("cards/duration_limit_alerts.html", web_ui_options=web_ui_options) %} +
        +
        + {% module Template("cards/activities.html", web_ui_options=web_ui_options) %}
        {% module Template("cards/sources.html", web_ui_options=web_ui_options) %}
        -
        - {% module Template("cards/duration_limit_alerts.html", web_ui_options=web_ui_options) %} -