martabak-grand/resources/views/pages/Kasir/js_baru_tmbl hapus di tabel...

181 lines
9.4 KiB
PHP

@push('scripts')
<script type="text/javascript">
$(document).ready(function() {
});
// create array to store all extra menu choised
var arrayExtraMenuChoised = [];
function setIdRowTable(globalId, namaMenu, totalHargaMenuIni) {
console.log(globalId);
console.log(namaMenu);
console.log(totalHargaMenuIni);
document.getElementById('id-table-row-extra').value = globalId;
// adda nama menu to h5 wich id is menu-utama-yang-terpilih
document.getElementById('menu-utama-yang-terpilih').innerHTML = namaMenu;
// add total harga menu to input with id total-harga-menu-ini
document.getElementById('harga-menu-utama-yang-terpilih').innerHTML = totalHargaMenuIni;
// remove all li element in extra-menu-choised
var extraMenuChoised = document.getElementById('extra-menu-choised');
extraMenuChoised.innerHTML = '';
for (let index = 0; index < arrayExtraMenuChoised.length; index++) {
const element = arrayExtraMenuChoised[index];
console.log(element.parent);
if (element.parent == globalId) {
htmlnyayaini = `<li>
<div class="row" style="justify-content: space-between;">
<input type="hidden" id="the-id-extra-menu-choised${globalId}" value="${element.id}">
<h5 id="the-menu-extra-menu-choised${globalId}">${element.nama_produk}</h5>
<h6 id="harga-extra-menu-choised${globalId}">${element.harga_produk}</h6>
</div>
</li>`;
document.getElementById('extra-menu-choised').innerHTML += htmlnyayaini;
}
}
}
function pesanExtra(params) {
console.log(params);
jsonParams = JSON.stringify(params);
htmlnyayaini = `<li>
<div class="row" style="justify-content: space-between;">
<input type="hidden" id="id-extra-menu-choised" value="${params.id}">
<h5 id="menu-extra-menu-choised">${params.nama_produk}</h5>
<h6 id="harga-extra-menu-choised">${params.harga_produk}</h6>
</div>
</li>`;
// get element by id
var extraMenuChoised = document.getElementById('extra-menu-choised');
// append htmlnyayaini to extraMenuChoised
extraMenuChoised.innerHTML += htmlnyayaini;
}
function simpanPesananExtra() {
var idTableRowExtra = document.getElementById('id-table-row-extra');
// get extra-menu-choised element
var extraMenuChoised = document.getElementById('extra-menu-choised');
// get all li element in extraMenuChoised
var li = extraMenuChoised.getElementsByTagName('li');
// loop through all li element
for (let i = 0; i < li.length; i++) {
// get id-extra-menu-choised element
var idExtraMenuChoised = li[i].getElementsByTagName('input')[0];
// get menu-extra-menu-choised element
var menuExtraMenuChoised = li[i].getElementsByTagName('h5')[0];
// get harga-extra-menu-choised element
var hargaExtraMenuChoised = li[i].getElementsByTagName('h6')[0];
htmlnyayaini = `<li style="margin:10px" id="linyaini${idExtraMenuChoised.value}${idTableRowExtra.value}">
<div class="row" style="justify-content: space-between;">
<input type="hidden" id="the-id-extra-menu-choised${idTableRowExtra.value}" value="${idExtraMenuChoised.value}">
<small id="the-menu-extra-menu-choised${idTableRowExtra.value}">${menuExtraMenuChoised.innerText}</small>
<div class="row">
<small id="the-harga-extra-menu-choised${idTableRowExtra.value}" style="margin: 0px;align-self: center;padding: 0px;">${hargaExtraMenuChoised.innerText}</small>
<button type="button" class="btn btn-default btn-xs" style="margin-left:4px">
<i class="fas fa-trash" onclick="deleteAdditionalExtraMenu(${idExtraMenuChoised.value}, '${idTableRowExtra.value}', '${hargaExtraMenuChoised.innerText}')"></i>
</button>
</div>
</div>
</li>`;
document.getElementById('the-extra-menu-choised' + idTableRowExtra.value).innerHTML += htmlnyayaini;
// push extra menu choised to extraMenuChoised array
arrayExtraMenuChoised.push({
parent: idTableRowExtra.value,
id: idExtraMenuChoised.value,
nama_produk: menuExtraMenuChoised.innerText,
harga_produk: hargaExtraMenuChoised.innerText
});
}
calculationMenuUtamaDenganExtraMenu();
// log extraMenuChoised
console.log(arrayExtraMenuChoised);
}
function calculationMenuUtamaDenganExtraMenu() {
for (let index = 0; index < arrayExtraMenuChoised.length; index++) {
const element = arrayExtraMenuChoised[index];
// Mendapatkan semua elemen <tr> dalam tabel dengan id 'tbody-order-menus'
var tableRowsNya = document.querySelectorAll('#tbody-order-menus tr');
// Iterasi melalui setiap elemen <tr> dan mencetak nilai atribut 'data-total'
tableRowsNya.forEach(function(row) {
var rownya = row.getAttribute('data-row-id');
var dataTotal = row.getAttribute('data-total');
dataTotal = parseInt(dataTotal) + parseInt(element.harga_produk);
if (rownya == element.parent) {
row.setAttribute('data-total', dataTotal);
document.getElementById('price' + element.parent).innerHTML = 'Rp. ' + dataTotal;
}
});
}
calculateTotal();
}
function loadAdditionalFromLocalStorage() {
var data = localStorage.getItem('AdditionalStorage');
if (data === null || data === undefined) {
return false;
}
data = JSON.parse(data);
arrayExtraMenuChoised = data.arrayExtraMenuChoised;
// console.log(arrayExtraMenuChoised);
arrayExtraMenuChoised.forEach((i, key) => {
$('#the-extra-menu-choised' + i.parent).append(`
<li style="margin:10px" id="linyaini${i.id}${i.parent}">
<div class="row" style="justify-content: space-between;">
<input type="hidden" id="the-id-extra-menu-choised${i.parent}" value="${i.id}">
<small id="the-menu-extra-menu-choised${i.parent}">${i.nama_produk}</small>
<div class="row">
<small id="the-harga-extra-menu-choised${i.parent}" style="margin: 0px;align-self: center;padding: 0px;">${i.harga_produk}</small>
<button type="button" class="btn btn-default btn-xs" style="margin-left:4px">
<i class="fas fa-trash" onclick="deleteAdditionalExtraMenu(${i.id}, '${i.parent}', '${i.harga_produk}')"></i>
</button>
</div>
</div>
</li>
`);
});
// set total extra menu
calculationMenuUtamaDenganExtraMenu();
}
loadAdditionalFromLocalStorage();
function deleteAdditionalExtraMenu(id, parent, harga) {
console.log(id);
// get index of arrayExtraMenuChoised
var index = arrayExtraMenuChoised.findIndex(x => x.id == id);
// remove element from arrayExtraMenuChoised
arrayExtraMenuChoised.splice(index, 1);
// get element by id
var element = document.getElementById('linyaini' + id + parent);
// remove element from DOM
console.log(element);
element.remove();
// recalculate total
// Mendapatkan semua elemen <tr> dalam tabel dengan id 'tbody-order-menus'
var tableRowsNya = document.querySelectorAll('#tbody-order-menus tr');
// Iterasi melalui setiap elemen <tr> dan mencetak nilai atribut 'data-total'
tableRowsNya.forEach(function(row) {
var rownya = row.getAttribute('data-row-id');
var dataTotal = row.getAttribute('data-total');
dataTotal = parseInt(dataTotal) - parseInt(harga);
if (rownya == parent) {
row.setAttribute('data-total', dataTotal);
document.getElementById('price' + parent).innerHTML = 'Rp. ' + dataTotal;
}
});
calculateTotal();
}
</script>
@endpush