View Functions

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/danielpose1996-stack/ruedadeproyectos/llms.txt

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

​

Overview

​

Public View Functions

​

renderHomeView()

function renderHomeView()

1. Hero Section: Main heading, description, and CTA buttons
   • View Results button
   • Docente Login button
   • Estudiante Login button
2. News Section: Three news cards showing event updates
3. Results Preview: Link to historical rankings

case 'home':
  appContent.innerHTML = renderHomeView();
  break;

• Responsive grid layout for news cards
• FontAwesome icons for visual enhancement
• Navigation buttons using onclick="navigateTo()"

​

renderGaleriaView()

function renderGaleriaView()

• Page header with title and description
• Sections grouped by academic period:
  • Year 2026 / Semester 1
  • Year 2025 / Semester 2
  • Year 2025 / Semester 1
• Gallery grid with icon placeholders and captions

case 'galeria':
  appContent.innerHTML = renderGaleriaView();
  break;

• .gallery-grid - Grid container for images
• .gallery-item - Individual image container with caption overlay

​

renderResultsView()

function renderResultsView()

• Filter Bar: Dropdowns for year, semester, and category
• Filter Button: Triggers loadHistoricalRankings()
• Results Container: #results-data-container for dynamic content
• Initial State: Loading spinner

case 'results':
  appContent.innerHTML = renderResultsView();
  // loadHistoricalRankings() called automatically via setTimeout
  break;

• Year: 2026, 2025, 2024, 2023
• Semester: 1 (First), 2 (Second)
• Category: Desarrollo, Propuesta, Aplicación

• loadHistoricalRankings() - Fetches and displays ranking data

​

renderLoginView(role)

function renderLoginView(role)

• 'docente' → “Ingreso Docente Evaluador”
• 'estudiante' → “Ingreso Portal Estudiantes”
• 'admin' → “Ingreso de Administrador”

• Email input: #login-email
• Password input: #login-password
• Error display: #login-error
• Submit button calls handleLogin(event, role)

case 'login-docente':
  appContent.innerHTML = renderLoginView('docente');
  break;
  
case 'login-estudiante':
  appContent.innerHTML = renderLoginView('estudiante');
  break;

• handleLogin() - Processes login

​

Dashboard View Functions

​

renderDocenteDashboard()

function renderDocenteDashboard()

1. Sidebar Navigation:
   • Asignados / Pendientes tab
   • Evaluaciones enviadas tab
   • Mi perfil tab
   • Cerrar sesión button
2. Header Section:
   • Personalized greeting with docente name
   • Subtitle
3. Statistics Cards:
   • Total Asignados: #doc-stat-asignados
   • Pendientes: #doc-stat-pendientes
   • Enviados: #doc-stat-enviados
4. Content Tabs:
   • Pendientes Tab (#doc-tab-pendientes):
     • Table of projects awaiting evaluation
     • “Calificar” button to start evaluation
     • Table body: #docente-pendientes-tbody
   • Enviadas Tab (#doc-tab-enviadas):
     • Table of completed evaluations
     • Shows final scores
     • Table body: #docente-enviadas-tbody
   • Perfil Tab (#doc-tab-perfil):
     • Avatar display
     • Full name
     • Role display

case 'dashboard-docente':
  if (currentProfile?.rol === 'docente') {
    appContent.innerHTML = renderDocenteDashboard();
  }
  break;

• loadDocenteProjects() - Fetches project assignments from database
• docenteShowTab(tabName) - Switches between tabs

​

renderEstudianteDashboard()

function renderEstudianteDashboard()

• Logout Link: Top-right corner
• Page Title: “Mis Proyectos Asignados”
• Data Container: #estudiante-data-container
• Initial State: Loading spinner

1. Loading: Spinner with “Buscando tus datos…”
2. No Projects: Empty state message
3. Pending Projects: Shows project info with “not yet evaluated” message
4. Evaluated Projects: Displays:
   • Project name and category
   • Period (semester/year)
   • Average score (calculated from all evaluators)
   • Feedback from each evaluator

case 'dashboard-estudiante':
  if (currentProfile?.rol === 'estudiante') {
    appContent.innerHTML = renderEstudianteDashboard();
  }
  break;

• loadEstudianteDashboard() - Fetches student’s projects and evaluations

​

renderAdminDashboard()

function renderAdminDashboard()

1. Sidebar:
   • Session info display
   • Gestión de Usuarios tab
   • Gestión de Proyectos tab
   • Logout button
2. Users Tab (#admin-tab-users):
   • Search by name: #admin-search-users
   • Filter by role: #admin-filter-role
   • “Nuevo Usuario” button
   • Users table: #admin-users-tbody
   • Edit/Delete buttons per user
3. Projects Tab (#admin-tab-projects):
   • Search by name: #admin-search-projects
   • Filter by category: #admin-filter-cat
   • “Nuevo Proyecto” button
   • Projects table: #admin-projects-tbody
   • Delete button per project

1. Create User Modal (#create-user-modal):
   • Name, email, password, role inputs
   • Form: #create-user-form
   • Submit handler: handleCreateUser(event)
2. Edit User Modal (#edit-user-modal):
   • Update name, email, password, role
   • Form: #edit-user-form
   • Submit handler: handleEditUser(event)
3. Delete User Confirm Modal (#delete-user-confirm-modal):
   • Confirmation dialog
   • Confirm button: confirmDeleteUser()
4. Create Project Modal (#create-project-modal):
   • Project details form
   • Assign up to 3 evaluators
   • Assign 1 student (optional)
   • Submit handler: handleCreateProject(event)

case 'dashboard-admin':
  if (currentProfile?.rol === 'admin') {
    appContent.innerHTML = renderAdminDashboard();
    loadAdminUsers(); // Initial data load
  }
  break;

• loadAdminUsers() - Fetches all users
• loadAdminProjects() - Fetches all projects
• adminShowTab(tab) - Switches between Users/Projects tabs
• filterAdminUsers() - Client-side user filtering
• filterAdminProjects() - Client-side project filtering
• showCreateUserModal() - Opens user creation modal
• showCreateProjectModal() - Opens project creation modal

​

renderEvaluacionView()

function renderEvaluacionView()

1. Back Button: Returns to docente dashboard
2. Evaluation Header (.eval-header):
   • Project name and details
   • Category badge
   • Student names
   • Evaluator name
   • Academic period
   • Timer Box: #eval-timer (15:00 countdown)
3. Rubric Table (.rubric-table):
   • 9 evaluation criteria rows
   • 4 performance level columns (1.0-2.9, 3.0-3.9, 4.0-4.4, 4.5-5.0)
   • Score input column (1-5 range, 0.1 step)
   • Each input has class .rubric-input

1. Planteamiento del problema
2. Justificación
3. Objetivo general
4. Objetivos específicos
5. Estado del arte / Antecedentes
6. Metodología de desarrollo propuesta
7. Metodología de investigación propuesta
8. Viabilidad del proyecto
9. Claridad de la presentación
10. Evaluation Footer (.eval-footer):
    • Observations: Textarea for feedback
    • Final Score Box:
      • Auto-calculated average: #final-score
      • “Enviar calificación” button → showConfirmModal()

case 'evaluacion':
  if (currentProfile?.rol === 'docente') {
    appContent.innerHTML = renderEvaluacionView();
    if (data && data.projectId) {
      initEvaluacionLogic(data.projectId);
    }
  }
  break;

• initEvaluacionLogic(projectId) - Initializes timer and score calculation
• updateFinalScore() - Recalculates average on input change
• showConfirmModal() - Shows confirmation before submission
• submitEvaluation() - Saves evaluation to database

​

Key Dashboard Functions

​

loadAdminUsers()

async function loadAdminUsers()

• Queries perfiles table ordered by created_at descending
• Caches results in adminUsersCache
• Calls renderAdminUsersTable(data) to display
• Shows error message on failure

​

loadDocenteProjects()

async function loadDocenteProjects()

• Queries proyecto_evaluadores table with project details
• Filters by evaluador_id matching currentProfile.id
• Separates into pending and submitted evaluations
• Updates statistics counters
• Populates both tables:
  • #docente-pendientes-tbody
  • #docente-enviadas-tbody

• Pending: No evaluation record exists for current docente
• Submitted: Evaluation record found with final score

​

loadEstudianteDashboard()

async function loadEstudianteDashboard()

• Queries proyecto_estudiantes with project and evaluation details
• Filters by estudiante_id matching currentProfile.id
• For each project:
  • If not evaluated: Shows “pending evaluation” message
  • If evaluated: Displays average score and all evaluator feedback
• Calculates average from multiple evaluators
• Shows detailed observations from each evaluator

​

HTML Structure Patterns

function renderSomeView() {
  return `
    <div class="container">
      <h1>Page Title</h1>
      <!-- Page content -->
    </div>
  `;
}

​

Common Patterns

<div class="card" style="padding: 2rem;">
  <!-- Card content -->
</div>

<span class="badge badge-info">Desarrollo</span>
<span class="badge badge-success">Evaluado</span>
<span class="badge badge-danger">Admin</span>

<div class="table-container">
  <table class="data-table">
    <thead><!-- Headers --></thead>
    <tbody id="dynamic-tbody"><!-- Rows --></tbody>
  </table>
</div>

<form onsubmit="handleSubmit(event)">
  <input type="text" id="input-id" required>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

​

CSS Variable Usage

color: var(--text-primary);
background: var(--bg-surface);
border: 1px solid var(--border-color);

• --primary-color - Brand primary color
• --text-primary - Main text color
• --text-secondary - Secondary text color
• --bg-base - Page background
• --bg-surface - Card/panel background
• --border-color - Border color
• --status-danger - Error/delete color
• --status-success - Success color

​

Security Note

const safeName = escapeHTML(user.nombre);
const safeProjectName = escapeHTML(project.nombre);