Skip to content

Commit b0c09fc

Browse files
JiromaJiroma
committed
CRUD implementado
1 parent 35b4fed commit b0c09fc

File tree

3 files changed

+99
-21
lines changed

3 files changed

+99
-21
lines changed

‎index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<script src="https://kit.fontawesome.com/59aed36701.js" crossorigin="anonymous"></script>
99

10-
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script>
11-
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-auth.js"></script>
12-
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
13-
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"></script>
10+
<script src="https://www.gstatic.com/firebasejs/7.17.2/firebase-app.js"></script>
11+
<script src="https://www.gstatic.com/firebasejs/7.17.2/firebase-auth.js"></script>
12+
<!-- <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script> 7.17.1 -->
13+
<script src="https://www.gstatic.com/firebasejs/7.17.2/firebase-firestore.js"></script>
1414

1515
<script>
1616
var firebaseConfig = {

‎javaScript/baseDatos.js

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
// base de datos
2+
3+
var db = firebase.firestore();
4+
5+
function guardar (){
6+
var nombre = document.getElementById('nombre').value;
7+
var apellido = document.getElementById('apellido').value;
8+
db.collection("informacion").add({
9+
nombre: nombre,
10+
apellido: apellido
11+
})
12+
.then(function(docRef) {
13+
console.log("Document written with ID: ", docRef.id);
14+
document.getElementById('nombre').value = "";
15+
document.getElementById('apellido').value = "";
16+
})
17+
.catch(function(error) {
18+
console.error("Error adding document: ", error);
19+
});
20+
}
21+
22+
// Leer
23+
24+
var tabla = document.getElementById('tabla');
25+
26+
db.collection("informacion").onSnapshot((querySnapshot) => {
27+
tabla.innerHTML = '';
28+
querySnapshot.forEach((doc) => {
29+
// console.log(`${doc.id} => ${doc.data()}`);
30+
console.log(`${doc.id} => ${doc.data().nombre}`);
31+
tabla.innerHTML += `
32+
<tr>
33+
<th>${doc.id}</th>
34+
<td>${doc.data().nombre}</td>
35+
<td>${doc.data().apellido}</td>
36+
<td><a onclick="eliminar('${doc.id}')" class="button">Eliminar</a></td>
37+
<td><a onclick="editar('${doc.id}','${doc.data().nombre}','${doc.data().apellido}')" class="button">Editar</a></td>
38+
</tr>
39+
`
40+
});
41+
});
42+
43+
// borrar
44+
45+
function eliminar(id){
46+
db.collection("informacion").doc(id).delete().then(function() {
47+
console.log("Document successfully deleted!");
48+
}).catch(function(error) {
49+
console.error("Error removing document: ", error);
50+
});
51+
}
52+
53+
// editar
54+
55+
function editar(id,nombre,apellido){
56+
document.getElementById('nombre').value = nombre;
57+
document.getElementById('apellido').value = apellido;
58+
var boton = document.getElementById('boton');
59+
boton.innerHTML = 'Editar'
60+
61+
boton.onclick = function(){
62+
var washingtonRef = db.collection("informacion").doc(id);
63+
// Set the "capital" field of the city 'DC'
64+
var nombre = document.getElementById('nombre').value;
65+
var apellido = document.getElementById('apellido').value;
66+
return washingtonRef.update({
67+
nombre: nombre,
68+
apellido: apellido
69+
})
70+
.then(function() {
71+
console.log("Document successfully updated!");
72+
boton.innerHTML = 'Guardar';
73+
document.getElementById('nombre').value = "";
74+
document.getElementById('apellido').value = "";
75+
boton.onclick = guardar;
76+
})
77+
.catch(function(error) {
78+
// The document probably doesn't exist.
79+
console.error("Error updating document: ", error);
80+
});
81+
}
82+
}
83+

‎main.html

+12-17
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<script src="https://kit.fontawesome.com/59aed36701.js" crossorigin="anonymous"></script>
99

10-
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script>
11-
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-auth.js"></script>
12-
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
13-
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"></script>
10+
<script src="https://www.gstatic.com/firebasejs/7.17.2/firebase-app.js"></script>
11+
<script src="https://www.gstatic.com/firebasejs/7.17.2/firebase-auth.js"></script>
12+
<!-- <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script> 7.17.1 -->
13+
<script src="https://www.gstatic.com/firebasejs/7.17.2/firebase-firestore.js"></script>
1414

1515
<script>
1616
var firebaseConfig = {
@@ -35,13 +35,13 @@
3535
<header>
3636
<div class="logInBox">
3737
<div class="logBox">
38-
<input id="logEmail" type="text" placeholder="Info1" name="" value="">
38+
<input id="nombre" type="text" placeholder="Nombre" name="" value="">
3939
</div>
4040
<div class="logBox">
41-
<input id="logEmail" type="text" placeholder="Info2" name="" value="">
41+
<input id="apellido" type="text" placeholder="Apellido" name="" value="">
4242
</div>
4343

44-
<a onclick="login()" class="button">Guardar</a>
44+
<a id="boton" onclick="guardar()" class="button">Guardar</a>
4545
</div>
4646

4747
<div class="separator">
@@ -53,20 +53,14 @@
5353
<thead>
5454
<tr>
5555
<th>ID</th>
56-
<th>Info1</th>
57-
<th>Info2</th>
56+
<th>Nombre</th>
57+
<th>Apellido</th>
5858
<th>Eliminar</th>
5959
<th>Editar</th>
6060
</tr>
6161
</thead>
62-
<tbody>
63-
<tr>
64-
<th>1</th>
65-
<td>Pedrito</td>
66-
<td>Alcachofa</td>
67-
<td><a onclick="" class="button">Eliminar</a></td>
68-
<td><a onclick="" class="button">Editar</a></td>
69-
</tr>
62+
<tbody id="tabla">
63+
7064
</tbody>
7165
</table>
7266
</div>
@@ -79,6 +73,7 @@
7973
</footer>
8074

8175
<script src="javaScript/script.js"></script>
76+
<script src="javaScript/baseDatos.js"></script>
8277
</body>
8378

8479
</html>

0 commit comments

Comments
 (0)