358 lines
14 KiB
JavaScript
358 lines
14 KiB
JavaScript
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
const registrationForm = document.getElementById('eventRegistration');
|
||
|
|
const successModal = document.getElementById('successModal');
|
||
|
|
const closeModal = document.getElementById('closeModal');
|
||
|
|
const chatButton = document.getElementById('chatButton');
|
||
|
|
const chatWindow = document.getElementById('chatWindow');
|
||
|
|
const closeChat = document.getElementById('closeChat');
|
||
|
|
const imagePopup = document.getElementById('imagePopup');
|
||
|
|
const closeImagePopup = document.getElementById('closeImagePopup');
|
||
|
|
|
||
|
|
// Form submission handling
|
||
|
|
if (registrationForm) {
|
||
|
|
registrationForm.addEventListener('submit', function(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
let isValid = true;
|
||
|
|
|
||
|
|
// Simple validation example
|
||
|
|
const fullName = document.getElementById('fullName');
|
||
|
|
const email = document.getElementById('email');
|
||
|
|
const phone = document.getElementById('phone');
|
||
|
|
const socialMedia = document.getElementById('socialMedia');
|
||
|
|
const origin = document.getElementById('origin');
|
||
|
|
const category = document.getElementById('category');
|
||
|
|
const discovery = document.getElementById('discovery');
|
||
|
|
const expectation = document.getElementById('expectation');
|
||
|
|
|
||
|
|
if (fullName.value.trim() === '') {
|
||
|
|
isValid = false;
|
||
|
|
alert('Please enter your full name.');
|
||
|
|
} else if (email.value.trim() === '' || !email.value.includes('@')) {
|
||
|
|
isValid = false;
|
||
|
|
alert('Please enter a valid email address.');
|
||
|
|
} else if (phone.value.trim() === '') {
|
||
|
|
isValid = false;
|
||
|
|
alert('Please enter your phone number.');
|
||
|
|
} else if (socialMedia.value.trim() === '') {
|
||
|
|
isValid = false;
|
||
|
|
alert('Please enter your social media account.');
|
||
|
|
} else if (origin.value.trim() === '') {
|
||
|
|
isValid = false;
|
||
|
|
alert('Please enter your origin.');
|
||
|
|
} else if (category.value === '') {
|
||
|
|
isValid = false;
|
||
|
|
alert('Please select a category.');
|
||
|
|
} else if (discovery.value.trim() === '') {
|
||
|
|
isValid = false;
|
||
|
|
alert('Please let us know how you discovered this event.');
|
||
|
|
} else if (expectation.value.trim() === '') {
|
||
|
|
isValid = false;
|
||
|
|
alert('Please enter your expectation.');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (isValid) {
|
||
|
|
let phoneNumber = phone.value.trim();
|
||
|
|
if (phoneNumber.startsWith('0')) {
|
||
|
|
phoneNumber = '62' + phoneNumber.substring(1);
|
||
|
|
} else if (!phoneNumber.startsWith('62')) {
|
||
|
|
phoneNumber = '62' + phoneNumber;
|
||
|
|
}
|
||
|
|
|
||
|
|
const formData = {
|
||
|
|
Nama: fullName.value,
|
||
|
|
Email: email.value,
|
||
|
|
WhatsApp: phoneNumber,
|
||
|
|
Akun_Sosial_Media: socialMedia.value,
|
||
|
|
Asal_Komunitas: origin.value,
|
||
|
|
Kategori_Peserta: category.value,
|
||
|
|
Informasi_Event: discovery.value,
|
||
|
|
Harapan: expectation.value,
|
||
|
|
Pertanyaan_Diskusi: document.getElementById('discussionTopic').value
|
||
|
|
};
|
||
|
|
|
||
|
|
fetch('https://bot.kediritechnopark.com/webhook/form-berlayar-sinema', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json',
|
||
|
|
},
|
||
|
|
body: JSON.stringify(formData),
|
||
|
|
})
|
||
|
|
.then(response => {
|
||
|
|
if (!response.ok) {
|
||
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||
|
|
}
|
||
|
|
return response.json();
|
||
|
|
})
|
||
|
|
.then(data => {
|
||
|
|
console.log('Form submission successful:', data);
|
||
|
|
// Show success modal
|
||
|
|
if (successModal) {
|
||
|
|
successModal.classList.remove('hidden');
|
||
|
|
successModal.classList.add('flex');
|
||
|
|
}
|
||
|
|
// Reset form
|
||
|
|
registrationForm.reset();
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error('Form submission failed:', error);
|
||
|
|
alert('Pendaftaran gagal. Silakan coba lagi nanti.');
|
||
|
|
});
|
||
|
|
|
||
|
|
// Show success modal
|
||
|
|
if (successModal) {
|
||
|
|
successModal.classList.remove('hidden');
|
||
|
|
successModal.classList.add('flex');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Reset form
|
||
|
|
registrationForm.reset();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Close success modal
|
||
|
|
if (closeModal) {
|
||
|
|
closeModal.addEventListener('click', () => {
|
||
|
|
if (successModal) {
|
||
|
|
successModal.classList.add('hidden');
|
||
|
|
successModal.classList.remove('flex');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Image popup on page load
|
||
|
|
if (imagePopup) {
|
||
|
|
// Show the popup after a short delay
|
||
|
|
setTimeout(() => {
|
||
|
|
imagePopup.classList.remove('hidden');
|
||
|
|
imagePopup.classList.add('flex');
|
||
|
|
}, 1000); // Show after 1 second
|
||
|
|
|
||
|
|
// Close image popup
|
||
|
|
if (closeImagePopup) {
|
||
|
|
closeImagePopup.addEventListener('click', () => {
|
||
|
|
imagePopup.classList.add('hidden');
|
||
|
|
imagePopup.classList.remove('flex');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Chat window functionality
|
||
|
|
if (chatButton && chatWindow && closeChat) {
|
||
|
|
// Film carousel functionality
|
||
|
|
const filmCarousel = document.getElementById('film-carousel');
|
||
|
|
const prevFilmButton = document.getElementById('prev-film');
|
||
|
|
const nextFilmButton = document.getElementById('next-film');
|
||
|
|
|
||
|
|
if (filmCarousel && prevFilmButton && nextFilmButton) {
|
||
|
|
let filmInterval;
|
||
|
|
|
||
|
|
const startFilmCarousel = () => {
|
||
|
|
if (window.innerWidth < 768) {
|
||
|
|
filmInterval = setInterval(() => {
|
||
|
|
if (filmCarousel.scrollLeft + filmCarousel.clientWidth >= filmCarousel.scrollWidth) {
|
||
|
|
filmCarousel.scrollTo({ left: 0, behavior: 'smooth' });
|
||
|
|
} else {
|
||
|
|
filmCarousel.scrollBy({ left: filmCarousel.clientWidth, behavior: 'smooth' });
|
||
|
|
}
|
||
|
|
}, 3000);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const stopFilmCarousel = () => {
|
||
|
|
clearInterval(filmInterval);
|
||
|
|
};
|
||
|
|
|
||
|
|
const setupFilmCarousel = () => {
|
||
|
|
stopFilmCarousel();
|
||
|
|
startFilmCarousel();
|
||
|
|
updateCarouselButtons();
|
||
|
|
};
|
||
|
|
|
||
|
|
const updateCarouselButtons = () => {
|
||
|
|
if (window.innerWidth < 768) {
|
||
|
|
prevFilmButton.classList.toggle('film-carousel-btn-hidden', filmCarousel.scrollLeft === 0);
|
||
|
|
nextFilmButton.classList.toggle('film-carousel-btn-hidden', filmCarousel.scrollLeft + filmCarousel.clientWidth >= filmCarousel.scrollWidth - 1);
|
||
|
|
} else {
|
||
|
|
prevFilmButton.classList.add('film-carousel-btn-hidden');
|
||
|
|
nextFilmButton.classList.add('film-carousel-btn-hidden');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
filmCarousel.addEventListener('scroll', () => {
|
||
|
|
updateCarouselButtons();
|
||
|
|
});
|
||
|
|
|
||
|
|
nextFilmButton.addEventListener('click', () => {
|
||
|
|
stopFilmCarousel();
|
||
|
|
filmCarousel.scrollBy({ left: filmCarousel.clientWidth, behavior: 'smooth' });
|
||
|
|
startFilmCarousel();
|
||
|
|
});
|
||
|
|
|
||
|
|
prevFilmButton.addEventListener('click', () => {
|
||
|
|
stopFilmCarousel();
|
||
|
|
filmCarousel.scrollBy({ left: -filmCarousel.clientWidth, behavior: 'smooth' });
|
||
|
|
startFilmCarousel();
|
||
|
|
});
|
||
|
|
|
||
|
|
window.addEventListener('resize', setupFilmCarousel);
|
||
|
|
const equalizeCardHeights = () => {
|
||
|
|
if (window.innerWidth < 768) {
|
||
|
|
const filmCards = filmCarousel.querySelectorAll('.film-card');
|
||
|
|
let maxHeight = 0;
|
||
|
|
filmCards.forEach(card => {
|
||
|
|
card.style.height = 'auto';
|
||
|
|
if (card.offsetHeight > maxHeight) {
|
||
|
|
maxHeight = card.offsetHeight;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
filmCards.forEach(card => {
|
||
|
|
card.style.height = `${maxHeight}px`;
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
const filmCards = filmCarousel.querySelectorAll('.film-card');
|
||
|
|
filmCards.forEach(card => {
|
||
|
|
card.style.height = '100%';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener('resize', () => {
|
||
|
|
setupFilmCarousel();
|
||
|
|
equalizeCardHeights();
|
||
|
|
});
|
||
|
|
|
||
|
|
setupFilmCarousel();
|
||
|
|
equalizeCardHeights();
|
||
|
|
}
|
||
|
|
const chatInput = chatWindow.querySelector('input[type="text"]');
|
||
|
|
const sendButton = chatWindow.querySelector('button.bg-yellow-500');
|
||
|
|
const chatMessagesContainer = chatWindow.querySelector('.p-4.h-64.overflow-y-auto');
|
||
|
|
let sessionId = null;
|
||
|
|
|
||
|
|
function generateUUID() { // Public Domain/MIT
|
||
|
|
var d = new Date().getTime();//Timestamp
|
||
|
|
var d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now()*1000)) || 0;//Time in microseconds since page-load or 0 if unsupported
|
||
|
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||
|
|
var r = Math.random() * 16;//random number between 0 and 16
|
||
|
|
if(d > 0){//Use timestamp until depleted
|
||
|
|
r = (d + r)%16 | 0;
|
||
|
|
d = Math.floor(d/16);
|
||
|
|
} else {//Use microseconds since page-load if supported
|
||
|
|
r = (d2 + r)%16 | 0;
|
||
|
|
d2 = Math.floor(d2/16);
|
||
|
|
}
|
||
|
|
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
chatButton.addEventListener('click', () => {
|
||
|
|
chatWindow.classList.toggle('hidden');
|
||
|
|
if (!sessionId) {
|
||
|
|
sessionId = generateUUID();
|
||
|
|
console.log('Chat session started with ID:', sessionId);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
closeChat.addEventListener('click', () => {
|
||
|
|
chatWindow.classList.add('hidden');
|
||
|
|
});
|
||
|
|
|
||
|
|
sendButton.addEventListener('click', () => {
|
||
|
|
sendMessage();
|
||
|
|
});
|
||
|
|
|
||
|
|
chatInput.addEventListener('keypress', (e) => {
|
||
|
|
if (e.key === 'Enter') {
|
||
|
|
sendMessage();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function sendMessage() {
|
||
|
|
const messageText = chatInput.value.trim();
|
||
|
|
if (messageText === '') return;
|
||
|
|
|
||
|
|
// Display sent message
|
||
|
|
const sentMessageDiv = document.createElement('div');
|
||
|
|
sentMessageDiv.className = 'mb-4 text-right';
|
||
|
|
sentMessageDiv.innerHTML = `<p class="chat-message-sent">${messageText}</p>`;
|
||
|
|
chatMessagesContainer.appendChild(sentMessageDiv);
|
||
|
|
chatInput.value = ''; // Clear input
|
||
|
|
|
||
|
|
// Show typing indicator
|
||
|
|
const typingIndicator = document.createElement('div');
|
||
|
|
typingIndicator.className = 'mb-4 text-left typing-indicator';
|
||
|
|
typingIndicator.innerHTML = '<span></span><span></span><span></span>';
|
||
|
|
chatMessagesContainer.appendChild(typingIndicator);
|
||
|
|
|
||
|
|
// Scroll to bottom
|
||
|
|
chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;
|
||
|
|
|
||
|
|
// Send message to webhook
|
||
|
|
fetch('https://bot.kediritechnopark.com/webhook/chat-berlayar-sinema', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json',
|
||
|
|
},
|
||
|
|
body: JSON.stringify({ message: messageText, sessionId: sessionId }),
|
||
|
|
})
|
||
|
|
.then(response => {
|
||
|
|
if (!response.ok) {
|
||
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||
|
|
}
|
||
|
|
return response.json();
|
||
|
|
})
|
||
|
|
.then(data => {
|
||
|
|
console.log('Chat message sent successfully:', data);
|
||
|
|
// Remove typing indicator
|
||
|
|
chatMessagesContainer.removeChild(typingIndicator);
|
||
|
|
|
||
|
|
// Display response from the webhook
|
||
|
|
if (data && data.output) {
|
||
|
|
const receivedMessageDiv = document.createElement('div');
|
||
|
|
receivedMessageDiv.className = 'mb-4 text-left';
|
||
|
|
receivedMessageDiv.innerHTML = `<p class="chat-message-received">${data.output}</p>`;
|
||
|
|
chatMessagesContainer.appendChild(receivedMessageDiv);
|
||
|
|
chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error('Chat message failed to send:', error);
|
||
|
|
// Remove typing indicator
|
||
|
|
chatMessagesContainer.removeChild(typingIndicator);
|
||
|
|
|
||
|
|
// Optionally, display an error message in the chat
|
||
|
|
const errorMessageDiv = document.createElement('div');
|
||
|
|
errorMessageDiv.className = 'mb-4 text-left';
|
||
|
|
errorMessageDiv.innerHTML = `<p class="chat-message-received text-red-500">Error: Could not send message.</p>`;
|
||
|
|
chatMessagesContainer.appendChild(errorMessageDiv);
|
||
|
|
chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Observer to disable chat button when image popup is active
|
||
|
|
if (imagePopup && chatButton) {
|
||
|
|
const observer = new MutationObserver((mutationsList) => {
|
||
|
|
for (const mutation of mutationsList) {
|
||
|
|
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
|
||
|
|
if (!imagePopup.classList.contains('hidden')) {
|
||
|
|
chatButton.classList.add('opacity-50', 'cursor-not-allowed');
|
||
|
|
chatButton.disabled = true;
|
||
|
|
} else {
|
||
|
|
chatButton.classList.remove('opacity-50', 'cursor-not-allowed');
|
||
|
|
chatButton.disabled = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
observer.observe(imagePopup, { attributes: true });
|
||
|
|
|
||
|
|
// Initial check
|
||
|
|
if (!imagePopup.classList.contains('hidden')) {
|
||
|
|
chatButton.classList.add('opacity-50', 'cursor-not-allowed');
|
||
|
|
chatButton.disabled = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|