Dorabiamy funkcjonalnosci w TV

2025-12-12 14:58:13 +01:00
parent 0f17daee17
commit ee51e0816d
29 changed files with 1975 additions and 455 deletions
--- a/src/islands/jambox/JamboxChannelsModal.jsx
+++ b/src/islands/jambox/JamboxChannelsModal.jsx
@@ -0,0 +1,154 @@
+// src/islands/JamboxChannelsModal.jsx
+import { useEffect, useState } from "preact/hooks";
+import "../../styles/modal.css";
+import "../../styles/offers/offers-table.css";
+
+export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
+    const [channels, setChannels] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState("");
+
+    const [query, setQuery] = useState("");
+
+    const q = query.trim().toLowerCase();
+
+    const filtered = !q
+        ? channels
+        : channels.filter((ch) =>
+            (ch.name || "").toLowerCase().includes(q)
+        );
+
+
+    useEffect(() => {
+        if (!isOpen || !pkg?.id) return;
+
+        let cancelled = false;
+
+        async function loadChannels() {
+            setLoading(true);
+            setError("");
+            setChannels([]);
+            setQuery("");
+
+            try {
+                const params = new URLSearchParams({ packageId: String(pkg.id) });
+                const res = await fetch(`/api/jambox/channels?${params.toString()}`);
+
+                if (!res.ok) {
+                    throw new Error(`HTTP ${res.status}`);
+                }
+
+                const json = await res.json();
+                if (!cancelled) {
+                    setChannels(Array.isArray(json.data) ? json.data : []);
+                }
+            } catch (err) {
+                console.error("❌ Błąd pobierania listy kanałów:", err);
+                if (!cancelled) {
+                    setError("Nie udało się załadować listy kanałów.");
+                }
+            } finally {
+                if (!cancelled) setLoading(false);
+            }
+        }
+
+        loadChannels();
+        return () => {
+            cancelled = true;
+        };
+    }, [isOpen, pkg?.id]);
+
+    if (!isOpen || !pkg) return null;
+
+    return (
+        <div class="fuz-modal-overlay" onClick={onClose}>
+            <button
+                class="fuz-modal-close"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    onClose();
+                }}
+            >
+                ✕
+            </button>
+
+            <div
+                class="fuz-modal-panel fuz-modal-panel--channels"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <div class="">
+                    <h2 class="fuz-modal-title">Kanały w pakiecie {pkg.name}</h2>
+
+                    <div class="jmb-search">
+                        <input
+                            class="jmb-search-input"
+                            type="search"
+                            value={query}
+                            onInput={(e) => setQuery(e.currentTarget.value)}
+                            placeholder="Szukaj kanału po nazwie…"
+                            aria-label="Szukaj kanału po nazwie"
+                        />
+                        {query && (
+                            <button class="jmb-search-clear" type="button" onClick={() => setQuery("")}>
+                                Wyczyść
+                            </button>
+                        )}
+                    </div>
+
+                    {!loading && !error && (
+                        <div class="jmb-search-meta">
+                            Wyniki: <strong>{filtered.length}</strong> / {channels.length}
+                        </div>
+                    )}
+
+                    {loading && <p>Ładowanie kanałów...</p>}
+                    {error && <p class="text-red-600">{error}</p>}
+
+                    {!loading && !error && (
+                        <>
+                            {filtered.length === 0 ? (
+                                <p>Brak kanałów spełniających kryteria.</p>
+                            ) : (
+                                <div class="">
+                                    <div class="f-section-channel">
+                                        {filtered.map((ch) => (
+                                            <div class="jmb-channel-card" key={ch.number}>
+                                                <div class="jmb-channel-inner">
+                                                    {/* FRONT */}
+                                                    <div class="jmb-channel-face jmb-channel-front">
+                                                        {ch.logo_url && (
+                                                            <img
+                                                                src={ch.logo_url}
+                                                                alt={ch.name}
+                                                                class="jmb-channel-logo"
+                                                                loading="lazy"
+                                                            />
+                                                        )}
+                                                        <div class="jmb-channel-name">{ch.name}</div>
+                                                        <div class="jmb-channel-number">kanał {ch.number}</div>
+                                                    </div>
+
+                                                    {/* BACK */}
+                                                    <div class="jmb-channel-face jmb-channel-back">
+                                                        <div class="jmb-channel-back-title">{ch.name}</div>
+                                                        <div
+                                                            class="jmb-channel-desc"
+                                                            dangerouslySetInnerHTML={{
+                                                                __html: ch.description || "<em>Brak opisu kanału.</em>",
+                                                            }}
+                                                        />
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                        ))}
+                                    </div>
+                                </div>
+                            )}
+                        </>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}