Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/rtajio/ESEN/llms.txt

Use this file to discover all available pages before exploring further.

app.js contains all client-side logic for ESEN. Every function is globally scoped and called either from inline onclick attributes in index.html or from other functions within app.js. The file is organized into labeled sections separated by comments. The following reference documents each function’s signature, parameters, behavior, and side effects, grouped by logical concern.
These three functions manage the full login/logout lifecycle. They read from and write to the global currentUser, currentRole, and the DOM.
setLoginRole(r)
function setLoginRole(r)
Called when the user clicks the “Administrador” or “Estudiante” tab on the login screen.
  • Sets currentRole to r ('admin' or 'estudiante').
  • Toggles the .active class on #tab-admin and #tab-est.
  • Pre-fills #l-user and #l-pass with the matching demo credentials (admin01/admin123 or est2021/est123).
// Wired in index.html
<button onclick="setLoginRole('admin')">Administrador</button>
<button onclick="setLoginRole('estudiante')">Estudiante</button>
doLogin()
function doLogin()
Validates credentials and, on success, transitions the UI from the login screen to the application shell.
  • Reads #l-user and #l-pass input values.
  • Looks up a matching entry in USUARIOS where user, pass, and rol all match.
  • If no match: displays #login-error and returns early.
  • If match:
    • Sets currentUser to the matched user object.
    • Hides #login-screen, shows #app.
    • Shows #nav-admin or #nav-est depending on rol.
    • Sets the sidebar display name and username label.
    • Writes today’s date to #topbar-date.
    • Calls showView('dashboard') for admin or showView('mi-historial') for students.
logout()
function logout()
Ends the session and returns to the login screen.
  • Sets #app to display: none.
  • Sets #login-screen to display: flex.
  • Sets currentUser to null.
Logout does not clear form state in the activity modal or search inputs. Refreshing the page is the only way to fully reset all in-memory data.
openModal(mode, id)
function openModal(mode, id)
Opens the activity form modal in either “add” or “edit” mode.
  • Clears all form fields (f-nombre, f-horas, f-res, f-fecha, f-desc, f-part).
  • If mode === 'edit' and id is provided: finds the activity by ID, populates every field, sets editId = id, and changes the modal title to “Modificar actividad”.
  • If mode is anything else: sets the modal title to “Registrar actividad” and leaves editId = null.
  • Adds .open to #modal-act and focuses #f-nombre.
// Edit an existing activity
openModal('edit', 3);

// Open blank form for a new activity
openModal('add');
saveActividad()
function saveActividad()
Reads the modal form, validates required fields, and either creates a new activity or updates an existing one.Required fields (shows toast and returns early if any are empty/zero):
  • f-nombre — activity name
  • f-horas — hours (parsed as integer; must be > 0)
  • f-res — resolution number
  • f-fecha — date
  • If editId is set: finds the activity and applies changes with Object.assign.
  • If editId is null: pushes a new object with id: nextId++ and activo: true.
  • Closes the modal, calls renderActTable(), and shows a success toast.
closeModal(id)
function closeModal(id)
Removes the .open class from the element with the given id.
closeModal('modal-act');
toggleActivo(id)
function toggleActivo(id)
Flips the activo boolean for the activity with the given id, re-renders the table, and shows a toast confirming the new state.
deleteAct(id)
function deleteAct(id)
Removes an activity from the actividades array after the user confirms the browser confirm() dialog. Re-renders the table and shows a toast. This operation cannot be undone.
Each render function reads from the global actividades, estudiantes, and currentUser variables and writes HTML directly to a target element’s innerHTML.
renderDash()Computes four stat values from actividades:
  • Total active activities
  • Unique participants (via Set)
  • Total accumulated hours (active activities × participants per activity)
  • Number of unique resolution numbers
Writes the values to #stat-total, #stat-est, #stat-hrs, and #stat-res. Renders the first six activities into #dash-table.
renderActTable()Reads #filter-cat and #filter-month values and applies them as filters to a copy of actividades. Renders the filtered result into #act-table, including edit/toggle/delete action buttons on each row.
renderEstTable()Reads the #est-search input and filters estudiantes by name or student code (case-insensitive). For each student, calls getEstActs() and getEstHoras() to compute participation counts. Renders into #est-table.
renderReportes()Renders three sections:
  1. A CSS bar chart in #report-cats showing total hours per category, normalized to the maximum.
  2. General summary stats in #report-gen (total activities, active activities, total hours, total participations, average hours per activity, student count).
  3. A detail table in #report-table with all activities.
renderHistorial()Filters actividades to those where participantes includes currentUser.nombre. Writes total activity count and hours to #s-act, #s-hrs, and #s-val. Renders the matching activities as history rows in #hist-list.
renderPub()Filters actividades to activo === true only. Renders the result into #pub-table — a read-only view with no action buttons, shown to student accounts.
catBadge(c)
function catBadge(c)
// Returns: string (HTML)
Returns an HTML <span> with the appropriate badge class from CAT_COLORS. Falls back to badge-gray for unknown categories.
catBadge('Académico');
// → '<span class="badge badge-blue">Académico</span>'
statusBadge(activo)
function statusBadge(activo)
// Returns: string (HTML)
Returns an HTML <span> for active (badge-green, text “Activo”) or inactive (badge-gray, text “Inactivo”) states.
statusBadge(true);
// → '<span class="badge badge-green">Activo</span>'
initials(nombre)
function initials(nombre)
// Returns: string
Splits nombre by spaces, takes the first character of the first two words, and returns them uppercased. Used to generate avatar text in the students table.
initials('Carlos Mamani');  // → 'CM'
initials('Lucía Torres');   // → 'LT'
showToast(msg)
function showToast(msg)
Sets #toast-msg text to msg and adds the .show class to #toast, making it visible. Automatically removes .show after 2800 ms via setTimeout. Calling showToast again before the timer fires clears the previous timer with clearTimeout.
formatDate(d)
function formatDate(d)
// Returns: string
Converts an ISO YYYY-MM-DD date string to DD/MM/YYYY format. Returns '—' if d is falsy.
formatDate('2024-03-15');  // → '15/03/2024'
formatDate('');            // → '—'
exportCSV()
function exportCSV()
Builds a CSV file from actividades with seven columns: Actividad, Categoría, Horas, Participantes, Resolución, Fecha, Estado. Prepends a UTF-8 BOM (\uFEFF) for correct Excel encoding. Creates a Blob, generates an object URL, programmatically clicks a temporary <a> element to trigger the download as reporte-actividades-esen.csv, then revokes the URL.
Two global event listeners are registered at the bottom of app.js after all function definitions.
Modal backdrop click
document.querySelectorAll('.modal-backdrop').forEach(backdrop => {
  backdrop.addEventListener('click', e => {
    if (e.target === backdrop) backdrop.classList.remove('open');
  });
});
Closes a modal when the user clicks the dimmed overlay area behind the modal panel. The e.target === backdrop guard prevents the modal from closing when the user clicks inside the panel itself.
Escape key
document.addEventListener('keydown', e => {
  if (e.key === 'Escape') {
    document.querySelectorAll('.modal-backdrop.open').forEach(m => m.classList.remove('open'));
    if (sidebarOpen) toggleSidebar();
  }
});
Pressing Escape closes all open modals and closes the mobile sidebar if it is open.

Build docs developers (and LLMs) love

Get started for freeTalk to us