dandri/HaloKeymind
1
0
Fork 0
mirror of https://github.com/mikecarper/MeshCore.git synced 2026-09-26 01:33:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add interactive timezone map picker

Browse Source
This commit is contained in:
mikecarper
2026-09-16 15:22:17 -07:00
parent 675f8b13ea
commit 1f69b52af6
6 changed files with 696 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/_data/timezones-2025b-simplified.json
+421
View File
File diff suppressed because one or more lines are too long
docs/_javascript/preset_test.js
+154 -9
View File
@@ -17,6 +17,33 @@
const SCHEDULE_HORIZON_MS = 0x7fffffff;
const EARLY_JOIN_MS = 60 * 60 * 1000;
const CLOCK_RESET_COMMAND = "clkreboot";
const TIMEZONE_BOUNDARY_PATH = "../_data/timezones-2025b-simplified.json";
const TIMEZONE_MAP_STYLE = Object.freeze({
default: Object.freeze({
color: "#ffffff",
weight: 1,
opacity: 0.7,
dashArray: "3",
fillColor: "#087f8c",
fillOpacity: 0.14,
}),
hover: Object.freeze({
color: "#67204f",
weight: 2,
opacity: 1,
dashArray: "",
fillColor: "#b83280",
fillOpacity: 0.35,
}),
selected: Object.freeze({
color: "#67204f",
weight: 3,
opacity: 1,
dashArray: "",
fillColor: "#b83280",
fillOpacity: 0.5,
}),
});
class PresetTestError extends Error {}
@@ -491,6 +518,130 @@
return Promise.resolve();
}
function timeZoneBoundaryUrl() {
let baseUrl = global.location
? global.location.href
: "https://example.invalid/preset_test/";
if (typeof document !== "undefined") {
const script = document.querySelector('script[src*="_javascript/preset_test.js"]');
if (script && script.src) baseUrl = script.src;
}
return new URL(TIMEZONE_BOUNDARY_PATH, baseUrl).toString();
}
function initTimeZoneMap(root, initialTimeZone, onChange) {
const container = root.querySelector('[data-role="timezone-map"]');
const status = root.querySelector('[data-role="timezone-map-status"]');
const selectedLabel = root.querySelector('[data-role="selected-time-zone"]');
const browserButton = root.querySelector('[data-action="use-browser-time-zone"]');
const generator = root.querySelector('[data-role="url-generator"]');
const zoneInput = generator && generator.elements.tz;
let selectedZone = validateTimeZone(initialTimeZone);
let selectedLayer = null;
const layerByZone = new Map();
let map = null;
function showStatus(message, state) {
if (!status) return;
status.textContent = message;
status.dataset.state = state || "ready";
}
function setSelection(zone, options) {
const settings = options || {};
selectedZone = validateTimeZone(zone);
if (zoneInput) zoneInput.value = selectedZone;
if (selectedLabel) selectedLabel.textContent = selectedZone;
if (selectedLayer) {
selectedLayer.setStyle(TIMEZONE_MAP_STYLE.default);
selectedLayer.bringToBack();
selectedLayer = null;
}
const nextLayer = layerByZone.get(selectedZone);
if (nextLayer) {
selectedLayer = nextLayer;
selectedLayer.setStyle(TIMEZONE_MAP_STYLE.selected);
selectedLayer.bringToFront();
if (map && settings.focus) {
map.fitBounds(selectedLayer.getBounds(), { padding: [18, 18], maxZoom: 5 });
}
showStatus("Selected " + selectedZone + ".", "ready");
} else if (layerByZone.size) {
showStatus(
selectedZone + " is selected, but this zone has no visible land boundary on the map.",
"ready"
);
}
if (settings.notify && typeof onChange === "function") onChange(selectedZone);
}
if (zoneInput) zoneInput.value = selectedZone;
if (selectedLabel) selectedLabel.textContent = selectedZone;
if (browserButton) {
browserButton.addEventListener("click", function () {
setSelection(browserTimeZone(), { focus: true, notify: true });
});
}
if (!container) return;
if (!global.L || typeof global.L.map !== "function") {
showStatus(
"The map library did not load. The browser time zone is still selected.",
"error"
);
return;
}
const L = global.L;
map = L.map(container, {
minZoom: 1,
maxZoom: 8,
worldCopyJump: true,
}).setView([25, 10], 2);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
minZoom: 1,
maxZoom: 8,
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
global.fetch(timeZoneBoundaryUrl()).then(function (response) {
if (!response.ok) throw new Error("HTTP " + response.status);
return response.json();
}).then(function (geoJson) {
L.geoJSON(geoJson, {
style: TIMEZONE_MAP_STYLE.default,
onEachFeature: function (feature, layer) {
const zone = feature && feature.properties && feature.properties.tzid;
if (!zone) return;
layerByZone.set(zone, layer);
layer.bindTooltip(zone, { sticky: true });
layer.on("mouseover", function () {
if (layer !== selectedLayer) layer.setStyle(TIMEZONE_MAP_STYLE.hover);
});
layer.on("mouseout", function () {
if (layer !== selectedLayer) layer.setStyle(TIMEZONE_MAP_STYLE.default);
});
layer.on("click", function () {
setSelection(zone, { focus: true, notify: true });
});
},
}).addTo(map);
setSelection(selectedZone, { focus: true, notify: false });
global.setTimeout(function () { map.invalidateSize(); }, 0);
}).catch(function () {
showStatus(
"The time zone boundaries could not be loaded. The current selection is still usable.",
"error"
);
});
}
function init(root) {
let config;
try {
@@ -540,15 +691,8 @@
if (generator) {
generator.elements.start.value = zonedInputValue(config.startMs, config.tz);
generator.elements.end.value = zonedInputValue(config.endMs, config.tz);
const zoneSelect = generator.elements.tz;
zoneSelect.textContent = "";
supportedTimeZones(config.tz).forEach(function (zone) {
const option = document.createElement("option");
option.value = zone;
option.textContent = zone;
zoneSelect.appendChild(option);
});
zoneSelect.value = config.tz;
generator.elements.tz.value = config.tz;
setText(root, '[data-role="selected-time-zone"]', config.tz);
generator.elements.freq.value = config.freqText;
generator.elements.bw.value = config.bwText;
generator.elements.sf.value = String(config.sf);
@@ -606,6 +750,7 @@
});
generator.addEventListener("change", generateUrl);
generateUrl();
initTimeZoneMap(root, config.tz, generateUrl);
}
root.querySelectorAll("[data-copy-command]").forEach(function (button) {
docs/_stylesheets/preset_test.css
+83
View File
@@ -289,6 +289,80 @@
text-transform: uppercase;
}
.preset-test-timezone-picker {
grid-column: 1 / -1;
min-width: 0;
}
.preset-test-timezone-toolbar {
display: flex;
justify-content: space-between;
gap: 0.8rem;
align-items: center;
margin-bottom: 0.55rem;
}
.preset-test-timezone-toolbar > div {
display: grid;
gap: 0.1rem;
min-width: 0;
}
.preset-test-timezone-toolbar span {
color: var(--md-default-fg-color--light);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.preset-test-timezone-toolbar strong {
overflow-wrap: anywhere;
color: var(--preset-cyan);
font-family: var(--md-code-font-family);
font-size: 0.9rem;
}
.preset-test-timezone-toolbar button {
flex: 0 0 auto;
background: var(--preset-cyan);
}
.preset-test-timezone-map {
z-index: 1;
width: 100%;
height: clamp(18rem, 52vw, 31rem);
border: 1px solid var(--preset-border);
border-radius: 0.45rem;
background: color-mix(in srgb, var(--preset-cyan) 5%, var(--md-default-bg-color));
}
.preset-test-timezone-map:focus-visible {
outline: 2px solid var(--preset-cyan);
outline-offset: 2px;
}
.preset-test-timezone-map .leaflet-control-attribution {
font-size: 0.62rem;
}
.preset-test-timezone-map .leaflet-tooltip {
color: #202020;
font-family: var(--md-text-font-family);
}
.preset-test-timezone-status {
min-height: 1.2em;
margin: 0.45rem 0 0;
color: var(--md-default-fg-color--light);
font-size: 0.72rem;
}
.preset-test-timezone-status[data-state="error"] {
color: var(--md-code-hl-number-color);
font-weight: 700;
}
.preset-test-generator input,
.preset-test-generator select {
box-sizing: border-box;
@@ -406,4 +480,13 @@
.preset-test-clock > span:last-child {
grid-column: 1;
}
.preset-test-timezone-toolbar {
align-items: stretch;
flex-direction: column;
}
.preset-test-timezone-toolbar button {
align-self: start;
}
}
docs/preset_test.md
+29 -7
View File
@@ -278,13 +278,35 @@ clock</code></pre>
<span>End date and time</span>
<input type="datetime-local" name="end" step="60" required>
</label>
<label>
<span>Time zone</span>
<select name="tz" required>
<option value="UTC">UTC</option>
</select>
<small>All IANA time zones supported by this browser are listed.</small>
</label>
<div class="preset-test-timezone-picker">
<div class="preset-test-timezone-toolbar">
<div>
<span>Selected time zone</span>
<strong data-role="selected-time-zone">Detecting browser time zone…</strong>
</div>
<button type="button" data-action="use-browser-time-zone">
Use browser time zone
</button>
</div>
<input type="hidden" name="tz" required>
<div
class="preset-test-timezone-map"
data-role="timezone-map"
aria-label="Interactive world map for selecting a time zone"
></div>
<p class="preset-test-timezone-status" data-role="timezone-map-status" aria-live="polite">
Loading time zone map…
</p>
<small>
Click a region to select its IANA time zone. The initial selection
comes from <code>tz=</code> when present; otherwise it uses your
browser's time zone. Map design inspired by
<a href="https://zones.arilyn.cc/" target="_blank" rel="noopener">zones.arilyn.cc</a>;
boundaries from
<a href="https://github.com/evansiroky/timezone-boundary-builder" target="_blank" rel="noopener">Timezone Boundary Builder</a>
and © OpenStreetMap contributors.
</small>
</div>
<div class="preset-test-generator-subheading">Test radio profile</div>
<label>
<span>Frequency (MHz)</span>
mkdocs.yml
+3 -1
View File
@@ -16,6 +16,7 @@ theme:
- search.suggest
extra_css:
- https://unpkg.com/leaflet@1.9.4/dist/leaflet.css
- _stylesheets/extra.css
- _stylesheets/firmware_picker.css
- _stylesheets/telemetry_decoder.css
@@ -23,7 +24,8 @@ extra_css:
- _stylesheets/preset_test.css
extra_javascript:
- https://unpkg.com/leaflet@1.9.4/dist/leaflet.js
- _javascript/firmware_picker.js
- _javascript/telemetry_decoder.js
- _javascript/filter_tool.js
- _javascript/preset_test.js?v=20260916-2
- _javascript/preset_test.js?v=20260916-3
test/test_preset_test.js
+6
View File
@@ -1,8 +1,14 @@
"use strict";
const assert = require("assert");
const fs = require("fs");
const tool = require("../docs/_javascript/preset_test.js");
const pageSource = fs.readFileSync("docs/preset_test.md", "utf8");
assert.match(pageSource, /data-role="timezone-map"/);
assert.match(pageSource, /type="hidden" name="tz"/);
assert.doesNotMatch(pageSource, /<select name="tz"/);
const query =
"?start=2026-09-21T17:00:00-07:00" +
"&end=2026-09-23T17:00:00-07:00" +