dm/fuz-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Api do wyszukiwania dostepności, korekty w powiązanych stronach

Browse Source
This commit is contained in:
dm
2025-11-24 08:40:05 +01:00
parent 20ef0d5293
commit e8881dd23b
22 changed files with 15600 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

389
src/pages/mapa-zasiegu/index.astro
View File

@@ -1,219 +1,228 @@
---
import DefaultLayout from "../../layouts/DefaultLayout.astro";
import MapGoogle from "../../components/maps/MapGoogle.astro";
import MapSwitch from "../../components/maps/MapSwitch.astro";
import MapRangeSwitch from "../../islands/MapRangeSwitch.jsx";
import RangeForm from "../../islands/RangeForm.jsx";
import "../../styles/map-google.css";
const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
const lat = 52.597388
const lat = 52.597388;
const lon = 21.456797;
const mapStyleId="8e0a97af9476f2d3"
const mapStyleId = "8e0a97af9476f2d3";
const res = await fetch(Astro.url.origin + "/api/all-cities");
const cities = await res.json();
---
<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>
<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"
mapStyleId={mapStyleId}
/>
</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>
declare global {
interface Window {
handleMapSwitch?: (mode: string) => void;
showAddressOnMap?: (result: any) => void;
fuzMaps?: any;
}
}
</script>
<!-- LOGIKA MIASTO/ULICA/NUMER – możesz tymczasowo wyłączyć API -->
<DefaultLayout title="FUZ Mapa zasięgu sieci">
<section class="flex flex-col md:flex-row h-full min-h-[80vh]">
<!-- PANEL -->
<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">Sprawdź dostępność usług</h3>
<p class="text-sm">
Wybierz swoją miejscowość i ulicę oraz numer budynku, aby sprawdzić dostępność naszych
usług internetowych w Twojej okolicy.
</p>
<!-- 🔵 WYNIOSŁY FORMULARZ (ISLAND) -->
<RangeForm client:load />
</aside>
<!-- MAPA -->
<div class="flex-1 relative min-h-[50vh] md:min-h-0">
<div class="map-range-container">
<MapRangeSwitch client:load />
</div>
<MapGoogle
apiKey={apiKey}
lat={lat}
lon={lon}
zoom={12}
showMarker={true}
mode="full"
mapStyleId={mapStyleId}
/>
</div>
</section>
<!-- ===================================================== -->
<!-- WARSTWY KML -->
<!-- ===================================================== -->
<script is:inline>
const citySelect = document.getElementById("city");
const streetSelect = document.getElementById("street");
const numberInput = document.getElementById("number");
const searchBtn = document.getElementById("search-btn");
let fiberLayer = null;
let radioLayer = null;
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.");
}
}
window.getActiveMap = function () {
if (!window.fuzMaps) return null;
return Object.values(window.fuzMaps)[0] || null;
};
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
}
}
window.fiberRangeShow = function (show) {
const map = window.getActiveMap();
if (!map) return;
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");
if (!show && fiberLayer) {
fiberLayer.setMap(null);
fiberLayer = null;
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");
if (show && !fiberLayer) {
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);
}
});
};
loadCities();
window.radioRangeShow = function (show) {
const map = window.getActiveMap();
if (!map) return;
if (!show && radioLayer) {
radioLayer.setMap(null);
radioLayer = null;
return;
}
if (show && !radioLayer) {
radioLayer = new google.maps.KmlLayer(
"https://www.google.com/maps/d/kml?mid=1c08LxJ9uCbWWfCCyopJmAMLQI1rmTkA&forcekml=1",
{ suppressInfoWindows: true, preserveViewport: false },
);
radioLayer.setMap(map);
}
};
window.handleMapSwitch = function (mode) {
if (mode === "swiatlowodowy") {
window.fiberRangeShow(true);
window.radioRangeShow(false);
} else if (mode === "radiowy") {
window.fiberRangeShow(false);
window.radioRangeShow(true);
} else {
window.fiberRangeShow(false);
window.radioRangeShow(false);
}
};
</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>
<!-- ===================================================== -->
<!-- FUNKCJA: POKAZYWANIE MARKERA NA MAPIE -->
<!-- ===================================================== -->
<script is:inline>
function showToast(message, type = "info") {
const toastContainer = document.getElementById("toast");
window.showAddressOnMap = async function (result) {
const map = window.getActiveMap();
if (!map) return;
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;
// Jeśli API jeszcze się nie załadowało – czekamy na Promise
if (!window.google?.maps?.importLibrary) {
await new Promise((resolve) => {
const int = setInterval(() => {
if (window.google?.maps?.importLibrary) {
clearInterval(int);
resolve(true);
}
}, 50);
});
}
toastContainer.appendChild(el);
// NOWE LIBRARIES
const { AdvancedMarkerElement } =
await google.maps.importLibrary("marker");
const { InfoWindow } = await google.maps.importLibrary("maps");
setTimeout(() => {
el.style.opacity = 0;
el.style.transform = "translateY(-10px)";
setTimeout(() => el.remove(), 300);
}, 3000);
}
// Kasujemy stare
if (window._activeMarker) window._activeMarker.map = null;
if (window._activeInfo) window._activeInfo.close();
const pos = { lat: result.lat, lng: result.lon };
// ★ Nowy marker
const marker = new AdvancedMarkerElement({
map,
position: pos,
title: `${result.city} ${result.street ?? ""} ${result.number}`,
});
window._activeMarker = marker;
// ★ Nowy infoWindow — działa tak samo, ale z importLibrary
const html = `
<div style="font-size:14px; line-height:1.5; padding:2px; color:#000;">
<div style="margin-bottom:6px;">
<strong>${result.city}</strong><br/>
<strong>${result.street ?? ""} ${result.number}</strong>
</div>
<div>
${
result.availableFiber
? '✔ <span style="color:green;">Internet światłowodowy dostępny</span>'
: '✖ <span style="color:red;">Internet światłowodowy niedostępny</span>'
}<br/>
${
result.availableRadio
? '✔ <span style="color:green;">Internet radiowy dostępny</span>'
: '✖ <span style="color:red;">Internet radiowy niedostępny</span>'
}
</div>
<a href="/#kontakt"
style="display:block; margin-top:8px;
background:#00aaff; color:white;
padding:6px 8px; text-align:center;
text-decoration:none; border-radius:6px;"
title="Przejdź do formularza kontaktowego">
Przejdź do kontaktu →
</a>
</div>
`;
const info = new InfoWindow({ content: html });
window._activeInfo = info;
info.open({
map,
anchor: marker,
});
map.setCenter(pos);
map.setZoom(16);
};
</script>
</DefaultLayout>
<style is:global>
.fade-in {
animation: fuzFadeIn 0.25s ease-out forwards;
}
@keyframes fuzFadeIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>