41 lines
2.1 KiB
JavaScript
41 lines
2.1 KiB
JavaScript
function barra(profesor, retardos) {
|
|
profesor.faltas = profesor.total - profesor.asistencias - profesor.retardos - profesor.justificaciones;
|
|
if (profesor.total != 0)
|
|
var porcentajes = {
|
|
"asistencias": profesor.asistencias / profesor.total * 100,
|
|
"retardos": profesor.retardos / profesor.total * 100,
|
|
"justificaciones": profesor.justificaciones / profesor.total * 100,
|
|
"faltas": 100 * profesor.faltas / profesor.total
|
|
}
|
|
else
|
|
var porcentajes = {
|
|
"asistencias": 0,
|
|
"retardos": 0,
|
|
"justificaciones": 0,
|
|
"faltas": 0
|
|
}
|
|
var html = `
|
|
<section id="profesor-${profesor.id}">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="progress">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: ${porcentajes.asistencias}%" aria-valuenow="${porcentajes.asistencias}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
<!-- Show retardos only if it's set to true -->
|
|
${retardos ? `<div class="progress-bar bg-warning" role="progressbar" style="width: ${porcentajes.retardos}%" aria-valuenow="${porcentajes.retardos}" aria-valuemin="0" aria-valuemax="100"></div>` : ``}
|
|
<div class="progress-bar bg-azul" role="progressbar" style="width: ${porcentajes.justificaciones}%" aria-valuenow="${porcentajes.justificaciones}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: ${porcentajes.faltas}%" aria-valuenow="${porcentajes.faltas}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Span Asistencias: # Retardos: # Faltas: # -->
|
|
<div class="row justify-content-center">
|
|
<span class="mx-3 mt-1">Asistencias: ${profesor.asistencias}</span>
|
|
${retardos ? `<span class="mx-3 mt-1">Retardos: ${profesor.retardos}</span>` : `` }
|
|
<span class="mx-3 mt-1">Justificaciones: ${profesor.justificaciones}</span>
|
|
<span class="mx-3 mt-1">Faltas: ${profesor.faltas}</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
return html;
|
|
} |