Add item picker grid

action.php

@@ -278,6 +278,35 @@ END;
             }
         }
 
+        $items = (count($items) > 0 ? $items : false);
+        exit(json_encode(["status" => "OK", "items" => $items]));
+    case "getgriditems":
+        header("Content-Type: application/json");
+        $items = $binstack->select('items', [
+            'itemid (id)', 'name', 'price', 'code1', 'code2'
+                ], [
+            'AND' => ['price[!]' => null, 'price[!]' => 0]
+        ]);
+
+        if (!empty($VARS['customer']) && $database->has('customers', ['customerid' => $VARS['customer']])) {
+            for ($n = 0; $n < count($items); $n++) {
+                $i = $items[$n];
+                if ($database->has('customer_pricing', ['AND' => ['itemid' => $i['id'], 'customerid' => $VARS['customer']]])) {
+                    $items[$n]['price'] = $database->get('customer_pricing', 'price', ['AND' => ['itemid' => $i['id'], 'customerid' => $VARS['customer']]]);
+                }
+            }
+        }
+
+        for ($n = 0; $n < count($items); $n++) {
+            if ($items[$n]['code1'] != "") {
+                $items[$n]['code'] = $items[$n]["code1"];
+            } else if ($items[$n]['code1'] == "" && $items[$n]['code1'] != "") {
+                $items[$n]['code'] = $items[$n]["code2"];
+            } else if (code == "") {
+                $items[$n]['code'] = "---";
+            }
+        }
+
         $items = (count($items) > 0 ? $items : false);
         exit(json_encode(["status" => "OK", "items" => $items]));
     case "customersearch":

lang/en_us.php

@@ -104,5 +104,6 @@ define("STRINGS", [
     "all" => "All",
     "date range" => "Date Range",
     "start" => "Start",
-    "end" => "End"
+    "end" => "End",
+    "grid view" => "Grid view",
 ]);

pages.php

@@ -23,6 +23,7 @@ define("PAGES", [
             "static/js/bsalert.js",
             "static/js/pos_items.js",
             "static/js/pos_customer.js",
+            "static/js/pos_gridview.js",
             "static/js/pos_payment.js",
             "static/js/pos_finish.js",
             "static/js/pos.js",

pages/pos.php

@@ -13,6 +13,7 @@ if (isset($_GET['switch']) || !isset($_SESSION['register']) || !$database->has('
     require_once __DIR__ . "/../lib/chooseregister.php";
 } else {
     $register = $database->get('registers', ['registerid (id)', 'registername (name)'], ['registerid' => $_SESSION['register']]);
+    $griditems = $binstack->select('items', ['itemid (id)', 'name', 'price', 'code1', 'code2'], ['AND' => ['price[!]' => null, 'price[!]' => 0]]);
     ?>
     <div class="modal fade" tabindex="-1" role="dialog" id="receiptmodal">
         <div class="modal-dialog" role="document">
@@ -67,13 +68,25 @@ if (isset($_GET['switch']) || !isset($_SESSION['register']) || !$database->has('
                 <div class="card-header p-1">
                     <div class="input-group">
                         <div class="input-group-prepend">
-                            <span class="input-group-text px-2"><i class="fas fa-barcode"></i></span>
+                            <span class="btn btn-default" id="gridviewbtn" title="<?php lang("grid view"); ?>"><i class="fas fa-th fa-fw"></i></span>
                         </div>
+                        <?php
+                        if (isset($_SESSION['mobile'])) {
+                            ?>
+                            <div class="input-group-prepend">
+                                <span class="btn btn-default" onclick="scancode('#barcode'); mobilecode = true;">
+                                    <i class="fas fa-barcode fa-fw"></i>
+                                </span>
+                            </div>
+                        <?php } ?>
                         <input type="text" class="form-control" id="barcode" placeholder="<?php lang("barcode or search"); ?>" />
                         <div class="input-group-append">
                             <button class="btn btn-link" type="button" id="barcodebtn"><i class="fas fa-search"></i></button>
                         </div>
                     </div>
+                </div>
+                <div class="d-none justify-content-around flex-wrap" id="gridview">
+
                 </div>
                 <div>
                     <div class="list-group list-group-flush" id="pos-lines-box">

static/css/pos.css

@@ -22,6 +22,10 @@ input[type="number"] {
     cursor: pointer;
 }
 
+.gridview-itembtn {
+    cursor: pointer;
+}
+
 #receiptframe {
     height: 50vh;
     border: 0;

static/js/pos_customer.js

@@ -71,4 +71,5 @@ $("#customerselection").on("click", ".list-group-item.customer", function () {
     $("#customerbtnlabel").text(customername);
     console.log(customername);
     $("#customermodal").modal('hide');
+    loadGridView();
 });

static/js/pos_gridview.js

@@ -0,0 +1,53 @@
+/*
+ * 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 loadGridView() {
+    if ($("#gridview").hasClass("d-flex")) {
+        $.get("action.php", {
+            action: "getgriditems",
+            customer: customerid
+        }, function (data) {
+            $("#gridview").html("");
+            for (var i = 0; i < data['items'].length; i++) {
+                var itemid = data['items'][i]['id'];
+                var price = data['items'][i]['price'];
+                var name = data['items'][i]['name'];
+                var code = data['items'][i]['code'];
+                var codeicon = "";
+                if (code != "") {
+                    codeicon = '<i class="fas fa-barcode"></i> ';
+                }
+                var html = '<div class="card p-2 text-center m-1 gridview-itembtn" data-itemid="' + itemid + '" data-price="' + price + '" data-name="' + name + '" data-code="' + code + '">'
+                        + '<span class="font-weight-bold">' + name + '</span>'
+                        + '<span>'
+                        + codeicon + code + "<br />"
+                        + '$' + price
+                        + '</span>'
+                        + '</div>';
+                $("#gridview").append(html);
+            }
+        });
+    }
+}
+
+$("#gridview").on("click", ".gridview-itembtn", function () {
+    var name = $(this).data("name");
+    var code = $(this).data("code");
+    var price = $(this).data("price");
+    var itemid = $(this).data("itemid");
+    addItem(name, code, price, itemid);
+});
+
+$("#gridviewbtn").click(function () {
+    if ($("#gridview").hasClass("d-flex")) {
+        $("#gridview").addClass("d-none");
+        $("#gridview").removeClass("d-flex");
+    } else {
+        $("#gridview").addClass("d-flex");
+        $("#gridview").removeClass("d-none");
+        loadGridView();
+    }
+});