From 5d0a34d2eeba4802187997e9534984969dfa4591 Mon Sep 17 00:00:00 2001
From: Davide Bongiovanni <davidebongiov@gmail.com>
Date: Mon, 1 Jul 2019 16:40:34 +0200
Subject: [PATCH] Added UI files to the repository

---
 static/script.js         | 179 +++++++++++++++++++++++++++++++++++++++
 static/style.css         |  84 ++++++++++++++++++
 templates/inventory.html |  30 +++++++
 3 files changed, 293 insertions(+)
 create mode 100644 static/script.js
 create mode 100644 static/style.css
 create mode 100644 templates/inventory.html

diff --git a/static/script.js b/static/script.js
new file mode 100644
index 0000000..7bf25b0
--- /dev/null
+++ b/static/script.js
@@ -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();
+});
+
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..98f344b
--- /dev/null
+++ b/static/style.css
@@ -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;
+}
\ No newline at end of file
diff --git a/templates/inventory.html b/templates/inventory.html
new file mode 100644
index 0000000..559fc4d
--- /dev/null
+++ b/templates/inventory.html
@@ -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>
\ No newline at end of file