function notify(type, message, segundos) { let n = document.createElement("div"); let id = Math.random().toString(36).substr(2, 10); let notificationArea = document.getElementById("notification-area"); // let imgDinamic = document.getElementById('notifyImg'); // notificationArea.style.height = '100vh'; n.setAttribute("id", id); n.classList.add("notification", type); n.innerText = message; // imgDinamic.setAttribute('src', imgPath); document.getElementById("notification-area").appendChild(n); setTimeout(() => { let notifications = document .getElementById("notification-area") .getElementsByClassName("notification"); for (let i = 0; i < notifications.length; i++) { if (notifications[i].getAttribute("id") == id) { // imgDinamic.remove(); notifications[i].remove(); break; } } notificationArea.style.height = "0%"; }, segundos); // {# 5000 = 5 segundos #} } function setDataSpan(idSpan, value) { document.getElementById(idSpan).innerText = value; } function stringDay(dayNumber) { let dayString = ''; if (dayNumber >= 1 && dayNumber <= 9) { dayString = `0${dayNumber}`; } else { dayString = `${dayNumber}`; }; return dayString; } function currentDate() { let today = new Date(); let date = `${stringDay(today.getDate())}/${stringMonth( today.getMonth() + 1 )}/${today.getFullYear()}`; return date; } function fastReplace(myString, characterReplacement, newCharacter) { `${myString}` .replace(characterReplacement, newCharacter) .replace(characterReplacement, newCharacter); } function nompropio(stringToconvert) { let largoStr = stringToconvert.length; let i = 0; let resp; let nextMayus = false; for (; i < largoStr; i++) { let letra = stringToconvert[i]; if (i == 0) { resp = letra.toUpperCase(); } else { if (nextMayus == false && letra == " ") { resp += letra; nextMayus = true; } else if (nextMayus == true) { resp += letra.toUpperCase(); nextMayus = false; } else { resp += letra.toLowerCase(); } } } return resp; } function validarContentInput(idInput, colorAlerta, colorNoAlerta) { let inputToValidate = document.getElementById(idInput); if (inputToValidate.disabled == false) { // inputToValidate.style.backgroundColor = colorAlerta; inputToValidate.style.border = `3px solid ${colorAlerta}`; } inputToValidate.addEventListener("change", () => { if (inputToValidate.value == "") { inputToValidate.style.border = `3px solid ${colorAlerta}`; } else { inputToValidate.style.border = `2px solid ${colorNoAlerta}`; } }); } function roundNumber(numfloat, tipoMedida) { let respuesta; if (tipoMedida == "Porcentaje.") { respuesta = numfloat * 100; } else { respuesta = numfloat; } return parseFloat(respuesta.toFixed(2)); } function stringMonth(mesNumero) { let m = ""; if (mesNumero <= 9) { m = `0${mesNumero}` } else { m = mesNumero } /* switch (mesNumero) { case 1: m = "enero"; break; case 2: m = "febrero"; break; case 3: m = "marzo"; break; case 4: m = "abril"; break; case 5: m = "mayo"; break; case 6: m = "junio"; break; case 7: m = "julio"; break; case 8: m = "agosto"; break; case 9: m = "septiembre"; break; case 10: m = "octubre"; break; case 11: m = "noviembre"; break; case 12: m = "diciembre"; break; } */ return m; } //aquí me quede function isFrecuenciaAbsoluta(idTagUnidadMedida, idCirculo, idTable, idTipoMeta) { let circulo = document.getElementById(idCirculo); let tabla = document.getElementById(idTable); let idTag = document.getElementById(idTagUnidadMedida); let meta = document.getElementById(idTipoMeta); //console.log(idTag.firstChild.data); if (idTag.innerText != 'Porcentaje.') { circulo.remove(); tabla.remove(); } if (meta.innerText != 'Trimestral.') { circulo.remove(); tabla.remove(); } } function camposObligatorios() { let mensaje; let req = 0; let inputTags = document.getElementsByTagName("input"); let fieldSoporte = document.getElementById("infosoporte"); for (let i = 0; i < inputTags.length; i++) { if (inputTags[i].value == '' && inputTags[i].disabled == false && inputTags[i].getAttribute('type') != 'file') { req += 1; } } if (fieldSoporte.value.length == 0) { req += 1; } if (req > 0) { if (req == 1) { mensaje = "El campo con borde naranja es obligatorio"; } else { mensaje = `Los ${req} campos marcados con borde naranja son obligatorios`; } } return mensaje } function limpiarFormulario(colorAlerta) { let ArrayInputs = document.getElementsByTagName("input"); let ArrayTxtarea = document.getElementsByTagName("textarea"); let i = 0; while (i < ArrayInputs.length) { if (ArrayInputs[i].disabled == false) { ArrayInputs[i].value = ""; document.getElementById( ArrayInputs[i].id ).style.border = `3px solid ${colorAlerta}`; } i++; } ArrayTxtarea[0].value = ""; ArrayTxtarea[1].value = ""; ArrayTxtarea[1].style.border = `3px solid ${colorAlerta}`; } function lastDayOfMonth(myYear, myMonth) { var month = myMonth; var d = new Date(myYear, myMonth, 0); return d.getDate(); } function numFrmt(num) { let r; if (num < 10) { r = `0${num}`; } else { r = `${num}`; } return r; } function validarContentTextArea(idTxtArea, colorAlerta, colorNoAlerta) { let txtArea = document.getElementById(idTxtArea); txtArea.style.border = `3px solid ${colorAlerta}`; txtArea.addEventListener('change', () => { if (txtArea.value == '') { txtArea.style.border = `3px solid ${colorAlerta}`; // inputToValidate.style.border = `2px solid ${colorNoAlerta}`; } else { txtArea.style.border = `2px solid ${colorNoAlerta}`; } }); } function valorSemaforo( idVarA, idVarB, semaforoToChange, idSemaforoForm, idAmarilloLi, idAmarilloLs, idSigno, idFilaRojo, idFilaAmarillo, idFilaVerde ) { /* idVarA: contenedor de la variable a (input), idVarB: contenedor de la variable b (input), semaforoToChange: es en donde se pintara el porcentaje (span), idSemaforoForm: es el id del semáforo que se pintara idAmarilloLi: es el id del amarillo límite inferior (span) idAmarilloLs: es el id del amarillo límite superior (span) idSigno: es el id donde tiene el signo de porcentaje, pendiente de meterle la lójica */ let varA = document.getElementById(idVarA); let varB = document.getElementById(idVarB); let circulo = document.getElementById(idSemaforoForm); let amarilloLi = document.getElementById(idAmarilloLi); let amarilloLs = document.getElementById(idAmarilloLs); let signo = document.getElementById(idSigno); let redColor = "#9b2226"; let yellowColor = "#fca311"; let greenColor = "#008000"; let whiteColor = "#ffffff"; let listObj = [varA, varB]; listObj.forEach((ele) => { ele.addEventListener("change", () => { let parseVarA = parseFloat(varA.value); let parseVarB = parseFloat(varB.value); let valPorcentual; let parseAmarilloLi = parseFloat(amarilloLi.textContent); let parseAmarilloLs = parseFloat(amarilloLs.textContent); let semaforo = document.getElementById(semaforoToChange); if (varA.value != "" && varB.value != "") { valPorcentual = ((parseVarA / parseVarB) * 100).toFixed(2); let r = (semaforo.textContent = valPorcentual); if (valPorcentual < parseAmarilloLi) { circulo.style.background = redColor; tableRowStyleSemaforo(idFilaRojo, redColor, whiteColor); // quitar estilos a las otras filas tableRowStyleSemaforo(idFilaAmarillo, whiteColor, "black"); tableRowStyleSemaforo(idFilaVerde, whiteColor, "black"); } else if ( valPorcentual > parseAmarilloLs && valPorcentual != "Infinity" ) { circulo.style.background = greenColor; tableRowStyleSemaforo(idFilaVerde, greenColor, whiteColor); // quitar estilos a las otras filas tableRowStyleSemaforo(idFilaRojo, whiteColor, "black"); tableRowStyleSemaforo(idFilaAmarillo, whiteColor, "black"); } else if ( valPorcentual >= parseAmarilloLi && valPorcentual <= parseAmarilloLs ) { circulo.style.background = yellowColor; tableRowStyleSemaforo(idFilaAmarillo, yellowColor, "black"); // quitar estilos a las otras filas tableRowStyleSemaforo(idFilaRojo, whiteColor, "black"); tableRowStyleSemaforo(idFilaVerde, whiteColor, "black"); } else if (valPorcentual == "NaN") { circulo.style.background = whiteColor; signo.textContent = ""; tableRowStyleSemaforo(idFilaRojo, whiteColor, "black"); tableRowStyleSemaforo(idFilaAmarillo, whiteColor, "black"); tableRowStyleSemaforo(idFilaVerde, whiteColor, "black"); //console.log("not a number"); } else { circulo.style.background = whiteColor; semaforo.textContent = ""; tableRowStyleSemaforo(idFilaRojo, whiteColor, "black"); tableRowStyleSemaforo(idFilaAmarillo, whiteColor, "black"); tableRowStyleSemaforo(idFilaVerde, whiteColor, "black"); } semaforo.style.color = whiteColor; signo.textContent = "%"; signo.style.color = whiteColor; } else { semaforo.textContent = ""; circulo.style.background = whiteColor; } }); }); } function tableRowStyleSemaforo(idRow, bgColor, fgColor) { let fila = document.getElementById(idRow); fila.style.background = bgColor; fila.style.color = fgColor; } function generalStylesSignField(idDivTagFirma, idImgTag, idInputFiletag) { // idDivTagFirma div contenedor del input y el img (tags) let divAffect = document.getElementById(idDivTagFirma); // función para afectar los estilos contenedores de la imagen let imgAffect = document.getElementById(idImgTag); // afectar el input type file let inputTag = document.getElementById(idInputFiletag); divAffect.style.display = "table-cell"; divAffect.style.height = "150px"; divAffect.style.width = "1%"; divAffect.style.verticalAlign = "middle"; divAffect.style.textAlign = "center"; divAffect.style.color = "#000000"; divAffect.style.backgroundColor = "#FFFFFF"; divAffect.style.border = "solid 2px #000000"; divAffect.style.borderRadius = "10px"; divAffect.style.padding = "10px"; imgAffect.style.display = "None"; imgAffect.style.width = "100%"; imgAffect.style.height = "125px"; imgAffect.style.objectFit = "contain"; inputTag.style.display = "none"; } function uploadPictureToWeb(idDivSignContainer, idInputFile, idImgContainer) { let divTagC = document.getElementById(idDivSignContainer); let inputTag = document.getElementById(idInputFile); let spanTag = divTagC.querySelector("span"); divTagC.addEventListener("dblclick", () => { inputTag.click(); if (spanTag) { spanTag.innerText = ""; } $(idInputFile).onChange(function() { runUpload(this.files[0], idImgContainer); }); }); } function runUpload(file, idImgTag) { // https://www.photoroom.com/quitar-fondo-imagen/ let imgcont = document.getElementById(idImgTag); let span = imgcont.parentElement.querySelector("span"); try { if (file == undefined) { // console.log("no se ha elegido ninguna imagen de firma"); imgcont.style.display = "none"; imgcont.setAttribute("src", ""); span.textContent = "Dar docle click para cargar imagen firma"; } if ( file.type === "image/png" || file.type === "image/jpg" || file.type === "image/jpeg" ) { let reader = new FileReader(), image = new Image(); reader.readAsDataURL(file); reader.onload = function(_file) { if (_file.target.result.length > 0) { $(idImgTag).el.src = _file.target.result; $(idImgTag).el.style.display = "inline"; span.textContent = ""; } }; // END reader.onload() } } catch (error) { imgcont.style.display = "none"; imgcont.setAttribute("src", ""); span.textContent = "Doble click para cargar firma digitalizada"; } } function deshabilitarInput(idInputToDisabled) { let elemento = document.getElementById(idInputToDisabled); elemento.disabled = true; elemento.placeholder = 'N/A'; elemento.style.background = '#ced4da'; elemento.style.border = `3px solid #000`; } export { notify, setDataSpan, currentDate, nompropio, fastReplace, validarContentInput, roundNumber, limpiarFormulario, lastDayOfMonth, numFrmt, valorSemaforo, tableRowStyleSemaforo, generalStylesSignField, uploadPictureToWeb, runUpload, isFrecuenciaAbsoluta, validarContentTextArea, deshabilitarInput, camposObligatorios };