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

MapGoogle, poprawki w stopce i kontaktach

Browse Source
This commit is contained in:
dm
2025-11-22 12:14:59 +01:00
parent d27689d20d
commit bdf6c40755
9 changed files with 349 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/layout/Footer.astro
View File

@@ -9,7 +9,7 @@ const footer = yaml.load(
---
<footer
class="fuz-footer bg-[var(--fuz-bg)] text-[var(--fuz-text)] mt-20 border-t border-gray-200 dark:border-slate-700"
class="fuz-footer bg-[var(--fuz-bg)] text-[var(--fuz-text)] mt-0 border-t border-gray-200 dark:border-slate-700"
>
<!-- GŁÓWNY GRID -->
<div class="footer-inner max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-12">
@@ -23,9 +23,8 @@ const footer = yaml.load(
</div>
<!-- Kolumna 2 – Kontakt -->
<div class="space-y-1">
<div class="footer-col space-y-1">
<h4 class="fuz-footer-title">Kontakt</h4>
{
footer.contact.phones.map((phone: string) => (
<p class="fuz-footer-text">
@@ -44,7 +43,7 @@ const footer = yaml.load(
</div>
<!-- Kolumna 3 – Usługi -->
<div>
<div class="footer-col">
<h4 class="fuz-footer-title">Usługi</h4>
<ul class="space-y-1">
{

114
src/components/maps/MapGoogle.astro
View File

@@ -1,79 +1,113 @@
---
import "../../styles/map-google.css";
const {
apiKey,
lat,
lon,
zoom = 15,
zoom = 12,
title = "",
description = "",
showMarker = false,
mode = "full", // "full" – mapa na całą sekcję, wszystko inne => karta
} = Astro.props;
import "../../styles/map-google.css";
const mapId = `fuz-map-${Math.random().toString(36).slice(2)}`;
---
<div class="fuz-map-wrapper">
<div
id="fuz-map-google"
class="fuz-map-google"
id={mapId}
class={mode === "full"
? "fuz-map--full"
: mode === "contact"
? "fuz-map--contact"
: "fuz-map--card"}
data-lat={lat}
data-lon={lon}
data-zoom={zoom}
data-title={title}
data-description={description}
data-desc={description}
data-showmarker={showMarker}
>
</div>
</div>
<!-- TODO: Popracować nad wygladem markera -->
<script is:inline>
window.initFuzGoogleMap = function () {
const el = document.getElementById("fuz-map-google");
if (!el) return;
<script is:inline define:vars={{ apiKey, mapId }}>
(function () {
// Funkcja inicjująca JEDNĄ konkretną mapę
function initSingleMap() {
const el = document.getElementById(mapId);
if (!el || !window.google || !google.maps) return;
const lat = Number(el.dataset.lat);
const lon = Number(el.dataset.lon);
const zoom = Number(el.dataset.zoom);
const title = el.dataset.title || "";
const desc = el.dataset.description || "";
const desc = el.dataset.desc || "";
const showMarker = el.dataset.showmarker === "true";
const map = new google.maps.Map(el, {
zoom: Number(`{{zoom}}`) || 15,
zoom,
center: { lat, lng: lon },
mapTypeControl: false,
fullscreenControl: false,
streetViewControl: false,
scrollwheel: false,
zoomControl: true,
streetViewControl: false,
});
const infowindow = new google.maps.InfoWindow({
content: `<div class="fuz-map-infowindow"><b>${title}</b><br/>${desc}</div>`,
});
// Zapamiętujemy mapę globalnie (np. dla KML / markerów z zewnątrz)
if (!window.fuzMaps) window.fuzMaps = {};
window.fuzMaps[mapId] = map;
if (showMarker) {
const marker = new google.maps.Marker({
position: { lat, lng: lon },
map,
title,
});
marker.addListener("click", () => {
infowindow.open({
map,
anchor: marker,
shouldFocus: false,
});
if (title) {
const info = new google.maps.InfoWindow({
content: `
<div class="fuz-map-infowindow">
<strong>${title}</strong><br/>
${desc}
</div>
`,
});
info.open(map, marker);
}
}
}
// auto-open popup on load
setTimeout(() => {
infowindow.open({
map,
anchor: marker,
shouldFocus: false,
});
}, 100);
// 1) Jeśli Google Maps JUŻ załadowane → inicjuj od razu
if (window.google && window.google.maps) {
initSingleMap();
return;
}
// Light fade-in
el.classList.add("loaded");
// 2) Jeżeli jeszcze NIE ma Google Maps → przygotuj kolejkę
if (!window.FUZ_GOOGLE_MAPS_LOADER) {
window.FUZ_GOOGLE_MAPS_LOADER = true;
window.FUZ_GOOGLE_MAPS_QUEUE = [];
window.FUZ_initGoogleMaps = function () {
// Wołana przez &callback=FUZ_initGoogleMaps
(window.FUZ_GOOGLE_MAPS_QUEUE || []).forEach((fn) => {
try {
fn();
} catch (e) {
console.error(e);
}
});
window.FUZ_GOOGLE_MAPS_QUEUE = [];
};
</script>
<script
async
src={`https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=initFuzGoogleMap`}
></script>
const s = document.createElement("script");
s.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=FUZ_initGoogleMaps`;
s.async = true;
document.head.appendChild(s);
}
// 3) Dodaj tę mapę do kolejki, żeby odpaliła się po załadowaniu SDK
window.FUZ_GOOGLE_MAPS_QUEUE.push(initSingleMap);
})();
</script>

15
src/components/maps/MapSwitch.astro Normal file
View File

@@ -0,0 +1,15 @@
---
const { id, label } = Astro.props;
---
<label class="flex items-center gap-2 cursor-pointer select-none text-sm">
<input
id={id}
type="checkbox"
class="h-4 w-4 rounded border-gray-400"
onchange={id === "fiber-toggle"
? "fiberRangeShow()"
: "radioRangeShow()"}
/>
<span>{label}</span>
</label>

6
src/components/sections/SectionContact.astro
View File

@@ -9,6 +9,7 @@ const data = yaml.load(
);
const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
---
<!-- TODO: Obrobić wysyłanie maila przez api -->
<section id="contact" class="fuz-section">
<!-- GRID 2 kolumny -->
@@ -95,7 +96,7 @@ const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
</div>
</div>
<!-- GOOGLE MAPS -->
<div class="fuz-contact-map-wrapper">
<MapGoogle
apiKey={apiKey}
lat={data.lat}
@@ -103,7 +104,10 @@ const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
zoom={16}
title={data.markerTitle}
description={data.markerAddress}
showMarker={true}
mode="contact"
/>
</div>
<div id="toast" class="fuz-toast hidden"></div>
</section>

2
src/layouts/DefaultLayout.astro
View File

@@ -5,7 +5,6 @@ import Header from "../components/layout/Header.astro";
import Footer from "../components/layout/Footer.astro";
import ThemeToggle from "../islands/ThemeToggle.jsx";
const { seo } = Astro.props;
---
@@ -20,7 +19,6 @@ const { seo } = Astro.props;
</main>
<Footer />
<div class="fixed right-4 bottom-4 z-50">
<ThemeToggle client:load />
</div>

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

@@ -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>
<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>

2
src/styles/footer.css
View File

@@ -18,7 +18,7 @@
}
.footer-col {
@apply max-w-sm;
@apply max-w-sm pt-4;
}
.footer-inner {

62
src/styles/map-google.css
View File

@@ -1,55 +1,23 @@
.fuz-map-wrapper {
@apply max-w-7xl mx-auto mt-16;
/* PODSTAWY */
.fuz-map {
@apply w-full;
}
.fuz-map-container {
@apply w-full h-[400px] rounded-xl shadow-lg;
/* Pełna mapa (zasięg) */
.fuz-map--full {
@apply absolute inset-0 w-full h-full mt-4 md:mt-0;
}
.fuz-map-google {
@apply w-full h-[450px] rounded-xl overflow-hidden relative;
background: linear-gradient(90deg, #e0e0e0 0px, #f5f5f5 40px, #e0e0e0 80px);
background-size: 200% 100%;
animation: mapSkeleton 1.5s infinite;
opacity: 0;
transition: opacity 0.6s ease;
/* Mapa na stronie kontaktu */
.fuz-map--contact {
@apply w-full h-[350px] md:h-[450px] overflow-hidden shadow-lg;
}
@keyframes mapSkeleton {
from {
background-position: 200% 0;
/* Mała karta mapy (inne sekcje) */
.fuz-map--card {
@apply w-full h-[350px] overflow-hidden mt-8;
}
to {
background-position: -200% 0;
}
}
.fuz-map-google.loaded {
animation: none;
background: transparent;
opacity: 1;
}
@media (max-width: 768px) {
.fuz-map-google {
@apply h-[300px];
}
}
.fuz-map-infowindow {
/* background: var(--fuz-bg); */
color: var(--fuz-text);
@apply ml-1 mr-6 text-lg leading-snug ;
border-radius: 10px;
}
.gm-style-iw-d {
padding-top: 2px !important;
padding-bottom: 6px !important;
}
.gm-style-iw-c {
padding-top: 2px !important;
padding-bottom: 2px !important;
.fuz-contact-map-wrapper {
/* @apply col-span-2 w-full border-cyan-200; */
@apply w-full max-w-7xl mx-auto mt-6;
}

4
src/styles/sections.css
View File

@@ -1,5 +1,5 @@
.fuz-section {
@apply py-10 px-4;
@apply py-10 mx-2;
}
.fuz-section-grid {
@@ -16,7 +16,7 @@
}
.fuz-section-title {
@apply text-5xl md:text-5xl font-bold mb-6;
@apply text-4xl md:text-5xl font-bold mb-6;
}
.fuz-section-text {