Control map via URL options (#58)
* Add URL options to hide different aspects of the default display, helpful for starting for a kiosk * Fix spacing in changes * More options to move map left/right/up/down * Allow movement in all directions, consolidate some code * Add controls for units and range rings from url * Swap left/right,up/down behavior for map moves * Convert #nohistory anchor tag to a query param like the other parameters. Make query parameters values explicitly state true * Fix for enableRings so it will toggle the setting * Use show/hide parameter values to avoid having a a showX/hideX parameter for each option, Rename some parameters, resize map when hiding banner/sidebar, cleanup Co-authored-by: BuildTools <unconfigured@null.spigotmc.org> Co-authored-by: eric1tran <eric1tran@gmail.com>
This commit is contained in:
sigwx
GitHub
parent
af1f4f84a9
commit
a0b0038df7
|
|
@ -421,7 +421,9 @@ var CurrentHistoryFetch = null;
|
|||
var PositionHistoryBuffer = [];
|
||||
var HistoryItemsReturned = 0;
|
||||
function start_load_history() {
|
||||
if (PositionHistorySize > 0 && window.location.hash != '#nohistory') {
|
||||
let url = new URL(window.location.href);
|
||||
let params = new URLSearchParams(url.search);
|
||||
if (PositionHistorySize > 0 && params.get('nohistory') !== 'true') {
|
||||
$("#loader_progress").attr('max',PositionHistorySize);
|
||||
console.log("Starting to load history (" + PositionHistorySize + " items)");
|
||||
//Load history items in parallel
|
||||
|
|
@ -515,6 +517,112 @@ function end_load_history() {
|
|||
// And kick off one refresh immediately.
|
||||
fetchData();
|
||||
|
||||
// update the display layout from any URL query strings
|
||||
applyUrlQueryStrings();
|
||||
}
|
||||
|
||||
// Function to apply any URL query value to the map before we start
|
||||
function applyUrlQueryStrings() {
|
||||
// if asked, toggle featrues at start
|
||||
let url = new URL(window.location.href);
|
||||
let params = new URLSearchParams(url.search);
|
||||
|
||||
// be sure we start with a 'clean' layout, but only if we need it
|
||||
var allOptions = [
|
||||
'banner',
|
||||
'altitudeChart',
|
||||
'aircraftTrails',
|
||||
'map',
|
||||
'sidebar',
|
||||
'zoomOut',
|
||||
'zoomIn',
|
||||
'moveNorth',
|
||||
'moveSouth',
|
||||
'moveWest',
|
||||
'moveEast',
|
||||
'displayUnits',
|
||||
'rangeRings',
|
||||
'ringCount',
|
||||
'ringBaseDistance',
|
||||
'ringInterval'
|
||||
]
|
||||
|
||||
var needReset = false;
|
||||
for (var option of allOptions) {
|
||||
if (params.has(option)) {
|
||||
needReset = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (needReset) {
|
||||
resetMap();
|
||||
}
|
||||
|
||||
if (params.get('banner') === 'hide') {
|
||||
hideBanner();
|
||||
}
|
||||
if (params.get('altitudeChart') === 'hide') {
|
||||
$('#altitude_checkbox').removeClass('settingsCheckboxChecked');
|
||||
$('#altitude_chart').hide();
|
||||
}
|
||||
if (params.get('altitudeChart') === 'show') {
|
||||
$('#altitude_checkbox').addClass('settingsCheckboxChecked');
|
||||
$('#altitude_chart').show();
|
||||
}
|
||||
if (params.get('aircraftTrails') === 'show') {
|
||||
selectAllPlanes();
|
||||
}
|
||||
if (params.get('aircraftTrails') === 'hide') {
|
||||
deselectAllPlanes();
|
||||
}
|
||||
if (params.get('map') === 'show') {
|
||||
showMap();
|
||||
}
|
||||
if (params.get('map') === 'hide') {
|
||||
expandSidebar();
|
||||
}
|
||||
if (params.get('sidebar') === 'show') {
|
||||
$("#sidebar_container").show();
|
||||
updateMapSize();
|
||||
}
|
||||
if (params.get('sidebar') === 'hide') {
|
||||
$("#sidebar_container").hide();
|
||||
updateMapSize();
|
||||
}
|
||||
if (params.get('zoomOut')) {
|
||||
zoomMap(params.get('zoomOut'), true);
|
||||
}
|
||||
if (params.get('zoomIn')) {
|
||||
zoomMap(params.get('zoomIn'), false);
|
||||
}
|
||||
if (params.get('moveNorth')) {
|
||||
moveMap(params.get('moveNorth'), true, false);
|
||||
}
|
||||
if (params.get('moveSouth')) {
|
||||
moveMap(params.get('moveSouth'), true, true);
|
||||
}
|
||||
if (params.get('moveEast')) {
|
||||
moveMap(params.get('moveEast'), false, false);
|
||||
}
|
||||
if (params.get('moveWest')) {
|
||||
moveMap(params.get('moveWest'), false, true);
|
||||
}
|
||||
if (params.get('displayUnits')) {
|
||||
setDisplayUnits(params.get('displayUnits'));
|
||||
}
|
||||
if (params.get('rangeRings')) {
|
||||
setRangeRingVisibility(params.get('rangeRings'));
|
||||
}
|
||||
if (params.get('ringCount')) {
|
||||
setRingCount(params.get('ringCount'));
|
||||
}
|
||||
if (params.get('ringBaseDistance')) {
|
||||
setRingBaseDistance(params.get('ringBaseDistance'));
|
||||
}
|
||||
if (params.get('ringInterval')) {
|
||||
setRingInterval(params.get('ringInterval'));
|
||||
}
|
||||
}
|
||||
|
||||
// Make a LineString with 'points'-number points
|
||||
|
|
@ -1632,7 +1740,9 @@ function updateMapSize() {
|
|||
}
|
||||
|
||||
function toggleSidebarVisibility(e) {
|
||||
e.preventDefault();
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
$("#sidebar_container").toggle();
|
||||
$("#expand_sidebar_control").toggle();
|
||||
$("#toggle_sidebar_button").toggleClass("show_sidebar");
|
||||
|
|
@ -1641,7 +1751,9 @@ function toggleSidebarVisibility(e) {
|
|||
}
|
||||
|
||||
function expandSidebar(e) {
|
||||
e.preventDefault();
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
$("#map_container").hide()
|
||||
$("#toggle_sidebar_control").hide();
|
||||
$("#splitter").hide();
|
||||
|
|
@ -1809,12 +1921,16 @@ function initializeUnitsSelector() {
|
|||
}
|
||||
|
||||
function onDisplayUnitsChanged(e) {
|
||||
var displayUnits = e.target.value;
|
||||
// Save display units to local storage
|
||||
localStorage['displayUnits'] = displayUnits;
|
||||
DisplayUnits = displayUnits;
|
||||
|
||||
setAltitudeLegend(displayUnits);
|
||||
if (e) {
|
||||
var displayUnits = e.target.value;
|
||||
// Save display units to local storage
|
||||
localStorage['displayUnits'] = displayUnits;
|
||||
}
|
||||
|
||||
DisplayUnits = localStorage['displayUnits'];
|
||||
|
||||
setAltitudeLegend(DisplayUnits);
|
||||
|
||||
// Update filters
|
||||
updatePlaneFilter();
|
||||
|
|
@ -1832,7 +1948,7 @@ function onDisplayUnitsChanged(e) {
|
|||
// Reset map scale line units
|
||||
OLMap.getControls().forEach(function(control) {
|
||||
if (control instanceof ol.control.ScaleLine) {
|
||||
control.setUnits(displayUnits);
|
||||
control.setUnits(DisplayUnits);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -2025,52 +2141,160 @@ function toggleLayer(element, layer) {
|
|||
|
||||
// check status.json if it has a serial number for a flightfeeder
|
||||
function flightFeederCheck() {
|
||||
$.ajax('/status.json', {
|
||||
success: function(data) {
|
||||
if (data.type === "flightfeeder") {
|
||||
isFlightFeeder = true;
|
||||
updatePiAwareOrFlightFeeder();
|
||||
}
|
||||
}
|
||||
})
|
||||
$.ajax('/status.json', {
|
||||
success: function(data) {
|
||||
if (data.type === "flightfeeder") {
|
||||
isFlightFeeder = true;
|
||||
updatePiAwareOrFlightFeeder();
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// updates the page to replace piaware with flightfeeder references
|
||||
function updatePiAwareOrFlightFeeder() {
|
||||
if (isFlightFeeder) {
|
||||
$('.piAwareLogo').hide();
|
||||
$('.flightfeederLogo').show();
|
||||
PageName = 'FlightFeeder SkyAware';
|
||||
} else {
|
||||
$('.flightfeederLogo').hide();
|
||||
$('.piAwareLogo').show();
|
||||
PageName = 'PiAware SkyAware';
|
||||
}
|
||||
refreshPageTitle();
|
||||
if (isFlightFeeder) {
|
||||
$('.piAwareLogo').hide();
|
||||
$('.flightfeederLogo').show();
|
||||
PageName = 'FlightFeeder SkyAware';
|
||||
} else {
|
||||
$('.flightfeederLogo').hide();
|
||||
$('.piAwareLogo').show();
|
||||
PageName = 'PiAware SkyAware';
|
||||
}
|
||||
refreshPageTitle();
|
||||
}
|
||||
|
||||
// Function to hide banner (ex. for a kiosk to show maximum data possible)
|
||||
function hideBanner() {
|
||||
document.getElementById("header").style.display = 'none';
|
||||
document.getElementById("layout_container").style.height = '100%';
|
||||
updateMapSize();
|
||||
}
|
||||
|
||||
// Helper function to restrict the range of the inputs
|
||||
function restrictUrlRequest(c) {
|
||||
let v = parseFloat(c);
|
||||
if (v < 0) {
|
||||
v = 0;
|
||||
} else if (v > 5) {
|
||||
v = 5;
|
||||
}
|
||||
return v;
|
||||
}
|
||||
|
||||
// Function to zoom, but not by too much per 'amount'
|
||||
function zoomMap(c, zoomOut) {
|
||||
c = restrictUrlRequest(c);
|
||||
ZoomLvl = OLMap.getView().getZoom();
|
||||
if (zoomOut) {
|
||||
ZoomLvl *= Math.pow(0.95, c);
|
||||
} else {
|
||||
ZoomLvl /= Math.pow(0.95, c);
|
||||
}
|
||||
localStorage['ZoomLvl'] = ZoomLvl;
|
||||
OLMap.getView().setZoom(ZoomLvl);
|
||||
}
|
||||
|
||||
// Function to move map at 0.005% of the extent per 'move'
|
||||
function moveMap(c, moveVertical, moveDownLeft) {
|
||||
c = restrictUrlRequest(c);
|
||||
let cn = OLMap.getView().getCenter();
|
||||
let dist = 0;
|
||||
if (moveVertical) {
|
||||
dist = ol.extent.getHeight(OLMap.getView().getProjection().getExtent());
|
||||
} else {
|
||||
dist = ol.extent.getWidth(OLMap.getView().getProjection().getExtent());
|
||||
}
|
||||
let d = c * (dist * .005);
|
||||
// 'up' or 'right' needs a negative number
|
||||
if (moveDownLeft) {
|
||||
d *= -1.0;
|
||||
}
|
||||
if (moveVertical) {
|
||||
ol.coordinate.add(cn, [0, d]);
|
||||
} else {
|
||||
ol.coordinate.add(cn, [d, 0]);
|
||||
}
|
||||
OLMap.getView().setCenter(cn);
|
||||
}
|
||||
|
||||
// Function to set displayUnits
|
||||
function setDisplayUnits(units) {
|
||||
if (units === 'nautical') {
|
||||
localStorage['displayUnits'] = "nautical";
|
||||
} else if (units === 'metric') {
|
||||
localStorage['displayUnits'] = "metric";
|
||||
} else if (units === 'imperial') {
|
||||
localStorage['displayUnits'] = "imperial";
|
||||
}
|
||||
onDisplayUnitsChanged();
|
||||
}
|
||||
|
||||
// Function to set range ring visibility
|
||||
function setRangeRingVisibility (showhide) {
|
||||
var show = null;
|
||||
|
||||
if (showhide === 'hide') {
|
||||
$('#sitepos_checkbox').removeClass('settingsCheckboxChecked')
|
||||
show = false;
|
||||
} else if (showhide === 'show') {
|
||||
$('#sitepos_checkbox').addClass('settingsCheckboxChecked')
|
||||
show = true;
|
||||
} else {
|
||||
return
|
||||
}
|
||||
|
||||
ol.control.LayerSwitcher.forEachRecursive(layerGroup, function(lyr) {
|
||||
if (lyr.get('name') === 'site_pos') {
|
||||
lyr.setVisible(show);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// simple function to set range ring count
|
||||
function setRingCount(val) {
|
||||
localStorage['SiteCirclesCount'] = val;
|
||||
setRangeRings();
|
||||
createSiteCircleFeatures();
|
||||
}
|
||||
|
||||
// simple function to set range ring distance
|
||||
function setRingBaseDistance(val) {
|
||||
localStorage['SiteCirclesBaseDistance'] = val;
|
||||
setRangeRings();
|
||||
createSiteCircleFeatures();
|
||||
}
|
||||
|
||||
// simple function to set range ring interval
|
||||
function setRingInterval(val) {
|
||||
localStorage['SiteCirclesInterval'] = val;
|
||||
setRangeRings();
|
||||
createSiteCircleFeatures();
|
||||
}
|
||||
|
||||
// Set range ring globals and populate form values
|
||||
function setRangeRings() {
|
||||
SiteCirclesCount = Number(localStorage['SiteCirclesCount']) || DefaultSiteCirclesCount;
|
||||
SiteCirclesBaseDistance = Number(localStorage['SiteCirclesBaseDistance']) || DefaultSiteCirclesBaseDistance;
|
||||
SiteCirclesInterval = Number(localStorage['SiteCirclesInterval']) || DefaultSiteCirclesInterval;
|
||||
SiteCirclesCount = Number(localStorage['SiteCirclesCount']) || DefaultSiteCirclesCount;
|
||||
SiteCirclesBaseDistance = Number(localStorage['SiteCirclesBaseDistance']) || DefaultSiteCirclesBaseDistance;
|
||||
SiteCirclesInterval = Number(localStorage['SiteCirclesInterval']) || DefaultSiteCirclesInterval;
|
||||
|
||||
// Populate text fields with current values
|
||||
$('#range_ring_count').val(SiteCirclesCount);
|
||||
$('#range_ring_base').val(SiteCirclesBaseDistance);
|
||||
$('#range_ring_interval').val(SiteCirclesInterval);
|
||||
// Populate text fields with current values
|
||||
$('#range_ring_count').val(SiteCirclesCount);
|
||||
$('#range_ring_base').val(SiteCirclesBaseDistance);
|
||||
$('#range_ring_interval').val(SiteCirclesInterval);
|
||||
}
|
||||
|
||||
// redraw range rings with form values
|
||||
function onSetRangeRings() {
|
||||
// Save state to localStorage
|
||||
localStorage.setItem('SiteCirclesCount', parseFloat($("#range_ring_count").val().trim()));
|
||||
localStorage.setItem('SiteCirclesBaseDistance', parseFloat($("#range_ring_base").val().trim()));
|
||||
localStorage.setItem('SiteCirclesInterval', parseFloat($("#range_ring_interval").val().trim()));
|
||||
// Save state to localStorage
|
||||
localStorage.setItem('SiteCirclesCount', parseFloat($("#range_ring_count").val().trim()));
|
||||
localStorage.setItem('SiteCirclesBaseDistance', parseFloat($("#range_ring_base").val().trim()));
|
||||
localStorage.setItem('SiteCirclesInterval', parseFloat($("#range_ring_interval").val().trim()));
|
||||
|
||||
setRangeRings();
|
||||
setRangeRings();
|
||||
|
||||
createSiteCircleFeatures();
|
||||
createSiteCircleFeatures();
|
||||
}
|
||||
|
||||
function toggleColumn(div, checkbox, toggled) {
|
||||
|
|
@ -2132,4 +2356,4 @@ function toggleAllColumns(switchToggle) {
|
|||
}
|
||||
|
||||
localStorage.setItem('selectAllColumnsCheckbox', selectAllColumnsCheckbox);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue