Scribd
Upload
10 views16 pages

Registro de Asistencia Técnica

Uploaded by

Diego Tello Mendoza
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views16 pages

Registro de Asistencia Técnica

Uploaded by

Diego Tello Mendoza
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registro de Asistencia del Personal Técnico</title>
<script src="[Link]
<link href="[Link]
family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f3f4f6;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 1rem;
}
.container {
max-width: 500px;
width: 100%;
background-color: #ffffff;
padding: 2.5rem;
border-radius: 1rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0,
0, 0, 0.05);
text-align: center;
}
.btn {
display: block;
width: 100%;
padding: 1rem;
font-size: 1.25rem;
font-weight: 600;
color: white;
border-radius: 0.75rem;
transition: background-color 0.2s, transform 0.2s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 1.5rem;
}
.btn-green {
background-color: #10b981;
}
.btn-green:hover {
background-color: #059669;
transform: translateY(-2px);
}
.btn-blue {
background-color: #2563eb;
}
.btn-blue:hover {
background-color: #1d4ed8;
transform: translateY(-2px);
}
.btn-purple {
background-color: #8b5cf6;
}
.btn-purple:hover {
background-color: #7c3aed;
transform: translateY(-2px);
}
.btn-red {
background-color: #ef4444;
}
.btn-red:hover {
background-color: #dc2626;
transform: translateY(-2px);
}
h1 {
font-size: 2.5rem;
font-weight: 700;
color: #1f2937;
margin-bottom: 4rem;
text-transform: uppercase;
}
#message-box {
margin-top: 1rem;
padding: 1rem;
border-radius: 0.5rem;
text-align: center;
display: none;
font-weight: 600;
}
.message-success {
background-color: #d1fae5;
color: #065f46;
}
.message-error {
background-color: #fee2e2;
color: #991b1b;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.modal-content {
background-color: #ffffff;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
width: 90%;
max-width: 600px;
position: relative;
}
.modal-close-btn {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 1.5rem;
cursor: pointer;
color: #9ca3af;
}
.personnel-list-item {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f9fafb;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
margin-bottom: 0.5rem;
}
.personnel-list-item span {
font-weight: 500;
}
.action-btns button {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 0.375rem;
margin-left: 0.5rem;
}
.edit-btn {
background-color: #f97316;
color: white;
}
.delete-btn {
background-color: #ef4444;
color: white;
}
.opciones-personal-btn {
margin-bottom: 1rem;
}
.[Link] {
background-color: #e5e7eb;
color: #9ca3af;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
#report-list {
max-height: 400px;
overflow-y: auto;
}
.person-report-container {
border: 1px solid #e5e7eb;
border-radius: 0.75rem;
margin-bottom: 1rem;
padding: 1rem;
}
.person-report-header {
font-weight: 700;
font-size: 1.125rem;
margin-bottom: 0.75rem;
text-align: left;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e5e7eb;
}
.report-item {
padding: 0.5rem 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.report-item .action-info {
font-size: 0.875rem;
color: #4b5563;
}
.report-dot {
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 0.5rem;
}
.dot-green { background-color: #10b981; }
.dot-yellow { background-color: #f59e0b; }
.dot-red { background-color: #ef4444; }
.watermark {
position: fixed;
bottom: 1rem;
right: 1rem;
font-size: 0.75rem;
color: #6b7280; /* Color más oscuro para mejor visibilidad */
user-select: none;
z-index: 20;
}
</style>
</head>
<body>
<div class="container" id="main-view">
<h1 class="text-3xl font-bold text-gray-800 mb-8">Registro de Asistencia
del Personal Técnico</h1>
<div id="home-buttons" class="space-y-4">
<button id="personal-operativo-btn" class="btn btn-blue text-
white">Ingresar como técnico</button>
<button id="administrador-btn" class="btn bg-gray-600 text-white
hover:bg-gray-700">Ingresar como administrador</button>
</div>
<div id="message-box"></div>
</div>
<div class="watermark">Elaborado por "DIEGO TELLO"</div>

<!-- Modales -->


<div id="personal-operativo-modal" class="modal-overlay hidden">
<div class="modal-content">
<span id="modal-close-po" class="modal-close-btn">&times;</span>
<h2 class="text-2xl font-semibold mb-4 text-gray-800">Acceso del
Personal</h2>
<p class="text-gray-500 mb-6">Selecciona tu nombre e ingresa tu
contraseña para registrar tu asistencia.</p>
<form id="personal-operativo-form" class="space-y-4">
<div>
<label for="tecnico-select" class="block text-left mb-1 font-
medium text-gray-700">Nombre:</label>
<select id="tecnico-select" class="w-full p-2.5 border border-
gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<!-- Options generated dynamically -->
</select>
</div>
<div>
<label for="password-input-po" class="block text-left mb-1
font-medium text-gray-700">Contraseña:</label>
<input type="password" id="password-input-po" class="w-full p-
2.5 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-
blue-500" required>
</div>
<button type="submit" class="w-full bg-blue-600 text-white font-
bold py-2.5 rounded-md hover:bg-blue-700 transition duration-300">Ingresar</button>
</form>
</div>
</div>

<div id="administrador-modal" class="modal-overlay hidden">


<div class="modal-content">
<span id="modal-close-admin" class="modal-close-btn">&times;</span>
<h2 class="text-2xl font-semibold mb-4 text-gray-800">Acceso
Administrador</h2>
<form id="administrador-form" class="space-y-4">
<div>
<label for="password-input-admin" class="block text-left mb-1
font-medium text-gray-700">Contraseña:</label>
<input type="password" id="password-input-admin" class="w-full
p-2.5 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-
blue-500" required>
</div>
<button type="submit" class="w-full bg-blue-600 text-white font-
bold py-2.5 rounded-md hover:bg-blue-700 transition duration-300">Ingresar</button>
</form>
</div>
</div>

<div id="admin-menu-modal" class="modal-overlay hidden">


<div class="modal-content">
<span id="modal-close-menu" class="modal-close-btn">&times;</span>
<h2 class="text-2xl font-semibold mb-6 text-gray-800">Menú de
Administrador</h2>
<div class="space-y-4">
<button id="add-personal-btn" class="btn btn-purple">Agregar
Personal</button>
<button id="revisar-reporte-desde-admin-btn" class="btn btn-
blue">Revisar Reporte</button>
</div>
</div>
</div>

<div id="add-personal-modal" class="modal-overlay hidden">


<div class="modal-content max-w-lg">
<span id="modal-close-add-personal"
class="modal-close-btn">&times;</span>
<h2 class="text-2xl font-semibold mb-4 text-gray-800">Agregar
Personal</h2>
<form id="add-personal-form" class="space-y-4 mb-8">
<div>
<label for="person-name" class="block text-left mb-1 font-
medium text-gray-700">Nombre:</label>
<input type="text" id="person-name" class="w-full p-2.5 border
border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
required>
</div>
<div>
<label for="person-password" class="block text-left mb-1 font-
medium text-gray-700">Contraseña:</label>
<input type="password" id="person-password" class="w-full p-2.5
border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-
500" required>
</div>
<button type="submit" id="save-person-btn" class="w-full bg-green-
600 text-white font-bold py-2.5 rounded-md hover:bg-green-700 transition duration-
300">Guardar Personal</button>
</form>
<h3 class="text-xl font-semibold mb-2 text-gray-800 text-left">Lista de
Personal</h3>
<div id="personnel-list" class="space-y-2 max-h-60 overflow-y-auto">
<!-- La lista de personal se renderizará aquí -->
</div>
</div>
</div>

<div id="operativo-menu-modal" class="modal-overlay hidden">


<div class="modal-content">
<span id="modal-close-operativo-menu" class="modal-close-
btn">&times;</span>
<h2 class="text-2xl font-semibold mb-6 text-gray-800">Opciones de
Turno</h2>
<div class="space-y-4">
<button id="inicio-turno-btn" class="btn btn-green opciones-
personal-btn">Inicio de Turno</button>
<button id="inicio-descanso-btn" class="btn btn-blue opciones-
personal-btn" disabled>Inicio de Descanso</button>
<button id="fin-descanso-btn" class="btn btn-purple opciones-
personal-btn" disabled>Fin de Descanso</button>
<button id="fin-turno-btn" class="btn btn-red opciones-personal-
btn" disabled>Fin de Turno</button>
</div>
</div>
</div>

<div id="reporte-modal" class="modal-overlay hidden">


<div class="modal-content">
<span id="modal-close-reporte" class="modal-close-btn">&times;</span>
<h2 class="text-2xl font-semibold mb-6 text-gray-800">Reporte de
Registros</h2>
<div class="mb-4">
<label for="report-date" class="block text-left mb-1 font-medium
text-gray-700">Seleccionar fecha:</label>
<input type="date" id="report-date" class="w-full p-2.5 border
border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div id="report-list" class="space-y-4 max-h-96 overflow-y-auto">
<p id="report-loading" class="text-center text-gray-500">Cargando
reporte...</p>
</div>
</div>
</div>

<!-- Nuevo modal para mensajes de éxito -->


<div id="success-modal" class="modal-overlay hidden">
<div class="modal-content">
<p id="success-message" class="text-xl font-semibold text-center text-
green-600"></p>
</div>
</div>

<script type="module">
import { initializeApp } from
"[Link]
import { getAuth, signInAnonymously, signInWithCustomToken,
onAuthStateChanged } from "[Link]
[Link]";
import { getFirestore, doc, addDoc, collection, query, where, getDocs,
onSnapshot, Timestamp } from "[Link]
[Link]";

let db;
let auth;
let currentUserId;
let loggedInUser = '';
let isAuthReady = false;

const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-


id';
const firebaseConfig = typeof __firebase_config !== 'undefined' ?
[Link](__firebase_config) : {};
const initialAuthToken = typeof __initial_auth_token !== 'undefined' ?
__initial_auth_token : null;

const personalOperativoBtn = [Link]('personal-operativo-


btn');
const administradorBtn = [Link]('administrador-btn');

const personalOperativoModal = [Link]('personal-operativo-


modal');
const administradorModal = [Link]('administrador-modal');
const adminMenuModal = [Link]('admin-menu-modal');
const addPersonalModal = [Link]('add-personal-modal');
const operativoMenuModal = [Link]('operativo-menu-modal');
const reporteModal = [Link]('reporte-modal');
const successModal = [Link]('success-modal');

const modalClosePO = [Link]('modal-close-po');


const modalCloseAdmin = [Link]('modal-close-admin');
const modalCloseMenu = [Link]('modal-close-menu');
const modalCloseAddPersonal = [Link]('modal-close-add-
personal');
const modalCloseOperativoMenu = [Link]('modal-close-
operativo-menu');
const modalCloseReporte = [Link]('modal-close-reporte');

const personalOperativoForm = [Link]('personal-operativo-


form');
const administradorForm = [Link]('administrador-form');
const addPersonalForm = [Link]('add-personal-form');

const addPersonalBtn = [Link]('add-personal-btn');


const revisarReporteDesdeAdminBtn = [Link]('revisar-
reporte-desde-admin-btn');

const inicioTurnoBtn = [Link]('inicio-turno-btn');


const inicioDescansoBtn = [Link]('inicio-descanso-btn');
const finDescansoBtn = [Link]('fin-descanso-btn');
const finTurnoBtn = [Link]('fin-turno-btn');

const messageBox = [Link]('message-box');


const personnelListDiv = [Link]('personnel-list');
const tecnicoSelect = [Link]('tecnico-select');
const reportListDiv = [Link]('report-list');
const successMessageEl = [Link]('success-message');
const reportDateInput = [Link]('report-date');

let personnelToEdit = null;

const initialPersonnelList = [
{ name: "JOSELITO", password: "123" },
{ name: "DIEGO", password: "123" },
{ name: "JUAN", password: "123" },
{ name: "JESUS", password: "123" },
{ name: "CARLOS", password: "123" },
{ name: "PEDRO", password: "123" },
{ name: "SEBASTIAN", password: "123" },
{ name: "MAURICIO", password: "123" }
];

function showMessage(message, type = 'success') {


[Link] = message;
[Link] = 'block';
[Link] = 'mt-4 px-4 py-2 rounded-md';
[Link]('message-' + type);
}

function showSuccessModal(message) {
[Link] = message;
[Link]('hidden');
setTimeout(() => {
[Link]('hidden');
}, 3000);
}

function loadPersonnel() {
let personnel = [Link]([Link]('personnelList'));
if (!personnel || [Link] === 0) {
personnel = initialPersonnelList;
savePersonnel(personnel);
}
return personnel;
}

function savePersonnel(personnel) {
[Link]('personnelList', [Link](personnel));
}

function renderPersonnel() {
const personnel = loadPersonnel();
[Link] = '';
[Link] = '<option value="" disabled selected>--
Seleccione --</option>';

[Link]((person, index) => {


const listItem = [Link]('div');
[Link] = 'personnel-list-item';
[Link] = `
<span>${[Link]}</span>
<div class="action-btns">
<button class="edit-btn text-white" data-index="$
{index}">Editar</button>
<button class="delete-btn text-white" data-index="$
{index}">Eliminar</button>
</div>
`;
[Link](listItem);

const option = [Link]('option');


[Link] = [Link];
[Link] = [Link];
[Link](option);
});
}

async function updateButtonState() {


const lastAction = await getLastAction(loggedInUser);

// Deshabilitar todos los botones por defecto


[Link]('disabled');
[Link]('disabled');
[Link]('disabled');
[Link]('disabled');
[Link] = true;
[Link] = true;
[Link] = true;
[Link] = true;

if (lastAction) {
switch ([Link]) {
case 'Inicio de Turno':
[Link]('disabled');
[Link] = false;
[Link]('disabled');
[Link] = false;
break;
case 'Inicio de Descanso':
[Link]('disabled');
[Link] = false;
break;
case 'Fin de Descanso':
[Link]('disabled');
[Link] = false;
break;
case 'Fin de Turno':
[Link]('disabled');
[Link] = false;
break;
default:
// En caso de que no haya una acción previa, habilitar solo
el inicio de turno.
[Link]('disabled');
[Link] = false;
break;
}
} else {
// Si no hay ninguna acción previa, solo se puede iniciar el turno.
[Link]('disabled');
[Link] = false;
}
}

async function recordAction(personName, actionType) {


if (!isAuthReady || !currentUserId) {
showMessage('Error: Usuario no autenticado.', 'error');
return false;
}
try {
const reportsCollection = collection(db,
`artifacts/${appId}/public/data/reports`);
await addDoc(reportsCollection, {
personName: personName,
action: actionType,
// Uso de [Link]() para asegurar que la fecha se guarde
en formato universal (UTC).
timestamp: [Link](),
userId: currentUserId
});
return true;
} catch (e) {
[Link]("Error adding document: ", e);
showMessage('Error al registrar la acción. Inténtelo de nuevo.',
'error');
return false;
}
}

async function getLastAction(personName) {


if (!isAuthReady || !currentUserId) return null;
try {
const reportsCollection = collection(db,
`artifacts/${appId}/public/data/reports`);
const q = query(reportsCollection, where("personName", "==",
personName));
const querySnapshot = await getDocs(q);

const actions = [];


[Link]((doc) => {
[Link]([Link]());
});

if ([Link] > 0) {
[Link]((a, b) => [Link]() -
[Link]());
return actions[0];
}
} catch (e) {
[Link]("Error fetching last action: ", e);
}
return null;
}

function formatTimestamp(timestamp) {
const date = [Link]();
return [Link]('es-ES', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
}

async function renderReport(dateString = null) {


[Link] = '<p id="report-loading" class="text-center
text-gray-500">Cargando reporte...</p>';
if (!isAuthReady || !currentUserId) {
[Link] = '<p class="text-center text-red-
500">Error: No se pudo cargar el reporte. Autenticación fallida.</p>';
return;
}

try {
const reportsCollection = collection(db,
`artifacts/${appId}/public/data/reports`);
let q = query(reportsCollection);

if (dateString) {
// FIX: Construir la fecha de manera explícita para evitar
problemas de zona horaria.
const [year, month, day] = [Link]('-').map(Number);
const startOfDayLocal = new Date(year, month - 1, day, 0, 0, 0,
0);
const endOfDayLocal = new Date(year, month - 1, day, 23, 59,
59, 999);

const startTimestamp = [Link](startOfDayLocal);


const endTimestamp = [Link](endOfDayLocal);

q = query(reportsCollection,
where("timestamp", ">=", startTimestamp),
where("timestamp", "<=", endTimestamp)
);
}

const querySnapshot = await getDocs(q);

const reportData = {};


[Link]((doc) => {
const data = [Link]();
const personName = [Link];
if (!reportData[personName]) {
reportData[personName] = [];
}
reportData[personName].push(data);
});
[Link] = '';
const sortedNames = [Link](reportData).sort();

if ([Link] > 0) {
[Link](personName => {
const personReportContainer =
[Link]('div');
[Link] = 'person-report-
container';

const header = [Link]('div');


[Link] = 'person-report-header';
[Link] = personName;
[Link](header);

reportData[personName].sort((a, b) => [Link]()


- [Link]());

reportData[personName].forEach(item => {
const reportItem = [Link]('div');
[Link] = 'report-item';

let dotClass = '';


switch ([Link]) {
case 'Inicio de Turno':
case 'Fin de Descanso':
dotClass = 'dot-green';
break;
case 'Inicio de Descanso':
dotClass = 'dot-yellow';
break;
case 'Fin de Turno':
dotClass = 'dot-red';
break;
default:
dotClass = 'bg-gray-400';
break;
}

[Link] = `
<div class="flex items-center">
<span class="report-dot ${dotClass}"></span>
<div class="action-info">Acción: $
{[Link]}</div>
</div>
<div class="action-info">$
{formatTimestamp([Link])}</div>
`;
[Link](reportItem);
});
[Link](personReportContainer);
});
} else {
[Link] = '<p class="text-center text-gray-
500">No hay registros para mostrar en esta fecha.</p>';
}

} catch (e) {
[Link]("Error fetching report: ", e);
[Link] = '<p class="text-center text-red-
500">Error al cargar el reporte. Inténtelo de nuevo.</p>';
}
}

function hideAllModals() {
const modals = [Link]('.modal-overlay');
[Link](modal => [Link]('hidden'));
}

[Link]('DOMContentLoaded', async () => {


const app = initializeApp(firebaseConfig);
db = getFirestore(app);
auth = getAuth(app);

if (initialAuthToken) {
await signInWithCustomToken(auth, initialAuthToken)
.catch(error => {
[Link]("Error signing in with custom token:",
error);
signInAnonymously(auth);
});
} else {
await signInAnonymously(auth)
.catch(error => [Link]("Error signing in anonymously:",
error));
}

onAuthStateChanged(auth, (user) => {


if (user) {
currentUserId = [Link];
} else {
currentUserId = null;
}
isAuthReady = true;
});

hideAllModals();
});

[Link]('click', () => {
renderPersonnel();
[Link]('hidden');
});

[Link]('click', () => {
[Link]('hidden');
});

[Link]('click', () => {
hideAllModals();
[Link]('hidden');
renderPersonnel();
});

[Link]('click', () => {
hideAllModals();
[Link]('hidden');
// Establece la fecha del reporte a la fecha actual para que se cargue
al abrir
const today = new Date();
const year = [Link]();
const month = ([Link]() + 1).toString().padStart(2, '0');
const day = [Link]().toString().padStart(2, '0');
const todayDateString = `${year}-${month}-${day}`;
[Link] = todayDateString;

renderReport(todayDateString);
});

[Link]('change', (event) => {


renderReport([Link]);
});

[Link]('click', () => {
[Link]('hidden');
[Link]();
});

[Link]('click', () => {
[Link]('hidden');
[Link]();
});

[Link]('click', () => {
[Link]('hidden');
});

[Link]('click', () => {
[Link]('hidden');
[Link]();
personnelToEdit = null;
[Link]('save-person-btn').textContent = 'Guardar
Personal';
});

[Link]('click', () => {
[Link]('hidden');
});

[Link]('click', () => {
[Link]('hidden');
});

[Link]('submit', async (event) => {


[Link]();
const selectedName = [Link]('tecnico-select').value;
const password = [Link]('password-input-po').value;
const personnel = loadPersonnel();
const selectedPerson = [Link](p => [Link] === selectedName);

if (selectedPerson && [Link] === password) {


hideAllModals();
[Link]();
loggedInUser = selectedName;
[Link]('hidden');
showMessage(`¡Hola, ${loggedInUser}!`, 'success');
await updateButtonState();
} else {
showMessage('Contraseña incorrecta o técnico no válido.', 'error');
}
});

[Link]('submit', (event) => {


[Link]();
const password = [Link]('password-input-admin').value;
const correctPassword = '123';

if (password === correctPassword) {


hideAllModals();
[Link]();
[Link]('hidden');
} else {
showMessage('Contraseña incorrecta. Inténtelo de nuevo.', 'error');
}
});

[Link]('submit', (event) => {


[Link]();
const nameInput = [Link]('person-name');
const passwordInput = [Link]('person-password');
const newName = [Link];
const newPassword = [Link];
let personnel = loadPersonnel();

if (personnelToEdit !== null) {


personnel[personnelToEdit].name = newName;
personnel[personnelToEdit].password = newPassword;
personnelToEdit = null;
[Link]('save-person-btn').textContent = 'Guardar
Personal';
showMessage('Personal actualizado correctamente.', 'success');
} else {
const newPerson = { name: newName, password: newPassword };
[Link](newPerson);
showMessage('Personal agregado correctamente.', 'success');
}

savePersonnel(personnel);
renderPersonnel();
[Link]();
});

[Link]('click', (event) => {


if ([Link]('delete-btn')) {
const index = [Link];
let personnel = loadPersonnel();
[Link](index, 1);
savePersonnel(personnel);
renderPersonnel();
showMessage('Personal eliminado correctamente.', 'success');
}

if ([Link]('edit-btn')) {
const index = [Link];
let personnel = loadPersonnel();
const personToEdit = personnel[index];

[Link]('person-name').value = [Link];
[Link]('person-password').value =
[Link];

[Link]('save-person-btn').textContent =
'Actualizar Personal';
personnelToEdit = index;
}
});

async function handleActionAndReturn(actionType) {


const success = await recordAction(loggedInUser, actionType);
if (success) {
[Link]('hidden');
showSuccessModal(`Se registró su ${[Link]()}.`);
loggedInUser = '';
}
}

[Link]('click', () =>
handleActionAndReturn('Inicio de Turno'));
[Link]('click', () =>
handleActionAndReturn('Inicio de Descanso'));
[Link]('click', () => handleActionAndReturn('Fin
de Descanso'));
[Link]('click', () => handleActionAndReturn('Fin de
Turno'));
</script>
</body>
</html>

You might also like