Source: vistas/vistaalumnos.js

/**
  Vista con el listado de alumnos de un profesor.
**/
import { Vista } from './vista.js'
import { VistaMenuContexto } from './vistamenucontexto.js'


export class VistaAlumnos extends Vista{
  /**
    Constructor de la clase.
    @param {Object} controlador Controlador de la vista.
    @param {Node} base Nodo al que se añadirá la vista.
  **/
  constructor (controlador, base) {
	super(controlador)
    this.base = base
    this.callback = null // Función que se llamará al cerrar el diálogo.
   
    // Creamos la subvista del menú de contexto
    this.vistaMenuContexto = new VistaMenuContexto(this, this.base.getElementsByTagName('div')[0])
    this.controlador.verPeriodos()
      .then(periodos => {
        const opciones = []
        for (const periodo of periodos) {
          opciones.push({ titulo: periodo.nombre, callback: this.elegirPeriodo.bind(this, periodo.id) })
        }
        this.vistaMenuContexto.cargar(opciones)
      })

    // Cogemos referencias a los elementos del interfaz

    // Asociamos eventos
    window.addEventListener('click', this.ocultarMenuContexto.bind(this))
    
  }

  /**
    Carga los alumnos.
  **/
  cargar (alumnos) {
    //Eliminamos los hijos, menos el primero
	this.eliminarHijos(this.base, 1)

    if (!alumnos) {
      this.base.appendChild(document.createTextNode('No tiene alumnos en sus módulos.')) 
    } 
    else {
      this.divMenuBusqueda = document.createElement('div')
      this.divMenuBusqueda.id='divMenuBusqueda'
      this.base.appendChild(this.divMenuBusqueda)
      let input=document.createElement('input');
      this.divMenuBusqueda.appendChild(input)
      input.id='buscador'
      input.type='text'
      let boton=document.createElement('button')
      boton.id='btnBuscar'
      this.divMenuBusqueda.appendChild(boton)
      boton.addEventListener('click', this.cargarBusqueda.bind(this))

      let imagen=document.createElement('img');
      imagen.src = "./iconos/search.svg"
      imagen.style.width = "15px"
      boton.appendChild(imagen)

      this.select = document.createElement('select')
      this.divMenuBusqueda.appendChild(this.select)
      this.select.id='filtro'

      let option1 = document.createElement('option')
      this.select.appendChild(option1)
      option1.value = ''
      option1.textContent = 'Seleccione'
      option1.disabled = 'true'

      let option = document.createElement('option')
      this.select.appendChild(option)
      option.value = 'todos'
      option.textContent = 'Todos'
      
      this.cargarFiltro()
      this.select.addEventListener("change",this.cargarFiltrado.bind(this))
      const div = document.createElement('div')
      this.base.appendChild(div)
      div.textContent = 'DUALEX'
      div.style.fontSize = '5em'
      div.style.textAlign = 'center'
      div.style.fontWeight = 'bold'
      div.style.marginTop = '20px'
      div.style.color = 'blue'
      div.style.borderBottom ='none'

      const div2 = document.createElement('div')
      this.base.appendChild(div2)
      div2.textContent = 'Aplicación para la gestión de la evaluación'
      div2.style.fontSize = '3em'
      div2.style.textAlign = 'center'
      div2.style.fontWeight = 'bold'
      div2.style.marginTop = '60px'
      div2.style.color = 'blue'
      div2.style.borderBottom ='none'
    }
    
  }

  /**
   * Carga la búsqueda realizada en el buscador
   */
  cargarBusqueda(){
	this.eliminarHijos(this.base, 2)
    let texto= document.getElementById('buscador').value
    var matcher = new RegExp('^'+texto,'i')
    console.log(matcher)
    this.creadivs1=false
    this.controlador.getAlumnosProfesor()
    .then(alumnos => {
      for(let i=0; i<alumnos.length; i++){
        if(matcher.test(alumnos[i].nombre) || matcher.test(alumnos[i].apellidos)){
          this.creadivs1 = true
          console.log('coincide'+alumnos[i].nombre)
          this.crearDivAlumno(alumnos[i])
        }
      }
      if(this.creadivs1 == false){
        const div = document.createElement('div')
        this.base.appendChild(div)
        div.textContent = 'No hay ningún alumno que coincida.'
      }
    })
    .catch(error => console.log(error))
  }

  /**
   * Carga la lista de cursos en el select del filtro
   */
  cargarFiltro(){
    this.cursos = []
    this.controlador.getCursos()
    .then(cursos => {
      for(let i=0; i<cursos.length; i++){
        this.cursos[i]=cursos[i]
        let option = document.createElement('option')
        this.select.appendChild(option)
        option.value = cursos[i].codigo
        option.textContent = cursos[i].codigo
      }
    })
    .catch(error => console.log(error))
  }

  /**
   * Carga la lista de alumnos filtrada según lo seleccionado
   */
  cargarFiltrado(){
   	this.eliminarHijos(this.base, 2) 
    this.controlador.getAlumnosProfesor()
    .then(alumnos => {
      if(this.select.value=='todos'){
        for(let i=0; i<alumnos.length; i++){
          this.crearDivAlumno(alumnos[i])
        }
      }
      else{
        this.creadivs = false
        for(let i=0; i<alumnos.length; i++){
          if(alumnos[i].codigo == this.select.value){
            this.creadivs = true
            this.crearDivAlumno(alumnos[i])
          }
        }
        if(this.creadivs == false){
          const div = document.createElement('div')
          this.base.appendChild(div)
          div.textContent = 'No hay ningún alumno de este curso.'
        }
      }
    })
  }

  /**
    Crea el div asociado a un alumno y lo añade a la base.
    @param alumno {Alumno} Datos del alumno.
  **/
  crearDivAlumno (alumno) {
    const div = document.createElement('div')
    this.base.appendChild(div)

    // Creamos el span del Ciclo
    const span = document.createElement('span')
    div.appendChild(span)
    span.classList.add('ciclo')
    span.textContent = alumno.codigo
    span.setAttribute('title', alumno.titulo)
    span.style.backgroundColor = alumno.color_fondo
    span.style.color = alumno.color_letra

    const spanAlumno = document.createElement('span')
    div.appendChild(spanAlumno)
    spanAlumno.classList.add('alumno')
    spanAlumno.textContent = `${alumno.nombre} ${alumno.apellidos}`
    spanAlumno.onclick = this.pulsarTareas.bind(this, alumno)

    // TODO: Refactorizar para evitar DRY.
    const spanIconos = document.createElement('span')
    div.appendChild(spanIconos)
    spanIconos.classList.add('iconos')
    const iconoTareas = document.createElement('img')
    spanIconos.appendChild(iconoTareas)
    iconoTareas.classList.add('icono')
    iconoTareas.setAttribute('title', 'tareas')
    iconoTareas.setAttribute('src', 'iconos/build.svg')
    iconoTareas.onclick = this.pulsarTareas.bind(this, alumno)
    const iconoInforme = document.createElement('img')
    spanIconos.appendChild(iconoInforme)
    iconoInforme.classList.add('icono')
    iconoInforme.setAttribute('title', 'informe')
    iconoInforme.setAttribute('src', 'iconos/description.svg')
    iconoInforme.onclick = this.pulsarInforme.bind(this, alumno)
  }

  /**
    Crea el span asociado a un módulo y lo añade al div.
    @param div {DivElement} Elemento div al que se añadirá el span.
    @param alumno {Modulo} Datos del módulo.
    @param index {Number} Índice del alumno en el array.
    @param array {Array} Array de alumnos.
  **/
  crearSpanModulo (div, modulo, index, array) {
    const span = document.createElement('span')
    div.appendChild(span)
    // TODO: falta incluir el icono del módulo.
    span.classList.add('modulo')
    span.textContent = modulo.codigo
    span.setAttribute('title', modulo.titulo)
    span.style.backgroundColor = modulo.color_fondo
    span.style.color = modulo.color_letra
  }

  /**
    Atención a la pulsación sobre el icono de Tareas de un alumno.
    @param alumno {Alumno} Datos del alumno.
  **/
  pulsarTareas (alumno) {
    this.controlador.mostrarTareasAlumno(alumno)
  }

  /**
    Atención a la pulsación sobre el icono de Informe de un alumno.
    @param alumno {Alumno} Datos del alumno.
  **/
  pulsarInforme (alumno, evento) {
    this.alumnoElegido = alumno
    this.vistaMenuContexto.mostrarEn(evento.clientX, evento.clientY)
    evento.stopPropagation()
  }

  /**
    Atención a la elección de periodo de informe en el menú de contexto.
    @param periodo {Number} Identificador del periodo solicitado.
    @param evento {ClickEvent} Evento de click.
  **/
  elegirPeriodo (periodo, evento) {
    this.controlador.mostrarInformeAlumno(this.alumnoElegido, periodo)
    evento.stopPropagation()
    evento.preventDefault()
  }

  /**
    Oculta el menú de contexto.
  **/
  ocultarMenuContexto () {
    this.vistaMenuContexto.base.style.display = 'none'
  }

}