zetikettes/frontend/zetikettes.js

const params = {
    'dluo': 'DLUO',
    'lot': 'Nº de lot',
    'qty': 'Poids net (g)',
    'vol': 'Volume net (cL)',
    'teneur': 'Teneur en fruits (%)',
    'fruit': 'Quantité de fruits pour 100g (g)',
}

function loadAll(zetikettes) {
    const appbody = $("#appbody");
    for (let zett of zetikettes) {
        const block = $('<div class="section">');
        for (let sub in zett.subs) {
            block.append($(`<div class="input-field"><label class="active">${params[sub]}</label><input type="text" name="${sub}" value="${zett.subs[sub]}">`));
        }
        const loader = $('<div class="progress"><div class="indeterminate"></div></div>')
            .hide();

        const action = $('<div class="section">')
            .append($('<a class="btn">generate<a>')
                .click(() => {
                    const subs = block.find(':text')
                        .toArray()
                        .reduce((obj, el) => ({...obj, [el.name]: el.value}), {});
                    const req = {
                        sticker: zett.sticker,
                        subs,
                        landscape: zett.landscape,
                    };

                    loader.show();
                    $('.btn').addClass("disabled");

                    $.post(backend_api, JSON.stringify(req))
                        .then(data => {
                            console.log(data);
                            const pdfbtn = $(`<a class="btn" href="${backend_api}data/${data.file}" target="_blank">open pdf</a>`);
                            action.append(pdfbtn);
                        })
                        .catch(err => {
                            console.log(err);
                        })
                        .always(() => {
                            loader.hide();
                            $('.btn').removeClass('disabled');
                        });
                })
            .append(loader));

        appbody
            .append($('<li>')
                .append($(`<div class="collapsible-header"><h6 class="blue-text">${zett.title}</h6></div>`))
                .append($('<div class="collapsible-body">')
                    .append(block)
                    .append(action)));
    }

    $('.collapsible').collapsible();

    konami();
}

function konami() {
    var k = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65],
    n = 0;
    $(document).keydown(function (e) {
        if (e.keyCode === k[n++]) {
            if (n === k.length) {
                document.location.href = 'newtikette.html';
            }
        }
        else {
            n = 0;
        }
    });
}

$(document).ready(async () => {
    try {
        const resp = await $.ajax({
            url: backend_api + 'list',
            timeout: 1000,
        });
        loadAll(resp.tikettes);
    } catch(e) {
        const appbody = $("#appbody");
        appbody.append(`<li>Could not reach backend server`);
        throw e;
    }
});