Refactor UI

This commit is contained in:
Pranav Nachanekar 2019-09-09 15:41:20 +05:30
parent 63dbacd7c0
commit 10711dd09d
4 changed files with 171 additions and 126 deletions

View File

@ -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",

View File

@ -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 @@ input[type="radio"] {
.time-slot.selected {
color: white;
background: #5e64ff;
}
}
.time-slot.selected .text-muted {
color: #EDF2F7 !important;
}

View File

@ -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 %}

View File

@ -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 @@ async function initialise_select_date() {
});
}
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 @@ function select_time() {
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 set_default_timeslot() {
}
}
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 @@ async function submit() {
'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 });
}