Store astronomy location in session storage/cookie and fix moon metrics rendering
This commit is contained in:
@@ -262,21 +262,39 @@ function formatDate(date) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function loadLocation() {
|
function loadLocation() {
|
||||||
try {
|
const fallback = { label: "Home", lat: 40.0, lon: -75.0 };
|
||||||
const raw = localStorage.getItem("astro_location");
|
|
||||||
if (!raw) return { label: "Home", lat: 40.0, lon: -75.0 };
|
function fromRaw(raw) {
|
||||||
const d = JSON.parse(raw);
|
if (!raw) return null;
|
||||||
const lat = Number(d.lat);
|
try {
|
||||||
const lon = Number(d.lon);
|
const d = JSON.parse(raw);
|
||||||
if (!Number.isFinite(lat) || !Number.isFinite(lon)) throw new Error("bad loc");
|
const lat = Number(d.lat);
|
||||||
return { label: d.label || "Home", lat, lon };
|
const lon = Number(d.lon);
|
||||||
} catch {
|
if (!Number.isFinite(lat) || !Number.isFinite(lon)) return null;
|
||||||
return { label: "Home", lat: 40.0, lon: -75.0 };
|
return { label: d.label || "Home", lat, lon };
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const sessionLoc = fromRaw(sessionStorage.getItem("astro_location"));
|
||||||
|
if (sessionLoc) return sessionLoc;
|
||||||
|
|
||||||
|
const cookieMatch = document.cookie.split("; ").find(x => x.startsWith("astro_location="));
|
||||||
|
const cookieRaw = cookieMatch ? decodeURIComponent(cookieMatch.slice("astro_location=".length)) : "";
|
||||||
|
const cookieLoc = fromRaw(cookieRaw);
|
||||||
|
if (cookieLoc) {
|
||||||
|
sessionStorage.setItem("astro_location", JSON.stringify(cookieLoc));
|
||||||
|
return cookieLoc;
|
||||||
|
}
|
||||||
|
|
||||||
|
return fallback;
|
||||||
}
|
}
|
||||||
|
|
||||||
function saveLocation(loc) {
|
function saveLocation(loc) {
|
||||||
localStorage.setItem("astro_location", JSON.stringify(loc));
|
const payload = JSON.stringify(loc);
|
||||||
|
sessionStorage.setItem("astro_location", payload);
|
||||||
|
document.cookie = `astro_location=${encodeURIComponent(payload)}; path=/; SameSite=Lax`;
|
||||||
}
|
}
|
||||||
|
|
||||||
let locationState = loadLocation();
|
let locationState = loadLocation();
|
||||||
@@ -299,7 +317,6 @@ function render() {
|
|||||||
document.getElementById("moonName").textContent = moonPhaseName(age);
|
document.getElementById("moonName").textContent = moonPhaseName(age);
|
||||||
document.getElementById("moonPct").textContent =
|
document.getElementById("moonPct").textContent =
|
||||||
`${Math.round(illumination * 100)}% illuminated · ${age.toFixed(1)} days old`;
|
`${Math.round(illumination * 100)}% illuminated · ${age.toFixed(1)} days old`;
|
||||||
document.getElementById("moonAge").textContent = `${age.toFixed(1)} days`;
|
|
||||||
|
|
||||||
// Next new & full
|
// Next new & full
|
||||||
const jd = jdFromDate(date);
|
const jd = jdFromDate(date);
|
||||||
@@ -379,8 +396,8 @@ function initLocationUI() {
|
|||||||
const statusEl = document.getElementById("locStatus");
|
const statusEl = document.getElementById("locStatus");
|
||||||
|
|
||||||
labelEl.value = locationState.label || "Home";
|
labelEl.value = locationState.label || "Home";
|
||||||
latEl.value = String(locationState.lat);
|
latEl.value = Number(locationState.lat).toFixed(4);
|
||||||
lonEl.value = String(locationState.lon);
|
lonEl.value = Number(locationState.lon).toFixed(4);
|
||||||
|
|
||||||
document.getElementById("locSave").addEventListener("click", () => {
|
document.getElementById("locSave").addEventListener("click", () => {
|
||||||
const lat = Number(latEl.value);
|
const lat = Number(latEl.value);
|
||||||
@@ -391,6 +408,8 @@ function initLocationUI() {
|
|||||||
}
|
}
|
||||||
locationState = { label: labelEl.value.trim() || "Home", lat, lon };
|
locationState = { label: labelEl.value.trim() || "Home", lat, lon };
|
||||||
saveLocation(locationState);
|
saveLocation(locationState);
|
||||||
|
latEl.value = Number(locationState.lat).toFixed(4);
|
||||||
|
lonEl.value = Number(locationState.lon).toFixed(4);
|
||||||
statusEl.textContent = `Saved: ${locationState.label}`;
|
statusEl.textContent = `Saved: ${locationState.label}`;
|
||||||
render();
|
render();
|
||||||
});
|
});
|
||||||
@@ -408,8 +427,8 @@ function initLocationUI() {
|
|||||||
const data = await r.json();
|
const data = await r.json();
|
||||||
const p = data?.places?.[0];
|
const p = data?.places?.[0];
|
||||||
if (!p) throw new Error("zip");
|
if (!p) throw new Error("zip");
|
||||||
latEl.value = String(Number(p.latitude));
|
latEl.value = Number(p.latitude).toFixed(4);
|
||||||
lonEl.value = String(Number(p.longitude));
|
lonEl.value = Number(p.longitude).toFixed(4);
|
||||||
if (!labelEl.value.trim()) labelEl.value = `${p["place name"]}, ${p["state abbreviation"]}`;
|
if (!labelEl.value.trim()) labelEl.value = `${p["place name"]}, ${p["state abbreviation"]}`;
|
||||||
statusEl.textContent = "ZIP loaded";
|
statusEl.textContent = "ZIP loaded";
|
||||||
} catch {
|
} catch {
|
||||||
@@ -425,8 +444,8 @@ function initLocationUI() {
|
|||||||
statusEl.textContent = "Getting location...";
|
statusEl.textContent = "Getting location...";
|
||||||
navigator.geolocation.getCurrentPosition(
|
navigator.geolocation.getCurrentPosition(
|
||||||
(pos) => {
|
(pos) => {
|
||||||
latEl.value = String(pos.coords.latitude.toFixed(6));
|
latEl.value = String(pos.coords.latitude.toFixed(4));
|
||||||
lonEl.value = String(pos.coords.longitude.toFixed(6));
|
lonEl.value = String(pos.coords.longitude.toFixed(4));
|
||||||
if (!labelEl.value.trim()) labelEl.value = "Current Location";
|
if (!labelEl.value.trim()) labelEl.value = "Current Location";
|
||||||
statusEl.textContent = "Location loaded";
|
statusEl.textContent = "Location loaded";
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user