| 1 |
jQuery(document).ready(function ($) { |
| 2 |
const category = $("#booktics-filter-category"); |
| 3 |
const staff = $("#booktics-filter-staff"); |
| 4 |
const url = booktics.site_url + "/wp-json/booktics/v1/appointments/filter"; |
| 5 |
const meetinContainer = $(".bkt-meeting-list-wrapper"); |
| 6 |
|
| 7 |
$(category).on("change", function (e) { |
| 8 |
e.preventDefault(); |
| 9 |
|
| 10 |
$.ajax({ |
| 11 |
url: url, |
| 12 |
method: "GET", |
| 13 |
data: { |
| 14 |
category: $(this).val(), |
| 15 |
}, |
| 16 |
success: function (res) { |
| 17 |
if (Array.isArray(res.data.items)) { |
| 18 |
const meetings_markup = prepare_items(res.data.items); |
| 19 |
meetinContainer.html(meetings_markup); |
| 20 |
} |
| 21 |
}, |
| 22 |
}); |
| 23 |
}); |
| 24 |
|
| 25 |
$(staff).on("change", function (e) { |
| 26 |
e.preventDefault(); |
| 27 |
|
| 28 |
$.ajax({ |
| 29 |
url: url, |
| 30 |
method: "GET", |
| 31 |
data: { |
| 32 |
staff_id: $(this).val(), |
| 33 |
}, |
| 34 |
success: function (res) { |
| 35 |
if (Array.isArray(res.data.items)) { |
| 36 |
const meetings_markup = prepare_items(res.data.items); |
| 37 |
meetinContainer.html(meetings_markup); |
| 38 |
} |
| 39 |
}, |
| 40 |
}); |
| 41 |
}); |
| 42 |
|
| 43 |
/** |
| 44 |
* Prepare meeting itesm |
| 45 |
* |
| 46 |
* @return string |
| 47 |
*/ |
| 48 |
function prepare_items(items) { |
| 49 |
if (items.length < 1) { |
| 50 |
return `<p>No meetings found</p>`; |
| 51 |
} |
| 52 |
|
| 53 |
const meetings = items |
| 54 |
.map((item) => { |
| 55 |
const staffs = preapare_staff(item.staff); |
| 56 |
return ` |
| 57 |
<div class="bkt-meeting-list-item"> |
| 58 |
<!-- Staff --> |
| 59 |
${staffs} |
| 60 |
<h3 class="bkt-title"> |
| 61 |
${item.name} |
| 62 |
</h3> |
| 63 |
<!-- meeting description --> |
| 64 |
<p>Meeting description</p> |
| 65 |
|
| 66 |
<!-- meeting info --> |
| 67 |
<ul class="meeting-info-list"> |
| 68 |
<!-- meeting duration --> |
| 69 |
<li> |
| 70 |
<svg width="20" height="20" viewBox="0 0 20 20" fill="CurrentColor" xmlns="http://www.w3.org/2000/svg"> |
| 71 |
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM10 3.6C10.5523 3.6 11 4.04772 11 4.6V9.38197L14.0472 10.9056C14.5412 11.1526 14.7414 11.7532 14.4944 12.2472C14.2474 12.7412 13.6468 12.9414 13.1528 12.6944L9.55279 10.8944C9.214 10.725 9 10.3788 9 10V4.6C9 4.04772 9.44771 3.6 10 3.6Z"/> |
| 72 |
</svg> |
| 73 |
${item.duration} |
| 74 |
</li> |
| 75 |
<!-- meeting price --> |
| 76 |
</ul> |
| 77 |
<button class="ant-btn ant-btn-primary ant-btn-block" data-id="${item.id}"> |
| 78 |
Book Now |
| 79 |
</button> |
| 80 |
<div class="booktics-booking-modal"></div> |
| 81 |
</div>`; |
| 82 |
}) |
| 83 |
.join(""); |
| 84 |
|
| 85 |
return meetings; |
| 86 |
} |
| 87 |
|
| 88 |
function preapare_staff(staffs) { |
| 89 |
const totalStaff = staffs.length; |
| 90 |
let markup = ""; |
| 91 |
|
| 92 |
if (totalStaff > 2) { |
| 93 |
markup = `<ul class="bkt-author bkt-author-avatar-list"> |
| 94 |
${staffs |
| 95 |
.map((staff) => { |
| 96 |
return ` |
| 97 |
<li class="bkt-single-host"> |
| 98 |
${ |
| 99 |
staff.image |
| 100 |
? `<img src="${staff.image}" alt="${staff.full_name}" />` |
| 101 |
: "" |
| 102 |
} |
| 103 |
<div class="bkt-tooltip-text">${staff.full_name}</div> |
| 104 |
</li> |
| 105 |
`; |
| 106 |
}) |
| 107 |
.join("")} |
| 108 |
</ul>`; |
| 109 |
} else { |
| 110 |
markup = `<ul class="bkt-author"> |
| 111 |
${staffs |
| 112 |
.map((staff) => { |
| 113 |
return ` |
| 114 |
<li> |
| 115 |
${ |
| 116 |
staff.image |
| 117 |
? `<img src="${staff.image}" alt="${staff.full_name}" />` |
| 118 |
: "" |
| 119 |
} |
| 120 |
<span>${staff.full_name}</span> |
| 121 |
</li>`; |
| 122 |
}) |
| 123 |
.join("")} |
| 124 |
</ul>`; |
| 125 |
} |
| 126 |
|
| 127 |
return markup; |
| 128 |
} |
| 129 |
}); |
| 130 |
|
