Refactor UI
diff --git a/erpnext/crm/doctype/appointment/appointment.json b/erpnext/crm/doctype/appointment/appointment.json
index ec63420..8392549 100644
--- a/erpnext/crm/doctype/appointment/appointment.json
+++ b/erpnext/crm/doctype/appointment/appointment.json
@@ -28,12 +28,14 @@
{
"fieldname": "customer_phone_number",
"fieldtype": "Data",
- "label": "Phone Number"
+ "label": "Phone Number",
+ "reqd": 1
},
{
"fieldname": "customer_skype",
"fieldtype": "Data",
- "label": "Skype ID"
+ "label": "Skype ID",
+ "reqd": 1
},
{
"fieldname": "customer_details",
@@ -48,7 +50,7 @@
"reqd": 1
}
],
- "modified": "2019-09-09 12:23:33.611408",
+ "modified": "2019-09-09 15:40:21.881421",
"modified_by": "Administrator",
"module": "CRM",
"name": "Appointment",
diff --git a/erpnext/www/book-appointment/index.css b/erpnext/www/book-appointment/index.css
index 3ffe996..a6e6313 100644
--- a/erpnext/www/book-appointment/index.css
+++ b/erpnext/www/book-appointment/index.css
@@ -1,7 +1,12 @@
.time-slot {
- margin: 0 0;
+ margin-bottom: 2em;
+ margin-left: 0.5em;
+ margin-right: 0.5em;
+ border-radius: 0.4em;
+ cursor: pointer;
border: 0.5px solid #cccccc;
- min-height: 100px;
+ min-height: 75px;
+ padding: 0.5em 1em;
}
.time-slot:hover {
@@ -9,9 +14,13 @@
}
.time-slot.unavailable {
- background: #bbb;
+ background: #CBD5E0;
+ cursor: not-allowed;
+ color: #718096
+}
- color: #777777
+.time-slot.unavailable .text-muted {
+ color: #718096
}
input[type="radio"] {
@@ -22,4 +31,8 @@
.time-slot.selected {
color: white;
background: #5e64ff;
-}
\ No newline at end of file
+}
+
+.time-slot.selected .text-muted {
+ color: #EDF2F7 !important;
+}
diff --git a/erpnext/www/book-appointment/index.html b/erpnext/www/book-appointment/index.html
index b705f9e..b915484 100644
--- a/erpnext/www/book-appointment/index.html
+++ b/erpnext/www/book-appointment/index.html
@@ -2,69 +2,60 @@
{% block title %}{{ _("Book Appointment") }}{% endblock %}
+{% block script %}
+ <script src="assets/js/moment-bundle.min.js"></script>
+ <script src="book-appointment/index.js"></script>
+{% endblock %}
+
{% block page_content %}
<div class="container">
<!-- title: Book an appointment -->
- <div id="select-date">
+ <div id="select-date-time">
<div class="text-center mb-5">
<h3>Book an appointment</h3>
- <p class="lead">Select the date and your timezone</p>
+ <p class="lead text-muted">Select the date and your timezone</p>
</div>
<div class="row justify-content-center mt-3">
- <div class="col-md-4 align-self-center ">
- <form name="myform">
- <input type="date" onchange="validate_date()" name="appointment-date" id="appointment-date"
- class="form-control mt-3">
- <select name="appointment-timezone" id="appointment-timezone" class="form-control mt-3">
+ <div class="col-md-6 align-self-center ">
+ <div class="row">
+ <input type="date" oninput="on_date_or_timezone_select()" name="appointment-date" id="appointment-date"
+ class="form-control mt-3 col-md m-3">
+ <select name="appointment-timezone" oninput="on_date_or_timezone_select()" id="appointment-timezone" class="form-control mt-3 col-md">
</select>
- </form>
- <button class="form-control mt-3 btn btn-dark" id="next-button" onclick="navigate_to_time_select()">
- Next
- </button>
- </div>
- </div>
- </div>
-
- <!--Select Time Slot-->
- <div id="select-time">
- <div class="text-center mb-5">
- <h3>Pick A Time Slot</h3>
- <p class="lead">Selected date is <span class="date-span">Date Span</span></p>
- </div>
- <div class="mt-3 justify-content-center">
- <div class="row" id="timeslot-container">
-
- </div>
- <div class="row justify-content-center">
- <div class="col-md-4 align-self-center">
- <button class="form-control mt-5 btn btn-dark" onclick="initialise_enter_details()">
- Next
- </button>
</div>
</div>
</div>
- </div>
-
- <!--Enter Details-->
- <div id="enter-details">
- <div class="text-center mb-5">
- <h3>Add details</h3>
- <p class="lead">Selected date is <span class="date-span">Date Span</span> at <span class="time-span"> time </span></p>
+ <div class="row mt-3" id="timeslot-container" >
+
</div>
<div class="row justify-content-center mt-3">
- <div class="col-md-4 align-items-center">
- <input class="form-control mt-3" type="text" name="customer_name" id="customer_name" placeholder="Your Name"
- required>
- <input class="form-control mt-3" type="tel" name="customer_number" id="customer_number"
- placeholder="Contact Number" required>
- <input class="form-control mt-3" type="text" name="customer_skype" id="customer_skype" placeholder="Skype"
- required>
- <textarea class="form-control mt-3" name="customer_notes" id="customer_notes" cols="30" rows="10"
- placeholder="Notes"></textarea>
- <button class="btn btn-primary form-control mt-3" onclick="submit()">Submit</button>
+ <div class="col-md-4">
+ <button class="btn btn-primary form-control" id="next-button">Next</button>
</div>
</div>
</div>
</div>
+<!--Enter Details-->
+<div id="enter-details">
+ <div class="text-center mb-5">
+ <h3>Add details</h3>
+ <p class="lead">Selected date is <span class="date-span"></span> at <span class="time-span">
+ </span></p>
+ </div>
+ <div class="row justify-content-center mt-3">
+ <div class="col-md-4 align-items-center">
+ <input class="form-control mt-3" type="text" name="customer_name" id="customer_name" placeholder="Your Name"
+ required>
+ <input class="form-control mt-3" type="tel" name="customer_number" id="customer_number"
+ placeholder="Contact Number" required>
+ <input class="form-control mt-3" type="text" name="customer_skype" id="customer_skype" placeholder="Skype"
+ required>
+ <textarea class="form-control mt-3" name="customer_notes" id="customer_notes" cols="30" rows="10"
+ placeholder="Notes"></textarea>
+ <button class="btn btn-primary form-control mt-3" onclick="submit()" id="submit-button">Submit</button>
+ </div>
+ </div>
+</div>
+</div>
{% endblock %}
\ No newline at end of file
diff --git a/erpnext/www/book-appointment/index.js b/erpnext/www/book-appointment/index.js
index e1a2338..bb21ddf 100644
--- a/erpnext/www/book-appointment/index.js
+++ b/erpnext/www/book-appointment/index.js
@@ -2,47 +2,35 @@
frappe.ready(() => {
initialise_select_date()
})
-var holiday_list = [];
+window.holiday_list = [];
-function navigator(page_no) {
- let select_date_div = document.getElementById('select-date');
- select_date_div.style.display = 'none';
- let select_time_div = document.getElementById('select-time');
- select_time_div.style.display = 'none';
- let contact_details_div = document.getElementById('enter-details');
- contact_details_div.style.display = 'none';
- let page;
- switch (page_no) {
- case 1: page = select_date_div; break;
- case 2: page = select_time_div; break;
- case 3: page = contact_details_div; break;
- }
- page.style.display = 'block'
+async function initialise_select_date() {
+ document.getElementById('enter-details').style.display = 'none';
+ await get_global_variables();
+ setup_date_picker();
+ setup_timezone_selector();
+ hide_next_button();
}
-// Page 1
-async function initialise_select_date() {
- navigator(1);
- let timezones, settings;
- settings = (await frappe.call({
+async function get_global_variables() {
+ window.appointment_settings = (await frappe.call({
method: 'erpnext.www.book-appointment.index.get_appointment_settings'
})).message
- timezones = (await frappe.call({
+ window.timezones = (await frappe.call({
method: 'erpnext.www.book-appointment.index.get_timezones'
})).message;
- holiday_list = (await frappe.call({
+ window.holiday_list = (await frappe.call({
method: 'erpnext.www.book-appointment.index.get_holiday_list',
args: {
- 'holiday_list_name': settings.holiday_list
+ 'holiday_list_name': window.appointment_settings.holiday_list
}
})).message;
- let date_picker = document.getElementById('appointment-date');
- date_picker.max = holiday_list.to_date;
- date_picker.min = holiday_list.from_date;
- date_picker.value = (new Date()).toISOString().substr(0, 10);
+}
+
+function setup_timezone_selector() {
let timezones_element = document.getElementById('appointment-timezone');
var offset = new Date().getTimezoneOffset();
- timezones.forEach(timezone => {
+ window.timezones.forEach(timezone => {
var opt = document.createElement('option');
opt.value = timezone.offset;
opt.innerHTML = timezone.timezone_name;
@@ -51,56 +39,90 @@
});
}
-function validate_date() {
+function setup_date_picker() {
let date_picker = document.getElementById('appointment-date');
- if (date_picker.value === '') {
- frappe.throw('Please select a date')
- }
+ let today = new Date();
+ date_picker.min = today.toISOString().substr(0, 10);
+ date_picker.max = window.holiday_list.to_date;
}
-// Page 2
-async function navigate_to_time_select() {
- navigator(2);
- timezone = document.getElementById('appointment-timezone').value
- date = document.getElementById('appointment-date').value;
- var date_spans = document.getElementsByClassName('date-span');
- for (var i = 0; i < date_spans.length; i++) date_spans[i].innerHTML = date;
- // date_span.addEventListener('click',initialise_select_date)
- // date_span.style.color = '#5e64ff';
- // date_span.style.textDecoration = 'underline';
- // date_span.style.cursor = 'pointer';
- var slots = (await frappe.call({
+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() {
+ let date_picker = document.getElementById('appointment-date');
+ let timezone = document.getElementById('appointment-timezone');
+ if (date_picker.value === '') {
+ clear_time_slots();
+ hide_next_button();
+ frappe.throw('Please select a date');
+ }
+ window.selected_date = date_picker.value;
+ window.selected_timezone = timezone.value;
+ update_time_slots(date_picker.value, timezone.value);
+}
+
+async function get_time_slots(date, timezone) {
+ debugger
+ let slots = (await frappe.call({
method: 'erpnext.www.book-appointment.index.get_appointment_slots',
args: {
date: date,
timezone: timezone
}
})).message;
- let timeslot_container = document.getElementById('timeslot-container');
- console.log(slots)
- if (slots.length <= 0) {
- let message_div = document.createElement('p');
+ return slots;
+}
+async function update_time_slots(selected_date, selected_timezone) {
+ let timeslot_container = document.getElementById('timeslot-container');
+ window.slots = await get_time_slots(selected_date, selected_timezone);
+ clear_time_slots();
+ if (window.slots.length <= 0) {
+ let message_div = document.createElement('p');
message_div.innerHTML = "There are no slots available on this date";
timeslot_container.appendChild(message_div);
+ return
}
- for (let i = 0; i < slots.length; i++) {
- const slot = slots[i];
+ window.slots.forEach(slot => {
+ let start_time = new Date(slot.time)
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')
}
- timeslot_div.innerHTML = slot.time.substr(11, 20);
+ timeslot_div.innerHTML = get_slot_layout(start_time);
timeslot_div.id = slot.time.substr(11, 20);
+ timeslot_div.addEventListener('click', select_time);
timeslot_container.appendChild(timeslot_div);
+ });
+ set_default_timeslot();
+ show_next_button();
+}
+
+function clear_time_slots() {
+ let timeslot_container = document.getElementById('timeslot-container');
+ while (timeslot_container.firstChild) {
+ timeslot_container.removeChild(timeslot_container.firstChild)
}
- set_default_timeslot()
- let time_slot_divs = document.getElementsByClassName('time-slot');
- for (var i = 0; i < time_slot_divs.length; i++) {
- time_slot_divs[i].addEventListener('click', select_time);
- }
+}
+
+function get_slot_layout(time) {
+ time = new Date(time)
+ let start_time_string = moment(time).format("LT");
+ let end_time = moment(time).add('1','hours');
+ 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>`;
}
function select_time() {
@@ -110,8 +132,10 @@
try {
selected_element = document.getElementsByClassName('selected')[0]
} catch (e) {
+ debugger
this.classList.add("selected")
}
+ window.selected_time = this.id
selected_element.classList.remove("selected");
this.classList.add("selected");
}
@@ -127,23 +151,23 @@
}
}
-function initialise_enter_details() {
- navigator(3);
- let time_div = document.getElementsByClassName('selected')[0];
- let time_span = document.getElementsByClassName('time-span')[0];
- time_span.innerHTML = time_div.id
+function setup_details_page(){
+ let page1 = document.getElementById('select-date-time');
+ let page2 = document.getElementById('enter-details');
+ page1.style.display = 'none';
+ page2.style.display = 'block';
+
+ let date_container = document.getElementsByClassName('date-span')[0];
+ let time_container = document.getElementsByClassName('time-span')[0];
+
+ date_container.innerHTML = new Date(window.selected_date).toLocaleDateString();
+ time_container.innerHTML = moment(window.selected_time,"HH:mm:ss").format("LT");
}
async function submit() {
- var date = document.getElementById('appointment-date').value;
- var time = document.getElementsByClassName('selected')[0].id;
- 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;
- console.log({ date, time, contact });
- let abc = (await frappe.call({
+ // form validation here
+ form_validation();
+ let appointment = (await frappe.call({
method: 'erpnext.www.book-appointment.index.create_appointment',
args: {
'date': date,
@@ -151,5 +175,20 @@
'contact': contact
}
})).message;
- console.log(abc)
+ frappe.msgprint(__('Appointment Created Successfully'));
+ let button = document.getElementById('submit-button');
+ button.disabled = true;
+ button.onclick = () => { console.log('This should never have happened') }
}
+
+function form_validation(){
+ var date = window.selected_date;
+ var time = document.getElementsByClassName('selected')[0].id;
+ 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;
+ window.contact = contact
+ console.log({ date, time, contact });
+}