From 747c9cf771b6d38b7095c51ccd4e8e8f9d7c51ee Mon Sep 17 00:00:00 2001
From: mikhailkusuma <whatxwrong@gmail.com>
Date: Mon, 19 Feb 2024 20:58:45 +0700
Subject: [PATCH] Save data order to Local Storage

---
 resources/views/pages/Kasir/js.blade.php      | 310 ++++++++++++------
 .../views/pages/Kasir/transaksi.blade.php     |   5 +-
 2 files changed, 213 insertions(+), 102 deletions(-)

diff --git a/resources/views/pages/Kasir/js.blade.php b/resources/views/pages/Kasir/js.blade.php
index 6d11623..0ccac40 100644
--- a/resources/views/pages/Kasir/js.blade.php
+++ b/resources/views/pages/Kasir/js.blade.php
@@ -16,6 +16,8 @@
         })
     </script>
     <script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>
+
+    <!-- Action for a table -->
     <script>
         $(document).ready(function() {
             $('#tabelku').DataTable({
@@ -67,6 +69,8 @@
             })
         })
     </script>
+
+    <!-- Action Print -->
     <script>
         function printDapurTigaKali(id) {
             var url = "{{ route('transaksi.printDapurTigaKali', '') }}/" + id + '?print=true'
@@ -89,6 +93,7 @@
             location.reload(true);
         }
     </script>
+
     <script>
         //  set interval waktu pesanan
         function showTime() {
@@ -187,26 +192,26 @@
                     }
 
                     table.rows[index].cells[0].innerHTML = `
-                    <td>
-                        ${params.nama_produk}
-                        <br>
-                        ${(diskonSatuan > 0) ? '<small class="text-primary"><s>Rp. ' + (harga * qty) + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + totalLama + '</small>'}
-                        <div class="input-group input-group-sm mt-1">
-                            <input type="text" name="keterangan_satuan" data-keterangan="" class="form-control rounded-3" placeholder="Keterangan.." value='${paketFreenyaini}'>
-                        </div>
-                    </td>
+                        <td>
+                            ${params.nama_produk}
+                            <br>
+                            ${(diskonSatuan > 0) ? '<small class="text-primary"><s>Rp. ' + (harga * qty) + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + totalLama + '</small>'}
+                            <div class="input-group input-group-sm mt-1">
+                                <input type="text" name="keterangan_satuan" data-keterangan="" class="form-control rounded-3" placeholder="Keterangan.." value='${paketFreenyaini}'>
+                            </div>
+                        </td>
                     `;
                 } else {
                     table.rows[index].cells[0].innerHTML = `
-                <td>
-                    ${params.nama_produk}
-                    <br>
-                    ${(diskonSatuan > 0) ? '<small class="text-primary"><s>Rp. ' + (harga * qty) + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + totalLama + '</small>'}
-                    <div class="input-group input-group-sm mt-1">
-                        <input type="text" name="keterangan_satuan" data-keterangan="" class="form-control rounded-3" placeholder="Keterangan..">
-                    </div>
-                </td>
-                `;
+                        <td>
+                            ${params.nama_produk}
+                            <br>
+                            ${(diskonSatuan > 0) ? '<small class="text-primary"><s>Rp. ' + (harga * qty) + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + totalLama + '</small>'}
+                            <div class="input-group input-group-sm mt-1">
+                                <input type="text" name="keterangan_satuan" data-keterangan="" class="form-control rounded-3" placeholder="Keterangan..">
+                            </div>
+                        </td>
+                    `;
                 }
 
                 table.rows[index].cells[1].innerHTML = `
@@ -252,80 +257,80 @@
                         paketFreenyaini = paketFreenya.join(', ');
                     }
                     $('#tbody-order-menus').append(`
-                <tr id="row-${params.id}" data-id="${params.id}" data-row-id="${globalId}" data-nama="${params.nama_produk}" data-harga="${params.harga_produk}" data-qty="1" data-diskon-satuan="0" data-total="${params.harga_produk}">
-                    <td>
-                        ${params.nama_produk}
-                        <br>
-                        <small class="text-primary">Rp. ${params.harga_produk}</small>
-                        <div class="input-group input-group-sm mt-1">
-                            <input type="text" name="keterangan_satuan" class="form-control rounded-3" data-keterangan="${paketFreenyaini}" placeholder="Keterangan.." value="${paketFreenyaini}">
-                        </div>
-                    </td>
-                    <td class="text-center">
-                        <div class="input-group input-group-sm">
-                            <span class="input-group-append">
-                                <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${globalId}, '${params.nama_produk}')"><b>-</b></button>
-                            </span>
-                            <input type="text" name="bayar" class="form-control rounded-3" readonly value="${menuQty}">
-                            <span class="input-group-append">
-                                <button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${globalId}, '${params.nama_produk}')">+</button>
-                            </span>
-                        </div>
-                    <select name="status_pesanan_dinein" id="status_pesanan_dinein" class="custom-select-mystyle form-control-border">
-                        <option value="2" selected>Dine In</option>
-                        <option value="0">Take Away</option>
-                    </select>
-                    </td>
-                    <td class="text-center">
-                        <div class="input-group input-group-sm">
-                            <input type="number" name="diskon_satuan" oninput="inputNum(this)" class="form-control rounded-3" value="0" onkeyup="diskonSatuanMenu(${globalId}, '${params.nama_produk}', this.value)">
-                        </div>
-                    </td>
-                    <td class="text-center">
-                        <button class="btn btn-danger btn-sm" onclick="deleteMenu(${globalId})">
-                            <i class="fas fa-trash"></i>
-                        </button>
-                    </td>
-                </tr>
-            `);
+                        <tr id="row-${params.id}" data-id="${params.id}" data-row-id="${globalId}" data-nama="${params.nama_produk}" data-harga="${params.harga_produk}" data-qty="1" data-diskon-satuan="0" data-total="${params.harga_produk}">
+                            <td>
+                                ${params.nama_produk}
+                                <br>
+                                <small class="text-primary">Rp. ${params.harga_produk}</small>
+                                <div class="input-group input-group-sm mt-1">
+                                    <input type="text" name="keterangan_satuan" class="form-control rounded-3" data-keterangan="${paketFreenyaini}" placeholder="Keterangan.." value="${paketFreenyaini}">
+                                </div>
+                            </td>
+                            <td class="text-center">
+                                <div class="input-group input-group-sm">
+                                    <span class="input-group-append">
+                                        <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${globalId}, '${params.nama_produk}')"><b>-</b></button>
+                                    </span>
+                                    <input type="text" name="bayar" class="form-control rounded-3" readonly value="${menuQty}">
+                                    <span class="input-group-append">
+                                        <button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${globalId}, '${params.nama_produk}')">+</button>
+                                    </span>
+                                </div>
+                            <select name="status_pesanan_dinein" id="status_pesanan_dinein" class="custom-select-mystyle form-control-border">
+                                <option value="2" selected>Dine In</option>
+                                <option value="0">Take Away</option>
+                            </select>
+                            </td>
+                            <td class="text-center">
+                                <div class="input-group input-group-sm">
+                                    <input type="number" name="diskon_satuan" oninput="inputNum(this)" class="form-control rounded-3" value="0" onkeyup="diskonSatuanMenu(${globalId}, '${params.nama_produk}', this.value)">
+                                </div>
+                            </td>
+                            <td class="text-center">
+                                <button class="btn btn-danger btn-sm" onclick="deleteMenu(${globalId})">
+                                    <i class="fas fa-trash"></i>
+                                </button>
+                            </td>
+                        </tr>
+                    `);
                 } else {
                     $('#tbody-order-menus').append(`
-                <tr id="row-${params.id}" data-id="${params.id}" data-row-id="${globalId}" data-nama="${params.nama_produk}" data-harga="${params.harga_produk}" data-qty="1" data-diskon-satuan="0" data-total="${params.harga_produk}">
-                    <td>
-                        ${params.nama_produk}
-                        <br>
-                        <small class="text-primary">Rp. ${params.harga_produk}</small>
-                        <div class="input-group input-group-sm mt-1">
-                            <input type="text" name="keterangan_satuan" data-keterangan="" class="form-control rounded-3" placeholder="Keterangan..">
-                        </div>
-                    </td>
-                    <td class="text-center">
-                        <div class="input-group input-group-sm">
-                            <span class="input-group-append">
-                                <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${globalId}, '${params.nama_produk}')"><b>-</b></button>
-                            </span>
-                            <input type="text" name="bayar" class="form-control rounded-3" readonly value="${menuQty}">
-                            <span class="input-group-append">
-                                <button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${globalId}, '${params.nama_produk}')">+</button>
-                            </span>
-                        </div>
-                    <select name="status_pesanan_dinein" id="status_pesanan_dinein" class="custom-select-mystyle form-control-border">
-                        <option value="2" selected>Dine In</option>
-                        <option value="0">Take Away</option>
-                    </select>
-                    </td>
-                    <td class="text-center">
-                        <div class="input-group input-group-sm">
-                            <input type="number" name="diskon_satuan" oninput="inputNum(this)" class="form-control rounded-3" value="0" onkeyup="diskonSatuanMenu(${globalId}, '${params.nama_produk}', this.value)">
-                        </div>
-                    </td>
-                    <td class="text-center">
-                        <button class="btn btn-danger btn-sm" onclick="deleteMenu(${globalId})">
-                            <i class="fas fa-trash"></i>
-                        </button>
-                    </td>
-                </tr>
-            `);
+                        <tr id="row-${params.id}" data-id="${params.id}" data-row-id="${globalId}" data-nama="${params.nama_produk}" data-harga="${params.harga_produk}" data-qty="1" data-diskon-satuan="0" data-total="${params.harga_produk}">
+                            <td>
+                                ${params.nama_produk}
+                                <br>
+                                <small class="text-primary">Rp. ${params.harga_produk}</small>
+                                <div class="input-group input-group-sm mt-1">
+                                    <input type="text" name="keterangan_satuan" data-keterangan="" class="form-control rounded-3" placeholder="Keterangan..">
+                                </div>
+                            </td>
+                            <td class="text-center">
+                                <div class="input-group input-group-sm">
+                                    <span class="input-group-append">
+                                        <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${globalId}, '${params.nama_produk}')"><b>-</b></button>
+                                    </span>
+                                    <input type="text" name="bayar" class="form-control rounded-3" readonly value="${menuQty}">
+                                    <span class="input-group-append">
+                                        <button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${globalId}, '${params.nama_produk}')">+</button>
+                                    </span>
+                                </div>
+                            <select name="status_pesanan_dinein" id="status_pesanan_dinein" class="custom-select-mystyle form-control-border">
+                                <option value="2" selected>Dine In</option>
+                                <option value="0">Take Away</option>
+                            </select>
+                            </td>
+                            <td class="text-center">
+                                <div class="input-group input-group-sm">
+                                    <input type="number" name="diskon_satuan" oninput="inputNum(this)" class="form-control rounded-3" value="0" onkeyup="diskonSatuanMenu(${globalId}, '${params.nama_produk}', this.value)">
+                                </div>
+                            </td>
+                            <td class="text-center">
+                                <button class="btn btn-danger btn-sm" onclick="deleteMenu(${globalId})">
+                                    <i class="fas fa-trash"></i>
+                                </button>
+                            </td>
+                        </tr>
+                    `);
                 }
 
                 calculateTotal();
@@ -478,15 +483,15 @@
                 table.rows[index].setAttribute('data-total', totalLama);
 
                 table.rows[index].cells[0].innerHTML = `
-                <td>
-                    ${nama_produk}
-                    <br>
-                    ${(diskonSatuan > 0) ? '<small class="text-primary"><s>Rp. ' + (harga * qty) + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + totalLama + '</small>'}
-                    <div class="input-group input-group-sm mt-1">
-                        <input type="text" name="keterangan_satuan" data-keterangan="${valueKeterangan}" value="${valueKeterangan}" class="form-control rounded-3" placeholder="Keterangan..">
-                    </div>
-                </td>
-            `;
+                    <td>
+                        ${nama_produk}
+                        <br>
+                        ${(diskonSatuan > 0) ? '<small class="text-primary"><s>Rp. ' + (harga * qty) + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + totalLama + '</small>'}
+                        <div class="input-group input-group-sm mt-1">
+                            <input type="text" name="keterangan_satuan" data-keterangan="${valueKeterangan}" value="${valueKeterangan}" class="form-control rounded-3" placeholder="Keterangan..">
+                        </div>
+                    </td>
+                `;
 
                 table.rows[index].cells[1].innerHTML = `
                     <td class="text-center">
@@ -725,7 +730,7 @@
                     document.getElementById('pesan-bayar-tunai').disabled = false;
                     return false;
                 }
-
+                
                 var data = {
                     _token: "{{ csrf_token() }}",
                     orderCode: "{{ $orderCode }}",
@@ -1113,3 +1118,110 @@
             }
         }
     </script>
+
+    <!-- Action save to storage -->
+    <script>
+        function OrderStorage() {
+            var table = document.getElementById("order-menus");
+            var orderMenus = [];
+
+            for (var i = 1, row; row = table.rows[i]; i++) {
+                var id = row.getAttribute('data-id');
+                var nama = row.getAttribute('data-nama');
+                var qty = row.getAttribute('data-qty');
+                var diskonSatuan = row.getAttribute('data-diskon-satuan');
+                var harga = row.getAttribute('data-harga');
+                var total = row.getAttribute('data-total');
+                if (diskonSatuan != 0 && diskonSatuan != null && diskonSatuan != undefined) {
+                    total = total - (total * (diskonSatuan / 100));
+                } else {
+                    total = total
+                }
+
+                if (id != null || qty != null || total != null) {
+                    orderMenus.push({
+                        id: id,
+                        nama: nama,
+                        qty: qty,
+                        diskonSatuan: diskonSatuan,
+                        harga: harga,
+                        total: total,
+                        keterangan: document.getElementsByName('keterangan_satuan')[i - 1].value,
+                        status_pesanan_dinein: document.getElementsByName('status_pesanan_dinein')[i - 1].value
+                    });
+                }
+            }
+
+            let json =  JSON.stringify({
+                name: 'Data Pesanan',
+                nama_pemesan: document.getElementsByName('nama-pemesan')[0].value,
+                nomor_pemesan: document.getElementsByName('nomor-pemesan')[0].value,
+                nomor_meja: document.getElementsByName('nomor-meja')[0].value,
+                keterangan_pesanan: document.getElementsByName('keterangan-pesanan')[0].value,
+                orderMenus
+            });
+
+            localStorage.setItem('OrderStorage', json);
+        }
+        
+        function showOrderStorage(){
+            let data = JSON.parse(localStorage.OrderStorage);
+
+            document.getElementsByName('nama-pemesan')[0].value = data.nama_pemesan,
+            document.getElementsByName('nomor-pemesan')[0].value = data.nomor_pemesan,
+            document.getElementsByName('nomor-meja')[0].value = data.nomor_meja,
+            document.getElementsByName('keterangan-pesanan')[0].value = data.keterangan_pesanan,
+
+            console.log(data);
+
+            data.orderMenus.forEach((i, key) => {
+                globalId++;
+
+                $('#tbody-order-menus').append(`
+                    <tr id="row-${i.id}" data-id="${i.id}" data-row-id="${globalId}" data-nama="${i.nama}" data-harga="${i.harga}" data-qty="${i.qty}" data-diskon-satuan="${i.diskonSatuan}" data-total="${i.harga * i.qty}">
+                        <td>
+                            ${i.nama}
+                            <br>
+                            ${(parseInt(i.diskonSatuan) > 0) ? '<small class="text-primary"><s>Rp. ' + (i.harga * i.qty) + '</s></small> | <small class="text-danger">Rp. ' + ((i.harga * i.qty) - ((i.harga * i.qty) * (i.diskonSatuan / 100))) + '</small>' : '<small class="text-primary">Rp. ' + (i.harga * i.qty) + '</small>'}
+                            <div class="input-group input-group-sm mt-1">
+                                <input type="text" name="keterangan_satuan" class="form-control rounded-3" data-keterangan="${i.keterangan}" placeholder="Keterangan.." value="${i.keterangan}">
+                            </div>
+                        </td>
+                        <td class="text-center">
+                            <div class="input-group input-group-sm">
+                                <span class="input-group-append">
+                                    <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${globalId}, '${i.nama}')"><b>-</b></button>
+                                </span>
+                                <input type="text" name="bayar" class="form-control rounded-3" readonly value="${i.qty}">
+                                <span class="input-group-append">
+                                    <button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${globalId}, '${i.nama}')">+</button>
+                                </span>
+                            </div>
+                        <select name="status_pesanan_dinein" id="status_pesanan_dinein" class="custom-select-mystyle form-control-border">
+                            <option value="2" ${(i.status_pesanan_dinein == 2) ? 'selected' : ''}>Dine In</option>
+                            <option value="0" ${(i.status_pesanan_dinein == 0) ? 'selected' : ''}>Take Away</option>
+                        </select>
+                        </td>
+                        <td class="text-center">
+                            <div class="input-group input-group-sm">
+                                <input type="number" name="diskon_satuan" oninput="inputNum(this)" class="form-control rounded-3" value="${i.diskonSatuan}" onkeyup="diskonSatuanMenu(${globalId}, '${i.nama}', this.value)">
+                            </div>
+                        </td>
+                        <td class="text-center">
+                            <button class="btn btn-danger btn-sm" onclick="deleteMenu(${globalId})">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
+                `);
+            });
+
+            calculateTotal();
+        }
+
+        showOrderStorage();
+
+        // show time every second
+        setInterval(OrderStorage, 1000);
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/pages/Kasir/transaksi.blade.php b/resources/views/pages/Kasir/transaksi.blade.php
index 3b0de96..fd3beeb 100644
--- a/resources/views/pages/Kasir/transaksi.blade.php
+++ b/resources/views/pages/Kasir/transaksi.blade.php
@@ -581,11 +581,10 @@
             -webkit-appearance: none;
             -moz-appearance: none;
             appearance: none;
-            background-color: cyan;
+            background-color: white;
+            margin-top: 8px;
         }
     </style>
 @endpush
 
 @include('pages.Kasir.js')
-
-@endpush