+
+
+
+
+
@@ -1017,52 +1063,84 @@ for ($h = $startHour; $h <= $endHour; $h++) {
-
-
-
-
-
+
+
+
-
-
-
-
Geen openstaande tickets gevonden in Jira.
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
Geen openstaande tickets gevonden in Jira.
+
+
+
-
-
+
+
+
+
+
+
+
Geen tickets gevonden voor deze filterselectie.
+
@@ -1424,7 +1508,8 @@ for ($h = $startHour; $h <= $endHour; $h++) {
-
+
+
/g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+}
+
+// --- Floating Toast Notificatie ---
+function showWidgetToast(htmlMessage, type = 'success', duration = 3500) {
+ let toast = document.getElementById('widgetGlobalToast');
+ if (!toast) {
+ toast = document.createElement('div');
+ toast.id = 'widgetGlobalToast';
+ toast.className = 'fixed bottom-6 right-6 z-50 transform translate-y-20 opacity-0 transition-all duration-300 pointer-events-auto flex items-center space-x-2.5 px-4 py-2.5 rounded-2xl bg-slate-900/95 dark:bg-white text-white dark:text-slate-900 text-xs font-semibold shadow-2xl border border-slate-700/60 dark:border-slate-200/80';
+ document.body.appendChild(toast);
+ }
+
+ const icon = type === 'success' ? 'check-circle-2' : 'info';
+ toast.innerHTML = `
+
+
+
+
${htmlMessage}
+ `;
+
+ if (typeof lucide !== 'undefined' && lucide.createIcons) {
+ lucide.createIcons();
+ }
+
+ toast.classList.remove('translate-y-20', 'opacity-0');
+ toast.classList.add('translate-y-0', 'opacity-100');
+
+ if (window._widgetToastTimeout) clearTimeout(window._widgetToastTimeout);
+ window._widgetToastTimeout = setTimeout(() => {
+ toast.classList.add('translate-y-20', 'opacity-0');
+ toast.classList.remove('translate-y-0', 'opacity-100');
+ }, duration);
+}
+
+// --- Achtergrond Auto-Save voor Widget Layout ---
+async function persistWidgetLayoutAuto() {
+ try {
+ const payload = focizWidgets.map((w, idx) => ({
+ id: w.id,
+ enabled: !!w.enabled,
+ col_span: parseInt(w.col_span, 10) || 6,
+ order: idx + 1
+ }));
+
+ const res = await fetch('/api/planner.php?action=save_widget_layout', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ layout: payload })
+ });
+ const data = await res.json();
+ return data.success;
+ } catch (e) {
+ console.warn('Fout bij automatisch opslaan widget layout:', e);
+ return false;
+ }
+}
+
+// --- In-Widget Inline Breedte Aanpassen (1/3, 1/2, 2/3, 100%) ---
+function setWidgetSpan(wId, span) {
+ span = parseInt(span, 10);
+ const wrapper = document.getElementById(`widgetWrapper_${wId}`) || document.querySelector(`.fociz-widget-wrapper[data-widget-id="${wId}"]`);
+ if (!wrapper) return;
+
+ // Verwijder alle mogelijke col-span klassen
+ const spanClasses = ['lg:col-span-12', 'lg:col-span-8', 'lg:col-span-7', 'lg:col-span-6', 'lg:col-span-5', 'lg:col-span-4'];
+ spanClasses.forEach(c => wrapper.classList.remove(c));
+
+ // Voeg nieuwe klasse toe
+ wrapper.classList.add(`lg:col-span-${span}`);
+ wrapper.setAttribute('data-col-span', span);
+
+ // Knoppen styling bijwerken binnen deze widget
+ const buttons = wrapper.querySelectorAll('.widget-span-btn');
+ buttons.forEach(btn => {
+ const bSpan = parseInt(btn.getAttribute('data-span'), 10);
+ if (bSpan === span) {
+ btn.className = "widget-span-btn px-1.5 py-0.5 rounded text-[10px] font-bold transition bg-indigo-600 text-white shadow-2xs";
+ } else {
+ btn.className = "widget-span-btn px-1.5 py-0.5 rounded text-[10px] font-bold transition text-slate-500 hover:text-slate-800 dark:hover:text-slate-200";
+ }
+ });
+
+ // Update in-memory array
+ const item = focizWidgets.find(x => x.id === wId);
+ if (item) {
+ item.col_span = span;
+ }
+
+ // Trigger resize voor SVG en diagrammen
+ window.dispatchEvent(new Event('resize'));
+
+ // Automatisch opslaan naar database
+ persistWidgetLayoutAuto();
+
+ const spanDescriptions = {
+ 4: '1/3 schermbreedte (33%)',
+ 6: '1/2 schermbreedte (50%)',
+ 8: '2/3 schermbreedte (66%)',
+ 12: 'volledige breedte (100%)'
+ };
+ showWidgetToast(`Formaat aangepast naar ${spanDescriptions[span] || span + ' kolommen'}`, 'success');
+}
+
+// --- Widget Inklappen / Uitklappen ---
+function toggleWidgetCollapse(wId) {
+ const body = document.getElementById(`widget_body_${wId}`);
+ const icon = document.getElementById(`collapse_icon_${wId}`);
+ if (!body) return;
+
+ const isNowHidden = body.classList.toggle('hidden');
+ if (icon) {
+ if (isNowHidden) {
+ icon.classList.add('rotate-180');
+ } else {
+ icon.classList.remove('rotate-180');
+ }
+ }
+ try {
+ localStorage.setItem(`fociz_widget_collapsed_${wId}`, isNowHidden ? '1' : '0');
+ } catch (e) {}
+}
+
+// --- Widget Verbergen van Scherm met Undo Toast ---
+function hideWidgetOnScreen(wId) {
+ const wrapper = document.getElementById(`widgetWrapper_${wId}`) || document.querySelector(`.fociz-widget-wrapper[data-widget-id="${wId}"]`);
+ const item = focizWidgets.find(x => x.id === wId);
+ const title = item ? item.title : 'Widget';
+
+ if (wrapper) {
+ wrapper.style.transition = 'all 0.25s ease';
+ wrapper.style.opacity = '0';
+ wrapper.style.transform = 'scale(0.95)';
+ setTimeout(() => {
+ wrapper.remove();
+ }, 250);
+ }
+
+ if (item) {
+ item.enabled = false;
+ }
+
+ persistWidgetLayoutAuto();
+ showWidgetToast(`Widget "${title}" verborgen
`, 'info', 6000);
+}
+
+function undoHideWidget(wId) {
+ const item = focizWidgets.find(x => x.id === wId);
+ if (item) {
+ item.enabled = true;
+ }
+ persistWidgetLayoutAuto();
+ showWidgetToast('Widget herstellen...', 'success', 2000);
+ setTimeout(() => {
+ window.location.reload();
+ }, 400);
+}
+
+// --- Direct On-Screen Drag & Drop Engine (HTML5 Native) ---
+let draggedWidgetEl = null;
+let dropPlaceholderEl = null;
+
+function initPlannerWidgets() {
+ const grid = document.getElementById('focizWidgetGrid');
+ if (!grid) return;
+
+ // Herstel eventuele ingeklapte widgets vanuit localStorage
+ document.querySelectorAll('.fociz-widget-wrapper').forEach(wrapper => {
+ const wId = wrapper.getAttribute('data-widget-id');
+ try {
+ if (localStorage.getItem(`fociz_widget_collapsed_${wId}`) === '1') {
+ const body = document.getElementById(`widget_body_${wId}`);
+ const icon = document.getElementById(`collapse_icon_${wId}`);
+ if (body) body.classList.add('hidden');
+ if (icon) icon.classList.add('rotate-180');
+ }
+ } catch(e) {}
+ });
+
+ if (!dropPlaceholderEl) {
+ dropPlaceholderEl = document.createElement('div');
+ dropPlaceholderEl.id = 'widgetDropPlaceholder';
+ dropPlaceholderEl.className = 'col-span-1 min-w-0 border-2 border-dashed border-indigo-400/80 dark:border-indigo-500/80 bg-indigo-50/50 dark:bg-indigo-950/40 rounded-2xl flex items-center justify-center p-8 text-xs font-bold text-indigo-600 dark:text-indigo-400 pointer-events-none transition-all duration-150';
+ dropPlaceholderEl.innerHTML = '
Laat los om hier te plaatsen
';
+ }
+
+ // Luister naar drag handles
+ document.querySelectorAll('.widget-drag-handle').forEach(handle => {
+ handle.setAttribute('draggable', 'true');
+
+ handle.ondragstart = (e) => {
+ const wrapper = handle.closest('.fociz-widget-wrapper');
+ if (!wrapper) return;
+ draggedWidgetEl = wrapper;
+ e.dataTransfer.effectAllowed = 'move';
+ e.dataTransfer.setData('text/plain', wrapper.getAttribute('data-widget-id'));
+
+ // Match column span van dragged widget
+ const curSpan = wrapper.getAttribute('data-col-span') || '6';
+ dropPlaceholderEl.className = `lg:col-span-${curSpan} col-span-1 min-w-0 border-2 border-dashed border-indigo-400/80 dark:border-indigo-500/80 bg-indigo-50/60 dark:bg-indigo-950/50 rounded-2xl flex items-center justify-center p-8 text-xs font-bold text-indigo-600 dark:text-indigo-400 pointer-events-none transition-all`;
+
+ setTimeout(() => {
+ if (draggedWidgetEl) {
+ draggedWidgetEl.classList.add('opacity-40', 'scale-[0.98]', 'ring-2', 'ring-indigo-500/50');
+ }
+ }, 0);
+ };
+
+ handle.ondragend = (e) => {
+ if (draggedWidgetEl) {
+ draggedWidgetEl.classList.remove('opacity-40', 'scale-[0.98]', 'ring-2', 'ring-indigo-500/50');
+ }
+ if (dropPlaceholderEl && dropPlaceholderEl.parentNode) {
+ dropPlaceholderEl.remove();
+ }
+ draggedWidgetEl = null;
+ };
+ });
+
+ // Dragover op grid
+ grid.ondragover = (e) => {
+ if (!draggedWidgetEl) return;
+ e.preventDefault();
+ e.dataTransfer.dropEffect = 'move';
+
+ const target = e.target.closest('.fociz-widget-wrapper');
+ if (target && target !== draggedWidgetEl && target !== dropPlaceholderEl) {
+ const rect = target.getBoundingClientRect();
+ const isAfter = (e.clientY - rect.top) > (rect.height / 2) || (e.clientX - rect.left) > (rect.width / 2);
+ if (isAfter) {
+ if (target.nextSibling !== dropPlaceholderEl) {
+ target.after(dropPlaceholderEl);
+ }
+ } else {
+ if (target.previousSibling !== dropPlaceholderEl) {
+ target.before(dropPlaceholderEl);
+ }
+ }
+ }
+ };
+
+ grid.ondrop = (e) => {
+ if (!draggedWidgetEl) return;
+ e.preventDefault();
+
+ if (dropPlaceholderEl && dropPlaceholderEl.parentNode) {
+ dropPlaceholderEl.replaceWith(draggedWidgetEl);
+ }
+
+ if (draggedWidgetEl) {
+ draggedWidgetEl.classList.remove('opacity-40', 'scale-[0.98]', 'ring-2', 'ring-indigo-500/50');
+ }
+
+ // Volgorde bijwerken
+ const currentWrappers = Array.from(grid.querySelectorAll('.fociz-widget-wrapper'));
+ currentWrappers.forEach((el, index) => {
+ const wId = el.getAttribute('data-widget-id');
+ const item = focizWidgets.find(x => x.id === wId);
+ if (item) {
+ item.order = index + 1;
+ }
+ });
+
+ persistWidgetLayoutAuto();
+ showWidgetToast('Widget verplaatst & indeling opgeslagen', 'success');
+
+ draggedWidgetEl = null;
+ };
+}
+
+// --- Jira Queue & Tickets Widget Engine (v2.0) ---
+const plannerJiraAssigned = ;
+const plannerJiraAll = ;
+const plannerTicketStore = new Map();
+plannerJiraAll.forEach(iss => {
+ if (iss && iss.key) plannerTicketStore.set(iss.key, iss);
+});
+
+let activePlannerJiraQueue = ''; // '': Alle, 'my': Mijn, 'DX': DX Queue, 'SD': SD Queue
+
+function isIssueInQueue(iss, qCode) {
+ if (!qCode) return true;
+ const code = qCode.toUpperCase();
+ const ol = (iss.onderwerp_logging || '').toLowerCase().trim();
+ const sum = (iss.summary || '').toLowerCase();
+
+ const dxTerms = ['koppeling', 'sso', 'endpoint', 'rest', 'datadump', 'uwv', 'migratie', 'api', 'webhook', 'integrat'];
+ const matchesDx = dxTerms.some(t => ol.includes(t) || sum.includes(t));
+
+ if (code === 'DX') return matchesDx;
+ if (code === 'SD') return !matchesDx;
+ return true;
+}
+
+function setPlannerJiraQueue(queueCode) {
+ activePlannerJiraQueue = queueCode;
+
+ // Tab styling bijwerken
+ ['all', 'my', 'DX', 'SD'].forEach(tab => {
+ const btn = document.getElementById(`pjPill_${tab}`);
+ if (!btn) return;
+ const isActive = (tab === 'all' && !queueCode) || (tab === queueCode);
+ if (isActive) {
+ btn.className = "planner-jira-tab px-2.5 py-1 rounded-lg text-[11px] font-bold transition bg-indigo-600 text-white shadow-2xs flex-shrink-0 cursor-pointer";
+ } else {
+ btn.className = "planner-jira-tab px-2.5 py-1 rounded-lg text-[11px] font-bold transition bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 flex-shrink-0 cursor-pointer";
+ }
+ });
+
+ filterPlannerJira();
+}
+
+function filterPlannerJira() {
+ const searchVal = (document.getElementById('plannerJiraSearch')?.value || '').toLowerCase().trim();
+ const listContainer = document.getElementById('plannerJiraListContainer');
+ const emptyState = document.getElementById('plannerJiraEmptyState');
+ if (!listContainer) return;
+
+ // Tellers bijwerken
+ let dxCount = 0;
+ let sdCount = 0;
+ plannerJiraAll.forEach(iss => {
+ if (isIssueInQueue(iss, 'DX')) dxCount++;
+ else sdCount++;
+ });
+ const elAll = document.getElementById('pjCount_all');
+ const elMy = document.getElementById('pjCount_my');
+ const elDx = document.getElementById('pjCount_DX');
+ const elSd = document.getElementById('pjCount_SD');
+ if (elAll) elAll.innerText = plannerJiraAll.length;
+ if (elMy) elMy.innerText = plannerJiraAssigned.length;
+ if (elDx) elDx.innerText = dxCount;
+ if (elSd) elSd.innerText = sdCount;
+
+ // Filteren
+ let filtered = plannerJiraAll.filter(iss => {
+ if (activePlannerJiraQueue === 'my') {
+ const isAssigned = plannerJiraAssigned.some(a => a.key === iss.key);
+ if (!isAssigned) return false;
+ } else if (activePlannerJiraQueue === 'DX') {
+ if (!isIssueInQueue(iss, 'DX')) return false;
+ } else if (activePlannerJiraQueue === 'SD') {
+ if (!isIssueInQueue(iss, 'SD')) return false;
+ }
+
+ if (searchVal) {
+ const k = (iss.key || '').toLowerCase();
+ const s = (iss.summary || '').toLowerCase();
+ const p = (iss.project || '').toLowerCase();
+ const ol = (iss.onderwerp_logging || '').toLowerCase();
+ if (!k.includes(searchVal) && !s.includes(searchVal) && !p.includes(searchVal) && !ol.includes(searchVal)) {
+ return false;
+ }
+ }
+ return true;
+ });
+
+ // Badge totale resultaten bijwerken
+ const badge = document.getElementById('plannerJiraCountBadge');
+ if (badge) badge.innerText = filtered.length;
+
+ if (filtered.length === 0) {
+ listContainer.innerHTML = '';
+ if (emptyState) emptyState.classList.remove('hidden');
+ return;
+ }
+
+ if (emptyState) emptyState.classList.add('hidden');
+
+ listContainer.innerHTML = filtered.slice(0, 15).map(issue => {
+ const keyEsc = escapeHtml(issue.key || '');
+ const summaryEsc = escapeHtml(issue.summary || '');
+ const statusEsc = escapeHtml(issue.status || 'To Do');
+ const priorityEsc = escapeHtml(issue.priority || 'Medium');
+ const isDx = isIssueInQueue(issue, 'DX');
+ const queuePill = isDx
+ ? '
DX'
+ : '
SD';
+
+ return `
+
+
+
+
+ ${keyEsc}
+
+ ${queuePill}
+
+ ${summaryEsc}
+
+
+
+ ${statusEsc} • ${priorityEsc}
+
+
+
+
+
+ `;
+ }).join('');
+
+ if (typeof lucide !== 'undefined' && lucide.createIcons) {
+ lucide.createIcons();
+ }
+}
+
+async function quickImportJiraByKey(btn, issueKey) {
+ const issue = plannerTicketStore.get(issueKey);
+ if (!issue) return;
+ return quickImportJira(btn, issue.summary || issueKey, issue.key, issue.url || '');
+}
+
// --- Direct E-mail Inplannen als Dagtaak ---
function openPlanEmailDirect(mailId, subject, sender, webLink) {
document.getElementById('planEmailId').value = mailId;
@@ -2045,6 +2557,10 @@ async function switchPlannerDate(newDate, event = null, pushState = true) {
if (typeof lucide !== 'undefined' && lucide.createIcons) {
lucide.createIcons();
}
+ initPlannerWidgets();
+ if (document.getElementById('plannerJiraListContainer')) {
+ filterPlannerJira();
+ }
// Garandeer dat het scherm exact op dezelfde scrollhoogte blijft
window.scrollTo({
@@ -2679,6 +3195,10 @@ function triggerManualSync() {
// Initialisatie bij pagina-inladen
document.addEventListener('DOMContentLoaded', () => {
restoreTimerStateIfAny();
+ initPlannerWidgets();
+ if (document.getElementById('plannerJiraListContainer')) {
+ filterPlannerJira();
+ }
if (isOutlookConnected) {
if (syncIntervalSeconds > 0) {