diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..5deee94 --- /dev/null +++ b/.babelrc @@ -0,0 +1,10 @@ +{ + "presets": [["@babel/preset-env", + { + "target": { + "node": "current", + "firefox": "60" + } + } +]] +} \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..53f2381 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +#ignorar: +/node_modules +package-lock.json +.eslintrc.json +/.vscode \ No newline at end of file diff --git a/README.md b/README.md index afd0f0b..bb57e52 100644 --- a/README.md +++ b/README.md @@ -1,66 +1,41 @@ -# Technical Challenge ---- -Index +# Agenda propósitos 2022 - 1. Description - 2. Aceptance Criteria - 3. Technical Requirements - 4. Expected Learning Outcomes --- -## 1. Description +Index -Develop yourself a Notes App for yourself to keep in mind your New Year resolutions and goals. The target user is yourself. + 1. Descripción + 2. Características generales + 3. Características técnicas --- -## 2. Acceptance Criteria +## 1. Descripción -This applications should allow you to enter your goals and objectives with the fields: -* Dropdown Selectable Topics: Personal, Professional, Relationships, Family, Health and Learning -* Title: Input to add a short Title -* Description: Text Area to add the desciption of the goal -* Dropdown with the objective month of achievement. +Aplicación de notas personal para mantener y controlar mis propósitos y objetivos de Año Nuevo (2022) orientados a mi plan de vida. La app contará con un inicio de sesión personal. --- -## 3. Technical Requeriments / -- Follow up all the Software Development Lyfecycle steps and document it -- Only JavaScript Vanilla is allowed -- Use all the things you know already and that you have learned from the Bootcamp to solve the application code. -- Use Firestore from Firebase to keep your data -- Only Arrow Functions are allowed (ECS6) -- Using modular modular architecture is a plus -- Add a personal login for you is a plus -- Finishing before the time is a plus +## 2. Características generales -**CLUES:** +Esta aplicación me permitirá ingresar mis metas y objetivos con los campos: -- All the knowledge from the last 7 projects -- Try your best to show the expertise and skills you have earned, tecnical and softskills to reach by your own the entrance to the next stage. -- This project will be deliviered in a personal demo with the review of the performance during this last stage of the Bootcamp. -- The results of this stage will give you a learning position to math teams into the final stages. -- Make every time desition wiseley -- It's time to show up the best you can do! +- Temas desplegables seleccionables: personal, profesional, relaciones, familia, salud y aprendizaje +- Título: entrada para agregar un título corto +- Descripción: Área de texto para agregar la descripción de la meta +- Desplegable con el mes objetivo de consecución. --- -## 4. Expected Learning Outcomes ---- +## 3. Características técnicas -- [ ] window object -- [ ] Arrow Functions and parameters -- [ ] Short, readable and reusable code -- [ ] Objects & Arrays +- [ ] Arquitectura modular +- [ ] window object +- [ ] Arrow Functions y parámetros +- [ ] Programación funcional (código corto, legible y reutilizable) +- [ ] Objects & Arrays - [ ] JSON -- [ ] Iterators -- [ ] Firebase: Firestore DB +- [ ] Iteradores +- [ ] Firebase: Firestore DB - [ ] Bootstrap 5 -- [ ] Continuous Integration Tools: Git & GitHub - ---- -# ReadMe - ---- - -> This Readme should be replaced with the project documentation following the SDLC procedures for Agile Software Development Lyfe Cycle. +- [ ] Herramientas de integración continua: Git y GitHub diff --git a/assets/UI/elibabah.jpg b/assets/UI/elibabah.jpg new file mode 100644 index 0000000..58f2a59 Binary files /dev/null and b/assets/UI/elibabah.jpg differ diff --git a/assets/UI/hojas.png b/assets/UI/hojas.png new file mode 100644 index 0000000..d40ad58 Binary files /dev/null and b/assets/UI/hojas.png differ diff --git a/datamonth/month.json b/datamonth/month.json new file mode 100644 index 0000000..daea415 --- /dev/null +++ b/datamonth/month.json @@ -0,0 +1,14 @@ +{ + "enero": [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], + "febrero": [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], + "marzo": [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], + "abril": [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], + "mayo": [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], + "junio": [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], + "julio": [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], + "agosto": [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], + "septiembre": [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], + "octubre": [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], + "noviembre": [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], + "diciembre": [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] +} \ No newline at end of file diff --git a/lib/index.js b/lib/index.js new file mode 100644 index 0000000..edcf46d --- /dev/null +++ b/lib/index.js @@ -0,0 +1,4 @@ +import { diasPorMes } from "./modules/app.js"; +import { enviarFB } from "./modules/data.js"; +diasPorMes(); +enviarFB(); //traerMetas() \ No newline at end of file diff --git a/lib/modules/app.js b/lib/modules/app.js new file mode 100644 index 0000000..320c6af --- /dev/null +++ b/lib/modules/app.js @@ -0,0 +1,31 @@ +export const diasPorMes = () => { + const meses = "../datamonth/month.json"; + const mesesArray = []; + fetch(meses).then(response => response.json()).then(data => { + mesesArray.push(data); + console.log(mesesArray); + + for (let mes in mesesArray[0]) { + console.log(mes); + let imprimirMes = document.getElementById("mesChoose"); + imprimirMes.innerHTML += ` + + `; + } + + let diaPorMes = document.getElementById("mesChoose"); + diaPorMes.addEventListener("change", () => { + console.log("estoy escuchando"); + let clickMes = document.getElementById("mesChoose").value; + console.log(clickMes); //console.log(mesesArray[0][clickMes]) + + for (let dia of mesesArray[0][clickMes]) { + console.log(dia); + let imprimirDia = document.getElementById("diaChoose"); + imprimirDia.innerHTML += ` + + `; + } + }); + }); +}; \ No newline at end of file diff --git a/lib/modules/data.js b/lib/modules/data.js new file mode 100644 index 0000000..8cb54d1 --- /dev/null +++ b/lib/modules/data.js @@ -0,0 +1,761 @@ +import * as module from "./firebase.js"; +import { diasPorMes } from "./app.js"; +export const enviarFB = () => { + const db = firebase.firestore(); //db.collection("metas").add() + + const saveMeta = obj => { + db.collection("metas").doc().set(obj); + }; + + const updateMeta = (id, updateMeta) => db.collection("metas").doc(id).update(updateMeta); + + let metaForm = document.getElementById("metaForm"); + let botonEnviarMeta = document.getElementById("enviarMeta"); + let botonCerrarModal = document.getElementById("cerrarModal"); + let editStatus = false; + let id = ""; + let getMetasArray = []; + const cardMeta = document.getElementById("cardPorMeta"); + let mesEnero = document.getElementById("enero"); + let mesFebrero = document.getElementById("febrero"); + let mesMarzo = document.getElementById("marzo"); + let mesAbril = document.getElementById("abril"); + let mesMayo = document.getElementById("mayo"); + let mesJunio = document.getElementById("junio"); + let mesJulio = document.getElementById("julio"); + let mesAgosto = document.getElementById("agosto"); + let mesSeptiembre = document.getElementById("septiembre"); + let mesOctubre = document.getElementById("octubre"); + let mesNoviembre = document.getElementById("noviembre"); + let mesDiciembre = document.getElementById("diciembre"); + + const onGetMetas = callback => db.collection("metas").onSnapshot(callback); + + const deleteMeta = id => db.collection("metas").doc(id).delete(); + + const editMeta = id => db.collection("metas").doc(id).get(); + /* let tipo = document.getElementById("tipo").value + let titulo = document.getElementById("titulo").value + let descripcion = document.getElementById("descripcion").value*/ + + + let mes = document.getElementById("mesChoose").value; + let dia = document.getElementById("diaChoose").value; // Botón enviar meta creada + + botonEnviarMeta.addEventListener("click", async e => { + //Validación de entradas + + /* if (tipo.length == 0) { + // Si no se cumple la condicion... + alert("¡No te olvides del tipo de tu propósito!"); + return false; + } else if (titulo == null || + titulo.length == 0 || + /^\s+$/.test(titulo)) { + // Si no se cumple la condicion... + alert("¡Ponerle nombre a tus metas ayuda a hacerlas más claras!"); + return false; + } else if (descripcion == null || descripcion == 0) { + // Si no se cumple la condicion... + alert("¡Será mejor que agregues de qué va tu propósito para lo recuerdes todo!"); + return false; + } else if (mes == null || mes == 0) { + // Si no se cumple la condicion... + alert("¡No olvides calendarizar tu meta, así será concreta!"); + return false; + } else if (dia == null || dia == 0) { + alert("Mmmm, ¿no quisieras agregar un día?"); + return false; + }*/ + //Modelado de objeto + + /*let metaObject = { + "tipo": document.getElementById("tipo").value, + "titulo": document.getElementById("titulo").value, + "descripcion": document.getElementById("descripcion").value, + "mes": document.getElementById("mesChoose").value, + "dia": document.getElementById("diaChoose").value + } + console.log(metaObject)*/ + //Activar función de guardado de objeto y envío a firebase + e.preventDefault(); + + if (!editStatus) { + await saveMeta({ + "tipo": document.getElementById("tipo").value, + "titulo": document.getElementById("titulo").value, + "descripcion": document.getElementById("descripcion").value, + "mes": document.getElementById("mesChoose").value, + "dia": document.getElementById("diaChoose").value + }); // Desactivar botones mientras se envía data a firebase + //botonEnviarMeta.disabled = true; + //botonCerrarModal.disabled = true; + + getMetasArray = []; //cardMeta.innerHTML = ""; + + tipo.value = "Selecciona tu tipo de meta"; + titulo.value = ""; + descripcion.value = ""; + /*mes.value = "Selecciona un mes objetivo"; + dia.value = "Selecciona un día";*/ + + diasPorMes(); + let imprimirDia = document.getElementById("diaChoose"); + imprimirDia.innerHTML = ""; + imprimirDia.innerHTML += ` + + `; // Salida de modal después de data enviada + + /*setTimeout(() => { + //alert("¡Meta creada!") + window.location.href = "./index.html"; + }, 1000);*/ + } else { + await updateMeta(id, { + tipo: tipo.value, + titulo: titulo.value, + descripcion: descripcion.value + }); + tipo.value = "Selecciona tu tipo de meta"; + titulo.value = ""; + descripcion.value = ""; + editStatus = false; + id = ""; + botonEnviarMeta.innerText = "Crear meta"; //botonEnviarMeta.innerText = "Actualizar" + } + }); // return true; + //Traer data de Firebase + //const traerMetas = () => { + //const db = firebase.firestore(); + + /* let getMetasArray = []; + const cardMeta = document.getElementById("cardPorMeta") + const onGetMetas = (callback) => db.collection("metas").onSnapshot(callback); + const deleteMeta = id => db.collection("metas").doc(id).delete(); + const editMeta = (id) => db.collection("metas").doc(id).get()*/ + + window.addEventListener("DOMContentLoaded", async e => { + mesEnero.innerHTML = ""; + mesFebrero.innerHTML = ""; + mesMarzo.innerHTML = ""; + mesAbril.innerHTML = ""; + mesMayo.innerHTML = ""; + mesJunio.innerHTML = ""; + mesJulio.innerHTML = ""; + mesAgosto.innerHTML = ""; + mesSeptiembre.innerHTML = ""; + mesOctubre.innerHTML = ""; + mesNoviembre.innerHTML = ""; + mesDiciembre.innerHTML = ""; //Función para obtener data en tiempo real con onGetMetas + + onGetMetas(querySnapshot => { + //cardMeta.innerHTML = ""; + querySnapshot.forEach(doc => { + //console.log(doc.data()) + //console.log(doc.id) + //Pasando data a array + let datosMeta = doc.data(); + datosMeta.id = doc.id; + getMetasArray.push(datosMeta); + console.log(getMetasArray); //Iterando cada meta desde Array + + mesEnero.innerHTML = ""; + mesFebrero.innerHTML = ""; + mesMarzo.innerHTML = ""; + mesAbril.innerHTML = ""; + mesMayo.innerHTML = ""; + mesJunio.innerHTML = ""; + mesJulio.innerHTML = ""; + mesAgosto.innerHTML = ""; + mesSeptiembre.innerHTML = ""; + mesOctubre.innerHTML = ""; + mesNoviembre.innerHTML = ""; + mesDiciembre.innerHTML = ""; + + for (const detallesMeta of getMetasArray) { + console.log(detallesMeta); + + if (detallesMeta.mes === "enero") { + mesEnero.innerHTML += ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + `; //Eliminar + + const btnsDelete = document.querySelectorAll(".btn-delete"); + btnsDelete.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = []; + mesEnero.innerHTML = ""; + await deleteMeta(e.target.dataset.id); + }); + }); //Editar + + const btnsEdit = document.querySelectorAll(".btn-edit"); + btnsEdit.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = []; + const doc = await editMeta(e.target.dataset.id); + console.log(doc.data()); + let editar = doc.data(); + editStatus = true; + id = doc.id; + tipo.value = editar.tipo; + titulo.value = editar.titulo; + descripcion.value = editar.descripcion; //mes.value = editar.mes + //dia.value = editar.dia + + botonEnviarMeta.innerText = "Actualizar"; + }); + }); + } else if (detallesMeta.mes === "febrero") { + mesFebrero.innerHTML += ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + `; //Eliminar + + const btnsDelete = document.querySelectorAll(".btn-delete"); + btnsDelete.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = []; + mesFebrero.innerHTML = ""; + await deleteMeta(e.target.dataset.id); + }); + }); //Editar + + const btnsEdit = document.querySelectorAll(".btn-edit"); + btnsEdit.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = []; + const doc = await editMeta(e.target.dataset.id); + console.log(doc.data()); + let editar = doc.data(); + editStatus = true; + id = doc.id; + tipo.value = editar.tipo; + titulo.value = editar.titulo; + descripcion.value = editar.descripcion; //mes.value = editar.mes + //dia.value = editar.dia + + botonEnviarMeta.innerText = "Actualizar"; + }); + }); + } else if (detallesMeta.mes === "marzo") { + mesMarzo.innerHTML += ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + `; //Eliminar + + const btnsDelete = document.querySelectorAll(".btn-delete"); + btnsDelete.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = []; + mesMarzo.innerHTML = ""; + await deleteMeta(e.target.dataset.id); + }); + }); //Editar + + const btnsEdit = document.querySelectorAll(".btn-edit"); + btnsEdit.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = []; + const doc = await editMeta(e.target.dataset.id); + console.log(doc.data()); + let editar = doc.data(); + editStatus = true; + id = doc.id; + tipo.value = editar.tipo; + titulo.value = editar.titulo; + descripcion.value = editar.descripcion; //mes.value = editar.mes + //dia.value = editar.dia + + botonEnviarMeta.innerText = "Actualizar"; + }); + }); + } else if (detallesMeta.mes === "abril") { + mesAbril.innerHTML += ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + `; //Eliminar + + const btnsDelete = document.querySelectorAll(".btn-delete"); + btnsDelete.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = []; + mesAbril.innerHTML = ""; + await deleteMeta(e.target.dataset.id); + }); + }); //Editar + + const btnsEdit = document.querySelectorAll(".btn-edit"); + btnsEdit.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = []; + const doc = await editMeta(e.target.dataset.id); + console.log(doc.data()); + let editar = doc.data(); + editStatus = true; + id = doc.id; + tipo.value = editar.tipo; + titulo.value = editar.titulo; + descripcion.value = editar.descripcion; //mes.value = editar.mes + //dia.value = editar.dia + + botonEnviarMeta.innerText = "Actualizar"; + }); + }); + } else if (detallesMeta.mes === "mayo") { + mesMayo.innerHTML += ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + `; //Eliminar + + const btnsDelete = document.querySelectorAll(".btn-delete"); + btnsDelete.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = []; + mesMayo.innerHTML = ""; + await deleteMeta(e.target.dataset.id); + }); + }); //Editar + + const btnsEdit = document.querySelectorAll(".btn-edit"); + btnsEdit.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = []; + const doc = await editMeta(e.target.dataset.id); + console.log(doc.data()); + let editar = doc.data(); + editStatus = true; + id = doc.id; + tipo.value = editar.tipo; + titulo.value = editar.titulo; + descripcion.value = editar.descripcion; //mes.value = editar.mes + //dia.value = editar.dia + + botonEnviarMeta.innerText = "Actualizar"; + }); + }); + } else if (detallesMeta.mes === "junio") { + mesJunio.innerHTML += ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + `; //Eliminar + + const btnsDelete = document.querySelectorAll(".btn-delete"); + btnsDelete.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = []; + mesJunio.innerHTML = ""; + await deleteMeta(e.target.dataset.id); + }); + }); //Editar + + const btnsEdit = document.querySelectorAll(".btn-edit"); + btnsEdit.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = []; + const doc = await editMeta(e.target.dataset.id); + console.log(doc.data()); + let editar = doc.data(); + editStatus = true; + id = doc.id; + tipo.value = editar.tipo; + titulo.value = editar.titulo; + descripcion.value = editar.descripcion; //mes.value = editar.mes + //dia.value = editar.dia + + botonEnviarMeta.innerText = "Actualizar"; + }); + }); + } else if (detallesMeta.mes === "julio") { + mesJulio.innerHTML += ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + `; //Eliminar + + const btnsDelete = document.querySelectorAll(".btn-delete"); + btnsDelete.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = []; + mesJulio.innerHTML = ""; + await deleteMeta(e.target.dataset.id); + }); + }); //Editar + + const btnsEdit = document.querySelectorAll(".btn-edit"); + btnsEdit.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = []; + const doc = await editMeta(e.target.dataset.id); + console.log(doc.data()); + let editar = doc.data(); + editStatus = true; + id = doc.id; + tipo.value = editar.tipo; + titulo.value = editar.titulo; + descripcion.value = editar.descripcion; //mes.value = editar.mes + //dia.value = editar.dia + + botonEnviarMeta.innerText = "Actualizar"; + }); + }); + } else if (detallesMeta.mes === "agosto") { + mesAgosto.innerHTML += ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + `; //Eliminar + + const btnsDelete = document.querySelectorAll(".btn-delete"); + btnsDelete.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = []; + mesAgosto.innerHTML = ""; + await deleteMeta(e.target.dataset.id); + }); + }); //Editar + + const btnsEdit = document.querySelectorAll(".btn-edit"); + btnsEdit.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = []; + const doc = await editMeta(e.target.dataset.id); + console.log(doc.data()); + let editar = doc.data(); + editStatus = true; + id = doc.id; + tipo.value = editar.tipo; + titulo.value = editar.titulo; + descripcion.value = editar.descripcion; //mes.value = editar.mes + //dia.value = editar.dia + + botonEnviarMeta.innerText = "Actualizar"; + }); + }); + } else if (detallesMeta.mes === "septiembre") { + mesSeptiembre.innerHTML += ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + `; //Eliminar + + const btnsDelete = document.querySelectorAll(".btn-delete"); + btnsDelete.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = []; + mesSeptiembre.innerHTML = ""; + await deleteMeta(e.target.dataset.id); + }); + }); //Editar + + const btnsEdit = document.querySelectorAll(".btn-edit"); + btnsEdit.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = []; + const doc = await editMeta(e.target.dataset.id); + console.log(doc.data()); + let editar = doc.data(); + editStatus = true; + id = doc.id; + tipo.value = editar.tipo; + titulo.value = editar.titulo; + descripcion.value = editar.descripcion; //mes.value = editar.mes + //dia.value = editar.dia + + botonEnviarMeta.innerText = "Actualizar"; + }); + }); + } else if (detallesMeta.mes === "octubre") { + mesOctubre.innerHTML += ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + `; //Eliminar + + const btnsDelete = document.querySelectorAll(".btn-delete"); + btnsDelete.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = []; + mesOctubre.innerHTML = ""; + await deleteMeta(e.target.dataset.id); + }); + }); //Editar + + const btnsEdit = document.querySelectorAll(".btn-edit"); + btnsEdit.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = []; + const doc = await editMeta(e.target.dataset.id); + console.log(doc.data()); + let editar = doc.data(); + editStatus = true; + id = doc.id; + tipo.value = editar.tipo; + titulo.value = editar.titulo; + descripcion.value = editar.descripcion; //mes.value = editar.mes + //dia.value = editar.dia + + botonEnviarMeta.innerText = "Actualizar"; + }); + }); + } else if (detallesMeta.mes === "noviembre") { + mesNoviembre.innerHTML += ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + `; //Eliminar + + const btnsDelete = document.querySelectorAll(".btn-delete"); + btnsDelete.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = []; + mesNoviembre.innerHTML = ""; + await deleteMeta(e.target.dataset.id); + }); + }); //Editar + + const btnsEdit = document.querySelectorAll(".btn-edit"); + btnsEdit.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = []; + const doc = await editMeta(e.target.dataset.id); + console.log(doc.data()); + let editar = doc.data(); + editStatus = true; + id = doc.id; + tipo.value = editar.tipo; + titulo.value = editar.titulo; + descripcion.value = editar.descripcion; //mes.value = editar.mes + //dia.value = editar.dia + + botonEnviarMeta.innerText = "Actualizar"; + }); + }); + } else if (detallesMeta.mes === "diciembre") { + mesDiciembre.innerHTML += ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + `; //Eliminar + + const btnsDelete = document.querySelectorAll(".btn-delete"); + btnsDelete.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = []; + mesDiciembre.innerHTML = ""; + await deleteMeta(e.target.dataset.id); + }); + }); //Editar + + const btnsEdit = document.querySelectorAll(".btn-edit"); + btnsEdit.forEach(btn => { + btn.addEventListener("click", async e => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = []; + const doc = await editMeta(e.target.dataset.id); + console.log(doc.data()); + let editar = doc.data(); + editStatus = true; + id = doc.id; + tipo.value = editar.tipo; + titulo.value = editar.titulo; + descripcion.value = editar.descripcion; //mes.value = editar.mes + //dia.value = editar.dia + + botonEnviarMeta.innerText = "Actualizar"; + }); + }); + } + } + /* let enero = ""; + let febrero = ""; + for (const meses of getMetasArray) { + //console.log(meses.mes) + if (meses.mes === "enero") { + enero++ + //console.log(febrero) + } else if (meses.mes === "febrero") { + febrero++ + } //console.log(febrero) + } + console.log("enero: " + enero) + console.log("febrero: " + febrero)*/ + + }); + }); + }); // } +}; \ No newline at end of file diff --git a/lib/modules/firebase.js b/lib/modules/firebase.js new file mode 100644 index 0000000..39a1c03 --- /dev/null +++ b/lib/modules/firebase.js @@ -0,0 +1,14 @@ +// Import the functions you need from the SDKs you need +import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"; // TODO: Add SDKs for Firebase products that you want to use +// https://firebase.google.com/docs/web/setup#available-libraries +// Your web app's Firebase configuration + +firebase.initializeApp({ + apiKey: "AIzaSyD1QVSld0basgVtsk378cja4cTJaQyvSy0", + authDomain: "metas-22.firebaseapp.com", + projectId: "metas-22", + storageBucket: "metas-22.appspot.com", + messagingSenderId: "896755178032", + appId: "1:896755178032:web:a580e4e7cb6706f85d6bf5" +}); // Initialize Firebase +//const app = initializeApp(firebaseConfig); \ No newline at end of file diff --git a/lib/sum.js b/lib/sum.js new file mode 100644 index 0000000..c42073f --- /dev/null +++ b/lib/sum.js @@ -0,0 +1,5 @@ +function sum(a, b) { + return a + b; +} + +module.exports = sum; \ No newline at end of file diff --git a/lib/sum.spec.js b/lib/sum.spec.js new file mode 100644 index 0000000..df0dd09 --- /dev/null +++ b/lib/sum.spec.js @@ -0,0 +1,5 @@ +const sum = require('./sum'); + +test('adds 1 + 2 to equal 3', () => { + expect(sum(1, 2)).toBe(3); +}); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..262e731 --- /dev/null +++ b/package.json @@ -0,0 +1,38 @@ +{ + "name": "technicalchallenge_2ndblock", + "version": "1.0.0", + "description": "Develop yourself a Notes App for yourself to keep in mind your New Year resolutions and goals. The target user is yourself.", + "main": "index.js", + "type": "module", + "scripts": { + "test": "jest", + "build": "babel src -d lib" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/Elibabah/technicalChallenge_2ndBlock.git" + }, + "keywords": [ + "JS", + "Vanilla", + "Modules", + "Firebase", + "CRUD" + ], + "author": "Elibabah", + "license": "MIT", + "bugs": { + "url": "https://github.com/Elibabah/technicalChallenge_2ndBlock/issues" + }, + "homepage": "https://github.com/Elibabah/technicalChallenge_2ndBlock#readme", + "devDependencies": { + "@babel/cli": "^7.16.8", + "@babel/core": "^7.16.7", + "@babel/preset-env": "^7.16.8", + "@typescript-eslint/eslint-plugin": "^5.9.0", + "@typescript-eslint/parser": "^5.9.0", + "babel-jest": "^27.4.6", + "eslint": "^8.6.0", + "jest": "^27.4.7" + } +} \ No newline at end of file diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..a78fb0b --- /dev/null +++ b/src/index.css @@ -0,0 +1,344 @@ +dashboard { + display: grid; + width: auto; + grid-template-columns: 1fr 2fr 2fr; + grid-template-rows: 0.15fr 2fr 1fr 0.15fr; + grid-template-areas: "aside header header" "aside main main" "analitica analitica analitica" "footer footer footer"; + padding: 0%; + column-gap: 0%; + row-gap: 0%; +} + +header { + grid-area: header; + text-align: center; + background-color: maroon; + color: cornsilk; +} + +aside { + grid-area: aside; + text-align: center; + padding: 4%; +} + +main { + grid-area: main; + text-align: center; + margin-bottom: 5%; + padding: 2%; +} + +meses { + display: grid; + width: auto; + grid-template-columns: 2fr 2fr 2fr 2fr; + grid-template-rows: 1fr 1fr 1fr; + grid-template-areas: "enero febrero marzo abril" "mayo junio julio agosto" "septiembre octubre noviembre diciembre"; + padding: 0%; + column-gap: 1%; + row-gap: 1%; + border-radius: 5%; +} + +enero { + grid-area: enero; + text-align: center; + border-style: ridge; + height: 22rem; +} + +febrero { + grid-area: febrero; + text-align: center; + border-style: ridge; + height: 22rem; +} + +marzo { + grid-area: marzo; + text-align: center; + border-style: ridge; + height: 22rem; +} + +abril { + grid-area: abril; + text-align: center; + border-style: ridge; + height: 22rem; +} + +mayo { + grid-area: mayo; + text-align: center; + border-style: ridge; + height: 22rem; +} + +junio { + grid-area: junio; + text-align: center; + border-style: ridge; + height: 22rem; +} + +julio { + grid-area: julio; + text-align: center; + border-style: ridge; + height: 22rem; +} + +agosto { + grid-area: agosto; + text-align: center; + border-style: ridge; + height: 22rem; +} + +septiembre { + grid-area: septiembre; + text-align: center; + border-style: ridge; + height: 22rem; +} + +octubre { + grid-area: octubre; + text-align: center; + border-style: ridge; + height: 22rem; +} + +noviembre { + grid-area: noviembre; + text-align: center; + border-style: ridge; + height: 22rem; +} + +diciembre { + grid-area: diciembre; + text-align: center; + border-style: ridge; + height: 22rem; +} + +.scroll { + height: 20rem; + overflow: auto; + white-space: nowrap; +} + +.title-month { + position: static; + font-size: 110%; + background-color: darkolivegreen; + color: cornsilk; +} + +hr { + display: block; + margin: auto; + margin-top: 0%; + margin-bottom: 2%; + height: 100%; + width: 90%; + background-color: #000; +} + +analitica { + grid-area: analitica; + text-align: center; +} + +.graph-content { + border-radius: 12px; + box-shadow: var(--shadow); + padding: 1rem; +} + +footer { + grid-area: footer; + text-align: center; + align-items: center; + color: #FFF; + padding-bottom: 0%; + font-size: 100%; + padding-top: 2.5%; + background-color: black; + background-size: cover; +} + +#copy { + font-size: 50%; +} + +#by { + line-height: 100%; +} + +.btn-social { + font-size: 100%; + margin: 0 2%; +} + +.ano { + position: static; + margin-top: 2%; +} + +.welcome { + font-size: 120%; + margin-top: 8%; + margin-bottom: 10%; +} + +.fotoUsuario { + width: 30%; + border-radius: 50%; + margin-bottom: 15%; +} + +.metaGlobal { + margin-bottom: 2%; +} + +.creaUnaMeta { + margin-bottom: 5%; +} + +.cita { + font-style: italic; + margin-top: 4%; +} + +#cerrarSesion { + width: 10%; + display: block; + margin: auto; + position: static; + float: right; + background-color: darkred; + border-style: none; + margin-right: 1%; + margin-bottom: 1%; +} + +#cerrarSesion:hover { + background-color: firebrick; +} + + +/* Formulario */ + +#metaForm { + font-size: 66%; + padding: 1%; + padding-top: 5%; + margin-top: 0%; + margin-bottom: 5%; + margin-left: 7%; +} + +.form-select { + font-size: 120%; +} + +.form-control::placeholder { + font-size: 90%; + text-align: left; +} + +#style-for { + font-size: 120%; +} + +#enviarMeta { + display: block; + margin: auto; + width: 60%; + font-size: 120%; + background-color: darkred; + border-style: none; + margin-top: 2%; +} + +#enviarMeta:hover { + background-color: firebrick; +} + +#card-individual { + height: 19.5rem; + max-width: 100%; + border-style: ridge; + padding: 5%; + margin-bottom: 3%; +} + +.card-title { + font-size: 90%; + text-align: right; + margin-right: 0.5%; +} + +.btn-edit { + width: 27%; + font-size: 65%; + float: right; + text-align: center; + margin-top: 5%; + margin-right: 7%; + margin-bottom: 0%; + background-color: darkolivegreen; + border-style: none; +} + +.btn-edit:hover { + background-color: olivedrab; +} + +.btn-delete { + width: 25%; + font-size: 60%; + border-style: solid; + border-color: darkolivegreen; + float: left; + text-align: center; + color: darkolivegreen; + margin-top: 5%; + margin-left: 7%; + margin-bottom: 0%; +} + +.btn-delete:hover { + color: #FFF; + background-color: olivedrab; +} + +.graph-card { + width: 47%; + margin-top: 2%; + border-radius: 2%; +} + +.graph-month { + float: left; + margin-left: 2%; +} + +.graph-kind { + float: right; + margin-right: 2%; +} + +.analitica { + font-size: 120%; + margin-bottom: 2%; +} + +#headGrafica { + font-size: 119%; + margin-top: 2%; +} \ No newline at end of file diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..18c6dd3 --- /dev/null +++ b/src/index.html @@ -0,0 +1,315 @@ + + + + + + + + Metas 2022 + + + + + + + + + + + + + + + + +
+

2022

+
Meta global: Construir el inicio de mi carrera como desarrollador
+ +
+ +
+ + +
Enero
+
+
+
+
+ + + +
Febrero
+
+
+
+
+ + + +
Marzo
+
+
+
+
+ + + +
Abril
+
+
+
+
+ + + +
Mayo
+
+
+
+
+ + + +
Junio
+
+
+
+
+ + + +
Julio
+
+
+
+
+ + + +
Agosto
+
+
+
+
+ + + +
Septiembre
+
+
+
+
+ + + +
Octubre
+
+
+
+
+ + + +
Noviembre
+
+
+
+
+ + + +
Diciembre
+
+
+
+
+ + + +
+ +
ANALÍTICA
+ + + + +
+

+ Saturación por mes +

+
+
+
+ +
+
+ +
+
+
+ +
+
+
+ + + + +
+

+ Saturación por meta +

+
+
+
+ +
+
+ +
+
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..ca38d5e --- /dev/null +++ b/src/index.js @@ -0,0 +1,13 @@ +import { diasPorMes } from "./modules/app.js"; +import { enviarFB } from "./modules/data.js" +diasPorMes() +enviarFB() + //traerMetas() + + +let btnSalir = document.getElementById("cerrarSesion") + +btnSalir.addEventListener("click", () => { + //console.log("clicked") + window.location = ("./login.html") +}) \ No newline at end of file diff --git a/src/login.css b/src/login.css new file mode 100644 index 0000000..93277b7 --- /dev/null +++ b/src/login.css @@ -0,0 +1,105 @@ +login { + display: grid; + width: 100%; + height: 100vh; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 0.2fr 2fr 0.2fr; + grid-template-areas: "header header header" "main main main" "footer footer footer"; + padding: 0%; + column-gap: 0%; + row-gap: 0%; +} + +header { + grid-area: header; + text-align: center; + color: cornsilk; +} + +main { + grid-area: main; + text-align: center; + margin-bottom: 5%; + padding: 2%; +} + +footer { + grid-area: footer; + text-align: center; + align-items: center; + color: #FFF; + padding-bottom: 0%; + font-size: 100%; + padding-top: 1.5%; + background-color: black; + background-size: cover; +} + +#copy { + font-size: 50%; +} + +#by { + line-height: 100%; +} + +.btn-social { + font-size: 100%; + margin: 0 2%; +} + +.ano { + position: static; + margin-top: 2%; +} + +.photoUser { + width: 40%; + border-radius: 50%; + margin-top: 14%; + margin-bottom: 5%; +} + +.card-content { + display: block; + margin: auto; + width: 35%; + height: 100%; + border-radius: 5%; + border-style: ridge; + background-color: cornsilk; +} + +.entrada { + margin-top: 5%; + margin-bottom: 8%; + text-align: center; +} + +.acceso { + width: 60%; +} + +.acceso::placeholder { + text-align: center; +} + +hr { + width: 70%; + display: block; + margin: auto; + margin-top: 4%; + margin-bottom: 3%; +} + +.citaUnamuno { + font-size: 80%; + font-style: italic; + margin-bottom: 2%; +} + +.Unamuno { + font-size: 80%; + text-align: right; + margin-right: 15%; +} \ No newline at end of file diff --git a/src/login.html b/src/login.html new file mode 100644 index 0000000..8f0224d --- /dev/null +++ b/src/login.html @@ -0,0 +1,60 @@ + + + + + + + Metas 2022 + + + + + + + + + + + + + + + +
+
+
+ +
+ + imagenUsuario
+ + +
+ +
+
+
+
+
Cuando un hombre sueña algo...
¿Qué es lo que más existe?
¿Su sueño o él como conciencia que sueña?
+
Unamuno
+ + +
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/src/login.js b/src/login.js new file mode 100644 index 0000000..096e72d --- /dev/null +++ b/src/login.js @@ -0,0 +1,11 @@ +let btnAccess = document.getElementById("login") + +btnAccess.addEventListener("click", () => { + //console.log("clicked") + let pass = document.getElementById("password").value + if (pass == "") { + window.location = ("./index.html") + } else { + alert("Acceso denegado") + } +}) \ No newline at end of file diff --git a/src/modules/app.js b/src/modules/app.js new file mode 100644 index 0000000..47e74b8 --- /dev/null +++ b/src/modules/app.js @@ -0,0 +1,40 @@ +export const diasPorMes = () => { + + + const meses = "../datamonth/month.json"; + + const mesesArray = [] + fetch(meses) + .then((response) => response.json()) + .then((data) => { + mesesArray.push(data); + console.log(mesesArray); + + for (let mes in mesesArray[0]) { + console.log(mes); + + let imprimirMes = document.getElementById("mesChoose"); + imprimirMes.innerHTML += ` + + `; + } + + let diaPorMes = document.getElementById("mesChoose"); + + diaPorMes.addEventListener("change", () => { + console.log("estoy escuchando") + let clickMes = document.getElementById("mesChoose").value; + console.log(clickMes) + + //console.log(mesesArray[0][clickMes]) + for (let dia of mesesArray[0][clickMes]) { + console.log(dia) + + let imprimirDia = document.getElementById("diaChoose") + imprimirDia.innerHTML += ` + + `; + } + }) + }) +} \ No newline at end of file diff --git a/src/modules/data.js b/src/modules/data.js new file mode 100644 index 0000000..674ee56 --- /dev/null +++ b/src/modules/data.js @@ -0,0 +1,1090 @@ +import * as module from "./firebase.js" + +import { diasPorMes } from "./app.js"; + + +export const enviarFB = () => { + const db = firebase.firestore(); + //db.collection("metas").add() + + const saveMeta = (obj) => { + db.collection("metas").doc().set(obj); + }; + const updateMeta = (id, updateMeta) => db.collection("metas").doc(id).update(updateMeta); + let metaForm = document.getElementById("metaForm") + let botonEnviarMeta = document.getElementById("enviarMeta") + let botonCerrarModal = document.getElementById("cerrarModal") + let editStatus = false; + let id = ""; + let metasEnMes = []; + let saturacionTipoMeta = []; + + + + let getMetasArray = []; + const cardMeta = document.getElementById("cardPorMeta") + + let mesEnero = document.getElementById("enero") + let mesFebrero = document.getElementById("febrero") + let mesMarzo = document.getElementById("marzo") + let mesAbril = document.getElementById("abril") + let mesMayo = document.getElementById("mayo") + let mesJunio = document.getElementById("junio") + let mesJulio = document.getElementById("julio") + let mesAgosto = document.getElementById("agosto") + let mesSeptiembre = document.getElementById("septiembre") + let mesOctubre = document.getElementById("octubre") + let mesNoviembre = document.getElementById("noviembre") + let mesDiciembre = document.getElementById("diciembre") + + + + + const onGetMetas = (callback) => db.collection("metas").onSnapshot(callback); + const deleteMeta = id => db.collection("metas").doc(id).delete(); + const editMeta = (id) => db.collection("metas").doc(id).get() + /* let tipo = document.getElementById("tipo").value + let titulo = document.getElementById("titulo").value + let descripcion = document.getElementById("descripcion").value*/ + let mes = document.getElementById("mesChoose").value + let dia = document.getElementById("diaChoose").value + + // Botón enviar meta creada + botonEnviarMeta.addEventListener("click", async(e) => { + + //Validación de entradas + /* if (tipo.length == 0) { + // Si no se cumple la condicion... + alert("¡No te olvides del tipo de tu propósito!"); + return false; + } else if (titulo == null || + titulo.length == 0 || + /^\s+$/.test(titulo)) { + // Si no se cumple la condicion... + alert("¡Ponerle nombre a tus metas ayuda a hacerlas más claras!"); + return false; + } else if (descripcion == null || descripcion == 0) { + // Si no se cumple la condicion... + alert("¡Será mejor que agregues de qué va tu propósito para lo recuerdes todo!"); + return false; + } else if (mes == null || mes == 0) { + // Si no se cumple la condicion... + alert("¡No olvides calendarizar tu meta, así será concreta!"); + return false; + } else if (dia == null || dia == 0) { + alert("Mmmm, ¿no quisieras agregar un día?"); + return false; + }*/ + + //Modelado de objeto + /*let metaObject = { + "tipo": document.getElementById("tipo").value, + "titulo": document.getElementById("titulo").value, + "descripcion": document.getElementById("descripcion").value, + "mes": document.getElementById("mesChoose").value, + "dia": document.getElementById("diaChoose").value + } + console.log(metaObject)*/ + + //Activar función de guardado de objeto y envío a firebase + e.preventDefault(); + + if (!editStatus) { + await saveMeta( + + + { + "tipo": document.getElementById("tipo").value, + "titulo": document.getElementById("titulo").value, + "descripcion": document.getElementById("descripcion").value, + "mes": document.getElementById("mesChoose").value, + "dia": document.getElementById("diaChoose").value + } + + + ); + + // Desactivar botones mientras se envía data a firebase + //botonEnviarMeta.disabled = true; + //botonCerrarModal.disabled = true; + + + getMetasArray = []; + //cardMeta.innerHTML = ""; + tipo.value = "Selecciona tu tipo de meta"; + titulo.value = ""; + descripcion.value = ""; + /*mes.value = "Selecciona un mes objetivo"; + dia.value = "Selecciona un día";*/ + diasPorMes() + let imprimirDia = document.getElementById("diaChoose") + imprimirDia.innerHTML = "" + imprimirDia.innerHTML += ` + + `; + + // Salida de modal después de data enviada + /*setTimeout(() => { + //alert("¡Meta creada!") + window.location.href = "./index.html"; + }, 1000);*/ + } else { + await updateMeta(id, { + + tipo: tipo.value, + titulo: titulo.value, + descripcion: descripcion.value + + }) + + tipo.value = "Selecciona tu tipo de meta"; + titulo.value = ""; + descripcion.value = ""; + + editStatus = false; + id = ""; + botonEnviarMeta.innerText = "Crear meta" + //botonEnviarMeta.innerText = "Actualizar" + } + + + + + + + }) + // return true; + + + + + //Traer data de Firebase + //const traerMetas = () => { + + //const db = firebase.firestore(); + + /* let getMetasArray = []; + const cardMeta = document.getElementById("cardPorMeta") + const onGetMetas = (callback) => db.collection("metas").onSnapshot(callback); + const deleteMeta = id => db.collection("metas").doc(id).delete(); + const editMeta = (id) => db.collection("metas").doc(id).get()*/ + + window.addEventListener("DOMContentLoaded", async(e) => { + mesEnero.innerHTML = ""; + mesFebrero.innerHTML = ""; + mesMarzo.innerHTML = ""; + mesAbril.innerHTML = ""; + mesMayo.innerHTML = ""; + mesJunio.innerHTML = ""; + mesJulio.innerHTML = ""; + mesAgosto.innerHTML = ""; + mesSeptiembre.innerHTML = ""; + mesOctubre.innerHTML = ""; + mesNoviembre.innerHTML = ""; + mesDiciembre.innerHTML = ""; + + //Función para obtener data en tiempo real con onGetMetas + onGetMetas((querySnapshot) => { + + //cardMeta.innerHTML = ""; + querySnapshot.forEach(doc => { + //console.log(doc.data()) + //console.log(doc.id) + + //Pasando data a array + let datosMeta = doc.data() + datosMeta.id = doc.id + getMetasArray.push(datosMeta) + console.log(getMetasArray) + + renderGraph() + + + //Iterando cada meta desde Array + mesEnero.innerHTML = ""; + mesFebrero.innerHTML = ""; + mesMarzo.innerHTML = ""; + mesAbril.innerHTML = ""; + mesMayo.innerHTML = ""; + mesJunio.innerHTML = ""; + mesJulio.innerHTML = ""; + mesAgosto.innerHTML = ""; + mesSeptiembre.innerHTML = ""; + mesOctubre.innerHTML = ""; + mesNoviembre.innerHTML = ""; + mesDiciembre.innerHTML = ""; + + + for (let i = 0; i < 12; i++) { + metasEnMes[i] = 0; + } + + for (const detallesMeta of getMetasArray) { + console.log(detallesMeta) + + + + + + + if (detallesMeta.mes === "enero") { + metasEnMes[0] += 1; + mesEnero.innerHTML += + ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + ` + //Eliminar + const btnsDelete = document.querySelectorAll(".btn-delete") + + btnsDelete.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = [] + mesEnero.innerHTML = ""; + + await deleteMeta(e.target.dataset.id) + }) + }) + + //Editar + const btnsEdit = document.querySelectorAll(".btn-edit") + + btnsEdit.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = [] + + const doc = await editMeta(e.target.dataset.id) + console.log(doc.data()) + + let editar = doc.data() + + editStatus = true; + id = doc.id + + tipo.value = editar.tipo + titulo.value = editar.titulo + descripcion.value = editar.descripcion + //mes.value = editar.mes + //dia.value = editar.dia + botonEnviarMeta.innerText = "Actualizar" + }) + }) + } else if (detallesMeta.mes === "febrero") { + metasEnMes[1] += 1; + + mesFebrero.innerHTML += + ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + ` + //Eliminar + const btnsDelete = document.querySelectorAll(".btn-delete") + + btnsDelete.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = [] + mesFebrero.innerHTML = ""; + + await deleteMeta(e.target.dataset.id) + }) + }) + + //Editar + const btnsEdit = document.querySelectorAll(".btn-edit") + + btnsEdit.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = [] + + const doc = await editMeta(e.target.dataset.id) + console.log(doc.data()) + + let editar = doc.data() + + editStatus = true; + id = doc.id + + tipo.value = editar.tipo + titulo.value = editar.titulo + descripcion.value = editar.descripcion + //mes.value = editar.mes + //dia.value = editar.dia + botonEnviarMeta.innerText = "Actualizar" + }) + }) + + + + + + + } else if (detallesMeta.mes === "marzo") { + metasEnMes[2] += 1; + mesMarzo.innerHTML += + ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + ` + //Eliminar + const btnsDelete = document.querySelectorAll(".btn-delete") + + btnsDelete.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = [] + mesMarzo.innerHTML = ""; + + await deleteMeta(e.target.dataset.id) + }) + }) + + //Editar + const btnsEdit = document.querySelectorAll(".btn-edit") + + btnsEdit.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = [] + + const doc = await editMeta(e.target.dataset.id) + console.log(doc.data()) + + let editar = doc.data() + + editStatus = true; + id = doc.id + + tipo.value = editar.tipo + titulo.value = editar.titulo + descripcion.value = editar.descripcion + //mes.value = editar.mes + //dia.value = editar.dia + botonEnviarMeta.innerText = "Actualizar" + }) + }) + + + + + + + } else if (detallesMeta.mes === "abril") { + metasEnMes[3] += 1; + mesAbril.innerHTML += + ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + ` + //Eliminar + const btnsDelete = document.querySelectorAll(".btn-delete") + + btnsDelete.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = [] + mesAbril.innerHTML = ""; + + await deleteMeta(e.target.dataset.id) + }) + }) + + //Editar + const btnsEdit = document.querySelectorAll(".btn-edit") + + btnsEdit.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = [] + + const doc = await editMeta(e.target.dataset.id) + console.log(doc.data()) + + let editar = doc.data() + + editStatus = true; + id = doc.id + + tipo.value = editar.tipo + titulo.value = editar.titulo + descripcion.value = editar.descripcion + //mes.value = editar.mes + //dia.value = editar.dia + botonEnviarMeta.innerText = "Actualizar" + }) + }) + + } else if (detallesMeta.mes === "mayo") { + metasEnMes[4] += 1; + mesMayo.innerHTML += + ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + ` + //Eliminar + const btnsDelete = document.querySelectorAll(".btn-delete") + + btnsDelete.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = [] + mesMayo.innerHTML = ""; + + await deleteMeta(e.target.dataset.id) + }) + }) + + //Editar + const btnsEdit = document.querySelectorAll(".btn-edit") + + btnsEdit.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = [] + + const doc = await editMeta(e.target.dataset.id) + console.log(doc.data()) + + let editar = doc.data() + + editStatus = true; + id = doc.id + + tipo.value = editar.tipo + titulo.value = editar.titulo + descripcion.value = editar.descripcion + //mes.value = editar.mes + //dia.value = editar.dia + botonEnviarMeta.innerText = "Actualizar" + }) + }) + + + + + } else if (detallesMeta.mes === "junio") { + metasEnMes[5] += 1; + mesJunio.innerHTML += + ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + ` + //Eliminar + const btnsDelete = document.querySelectorAll(".btn-delete") + + btnsDelete.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = [] + mesJunio.innerHTML = ""; + + await deleteMeta(e.target.dataset.id) + }) + }) + + //Editar + const btnsEdit = document.querySelectorAll(".btn-edit") + + btnsEdit.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = [] + + const doc = await editMeta(e.target.dataset.id) + console.log(doc.data()) + + let editar = doc.data() + + editStatus = true; + id = doc.id + + tipo.value = editar.tipo + titulo.value = editar.titulo + descripcion.value = editar.descripcion + //mes.value = editar.mes + //dia.value = editar.dia + botonEnviarMeta.innerText = "Actualizar" + }) + }) + + + + } else if (detallesMeta.mes === "julio") { + metasEnMes[6] += 1; + mesJulio.innerHTML += + ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + ` + //Eliminar + const btnsDelete = document.querySelectorAll(".btn-delete") + + btnsDelete.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = [] + mesJulio.innerHTML = ""; + + await deleteMeta(e.target.dataset.id) + }) + }) + + //Editar + const btnsEdit = document.querySelectorAll(".btn-edit") + + btnsEdit.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = [] + + const doc = await editMeta(e.target.dataset.id) + console.log(doc.data()) + + let editar = doc.data() + + editStatus = true; + id = doc.id + + tipo.value = editar.tipo + titulo.value = editar.titulo + descripcion.value = editar.descripcion + //mes.value = editar.mes + //dia.value = editar.dia + botonEnviarMeta.innerText = "Actualizar" + }) + }) + } else if (detallesMeta.mes === "agosto") { + metasEnMes[7] += 1 + mesAgosto.innerHTML += + ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + ` + //Eliminar + const btnsDelete = document.querySelectorAll(".btn-delete") + + btnsDelete.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = [] + mesAgosto.innerHTML = ""; + + await deleteMeta(e.target.dataset.id) + }) + }) + + //Editar + const btnsEdit = document.querySelectorAll(".btn-edit") + + btnsEdit.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = [] + + const doc = await editMeta(e.target.dataset.id) + console.log(doc.data()) + + let editar = doc.data() + + editStatus = true; + id = doc.id + + tipo.value = editar.tipo + titulo.value = editar.titulo + descripcion.value = editar.descripcion + //mes.value = editar.mes + //dia.value = editar.dia + botonEnviarMeta.innerText = "Actualizar" + }) + }) + } else if (detallesMeta.mes === "septiembre") { + metasEnMes[8] += 1; + mesSeptiembre.innerHTML += + ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + ` + //Eliminar + const btnsDelete = document.querySelectorAll(".btn-delete") + + btnsDelete.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = [] + mesSeptiembre.innerHTML = ""; + + await deleteMeta(e.target.dataset.id) + }) + }) + + //Editar + const btnsEdit = document.querySelectorAll(".btn-edit") + + btnsEdit.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = [] + + const doc = await editMeta(e.target.dataset.id) + console.log(doc.data()) + + let editar = doc.data() + + editStatus = true; + id = doc.id + + tipo.value = editar.tipo + titulo.value = editar.titulo + descripcion.value = editar.descripcion + //mes.value = editar.mes + //dia.value = editar.dia + botonEnviarMeta.innerText = "Actualizar" + }) + }) + } else if (detallesMeta.mes === "octubre") { + metasEnMes[9] += 1; + mesOctubre.innerHTML += + ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + ` + //Eliminar + const btnsDelete = document.querySelectorAll(".btn-delete") + + btnsDelete.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = [] + mesOctubre.innerHTML = ""; + + await deleteMeta(e.target.dataset.id) + }) + }) + + //Editar + const btnsEdit = document.querySelectorAll(".btn-edit") + + btnsEdit.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = [] + + const doc = await editMeta(e.target.dataset.id) + console.log(doc.data()) + + let editar = doc.data() + + editStatus = true; + id = doc.id + + tipo.value = editar.tipo + titulo.value = editar.titulo + descripcion.value = editar.descripcion + //mes.value = editar.mes + //dia.value = editar.dia + botonEnviarMeta.innerText = "Actualizar" + }) + }) + + } else if (detallesMeta.mes === "noviembre") { + metasEnMes[10] += 1; + mesNoviembre.innerHTML += + ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + ` + //Eliminar + const btnsDelete = document.querySelectorAll(".btn-delete") + + btnsDelete.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = [] + mesNoviembre.innerHTML = ""; + + await deleteMeta(e.target.dataset.id) + }) + }) + + //Editar + const btnsEdit = document.querySelectorAll(".btn-edit") + + btnsEdit.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = [] + + const doc = await editMeta(e.target.dataset.id) + console.log(doc.data()) + + let editar = doc.data() + + editStatus = true; + id = doc.id + + tipo.value = editar.tipo + titulo.value = editar.titulo + descripcion.value = editar.descripcion + //mes.value = editar.mes + //dia.value = editar.dia + botonEnviarMeta.innerText = "Actualizar" + }) + }) + } else if (detallesMeta.mes === "diciembre") { + metasEnMes[11] += 1; + mesDiciembre.innerHTML += + ` +
+
${detallesMeta.tipo}
Día: ${detallesMeta.dia}
+ +
Título
+ + +
Descripción:
+ + + + +
+ + + ` + //Eliminar + const btnsDelete = document.querySelectorAll(".btn-delete") + + btnsDelete.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log(e.target.dataset.id) + //Limpiando para imprimir + getMetasArray = [] + mesDiciembre.innerHTML = ""; + + await deleteMeta(e.target.dataset.id) + }) + }) + + //Editar + const btnsEdit = document.querySelectorAll(".btn-edit") + + btnsEdit.forEach(btn => { + btn.addEventListener("click", async(e) => { + //console.log("editing" + e.target.dataset.id) + getMetasArray = [] + + const doc = await editMeta(e.target.dataset.id) + console.log(doc.data()) + + let editar = doc.data() + + editStatus = true; + id = doc.id + + tipo.value = editar.tipo + titulo.value = editar.titulo + descripcion.value = editar.descripcion + //mes.value = editar.mes + //dia.value = editar.dia + botonEnviarMeta.innerText = "Actualizar" + }) + }) + } + + + } + for (let i = 0; i < 8; i++) { + saturacionTipoMeta[i] = 0; + } + + for (let tipoMeta of getMetasArray) { + //console.log(tipoMeta.tipo) + if (tipoMeta.tipo == "Aprendizaje") { + saturacionTipoMeta[0] += 1; + } else if (tipoMeta.tipo == "Familia") { + saturacionTipoMeta[1] += 1; + } else if (tipoMeta.tipo == "Idiomas") { + saturacionTipoMeta[2] += 1; + } else if (tipoMeta.tipo == "Migración") { + saturacionTipoMeta[3] += 1; + } else if (tipoMeta.tipo == "Personal") { + saturacionTipoMeta[4] += 1; + } else if (tipoMeta.tipo == "Profesional") { + saturacionTipoMeta[5] += 1; + } else if (tipoMeta.tipo == "Relaciones") { + saturacionTipoMeta[6] += 1; + } else if (tipoMeta.tipo == "Salud") { + saturacionTipoMeta[7] += 1; + } + } + console.log(saturacionTipoMeta) + }); + }) + + + function renderGraph() { + + let meses = ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"] + myChart.data.datasets[0].data = metasEnMes; //Y + myChart.data.labels = meses; // X + myChart.update(); + + let metaTipo = ["Aprendizaje", "Familia", "Idiomas", "Migración", "Personal", "Profesional", "Relaciones", "Salud"] + myChart2.data.datasets[0].data = saturacionTipoMeta; //Y + myChart2.data.labels = metaTipo; // X + myChart2.update(); + + } + }) + // } + + + +} + + + + + +// Chart.defaults.global.defaultFontFamily = "Poppins"; +const ctx = document.getElementById("myChart").getContext("2d"); +const myChart = new Chart(ctx, { + type: "line", + data: { + labels: [ + "enero", + "febrero", + "marzo", + "abril", + "mayo", + "junio", + "julio", + "agosto", + "septiembre", + "octubre", + "noviembre", + "diciembre", + ], + datasets: [{ + label: "Saturación metas", + data: [12, 19, 3, 5, 2, 3, 4, 6, 8, 19, 2, 6, 8, 15], + backgroundColor: [ + "rgba(255, 99, 132, 0.2)", + "rgba(54, 162, 235, 0.2)", + "rgba(255, 206, 86, 0.2)", + "rgba(75, 192, 192, 0.2)", + "rgba(153, 102, 255, 0.2)", + "rgba(255, 159, 64, 0.2)", + ], + borderColor: [ + "rgba(255, 99, 132, 1)", + "rgba(54, 162, 235, 1)", + "rgba(255, 206, 86, 1)", + "rgba(75, 192, 192, 1)", + "rgba(153, 102, 255, 1)", + "rgba(255, 159, 64, 1)", + ], + borderWidth: 2, + }, ], + }, + options: { + responsive: true, + scales: { + y: { + beginAtZero: true, + }, + }, + }, +}); +/// +///--------------------------------------------------------------------------------------------- +/// +const ctx2 = document.getElementById("myChart2").getContext("2d"); +const myChart2 = new Chart(ctx2, { + type: "bar", + data: { + labels: [ + "Aprendizaje", + "Familia", + "Idiomas", + "Migración", + "Personal", + "Profesional", + "Relaciones", + "Salud", + ], + datasets: [{ + label: "Saturación por meta", + data: [12, 19, 3, 5, 2, 3, 4, 6, 8, 19, 2, 6, 8, 15], + backgroundColor: [ + "rgba(255, 99, 132, 0.2)", + "rgba(54, 162, 235, 0.2)", + "rgba(255, 206, 86, 0.2)", + "rgba(75, 192, 192, 0.2)", + "rgba(153, 102, 255, 0.2)", + "rgba(255, 159, 64, 0.2)", + ], + borderColor: [ + "rgba(255, 99, 132, 1)", + "rgba(54, 162, 235, 1)", + "rgba(255, 206, 86, 1)", + "rgba(75, 192, 192, 1)", + "rgba(153, 102, 255, 1)", + "rgba(255, 159, 64, 1)", + ], + borderWidth: 2, + }, ], + }, + options: { + responsive: true, + scales: { + y: { + beginAtZero: true, + }, + }, + }, +}); \ No newline at end of file diff --git a/src/modules/firebase.js b/src/modules/firebase.js new file mode 100644 index 0000000..6b1b6e0 --- /dev/null +++ b/src/modules/firebase.js @@ -0,0 +1,17 @@ + // Import the functions you need from the SDKs you need + import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"; + // TODO: Add SDKs for Firebase products that you want to use + // https://firebase.google.com/docs/web/setup#available-libraries + + // Your web app's Firebase configuration + firebase.initializeApp({ + apiKey: "AIzaSyD1QVSld0basgVtsk378cja4cTJaQyvSy0", + authDomain: "metas-22.firebaseapp.com", + projectId: "metas-22", + storageBucket: "metas-22.appspot.com", + messagingSenderId: "896755178032", + appId: "1:896755178032:web:a580e4e7cb6706f85d6bf5" + }); + + // Initialize Firebase + //const app = initializeApp(firebaseConfig); \ No newline at end of file diff --git a/src/sum.js b/src/sum.js new file mode 100644 index 0000000..5badb88 --- /dev/null +++ b/src/sum.js @@ -0,0 +1,4 @@ +function sum(a, b) { + return a + b; +} +module.exports = sum; \ No newline at end of file diff --git a/src/sum.spec.js b/src/sum.spec.js new file mode 100644 index 0000000..61806e8 --- /dev/null +++ b/src/sum.spec.js @@ -0,0 +1,5 @@ +const sum = require('./sum'); + +test('adds 1 + 2 to equal 3', () => { + expect(sum(1, 2)).toBe(3); +}); \ No newline at end of file