You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
180 lines
7.3 KiB
180 lines
7.3 KiB
var focus_filter = true;
|
|
var data_filtered = [];
|
|
var current_selection = -1;
|
|
var is_editing = false;
|
|
|
|
data = [
|
|
{
|
|
id : 1,
|
|
name : "Arduino",
|
|
price : 25,
|
|
quantity : 4
|
|
}, {
|
|
id : 2,
|
|
name : "Buck converter",
|
|
price : 30,
|
|
quantity : 6
|
|
}, {
|
|
id : 3,
|
|
name : "Line driver",
|
|
price : 10,
|
|
quantity : 12
|
|
}
|
|
]
|
|
|
|
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();
|
|
// TODO: Perform ajax to set new quantity
|
|
// If you got an ok:
|
|
if (quantity.length > 0) {
|
|
$('#inventory-item-' + id + ' > #item-quantity').text(quantity);
|
|
// 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 + ')');
|
|
// TODO: Perform ajax to send restock info
|
|
// If you got an ok:
|
|
var previous_q = parseInt($('#inventory-item-' + id + ' > #item-quantity').text());
|
|
if (quantity.length > 0) {
|
|
$('#inventory-item-' + id + ' > #item-quantity').text(previous_q + parseInt(quantity));
|
|
// TODO: Also refresh the 'data' array
|
|
} 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( "ajax/test.json", function( data ) {
|
|
populate_table(data);
|
|
data_filtered = data;
|
|
// });
|
|
|
|
$('#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();
|
|
});
|
|
|