fix bug add additional

main
zeldaababil19 2024-03-28 14:08:24 +07:00
parent 80d0860178
commit eaa90ebbe5
5 changed files with 245 additions and 50 deletions

View File

@ -724,7 +724,6 @@
timeOut: 2000 timeOut: 2000
}); });
// location.reload(); // location.reload();
// window.open(result.url, '_blank');
window.open(result.url, '_blank', window.open(result.url, '_blank',
"toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=900,height=600" "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=900,height=600"
); );

View File

@ -14,7 +14,8 @@
// adda nama menu to h5 wich id is menu-utama-yang-terpilih // adda nama menu to h5 wich id is menu-utama-yang-terpilih
document.getElementById('menu-utama-yang-terpilih').innerHTML = namaMenu; document.getElementById('menu-utama-yang-terpilih').innerHTML = namaMenu;
// add total harga menu to input with id total-harga-menu-ini // add total harga menu to input with id total-harga-menu-ini
document.getElementById('harga-menu-utama-yang-terpilih').innerHTML = totalHargaMenuIni; document.getElementById('harga-menu-utama-yang-terpilih').innerHTML = totalHargaMenuIni +
'     ';
// remove all li element in extra-menu-choised // remove all li element in extra-menu-choised
@ -25,13 +26,18 @@
const element = arrayExtraMenuChoised[index]; const element = arrayExtraMenuChoised[index];
console.log(element.parent); console.log(element.parent);
if (element.parent == globalId) { if (element.parent == globalId) {
htmlnyayaini = `<li> htmlnyayaini = `<li id="linyaygdihapus${element.id}-${globalId}">
<div class="row" style="justify-content: space-between;"> <div class="row" style="justify-content: space-between;">
<input type="hidden" id="the-id-extra-menu-choised${globalId}" value="${element.id}"> <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> <h5 id="the-menu-extra-menu-choised${globalId}">${element.nama_produk}</h5>
<h6 id="harga-extra-menu-choised${globalId}">${element.harga_produk}</h6> <div class="row" style="align-items:center;">
</div> <h6 id="harga-extra-menu-choised${globalId}" style="padding:0px;margin:0px">${element.harga_produk}</h6>
</li>`; <button type="button" class="btn btn-default btn-xs" style="margin-left:4px" onclick="deleteAdditionalExtraMenu(${element.id}, '${globalId}', '${element.harga_produk}')">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</li>`;
document.getElementById('extra-menu-choised').innerHTML += htmlnyayaini; document.getElementById('extra-menu-choised').innerHTML += htmlnyayaini;
} }
@ -41,11 +47,16 @@
function pesanExtra(params) { function pesanExtra(params) {
console.log(params); console.log(params);
jsonParams = JSON.stringify(params); jsonParams = JSON.stringify(params);
htmlnyayaini = `<li> htmlnyayaini = `<li id="linyaygdihapus${params.id}">
<div class="row" style="justify-content: space-between;"> <div class="row" style="justify-content: space-between;">
<input type="hidden" id="id-extra-menu-choised" value="${params.id}"> <input type="hidden" id="id-extra-menu-choised" value="${params.id}">
<h5 id="menu-extra-menu-choised">${params.nama_produk}</h5> <h5 id="menu-extra-menu-choised">${params.nama_produk}</h5>
<h6 id="harga-extra-menu-choised">${params.harga_produk}</h6> <div class="row" style="align-items:center;">
<h6 id="harga-extra-menu-choised" style="padding:0px;margin:0px">${params.harga_produk}</h6>
<button type="button" class="btn btn-default btn-xs" style="margin-left:4px" onclick="deleteAdditionalExtraMenu(${params.id})">
<i class="fas fa-trash"></i>
</button>
</div>
</div> </div>
</li>`; </li>`;
// get element by id // get element by id
@ -61,6 +72,14 @@
// get all li element in extraMenuChoised // get all li element in extraMenuChoised
var li = extraMenuChoised.getElementsByTagName('li'); var li = extraMenuChoised.getElementsByTagName('li');
// remove all li element in the-extra-menu-choised
document.getElementById('the-extra-menu-choised' + idTableRowExtra.value).innerHTML = '';
// remove all element in arrayExtraMenuChoised where parent is idTableRowExtra.value
arrayExtraMenuChoised = arrayExtraMenuChoised.filter(function(el) {
return el.parent !== idTableRowExtra.value;
});
// loop through all li element // loop through all li element
for (let i = 0; i < li.length; i++) { for (let i = 0; i < li.length; i++) {
// get id-extra-menu-choised element // get id-extra-menu-choised element
@ -74,12 +93,7 @@
<div class="row" style="justify-content: space-between;"> <div class="row" style="justify-content: space-between;">
<input type="hidden" id="the-id-extra-menu-choised${idTableRowExtra.value}" value="${idExtraMenuChoised.value}"> <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> <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>
<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> </div>
</li>`; </li>`;
document.getElementById('the-extra-menu-choised' + idTableRowExtra.value).innerHTML += htmlnyayaini; document.getElementById('the-extra-menu-choised' + idTableRowExtra.value).innerHTML += htmlnyayaini;
@ -133,12 +147,7 @@
<div class="row" style="justify-content: space-between;"> <div class="row" style="justify-content: space-between;">
<input type="hidden" id="the-id-extra-menu-choised${i.parent}" value="${i.id}"> <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> <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>
<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> </div>
</li> </li>
`); `);
@ -149,32 +158,40 @@
} }
loadAdditionalFromLocalStorage(); loadAdditionalFromLocalStorage();
function deleteAdditionalExtraMenu(id, parent, harga) { function deleteAdditionalExtraMenu(id, parent = null, harga = null) {
console.log(id); console.log(id + ' ' + parent + ' ' + harga);
// 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' if (parent == null) {
tableRowsNya.forEach(function(row) { var element = document.getElementById('linyaygdihapus' + id);
var rownya = row.getAttribute('data-row-id'); element.remove();
var dataTotal = row.getAttribute('data-total'); } else {
dataTotal = parseInt(dataTotal) - parseInt(harga); // console.log(id);
if (rownya == parent) { // // get index of arrayExtraMenuChoised
row.setAttribute('data-total', dataTotal); // var index = arrayExtraMenuChoised.findIndex(x => x.id == id);
document.getElementById('price' + parent).innerHTML = 'Rp. ' + dataTotal; // // remove element from arrayExtraMenuChoised
} // arrayExtraMenuChoised.splice(index, 1);
}); // get element by id
calculateTotal(); console.log('linyaygdihapus' + id + '-' + parent);
var element = document.getElementById('linyaygdihapus' + 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> </script>
@endpush @endpush

View File

@ -0,0 +1,180 @@
@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

View File

@ -1,5 +1,5 @@
<div class="modal fade" id="modal-add-extra"> <div class="modal fade" id="modal-add-extra">
<div class="modal-dialog modal-lg"> <div class="modal-dialog modal-xl">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h4 class="modal-title">Pilih Extra Topping</h4> <h4 class="modal-title">Pilih Extra Topping</h4>

View File

@ -150,7 +150,6 @@
</tr> </tr>
@php @php
$tampungid; $tampungid;
@endphp @endphp
@foreach ($pesanan->detailPesanan as $item2) @foreach ($pesanan->detailPesanan as $item2)
@if ($item2->id_parent !== null && $item2->id_parent == $item->id) @if ($item2->id_parent !== null && $item2->id_parent == $item->id)