MapGoogle, poprawki w stopce i kontaktach

2025-11-22 12:14:59 +01:00
parent d27689d20d
commit bdf6c40755
9 changed files with 349 additions and 134 deletions
--- a/src/components/layout/Footer.astro
+++ b/src/components/layout/Footer.astro
@@ -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">
        {
--- a/src/components/maps/MapGoogle.astro
+++ b/src/components/maps/MapGoogle.astro
@@ -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"
+<div
+    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}
-    >
-    </div>
+    data-desc={description}
+    data-showmarker={showMarker}
+>
 </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>
--- a/src/components/maps/MapSwitch.astro
+++ b/src/components/maps/MapSwitch.astro
@@ -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>
--- a/src/components/sections/SectionContact.astro
+++ b/src/components/sections/SectionContact.astro
@@ -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>
--- a/src/layouts/DefaultLayout.astro
+++ b/src/layouts/DefaultLayout.astro
@@ -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>
--- a/src/pages/mapa-zasiegu/index.astro
+++ b/src/pages/mapa-zasiegu/index.astro
@@ -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>
--- a/src/styles/footer.css
+++ b/src/styles/footer.css
@@ -18,7 +18,7 @@
 }

 .footer-col {
-    @apply max-w-sm;
+    @apply max-w-sm pt-4;
 }

 .footer-inner {
--- a/src/styles/map-google.css
+++ b/src/styles/map-google.css
@@ -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;
-  }
-
-  to {
-    background-position: -200% 0;
-  }
+/* Mała karta mapy (inne sekcje) */
+.fuz-map--card {
+  @apply w-full h-[350px] overflow-hidden mt-8;
 }
-
-.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;
 }
--- a/src/styles/sections.css
+++ b/src/styles/sections.css
@@ -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 {