Source: vistas/vistamenu.js

/**
  Vista del menú de navegación de la aplicación.
  Muestra los enlaces de contexto.
**/

import { Vista } from './vista.js'

export class VistaMenu extends Vista{
  /**
    Constructor de la clase.
    @param {Object} controlador Controlador de la vista principal.
    @param {Node} base Nodo al que se añadirá la vista principal.
  **/
  constructor (controlador, base) {
	super(controlador, 'flex')
    this.base = base

    // Cogemos referencias a los elementos del interfaz

    // Asociamos eventos
  }

  /**
    Muestra el menú asociado a la lista de alumnos de un profesor.
    El menú incluye: título y logout.
  **/
  verAlumnosProfesor () {
    this.limpiar()
    this.verUsuario()
    // this.verTitulo('Lista Alumnos')
    const h1 = document.createElement('h1')
    this.base.appendChild(h1)
    h1.appendChild(document.createTextNode('Lista de Alumnos'))
    h1.appendChild(this.crearIconoAyuda('Muestra la lista de alumnos que tienen tareas registradas de los módulos asignados al profesor'))
    this.verLogout(2)
    this.verAcercaDe()
  }

  /**
    Muestra el menú asociado a la vista de informe de alumno.
    @param alumno {Alumno} Datos del alumno.
  **/
  verInforme (alumno) {
    this.limpiar()
    this.verUsuario()
    this.verTitulo(`Informe de ${alumno.nombre} ${alumno.apellidos}`)
    this.base.appendChild(this.crearIcono('volver.svg', 2, 'volver', this.controlador.mostrarAlumnos.bind(this.controlador, false)))
    this.base.appendChild(this.crearIcono('print.svg', 1, 'imprimir', this.controlador.imprimir.bind(this.controlador)))
    this.verLogout(3)
    this.verAcercaDe()
  }

  /**
    Muestra el menú asociado a la vista de créditos.
  **/
  verCreditos () {
    this.limpiar()
    this.verUsuario()
    this.verTitulo('Acerca de DUALEX')
    if (this.controlador.getUsuario().rol === 'profesor') { this.base.appendChild(this.crearIcono('volver.svg', 2, 'volver', this.controlador.mostrarAlumnos.bind(this.controlador, false))) } else { this.base.appendChild(this.crearIcono('volver.svg', 2, 'volver', this.controlador.mostrarTareasAlumno.bind(this.controlador, this.controlador.getUsuario()))) }
    this.verLogout(3)
    this.verAcercaDe()
  }

  /**
    Muestra el menú asociado a la vista de tarea.
    @param tarea {Tarea} Datos de la tarea.
  **/
  verTarea (tarea) {
    this.limpiar()
    this.verUsuario()
    if (tarea) { this.verTitulo(`Tarea: ${tarea.titulo}`) } else { this.verTitulo('Nueva Tarea') }
    this.base.appendChild(this.crearIcono('volver.svg', 1, 'volver', this.controlador.mostrarTareasAlumno.bind(this.controlador, null)))
    this.verLogout(2)
    this.verAcercaDe()
  }

  /**
    Muestra el menú asociado a la lista de tareas de un alumno.
    El menú incluye: título y logout. Y si es un alumno se añade el icono de crear tarea.
    @param alumno {Alumno} Datos del alumno.
  **/
  verTareasAlumno (alumno) {
    this.limpiar()
    this.verUsuario()
    if (this.controlador.getUsuario().rol === 'alumno') {
      this.verTitulo('Tus Tareas')
      this.base.appendChild(this.crearIcono('add.svg', 1, 'nueva tarea', this.controlador.mostrarTarea.bind(this.controlador, null)))
    } else {
      this.verTitulo(`Tareas de ${alumno.nombre} ${alumno.apellidos}`)
      this.base.appendChild(this.crearIcono('volver.svg', 1, 'volver', this.controlador.mostrarAlumnos.bind(this.controlador, false)))
    }
    this.verLogout(2)
    this.verAcercaDe()
  }

  /**
    Elimina los elementos del menú.
  **/
  limpiar () {
	this.eliminarHijos(this.base)
  }

  /**
    Pone el icono de "Acerca de"
  **/
  verAcercaDe () {
    this.base.appendChild(this.crearIcono('question_mark.svg', 10, 'acerca de Dualex', this.controlador.verCreditos.bind(this.controlador)))
  }

  /**
    Muestra el usuario logeado.
  **/
  verUsuario () {
    const div = document.createElement('div')
    this.base.appendChild(div)
    div.textContent = this.controlador.getUsuario().email
    div.classList.add('usuario')
  }

  /**
    Muestra el título del menú.
    @param titulo {String} Título del menú.
  **/
  verTitulo (titulo) {
    const h1 = document.createElement('h1')
    this.base.appendChild(h1)
    h1.textContent = titulo
  }

  /**
    Añade el icono de logout.
    @param orden {Number} Orden de posición en el menú.
  **/
  verLogout (orden) {
    this.base.appendChild(this.crearIcono('logout.svg', orden, 'logout', this.controlador.logout.bind(this.controlador)))
  }

  /**
    Añade el icono de Nueva Tarea.
    @param order {Number} Orden de posición en el menú.
  **/
  verNuevaTarea (orden) {
    this.base.appendChild(this.crearIcono('add.svg', orden, 'nueva tarea', this.controlador.mostrarTarea.bind(this.controlador, null)))
  }

  /**
    Crea un icono para el menú.
    @param imagen {String} Nombre del fichero de imagen (svg) que formará el icono.
    @param orden {Number} Número de orden del icono en el menú.
    @param titulo {String} Texto que se mostrará en el tooltip del icono.
    @param callback {Function} Función que se llamará al pulsar el icono.
    @return {HTMLElement} Elemento HTML (img) que forma el icono.
  **/
  crearIcono (imagen, orden = null, titulo, callback = null) {
    const icono = document.createElement('img')
    icono.setAttribute('src', 'iconos/' + imagen)
    icono.setAttribute('title', titulo)
    icono.classList.add('icono')
    if (orden) { icono.style.order = orden }
    if (callback) { icono.onclick = callback }
    return icono
  }

  crearIconoAyuda (texto) {
    return this.crearIcono('help.svg', null, texto)
  }

  /**
 * Método verEmpresas: muestra la lista de empresas en la interfaz de usuario.
 * Este método verifica el rol del usuario y muestra los elementos correspondientes en la interfaz.
 * Si el usuario es un coordinador, muestra la lista de empresas con opciones para agregar una nueva empresa y volver atrás.
 * @returns {void}
 */
  verEmpresas () {
    this.limpiar()
    this.verUsuario()
    if (this.controlador.getUsuario().rol === 'coordinador') {
      this.verTitulo('Lista de Empresas')
      this.base.appendChild(this.crearIcono('add.svg', 2, 'Nueva empresa', this.controlador.mostrarVistaEmpresa.bind(this.controlador, null)))
    }
    this.base.appendChild(this.crearIcono('volver.svg', 1, 'volver', this.controlador.mostrarAlumnos.bind(this.controlador, false)))
    this.verLogout(2)
    this.verAcercaDe()
  }

/**
 * Método crearEmpresa: muestra la interfaz para agregar una nueva empresa.
 * Este método verifica el rol del usuario y muestra los elementos correspondientes en la interfaz.
 * Si el usuario es un coordinador, muestra la interfaz para agregar una nueva empresa.
 * @returns {void}
 */
  crearEmpresa () {
    this.limpiar()
    this.verUsuario()
    if (this.controlador.getUsuario().rol === 'coordinador') {
      this.verTitulo('Alta de Empresas')
    }
    this.base.appendChild(this.crearIcono('volver.svg', 1, 'volver', this.controlador.irAVistaEmpresas.bind(this.controlador, false)))
    this.verLogout(2)
    this.verAcercaDe()
  }

  /**
   * Muestra el menu correspondiente a la lista de convenios en la interfaz de usuario.
   */
  verConvenios () {
    this.limpiar()
    this.verUsuario()
    if (this.controlador.getUsuario().rol === 'coordinador') {
      this.verTitulo('Lista de Convenios')
      this.base.appendChild(this.crearIcono('add.svg', 2, 'Nuevo Convenio', this.controlador.mostrarVistaConvenio.bind(this.controlador, null)))
      this.base.appendChild(this.crearIcono('volver.svg', 1, 'volver', this.controlador.mostrarAlumnos.bind(this.controlador, false)))
    }
    this.verLogout(2)
    this.verAcercaDe()
  }

  /**
   * Muestra el menu correspondiente al alta de convenios en la interfaz de usuario.
   */
  crearConvenio() {
    this.limpiar()
    this.verUsuario()
    if (this.controlador.getUsuario().rol === 'coordinador') {
      this.verTitulo('Alta de Convenios')
      this.base.appendChild(this.crearIcono('volver.svg', 1, 'volver', this.controlador.irAVistaConvenios.bind(this.controlador, false)))
    }
    this.verLogout(2)
    this.verAcercaDe()
  }

   /**
   Muestra el menú asociado a la lista de gestión de alumnos.
   El menú incluye: título, logout y add.
   **/
  verGestionAlumnos () {
    this.limpiar()
    this.verUsuario()
    const h1 = document.createElement('h1')
    this.base.appendChild(h1)
    h1.appendChild(document.createTextNode('Listado de Alumnos'))
    h1.appendChild(this.crearIconoAyuda('Muestra el listado de alumnos para ser gestionados por el profesor o coordinador'))
    this.base.appendChild(this.crearIcono('volver.svg', 1, 'volver', this.controlador.mostrarAlumnos.bind(this.controlador, false)));
    this.base.appendChild(this.crearIcono('add.svg', 2, 'nuevo alumno', this.controlador.mostrarAltaAlumno.bind(this.controlador, null)))
    this.verLogout(2)
    this.verAcercaDe()
  }

  /**
   Muestra el menú asociado a el alta de alumnos.
   El menú incluye: título, logout y retorno.
   **/
  verAltaAlumno () {
    this.limpiar()
    this.verUsuario()
    const h1 = document.createElement('h1')
    this.base.appendChild(h1)
    h1.appendChild(document.createTextNode('Alta de Alumno'))
    h1.appendChild(this.crearIconoAyuda('Muestra el el formulario para dar de alta a un alumno'))
    this.base.appendChild(this.crearIcono('volver.svg', 1, 'volver', this.controlador.mostrarGestionAlumnos.bind(this.controlador, false)));
    this.verLogout(2)
    this.verAcercaDe()
  }

  verModificarAlumno () {
    this.limpiar()
    this.verUsuario()
    const h1 = document.createElement('h1')
    this.base.appendChild(h1)
    h1.appendChild(document.createTextNode('Modificar Alumno'))
    h1.appendChild(this.crearIconoAyuda('Muestra el el formulario para modificar los datos de un alumno'))
    this.base.appendChild(this.crearIcono('volver.svg', 1, 'volver', this.controlador.mostrarGestionAlumnos.bind(this.controlador, false)));
    this.verLogout(2)
    this.verAcercaDe()
  }

  /**
   * Muestra el menu correspondiente a la edicion de convenios en la interfaz de usuario.
   */
  crearConvenioEditar () {
    this.limpiar()
    this.verUsuario()
    if (this.controlador.getUsuario().rol === 'coordinador') {
      this.verTitulo('Editar Convenio')
      this.base.appendChild(this.crearIcono('volver.svg', 1, 'volver', this.controlador.irAVistaConvenios.bind(this.controlador, false)))
    }
    this.verLogout(2)
    this.verAcercaDe()
  }

  /**
   Muestra el menú asociado a la lista de gestión de alumnos.
   El menú incluye: título, logout y add.
   **/
  verGestionProfesores () {
    this.limpiar()
    this.verUsuario()
    const h1 = document.createElement('h1')
    this.base.appendChild(h1)
    h1.appendChild(document.createTextNode('Listado de Profesores'))
    h1.appendChild(this.crearIconoAyuda('Muestra el listado de profesores para ser gestionados por el coordinador'))
    this.base.appendChild(this.crearIcono('volver.svg', 1, 'volver', this.controlador.mostrarAlumnos.bind(this.controlador, false)));
    this.base.appendChild(this.crearIcono('add.svg', 2, 'nuevo profesor', this.controlador.mostrarAltaProfesor.bind(this.controlador, null)))
    this.verLogout(2)
    this.verAcercaDe()
  }

  /**
   Muestra el menú asociado a el alta de alumnos.
   El menú incluye: título, logout y retorno.
   **/
  verAltaProfesor () {
    this.limpiar()
    this.verUsuario()
    const h1 = document.createElement('h1')
    this.base.appendChild(h1)
    h1.appendChild(document.createTextNode('Alta de Profesor'))
    h1.appendChild(this.crearIconoAyuda('Muestra el el formulario para dar de alta a un profesor'))
    this.base.appendChild(this.crearIcono('volver.svg', 1, 'volver', this.controlador.mostrarGestionProfesores.bind(this.controlador, false)));
    this.verLogout(2)
    this.verAcercaDe()
  }

  verModificarProfesor () {
    this.limpiar()
    this.verUsuario()
    const h1 = document.createElement('h1')
    this.base.appendChild(h1)
    h1.appendChild(document.createTextNode('Modificar Profesor'))
    h1.appendChild(this.crearIconoAyuda('Muestra el el formulario para modificar los datos de un profesor'))
    this.base.appendChild(this.crearIcono('volver.svg', 1, 'volver', this.controlador.mostrarGestionProfesores.bind(this.controlador, false)));
    this.verLogout(2)
    this.verAcercaDe()
  }
}