vista1 = {                                      
    // el objeto  que contiene la vista (su parte javascript)                    
    generada: false,
    // variable boolean que indica si ya fue generado el HTML de la vista
    mostrar: function () {                      
        // método llamado desde script.js cuando se muestra esta vista                            
        // si es la primera vez que se ingresa a la vista la genera,
        // sino actualiza todos los datos
        if (!this.generada) {                   
            this.generar();
            this.generada = true;
        } else {
            this.actualizarTodo();              
        } 
        this.controlarEventos();               
        // llama al método que activa los eventos de la vista
    },
    generar: () => {
        // genera la estructura HTML y muestra los primeros datos
        // es una función "larga" ya que se genera un arbol DOM relativamente grande.
        let contenido = document.querySelectorAll("#vista1 #contenido")[0];
        // elemento DOM contenedorde los datos de la vista
        if (contenido.innerHTML == "") {
            // si no existe contenido lo crea
            // si ya existe no hace nada
            let fragment = document.createDocumentFragment();
            //crea un fragmento de HTML que luego se insertará en el contenedor
            // el resto del método se basa en el uso de las funciones:
            //      document.createElement("elem");
            //          donde "elem" puede ser casi cualquier elemento del DOM
            //          en este caso principalmente "div" y "p"  
            //      elem.classList.add("clase");
            //          agrega una clase al elemento "elem"
            //      elem.textContent = texto;
            //          agrega "texto" como contenido de elem
            valor.innerHTML = `${dato.valor}<span class="unidad">${dato.unidad}</span>`;
            // en esta linea tenemos:
            //      innerHTML: indica que el valor es HTML que irá dentro del elemento "valor" 
            //      las comillas invertidas ` ` señalan el uso de un "template literal" 
            //      donde ${variable} se reemplaza por el valor de la variable
            div.appendChild(valor);
            // agrega el elemento "valor" como último hijo del elemento "div"
            // Este esquema se repite hasta completar la vista  
    }
            
    actualizar: (i, dato) => {
        // actualiza la vista del elemento "elem" 
        // cada vez que los controladores informan de un cambio en los datos del modelo.
        // controla que el valor esté en rango aceptable (entre el mínimo y el máximo)

        let id = "valor" + i;
        let valor = document.getElementById(id);
        valor.innerHTML = `${dato.valor}<span class="unidad">${dato.unidad}</span>`;
        if (dato.minimo && dato.valor < dato.minimo ||
                dato.maximo && dato.valor > dato.maximo) {
            valor.parentElement.classList.add("alerta");
        } else {
            valor.parentElement.classList.remove("alerta");
        }
    },
    actualizarTodo: function () {
        // recorre todos los datos (a través de los controladores correspondientes)
        // actualizando la vista
        for (let i = 0; i < controladores1.cantidadDatos(); i++) {
            this.actualizar(i, controladores1.leerDatos(i));
        }
    },
    controlarEventos: () => {
      // Se detectan los eventos de la vista
      // Creo un solo "EventListener" sobre el elemento padre de los botones
      // y cuando se produce el evento consulto que hijo lo recibió
      let contenido = document.querySelectorAll("#vista1 #contenido")[0];
      contenido.addEventListener("click", (event) => {
        if (event.target.parentElement.dataset.parametro) {
          if (event.target.parentElement.classList.contains("controlSubir")){
            controladores1.cambiar(event.target.parentElement.dataset.parametro, "subir")
          } else {
            controladores1.cambiar(event.target.parentElement.dataset.parametro, "bajar")
          }
        }
      });
    }           
                

let controladores1 = {                  
    // objeto que contiene a los controladores
    cantidadDatos: () => {              
           // pregunta al modelo la cantidad de datos
        return datos.getCantidad();
    },
    leerDatos: (i) => {                 
            // consulta al modelo por un dato en particular
        return datos.getItem(i)
    },
    cambio: (i) => {                    
            // avisa a la vista que hubo cambios en los datos del modelo
        vista1.actualizar(i, datos.getItem(i));
    },
    cambiar: (i, sentido) => {          
           // indica al modelo que el usuario actuó sobre la vista
           // solicitando subir o bajar un valor
        if (sentido == "subir") {
            datos.subir(i);
        } else {
            datos.bajar(i);
        }
    }
};