action button
parent
7e31d7bb0a
commit
dbc080f447
|
|
@ -52,23 +52,24 @@
|
|||
<div class="nav flex-column nav-tabs h-100" id="vert-tabs-tab"
|
||||
role="tablist" aria-orientation="vertical">
|
||||
|
||||
<a class="nav-link active" id="vert-tabs-nasi-tab"
|
||||
data-toggle="pill" href="#vert-tabs-nasi" role="tab"
|
||||
<a class="nav-link vert-nav-content active"
|
||||
id="vert-tabs-nasi-tab" data-toggle="pill"
|
||||
href="#vert-tabs-nasi" role="tab"
|
||||
aria-controls="vert-tabs-nasi" aria-selected="true">Nasi</a>
|
||||
<a class="nav-link" id="vert-tabs-telur-tab" data-toggle="pill"
|
||||
href="#vert-tabs-telur" role="tab"
|
||||
<a class="nav-link vert-nav-content" id="vert-tabs-telur-tab"
|
||||
data-toggle="pill" href="#vert-tabs-telur" role="tab"
|
||||
aria-controls="vert-tabs-telur"
|
||||
aria-selected="false">Telur</a>
|
||||
<a class="nav-link" id="vert-tabs-sambel-tab" data-toggle="pill"
|
||||
href="#vert-tabs-sambel" role="tab"
|
||||
<a class="nav-link vert-nav-content" id="vert-tabs-sambel-tab"
|
||||
data-toggle="pill" href="#vert-tabs-sambel" role="tab"
|
||||
aria-controls="vert-tabs-sambel"
|
||||
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"
|
||||
aria-controls="vert-tabs-topping"
|
||||
aria-selected="false">Topping</a>
|
||||
<a class="nav-link" id="vert-tabs-free-tab" data-toggle="pill"
|
||||
href="#vert-tabs-free" role="tab"
|
||||
<a class="nav-link vert-nav-content" id="vert-tabs-free-tab"
|
||||
data-toggle="pill" href="#vert-tabs-free" role="tab"
|
||||
aria-controls="vert-tabs-free"
|
||||
aria-selected="false">Free</a>
|
||||
|
||||
|
|
@ -96,15 +97,15 @@
|
|||
<div class="col-8 col-sm-9" style="padding: 0px;">
|
||||
<div class="card-body" style="height:700px;overflow-y:scroll;">
|
||||
<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"
|
||||
aria-labelledby="vert-tabs-nasi-tab">
|
||||
<div class="row">
|
||||
@foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
|
||||
@if ($kelompokKategoriPivot->produk->urutan == 1)
|
||||
<div class="col-lg-4">
|
||||
<div
|
||||
class="card card-primary card-outline">
|
||||
<div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} );changeTab('vert-tabs-telur')"
|
||||
class="card card-primary card-outline btn">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title m-0">
|
||||
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
|
||||
|
|
@ -118,12 +119,10 @@
|
|||
{{ asset('assets/images/menu_image.jpeg') }} @endif
|
||||
"
|
||||
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
|
||||
|
||||
</div>
|
||||
<a class="btn btn-primary"
|
||||
id="ordered-menus"
|
||||
onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
|
||||
Paket
|
||||
id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">
|
||||
Pilih Paket
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -131,14 +130,15 @@
|
|||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="vert-tabs-telur"
|
||||
role="tabpanel" aria-labelledby="vert-tabs-telur-tab">
|
||||
<div class="tab-pane vert-tab-content"
|
||||
id="vert-tabs-telur" role="tabpanel"
|
||||
aria-labelledby="vert-tabs-telur-tab">
|
||||
<div class="row">
|
||||
@foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
|
||||
@if ($kelompokKategoriPivot->produk->urutan == 2)
|
||||
<div class="col-lg-4">
|
||||
<div
|
||||
class="card card-primary card-outline">
|
||||
<div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} );changeTab('vert-tabs-sambel')"
|
||||
class="card card-primary card-outline btn">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title m-0">
|
||||
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
|
||||
|
|
@ -152,12 +152,10 @@
|
|||
{{ asset('assets/images/menu_image.jpeg') }} @endif
|
||||
"
|
||||
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
|
||||
|
||||
</div>
|
||||
<a class="btn btn-primary"
|
||||
id="ordered-menus"
|
||||
onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
|
||||
Paket
|
||||
id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">
|
||||
Pilih Paket
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -165,15 +163,15 @@
|
|||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="vert-tabs-sambel"
|
||||
role="tabpanel"
|
||||
<div class="tab-pane vert-tab-content"
|
||||
id="vert-tabs-sambel" role="tabpanel"
|
||||
aria-labelledby="vert-tabs-sambel-tab">
|
||||
<div class="row">
|
||||
@foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
|
||||
@if ($kelompokKategoriPivot->produk->urutan == 3)
|
||||
<div class="col-lg-4">
|
||||
<div
|
||||
class="card card-primary card-outline">
|
||||
<div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} );changeTab('vert-tabs-topping')"
|
||||
class="card card-primary card-outline btn">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title m-0">
|
||||
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
|
||||
|
|
@ -187,11 +185,9 @@
|
|||
{{ asset('assets/images/menu_image.jpeg') }} @endif
|
||||
"
|
||||
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
|
||||
|
||||
</div>
|
||||
<a class="btn btn-primary"
|
||||
id="ordered-menus"
|
||||
onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
|
||||
id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">Pilih
|
||||
Paket
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -200,15 +196,15 @@
|
|||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="vert-tabs-topping"
|
||||
role="tabpanel"
|
||||
<div class="tab-pane vert-tab-content"
|
||||
id="vert-tabs-topping" role="tabpanel"
|
||||
aria-labelledby="vert-tabs-topping-tab">
|
||||
<div class="row">
|
||||
@foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
|
||||
@if ($kelompokKategoriPivot->produk->urutan == 4)
|
||||
<div class="col-lg-4">
|
||||
<div
|
||||
class="card card-primary card-outline">
|
||||
<div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} );changeTab('vert-tabs-free')"
|
||||
class="card card-primary card-outline btn">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title m-0">
|
||||
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
|
||||
|
|
@ -222,11 +218,9 @@
|
|||
{{ asset('assets/images/menu_image.jpeg') }} @endif
|
||||
"
|
||||
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
|
||||
|
||||
</div>
|
||||
<a class="btn btn-primary"
|
||||
id="ordered-menus"
|
||||
onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
|
||||
id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">Pilih
|
||||
Paket
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -235,14 +229,14 @@
|
|||
@endforeach
|
||||
</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">
|
||||
<div class="row">
|
||||
@foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
|
||||
@if ($kelompokKategoriPivot->produk->urutan == 5)
|
||||
<div class="col-lg-4">
|
||||
<div
|
||||
class="card card-primary card-outline">
|
||||
<div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )"
|
||||
class="card card-primary card-outline btn">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title m-0">
|
||||
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
|
||||
|
|
@ -256,12 +250,10 @@
|
|||
{{ asset('assets/images/menu_image.jpeg') }} @endif
|
||||
"
|
||||
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
|
||||
|
||||
</div>
|
||||
<a class="btn btn-primary"
|
||||
id="ordered-menus"
|
||||
onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
|
||||
Paket
|
||||
id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">
|
||||
Pilih Paket
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -434,7 +426,6 @@
|
|||
@push('styles')
|
||||
<!-- Toastr -->
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css') }}">
|
||||
@endpush
|
||||
|
|
@ -795,8 +786,6 @@
|
|||
return false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
var data = {
|
||||
_token: "{{ csrf_token() }}",
|
||||
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
|
||||
if (params.urutan == 5) {
|
||||
if (selectedMenus[i].id == params.id) {
|
||||
changeOrderedMenus(selectedMenus[i].id, 'pilih');
|
||||
isExist = true;
|
||||
index = i;
|
||||
}
|
||||
} else if (selectedMenus[i].urutan == params.urutan) {
|
||||
changeOrderedMenus(selectedMenus[i].id, 'batal');
|
||||
selectedMenus.splice(i, 1);
|
||||
} else if (selectedMenus[i].id == params.id) {
|
||||
changeOrderedMenus(selectedMenus[i].id, 'pilih');
|
||||
isExist = true;
|
||||
index = i;
|
||||
}
|
||||
|
|
@ -874,6 +866,7 @@
|
|||
|
||||
menu_terpilih.innerHTML = '';
|
||||
for (var i = 0; i < selectedMenus.length; i++) {
|
||||
changeOrderedMenus(selectedMenus[i].id, 'pilih');
|
||||
menu_terpilih.innerHTML += `
|
||||
<li>
|
||||
${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
|
||||
function cariPaket(params) {
|
||||
var show_modal_paket = document.getElementById('show-modal-paket');
|
||||
|
|
@ -922,7 +933,6 @@
|
|||
// Replace karakter kutipan ganda dengan HTML entities
|
||||
var htmlEntitiesData = dataParse.replace(/\"/g, '"');
|
||||
// Tampilkan hasil
|
||||
console.log(htmlEntitiesData);
|
||||
var show_modal_paket = document.getElementById('show-modal-paket');
|
||||
if (result.gambar_produk != null) {
|
||||
var gambar_produk = result.full_path;
|
||||
|
|
@ -931,7 +941,7 @@
|
|||
}
|
||||
show_modal_paket.innerHTML += `
|
||||
<div class="card card-primary card-outline btn"
|
||||
onclick="aadMenu(${htmlEntitiesData})">
|
||||
onclick="aadMenu(${htmlEntitiesData});clearSelected()">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title m-0" id="nama-produk-modal">
|
||||
${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>
|
||||
@endpush
|
||||
|
|
|
|||
Loading…
Reference in New Issue