JSFiddle - React, Tailwind, and code Playground

by caiubyfreitas

HTML

<button id='b1'>botao sem fio truck</button>
<button id='b2'>botao sem fio bus</button>
<button id='b3'>botao inicio/reiniciar</button>

JavaScript

$(document).ready(function () {
const MAX_PAGES_TRUCK = 7;
const MAX_PAGES_BUS = 7;

var edge = false;

var page = {
    index: 0,
    line: '',
    path: ''
};

var pageConfig = {
    "bus": MAX_PAGES_BUS,
    "truck": MAX_PAGES_TRUCK
}

    page.path = 'home';
    loadPage(page);

$('#b1').click(function () {
    button.truck = 1;
});

$('#b2').click(function () {
		alert("Passei por aqui sem problemas!")
    button.bus = 1;
});

$('#b3').click(function () {
    window.location = '/';
});


var checkButtons = setInterval(function () {
    for (var station in button) {
        if (page.index == 0) {
            if (button[station]) {
                page.index = 1;
                page.line = station;
                loadPage(page);
            }
        } else {
            if (button[station] && page.line == station && !edge) {
                edge = true;
                page.index++;
                if (page.index > pageConfig[page.line]) {
                    page.line = '';
                    page.index = 0;
                }
                loadPage(page);
            }
        }
    }
}, 250);


function loadPage(page) {
    if (page.line == '' || !page.line) {
        $("#content").load('pages/home.html', function () {
            console.log('Carregando página inicial');
        });
        return;
    }
    $("#content").load('pages/' + page.line + '/' + page.index + '.html', function () {
        edge = false;
        page.path = page.line + '/' + page.index;
        console.log('Página: ' + page.line + ' ' + page.index + ' carregada');
    });

}

var parser = new DOMParser();
var plcDataText;
var plcDataValues;
var button = {
    "truck": 0,
    "bus": 0,
    "reserva_1": 0,
    "reserva_2": 0,
};
var sensors = [];

console.log('Carregando dados do PLC');

var getValuesInterval = setInterval(getIO, 250);

function getIO() {
    $.get('IO.html', function(data) {    
        plcDataValues = [];
        data = parser.parseFromString(data,...