Calculadora de Horas y Minutos de Trabajo – Calcula tu Jornada Laboral
:root {
–primary-color: #004a99;
–background-color: #f8f9fa;
–card-background: #ffffff;
–text-color: #333;
–border-color: #dee2e6;
–shadow-color: rgba(0, 0, 0, 0.1);
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(–background-color);
color: var(–text-color);
margin: 0;
padding: 0;
line-height: 1.6;
}
.container {
max-width: 960px;
margin: 20px auto;
padding: 20px;
background-color: var(–card-background);
border-radius: 8px;
box-shadow: 0 2px 10px var(–shadow-color);
}
h1, h2, h3 {
color: var(–primary-color);
text-align: center;
margin-bottom: 20px;
}
h1 {
font-size: 2.2em;
}
h2 {
font-size: 1.8em;
margin-top: 40px;
border-bottom: 2px solid var(–primary-color);
padding-bottom: 10px;
}
h3 {
font-size: 1.4em;
margin-top: 30px;
color: #555;
}
.calculator-section {
border: 1px solid var(–border-color);
border-radius: 8px;
padding: 25px;
margin-bottom: 30px;
background-color: var(–card-background);
box-shadow: 0 1px 5px var(–shadow-color);
}
.calculator-section h2 {
margin-top: 0;
border-bottom: none;
padding-bottom: 0;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #555;
}
.input-group input[type="number"],
.input-group select {
width: 100%;
padding: 10px;
border: 1px solid var(–border-color);
border-radius: 4px;
box-sizing: border-box;
font-size: 1em;
transition: border-color 0.3s ease;
}
.input-group input[type="number"]:focus,
.input-group select:focus {
border-color: var(–primary-color);
outline: none;
}
.input-group .helper-text {
font-size: 0.85em;
color: #6c757d;
margin-top: 5px;
display: block;
}
.input-group .error-message {
color: #dc3545;
font-size: 0.8em;
margin-top: 5px;
display: none; /* Hidden by default */
}
.error-message.visible {
display: block;
}
.button-group {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 25px;
flex-wrap: wrap; /* Allow wrapping on smaller screens */
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
font-weight: bold;
transition: background-color 0.3s ease, transform 0.2s ease;
flex-grow: 1; /* Allow buttons to grow */
min-width: 150px; /* Minimum width for buttons */
}
.btn-primary {
background-color: var(–primary-color);
color: white;
}
.btn-primary:hover {
background-color: #003366;
transform: translateY(-1px);
}
.btn-secondary {
background-color: #6c757d;
color: white;
}
.btn-secondary:hover {
background-color: #5a6268;
transform: translateY(-1px);
}
.btn-copy {
background-color: #17a2b8;
color: white;
}
.btn-copy:hover {
background-color: #138496;
transform: translateY(-1px);
}
#results {
margin-top: 30px;
padding: 20px;
background-color: #e9ecef;
border-radius: 6px;
border: 1px solid #ced4da;
}
#results h3 {
margin-top: 0;
color: var(–text-color);
}
#results .result-item {
margin-bottom: 12px;
font-size: 1.1em;
}
#results .result-item strong {
color: var(–primary-color);
font-size: 1.4em;
display: block; /* Make primary result prominent */
margin-top: 10px;
}
#results .result-item span {
font-size: 0.9em;
color: #6c757d;
display: block;
}
.formula-explanation {
font-size: 0.9em;
color: #6c757d;
margin-top: 15px;
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid var(–border-color);
}
th {
background-color: var(–primary-color);
color: white;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
.table-scroll-wrapper {
overflow-x: auto;
margin-top: 20px;
border: 1px solid var(–border-color);
border-radius: 4px;
box-shadow: 0 1px 5px var(–shadow-color);
}
caption {
font-size: 0.9em;
color: #6c757d;
margin-top: 10px;
text-align: left;
caption-side: top;
}
canvas {
display: block;
max-width: 100%;
height: auto !important; /* Ensure canvas scales properly */
margin: 20px auto;
border: 1px solid var(–border-color);
border-radius: 4px;
}
.article-content {
margin-top: 40px;
background-color: var(–card-background);
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px var(–shadow-color);
}
.article-content p {
margin-bottom: 15px;
}
.article-content ul, .article-content ol {
margin-left: 20px;
margin-bottom: 15px;
}
.article-content li {
margin-bottom: 8px;
}
a {
color: var(–primary-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.faq-item {
margin-bottom: 15px;
border-bottom: 1px dashed var(–border-color);
padding-bottom: 10px;
}
.faq-item:last-child {
border-bottom: none;
}
.faq-item strong {
display: block;
margin-bottom: 5px;
cursor: pointer;
color: var(–primary-color);
}
.faq-item p {
margin-bottom: 0;
font-size: 0.95em;
color: #555;
}
.tooltip {
position: relative;
display: inline-block;
cursor: help;
border-bottom: 1px dotted var(–text-color);
}
.tooltip .tooltiptext {
visibility: hidden;
width: 220px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 10px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -110px;
opacity: 0;
transition: opacity 0.3s;
font-size: 0.8em;
line-height: 1.4;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.container {
margin: 10px;
padding: 15px;
}
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
.btn {
width: 100%; /* Full width buttons on mobile */
min-width: unset;
margin-bottom: 10px; /* Add spacing between stacked buttons */
}
.button-group {
flex-direction: column; /* Stack buttons vertically */
gap: 0;
}
.button-group .btn:last-child {
margin-bottom: 0;
}
#results .result-item strong {
font-size: 1.2em;
}
}
Calcula tu Jornada Laboral
Calcular Tiempo
Resetear
Copiar Resultados
Resultados del Cálculo:
Tiempo Total Trabajado:
–:–
Horas y Minutos
Horas Trabajadas:
—
Horas
Minutos Trabajados:
—
Minutos
Duración Total del Turno (incluye descanso):
–:–
Horas y Minutos
Fórmula: Tiempo Total = (Hora Fin – Hora Inicio) * 60 minutos + (Minuto Fin – Minuto Inicio) minutos. Luego se resta la duración del descanso.
Gráfico de Distribución del Tiempo
Gráfico comparativo del tiempo total del turno y el tiempo neto trabajado.
¿Qué es una Calculadora de Horas y Minutos de Trabajo?
Una calculadora de horas y minutos de trabajo es una herramienta digital diseñada para simplificar el proceso de contabilizar el tiempo exacto que una persona ha dedicado a sus labores durante un período específico. En lugar de realizar cálculos manuales que pueden ser propensos a errores, esta herramienta permite a usuarios ingresar las horas y minutos de inicio y fin de su jornada, así como la duración de sus descansos, para obtener de forma instantánea el tiempo neto de trabajo efectivo y el tiempo total del turno.
Esta calculadora de tiempo laboral es fundamental para diversos escenarios: empleados que desean verificar sus horas pagadas o solicitar horas extras; empleadores que necesitan gestionar nóminas precisas y asegurar el cumplimiento de las normativas laborales; y autónomos o freelancers que deben facturar a sus clientes basándose en el tiempo dedicado a cada proyecto. Facilita la transparencia y la precisión en la gestión del tiempo, un recurso cada vez más valioso en el entorno profesional actual.
Fórmula y Explicación Matemática de la Calculadora de Horas y Minutos de Trabajo
El cálculo fundamental detrás de una calculadora de tiempo de trabajo se basa en la sustracción y conversión de unidades de tiempo. La fórmula general para determinar el tiempo total transcurrido entre un punto de inicio y un punto de fin es la siguiente:
Tiempo Transcurrido (minutos) = (Hora Fin – Hora Inicio) * 60 + (Minuto Fin – Minuto Inicio)
Una vez obtenido el tiempo total transcurrido en minutos, se procede a ajustar por los descansos:
Tiempo Neto Trabajado (minutos) = Tiempo Transcurrido (minutos) – Duración del Descanso (minutos)
Para obtener las horas y minutos finales, el tiempo neto trabajado en minutos se convierte:
Horas Trabajadas = ⌊Tiempo Neto Trabajado (minutos) / 60⌋ (la parte entera de la división)Minutos Trabajados = Tiempo Neto Trabajado (minutos) % 60 (el resto de la división)
El "Tiempo Total del Turno" simplemente representa el tiempo transcurrido sin descontar el descanso: Tiempo Total Turno = Tiempo Transcurrido (minutos) .
Es crucial manejar casos donde la hora de fin es anterior a la hora de inicio (indicando que el turno cruzó la medianoche). En estos escenarios, se suman 24 horas (1440 minutos) a la hora de fin antes de realizar la resta.
Ejemplos Prácticos de Uso
Veamos algunos escenarios reales donde esta herramienta para calcular horas de trabajo resulta indispensable:
Caso 1: Jornada Estándar
Un empleado entra a las 9:00 AM y sale a las 5:30 PM, con un descanso de 60 minutos.
Hora Inicio: 9, Minuto Inicio: 0
Hora Fin: 17, Minuto Fin: 30
Descanso: 60 minutos
Cálculo:
Tiempo Transcurrido = (17 – 9) * 60 + (30 – 0) = 8 * 60 + 30 = 480 + 30 = 510 minutos.
Tiempo Neto Trabajado = 510 – 60 = 450 minutos.
Horas = ⌊450 / 60⌋ = 7 horas.
Minutos = 450 % 60 = 30 minutos.
Resultado: 7 horas y 30 minutos de trabajo neto. Tiempo Total Turno: 8 horas y 30 minutos.
Caso 2: Turno Nocturno que Cruza Medianoche
Un trabajador comienza a las 10:00 PM (22:00) y termina a las 6:00 AM del día siguiente, con un descanso de 30 minutos.
Hora Inicio: 22, Minuto Inicio: 0
Hora Fin: 6, Minuto Fin: 0
Descanso: 30 minutos
Ajuste por cruzar medianoche:
Tiempo Transcurrido = ((6 + 24) – 22) * 60 + (0 – 0) = (30 – 22) * 60 = 8 * 60 = 480 minutos.
Tiempo Neto Trabajado = 480 – 30 = 450 minutos.
Horas = ⌊450 / 60⌋ = 7 horas.
Minutos = 450 % 60 = 30 minutos.
Resultado: 7 horas y 30 minutos de trabajo neto. Tiempo Total Turno: 8 horas.
Caso 3: Jornada Corta con Múltiples Pausas Cortas
Un trabajador freelance inicia a las 11:15 AM y termina a las 3:45 PM. Realizó dos pausas de 10 minutos cada una, sumando un total de 20 minutos de descanso.
Hora Inicio: 11, Minuto Inicio: 15
Hora Fin: 15, Minuto Fin: 45
Descanso: 20 minutos
Cálculo:
Tiempo Transcurrido = (15 – 11) * 60 + (45 – 15) = 4 * 60 + 30 = 240 + 30 = 270 minutos.
Tiempo Neto Trabajado = 270 – 20 = 250 minutos.
Horas = ⌊250 / 60⌋ = 4 horas.
Minutos = 250 % 60 = 10 minutos.
Resultado: 4 horas y 10 minutos de trabajo neto. Tiempo Total Turno: 4 horas y 30 minutos.
¿Cómo Usar Esta Calculadora de Horas y Minutos de Trabajo?
Nuestra calculadora de jornada laboral ha sido diseñada para ser intuitiva y fácil de usar:
Ingrese Hora de Inicio: Escriba la hora en formato 24h (ej. 8 para las 8 AM, 14 para las 2 PM).Ingrese Minuto de Inicio: Añada los minutos correspondientes (ej. 0, 15, 30, 45).Ingrese Hora de Fin: Introduzca la hora de finalización de su jornada en formato 24h. Si el turno cruza la medianoche, use la hora del día siguiente (ej. 2 para las 2 AM).Ingrese Minuto de Fin: Añada los minutos finales.Ingrese Duración del Descanso: Especifique el tiempo total de sus descansos en minutos (ej. 60 para una hora). Si no tuvo descansos, ingrese 0.Haga Clic en "Calcular Tiempo": La calculadora mostrará instantáneamente el tiempo total trabajado neto, las horas y minutos desglosados, y la duración total del turno incluyendo descansos.Utilice "Resetear": Si necesita realizar un nuevo cálculo, haga clic en este botón para volver a los valores predeterminados.Utilice "Copiar Resultados": Si desea guardar o compartir los resultados, este botón copiará la información principal y los valores intermedios al portapapeles.
Factores Clave que Afectan los Resultados
Si bien la calculadora de tiempo trabajado es precisa, hay factores externos que influyen en la percepción y registro del tiempo laboral:
Precisión en la Entrada de Datos: Errores al ingresar horas o minutos pueden llevar a resultados incorrectos. Es vital ser meticuloso.Definición de "Descanso": Las políticas laborales varían sobre qué se considera tiempo de descanso pagado o no pagado. Asegúrese de seguir las directrices de su empresa o contrato.Horarios Irregulares: Turnos que incluyen trabajo nocturno, fines de semana o días festivos pueden tener implicaciones salariales distintas (horas extras, recargos) que esta calculadora básica no cubre, pero sí el tiempo total.Tiempo de Desplazamiento: Generalmente, el tiempo de viaje hacia y desde el lugar de trabajo no se considera tiempo laboral y no se incluye en estos cálculos.Acuerdos Contractuales: Las leyes laborales y los contratos individuales pueden establecer jornadas máximas, tiempos mínimos de descanso, o reglas específicas para el cálculo de horas extras que prevalecen sobre cualquier cálculo simple.
Preguntas Frecuentes (FAQ)
¿Es esta calculadora útil para calcular horas extras?
Sí, al calcular el tiempo total trabajado, puedes compararlo con tu jornada laboral estándar para determinar las horas extras acumuladas.
¿Qué pasa si mi turno termina después de la medianoche?
La calculadora está diseñada para manejar esto. Simplemente introduce la hora y minuto de fin como si fuera del día siguiente (ej. si terminas a las 2 AM, introduce 2 para la hora). La lógica interna ajusta el cálculo correctamente.
¿Debo incluir los descansos cortos (ej. 5 minutos)?
Se recomienda sumar la duración total de todos tus descansos efectivos durante la jornada y registrar ese total en el campo de 'Duración del Descanso'. Si son pausas muy breves e integradas (ej. levantarse un momento), usualmente no se descuentan a menos que la política de la empresa lo especifique.
¿Puedo usar esta herramienta para llevar un registro de mi tiempo en proyectos?
Absolutamente. Si trabajas por proyecto o necesitas facturar por horas, puedes usar la calculadora para cada bloque de tiempo dedicado, asegurando una facturación precisa.
¿La calculadora considera festivos o domingos?
Esta calculadora se enfoca en la duración del tiempo. No tiene en cuenta días festivos o regulaciones específicas de pago por domingos o festivos. Para eso, necesitarías consultar las normativas laborales aplicables.
Herramientas Relacionadas y Recursos Internos
function validateInput(id, min, max, errorId, errorMessage) {
var input = document.getElementById(id);
var errorElement = document.getElementById(errorId);
var value = parseInt(input.value);
errorElement.classList.remove('visible');
errorElement.textContent = ";
input.style.borderColor = 'var(–border-color)';
if (isNaN(value) || value max) {
if (input.value === "") {
// Allow empty to be handled by calculate function initial check if needed, but don't show error yet if field is empty on load
} else {
errorElement.textContent = errorMessage;
errorElement.classList.add('visible');
input.style.borderColor = '#dc3545';
return false;
}
}
return true;
}
function calculateWorkTime() {
var startHourInput = document.getElementById('startHour');
var startMinuteInput = document.getElementById('startMinute');
var endHourInput = document.getElementById('endHour');
var endMinuteInput = document.getElementById('endMinute');
var breakDurationInput = document.getElementById('breakDurationMinutes');
var startHourError = document.getElementById('startHourError');
var startMinuteError = document.getElementById('startMinuteError');
var endHourError = document.getElementById('endHourError');
var endMinuteError = document.getElementById('endMinuteError');
var breakDurationMinutesError = document.getElementById('breakDurationMinutesError');
var isValid = true;
// Validate inputs
if (!validateInput('startHour', 0, 23, 'startHourError', 'Introduce una hora válida (0-23).')) isValid = false;
if (!validateInput('startMinute', 0, 59, 'startMinuteError', 'Introduce minutos válidos (0-59).')) isValid = false;
if (!validateInput('endHour', 0, 23, 'endHourError', 'Introduce una hora válida (0-23).')) isValid = false;
if (!validateInput('endMinute', 0, 59, 'endMinuteError', 'Introduce minutos válidos (0-59).')) isValid = false;
if (!validateInput('breakDurationMinutes', 0, Infinity, 'breakDurationMinutesError', 'Introduce una duración válida (0 o más).')) isValid = false;
// Check for empty required fields after specific validation
if (startHourInput.value === "" || startMinuteInput.value === "" || endHourInput.value === "" || endMinuteInput.value === "") {
if(startHourInput.value === "") { startHourError.textContent = 'Campo requerido.'; startHourError.classList.add('visible'); startHourInput.style.borderColor = '#dc3545'; isValid = false; }
if(startMinuteInput.value === "") { startMinuteError.textContent = 'Campo requerido.'; startMinuteError.classList.add('visible'); startMinuteInput.style.borderColor = '#dc3545'; isValid = false; }
if(endHourInput.value === "") { endHourError.textContent = 'Campo requerido.'; endHourError.classList.add('visible'); endHourInput.style.borderColor = '#dc3545'; isValid = false; }
if(endMinuteInput.value === "") { endMinuteError.textContent = 'Campo requerido.'; endMinuteError.classList.add('visible'); endMinuteInput.style.borderColor = '#dc3545'; isValid = false; }
if(breakDurationInput.value === "") { // Default to 0 if empty, it's handled by validateInput. This is for semantic completeness.
breakDurationInput.value = "0";
document.getElementById('breakDurationMinutesError').classList.remove('visible');
breakDurationInput.style.borderColor = 'var(–border-color)';
}
}
if (!isValid) {
return;
}
var startHour = parseInt(startHourInput.value);
var startMinute = parseInt(startMinuteInput.value);
var endHour = parseInt(endHourInput.value);
var endMinute = parseInt(endMinuteInput.value);
var breakDurationMinutes = parseInt(breakDurationInput.value);
var startTotalMinutes = startHour * 60 + startMinute;
var endTotalMinutes = endHour * 60 + endMinute;
var totalShiftMinutes;
if (endTotalMinutes < startTotalMinutes) {
// Handle crossing midnight
totalShiftMinutes = (24 * 60 – startTotalMinutes) + endTotalMinutes;
} else {
totalShiftMinutes = endTotalMinutes – startTotalMinutes;
}
var netWorkMinutes = totalShiftMinutes – breakDurationMinutes;
// Ensure netWorkMinutes is not negative
if (netWorkMinutes < 0) {
netWorkMinutes = 0; // Or handle as an error, depending on desired logic
// For this case, let's assume it means 0 effective work if break exceeds shift time
}
var totalShiftHours = Math.floor(totalShiftMinutes / 60);
var totalShiftRemainingMinutes = totalShiftMinutes % 60;
var netHours = Math.floor(netWorkMinutes / 60);
var netMinutes = netWorkMinutes % 60;
document.getElementById('totalWorkTime').textContent = netHours + ':' + (netMinutes < 10 ? '0' : '') + netMinutes;
document.getElementById('hoursWorked').textContent = netHours;
document.getElementById('minutesWorked').textContent = netMinutes;
document.getElementById('totalShiftTime').textContent = totalShiftHours + ':' + (totalShiftRemainingMinutes < 10 ? '0' : '') + totalShiftRemainingMinutes;
// Update table
document.getElementById('tableStartHour').textContent = startHour;
document.getElementById('tableStartMinute').textContent = startMinute < 10 ? '0' + startMinute : startMinute;
document.getElementById('tableEndHour').textContent = endHour;
document.getElementById('tableEndMinute').textContent = endMinute < 10 ? '0' + endMinute : endMinute;
document.getElementById('tableBreakDuration').textContent = breakDurationMinutes;
document.getElementById('tableNetWorkTime').textContent = netHours + ':' + (netMinutes < 10 ? '0' : '') + netMinutes;
document.getElementById('tableTotalShiftTime').textContent = totalShiftHours + ':' + (totalShiftRemainingMinutes < 10 ? '0' : '') + totalShiftRemainingMinutes;
// Update chart
updateChart(totalShiftHours * 60 + totalShiftRemainingMinutes, netWorkMinutes);
}
function resetCalculator() {
document.getElementById('startHour').value = '';
document.getElementById('startMinute').value = '';
document.getElementById('endHour').value = '';
document.getElementById('endMinute').value = '';
document.getElementById('breakDurationMinutes').value = '0';
document.getElementById('totalWorkTime').textContent = '–:–';
document.getElementById('hoursWorked').textContent = '–';
document.getElementById('minutesWorked').textContent = '–';
document.getElementById('totalShiftTime').textContent = '–:–';
// Reset table
document.getElementById('tableStartHour').textContent = '–';
document.getElementById('tableStartMinute').textContent = '–';
document.getElementById('tableEndHour').textContent = '–';
document.getElementById('tableEndMinute').textContent = '–';
document.getElementById('tableBreakDuration').textContent = '–';
document.getElementById('tableNetWorkTime').textContent = '–:–';
document.getElementById('tableTotalShiftTime').textContent = '–:–';
// Reset error messages
var errorElements = document.querySelectorAll('.error-message');
for (var i = 0; i < errorElements.length; i++) {
errorElements[i].classList.remove('visible');
errorElements[i].textContent = '';
}
var inputElements = document.querySelectorAll('.input-group input[type="number"], .input-group select');
for (var i = 0; i < inputElements.length; i++) {
inputElements[i].style.borderColor = 'var(–border-color)';
}
// Reset chart
if (window.myWorkTimeChart instanceof Chart) {
window.myWorkTimeChart.destroy();
}
var canvas = document.getElementById('workTimeChart');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = "16px Arial";
ctx.fillStyle = "#6c757d";
ctx.textAlign = "center";
ctx.fillText("Introduce datos y presiona 'Calcular' para ver el gráfico.", canvas.width/2, canvas.height/2);
}
function copyResults() {
var totalWorkTime = document.getElementById('totalWorkTime').textContent;
var hoursWorked = document.getElementById('hoursWorked').textContent;
var minutesWorked = document.getElementById('minutesWorked').textContent;
var totalShiftTime = document.getElementById('totalShiftTime').textContent;
var startHour = document.getElementById('tableStartHour').textContent;
var startMinute = document.getElementById('tableStartMinute').textContent;
var endHour = document.getElementById('tableEndHour').textContent;
var endMinute = document.getElementById('tableEndMinute').textContent;
var breakDuration = document.getElementById('tableBreakDuration').textContent;
var resultText = "— Resultados de Tiempo Laboral —\n\n";
resultText += "Tiempo Total Trabajado Neto: " + totalWorkTime + "\n";
resultText += "Desglose: " + hoursWorked + " horas y " + minutesWorked + " minutos\n";
resultText += "Duración Total del Turno (incluye descanso): " + totalShiftTime + "\n\n";
resultText += "— Detalles de Entrada —\n";
resultText += "Hora de Inicio: " + startHour + ":" + startMinute + "\n";
resultText += "Hora de Fin: " + endHour + ":" + endMinute + "\n";
resultText += "Duración del Descanso: " + breakDuration + " minutos\n";
try {
navigator.clipboard.writeText(resultText).then(function() {
alert('Resultados copiados al portapapeles.');
});
} catch (err) {
console.error('Error al copiar al portapapeles: ', err);
// Fallback for older browsers or environments where clipboard API is not available
var textArea = document.createElement("textarea");
textArea.value = resultText;
textArea.style.position = "fixed";
textArea.style.left = "-9999px";
textArea.style.top = "-9999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand('copy');
alert('Resultados copiados al portapapeles.');
} catch (execErr) {
console.error('Error al copiar con execCommand: ', execErr);
alert('No se pudieron copiar los resultados automáticamente. Por favor, cópialos manualmente.');
}
document.body.removeChild(textArea);
}
}
var workTimeChart; // Declare chart variable globally
function updateChart(totalShiftMinutes, netWorkMinutes) {
var canvas = document.getElementById('workTimeChart');
var ctx = canvas.getContext('2d');
// Destroy previous chart instance if it exists
if (window.myWorkTimeChart instanceof Chart) {
window.myWorkTimeChart.destroy();
}
var data = {
labels: ['Tiempo Total del Turno', 'Tiempo Neto Trabajado'],
datasets: [{
label: 'Duración (minutos)',
data: [totalShiftMinutes, netWorkMinutes],
backgroundColor: [
'rgba(0, 74, 153, 0.6)', // Primary Color – Total Shift
'rgba(26, 177, 125, 0.6)' // A distinct, professional color – Net Work
],
borderColor: [
'rgba(0, 74, 153, 1)',
'rgba(26, 177, 125, 1)'
],
borderWidth: 1
}]
};
var options = {
responsive: true,
maintainAspectRatio: true, // Allow aspect ratio to be maintained
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Minutos'
}
}
},
plugins: {
legend: {
display: true,
position: 'top',
},
title: {
display: false, // Title is in the section heading
}
},
// Adjust chart size behavior for responsiveness
layout: {
padding: {
left: 10,
right: 10,
top: 0,
bottom: 10
}
}
};
// Dynamically set canvas dimensions based on parent container for better scaling
var chartContainer = canvas.parentElement;
if(chartContainer) {
canvas.width = chartContainer.clientWidth;
// Maintain a reasonable aspect ratio, e.g., 16:9 or slightly less for charts
var aspectRatio = 16 / 9;
canvas.height = chartContainer.clientWidth / aspectRatio;
// Adjust if height is too small
if (canvas.height < 200) canvas.height = 200;
}
try {
// Use Chart.js if available, but avoid external libs per instructions.
// This means we need a native JS implementation or SVG.
// For simplicity and to meet the "pure SVG or canvas" requirement,
// let's simulate a simple bar chart using CanvasRenderingContext2D API directly.
// If a Chart.js library were allowed, this part would be:
// window.myWorkTimeChart = new Chart(ctx, {
// type: 'bar',
// data: data,
// options: options
// });
// Native Canvas Drawing (Simplified Bar Chart)
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear previous drawing
var barWidth = (canvas.width * 0.8) / data.labels.length; // 80% width for bars, divided by number of bars
var totalChartHeight = canvas.height * 0.8; // 80% of canvas height for bars
var startY = canvas.height * 0.1; // Start bars 10% from top
var padding = canvas.width * 0.1; // Padding on sides
var maxValue = Math.max(totalShiftMinutes, netWorkMinutes);
if (maxValue === 0) maxValue = 1; // Avoid division by zero
// Draw bars
data.data.datasets[0].data.forEach(function(value, index) {
var barHeight = (value / maxValue) * totalChartHeight;
var x = padding + index * (barWidth + (canvas.width * 0.8 – data.labels.length * barWidth) / data.labels.length) ; // Distribute bars evenly
if (index === 0) { // First bar (Total Shift)
x = padding;
} else { // Second bar (Net Work)
x = padding + barWidth + (canvas.width * 0.8 – data.labels.length * barWidth) / (data.labels.length -1) ; // Space between bars
}
var barX = padding + index * (barWidth + (canvas.width * 0.8) / data.labels.length / 2); // Simple spacing
var actualBarWidth = barWidth * 0.8; // Make bars slightly thinner than calculated space
var barStartX = x + (barWidth – actualBarWidth) / 2; // Center the bar within its allocated space
ctx.fillStyle = data.datasets[0].backgroundColor[index];
ctx.fillRect(barStartX, canvas.height – barHeight – (canvas.height * 0.1) , actualBarWidth, barHeight);
// Draw labels below bars
ctx.fillStyle = '#333';
ctx.font = '14px Arial';
ctx.textAlign = 'center';
ctx.fillText(data.labels[index], barStartX + actualBarWidth / 2, canvas.height – (canvas.height * 0.1) + 20);
// Draw values above bars
ctx.fillStyle = data.datasets[0].borderColor[index];
ctx.font = 'bold 14px Arial';
ctx.fillText(value + ' min', barStartX + actualBarWidth / 2, canvas.height – barHeight – (canvas.height * 0.1) – 10);
});
// Draw Y-axis line and labels (simplified)
ctx.beginPath();
ctx.moveTo(padding, canvas.height * 0.1);
ctx.lineTo(padding, canvas.height * 0.9);
ctx.strokeStyle = '#ccc';
ctx.stroke();
// Add a simple Y axis label if space permits
ctx.save();
ctx.translate(padding / 2, canvas.height / 2);
ctx.rotate(-Math.PI/2);
ctx.textAlign = 'center';
ctx.font = '12px Arial';
ctx.fillStyle = '#6c757d';
ctx.fillText('Duración (minutos)', 0, 0);
ctx.restore();
} catch (e) {
console.error("Canvas drawing error:", e);
ctx.font = "16px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Error al dibujar el gráfico.", canvas.width/2, canvas.height/2);
}
}
// Initial calculation on page load if fields have defaults, or just setup chart placeholder
document.addEventListener('DOMContentLoaded', function() {
var canvas = document.getElementById('workTimeChart');
var ctx = canvas.getContext('2d');
ctx.font = "16px Arial";
ctx.fillStyle = "#6c757d";
ctx.textAlign = "center";
ctx.fillText("Introduce datos y presiona 'Calcular' para ver el gráfico.", canvas.width/2, canvas.height/2);
});