Claude
143fe3d488
- Implemented clean MVC architecture with Router, Controller, and Model base classes - Created database migrations for users, bands, bookings, reviews, and availability - Set up Tailwind CSS with yellow color scheme and modern design - Added Alpine.js for reactive JavaScript components - Configured Vite for asset building and hot module replacement - Created authentication and role-based middleware - Implemented helper functions and configuration system - Added comprehensive README with setup instructions - Configured Apache with proper rewrite rules and security headers - Set up Composer and npm package management with modern dependencies
100 lines
2.1 KiB
JavaScript
100 lines
2.1 KiB
JavaScript
import Alpine from 'alpinejs';
|
|
|
|
// Make Alpine available globally
|
|
window.Alpine = Alpine;
|
|
|
|
// Alpine Components
|
|
Alpine.data('searchBands', () => ({
|
|
query: '',
|
|
filters: {
|
|
genre: '',
|
|
location: '',
|
|
priceMin: '',
|
|
priceMax: '',
|
|
},
|
|
results: [],
|
|
loading: false,
|
|
|
|
init() {
|
|
console.log('Search component initialized');
|
|
},
|
|
|
|
async search() {
|
|
this.loading = true;
|
|
try {
|
|
const params = new URLSearchParams({
|
|
q: this.query,
|
|
...this.filters
|
|
});
|
|
const response = await fetch(`/api/bands/search?${params}`);
|
|
this.results = await response.json();
|
|
} catch (error) {
|
|
console.error('Search error:', error);
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
}
|
|
}));
|
|
|
|
Alpine.data('bookingForm', () => ({
|
|
formData: {
|
|
bandId: '',
|
|
eventDate: '',
|
|
location: '',
|
|
budget: '',
|
|
eventType: '',
|
|
message: ''
|
|
},
|
|
submitting: false,
|
|
|
|
async submit() {
|
|
this.submitting = true;
|
|
try {
|
|
const response = await fetch('/api/bookings', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(this.formData)
|
|
});
|
|
|
|
if (response.ok) {
|
|
alert('Buchungsanfrage erfolgreich gesendet!');
|
|
this.reset();
|
|
}
|
|
} catch (error) {
|
|
console.error('Booking error:', error);
|
|
alert('Es gab einen Fehler. Bitte versuchen Sie es erneut.');
|
|
} finally {
|
|
this.submitting = false;
|
|
}
|
|
},
|
|
|
|
reset() {
|
|
this.formData = {
|
|
bandId: '',
|
|
eventDate: '',
|
|
location: '',
|
|
budget: '',
|
|
eventType: '',
|
|
message: ''
|
|
};
|
|
}
|
|
}));
|
|
|
|
// Initialize Alpine
|
|
Alpine.start();
|
|
|
|
// Smooth scroll for anchor links
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
});
|
|
});
|
|
});
|