474 lines
14 KiB
JavaScript
474 lines
14 KiB
JavaScript
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
|
|
}; |