Dev #45
+1
-4
@@ -249,10 +249,7 @@ $pageTitle = "Fociz — Inloggen";
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<input type="text" name="totp_code" required autofocus maxlength="9" placeholder="000 000" class="w-full text-center tracking-[0.4em] font-mono text-2xl bg-slate-50 dark:bg-[#0c0f17] border border-slate-300 dark:border-slate-800 rounded-xl py-3 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-600 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition">
|
<input type="text" name="totp_code" required autofocus maxlength="6" inputmode="numeric" autocomplete="one-time-code" placeholder="000 000" class="w-full text-center tracking-[0.4em] font-mono text-2xl bg-slate-50 dark:bg-[#0c0f17] border border-slate-300 dark:border-slate-800 rounded-xl py-3 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-600 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition">
|
||||||
<span class="text-[11px] text-slate-500 dark:text-slate-500 text-center block mt-1">
|
|
||||||
Tip: U kunt ook een 8-cijferige herstelcode invoeren.
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex space-x-3">
|
<div class="flex space-x-3">
|
||||||
|
|||||||
+374
-15
@@ -1296,7 +1296,7 @@ for ($h = $startHour; $h <= $endHour; $h++) {
|
|||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<?php foreach (array_slice($jiraAllIssues, 0, 8) as $issue): ?>
|
<?php foreach (array_slice($jiraAllIssues, 0, 8) as $issue): ?>
|
||||||
<div class="fociz-card-interactive flex items-center justify-between p-2.5 rounded-xl bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-200/80 dark:border-slate-800/80 hover:border-indigo-300 dark:hover:border-indigo-600/50 transition shadow-2xs">
|
<div class="fociz-card-interactive flex items-center justify-between p-2.5 rounded-xl bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-200/80 dark:border-slate-800/80 hover:border-indigo-300 dark:hover:border-indigo-600/50 transition shadow-2xs">
|
||||||
<div class="truncate mr-2 min-w-0 flex-1">
|
<div class="truncate mr-2 min-w-0 flex-1 cursor-pointer" onclick="openJiraTicketDetail('<?= htmlspecialchars($issue['key'] ?? '') ?>')" title="Klik voor ticketdetails">
|
||||||
<div class="flex items-center space-x-2">
|
<div class="flex items-center space-x-2">
|
||||||
<span class="font-mono text-[10px] font-bold text-sky-700 dark:text-sky-400 bg-sky-50 dark:bg-sky-500/10 border border-sky-200 dark:border-sky-500/20 px-1.5 py-0.5 rounded">
|
<span class="font-mono text-[10px] font-bold text-sky-700 dark:text-sky-400 bg-sky-50 dark:bg-sky-500/10 border border-sky-200 dark:border-sky-500/20 px-1.5 py-0.5 rounded">
|
||||||
<?= htmlspecialchars($issue['key'] ?? '') ?>
|
<?= htmlspecialchars($issue['key'] ?? '') ?>
|
||||||
@@ -1315,7 +1315,7 @@ for ($h = $startHour; $h <= $endHour; $h++) {
|
|||||||
class="flex items-center space-x-1 text-[11px] font-semibold text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 bg-indigo-50 dark:bg-indigo-500/10 hover:bg-indigo-100 dark:hover:bg-indigo-500/20 border border-indigo-200 dark:border-indigo-500/20 px-2.5 py-1 rounded-lg transition flex-shrink-0 cursor-pointer"
|
class="flex items-center space-x-1 text-[11px] font-semibold text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 bg-indigo-50 dark:bg-indigo-500/10 hover:bg-indigo-100 dark:hover:bg-indigo-500/20 border border-indigo-200 dark:border-indigo-500/20 px-2.5 py-1 rounded-lg transition flex-shrink-0 cursor-pointer"
|
||||||
title="Plan in als dagtaak"
|
title="Plan in als dagtaak"
|
||||||
>
|
>
|
||||||
<i data-lucide="plus" class="w-3 h-3"></i>
|
<i data-lucide="calendar-plus" class="w-3 h-3"></i>
|
||||||
<span>Plan</span>
|
<span>Plan</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -1713,6 +1713,146 @@ if ($isAjaxRequest) {
|
|||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<!-- Modal: Jira Ticket Inplannen (met tijdsuggestie) -->
|
||||||
|
<div id="jiraPlanModal" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4">
|
||||||
|
<div class="fociz-card p-6 w-full max-w-md shadow-2xl space-y-4">
|
||||||
|
<div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800/80">
|
||||||
|
<div class="flex items-center space-x-2.5">
|
||||||
|
<div class="w-8 h-8 rounded-xl bg-sky-50 dark:bg-sky-500/10 border border-sky-200 dark:border-sky-500/20 text-sky-600 dark:text-sky-400 flex items-center justify-center">
|
||||||
|
<i data-lucide="calendar-plus" class="w-4 h-4"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm font-bold text-slate-900 dark:text-white">Jira Ticket Inplannen</h3>
|
||||||
|
<p class="text-[10px] text-slate-500 dark:text-slate-400" id="jiraPlanModalKey">—</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button onclick="closeJiraPlanModal()" class="p-1.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition cursor-pointer">
|
||||||
|
<i data-lucide="x" class="w-4 h-4"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Ticket samenvatting -->
|
||||||
|
<div class="bg-slate-50 dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-slate-800 p-3">
|
||||||
|
<p class="text-xs font-semibold text-slate-800 dark:text-slate-200 leading-snug" id="jiraPlanModalSummary">—</p>
|
||||||
|
<div class="flex items-center space-x-2 mt-1.5">
|
||||||
|
<span class="text-[10px] text-slate-500" id="jiraPlanModalStatus">—</span>
|
||||||
|
<span class="text-slate-300 dark:text-slate-600">•</span>
|
||||||
|
<span class="text-[10px] text-slate-500" id="jiraPlanModalPriority">—</span>
|
||||||
|
<span id="jiraPlanModalSpBadge" class="hidden px-1.5 py-0.5 rounded bg-violet-50 dark:bg-violet-500/10 border border-violet-200 dark:border-violet-500/20 text-violet-700 dark:text-violet-400 font-mono text-[9px] font-bold"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tijdsuggestie -->
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div>
|
||||||
|
<label class="block text-[11px] font-bold text-slate-700 dark:text-slate-300 mb-1.5">Starttijd (suggestie)</label>
|
||||||
|
<input type="time" id="jiraPlanStartTime" class="w-full bg-white dark:bg-[#0c0f17] border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||||
|
<p class="text-[10px] text-slate-400 mt-1">Laat leeg voor handmatig inplannen op de tijdlijn</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-[11px] font-bold text-slate-700 dark:text-slate-300 mb-1.5">Duur</label>
|
||||||
|
<div class="grid grid-cols-4 gap-2">
|
||||||
|
<button type="button" onclick="setJiraPlanDuration(15)" class="jira-plan-dur-btn px-2 py-1.5 rounded-xl border text-[11px] font-bold transition cursor-pointer" data-dur="15">15m</button>
|
||||||
|
<button type="button" onclick="setJiraPlanDuration(30)" class="jira-plan-dur-btn px-2 py-1.5 rounded-xl border text-[11px] font-bold transition cursor-pointer" data-dur="30">30m</button>
|
||||||
|
<button type="button" onclick="setJiraPlanDuration(60)" class="jira-plan-dur-btn px-2 py-1.5 rounded-xl border text-[11px] font-bold transition cursor-pointer" data-dur="60">1u</button>
|
||||||
|
<button type="button" onclick="setJiraPlanDuration(90)" class="jira-plan-dur-btn px-2 py-1.5 rounded-xl border text-[11px] font-bold transition cursor-pointer" data-dur="90">1,5u</button>
|
||||||
|
</div>
|
||||||
|
<input type="hidden" id="jiraPlanDuration" value="15">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-[11px] font-bold text-slate-700 dark:text-slate-300 mb-1.5">Prioriteit</label>
|
||||||
|
<select id="jiraPlanPriority" class="w-full bg-white dark:bg-[#0c0f17] border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||||
|
<option value="P1">P1 — Urgent</option>
|
||||||
|
<option value="P2">P2 — Hoog</option>
|
||||||
|
<option value="P3" selected>P3 — Normaal</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex space-x-3 pt-1">
|
||||||
|
<button type="button" onclick="closeJiraPlanModal()" class="flex-1 px-4 py-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 font-semibold text-sm transition cursor-pointer">
|
||||||
|
Annuleren
|
||||||
|
</button>
|
||||||
|
<button type="button" id="btnSubmitJiraPlan" onclick="submitJiraPlanModal()" class="flex-1 px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-sm transition shadow-xs flex items-center justify-center space-x-2 cursor-pointer">
|
||||||
|
<i data-lucide="calendar-plus" class="w-4 h-4"></i>
|
||||||
|
<span>Inplannen</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Modal: Jira Ticket Detail (popup bij klikken op ticket) -->
|
||||||
|
<div id="jiraTicketDetailModal" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4">
|
||||||
|
<div class="fociz-card p-0 w-full max-w-lg shadow-2xl overflow-hidden flex flex-col max-h-[85vh]">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-start justify-between p-5 border-b border-slate-100 dark:border-slate-800/80 flex-shrink-0">
|
||||||
|
<div class="space-y-1 min-w-0 flex-1 mr-3">
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<span class="font-mono text-[11px] font-bold text-sky-700 dark:text-sky-400 bg-sky-50 dark:bg-sky-500/10 border border-sky-200 dark:border-sky-500/20 px-2 py-0.5 rounded flex-shrink-0" id="jiraDetailKey">—</span>
|
||||||
|
<span class="text-[10px] px-2 py-0.5 rounded-full font-bold" id="jiraDetailStatusBadge">—</span>
|
||||||
|
<span class="text-[10px] px-2 py-0.5 rounded-full font-bold" id="jiraDetailPriorityBadge">—</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-sm font-bold text-slate-900 dark:text-white leading-snug" id="jiraDetailSummary">—</h3>
|
||||||
|
</div>
|
||||||
|
<button onclick="closeJiraTicketDetailModal()" class="p-1.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition cursor-pointer flex-shrink-0">
|
||||||
|
<i data-lucide="x" class="w-4 h-4"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Body: scrollable -->
|
||||||
|
<div class="overflow-y-auto flex-1 p-5 space-y-4">
|
||||||
|
<!-- Meta info -->
|
||||||
|
<div class="grid grid-cols-2 gap-3">
|
||||||
|
<div class="bg-slate-50 dark:bg-slate-900/50 rounded-xl p-3 border border-slate-200 dark:border-slate-800">
|
||||||
|
<p class="text-[10px] text-slate-500 font-semibold uppercase tracking-wide mb-0.5">Aangemeld bij</p>
|
||||||
|
<p class="text-xs font-bold text-slate-900 dark:text-white" id="jiraDetailAssignee">—</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-slate-50 dark:bg-slate-900/50 rounded-xl p-3 border border-slate-200 dark:border-slate-800">
|
||||||
|
<p class="text-[10px] text-slate-500 font-semibold uppercase tracking-wide mb-0.5">Story Points</p>
|
||||||
|
<p class="text-xs font-bold text-slate-900 dark:text-white" id="jiraDetailSp">—</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-slate-50 dark:bg-slate-900/50 rounded-xl p-3 border border-slate-200 dark:border-slate-800">
|
||||||
|
<p class="text-[10px] text-slate-500 font-semibold uppercase tracking-wide mb-0.5">Project</p>
|
||||||
|
<p class="text-xs font-bold text-slate-900 dark:text-white" id="jiraDetailProject">—</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-slate-50 dark:bg-slate-900/50 rounded-xl p-3 border border-slate-200 dark:border-slate-800">
|
||||||
|
<p class="text-[10px] text-slate-500 font-semibold uppercase tracking-wide mb-0.5">Type</p>
|
||||||
|
<p class="text-xs font-bold text-slate-900 dark:text-white" id="jiraDetailType">—</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Beschrijving -->
|
||||||
|
<div id="jiraDetailDescSection" class="hidden">
|
||||||
|
<p class="text-[10px] text-slate-500 font-semibold uppercase tracking-wide mb-1.5">Beschrijving</p>
|
||||||
|
<div class="bg-slate-50 dark:bg-slate-900/50 rounded-xl p-3 border border-slate-200 dark:border-slate-800 text-xs text-slate-700 dark:text-slate-300 leading-relaxed whitespace-pre-wrap max-h-40 overflow-y-auto" id="jiraDetailDesc"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Labels -->
|
||||||
|
<div id="jiraDetailLabelsSection" class="hidden">
|
||||||
|
<p class="text-[10px] text-slate-500 font-semibold uppercase tracking-wide mb-1.5">Labels</p>
|
||||||
|
<div class="flex flex-wrap gap-1.5" id="jiraDetailLabels"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="flex items-center justify-between p-4 border-t border-slate-100 dark:border-slate-800/80 flex-shrink-0 gap-3">
|
||||||
|
<a href="#" target="_blank" id="jiraDetailOpenLink" class="flex items-center space-x-1.5 text-xs font-semibold text-sky-600 dark:text-sky-400 hover:underline cursor-pointer">
|
||||||
|
<i data-lucide="external-link" class="w-3.5 h-3.5"></i>
|
||||||
|
<span>Openen in Jira</span>
|
||||||
|
</a>
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<button type="button" onclick="closeJiraTicketDetailModal()" class="px-3 py-1.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 font-semibold text-xs transition cursor-pointer">
|
||||||
|
Sluiten
|
||||||
|
</button>
|
||||||
|
<button type="button" onclick="openJiraPlanFromDetail()" class="flex items-center space-x-1.5 px-3 py-1.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-xs transition cursor-pointer">
|
||||||
|
<i data-lucide="calendar-plus" class="w-3.5 h-3.5"></i>
|
||||||
|
<span>Inplannen</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Modal: Taak & Tijdblok Bewerken (Vrij invullen van tijden & duur) -->
|
<!-- Modal: Taak & Tijdblok Bewerken (Vrij invullen van tijden & duur) -->
|
||||||
<div id="editTaskModal" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4">
|
<div id="editTaskModal" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4">
|
||||||
<div class="fociz-card p-6 w-full max-w-lg shadow-2xl space-y-4">
|
<div class="fociz-card p-6 w-full max-w-lg shadow-2xl space-y-4">
|
||||||
@@ -2638,25 +2778,19 @@ function saveCurrentGridOrderIfChanged() {
|
|||||||
const grid = document.getElementById('focizWidgetGrid');
|
const grid = document.getElementById('focizWidgetGrid');
|
||||||
if (!grid) return;
|
if (!grid) return;
|
||||||
const currentWrappers = Array.from(grid.querySelectorAll('.fociz-widget-wrapper'));
|
const currentWrappers = Array.from(grid.querySelectorAll('.fociz-widget-wrapper'));
|
||||||
const currentIndex = activeDraggedWrapper ? currentWrappers.indexOf(activeDraggedWrapper) : -1;
|
|
||||||
|
|
||||||
let hasOrderChanged = false;
|
// Synchroniseer de order in focizWidgets met de actuele DOM-volgorde
|
||||||
currentWrappers.forEach((el, index) => {
|
currentWrappers.forEach((el, index) => {
|
||||||
const wId = el.getAttribute('data-widget-id');
|
const wId = el.getAttribute('data-widget-id');
|
||||||
const item = focizWidgets.find(x => x.id === wId);
|
const item = focizWidgets.find(x => x.id === wId);
|
||||||
if (item) {
|
if (item) {
|
||||||
if (item.order !== index + 1) {
|
|
||||||
item.order = index + 1;
|
item.order = index + 1;
|
||||||
hasOrderChanged = true;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (hasOrderChanged || (dragInitialIndex !== -1 && currentIndex !== dragInitialIndex)) {
|
// Altijd opslaan na een drag (zet ook de volgorde opnieuw neer)
|
||||||
// Geruisloos opslaan via AJAX
|
|
||||||
persistWidgetLayoutAuto();
|
persistWidgetLayoutAuto();
|
||||||
showWidgetToast('Widget verplaatst & indeling opgeslagen', 'success');
|
showWidgetToast('Widget indeling opgeslagen', 'success');
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Sluit popup menu's als er buiten wordt geklikt
|
// Sluit popup menu's als er buiten wordt geklikt
|
||||||
@@ -2777,7 +2911,7 @@ function filterPlannerJira() {
|
|||||||
|
|
||||||
return `
|
return `
|
||||||
<div class="fociz-card-interactive flex items-center justify-between p-2.5 rounded-xl bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-200/80 dark:border-slate-800/80 hover:border-indigo-300 dark:hover:border-indigo-600/50 transition shadow-2xs">
|
<div class="fociz-card-interactive flex items-center justify-between p-2.5 rounded-xl bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-200/80 dark:border-slate-800/80 hover:border-indigo-300 dark:hover:border-indigo-600/50 transition shadow-2xs">
|
||||||
<div class="truncate mr-2 min-w-0 flex-1">
|
<div class="truncate mr-2 min-w-0 flex-1 cursor-pointer" onclick="openJiraTicketDetail('${keyEsc}')" title="Klik voor ticketdetails">
|
||||||
<div class="flex items-center space-x-2">
|
<div class="flex items-center space-x-2">
|
||||||
<span class="font-mono text-[10px] font-bold text-sky-700 dark:text-sky-400 bg-sky-50 dark:bg-sky-500/10 border border-sky-200 dark:border-sky-500/20 px-1.5 py-0.5 rounded">
|
<span class="font-mono text-[10px] font-bold text-sky-700 dark:text-sky-400 bg-sky-50 dark:bg-sky-500/10 border border-sky-200 dark:border-sky-500/20 px-1.5 py-0.5 rounded">
|
||||||
${keyEsc}
|
${keyEsc}
|
||||||
@@ -2797,7 +2931,7 @@ function filterPlannerJira() {
|
|||||||
class="flex items-center space-x-1 text-[11px] font-semibold text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 bg-indigo-50 dark:bg-indigo-500/10 hover:bg-indigo-100 dark:hover:bg-indigo-500/20 border border-indigo-200 dark:border-indigo-500/20 px-2.5 py-1 rounded-lg transition flex-shrink-0 cursor-pointer"
|
class="flex items-center space-x-1 text-[11px] font-semibold text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 bg-indigo-50 dark:bg-indigo-500/10 hover:bg-indigo-100 dark:hover:bg-indigo-500/20 border border-indigo-200 dark:border-indigo-500/20 px-2.5 py-1 rounded-lg transition flex-shrink-0 cursor-pointer"
|
||||||
title="Plan in als dagtaak"
|
title="Plan in als dagtaak"
|
||||||
>
|
>
|
||||||
<i data-lucide="plus" class="w-3 h-3"></i>
|
<i data-lucide="calendar-plus" class="w-3 h-3"></i>
|
||||||
<span>Plan</span>
|
<span>Plan</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -2809,12 +2943,237 @@ function filterPlannerJira() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function quickImportJiraByKey(btn, issueKey) {
|
// --- Jira Ticket Detail Modal ---
|
||||||
|
let _jiraDetailCurrentIssue = null;
|
||||||
|
|
||||||
|
function openJiraTicketDetail(issueKey) {
|
||||||
const issue = plannerTicketStore.get(issueKey);
|
const issue = plannerTicketStore.get(issueKey);
|
||||||
if (!issue) return;
|
if (!issue) return;
|
||||||
return quickImportJira(btn, issue.summary || issueKey, issue.key, issue.url || '');
|
_jiraDetailCurrentIssue = issue;
|
||||||
|
|
||||||
|
// Vul header
|
||||||
|
document.getElementById('jiraDetailKey').textContent = issue.key || '—';
|
||||||
|
document.getElementById('jiraDetailSummary').textContent = issue.summary || '—';
|
||||||
|
|
||||||
|
// Status badge
|
||||||
|
const statusEl = document.getElementById('jiraDetailStatusBadge');
|
||||||
|
const status = issue.status || '—';
|
||||||
|
statusEl.textContent = status;
|
||||||
|
statusEl.className = 'text-[10px] px-2 py-0.5 rounded-full font-bold bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400';
|
||||||
|
|
||||||
|
// Priority badge
|
||||||
|
const priorityEl = document.getElementById('jiraDetailPriorityBadge');
|
||||||
|
const prio = issue.priority || '—';
|
||||||
|
priorityEl.textContent = prio;
|
||||||
|
const prioClass = prio === 'Highest' || prio === 'High'
|
||||||
|
? 'text-[10px] px-2 py-0.5 rounded-full font-bold bg-rose-50 dark:bg-rose-500/10 text-rose-600 dark:text-rose-400'
|
||||||
|
: prio === 'Medium'
|
||||||
|
? 'text-[10px] px-2 py-0.5 rounded-full font-bold bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400'
|
||||||
|
: 'text-[10px] px-2 py-0.5 rounded-full font-bold bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400';
|
||||||
|
priorityEl.className = prioClass;
|
||||||
|
|
||||||
|
// Meta velden
|
||||||
|
document.getElementById('jiraDetailAssignee').textContent = issue.assignee_name || issue.assignee || 'Niet toegewezen';
|
||||||
|
document.getElementById('jiraDetailSp').textContent = issue.story_points ? `${issue.story_points} SP` : '—';
|
||||||
|
document.getElementById('jiraDetailProject').textContent = issue.project_key || issue.project || (issue.key ? issue.key.split('-')[0] : '—');
|
||||||
|
document.getElementById('jiraDetailType').textContent = issue.issue_type || issue.issuetype || 'Story';
|
||||||
|
|
||||||
|
// Beschrijving
|
||||||
|
const descSection = document.getElementById('jiraDetailDescSection');
|
||||||
|
const descEl = document.getElementById('jiraDetailDesc');
|
||||||
|
if (issue.description) {
|
||||||
|
descEl.textContent = issue.description;
|
||||||
|
descSection.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
descSection.classList.add('hidden');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Labels
|
||||||
|
const labelsSection = document.getElementById('jiraDetailLabelsSection');
|
||||||
|
const labelsEl = document.getElementById('jiraDetailLabels');
|
||||||
|
if (issue.labels && issue.labels.length > 0) {
|
||||||
|
labelsEl.innerHTML = issue.labels.map(l =>
|
||||||
|
`<span class="px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 text-[10px] font-semibold border border-slate-200 dark:border-slate-700">${escapeHtml(l)}</span>`
|
||||||
|
).join('');
|
||||||
|
labelsSection.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
labelsSection.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Link naar Jira
|
||||||
|
const linkEl = document.getElementById('jiraDetailOpenLink');
|
||||||
|
if (issue.url) {
|
||||||
|
linkEl.href = issue.url;
|
||||||
|
linkEl.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
linkEl.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
const modal = document.getElementById('jiraTicketDetailModal');
|
||||||
|
modal.classList.remove('hidden');
|
||||||
|
modal.classList.add('flex');
|
||||||
|
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeJiraTicketDetailModal() {
|
||||||
|
const modal = document.getElementById('jiraTicketDetailModal');
|
||||||
|
modal.classList.add('hidden');
|
||||||
|
modal.classList.remove('flex');
|
||||||
|
}
|
||||||
|
|
||||||
|
function openJiraPlanFromDetail() {
|
||||||
|
closeJiraTicketDetailModal();
|
||||||
|
if (_jiraDetailCurrentIssue) {
|
||||||
|
openJiraPlanModal(_jiraDetailCurrentIssue.key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Jira Plan Modal (met tijdsuggestie) ---
|
||||||
|
let _jiraPlanCurrentIssue = null;
|
||||||
|
|
||||||
|
function openJiraPlanModal(issueKey) {
|
||||||
|
const issue = plannerTicketStore.get(issueKey);
|
||||||
|
if (!issue) return;
|
||||||
|
_jiraPlanCurrentIssue = issue;
|
||||||
|
|
||||||
|
// Vul header
|
||||||
|
document.getElementById('jiraPlanModalKey').textContent = issue.key || '—';
|
||||||
|
document.getElementById('jiraPlanModalSummary').textContent = issue.summary || '—';
|
||||||
|
document.getElementById('jiraPlanModalStatus').textContent = issue.status || '—';
|
||||||
|
document.getElementById('jiraPlanModalPriority').textContent = issue.priority || '—';
|
||||||
|
|
||||||
|
// SP badge
|
||||||
|
const spBadge = document.getElementById('jiraPlanModalSpBadge');
|
||||||
|
if (issue.story_points) {
|
||||||
|
spBadge.textContent = `${issue.story_points} SP`;
|
||||||
|
spBadge.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
spBadge.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Standaard duur: 15 min (of op basis van SP: 1 SP = 30 min)
|
||||||
|
let defaultDuration = 15;
|
||||||
|
if (issue.story_points && issue.story_points > 0) {
|
||||||
|
const spMin = Math.round(issue.story_points * 30);
|
||||||
|
defaultDuration = [15, 30, 60, 90].reduce((prev, curr) =>
|
||||||
|
Math.abs(curr - spMin) < Math.abs(prev - spMin) ? curr : prev
|
||||||
|
);
|
||||||
|
}
|
||||||
|
setJiraPlanDuration(defaultDuration);
|
||||||
|
|
||||||
|
// Prioriteit: vertaal Jira priority naar Fociz priority
|
||||||
|
const jiraPrio = (issue.priority || '').toLowerCase();
|
||||||
|
const focizPrio = (jiraPrio === 'highest' || jiraPrio === 'critical') ? 'P1'
|
||||||
|
: (jiraPrio === 'high') ? 'P2'
|
||||||
|
: 'P3';
|
||||||
|
document.getElementById('jiraPlanPriority').value = focizPrio;
|
||||||
|
|
||||||
|
// Slimme starttijd: stel het volgende vrije kwartier voor
|
||||||
|
const now = new Date();
|
||||||
|
const suggestTime = activePlannerDate === now.toISOString().slice(0,10)
|
||||||
|
? suggestNextFreeSlot()
|
||||||
|
: '09:00';
|
||||||
|
document.getElementById('jiraPlanStartTime').value = suggestTime;
|
||||||
|
|
||||||
|
const modal = document.getElementById('jiraPlanModal');
|
||||||
|
modal.classList.remove('hidden');
|
||||||
|
modal.classList.add('flex');
|
||||||
|
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeJiraPlanModal() {
|
||||||
|
const modal = document.getElementById('jiraPlanModal');
|
||||||
|
modal.classList.add('hidden');
|
||||||
|
modal.classList.remove('flex');
|
||||||
|
_jiraPlanCurrentIssue = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setJiraPlanDuration(minutes) {
|
||||||
|
document.getElementById('jiraPlanDuration').value = minutes;
|
||||||
|
document.querySelectorAll('.jira-plan-dur-btn').forEach(btn => {
|
||||||
|
const dur = parseInt(btn.getAttribute('data-dur'), 10);
|
||||||
|
if (dur === minutes) {
|
||||||
|
btn.className = 'jira-plan-dur-btn px-2 py-1.5 rounded-xl border text-[11px] font-bold transition cursor-pointer bg-indigo-600 border-indigo-600 text-white';
|
||||||
|
} else {
|
||||||
|
btn.className = 'jira-plan-dur-btn px-2 py-1.5 rounded-xl border text-[11px] font-bold transition cursor-pointer bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 text-slate-700 dark:text-slate-300 hover:border-indigo-400';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function suggestNextFreeSlot() {
|
||||||
|
// Zoek het volgende ronde kwartier na het huidige moment
|
||||||
|
const now = new Date();
|
||||||
|
let h = now.getHours();
|
||||||
|
let m = now.getMinutes();
|
||||||
|
// Rond op naar boven naar het volgende kwartier
|
||||||
|
m = Math.ceil((m + 1) / 15) * 15;
|
||||||
|
if (m >= 60) { h += 1; m = 0; }
|
||||||
|
// Begrenzen op werktijd 08:00-18:00
|
||||||
|
if (h < 8) { h = 8; m = 0; }
|
||||||
|
if (h >= 18) { h = 8; m = 0; } // Morgen → val terug op 08:00
|
||||||
|
return `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submitJiraPlanModal() {
|
||||||
|
if (!_jiraPlanCurrentIssue) return;
|
||||||
|
const issue = _jiraPlanCurrentIssue;
|
||||||
|
|
||||||
|
const duration = parseInt(document.getElementById('jiraPlanDuration').value, 10) || 15;
|
||||||
|
const startTime = document.getElementById('jiraPlanStartTime').value.trim();
|
||||||
|
const priority = document.getElementById('jiraPlanPriority').value;
|
||||||
|
|
||||||
|
const btn = document.getElementById('btnSubmitJiraPlan');
|
||||||
|
const origHtml = btn.innerHTML;
|
||||||
|
btn.innerHTML = '<span class="text-xs font-bold animate-pulse">Inplannen...</span>';
|
||||||
|
btn.disabled = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const payload = {
|
||||||
|
title: `[${issue.key}] ${issue.summary || issue.key}`,
|
||||||
|
priority: priority,
|
||||||
|
source: 'JIRA',
|
||||||
|
external_id: issue.key,
|
||||||
|
external_url: issue.url || '',
|
||||||
|
duration_minutes: duration,
|
||||||
|
date: activePlannerDate
|
||||||
|
};
|
||||||
|
if (startTime) {
|
||||||
|
payload.time_block_start = startTime;
|
||||||
|
// Bereken eindtijd
|
||||||
|
const [hh, mm] = startTime.split(':').map(Number);
|
||||||
|
const endMin = hh * 60 + mm + duration;
|
||||||
|
payload.time_block_end = `${String(Math.floor(endMin / 60)).padStart(2,'0')}:${String(endMin % 60).padStart(2,'0')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await fetch('/api/planner.php?action=add_task', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {'Content-Type': 'application/json'},
|
||||||
|
body: JSON.stringify(payload)
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
if (data.success) {
|
||||||
|
closeJiraPlanModal();
|
||||||
|
showWidgetToast(`<strong>${escapeHtml(issue.key)}</strong> ingepland als dagtaak`, 'success');
|
||||||
|
switchPlannerDate(activePlannerDate, null, false);
|
||||||
|
} else {
|
||||||
|
alert(data.error || 'Kon ticket niet inplannen');
|
||||||
|
btn.innerHTML = origHtml;
|
||||||
|
btn.disabled = false;
|
||||||
|
}
|
||||||
|
} catch(e) {
|
||||||
|
alert('Netwerkfout bij inplannen');
|
||||||
|
btn.innerHTML = origHtml;
|
||||||
|
btn.disabled = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function quickImportJiraByKey(btn, issueKey) {
|
||||||
|
// Plan knop → open de plan modal (niet direct importeren)
|
||||||
|
openJiraPlanModal(issueKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// --- Direct E-mail Inplannen als Dagtaak ---
|
// --- Direct E-mail Inplannen als Dagtaak ---
|
||||||
function openPlanEmailDirect(mailId, subject, sender, webLink) {
|
function openPlanEmailDirect(mailId, subject, sender, webLink) {
|
||||||
document.getElementById('planEmailId').value = mailId;
|
document.getElementById('planEmailId').value = mailId;
|
||||||
|
|||||||
Reference in New Issue
Block a user