esp8266-laser/frontend/scripts/zMain.js

let click = element => element.click();
let check = element => element.setAttribute('checked','checked');
let uncheck = element => element.removeAttribute('checked');

let switchElementState = element =>  {
    let state = element.getAttribute('data-state') == 'false';
    element.setAttribute('data-state', state);
    return state;
};
let bindData = (element, attribute, data) => {
    element.setAttribute('data-' + attribute, data);
};
Sui.ready(() => {
    let debugResponse = (data) => {
        document.querySelector('#response').innerHTML = data;
    };
    
    // init collapsible containers
    Sui.select('.collapsible').forEach((container) => {
        container.querySelector('.heading').addEventListener('click', (item) => {
            container.classList.toggle('open');
        });
    });
    
    // init actuators
    [{
        api: '/wificonfig',
        method: 'POST',
        selector: '.switch.ap-mode .slider',
        event: 'click',
        onResponse: debugResponse,
        handler: function() {
            let nextState = switchElementState(this);
            /*let bindingName = this.getAttribute('data-bind');
            Sui.select('.switch.ap-mode [name="'+ bindingName+'"]')
                .forEach(check);*/
            console.log(nextState);
        }
    },{
        api: '/presetMode',
        method: 'POST',
        selector: '.switch.preset-mode .slider',
        event: 'click',
        onResponse: debugResponse,
        data: function() {
            let state = switchElementState(this);
            console.log(state);
            return Sui.util.serialize({
                mode: state ? 1 : 0
            });
        }
    },{
        api: '/spirograph',
        method: 'POST',
        selector: '.slider.motor',
        event: 'change',
        onResponse: debugResponse,
        data: function() {
            let payload = {},
                motorValue = this.value,
                motorNr = this.getAttribute('data-motor-nr'),
                actuatorId = 'motor' + motorNr;
            // update actuator value label
            Sui.select('[data-actuator-id=\"'+ actuatorId + '\"]')
                .forEach( element => element.innerHTML = motorValue);
            // add actuator to payload
            payload[actuatorId] = motorValue;
            return Sui.util.serialize(payload);
        }
    }, {
        api: '/spirograph',
        method: 'POST',
        selector: '.slider.laser',
        event: 'change',
        onResponse: debugResponse,
        data: function() {
            // update actuator value label
            Sui.select('[data-actuator-id="laser"]')
                .forEach( element => element.innerHTML = this.value );
            // return payload
            return Sui.util.serialize({
                laser: this.value
            });
        }
    }].forEach(Sui.link({
        api: {
            MOTOR: '/spirograph', // {motorNr}/{value}
            LASER: '/spirograph', // {value}
            PRESET: '/presetMode'
        }
    }));
});