ladabutik-inventory/static/script.js

var focus_filter = true;
var data_filtered = [];
var current_selection = -1;
var is_editing = false;

data = []

function populate_table(data) {
    data.forEach(function(d) {
        var new_row = $('<tr id="inventory-item-' + d.id + '"></tr>');
        new_row.append($('<td id="item-name"></td>').text(d.name).css({'text-align':'left', 'width' : '50%'}));
        new_row.append($('<td id="item-price"></td>').text(d.price + " kr").css({'width' : '10%'}));
        new_row.append($('<td id="item-quantity"></td>').text(d.quantity).css({'width' : '10%'}));
        new_row.append($('<td id="item-recount"></td>').append($('<div class="button" onclick="recount(' + d.id + ')">Recount</div>')));
        new_row.append($('<td id="item-restock"></td>').append($('<div class="button" onclick="restock(' + d.id + ')">Restock</div>')));
        $('#inventory-table tr:last').after(new_row)
    });
}

function recount(id) {
    is_editing = true;
    var text = $('#inventory-item-' + id + ' > #item-quantity').text();
    $('#inventory-item-' + id + ' > #item-quantity').empty();
    $('#inventory-item-' + id + ' > #item-quantity').html('<input type="text" value="' + text + '" class="number-input">');
    $('#inventory-item-' + id + ' > #item-recount > div').text('✔');
    $('#inventory-item-' + id + ' > #item-recount > div').addClass('button-confirm');
    $('#inventory-item-' + id + ' > #item-recount > div').attr('onclick', 'recount_confirm(' + id + ',' + text + ')');
    $('#inventory-item-' + id + ' > #item-quantity > input').focus().select();
    $( document ).off('keydown');
    $( document ).on('keydown', function(e) {
        if (e.which == 13) { // Enter pressed
            recount_confirm(id, text);
        } else if (e.key == 'Escape') {
            $('#inventory-item-' + id + ' > #item-quantity > input').val('');
            recount_confirm(id, text);
        }
    });
}

function recount_confirm(id, previous_value) {
    is_editing = false;
    var quantity = $('#inventory-item-' + id + ' > #item-quantity > input').val();
    $('#inventory-item-' + id + ' > #item-recount > div').removeClass('button-confirm');
    $('#inventory-item-' + id + ' > #item-recount > div').text('Recount');
    $('#inventory-item-' + id + ' > #item-recount > div').attr('onclick', 'recount(' + id + ')')
    $('#inventory-item-' + id + ' > #item-quantity').empty();
   
    // If you got an ok:
    if (quantity.length > 0) {
        data = {};
        data['id'] = id;
        data['count'] = quantity;
        $('#inventory-item-' + id + ' > #item-quantity').text(quantity);
         $.post( "recount", data,  function( data ) {
            if(data=="ok"){
                //nothing on success
            }else{
                alert("Something went wrong :(");
                $('#inventory-item-' + id + ' > #item-quantity').text(previous_value);
            }
         });
        // TODO: Also refresh the 'data' array
    } else {
        $('#inventory-item-' + id + ' > #item-quantity').text(previous_value);
    }
    $( document ).off('keydown');
    $( document ).on('keydown', function(e) {
        default_keypress_handler(e);
    });
}

function restock(id) {
    is_editing = true;
    $('#inventory-item-' + id + ' > #item-restock > div').text('✔');
    $('#inventory-item-' + id + ' > #item-restock > div').addClass('button-confirm');
    $('#inventory-item-' + id + ' > #item-restock > div').attr('onclick', 'restock_confirm(' + id + ')');
    $('#inventory-item-' + id + ' > #item-restock > div').before('<input type="text" placeholder="Value" class="number-input">')
    $('#inventory-item-' + id + ' > #item-restock > input').focus();
    $( document ).off('keydown');
    $( document ).on('keydown', function(e) {
        if (e.which == 13) {
            restock_confirm(id);
        } else if (e.key == 'Escape') {
            $('#inventory-item-' + id + ' > #item-restock > input').val('');
            restock_confirm(id);
        }
    });
}

function restock_confirm(id) {
    is_editing = false;
    var quantity = $('#inventory-item-' + id + ' > #item-restock > input').val();
    $('#inventory-item-' + id + ' > #item-restock > input').remove();
    $('#inventory-item-' + id + ' > #item-restock > div').removeClass('button-confirm');
    $('#inventory-item-' + id + ' > #item-restock > div').text('Restock');
    $('#inventory-item-' + id + ' > #item-restock > div').attr('onclick', 'restock(' + id + ')');
   
    // If you got an ok:
    data = {};
    data['id'] = id;
    data['count'] = quantity;
    var previous_q = parseInt($('#inventory-item-' + id + ' > #item-quantity').text());
    if (quantity.length > 0) {
        $('#inventory-item-' + id + ' > #item-quantity').text(previous_q + parseInt(quantity));
        $.post( "restock", data,  function( data ) {
            if(data=="ok"){
                //nothing on success
            }else{
                alert("Something went wrong :(");
                $('#inventory-item-' + id + ' > #item-quantity').text(previous_q);
            }
        })
    } else {
        $('#inventory-item-' + id + ' > #item-quantity').text(previous_q);
    }
    $( document ).off('keydown');
    $( document ).on('keydown', function(e) {
        default_keypress_handler(e);
    });
}

function default_keypress_handler(e) {
    if (e.key == 'Escape') {
        if (focus_filter) {
            focus_filter =  false;
            $('#filter-textbox').blur();
            current_selection = 0;
            $('#inventory-item-' + data_filtered[current_selection].id).addClass('tr-selected');
        } else {
            focus_filter = true;
            $('#inventory-item-' + data_filtered[current_selection].id).removeClass('tr-selected');
            current_selection = -1;
            $('#filter-textbox').focus();
        }
    } else if (e.keyCode == 40) { // Down pressed
        if (current_selection + 1< data_filtered.length) {
            $('#inventory-item-' + data_filtered[current_selection].id).removeClass('tr-selected');
            current_selection += 1;
            $('#inventory-item-' + data_filtered[current_selection].id).addClass('tr-selected');
        }
    } else if (e.keyCode == 38) { // Up pressed
        if (current_selection > 0) {
            $('#inventory-item-' + data_filtered[current_selection].id).removeClass('tr-selected');
            current_selection -= 1;
            $('#inventory-item-' + data_filtered[current_selection].id).addClass('tr-selected');
        }
    } else if (e.which == 13) { // Enter pressed
        if (!focus_filter && !is_editing) {
            if (e.ctrlKey || e.shiftKey) {
                restock(data_filtered[current_selection].id);
            } else {
                recount(data_filtered[current_selection].id);
            }
        }
    }
}

$( document ).ready(function(){
    $.getJSON( "getdata", function( result ) {
        populate_table(result);
        data_filtered = result;
        data=result;
    });


    $('#filter-textbox').on('keyup', function() {
        data_filtered = []
        var filter_text = $('#filter-textbox').val();
        data.forEach(function(d){
            if (d.name.toLowerCase().includes(filter_text.toLowerCase())) {
                data_filtered.push(d);
            }
        });
        $('#inventory-table').empty();
        $('#inventory-table').append($('<tr><th>Description</th><th>Price</th><th>Quantity</th><th></th><th></th></tr>'));
        populate_table(data_filtered);
    });

    $( document ).on('keydown', function(e) {
        default_keypress_handler(e);
    });

    $('#filter-textbox').focus();
});