Business/NickelBox
2
0
Fork 0
Code Issues 7 Pull Requests Releases Wiki Activity

Implement basic sale screen add/remove/qty/total JavaScript

Browse Source
This commit is contained in:
Skylar Ittner 2018-04-12 01:43:26 -06:00
parent eba463192f
commit 2ddeb1347a
4 changed files with 181 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pages.php
View File

@ -11,6 +11,14 @@ define("PAGES", [
"navbar" => true,
"icon" => "fas fa-home"
],
"pos" => [
"title" => "point of sale",
"navbar" => true,
"icon" => "far fa-money-bill-alt",
"scripts" => [
"static/js/pos.js",
]
],
"404" => [
"title" => "404 error"
]

73
pages/pos.php Normal file
View File

@ -0,0 +1,73 @@
<?php
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
?>
<div class="row">
<div class="col-12 col-md-6">
<div class="card d-block d-md-none mb-2">
<div class="display-4 p-3 text-center">$<span class="grand-total">236.32</span></div>
</div>
<div class="card d-flex">
<div class="card-header p-1">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-barcode"></i></span>
</div>
<input type="text" class="form-control" id="barcode" placeholder="<?php lang("barcode"); ?>" />
<div class="input-group-append">
<button class="btn btn-link" type="button"><i class="fas fa-plus"></i></button>
</div>
</div>
</div>
<div>
<div class="list-group" id="pos-lines-box">
<?php
for ($i = 0; $i < 5; $i++) {
?>
<div class="list-group-item">
<div class="d-flex w-100 justify-content-between mb-2">
<h5 class="item-name">
Cool Widget
</h5>
<h5>
<small class="item-code">659321</small>
<span class="badge badge-light">
$<span class="line-total">10.23</span>
</span>
</h5>
</div>
<div class="d-inline-flex">
<div class="input-group input-group-sm qty-control">
<div class="input-group-prepend">
<span class="input-group-text mx-0 px-0"><b>$</b></span>
</div>
<input type="number" class="form-control item-price" value="10.23"/>
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-times"></i></span>
<button class="btn btn-red qty-minus" type="button"><i class="fas fa-trash"></i></button>
</div>
<input type="number" class="form-control item-qty" value="1" />
<div class="input-group-append">
<button class="btn btn-light-green qty-plus" type="button"><i class="fas fa-plus"></i></button>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card d-none d-md-block">
<div class="display-4 p-3 text-center">$<span class="grand-total">236.32</span></div>
</div>
</div>
</div>

14
static/css/app.css
View File

@ -48,3 +48,17 @@ body {
margin-top: 10em;
text-align: center;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
#pos-lines-box {
max-height: calc(100vh - 200px);
overflow-y: scroll;
}

86
static/js/pos.js Normal file
View File

@ -0,0 +1,86 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
function addItem(name, code, price) {
if ($(".list-group-item[data-code='" + code + "']").length) {
updateQty($(".list-group-item[data-code='" + code + "']").find(".qty-plus"), 1);
return;
}
$("#pos-lines-box").append('<div class="list-group-item" data-code="' + code + '">'
+ '<div class="d-flex w-100 justify-content-between mb-2">'
+ '<h5 class="item-name">'
+ name
+ '</h5>'
+ '<h5>'
+ '<small class="item-code">' + code + '</small>'
+ '<span class="badge badge-light">'
+ '$<span class="line-total">'
+ price
+ '</span>'
+ '</span>'
+ '</h5>'
+ '</div>'
+ '<div class="d-inline-flex">'
+ '<div class="input-group input-group-sm qty-control">'
+ '<div class="input-group-prepend">'
+ '<span class="input-group-text mx-0 px-0"><b>$</b></span>'
+ '</div>'
+ '<input type="number" class="form-control item-price" value="' + price + '"/>'
+ '<div class="input-group-prepend">'
+ '<span class="input-group-text"><i class="fas fa-times"></i></span>'
+ '<button class="btn btn-red qty-minus" type="button"><i class="fas fa-trash"></i></button>'
+ '</div>'
+ '<input type="number" class="form-control item-qty" value="1" />'
+ '<div class="input-group-append">'
+ '<button class="btn btn-light-green qty-plus" type="button"><i class="fas fa-plus"></i></button>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>');
}
function recalculate() {
var total = 0.0;
$("#pos-lines-box .list-group-item").each(function () {
var each = $(".item-price", this).val() * 1.0;
var qty = $(".item-qty", this).val() * 1.0;
var line = each * qty;
$(".line-total", this).text(line.toFixed(2));
$(".item-price", this).val(each.toFixed(2));
total += line;
});
$(".grand-total").text(total.toFixed(2));
}
function updateQty(btn, diff) {
var qtybox = $(btn).parent().parent().find(".item-qty");
var qty = parseInt(qtybox.val());
qty += diff;
if (qty > 0) {
qtybox.val(qty);
var minbtn = $(btn).parent().parent().find(".qty-minus");
if (qty == 1) {
minbtn.html("<i class=\"fas fa-trash\"></i>");
} else {
minbtn.html("<i class=\"fas fa-minus\"></i>");
}
} else {
qtybox.closest(".list-group-item").remove();
}
recalculate();
}
$("#pos-lines-box").on("click", ".qty-minus", function () {
updateQty(this, -1);
});
$("#pos-lines-box").on("click", ".qty-plus", function () {
updateQty(this, 1);
});
$("#pos-lines-box").on("change", ".item-qty,.item-price", function () {
recalculate();
});