1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
document.addEventListener('DOMContentLoaded', function() {
// Initialize calendar for current date only
updateCalendarDate();
// Update calendar date display
function updateCalendarDate() {
const currentDate = new Date();
const options = {
year: 'numeric',
month: 'short',
day: 'numeric',
weekday: 'short'
};
document.getElementById('current-date').textContent =
currentDate.toLocaleDateString('nl-NL', options);
}
// Handle appointment actions
document.addEventListener('click', function(e) {
if (e.target.closest('.edit-appointment')) {
const appointmentId = e.target.closest('.edit-appointment').dataset.id;
editAppointment(appointmentId);
}
if (e.target.closest('.delete-appointment')) {
const appointmentId = e.target.closest('.delete-appointment').dataset.id;
deleteAppointment(appointmentId);
}
if (e.target.closest('.appointment-block')) {
const appointmentBlock = e.target.closest('.appointment-block');
showAppointmentDetails(appointmentBlock);
}
});
// Edit appointment function
function editAppointment(appointmentId) {
// This would typically open a modal or form
const newTimeSlot = prompt('Nieuwe tijd voor de afspraak (bijv. 10:30-11:00):');
if (newTimeSlot && newTimeSlot.trim()) {
// Send update request
fetch(`/appointments/${appointmentId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
},
body: JSON.stringify({
time_slot: newTimeSlot.trim()
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
location.reload(); // Refresh to show changes
} else {
alert('Er is een fout opgetreden bij het bijwerken van de afspraak.');
}
})
.catch(error => {
console.error('Error:', error);
alert('Er is een fout opgetreden bij het bijwerken van de afspraak.');
});
}
}
// Delete appointment function
function deleteAppointment(appointmentId) {
if (confirm('Weet je zeker dat je deze afspraak wilt verwijderen?')) {
fetch(`/appointments/${appointmentId}`, {
method: 'DELETE',
headers: {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
location.reload(); // Refresh to show changes
} else {
alert('Er is een fout opgetreden bij het verwijderen van de afspraak.');
}
})
.catch(error => {
console.error('Error:', error);
alert('Er is een fout opgetreden bij het verwijderen van de afspraak.');
});
}
}
// Show appointment details
function showAppointmentDetails(appointmentBlock) {
const companyName = appointmentBlock.querySelector('.company-name').textContent;
const appointmentTime = appointmentBlock.querySelector('.appointment-time').textContent;
alert(`Afspraak met ${companyName}\nTijd: ${appointmentTime}`);
// This could be replaced with a proper modal or details panel
}
// Add click handler for time slots to create new appointments
document.querySelectorAll('.quarter-slot').forEach(slot => {
slot.addEventListener('click', function(e) {
if (!e.target.closest('.appointment-block')) {
const timeSlot = this.dataset.time;
createAppointment(timeSlot);
}
});
});
// Create new appointment
function createAppointment(timeSlot) {
const companyName = prompt('Bedrijf voor de afspraak:');
if (companyName && companyName.trim()) {
// This is simplified - in reality you'd select from available companies
alert(`Nieuwe afspraak gepland om ${timeSlot} met ${companyName}`);
// Here you would make an API call to create the appointment
}
}
// Highlight current time slot
function highlightCurrentTime() {
const now = new Date();
const currentHour = now.getHours();
const currentMinutes = now.getMinutes();
// Always highlight current time since we're only showing today
const currentQuarter = Math.floor(currentMinutes / 15);
const timeSlot = `${currentHour.toString().padStart(2, '0')}:${(currentQuarter * 15).toString().padStart(2, '0')}`;
const currentSlot = document.querySelector(`[data-time="${timeSlot}"]`);
if (currentSlot) {
currentSlot.style.backgroundColor = 'rgba(255, 193, 7, 0.2)';
currentSlot.style.border = '2px solid #ffc107';
}
}
// Call highlight function
highlightCurrentTime();
// Update highlight every minute
setInterval(highlightCurrentTime, 60000);
});
|
