| 1 |
jQuery(document).ready(function ($) { |
| 2 |
|
| 3 |
const category = $('#timetics-filter-category'); |
| 4 |
const staff = $('#timetics-filter-staff'); |
| 5 |
const url = timetics.site_url + '/wp-json/timetics/v1/appointments/filter'; |
| 6 |
const meetinContainer = $('.tt-meeting-list-wrapper'); |
| 7 |
|
| 8 |
$(category).on('change', function (e) { |
| 9 |
e.preventDefault(); |
| 10 |
|
| 11 |
$.ajax({ |
| 12 |
url: url, |
| 13 |
method: 'GET', |
| 14 |
data: { |
| 15 |
category: $(this).val() |
| 16 |
}, |
| 17 |
success: function (res) { |
| 18 |
if (Array.isArray(res.data.items)) { |
| 19 |
const meetings_markup = prepare_items(res.data.items); |
| 20 |
meetinContainer.html(meetings_markup); |
| 21 |
} |
| 22 |
} |
| 23 |
}); |
| 24 |
}); |
| 25 |
|
| 26 |
$(staff).on('change', function (e) { |
| 27 |
e.preventDefault(); |
| 28 |
|
| 29 |
$.ajax({ |
| 30 |
url: url, |
| 31 |
method: 'GET', |
| 32 |
data: { |
| 33 |
staff_id: $(this).val() |
| 34 |
}, |
| 35 |
success: function (res) { |
| 36 |
if (Array.isArray(res.data.items)) { |
| 37 |
const meetings_markup = prepare_items(res.data.items); |
| 38 |
meetinContainer.html(meetings_markup); |
| 39 |
} |
| 40 |
} |
| 41 |
}); |
| 42 |
}); |
| 43 |
|
| 44 |
/** |
| 45 |
* Prepare meeting itesm |
| 46 |
* |
| 47 |
* @return string |
| 48 |
*/ |
| 49 |
function prepare_items(items) { |
| 50 |
if ( items.length < 1 ) { |
| 51 |
return `<p>No meetings found</p>`; |
| 52 |
} |
| 53 |
|
| 54 |
const meetings = items.map(item => { |
| 55 |
const staffs = preapare_staff(item.staff); |
| 56 |
return ` |
| 57 |
<div class="ant-col-8 ant-col-xs-24 ant-col-md-8"> |
| 58 |
<div class="tt-meeting-list-item"> |
| 59 |
<!-- Staff --> |
| 60 |
${staffs} |
| 61 |
<h3 class="tt-title"> |
| 62 |
${item.name} |
| 63 |
</h3> |
| 64 |
<!-- meeting description --> |
| 65 |
<p>Meeting description</p> |
| 66 |
|
| 67 |
<!-- meeting info --> |
| 68 |
<ul class="meeting-info-list"> |
| 69 |
<!-- meeting duration --> |
| 70 |
<li> |
| 71 |
<svg fill="#3263F8" width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> |
| 72 |
<path d="M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" /> |
| 73 |
</svg> |
| 74 |
${item.duration} |
| 75 |
</li> |
| 76 |
<!-- meeting price --> |
| 77 |
</ul> |
| 78 |
<button class="ant-btn ant-btn-primary ant-btn-block" data-id="${item.id}"> |
| 79 |
Book Appointment |
| 80 |
</button> |
| 81 |
<div class="timetics-booking-modal"></div> |
| 82 |
</div> |
| 83 |
</div>`; |
| 84 |
}).join(''); |
| 85 |
|
| 86 |
return meetings; |
| 87 |
} |
| 88 |
|
| 89 |
function preapare_staff(staffs) { |
| 90 |
const totalStaff = staffs.length; |
| 91 |
let markup = ''; |
| 92 |
|
| 93 |
if ( totalStaff > 2 ) { |
| 94 |
markup = `<ul class="tt-author tt-author-avatar-list"> |
| 95 |
${staffs.map(staff => { |
| 96 |
return ` |
| 97 |
<li class="tt-single-host"> |
| 98 |
<img src="${staff.image}" alt="${staff.full_name}" /> |
| 99 |
<div class="tt-tooltip-text">${staff.full_name}</div> |
| 100 |
</li> |
| 101 |
` |
| 102 |
}).join('') |
| 103 |
} |
| 104 |
</ul>`; |
| 105 |
} else { |
| 106 |
markup = `<ul class="tt-author"> |
| 107 |
${staffs.map(staff => { |
| 108 |
return ` |
| 109 |
<li> |
| 110 |
<img src="${staff.image}" alt="${staff.full_name}" /> |
| 111 |
<span>${staff.full_name}</span> |
| 112 |
</li>`; |
| 113 |
}).join('') |
| 114 |
} |
| 115 |
</ul>`; |
| 116 |
} |
| 117 |
|
| 118 |
return markup; |
| 119 |
} |
| 120 |
}); |
| 121 |
|
