brotherton-erpnext/erpnext/www/book-appointment/index.js

228 lines
7.7 KiB
JavaScript
Raw Normal View History

2019-09-03 06:34:52 +00:00
frappe.ready(() => {
initialise_select_date()
})
2019-09-09 10:11:20 +00:00
window.holiday_list = [];
2019-09-03 06:34:52 +00:00
async function initialise_select_date() {
navigate_to_page(1);
2019-09-09 10:11:20 +00:00
await get_global_variables();
setup_date_picker();
setup_timezone_selector();
hide_next_button();
}
async function get_global_variables() {
2019-09-17 11:28:41 +00:00
// Using await
2019-09-09 10:11:20 +00:00
window.appointment_settings = (await frappe.call({
2019-09-03 06:34:52 +00:00
method: 'erpnext.www.book-appointment.index.get_appointment_settings'
})).message
2019-09-09 10:11:20 +00:00
window.timezones = (await frappe.call({
2019-09-03 06:34:52 +00:00
method: 'erpnext.www.book-appointment.index.get_timezones'
})).message;
2019-09-09 10:11:20 +00:00
window.holiday_list = (await frappe.call({
2019-09-03 06:34:52 +00:00
method: 'erpnext.www.book-appointment.index.get_holiday_list',
args: {
2019-09-09 10:11:20 +00:00
'holiday_list_name': window.appointment_settings.holiday_list
2019-09-03 06:34:52 +00:00
}
})).message;
2019-09-09 10:11:20 +00:00
}
function setup_timezone_selector() {
2019-09-03 06:34:52 +00:00
let timezones_element = document.getElementById('appointment-timezone');
2019-09-17 11:28:41 +00:00
let offset = new Date().getTimezoneOffset();
2019-09-09 10:11:20 +00:00
window.timezones.forEach(timezone => {
2019-09-17 11:28:41 +00:00
let opt = document.createElement('option');
2019-09-03 06:34:52 +00:00
opt.value = timezone.offset;
opt.innerHTML = timezone.timezone_name;
opt.defaultSelected = (offset == timezone.offset)
timezones_element.appendChild(opt)
});
}
2019-09-09 10:11:20 +00:00
function setup_date_picker() {
let date_picker = document.getElementById('appointment-date');
let today = new Date();
date_picker.min = today.toISOString().substr(0, 10);
today.setDate(today.getDate() + window.appointment_settings.advance_booking_days);
2019-09-17 11:28:41 +00:00
date_picker.max = today.toISOString().substr(0, 10);
2019-09-09 10:11:20 +00:00
}
2019-09-17 11:28:41 +00:00
function hide_next_button() {
2019-09-09 10:11:20 +00:00
let next_button = document.getElementById('next-button');
next_button.disabled = true;
2019-09-17 11:28:41 +00:00
next_button.onclick = () => frappe.msgprint("Please select a date and time");
2019-09-09 10:11:20 +00:00
}
2019-09-17 11:28:41 +00:00
function show_next_button() {
2019-09-09 10:11:20 +00:00
let next_button = document.getElementById('next-button');
next_button.disabled = false;
next_button.onclick = setup_details_page;
}
function on_date_or_timezone_select() {
2019-09-03 06:34:52 +00:00
let date_picker = document.getElementById('appointment-date');
2019-09-09 10:11:20 +00:00
let timezone = document.getElementById('appointment-timezone');
2019-09-03 06:34:52 +00:00
if (date_picker.value === '') {
2019-09-09 10:11:20 +00:00
clear_time_slots();
hide_next_button();
frappe.throw('Please select a date');
2019-09-03 06:34:52 +00:00
}
2019-09-09 10:11:20 +00:00
window.selected_date = date_picker.value;
window.selected_timezone = timezone.value;
update_time_slots(date_picker.value, timezone.value);
2019-09-11 08:55:26 +00:00
let lead_text = document.getElementById('lead-text');
lead_text.innerHTML = "Select Time"
2019-09-03 06:34:52 +00:00
}
2019-09-09 10:11:20 +00:00
async function get_time_slots(date, timezone) {
let slots = (await frappe.call({
2019-09-03 06:34:52 +00:00
method: 'erpnext.www.book-appointment.index.get_appointment_slots',
args: {
date: date,
timezone: timezone
}
})).message;
2019-09-09 10:11:20 +00:00
return slots;
}
async function update_time_slots(selected_date, selected_timezone) {
2019-09-03 06:34:52 +00:00
let timeslot_container = document.getElementById('timeslot-container');
2019-09-09 10:11:20 +00:00
window.slots = await get_time_slots(selected_date, selected_timezone);
clear_time_slots();
if (window.slots.length <= 0) {
2019-09-03 06:34:52 +00:00
let message_div = document.createElement('p');
message_div.innerHTML = "There are no slots available on this date";
timeslot_container.appendChild(message_div);
2019-09-09 10:11:20 +00:00
return
2019-09-03 06:34:52 +00:00
}
2019-09-17 11:28:41 +00:00
window.slots.forEach((slot, index) => {
// Add a break after each 8 elements
if (index % 8 == 0) {
let break_element = document.createElement('div');
break_element.classList.add('w-100');
timeslot_container.appendChild(break_element);
}
2019-09-17 11:28:41 +00:00
// Get and append timeslot div
let timeslot_div = get_timeslot_div_layout(slot)
2019-09-03 06:34:52 +00:00
timeslot_container.appendChild(timeslot_div);
2019-09-09 10:11:20 +00:00
});
set_default_timeslot();
}
2019-09-17 11:28:41 +00:00
function get_timeslot_div_layout(timeslot) {
let start_time = new Date(timeslot.time)
let timeslot_div = document.createElement('div');
timeslot_div.classList.add('time-slot');
timeslot_div.classList.add('col-md');
if (!timeslot.availability) {
timeslot_div.classList.add('unavailable')
}
timeslot_div.innerHTML = get_slot_layout(start_time);
timeslot_div.id = timeslot.time.substr(11, 20);
timeslot_div.addEventListener('click', select_time);
return timeslot_div
}
2019-09-09 10:11:20 +00:00
function clear_time_slots() {
2019-09-17 11:28:41 +00:00
// Clear any existing divs in timeslot container
2019-09-09 10:11:20 +00:00
let timeslot_container = document.getElementById('timeslot-container');
while (timeslot_container.firstChild) {
2019-09-18 09:03:10 +00:00
timeslot_container.removeChild(timeslot_container.firstChild);
2019-09-03 06:34:52 +00:00
}
2019-09-09 10:11:20 +00:00
}
function get_slot_layout(time) {
2019-09-18 09:03:10 +00:00
time = new Date(time);
2019-09-09 10:11:20 +00:00
let start_time_string = moment(time).format("LT");
2019-09-17 11:28:41 +00:00
let end_time = moment(time).add(window.appointment_settings.appointment_duration, 'minutes');
2019-09-09 10:11:20 +00:00
let end_time_string = end_time.format("LT");
return `<span style="font-size: 1.2em;">${start_time_string}</span><br><span class="text-muted small">to ${end_time_string}</span>`;
2019-09-03 06:34:52 +00:00
}
function select_time() {
2019-09-17 11:28:41 +00:00
if (this.classList.contains('unavailable')) {
2019-09-18 09:03:10 +00:00
return;
2019-09-03 06:34:52 +00:00
}
2019-09-17 11:28:41 +00:00
let selected_element = document.getElementsByClassName('selected');
if (!(selected_element.length > 0)){
2019-09-18 09:03:10 +00:00
this.classList.add('selected');
show_next_button();
return;
2019-09-03 06:34:52 +00:00
}
2019-09-17 11:28:41 +00:00
selected_element = selected_element[0]
2019-09-18 09:03:10 +00:00
window.selected_time = this.id;
2019-09-17 11:28:41 +00:00
selected_element.classList.remove('selected');
this.classList.add('selected');
show_next_button();
2019-09-03 06:34:52 +00:00
}
function set_default_timeslot() {
let timeslots = document.getElementsByClassName('time-slot')
2019-09-18 09:03:10 +00:00
// Can't use a forEach here since, we need to break the loop after a timeslot is selected
2019-09-03 06:34:52 +00:00
for (let i = 0; i < timeslots.length; i++) {
const timeslot = timeslots[i];
if (!timeslot.classList.contains('unavailable')) {
2019-09-17 11:28:41 +00:00
timeslot.classList.add('selected');
2019-09-03 06:34:52 +00:00
break;
}
}
}
2019-09-17 11:28:41 +00:00
function navigate_to_page(page_number) {
2019-09-09 10:11:20 +00:00
let page1 = document.getElementById('select-date-time');
let page2 = document.getElementById('enter-details');
2019-09-17 11:28:41 +00:00
switch (page_number) {
case 1:
page1.style.display = 'block';
page2.style.display = 'none';
break;
case 2:
page1.style.display = 'none';
page2.style.display = 'block';
break;
default:
2019-09-17 11:28:41 +00:00
break;
}
}
2019-09-17 11:28:41 +00:00
function setup_details_page() {
navigate_to_page(2)
2019-09-09 10:11:20 +00:00
let date_container = document.getElementsByClassName('date-span')[0];
let time_container = document.getElementsByClassName('time-span')[0];
date_container.innerHTML = moment(window.selected_date).format("MMM Do YYYY");
2019-09-17 11:28:41 +00:00
time_container.innerHTML = moment(window.selected_time, "HH:mm:ss").format("LT");
2019-09-03 06:34:52 +00:00
}
2019-09-03 08:46:47 +00:00
async function submit() {
let form = document.querySelector('#customer-form');
if(!form.checkValidity()){
form.reportValidity();
return;
}
2019-09-17 11:28:41 +00:00
get_form_data();
2019-09-09 10:11:20 +00:00
let appointment = (await frappe.call({
2019-09-03 08:46:47 +00:00
method: 'erpnext.www.book-appointment.index.create_appointment',
args: {
2019-09-09 11:31:40 +00:00
'date': window.selected_date,
'time': window.selected_time,
'contact': window.contact
2019-09-03 08:46:47 +00:00
}
})).message;
2019-09-09 10:11:20 +00:00
frappe.msgprint(__('Appointment Created Successfully'));
let button = document.getElementById('submit-button');
button.disabled = true;
2019-09-17 11:28:41 +00:00
button.onclick = null
}
2019-09-09 10:11:20 +00:00
2019-09-17 11:28:41 +00:00
function get_form_data() {
2019-09-09 10:11:20 +00:00
contact = {};
contact.name = document.getElementById('customer_name').value;
contact.number = document.getElementById('customer_number').value;
contact.skype = document.getElementById('customer_skype').value;
contact.notes = document.getElementById('customer_notes').value;
contact.email = document.getElementById('customer_email').value;
2019-09-09 10:11:20 +00:00
window.contact = contact
}