wewmantap
/
resto-dhepot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

action button

auth
Zelda Ababil 2024-01-20 01:16:40 +07:00
parent 7e31d7bb0a
commit dbc080f447
2 changed files with 91 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
resources/views/pages/Kasir/transaksi.blade.php
View File

@ -52,23 +52,24 @@
<div class="nav flex-column nav-tabs h-100" id="vert-tabs-tab" <div class="nav flex-column nav-tabs h-100" id="vert-tabs-tab"
role="tablist" aria-orientation="vertical"> role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="vert-tabs-nasi-tab" <a class="nav-link vert-nav-content active"
data-toggle="pill" href="#vert-tabs-nasi" role="tab" id="vert-tabs-nasi-tab" data-toggle="pill"
href="#vert-tabs-nasi" role="tab"
aria-controls="vert-tabs-nasi" aria-selected="true">Nasi</a> aria-controls="vert-tabs-nasi" aria-selected="true">Nasi</a>
<a class="nav-link" id="vert-tabs-telur-tab" data-toggle="pill" <a class="nav-link vert-nav-content" id="vert-tabs-telur-tab"
href="#vert-tabs-telur" role="tab" data-toggle="pill" href="#vert-tabs-telur" role="tab"
aria-controls="vert-tabs-telur" aria-controls="vert-tabs-telur"
aria-selected="false">Telur</a> aria-selected="false">Telur</a>
<a class="nav-link" id="vert-tabs-sambel-tab" data-toggle="pill" <a class="nav-link vert-nav-content" id="vert-tabs-sambel-tab"
href="#vert-tabs-sambel" role="tab" data-toggle="pill" href="#vert-tabs-sambel" role="tab"
aria-controls="vert-tabs-sambel" aria-controls="vert-tabs-sambel"
aria-selected="false">Sambel</a> aria-selected="false">Sambel</a>
<a class="nav-link" id="vert-tabs-topping-tab" <a class="nav-link vert-nav-content" id="vert-tabs-topping-tab"
data-toggle="pill" href="#vert-tabs-topping" role="tab" data-toggle="pill" href="#vert-tabs-topping" role="tab"
aria-controls="vert-tabs-topping" aria-controls="vert-tabs-topping"
aria-selected="false">Topping</a> aria-selected="false">Topping</a>
<a class="nav-link" id="vert-tabs-free-tab" data-toggle="pill" <a class="nav-link vert-nav-content" id="vert-tabs-free-tab"
href="#vert-tabs-free" role="tab" data-toggle="pill" href="#vert-tabs-free" role="tab"
aria-controls="vert-tabs-free" aria-controls="vert-tabs-free"
aria-selected="false">Free</a> aria-selected="false">Free</a>
@ -96,15 +97,15 @@
<div class="col-8 col-sm-9" style="padding: 0px;"> <div class="col-8 col-sm-9" style="padding: 0px;">
<div class="card-body" style="height:700px;overflow-y:scroll;"> <div class="card-body" style="height:700px;overflow-y:scroll;">
<div class="tab-content" id="vert-tabs-tabContent"> <div class="tab-content" id="vert-tabs-tabContent">
<div class="tab-pane text-left fade show active" <div class="tab-pane vert-tab-content fade text-left show active"
id="vert-tabs-nasi" role="tabpanel" id="vert-tabs-nasi" role="tabpanel"
aria-labelledby="vert-tabs-nasi-tab"> aria-labelledby="vert-tabs-nasi-tab">
<div class="row"> <div class="row">
@foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot) @foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
@if ($kelompokKategoriPivot->produk->urutan == 1) @if ($kelompokKategoriPivot->produk->urutan == 1)
<div class="col-lg-4"> <div class="col-lg-4">
<div <div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} );changeTab('vert-tabs-telur')"
class="card card-primary card-outline"> class="card card-primary card-outline btn">
<div class="card-header"> <div class="card-header">
<h5 class="card-title m-0"> <h5 class="card-title m-0">
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }} {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
@ -118,12 +119,10 @@
{{ asset('assets/images/menu_image.jpeg') }} @endif {{ asset('assets/images/menu_image.jpeg') }} @endif
" "
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}"> alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
</div> </div>
<a class="btn btn-primary" <a class="btn btn-primary"
id="ordered-menus" id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">
onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih Pilih Paket
Paket
</a> </a>
</div> </div>
</div> </div>
@ -131,14 +130,15 @@
@endforeach @endforeach
</div> </div>
</div> </div>
<div class="tab-pane fade" id="vert-tabs-telur" <div class="tab-pane vert-tab-content"
role="tabpanel" aria-labelledby="vert-tabs-telur-tab"> id="vert-tabs-telur" role="tabpanel"
aria-labelledby="vert-tabs-telur-tab">
<div class="row"> <div class="row">
@foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot) @foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
@if ($kelompokKategoriPivot->produk->urutan == 2) @if ($kelompokKategoriPivot->produk->urutan == 2)
<div class="col-lg-4"> <div class="col-lg-4">
<div <div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} );changeTab('vert-tabs-sambel')"
class="card card-primary card-outline"> class="card card-primary card-outline btn">
<div class="card-header"> <div class="card-header">
<h5 class="card-title m-0"> <h5 class="card-title m-0">
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }} {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
@ -152,12 +152,10 @@
{{ asset('assets/images/menu_image.jpeg') }} @endif {{ asset('assets/images/menu_image.jpeg') }} @endif
" "
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}"> alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
</div> </div>
<a class="btn btn-primary" <a class="btn btn-primary"
id="ordered-menus" id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">
onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih Pilih Paket
Paket
</a> </a>
</div> </div>
</div> </div>
@ -165,15 +163,15 @@
@endforeach @endforeach
</div> </div>
</div> </div>
<div class="tab-pane fade" id="vert-tabs-sambel" <div class="tab-pane vert-tab-content"
role="tabpanel" id="vert-tabs-sambel" role="tabpanel"
aria-labelledby="vert-tabs-sambel-tab"> aria-labelledby="vert-tabs-sambel-tab">
<div class="row"> <div class="row">
@foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot) @foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
@if ($kelompokKategoriPivot->produk->urutan == 3) @if ($kelompokKategoriPivot->produk->urutan == 3)
<div class="col-lg-4"> <div class="col-lg-4">
<div <div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} );changeTab('vert-tabs-topping')"
class="card card-primary card-outline"> class="card card-primary card-outline btn">
<div class="card-header"> <div class="card-header">
<h5 class="card-title m-0"> <h5 class="card-title m-0">
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }} {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
@ -187,11 +185,9 @@
{{ asset('assets/images/menu_image.jpeg') }} @endif {{ asset('assets/images/menu_image.jpeg') }} @endif
" "
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}"> alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
</div> </div>
<a class="btn btn-primary" <a class="btn btn-primary"
id="ordered-menus" id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">Pilih
onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
Paket Paket
</a> </a>
</div> </div>
@ -200,15 +196,15 @@
@endforeach @endforeach
</div> </div>
</div> </div>
<div class="tab-pane fade" id="vert-tabs-topping" <div class="tab-pane vert-tab-content"
role="tabpanel" id="vert-tabs-topping" role="tabpanel"
aria-labelledby="vert-tabs-topping-tab"> aria-labelledby="vert-tabs-topping-tab">
<div class="row"> <div class="row">
@foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot) @foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
@if ($kelompokKategoriPivot->produk->urutan == 4) @if ($kelompokKategoriPivot->produk->urutan == 4)
<div class="col-lg-4"> <div class="col-lg-4">
<div <div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} );changeTab('vert-tabs-free')"
class="card card-primary card-outline"> class="card card-primary card-outline btn">
<div class="card-header"> <div class="card-header">
<h5 class="card-title m-0"> <h5 class="card-title m-0">
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }} {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
@ -222,11 +218,9 @@
{{ asset('assets/images/menu_image.jpeg') }} @endif {{ asset('assets/images/menu_image.jpeg') }} @endif
" "
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}"> alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
</div> </div>
<a class="btn btn-primary" <a class="btn btn-primary"
id="ordered-menus" id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">Pilih
onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
Paket Paket
</a> </a>
</div> </div>
@ -235,14 +229,14 @@
@endforeach @endforeach
</div> </div>
</div> </div>
<div class="tab-pane fade" id="vert-tabs-free" <div class="tab-pane vert-tab-content" id="vert-tabs-free"
role="tabpanel" aria-labelledby="vert-tabs-free-tab"> role="tabpanel" aria-labelledby="vert-tabs-free-tab">
<div class="row"> <div class="row">
@foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot) @foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
@if ($kelompokKategoriPivot->produk->urutan == 5) @if ($kelompokKategoriPivot->produk->urutan == 5)
<div class="col-lg-4"> <div class="col-lg-4">
<div <div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )"
class="card card-primary card-outline"> class="card card-primary card-outline btn">
<div class="card-header"> <div class="card-header">
<h5 class="card-title m-0"> <h5 class="card-title m-0">
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }} {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
@ -256,12 +250,10 @@
{{ asset('assets/images/menu_image.jpeg') }} @endif {{ asset('assets/images/menu_image.jpeg') }} @endif
" "
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}"> alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
</div> </div>
<a class="btn btn-primary" <a class="btn btn-primary"
id="ordered-menus" id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">
onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih Pilih Paket
Paket
</a> </a>
</div> </div>
</div> </div>
@ -434,7 +426,6 @@
@push('styles') @push('styles')
<!-- Toastr --> <!-- Toastr -->
<style> <style>
</style> </style>
<link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css') }}"> <link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css') }}">
@endpush @endpush
@ -795,8 +786,6 @@
return false; return false;
} }
var data = { var data = {
_token: "{{ csrf_token() }}", _token: "{{ csrf_token() }}",
orderCode: "{{ $orderCode }}", orderCode: "{{ $orderCode }}",
@ -850,12 +839,15 @@
// lakukan periksa kembali apabila menu dengan urutan yang sama sudah ada maka hapus menu tersebut dari array selectedMenus kecuali menu dengan urutan 5 boleh lebih dari 1 // lakukan periksa kembali apabila menu dengan urutan yang sama sudah ada maka hapus menu tersebut dari array selectedMenus kecuali menu dengan urutan 5 boleh lebih dari 1
if (params.urutan == 5) { if (params.urutan == 5) {
if (selectedMenus[i].id == params.id) { if (selectedMenus[i].id == params.id) {
changeOrderedMenus(selectedMenus[i].id, 'pilih');
isExist = true; isExist = true;
index = i; index = i;
} }
} else if (selectedMenus[i].urutan == params.urutan) { } else if (selectedMenus[i].urutan == params.urutan) {
changeOrderedMenus(selectedMenus[i].id, 'batal');
selectedMenus.splice(i, 1); selectedMenus.splice(i, 1);
} else if (selectedMenus[i].id == params.id) { } else if (selectedMenus[i].id == params.id) {
changeOrderedMenus(selectedMenus[i].id, 'pilih');
isExist = true; isExist = true;
index = i; index = i;
} }
@ -874,6 +866,7 @@
menu_terpilih.innerHTML = ''; menu_terpilih.innerHTML = '';
for (var i = 0; i < selectedMenus.length; i++) { for (var i = 0; i < selectedMenus.length; i++) {
changeOrderedMenus(selectedMenus[i].id, 'pilih');
menu_terpilih.innerHTML += ` menu_terpilih.innerHTML += `
<li> <li>
${selectedMenus[i].nama_produk} ${selectedMenus[i].nama_produk}
@ -890,6 +883,24 @@
} }
} }
// ordered menus change button text and onclick
function changeOrderedMenus(id, status) {
if (status == 'batal') {
var orderedMenus = document.getElementById('ordered-menus-' + id);
orderedMenus.innerHTML = 'Pilih Paket';
orderedMenus.classList.remove('btn-secondary');
orderedMenus.classList.add('btn-primary');
return false;
} else if (status == 'pilih') {
var orderedMenus = document.getElementById('ordered-menus-' + id);
orderedMenus.innerHTML = 'Batal Pilih';
orderedMenus.classList.remove('btn-primary');
orderedMenus.classList.add('btn-secondary');
return false;
}
}
// cari paket // cari paket
function cariPaket(params) { function cariPaket(params) {
var show_modal_paket = document.getElementById('show-modal-paket'); var show_modal_paket = document.getElementById('show-modal-paket');
@ -922,7 +933,6 @@
// Replace karakter kutipan ganda dengan HTML entities // Replace karakter kutipan ganda dengan HTML entities
var htmlEntitiesData = dataParse.replace(/\"/g, '&quot;'); var htmlEntitiesData = dataParse.replace(/\"/g, '&quot;');
// Tampilkan hasil // Tampilkan hasil
console.log(htmlEntitiesData);
var show_modal_paket = document.getElementById('show-modal-paket'); var show_modal_paket = document.getElementById('show-modal-paket');
if (result.gambar_produk != null) { if (result.gambar_produk != null) {
var gambar_produk = result.full_path; var gambar_produk = result.full_path;
@ -931,7 +941,7 @@
} }
show_modal_paket.innerHTML += ` show_modal_paket.innerHTML += `
<div class="card card-primary card-outline btn" <div class="card card-primary card-outline btn"
onclick="aadMenu(${htmlEntitiesData})"> onclick="aadMenu(${htmlEntitiesData});clearSelected()">
<div class="card-header"> <div class="card-header">
<h5 class="card-title m-0" id="nama-produk-modal"> <h5 class="card-title m-0" id="nama-produk-modal">
${result.nama_produk ?? ''} ${result.nama_produk ?? ''}
@ -965,5 +975,35 @@
} }
}) })
} }
// clear selected menus
function clearSelected() {
console.log(selectedMenus);
for (var i = 0; i < selectedMenus.length; i++) {
changeOrderedMenus(selectedMenus[i].id, 'batal');
menu_terpilih.innerHTML = ` `;
}
selectedMenus = [];
}
function changeTab(tabId) {
// Hide all tabs
var tabContents = document.getElementsByClassName('vert-tab-content');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].classList.remove('text-left', 'show', 'active');
}
var navLinks = document.getElementsByClassName('vert-nav-content');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].classList.remove('active');
// aria-selected
navLinks[i].setAttribute('aria-selected', false);
}
document.getElementById(tabId).classList.add('text-left', 'show', 'active');
document.getElementById(tabId + '-tab').classList.add('active');
// aria-selected
document.getElementById(tabId + '-tab').setAttribute('aria-selected', true);
}
</script> </script>
@endpush @endpush