mirror of
https://git.ianrenton.com/ian/spothole.git
synced 2026-02-04 09:14:30 +00:00
178 lines
11 KiB
HTML
178 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
|
|
<div id="map">
|
|
<div id="settingsButtonRowMap" class="mt-3 px-3" style="z-index: 1002; position: relative;">
|
|
<div class="row">
|
|
<div class="col-auto me-auto pt-3"></div>
|
|
<div class="col-auto">
|
|
<p class="d-inline-flex gap-1">
|
|
<button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i> Filters</button>
|
|
<button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i> Display</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="filters-area" class="appearing-panel card mb-3">
|
|
<div class="card-header text-white bg-primary">
|
|
<div class="row">
|
|
<div class="col-auto me-auto">
|
|
Filters
|
|
</div>
|
|
<div class="col-auto d-inline-flex">
|
|
<button id="close-filters-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeFiltersPanel();"></button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row row-cols-1 g-4 mb-4 row-cols-md-3">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Bands</h5>
|
|
<p id="band-options" class="card-text spothole-card-text"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">SIGs</h5>
|
|
<p id="sig-options" class="card-text spothole-card-text"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Sources</h5>
|
|
<p id="source-options" class="card-text spothole-card-text"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-md-3 g-4">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">DX Continent</h5>
|
|
<p id="dx-continent-options" class="card-text spothole-card-text"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">DE Continent</h5>
|
|
<p id="de-continent-options" class="card-text spothole-card-text"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Modes</h5>
|
|
<p id="mode-options" class="card-text spothole-card-text"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="display-area" class="appearing-panel card mb-3">
|
|
<div class="card-header text-white bg-primary">
|
|
<div class="row">
|
|
<div class="col-auto me-auto">
|
|
Display
|
|
</div>
|
|
<div class="col-auto d-inline-flex">
|
|
<button id="close-display-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeDisplayPanel();"></button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="display-container" class="row row-cols-1 row-cols-md-4 g-4">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Spot Age</h5>
|
|
<p class="card-text spothole-card-text">Last
|
|
<select id="max-spot-age" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="filtersUpdated();" style="width: 5em; display: inline-block;">
|
|
{% for a in web_ui_options["max-spot-age"] %}
|
|
<option value="{{a*60}}" {% if web_ui_options["max-spot-age-default"] == a*60 %}selected{% end %}>{{a}}</option>
|
|
{% end %}
|
|
</select>
|
|
minutes
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Map Features</h5>
|
|
<div class="form-group">
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input storeable-checkbox" type="checkbox" id="mapShowGeodesics" value="mapShowGeodesics" oninput="displayUpdated();">
|
|
<label class="form-check-label" for="mapShowGeodesics">Geodesic Lines</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Theme</h5>
|
|
<p class="card-text spothole-card-text">
|
|
<label class="form-check-label" for="color-scheme">UI color scheme</label>
|
|
<select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
|
|
<option value="auto" {% if web_ui_options["color-scheme-default"] == "auto" %}selected{% end %}>Automatic</option>
|
|
<option value="light" {% if web_ui_options["color-scheme-default"] == "light" %}selected{% end %}>Light</option>
|
|
<option value="dark" {% if web_ui_options["color-scheme-default"] == "dark" %}selected{% end %}>Dark</option>
|
|
</select>
|
|
</p>
|
|
<p class="card-text spothole-card-text">
|
|
<label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
|
|
<select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
|
|
<option value="PSK Reporter" {% if web_ui_options["band-color-scheme-default"] == "PSK Reporter" %}selected{% end %}>PSK Reporter</option>
|
|
<option value="PSK Reporter (Adjusted)" {% if web_ui_options["band-color-scheme-default"] == "PSK Reporter (Adjusted)" %}selected{% end %}>PSK Reporter (Adjusted)</option>
|
|
<option value="RBN" {% if web_ui_options["band-color-scheme-default"] == "RBN" %}selected{% end %}>RBN</option>
|
|
<option value="Ham Rainbow" {% if web_ui_options["band-color-scheme-default"] == "Ham Rainbow" %}selected{% end %}>Ham Rainbow</option>
|
|
<option value="Ham Rainbow (Reverse)" {% if web_ui_options["band-color-scheme-default"] == "Ham Rainbow (Reverse)" %}selected{% end %}>Ham Rainbow (Reverse)</option>
|
|
<option value="Kate Morley" {% if web_ui_options["band-color-scheme-default"] == "Kate Morley" %}selected{% end %}>Kate Morley</option>
|
|
<option value="ColorBrewer" {% if web_ui_options["band-color-scheme-default"] == "ColorBrewer" %}selected{% end %}>ColorBrewer</option>
|
|
<option value="IWantHue" {% if web_ui_options["band-color-scheme-default"] == "IWantHue" %}selected{% end %}>IWantHue</option>
|
|
<option value="IWantHue (Color Blind)" {% if web_ui_options["band-color-scheme-default"] == "IWantHue (Color Blind)" %}selected{% end %}>IWantHue (Color Blind)</option>
|
|
<option value="Mokole" {% if web_ui_options["band-color-scheme-default"] == "Mokole" %}selected{% end %}>Mokole</option>
|
|
</select>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-extra-markers@1.2.2/dist/css/leaflet.extra-markers.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/leaflet-providers@2.0.0/leaflet-providers.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/leaflet-extra-markers@1.2.2/src/assets/js/leaflet.extra-markers.min.js" type="module"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.min.js"></script>
|
|
|
|
<script>
|
|
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
|
|
</script>
|
|
<script src="/js/common.js?v=7"></script>
|
|
<script src="/js/spotsbandsandmap.js?v=7"></script>
|
|
<script src="/js/map.js?v=7"></script>
|
|
<script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
|
|
|
|
{% end %} |