uibuilder.start();

uibuilder.onChange('msg', msg => {
    if (msg.hasOwnProperty("peso")) document.getElementById('peso').textContent = msg.peso;
    if (msg.hasOwnProperty("id_m2")) document.getElementById('matricula').textContent = msg.id_m2 
    if (msg.hasOwnProperty("id_m4")) document.getElementById('tarjetaid').textContent = msg.id_m4 
    if (msg.hasOwnProperty("semaforo")) document.getElementById('semaforo').style.backgroundColor = msg.semaforo;

    

    const boton = document.getElementById('boton-ok');
    const m1 = document.getElementById('mensaje1');
    const m2 = document.getElementById('mensaje2');
    const m3 = document.getElementById('mensaje3');

    const payload = msg.payload || {};

    // Mensajes individuales
    if (msg.hasOwnProperty("men_m1")) {
        m1.textContent = msg.men_m1;
        m1.style.color = msg.men_m1_color || 'black';
        m1.style.display = 'block';
    } else {
        m1.style.display = 'none';
    }

    if (!(msg.button == "button3") && msg.hasOwnProperty("men_m2")) {
        m2.textContent = msg.men_m2;
        m2.style.color = msg.men_m2_color || 'black';
        m2.style.display = 'block';
    } else {
        m2.style.display = 'none';
    }

    if (!(msg.button == "button3") && msg.hasOwnProperty("men_m3")) {
        m3.textContent = msg.men_m3;
        m3.style.color = msg.men_m2_color || 'black';
        m3.style.display = 'block';
    } else {
        m3.style.display = 'none';
    }
    if (msg.hasOwnProperty("men_m1")) {
        const m1 = document.getElementById('mensaje1');
        m1.textContent = msg.men_m1;
        m1.style.display = 'block';
        m1.style.color = msg.men_m1_color || 'black';
    } else {
        document.getElementById('mensaje1').style.display = 'none';
    }

    // Botón
    if (msg.button == "button3") {
        //console.log("boton ok")
        boton.style.display = 'inline-block';
        boton.textContent = msg.button3 || 'OK';
        boton.style.backgroundColor = msg.botonvalidacion_background || '#28a745';
        boton.style.color = msg.botonvalidacion_foreground || 'orange';
    } 
    else {
        boton.style.display = 'none';
    }
    
});

document.getElementById('boton-ok').addEventListener('click', () => {
    document.getElementById('boton-ok').style.display = 'none';
    document.getElementById('mensaje1').style.display = 'none';
    
    uibuilder.send({ payload: { boton: "ok" } });
});