chikinz/client/wrap.js

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

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

async function getBandz() {
    const uri = `${backend_api}/bandz`;
    const res = await $.ajax(uri, {headers: {Authorization: `Bearer ${token}`}});
//    if (res.statusCode !== 200) {
//        throw res;
//    }
    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;
}

async function authenticate(password) {
    const uri = `${backend_api}/toktok`;
    const res = await $.ajax(uri, {
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({password}),
    });
    return res;
}

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 disabled" id="send">wrap-a-chikin<i class="material-icons right">send</i></a>')
            .click(async () => {
                loader.show();
                $('#send').addClass("disabled");

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

                try {
                    const chikinId = await wrapAChikin(req);
                    M.toast({html: `Wrapped chikin ID ${chikinId}`});
                    printLabel(chikinId);
                } finally {
                    loader.hide();
                    $('#weight').val('');
                    $('#send').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();
        $('#send').removeClass("disabled");
    }).catch(xhr => {
        console.log(xhr);
        console.log('blarg');
        if (xhr.statusCode === 403) {
            M.toast({html: 'Authentication failed.'});
        }
    });

    const authBlock = $('<div id="authBlock">').hide()
        .append(
            $('<div class="input-field col s12">')
            .append('<input type="password" id="password">')
            .append('<label>password</label>')
        )
        .append(
            $('<div class="input-field col s12">').append(
                $('<a class="btn">authenticate</a>')
                .click(async () => {
                    const {token:tok} = await authenticate($('#password').val());
                    localStorage.setItem('token', tok);
                    token = tok;
                    $('#authBlock').hide();
                })
            )
        );

    appbody.append(authBlock);

    let tapped = 0;
    $('.page-footer').click(() => {
        tapped += 1;

        if (tapped >= 7) {
            tapped = 0;
            $('#authBlock').show();
        }
    });

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