chikinz/client/wrap.js

const config = 'dev';
const backend_api = {
    'prod': '/zetikettes/srv/',
    'dev': 'http://scrawny.local:3000',
}[config];

const token = localStorage.getItem('token');

async function getBandz() {
    const uri = `${backend_api}/bandz`;
    const res = await $.ajax(uri, {headers: {Authorization: `Bearer ${token}`}});
    return res.bandz;
}

async function wrapAChikin(req) {
    const uri = `${backend_api}/wrap`;
    const res = await $.ajax(uri, {
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(req),
        headers: {Authorization: `Bearer ${token}`},
    });
    return res.chikinId;
}

function printLabel(chikinId) {
    const uri = `${backend_api}/print`;
    $.ajax(uri, {
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({chikinId}),
        headers: {Authorization: `Bearer ${token}`},
    });
}

$(document).ready(() => {
    const appbody = $("#appbody");

    const bandSelect = $('<div class="input-field col s12">')
        .append(
            $('<select>')
                .append('<option disabled selected>Choose a band</option>')
        )
        .append('<label>Band</label>');

    const block = $('<div class="section">');
    block
        .append(bandSelect)
        .append($('<div class="input-field col s12">')
            .append('<input type="text" class="datepicker">')
            .append('<label>Date of wrapping</label>')
        );

    const loader = $('<div class="progress"><div class="indeterminate"></div></div>')
        .hide();

    const action = $('<div class="section">')
        .append(
            $('<a class="btn">wrap-a-chikin<i class="material-icons right">send</i></a>')
            .click(async () => {
                loader.show();
                $('.btn').addClass("disabled");

                const req = {
                    bandId: $('select').val(),
                    wrapDate: $('.datepicker').val(),
                    weight: $('#weight').val(),
                };

                try {
                    const chikinId = await wrapAChikin(req);
                    printLabel(chikinId);
                } finally {
                    loader.hide();
                    $('#weight').val('');
                    $('.btn').removeClass('disabled');
                }
            })
        );

    block
        .append(
            $('<div class="input-field col s12">')
            .append('<input type="text" inputmode="decimal" id="weight">')
            .append('<label>weight (g)</label>')
        )
        .append(
            $('<div class="input-field col s12">')
            .append(action)
            .append(loader)
        )
    ;
    appbody.append(block);

    getBandz().then(bandz => {
        $('select').append(bandz.map(band => `<option value="${band.id}">${band.name}</option>`));
        $('select').formSelect();
    });

    $('select').formSelect();
    $('.datepicker').datepicker({setDefaultDate: true, defaultDate: new Date()});
});