marek
/
ladabutik-inventory
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added UI files to the repository

Browse Source
master
Davide Bongiovanni 5 years ago
commit 5d0a34d2ee
3 changed files with 293 additions and 0 deletions
Show Stats Download Patch File Download Diff File

179
static/script.js
Unescape View File

@ -0,0 +1,179 @@
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();
});

84
static/style.css
Unescape View File

@ -0,0 +1,84 @@
body {
margin: 0;
font-family: sans-serif;
}
h1 {
margin: 0;
text-align: center;
background: #353535;
color: #EEE;
font-size: 24px;
padding: 16px;
}
.filter-container {
text-align: center;
margin: 40px 0 20px 0;
}
#filter-textbox {
font-size: 18px;
padding: 6px;
}
table {
border-collapse: collapse;
}
tr:nth-child(even) {
background: #EEE;
}
tr.tr-selected {
background: #AAA;
}
th {
background: #353535;
color: #EEE;
padding: 6px;
}
th:not(:first-child) {
border-left: 1px #AAA solid;
}
td {
text-align: center;
padding: 6px;
}
td:not(:first-child) {
border-left: 1px #AAA solid;
}
#inventory-table {
width: 100%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.button {
cursor: pointer;
display: inline-block;
background: #353535;
color: #EEE;
width: 100px;
padding: 4px 0;
/* transition: all 0.2s ease; */
}
.button-confirm {
background: #65ae2d;
display: inline-block;
width: 40px;
margin: 0 3px;
}
.number-input {
width: 60px;
text-align: center;
font-size: 16px;
}

30
templates/inventory.html
Unescape View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ELAB Inventory</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<script src="{{ url_for('static', filename='script.js') }}"></script>
</head>
<body>
<h1>ELAB Inventory Manager</h1>
<div class="filter-container">
<input type="text" id="filter-textbox" placeholder="Filter">
</div>
<table id="inventory-table">
<tr>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th></th>
<th></th>
</tr>
</table>
</body>
</html>
Write Preview
Loading…
Cancel
Save