Skip to content

Commit

Permalink
Merge pull request #6389 from OCHA-DAP/feature/HDX-9969-improve-hdx-s…
Browse files Browse the repository at this point in the history
…ignals-signup-form

HDX-9969 improve HDX Signals signup form
  • Loading branch information
alexandru-m-g authored Jul 15, 2024
2 parents e8bb6b9 + 7528c5b commit 958db03
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 10 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
$(document).ready(function () {
var $form = $('#mc_embed_signup form');
var DATASETS_GROUP = '[4389]';
var ALL_LOCATIONS = [
'[4397][16384]',
'[4405][8388608]',
'[4417][8589934592]',
'[4409][33554432]',
'[4401][65536]',
'[4421][549755813888]',
'[4425][16]',
];
var HRP_LOCATIONS = [
'[4397][32768]',
'[4397][131072]',
'[4405][16777216]',
'[4417][17179869184]',
'[4417][34359738368]',
'[4417][68719476736]',
'[4417][137438953472]',
'[4417][274877906944]',
'[4417][4]',
'[4409][67108864]',
'[4409][134217728]',
'[4409][268435456]',
'[4401][524288]',
'[4401][2097152]',
'[4401][4194304]',
'[4401][1]',
'[4401][2]',
'[4421][1099511627776]',
'[4421][2199023255552]',
'[4421][4398046511104]',
'[4421][8796093022208]',
'[4421][17592186044416]',
'[4421][35184372088832]',
'[4421][70368744177664]',
'[4421][8]',
];

function select_group(group) {
$form.find('input[name^="group' + group + '"]').prop('checked', true);
}

function unselect_group(group) {
$form.find('input[name^="group' + group + '"]').prop('checked', false);
}

function select_values(values) {
values.forEach(function (value) {
$form.find('input[name="group' + value + '"]').prop('checked', true);
});
}

function unselect_values(values) {
values.forEach(function (value) {
$form.find('input[name="group' + value + '"]').prop('checked', false);
});
}

function add_select_buttons(group_label, group) {
var select_btn = $('<button type="button" class="btn btn-link p-0 me-2"><small>Select all</small></button>');
var unselect_btn = $('<button type="button" class="btn btn-link p-0"><small>Clear all</small></button>');

group_label.append(select_btn);
group_label.append(unselect_btn);

select_btn.click(function () {
select_group(group);
});
unselect_btn.click(function () {
unselect_group(group);
});
}

$form.find('#select-all-datasets').on('click', function () {
select_group(DATASETS_GROUP);
});
$form.find('#select-all-locations').on('click', function () {
select_values(ALL_LOCATIONS);
});
$form.find('#select-all-hrp-locations').on('click', function () {
select_values(HRP_LOCATIONS);
});
$form.find('#clear-all-locations').on('click', function () {
unselect_values(ALL_LOCATIONS);
unselect_values(HRP_LOCATIONS);
});

$form.find('.mc-field-group').each(function () {
var group_label = $(this).find('p.action-buttons');
var group_name = $(this).find('input[type="checkbox"]').first().attr('name');

if (group_label.length && group_name) {
var group = group_name.split('[')[1].split(']')[0];
add_select_buttons(group_label, '[' + group + ']');
}
});

});
7 changes: 7 additions & 0 deletions ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/webassets.yml
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,13 @@ bem-blocks-scripts:
- bem.blocks/select2_field.js
- bem.blocks/textarea_field.js

hdx-signals-scripts:
<<: *common-js
output: ckanext-hdx_theme/%(version)s_hdx-signals-scripts.js
contents:
- bs_tooltip.js
- landing_pages/hdx_signals.js

hdx-form-validator:
<<: *common-js
output: ckanext-hdx_theme/%(version)s_hdx-form-validator.js
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
{% extends "landing_pages/page.html" %}

{% block scripts %}
{{ super() }}
{% asset 'hdx_theme/hdx-signals-scripts' %}
{% endblock %}

{% set CONST = h.HDX_CONST('UI_CONSTANTS')['LANDING_PAGES']['SIGNALS_LANDING_PAGE'] %}

{% block subtitle %}{{ _('HDX Signals') }}{% endblock %}
Expand Down Expand Up @@ -52,14 +57,15 @@
</div>
<div class="row">
<div class="col-12 col-md-12">
<div class="mc-field-group mb-3">
<div class="mc-field-group mb-4">
<label class="form-label" for="mce-ORG">Organisation <span class="asterisk">*</span>
</label>
<input type="text" name="ORG" class="required text form-control" id="mce-ORG"
required="" value="">
</div>
<div class="mc-field-group mb-3">
<p class="fw-bold">Datasets of interest</p>
<div class="mc-field-group mb-4">
{{ h.snippet('bem.blocks/paragraph.html', text='Step 1: Datasets of interest', paragraph_classes=["paragraph__text_font-size-medium", "fw-bold", "mb-0"]) }}
<p class="action-buttons"></p>
<ul class="list-unstyled">
<li class="form-check">
<input type="checkbox" name="group[4389][128]" class="form-check-input"
Expand Down Expand Up @@ -100,9 +106,20 @@
</ul>
</div>
</div>
<div class="col-12 col-md-12">
<div class="mc-field-group mb-4">
{{ h.snippet('bem.blocks/paragraph.html', text='Step 2: Locations of interest', paragraph_classes=["paragraph__text_font-size-medium", "fw-bold", "mb-0"]) }}
<p class="action-buttons">
<button type="button" class="btn btn-link p-0 me-2" id="select-all-locations"><small>Select all</small></button>
<button type="button" class="btn btn-link p-0 me-2" id="select-all-hrp-locations"><small>Select all HRP locations <span data-module="bs_tooltip" data-module-placement="top" data-bs-toggle="tooltip" data-bs-original-title="Locations with a Humanitarian Response Plan">[?]</span></small></button>
<button type="button" class="btn btn-link p-0" id="clear-all-locations"><small>Clear all</small></button>
</p>
</div>
</div>
<div class="col-12 col-md-6">
<div class="mc-field-group mb-3">
<p class="fw-bold">Asia and the Pacific</p>
<p class="fw-bold mb-0">Asia and the Pacific</p>
<p class="action-buttons"></p>
<ul class="list-unstyled">
<li class="form-check">
<input type="checkbox" name="group[4397][16384]" class="form-check-input"
Expand All @@ -125,7 +142,8 @@
</div>
<div class="col-12 col-md-6">
<div class="mc-field-group mb-3">
<p class="fw-bold">Europe</p>
<p class="fw-bold mb-0">Europe</p>
<p class="action-buttons"></p>
<ul class="list-unstyled">
<li class="form-check">
<input type="checkbox" name="group[4405][8388608]" class="form-check-input"
Expand All @@ -143,7 +161,8 @@
</div>
<div class="col-12 col-md-6">
<div class="mc-field-group mb-3">
<p class="fw-bold">Latin America and the Caribbean</p>
<p class="fw-bold mb-0">Latin America and the Caribbean</p>
<p class="action-buttons"></p>
<ul class="list-unstyled">
<li class="form-check">
<input type="checkbox" name="group[4417][8589934592]" class="form-check-input"
Expand Down Expand Up @@ -187,7 +206,8 @@
</div>
<div class="col-12 col-md-6">
<div class="mc-field-group mb-3">
<p class="fw-bold">Middle East and North Africa</p>
<p class="fw-bold mb-0">Middle East and North Africa</p>
<p class="action-buttons"></p>
<ul class="list-unstyled">
<li class="form-check">
<input type="checkbox" name="group[4409][33554432]" class="form-check-input"
Expand Down Expand Up @@ -217,7 +237,8 @@
</div>
<div class="col-12 col-md-6">
<div class="mc-field-group mb-3">
<p class="fw-bold">Southern and Eastern Africa</p>
<p class="fw-bold mb-0">Southern and Eastern Africa</p>
<p class="action-buttons"></p>
<ul class="list-unstyled">
<li class="form-check">
<input type="checkbox" name="group[4401][65536]" class="form-check-input"
Expand Down Expand Up @@ -255,7 +276,8 @@
</div>
<div class="col-12 col-md-6">
<div class="mc-field-group mb-3">
<p class="fw-bold">West and Central Africa</p>
<p class="fw-bold mb-0">West and Central Africa</p>
<p class="action-buttons"></p>
<ul class="list-unstyled">
<li class="form-check">
<input type="checkbox" name="group[4421][549755813888]" class="form-check-input"
Expand Down Expand Up @@ -310,7 +332,8 @@
</div>
<div class="col-12 col-md-6">
<div class="mc-field-group mb-3">
<p class="fw-bold">North America</p>
<p class="fw-bold mb-0">North America</p>
<p class="action-buttons"></p>
<ul class="list-unstyled">
<li class="form-check">
<input type="checkbox" name="group[4425][16]" class="form-check-input"
Expand Down

0 comments on commit 958db03

Please sign in to comment.