Upload files to "berlayar-sinema-app"
This commit is contained in:
358
berlayar-sinema-app/script.js
Normal file
358
berlayar-sinema-app/script.js
Normal file
@@ -0,0 +1,358 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user