MapGoogle, poprawki w stopce i kontaktach
This commit is contained in:
dm
@@ -1,20 +1,217 @@
|
||||
---
|
||||
import DefaultLayout from "../../layouts/DefaultLayout.astro";
|
||||
import MapGoogle from "../../components/maps/MapGoogle.astro";
|
||||
import MapSwitch from "../../components/maps/MapSwitch.astro";
|
||||
|
||||
const seo = {
|
||||
title: "Mapa zasięgu – FUZ",
|
||||
description: "Mapa zasięgu – FUZ",
|
||||
canonical: "/mapa-zasiegu"
|
||||
};
|
||||
const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
|
||||
const lat = 52.597388
|
||||
const lon = 21.456797;
|
||||
---
|
||||
|
||||
<DefaultLayout seo={seo}>
|
||||
<section class="fuz-section">
|
||||
<div class="fuz-container">
|
||||
<h1 class="fuz-hero-title">Mapa zasięgu – FUZ</h1>
|
||||
<p class="mt-4 text-gray-600 dark:text-gray-300">
|
||||
Ta podstrona jest na razie szkieletem. Możemy tu później wczytać treść z YAML.
|
||||
</p>
|
||||
<DefaultLayout title="FUZ Mapa zasięgu sieci">
|
||||
|
||||
<section class="flex flex-col md:flex-row min-h-screen">
|
||||
|
||||
<!-- PANEL (mobile = pełna szerokość, desktop = 340px) -->
|
||||
<aside
|
||||
class="w-full md:w-[340px]
|
||||
bg-[var(--fuz-bg)]
|
||||
text-[var(--fuz-text)]
|
||||
border-r border-gray-200 dark:border-slate-700
|
||||
pt-6 px-6
|
||||
flex flex-col gap-6
|
||||
overflow-y-auto
|
||||
z-40">
|
||||
|
||||
<h3 class="text-3xl">Pokaż zasięg sieci</h3>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<MapSwitch id="fiber-toggle" label="ZASIĘG ŚWIATŁOWODU" />
|
||||
<MapSwitch id="radio-toggle" label="ZASIĘG RADIOWY" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h3 class="text-3xl">Sprawdź dostępność</h3>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm mb-1 text-[var(--fuz-text)]">Miasto</label>
|
||||
<select id="city" class="fuz-input"></select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm mb-1">Ulica</label>
|
||||
<select id="street" class="fuz-input"></select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm mb-1">Numer</label>
|
||||
<input id="number" type="text" placeholder="np. 1A" class="fuz-input" />
|
||||
</div>
|
||||
|
||||
<button id="search-btn" class="btn btn-outline w-full py-3">
|
||||
Sprawdź dostępność →
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<!-- MAPA (mobile = wysoka, desktop = pełna wysokość) -->
|
||||
<div class="flex-1 relative z-10 min-h-[70vh] md:min-h-0">
|
||||
<MapGoogle
|
||||
apiKey={apiKey}
|
||||
lat={lat}
|
||||
lon={lon}
|
||||
zoom={14}
|
||||
showMarker={true}
|
||||
mode="full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ======================= -->
|
||||
<!-- LOGIKA MAPY (KML warstwy) -->
|
||||
<!-- ======================= -->
|
||||
<script is:inline>
|
||||
let fiberLayer = null;
|
||||
let radioLayer = null;
|
||||
|
||||
function getActiveMap() {
|
||||
if (!window.fuzMaps) return null;
|
||||
// pobierz pierwszą mapę na stronie
|
||||
return Object.values(window.fuzMaps)[0] || null;
|
||||
}
|
||||
|
||||
function fiberRangeShow() {
|
||||
const map = getActiveMap();
|
||||
if (!map) return;
|
||||
|
||||
if (fiberLayer) {
|
||||
fiberLayer.setMap(null);
|
||||
fiberLayer = null;
|
||||
} else {
|
||||
fiberLayer = new google.maps.KmlLayer(
|
||||
"https://www.google.com/maps/d/kml?mid=1Or8SF_9qx6QMdidS-99V_jqQuhF9de0&forcekml=1",
|
||||
{ suppressInfoWindows: true, preserveViewport: false }
|
||||
);
|
||||
fiberLayer.setMap(map);
|
||||
}
|
||||
}
|
||||
|
||||
function radioRangeShow() {
|
||||
const map = getActiveMap();
|
||||
if (!map) return;
|
||||
|
||||
if (radioLayer) {
|
||||
radioLayer.setMap(null);
|
||||
radioLayer = null;
|
||||
} else {
|
||||
radioLayer = new google.maps.KmlLayer(
|
||||
"https://www.google.com/maps/d/kml?mid=1c08LxJ9uCbWWfCCyopJmAMLQI1rmTkA&forcekml=1",
|
||||
{ suppressInfoWindows: true, preserveViewport: true }
|
||||
);
|
||||
radioLayer.setMap(map);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- LOGIKA MIASTO/ULICA/NUMER – możesz tymczasowo wyłączyć API -->
|
||||
<script is:inline>
|
||||
const citySelect = document.getElementById("city");
|
||||
const streetSelect = document.getElementById("street");
|
||||
const numberInput = document.getElementById("number");
|
||||
const searchBtn = document.getElementById("search-btn");
|
||||
|
||||
async function loadCities() {
|
||||
try {
|
||||
const res = await fetch("/api/cities");
|
||||
if (!res.ok) throw new Error("API off");
|
||||
const list = await res.json();
|
||||
citySelect.innerHTML = list.map(c => `<option>${c}</option>`).join("");
|
||||
loadStreets();
|
||||
} catch {
|
||||
console.info("API do zasięgu wyłączone — czeka na backend.");
|
||||
}
|
||||
}
|
||||
|
||||
async function loadStreets() {
|
||||
try {
|
||||
const city = citySelect.value;
|
||||
const res = await fetch(`/api/streets?city=${encodeURIComponent(city)}`);
|
||||
if (!res.ok) throw new Error("API off");
|
||||
const list = await res.json();
|
||||
streetSelect.innerHTML = list.map(s => `<option>${s}</option>`).join("");
|
||||
} catch {
|
||||
// ignorujemy na razie
|
||||
}
|
||||
}
|
||||
|
||||
citySelect?.addEventListener("change", loadStreets);
|
||||
|
||||
searchBtn?.addEventListener("click", async () => {
|
||||
const city = citySelect.value;
|
||||
const street = streetSelect.value;
|
||||
const number = numberInput.value.trim();
|
||||
|
||||
if (!number) {
|
||||
showToast("Podaj numer domu / lokalu.", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/search", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ city, street, number }),
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error("API off");
|
||||
|
||||
const result = await res.json();
|
||||
|
||||
if (!result) {
|
||||
showToast("Brak usługi pod wskazanym adresem.", "info");
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof showAddressOnMap === "function") {
|
||||
showAddressOnMap(result);
|
||||
showToast("Znaleziono adres – zaznaczono na mapie!", "success");
|
||||
}
|
||||
} catch {
|
||||
showToast("API do zasięgu wyłączone — czeka na backend.", "info");
|
||||
}
|
||||
});
|
||||
|
||||
loadCities();
|
||||
</script>
|
||||
|
||||
<!-- TOAST -->
|
||||
<div
|
||||
id="toast"
|
||||
class="fixed top-5 left-1/2 -translate-x-1/2 z-[9999]
|
||||
space-y-3 flex flex-col items-center"
|
||||
></div>
|
||||
|
||||
<script is:inline>
|
||||
function showToast(message, type = "info") {
|
||||
const toastContainer = document.getElementById("toast");
|
||||
|
||||
const el = document.createElement("div");
|
||||
el.className = `
|
||||
px-4 py-3 rounded-xl shadow-lg text-white text-sm
|
||||
animate-fade-in-down
|
||||
${type === "error" ? "bg-red-600" : ""}
|
||||
${type === "success" ? "bg-green-600" : ""}
|
||||
${type === "info" ? "bg-[var(--fuz-accent)]" : ""}
|
||||
`;
|
||||
el.textContent = message;
|
||||
|
||||
toastContainer.appendChild(el);
|
||||
|
||||
setTimeout(() => {
|
||||
el.style.opacity = 0;
|
||||
el.style.transform = "translateY(-10px)";
|
||||
setTimeout(() => el.remove(), 300);
|
||||
}, 3000);
|
||||
}
|
||||
</script>
|
||||
|
||||
</DefaultLayout>
|
||||
|
||||
Reference in New Issue
Block a user