-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (148 loc) · 5.28 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buscador de Canales</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
header {
background-color: #0078d7;
color: white;
text-align: center;
padding: 1rem 0;
}
.container {
margin: 2rem auto;
max-width: 600px;
padding: 1rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.search-box {
display: flex;
gap: 0.5rem;
}
.search-box input {
flex: 1;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
}
.search-box button {
padding: 0.5rem 1rem;
border: none;
background-color: #0078d7;
color: white;
border-radius: 4px;
cursor: pointer;
}
.search-box button:hover {
background-color: #005fa3;
}
.results {
margin-top: 1rem;
}
.results .card {
background: #f9f9f9;
border: 1px solid #ddd;
padding: 1rem;
border-radius: 6px;
margin-bottom: 1rem;
}
.results .card h3 {
margin: 0 0 0.5rem;
color: #333;
}
.results .card p {
margin: 0.2rem 0;
}
</style>
</head>
<body>
<header>
<h1>Buscador de Canales</h1>
</header>
<div class="container">
<div class="search-box">
<input type="text" id="searchInput" placeholder="Busca por nombre o número de canal">
<button onclick="searchChannel()">Buscar</button>
</div>
<div class="results" id="results">
<!-- Los resultados se mostrarán aquí -->
</div>
</div>
<!-- Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-database.js"></script>
<script>
// Configuración de Firebase
const firebaseConfig = {
apiKey: "AIzaSyBoMllya1uj7Wu7Kq5gZY2ZZEbAJhUi7jw",
authDomain: "grilla-2a75e.firebaseapp.com",
databaseURL: "https://grilla-2a75e-default-rtdb.firebaseio.com",
projectId: "grilla-2a75e",
storageBucket: "grilla-2a75e.firebasestorage.app",
messagingSenderId: "24461514405",
appId: "1:24461514405:web:de78d8367766f8e33e5f4c"
};
// Inicializar Firebase
const app = firebase.initializeApp(firebaseConfig);
const database = firebase.database(app);
// Buscar un canal por nombre o número
function searchChannel() {
const query = document.getElementById("searchInput").value.toLowerCase();
const resultsDiv = document.getElementById("results");
resultsDiv.innerHTML = ""; // Limpiar resultados previos
if (!query) {
resultsDiv.innerHTML = "<p>Por favor, ingresa un nombre o número de canal.</p>";
return;
}
// Depuración
console.log("Iniciando búsqueda con query:", query);
// Referencia a la base de datos
const channelsRef = database.ref("channels");
channelsRef.once("value")
.then((snapshot) => {
const channels = snapshot.val();
console.log("Datos obtenidos de Firebase:", channels);
let found = false;
for (const key in channels) {
const channel = channels[key];
const canalId = channel.canal_id || "";
const nombreCanal = channel.nombre_canal || "";
// Depuración
console.log(`Verificando canal: ${canalId} - ${nombreCanal}`);
if (nombreCanal.toLowerCase().includes(query) || canalId.toString().includes(query)) {
found = true;
// Mostrar información del canal
const card = document.createElement("div");
card.className = "card";
card.innerHTML = `
<h3>${canalId} - ${nombreCanal}</h3>
<p><strong>Satelite:</strong> ${channel.satelite || "N/A"}</p>
<p><strong>Frecuencia:</strong> ${channel.frecuencia || "N/A"}</p>
<p><strong>Polarización:</strong> ${channel.polarizacion || "N/A"}</p>
<p><strong>Multicast:</strong> ${channel.multicast || "N/A"}</p>
`;
resultsDiv.appendChild(card);
}
}
if (!found) {
resultsDiv.innerHTML = "<p>No se encontró ningún canal con ese nombre o número.</p>";
}
})
.catch((error) => {
console.error("Error al obtener datos de Firebase:", error);
resultsDiv.innerHTML = `<p>Error al buscar datos. Por favor, revisa la consola para más detalles.</p>`;
});
}
</script>
</body>
</html>