Api do wyszukiwania dostepności, korekty w powiązanych stronach
This commit is contained in:
dm
18
src/pages/api/all-cities.ts
Normal file
18
src/pages/api/all-cities.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import type { APIRoute } from "astro";
|
||||
import Database from "better-sqlite3";
|
||||
|
||||
type CityRow = { city: string };
|
||||
|
||||
export const GET: APIRoute = async () => {
|
||||
const db = new Database("./src/data/ServicesRange.db", { readonly: true });
|
||||
|
||||
const rows = db
|
||||
.prepare(`SELECT DISTINCT city FROM ranges ORDER BY city`)
|
||||
.all() as CityRow[];
|
||||
|
||||
const cities = rows.map(r => r.city);
|
||||
|
||||
return new Response(JSON.stringify(cities), {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
};
|
||||
47
src/pages/api/cities-autocomplete.ts
Normal file
47
src/pages/api/cities-autocomplete.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
import type { APIRoute } from "astro";
|
||||
import Database from "better-sqlite3";
|
||||
|
||||
// 🔥 Funkcja normalizująca — identyczna jak w C#
|
||||
function normalize(input: string): string {
|
||||
return input
|
||||
.normalize("NFD")
|
||||
.replace(/\p{Diacritic}/gu, "") // usuwa ogonki
|
||||
.toLowerCase();
|
||||
}
|
||||
|
||||
type CityRow = {
|
||||
city: string;
|
||||
};
|
||||
|
||||
export const GET: APIRoute = async ({ request }) => {
|
||||
const url = new URL(request.url);
|
||||
const q = url.searchParams.get("q")?.trim() || "";
|
||||
|
||||
if (q.length < 2) {
|
||||
return new Response(JSON.stringify([]), {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
}
|
||||
|
||||
const db = new Database("./src/data/ServicesRange.db", { readonly: true });
|
||||
|
||||
// 🔥 Pobieramy wszystkie miasta (jest ich mało – to działa błyskawicznie)
|
||||
const stmt = db.prepare(`
|
||||
SELECT DISTINCT city
|
||||
FROM ranges
|
||||
`);
|
||||
|
||||
const rows = stmt.all() as CityRow[];
|
||||
|
||||
// 🔥 Normalizujemy po stronie Node — ZERO problemów z kolacją SQLite
|
||||
const pattern = normalize(q);
|
||||
|
||||
const filtered = rows
|
||||
.filter((row) => normalize(row.city).includes(pattern))
|
||||
.slice(0, 20) // LIMIT 20
|
||||
.map((r) => r.city);
|
||||
|
||||
return new Response(JSON.stringify(filtered), {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
};
|
||||
52
src/pages/api/contact.ts
Normal file
52
src/pages/api/contact.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import type { APIRoute } from "astro";
|
||||
import nodemailer from "nodemailer";
|
||||
import yaml from "js-yaml";
|
||||
import fs from "fs";
|
||||
|
||||
export const POST: APIRoute = async ({ request }) => {
|
||||
try {
|
||||
const form = await request.json();
|
||||
|
||||
// Wczytanie YAML
|
||||
const mailCfg = yaml.load(
|
||||
fs.readFileSync("./src/content/contact/contact.yaml", "utf8")
|
||||
) as any;
|
||||
|
||||
// Stworzenie transportera
|
||||
const transporter = nodemailer.createTransport({
|
||||
host: import.meta.env.SMTP_HOST,
|
||||
port: Number(import.meta.env.SMTP_PORT),
|
||||
secure: true,
|
||||
auth: {
|
||||
user: import.meta.env.SMTP_USER,
|
||||
pass: import.meta.env.SMTP_PASS,
|
||||
},
|
||||
tls: {
|
||||
rejectUnauthorized: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Wysyłka
|
||||
await transporter.sendMail({
|
||||
from: `"${mailCfg.mail.from_name}" <${import.meta.env.SMTP_USER}>`,
|
||||
to: mailCfg.mail.to,
|
||||
subject: `Od ${form.firstName} ${form.lastName}`,
|
||||
text: `
|
||||
Imię: ${form.firstName}
|
||||
Nazwisko: ${form.lastName}
|
||||
Email: ${form.email}
|
||||
Telefon: ${form.phone}
|
||||
Temat: ${form.subject}
|
||||
|
||||
Wiadomość:
|
||||
${form.message}
|
||||
`,
|
||||
});
|
||||
|
||||
return new Response(JSON.stringify({ ok: true }), { status: 200 });
|
||||
|
||||
} catch (error) {
|
||||
console.error("MAIL ERROR:", error);
|
||||
return new Response(JSON.stringify({ ok: false, error }), { status: 500 });
|
||||
}
|
||||
};
|
||||
35
src/pages/api/has-streets.ts
Normal file
35
src/pages/api/has-streets.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import type { APIRoute } from "astro";
|
||||
import Database from "better-sqlite3";
|
||||
|
||||
interface HasStreetsRow {
|
||||
cnt: number;
|
||||
}
|
||||
|
||||
export const GET: APIRoute = async ({ request }) => {
|
||||
const url = new URL(request.url);
|
||||
const city = url.searchParams.get("city")?.trim() || "";
|
||||
|
||||
if (!city) {
|
||||
return new Response(JSON.stringify({ hasStreets: false }), {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
}
|
||||
|
||||
const db = new Database("./src/data/ServicesRange.db", { readonly: true });
|
||||
|
||||
const stmt = db.prepare(`
|
||||
SELECT COUNT(*) AS cnt
|
||||
FROM ranges
|
||||
WHERE LOWER(city) = LOWER(?)
|
||||
AND TRIM(street) <> ''
|
||||
`);
|
||||
|
||||
const row = stmt.get(city) as HasStreetsRow;
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
hasStreets: row.cnt > 0,
|
||||
}),
|
||||
{ headers: { "Content-Type": "application/json" } }
|
||||
);
|
||||
};
|
||||
85
src/pages/api/search.ts
Normal file
85
src/pages/api/search.ts
Normal file
@@ -0,0 +1,85 @@
|
||||
import type { APIRoute } from "astro";
|
||||
import Database from "better-sqlite3";
|
||||
|
||||
interface RangeRow {
|
||||
city: string;
|
||||
street: string;
|
||||
number: string;
|
||||
availableFiber: number;
|
||||
availableRadio: number;
|
||||
lat: number;
|
||||
lon: number;
|
||||
}
|
||||
|
||||
export const POST: APIRoute = async ({ request }) => {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const city = body.city?.trim() || "";
|
||||
const street = body.street?.trim() || "";
|
||||
const number = body.number?.trim() || "";
|
||||
|
||||
if (!city || !number) {
|
||||
return new Response(JSON.stringify({ ok: false }), {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
}
|
||||
|
||||
const db = new Database("./src/data/ServicesRange.db", { readonly: true });
|
||||
|
||||
const stmtHas = db.prepare(`
|
||||
SELECT COUNT(*) AS cnt
|
||||
FROM ranges
|
||||
WHERE LOWER(city) = LOWER(?) AND TRIM(street) <> ''
|
||||
`);
|
||||
|
||||
const has = (stmtHas.get(city) as { cnt: number }).cnt > 0;
|
||||
let row: RangeRow | undefined;
|
||||
|
||||
if (!has) {
|
||||
const stmt = db.prepare(`
|
||||
SELECT *
|
||||
FROM ranges
|
||||
WHERE LOWER(city) = LOWER(?)
|
||||
AND TRIM(number) = ?
|
||||
LIMIT 1
|
||||
`);
|
||||
row = stmt.get(city, number) as RangeRow | undefined;
|
||||
|
||||
} else if (street === "") {
|
||||
const stmt = db.prepare(`
|
||||
SELECT *
|
||||
FROM ranges
|
||||
WHERE LOWER(city) = LOWER(?)
|
||||
AND TRIM(number) = ?
|
||||
LIMIT 1
|
||||
`);
|
||||
row = stmt.get(city, number) as RangeRow | undefined;
|
||||
|
||||
} else {
|
||||
const stmt = db.prepare(`
|
||||
SELECT *
|
||||
FROM ranges
|
||||
WHERE LOWER(city) = LOWER(?)
|
||||
AND LOWER(street) = LOWER(?)
|
||||
AND TRIM(number) = ?
|
||||
LIMIT 1
|
||||
`);
|
||||
row = stmt.get(city, street, number) as RangeRow | undefined;
|
||||
}
|
||||
|
||||
if (!row) {
|
||||
return new Response(JSON.stringify({ ok: false }), {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
}
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({ ok: true, result: row }),
|
||||
{ headers: { "Content-Type": "application/json" } }
|
||||
);
|
||||
|
||||
} catch (err) {
|
||||
console.error("SEARCH API ERROR:", err);
|
||||
return new Response(JSON.stringify({ ok: false }), { status: 500 });
|
||||
}
|
||||
};
|
||||
51
src/pages/api/streets-autocomplete.ts
Normal file
51
src/pages/api/streets-autocomplete.ts
Normal file
@@ -0,0 +1,51 @@
|
||||
import type { APIRoute } from "astro";
|
||||
import Database from "better-sqlite3";
|
||||
|
||||
type StreetRow = {
|
||||
street: string;
|
||||
};
|
||||
|
||||
// 🔥 Funkcja normalizująca — taka sama jak dla miast
|
||||
function normalize(input: string): string {
|
||||
return input
|
||||
.normalize("NFD")
|
||||
.replace(/\p{Diacritic}/gu, "") // usuwa ogonki
|
||||
.toLowerCase();
|
||||
}
|
||||
|
||||
export const GET: APIRoute = async ({ request }) => {
|
||||
const url = new URL(request.url);
|
||||
|
||||
const city = url.searchParams.get("city")?.trim() || "";
|
||||
const q = url.searchParams.get("q")?.trim() || "";
|
||||
|
||||
if (!city || q.length < 1) {
|
||||
return new Response(JSON.stringify([]), {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
}
|
||||
|
||||
const db = new Database("./src/data/ServicesRange.db", { readonly: true });
|
||||
|
||||
// 🔥 Pobieramy WSZYSTKIE ulice tego miasta (jest ich mało)
|
||||
const stmt = db.prepare(`
|
||||
SELECT DISTINCT street
|
||||
FROM ranges
|
||||
WHERE city = ?
|
||||
ORDER BY street
|
||||
`);
|
||||
|
||||
const rows = stmt.all(city) as StreetRow[];
|
||||
|
||||
// 🔥 Normalizujemy porównanie — SQLite LIKE NIE JEST UŻYWANE
|
||||
const pattern = normalize(q);
|
||||
|
||||
const filtered = rows
|
||||
.filter((row) => normalize(row.street).includes(pattern))
|
||||
.slice(0, 20)
|
||||
.map((r) => r.street);
|
||||
|
||||
return new Response(JSON.stringify(filtered), {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
};
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user