123 lines
3.1 KiB
JavaScript
Executable File
123 lines
3.1 KiB
JavaScript
Executable File
const picker = document.getElementById('hour-picker');
|
|
window.selectedHour = null;
|
|
const itemHeight = 50;
|
|
let isScrolling = false;
|
|
import {
|
|
loadTodaysBookings,
|
|
isHourBooked,
|
|
loadSelectedDateBookings
|
|
} from './getData.js';
|
|
await loadTodaysBookings(0);
|
|
let isHourSelectedBooked = false;
|
|
|
|
|
|
let currentIndex = 0;
|
|
|
|
const btn = document.getElementById("btn");
|
|
const input1 = document.getElementById("name");
|
|
const input2 = document.getElementById("email");
|
|
const input3 = document.getElementById("phone");
|
|
const dpicker = document.getElementById("ranged");
|
|
|
|
|
|
// Create items
|
|
for (let h = 8; h <= 18; h++) {
|
|
const item = document.createElement('div');
|
|
item.textContent = `${String(h).padStart(2, '0')}:00`;
|
|
picker.appendChild(item);
|
|
}
|
|
|
|
const defaultIndex = 0;
|
|
picker.scrollTop = defaultIndex * itemHeight;
|
|
updateActive(defaultIndex);
|
|
|
|
picker.addEventListener('wheel', (e) => {
|
|
e.preventDefault();
|
|
if (isScrolling) return;
|
|
|
|
isScrolling = true;
|
|
|
|
let index = Math.round(picker.scrollTop / itemHeight);
|
|
if (e.deltaY > 0) {
|
|
index = Math.min(index + 1, picker.children.length - 1);
|
|
} else {
|
|
index = Math.max(index - 1, 0);
|
|
}
|
|
|
|
picker.scrollTo({
|
|
top: index * itemHeight,
|
|
behavior: 'smooth'
|
|
});
|
|
|
|
setTimeout(() => {
|
|
isScrolling = false;
|
|
}, 200);
|
|
}, {
|
|
passive: false
|
|
});
|
|
|
|
let scrollTimeout;
|
|
picker.addEventListener('scroll', () => {
|
|
clearTimeout(scrollTimeout);
|
|
scrollTimeout = setTimeout(() => {
|
|
let index = Math.round(picker.scrollTop / itemHeight);
|
|
index = Math.max(0, Math.min(index, picker.children.length - 1));
|
|
picker.scrollTo({
|
|
top: index * itemHeight,
|
|
behavior: 'smooth'
|
|
});
|
|
currentIndex = index;
|
|
enableBtn();
|
|
}, 100);
|
|
});
|
|
|
|
function updateActive(index) {
|
|
for (let i = 0; i < picker.children.length; i++) {
|
|
picker.children[i].classList.remove('active');
|
|
}
|
|
picker.children[index + 1].classList.add('active');
|
|
|
|
window.selectedHour = picker.children[index + 1]?.textContent.trim();
|
|
const selectedHourFormatted = selectedHour + ":00";
|
|
isHourSelectedBooked = isHourBooked(selectedHourFormatted);
|
|
|
|
return isHourSelectedBooked;
|
|
}
|
|
|
|
export function enableBtn() {
|
|
let inputs = checkInputs();
|
|
let isBooked = updateActive(currentIndex);
|
|
|
|
// Reset only non-active items to default color
|
|
picker.querySelectorAll('div').forEach(item => {
|
|
if (!item.classList.contains('active')) {
|
|
item.style.color = '#aaa';
|
|
}
|
|
});
|
|
|
|
let activeDiv = picker.querySelector('.active');
|
|
|
|
if (isBooked) {
|
|
activeDiv.style.color = '#a84747ff'; // booked color
|
|
} else {
|
|
activeDiv.style.color = '#222'; // available color
|
|
}
|
|
|
|
if (isBooked || !inputs) {
|
|
btn.disabled = true;
|
|
} else {
|
|
btn.disabled = false;
|
|
}
|
|
}
|
|
|
|
|
|
[input1, input2, input3, dpicker].forEach(input => {
|
|
input.addEventListener("input", enableBtn);
|
|
input.addEventListener("change", enableBtn);
|
|
});
|
|
|
|
setInterval(() => {
|
|
enableBtn();
|
|
}, 200);
|
|
|
|
enableBtn() |