w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2025-10-27 16:59:25 +00:00
Code Issues 11 Packages Projects Releases Wiki Activity

Extract common JS code from spots and alerts JS #17

Browse Source
This commit is contained in:
Ian Renton
2025-10-07 20:11:29 +01:00
parent ff8cac274a
commit 63429c16c3
6 changed files with 123 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
views/webpage_alerts.tpl
View File

@@ -42,5 +42,6 @@
</p> </p>
</div> </div>
<script src="/js/common.js"></script>
<script src="/js/alerts.js"></script> <script src="/js/alerts.js"></script>
<script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>

2
views/webpage_base.tpl
View File

@@ -73,7 +73,7 @@
</main> </main>
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"> <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md-4 mb-0 text-body-secondary">Made with love by <a href="https://ianrenton.com">Ian, MØTRT</a> and other contributors.</p> <p class="col-md-4 mb-0 text-body-secondary">Made with love by <a href="https://ianrenton.com" class="text-body-secondary">Ian, MØTRT</a> and other contributors.</p>
<ul class="nav col-md-4 justify-content-end"> <ul class="nav col-md-4 justify-content-end">
<li class="nav-item"> <li class="nav-item">
<a href="/about#faq" class="nav-link px-2 text-body-secondary">FAQ</a> <a href="/about#faq" class="nav-link px-2 text-body-secondary">FAQ</a>

1
views/webpage_spots.tpl
View File

@@ -75,5 +75,6 @@
</p> </p>
</div> </div>
<script src="/js/common.js"></script>
<script src="/js/spots.js"></script> <script src="/js/spots.js"></script>
<script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>

119
webassets/js/alerts.js
View File

@@ -3,10 +3,6 @@ const REFRESH_INTERVAL_SEC = 60 * 30;
// Storage for the alert data that the server gives us. // Storage for the alert data that the server gives us.
var alerts = [] var alerts = []
// Storage for the options that the server gives us. This will define our filters.
var options = {};
// Last time we updated the alerts list on display.
var lastUpdateTime;
// Load alerts and populate the table. // Load alerts and populate the table.
function loadAlerts() { function loadAlerts() {
@@ -34,29 +30,6 @@ function buildQueryString() {
return str; return str;
} }
// For a parameter, such as dx_continent, get the query string for the current filter options.
function getQueryStringFor(parameter) {
return parameter + "=" + encodeURIComponent(getSelectedFilterOptions(parameter));
}
// For a parameter, such as dx_continent, get the filter options that are currently selected in the UI.
function getSelectedFilterOptions(parameter) {
return $(".filter-button-" + parameter).filter(function() {
return this.checked;
}).map(function() {
return this.value;
}).get().join(",");
}
// For a parameter, such as dx_continent, return true if all possible options are enabled. (In this case, we don't need
// to bother sending this as one of the query parameters to the API; no parameter provided implies "send everything".)
function allFilterOptionsSelected(parameter) {
var filter = $(".filter-button-" + parameter).filter(function() {
return !this.checked;
}).get();
return filter.length == 0;
}
// Update the alerts table // Update the alerts table
function updateTable() { function updateTable() {
// Populate table with headers // Populate table with headers
@@ -178,103 +151,11 @@ function loadOptions() {
}); });
} }
// Generate filter card
function generateFilterCard(displayName, filterQuery, options) {
let $col = $("<div class='col'>")
let $card = $("<div class='card'>");
let $card_body = $("<div class='card-body'>");
$card_body.append(`<h5 class='card-title'>${displayName}</h5>`);
$p = $("<p class='card-text filter-card-text'>");
// Create a button for each option
options.forEach(o => {
$p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery} storeable-checkbox" name="options" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-primary" for="filter-button-${filterQuery}-${o}">${o}</label> `);
});
// Create All/None buttons
$p.append(` <span style="display: inline-block"><button id="filter-button-${filterQuery}-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', true);">All</button>&nbsp;<button id="filter-button-${filterQuery}-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', false);">None</button></span>`);
// Compile HTML elements to return
$card_body.append($p);
$card.append($card_body);
$col.append($card);
return $col;
}
// Method called when "All" or "None" is clicked
function toggleFilterButtons(filterQuery, state) {
$(".filter-button-" + filterQuery).each(function() {
$(this).prop('checked', state);
});
filtersUpdated();
}
// Method called when any filter is changed to reload the alerts and persist the filter settings. // Method called when any filter is changed to reload the alerts and persist the filter settings.
function filtersUpdated() { function filtersUpdated() {
loadAlerts(); loadAlerts();
saveSettings(); saveSettings();
} }
// Update the refresh timing display
function updateRefreshDisplay() {
if (lastUpdateTime != null) {
let count = REFRESH_INTERVAL_SEC;
let secSinceUpdate = moment.duration(moment().diff(lastUpdateTime)).asSeconds();
updatingString = "Updating..."
if (secSinceUpdate < REFRESH_INTERVAL_SEC) {
count = REFRESH_INTERVAL_SEC - secSinceUpdate;
if (count <= 60) {
var number = count.toFixed(0);
updatingString = "Updating in " + number + " second" + (number != "1" ? "s" : "") + ".";
} else {
var number = Math.round(count / 60.0).toFixed(0);
updatingString = "Updating in " + number + " minute" + (number != "1" ? "s" : "") + ".";
}
}
$("#timing-container").text("Last updated at " + lastUpdateTime.format('HH:mm') + " UTC. " + updatingString);
}
}
// Utility function to escape HTML characters from a string.
function escapeHtml(str) {
if (typeof str !== 'string') {
return '';
}
const escapeCharacter = (match) => {
switch (match) {
case '&': return '&amp;';
case '<': return '&lt;';
case '>': return '&gt;';
case '"': return '&quot;';
case '\'': return '&#039;';
case '`': return '&#096;';
default: return match;
}
};
return str.replace(/[&<>"'`]/g, escapeCharacter);
}
// Save settings to local storage
function saveSettings() {
// Find all storeable UI elements, store a key of "element id:property name" mapped to the value of that
// property. For a checkbox, that's the "checked" property.
$(".storeable-checkbox").each(function() {
localStorage.setItem($(this)[0].id + ":checked", $(this)[0].checked);
});
$(".storeable-select").each(function() {
localStorage.setItem($(this)[0].id + ":value", $(this)[0].value);
});
}
// Load settings from local storage and set up the filter selectors
function loadSettings() {
// Find all local storage entries and push their data to the corresponding UI element
Object.keys(localStorage).forEach(function(key) {
// Split the key back into an element ID and a property
var split = key.split(":");
$("#" + split[0]).prop(split[1], JSON.parse(localStorage.getItem(key)));
});
}
// Set up UI element event listeners, after the document is ready // Set up UI element event listeners, after the document is ready
function setUpEventListeners() { function setUpEventListeners() {
$("#settings-button").click(function() { $("#settings-button").click(function() {

120
webassets/js/common.js Normal file
View File

@@ -0,0 +1,120 @@
// Storage for the options that the server gives us. This will define our filters.
var options = {};
// Last time we updated the spots/alerts list on display.
var lastUpdateTime;
// For a parameter, such as dx_continent, get the query string for the current filter options.
function getQueryStringFor(parameter) {
return parameter + "=" + encodeURIComponent(getSelectedFilterOptions(parameter));
}
// For a parameter, such as dx_continent, get the filter options that are currently selected in the UI.
function getSelectedFilterOptions(parameter) {
return $(".filter-button-" + parameter).filter(function() {
return this.checked;
}).map(function() {
return this.value;
}).get().join(",");
}
// For a parameter, such as dx_continent, return true if all possible options are enabled. (In this case, we don't need
// to bother sending this as one of the query parameters to the API; no parameter provided implies "send everything".)
function allFilterOptionsSelected(parameter) {
var filter = $(".filter-button-" + parameter).filter(function() {
return !this.checked;
}).get();
return filter.length == 0;
}
// Generate filter card
function generateFilterCard(displayName, filterQuery, options) {
let $col = $("<div class='col'>")
let $card = $("<div class='card'>");
let $card_body = $("<div class='card-body'>");
$card_body.append(`<h5 class='card-title'>${displayName}</h5>`);
$p = $("<p class='card-text filter-card-text'>");
// Create a button for each option
options.forEach(o => {
$p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery} storeable-checkbox" name="options" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-primary" for="filter-button-${filterQuery}-${o}">${o}</label> `);
});
// Create All/None buttons
$p.append(` <span style="display: inline-block"><button id="filter-button-${filterQuery}-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', true);">All</button>&nbsp;<button id="filter-button-${filterQuery}-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', false);">None</button></span>`);
// Compile HTML elements to return
$card_body.append($p);
$card.append($card_body);
$col.append($card);
return $col;
}
// Method called when "All" or "None" is clicked
function toggleFilterButtons(filterQuery, state) {
$(".filter-button-" + filterQuery).each(function() {
$(this).prop('checked', state);
});
filtersUpdated();
}
// Update the refresh timing display
function updateRefreshDisplay() {
if (lastUpdateTime != null) {
let count = REFRESH_INTERVAL_SEC;
let secSinceUpdate = moment.duration(moment().diff(lastUpdateTime)).asSeconds();
updatingString = "Updating..."
if (secSinceUpdate < REFRESH_INTERVAL_SEC) {
count = REFRESH_INTERVAL_SEC - secSinceUpdate;
if (count <= 60) {
var number = count.toFixed(0);
updatingString = "Updating in " + number + " second" + (number != "1" ? "s" : "") + ".";
} else {
var number = Math.round(count / 60.0).toFixed(0);
updatingString = "Updating in " + number + " minute" + (number != "1" ? "s" : "") + ".";
}
}
$("#timing-container").text("Last updated at " + lastUpdateTime.format('HH:mm') + " UTC. " + updatingString);
}
}
// Utility function to escape HTML characters from a string.
function escapeHtml(str) {
if (typeof str !== 'string') {
return '';
}
const escapeCharacter = (match) => {
switch (match) {
case '&': return '&amp;';
case '<': return '&lt;';
case '>': return '&gt;';
case '"': return '&quot;';
case '\'': return '&#039;';
case '`': return '&#096;';
default: return match;
}
};
return str.replace(/[&<>"'`]/g, escapeCharacter);
}
// Save settings to local storage
function saveSettings() {
// Find all storeable UI elements, store a key of "element id:property name" mapped to the value of that
// property. For a checkbox, that's the "checked" property.
$(".storeable-checkbox").each(function() {
localStorage.setItem($(this)[0].id + ":checked", $(this)[0].checked);
});
$(".storeable-select").each(function() {
localStorage.setItem($(this)[0].id + ":value", $(this)[0].value);
});
}
// Load settings from local storage and set up the filter selectors
function loadSettings() {
// Find all local storage entries and push their data to the corresponding UI element
Object.keys(localStorage).forEach(function(key) {
// Split the key back into an element ID and a property
var split = key.split(":");
$("#" + split[0]).prop(split[1], JSON.parse(localStorage.getItem(key)));
});
}

118
webassets/js/spots.js
View File

@@ -3,10 +3,6 @@ const REFRESH_INTERVAL_SEC = 60;
// Storage for the spot data that the server gives us. // Storage for the spot data that the server gives us.
var spots = [] var spots = []
// Storage for the options that the server gives us. This will define our filters.
var options = {};
// Last time we updated the spots list on display.
var lastUpdateTime;
// Load spots and populate the table. // Load spots and populate the table.
function loadSpots() { function loadSpots() {
@@ -33,29 +29,6 @@ function buildQueryString() {
return str; return str;
} }
// For a parameter, such as dx_continent, get the query string for the current filter options.
function getQueryStringFor(parameter) {
return parameter + "=" + encodeURIComponent(getSelectedFilterOptions(parameter));
}
// For a parameter, such as dx_continent, get the filter options that are currently selected in the UI.
function getSelectedFilterOptions(parameter) {
return $(".filter-button-" + parameter).filter(function() {
return this.checked;
}).map(function() {
return this.value;
}).get().join(",");
}
// For a parameter, such as dx_continent, return true if all possible options are enabled. (In this case, we don't need
// to bother sending this as one of the query parameters to the API; no parameter provided implies "send everything".)
function allFilterOptionsSelected(parameter) {
var filter = $(".filter-button-" + parameter).filter(function() {
return !this.checked;
}).get();
return filter.length == 0;
}
// Update the spots table // Update the spots table
function updateTable() { function updateTable() {
// Populate table with headers // Populate table with headers
@@ -249,26 +222,6 @@ function addBandColourCSS(band_options) {
$('html > head').append($style); $('html > head').append($style);
} }
// Generate filter card
function generateFilterCard(displayName, filterQuery, options) {
let $col = $("<div class='col'>")
let $card = $("<div class='card'>");
let $card_body = $("<div class='card-body'>");
$card_body.append(`<h5 class='card-title'>${displayName}</h5>`);
$p = $("<p class='card-text filter-card-text'>");
// Create a button for each option
options.forEach(o => {
$p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery} storeable-checkbox" name="options" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-primary" for="filter-button-${filterQuery}-${o}">${o}</label> `);
});
// Create All/None buttons
$p.append(` <span style="display: inline-block"><button id="filter-button-${filterQuery}-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', true);">All</button>&nbsp;<button id="filter-button-${filterQuery}-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', false);">None</button></span>`);
// Compile HTML elements to return
$card_body.append($p);
$card.append($card_body);
$col.append($card);
return $col;
}
// Generate bands filter card. This one is a special case. // Generate bands filter card. This one is a special case.
function generateBandsFilterCard(displayName, filterQuery, band_options) { function generateBandsFilterCard(displayName, filterQuery, band_options) {
let $col = $("<div class='col'>") let $col = $("<div class='col'>")
@@ -292,83 +245,12 @@ function generateBandsFilterCard(displayName, filterQuery, band_options) {
return $col; return $col;
} }
// Method called when "All" or "None" is clicked
function toggleFilterButtons(filterQuery, state) {
$(".filter-button-" + filterQuery).each(function() {
$(this).prop('checked', state);
});
filtersUpdated();
}
// Method called when any filter is changed to reload the spots and persist the filter settings. // Method called when any filter is changed to reload the spots and persist the filter settings.
function filtersUpdated() { function filtersUpdated() {
loadSpots(); loadSpots();
saveSettings(); saveSettings();
} }
// Update the refresh timing display
function updateRefreshDisplay() {
if (lastUpdateTime != null) {
let count = REFRESH_INTERVAL_SEC;
let secSinceUpdate = moment.duration(moment().diff(lastUpdateTime)).asSeconds();
updatingString = "Updating..."
if (secSinceUpdate < REFRESH_INTERVAL_SEC) {
count = REFRESH_INTERVAL_SEC - secSinceUpdate;
if (count <= 60) {
var number = count.toFixed(0);
updatingString = "Updating in " + number + " second" + (number != "1" ? "s" : "") + ".";
} else {
var number = Math.round(count / 60.0).toFixed(0);
updatingString = "Updating in " + number + " minute" + (number != "1" ? "s" : "") + ".";
}
}
$("#timing-container").text("Last updated at " + lastUpdateTime.format('HH:mm') + " UTC. " + updatingString);
}
}
// Utility function to escape HTML characters from a string.
function escapeHtml(str) {
if (typeof str !== 'string') {
return '';
}
const escapeCharacter = (match) => {
switch (match) {
case '&': return '&amp;';
case '<': return '&lt;';
case '>': return '&gt;';
case '"': return '&quot;';
case '\'': return '&#039;';
case '`': return '&#096;';
default: return match;
}
};
return str.replace(/[&<>"'`]/g, escapeCharacter);
}
// Save settings to local storage
function saveSettings() {
// Find all storeable UI elements, store a key of "element id:property name" mapped to the value of that
// property. For a checkbox, that's the "checked" property.
$(".storeable-checkbox").each(function() {
localStorage.setItem($(this)[0].id + ":checked", $(this)[0].checked);
});
$(".storeable-select").each(function() {
localStorage.setItem($(this)[0].id + ":value", $(this)[0].value);
});
}
// Load settings from local storage and set up the filter selectors
function loadSettings() {
// Find all local storage entries and push their data to the corresponding UI element
Object.keys(localStorage).forEach(function(key) {
// Split the key back into an element ID and a property
var split = key.split(":");
$("#" + split[0]).prop(split[1], JSON.parse(localStorage.getItem(key)));
});
}
// Set up UI element event listeners, after the document is ready // Set up UI element event listeners, after the document is ready
function setUpEventListeners() { function setUpEventListeners() {
$("#status-button").click(function() { $("#status-button").click(function() {