68 lines
2.4 KiB
JavaScript
68 lines
2.4 KiB
JavaScript
document.getElementById('wishForm').addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
|
|
const category = document.getElementById('category').value;
|
|
const link = document.getElementById('link').value;
|
|
const title = document.getElementById('title').value;
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
|
|
// Modal-Elemente
|
|
const popup = document.getElementById('popup');
|
|
const popupMessage = document.getElementById('popupMessage');
|
|
const popupOverlay = document.getElementById('popupOverlay');
|
|
const modalIcon = document.getElementById('modalIcon');
|
|
const modalTitle = document.getElementById('modalTitle');
|
|
|
|
// Button State ändern (Lade-Animation)
|
|
const originalBtnText = submitBtn.textContent;
|
|
submitBtn.textContent = 'Sende... ⏳';
|
|
submitBtn.disabled = true;
|
|
submitBtn.style.opacity = '0.7';
|
|
|
|
try {
|
|
const response = await fetch('/api/sendWish', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ category, link, title })
|
|
});
|
|
|
|
if (response.ok) {
|
|
modalIcon.textContent = '✅';
|
|
modalTitle.textContent = 'Erfolgreich!';
|
|
popupMessage.textContent = 'Dein Wunsch wurde an den Bot weitergeleitet.';
|
|
} else {
|
|
throw new Error('Server-Fehler');
|
|
}
|
|
} catch (error) {
|
|
modalIcon.textContent = '⚠️';
|
|
modalTitle.textContent = 'Fehler';
|
|
popupMessage.textContent = 'Es ist ein Fehler aufgetreten. Bitte versuche es später erneut.';
|
|
console.error(error);
|
|
} finally {
|
|
// Button Reset
|
|
submitBtn.textContent = originalBtnText;
|
|
submitBtn.disabled = false;
|
|
submitBtn.style.opacity = '1';
|
|
|
|
// Popup anzeigen
|
|
popup.style.display = 'block';
|
|
popupOverlay.style.display = 'block';
|
|
|
|
// Formular zurücksetzen
|
|
event.target.reset();
|
|
}
|
|
});
|
|
|
|
// Popup schließen
|
|
document.getElementById('closePopup').addEventListener('click', () => {
|
|
document.getElementById('popup').style.display = 'none';
|
|
document.getElementById('popupOverlay').style.display = 'none';
|
|
});
|
|
|
|
// Schließen beim Klick auf Overlay
|
|
document.getElementById('popupOverlay').addEventListener('click', () => {
|
|
document.getElementById('popup').style.display = 'none';
|
|
document.getElementById('popupOverlay').style.display = 'none';
|
|
}); |