diff --git a/planner.php b/planner.php index 8098fee..d6c453a 100644 --- a/planner.php +++ b/planner.php @@ -994,13 +994,8 @@ for ($h = $startHour; $h <= $endHour; $h++) { - +
- -
- +
', , ''); return false;" + data-date="" + data-blocked="" + class="fociz-card-interactive group relative flex flex-col p-3 rounded-xl border transition-all text-left " + : 'bg-slate-100/60 dark:bg-[#080b11]/60 border-dashed border-slate-200/80 dark:border-slate-800/80 hover:border-slate-300 dark:hover:border-slate-700 hover:bg-white dark:hover:bg-[#0f141f] shadow-2xs')) ?>" + title="" >
- +
- - - + + + - + Weekend @@ -1094,40 +1095,16 @@ for ($h = $startHour; $h <= $endHour; $h++) {
- - -
-
-
- 🏖️ -
-
-
-

- -

- - - -
-

- Geblokkeerd van t/m - - • - -

-
-
-
- - -
+ +
@@ -2435,30 +2412,17 @@ if ($isAjaxRequest) {
-
- - - - -
- +
- +
@@ -2493,20 +2457,6 @@ if ($isAjaxRequest) {
- -
-
- Actieve & Toekomstige Blokkades - -
-
-
Laden...
-
-
-
+ + `; + } else { + statusBadge.innerHTML = `Beschikbaar`; + + actions.innerHTML = ` + + + +
+ + `; + } + + if (window.lucide && lucide.createIcons) { + lucide.createIcons(); + } + + menu.classList.remove('hidden'); + + const menuWidth = 220; + const menuHeight = menu.offsetHeight || 160; + let posX = e.clientX; + let posY = e.clientY; + + if (posX + menuWidth > window.innerWidth - 10) { + posX = window.innerWidth - menuWidth - 15; + } + if (posY + menuHeight > window.innerHeight - 10) { + posY = window.innerHeight - menuHeight - 15; + } + + menu.style.left = `${posX}px`; + menu.style.top = `${posY}px`; +} + +function closeDayContextMenu() { + const menu = document.getElementById('dayContextMenu'); + if (menu) { + menu.classList.add('hidden'); + } + activeContextMenuDay = null; +} + +document.addEventListener('click', function(e) { + const menu = document.getElementById('dayContextMenu'); + if (menu && !menu.contains(e.target)) { + closeDayContextMenu(); + } +}); + +document.addEventListener('keydown', function(e) { + if (e.key === 'Escape') { + closeDayContextMenu(); + } +}); + +async function quickBlockDay(dateStr, title, blockType) { + closeDayContextMenu(); + + try { + const res = await fetch('/api/planner.php?action=save_calendar_block', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + title: title, + block_type: blockType, + start_date: dateStr, + end_date: dateStr, + sync_to_outlook: true + }) + }); + + const data = await res.json(); + if (data && data.success) { + showWidgetToast(`${title} ingepland voor ${dateStr}`, 'success'); + setTimeout(() => { + window.location.reload(); + }, 300); + } else { + alert(data.error || 'Fout bij inplannen van blokkade'); + } + } catch (err) { + alert('Netwerkfout bij inplannen van blokkade'); + } +} + +async function quickUnblockDay(blockId) { + closeDayContextMenu(); + if (!blockId) return; + + try { + const res = await fetch('/api/planner.php?action=delete_calendar_block', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ id: blockId }) + }); + + const data = await res.json(); + if (data && data.success) { + showWidgetToast('Blokkade opgeheven', 'success'); + setTimeout(() => { + window.location.reload(); + }, 300); + } else { + alert(data.error || 'Fout bij opheffen van blokkade'); + } + } catch (err) { + alert('Netwerkfout bij opheffen van blokkade'); + } +} + function openCalendarBlockModal(existingBlock = null, defaultDate = null) { const modal = document.getElementById('calendarBlockModal'); if (!modal) return; @@ -2862,7 +2963,7 @@ function openCalendarBlockModal(existingBlock = null, defaultDate = null) { deleteBtn.classList.remove('hidden'); deleteBtn.classList.add('flex'); } - if (modalTitle) modalTitle.textContent = 'Blokkade Bewerken'; + if (modalTitle) modalTitle.textContent = 'Blokkade Aanpassen'; } else { if (idInput) idInput.value = 0; selectCalBlockType('VACATION'); @@ -2874,11 +2975,9 @@ function openCalendarBlockModal(existingBlock = null, defaultDate = null) { deleteBtn.classList.add('hidden'); deleteBtn.classList.remove('flex'); } - if (modalTitle) modalTitle.textContent = 'Dagen Blokkeren / Vakantie'; + if (modalTitle) modalTitle.textContent = 'Meerdere Dagen Blokkeren'; } - loadCalendarBlocksList(); - modal.classList.remove('hidden'); modal.classList.add('flex'); @@ -2895,63 +2994,6 @@ function closeCalendarBlockModal() { } } -async function loadCalendarBlocksList() { - const container = document.getElementById('calendarBlocksListContainer'); - if (!container) return; - - try { - const res = await fetch('/api/planner.php?action=get_calendar_blocks'); - const data = await res.json(); - - if (!data.success || !Array.isArray(data.blocks) || data.blocks.length === 0) { - container.innerHTML = '

Geen actieve of geplande blokkades gevonden.

'; - return; - } - - const icons = { - 'VACATION': '🏖️', - 'LEAVE': '✈️', - 'SICK': '🤒', - 'FOCUS': '🎯' - }; - - container.innerHTML = data.blocks.map(b => { - const icon = icons[b.block_type] || '📅'; - const safeTitle = escapeHtml(b.title); - const dateStr = b.start_date === b.end_date - ? b.start_date - : `${b.start_date} t/m ${b.end_date}`; - const blockJson = JSON.stringify(b).replace(/"/g, '"'); - - return ` -
-
- ${icon} -
-
${safeTitle}
-
${dateStr}
-
-
-
- - -
-
- `; - }).join(''); - - if (typeof lucide !== 'undefined' && lucide.createIcons) { - lucide.createIcons(); - } - } catch (e) { - container.innerHTML = '

Kon blokkades niet laden.

'; - } -} - async function submitCalendarBlock(event) { event.preventDefault(); const btn = document.getElementById('btnSaveCalBlock');