christopher.rodriguez
/
DiploMaster
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pruebas y arreglos en general

This commit is contained in:
alexis.palestina 2025-06-19 16:34:13 -06:00
parent 703794f542
commit 64b4a2b075
1 changed files with 52 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
assets/js/main.js
View File

@ -362,10 +362,10 @@ function loadProfessorCourses(container) {
<form id="courseForm">
<label>Nombre del Curso *</label>
<input type="text" name="nombre" required>
<label>Descripción</label>
<textarea name="descripcion" maxlength="250" rows="4" style="width: 100%; padding: 0.75rem; margin: 0.5rem 0 1rem 0; border: 1px solid #e2e8f0; border-radius: 6px; font-family: 'Inter', sans-serif;"></textarea>
<label>Tipo de Curso *</label>
<select id="courseType" name="tipo" required>
<option value="inyeccion">Inyección</option>
@ -377,13 +377,13 @@ function loadProfessorCourses(container) {
<label>Competencias Asociadas *</label>
<input type="text" name="competencias" placeholder="Ej. Análisis de datos, Comunicación efectiva">
</div>
<label>Estado</label>
<select name="estado">
<option value="activo">Activo</option>
<option value="archivado">Archivado</option>
</select>
<div class="form-actions">
<button type="submit" class="btn">
<span id="submitCourseText">Guardar</span>
@ -393,12 +393,24 @@ function loadProfessorCourses(container) {
Cancelar
</button>
</div>
</form>
</div>
<div class="card">
<h2>Lista de Cursos</h2>
<div class="table-container">
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
<h2 style="margin: 0;">Lista de Cursos</h2>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<label for="courseFilter"><strong>Mostrar:</strong></label>
<select id="courseFilter" class="form-control" style="padding: 0.3rem 0.6rem; border-radius: 6px;">
<option value="todos">Todos</option>
<option value="activo">Activos</option>
<option value="completado">Completados</option>
<option value="archivado">Archivados</option>
</select>
</div>
</div>
<div class="table-container" style="margin-top: 1rem;">
<table class="courses-table">
<thead>
<tr>
@ -446,29 +458,56 @@ function loadProfessorCourses(container) {
.join("")}
</tbody>
</table>
<div id="emptyCourseMessage" style="display: none; padding: 1rem; text-align: center; color: #64748b;">
Cuando haya cursos en esta categoría, se mostrarán aquí.
</div>
</div>
</div>`;
// Evaluar si se debe mostrar "Leer más" en cada descripción
// Leer más si descripción es larga
setTimeout(() => {
courses.forEach(course => {
const span = document.getElementById(`desc-${course.id}`);
const leerMas = document.getElementById(`readmore-${course.id}`);
if (span && leerMas && span.scrollWidth > span.clientWidth) {
const safeDesc = (course.descripcion || "")
.replace(/'/g, "\\'")
.replace(/"/g, "&quot;")
.replace(/\n/g, "\\n");
leerMas.innerHTML = `
<a href="#" class="read-more" onclick="showFullDescription('${safeDesc}'); return false;">
Leer más
</a>`;
<a href="#" class="read-more" onclick="showFullDescription('${safeDesc}'); return false;">Leer más</a>`;
}
});
}, 0);
// Filtro con mensaje si no hay visibles
const filtro = document.getElementById("courseFilter");
if (filtro) {
filtro.addEventListener("change", function () {
const estadoSeleccionado = this.value;
const filas = document.querySelectorAll(".courses-table tbody tr");
let visibles = 0;
filas.forEach(fila => {
const badgeEstado = fila.querySelector("td:nth-child(4) .badge");
const estado = badgeEstado?.textContent.toLowerCase() || "";
if (estadoSeleccionado === "todos" || estado === estadoSeleccionado) {
fila.style.display = "";
visibles++;
} else {
fila.style.display = "none";
}
});
const mensajeVacio = document.getElementById("emptyCourseMessage");
if (mensajeVacio) {
mensajeVacio.style.display = visibles === 0 ? "block" : "none";
}
});
filtro.dispatchEvent(new Event("change"));
}
setupCourseForm();
})
.catch((err) => {