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() {
|
2019-09-12 05:18:26 +00:00
|
|
|
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() {
|
|
|
|
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');
|
|
|
|
var offset = new Date().getTimezoneOffset();
|
2019-09-09 10:11:20 +00:00
|
|
|
window.timezones.forEach(timezone => {
|
2019-09-03 06:34:52 +00:00
|
|
|
var opt = document.createElement('option');
|
|
|
|
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);
|
|
|
|
date_picker.max = window.holiday_list.to_date;
|
|
|
|
}
|
|
|
|
|
|
|
|
function hide_next_button(){
|
|
|
|
let next_button = document.getElementById('next-button');
|
|
|
|
next_button.disabled = true;
|
|
|
|
next_button.onclick = ()=>{frappe.msgprint("Please select a date and time")};
|
|
|
|
}
|
|
|
|
|
|
|
|
function show_next_button(){
|
|
|
|
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) {
|
|
|
|
debugger
|
|
|
|
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-10 07:42:07 +00:00
|
|
|
window.slots.forEach((slot,index) => {
|
|
|
|
debugger
|
|
|
|
if(index%8==0){
|
|
|
|
let break_element = document.createElement('div');
|
|
|
|
break_element.classList.add('w-100');
|
|
|
|
timeslot_container.appendChild(break_element);
|
|
|
|
}
|
2019-09-09 10:11:20 +00:00
|
|
|
let start_time = new Date(slot.time)
|
2019-09-03 06:34:52 +00:00
|
|
|
var timeslot_div = document.createElement('div');
|
|
|
|
timeslot_div.classList.add('time-slot');
|
|
|
|
timeslot_div.classList.add('col-md');
|
|
|
|
if (!slot.availability) {
|
|
|
|
timeslot_div.classList.add('unavailable')
|
|
|
|
}
|
2019-09-09 10:11:20 +00:00
|
|
|
timeslot_div.innerHTML = get_slot_layout(start_time);
|
2019-09-03 06:34:52 +00:00
|
|
|
timeslot_div.id = slot.time.substr(11, 20);
|
2019-09-09 10:11:20 +00:00
|
|
|
timeslot_div.addEventListener('click', select_time);
|
2019-09-03 06:34:52 +00:00
|
|
|
timeslot_container.appendChild(timeslot_div);
|
2019-09-09 10:11:20 +00:00
|
|
|
});
|
|
|
|
set_default_timeslot();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clear_time_slots() {
|
|
|
|
let timeslot_container = document.getElementById('timeslot-container');
|
|
|
|
while (timeslot_container.firstChild) {
|
|
|
|
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) {
|
|
|
|
time = new Date(time)
|
|
|
|
let start_time_string = moment(time).format("LT");
|
2019-09-10 07:42:07 +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() {
|
|
|
|
if (this.classList.contains("unavailable")) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
try {
|
|
|
|
selected_element = document.getElementsByClassName('selected')[0]
|
|
|
|
} catch (e) {
|
2019-09-09 10:11:20 +00:00
|
|
|
debugger
|
2019-09-03 06:34:52 +00:00
|
|
|
this.classList.add("selected")
|
|
|
|
}
|
2019-09-09 10:11:20 +00:00
|
|
|
window.selected_time = this.id
|
2019-09-03 06:34:52 +00:00
|
|
|
selected_element.classList.remove("selected");
|
|
|
|
this.classList.add("selected");
|
2019-09-12 05:18:26 +00:00
|
|
|
show_next_button();
|
2019-09-03 06:34:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function set_default_timeslot() {
|
|
|
|
let timeslots = document.getElementsByClassName('time-slot')
|
|
|
|
for (let i = 0; i < timeslots.length; i++) {
|
|
|
|
const timeslot = timeslots[i];
|
|
|
|
if (!timeslot.classList.contains('unavailable')) {
|
|
|
|
timeslot.classList.add("selected");
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-09-12 05:18:26 +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-12 05:18:26 +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:
|
|
|
|
console.log("That's not a valid page")
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
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];
|
2019-09-10 07:42:07 +00:00
|
|
|
date_container.innerHTML = moment(window.selected_date).format("MMM Do YYYY");
|
2019-09-09 10:11:20 +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() {
|
2019-09-09 10:11:20 +00:00
|
|
|
// form validation here
|
|
|
|
form_validation();
|
2019-09-09 11:31:40 +00:00
|
|
|
debugger;
|
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;
|
|
|
|
button.onclick = () => { console.log('This should never have happened') }
|
2019-09-03 06:34:52 +00:00
|
|
|
}
|
2019-09-09 10:11:20 +00:00
|
|
|
|
|
|
|
function form_validation(){
|
|
|
|
var date = window.selected_date;
|
2019-09-09 11:31:40 +00:00
|
|
|
var time = window.selected_time;
|
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;
|
2019-09-12 05:18:26 +00:00
|
|
|
contact.email = document.getElementById('customer_email').value;
|
2019-09-09 10:11:20 +00:00
|
|
|
window.contact = contact
|
|
|
|
console.log({ date, time, contact });
|
|
|
|
}
|