Merge pull request 'Dev' (#43) from dev into main
Reviewed-on: #43
This commit was merged in pull request #43.
This commit is contained in:
@@ -156,6 +156,8 @@ $boardsJson = json_encode($boards, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT
|
||||
Koppel Jira Cloud
|
||||
</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($syncError)): ?>
|
||||
<!-- Synchronisatiefout Banner -->
|
||||
<div class="mt-4 p-3 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900/50 flex items-center space-x-3 text-xs text-red-700 dark:text-red-300">
|
||||
|
||||
+120
-111
@@ -271,8 +271,8 @@ try {
|
||||
// 5c. Widget Catalogus & Raster Indeling (Fociz v2.0)
|
||||
$availableWidgets = [
|
||||
'daily_goal' => ['id' => 'daily_goal', 'title' => 'Dagfocus & Hoofddoel', 'category' => 'Planning', 'icon' => 'target', 'enabled' => true, 'col_span' => 12, 'order' => 1, 'desc' => 'Centraal focusdoel voor de dag met snelle tellers'],
|
||||
'tasks' => ['id' => 'tasks', 'title' => 'Dagtaken & Prioriteiten', 'category' => 'Planning', 'icon' => 'check-square', 'enabled' => true, 'col_span' => 7, 'order' => 2, 'desc' => 'Volledige takenlijst met P1/P2/P3, tijdvakken en Outlook synchronisatie'],
|
||||
'timeline' => ['id' => 'timeline', 'title' => 'Tijdlijn & Time-blocking', 'category' => 'Agenda', 'icon' => 'clock', 'enabled' => true, 'col_span' => 5, 'order' => 3, 'desc' => 'Visueel urenoverzicht met lunchpauze, afspraken en AI Slim Indelen'],
|
||||
'timeline' => ['id' => 'timeline', 'title' => 'Tijdlijn & Dag/Weekoverzicht', 'category' => 'Agenda', 'icon' => 'calendar', 'enabled' => true, 'col_span' => 12, 'order' => 2, 'desc' => 'Gecombineerd weekoverzicht, dagselectie en uren-tijdlijn met time-blocking en AI'],
|
||||
'tasks' => ['id' => 'tasks', 'title' => 'Dagtaken & Prioriteiten', 'category' => 'Planning', 'icon' => 'check-square', 'enabled' => true, 'col_span' => 7, 'order' => 3, 'desc' => 'Volledige takenlijst met P1/P2/P3, tijdvakken en Outlook synchronisatie'],
|
||||
'outlook_mail' => ['id' => 'outlook_mail', 'title' => 'Outlook E-mail Widget', 'category' => 'Communicatie', 'icon' => 'mail', 'enabled' => true, 'col_span' => 6, 'order' => 4, 'desc' => 'Inkomende e-mails direct inzien en met 1 klik inplannen als taak'],
|
||||
'jira_queue' => ['id' => 'jira_queue', 'title' => 'Jira Tickets & Wachtrijen', 'category' => 'Ontwikkeling', 'icon' => 'layers', 'enabled' => true, 'col_span' => 6, 'order' => 5, 'desc' => 'Openstaande Jira tickets (DX/SD wachtrijen) met directe importknop'],
|
||||
'calendar_meetings' => ['id' => 'calendar_meetings', 'title' => 'Agenda & Teams Meetings', 'category' => 'Agenda', 'icon' => 'video', 'enabled' => true, 'col_span' => 6, 'order' => 6, 'desc' => 'Vandaag geplande afspraken met 1-klik Teams deelnemen knop'],
|
||||
@@ -464,106 +464,6 @@ for ($h = $startHour; $h <= $endHour; $h++) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Week Navigatie & Dagselector -->
|
||||
<div class="fociz-card p-5 sm:p-6">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 pb-4 mb-4 border-b border-slate-100 dark:border-slate-800/60">
|
||||
<!-- Navigatie controls -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<a href="planner.php?date=<?= $prevWeekDate ?>" onclick="switchPlannerDate('<?= $prevWeekDate ?>', event); return false;" class="flex items-center space-x-1.5 px-3.5 py-1.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800/80 dark:hover:bg-slate-700/80 text-slate-700 dark:text-slate-300 text-xs font-semibold transition shadow-2xs" title="Vorige week (Maandag <?= date('j M', strtotime($prevWeekDate)) ?>)">
|
||||
<i data-lucide="chevron-left" class="w-4 h-4"></i>
|
||||
<span class="hidden sm:inline">Vorige week</span>
|
||||
</a>
|
||||
|
||||
<a href="planner.php" onclick="switchPlannerDate('<?= $today ?>', event); return false;" class="px-3.5 py-1.5 rounded-xl <?= $isTodaySelected ? 'bg-slate-900 text-white dark:bg-white dark:text-slate-900 font-bold shadow-xs' : 'bg-slate-100 hover:bg-slate-200 dark:bg-slate-800/80 dark:hover:bg-slate-700/80 text-slate-700 dark:text-slate-300 font-semibold shadow-2xs' ?> text-xs transition" title="Spring direct naar vandaag">
|
||||
Vandaag
|
||||
</a>
|
||||
|
||||
<a href="planner.php?date=<?= $nextWeekDate ?>" onclick="switchPlannerDate('<?= $nextWeekDate ?>', event); return false;" class="flex items-center space-x-1.5 px-3.5 py-1.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800/80 dark:hover:bg-slate-700/80 text-slate-700 dark:text-slate-300 text-xs font-semibold transition shadow-2xs" title="Volgende week (Maandag <?= date('j M', strtotime($nextWeekDate)) ?>)">
|
||||
<span class="hidden sm:inline">Volgende week</span>
|
||||
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Week Titel & Datumrange -->
|
||||
<div class="text-center md:text-left">
|
||||
<div class="text-xs font-bold uppercase tracking-wider text-indigo-600 dark:text-indigo-400">
|
||||
Week <?= $weekNumber ?> • <?= $yearNumber ?>
|
||||
</div>
|
||||
<div class="text-base font-black text-slate-900 dark:text-white">
|
||||
<?= htmlspecialchars($formattedWeekRange) ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Directe datumselector -->
|
||||
<div class="flex items-center space-x-2 justify-end">
|
||||
<label for="jumpDateInput" class="text-xs text-slate-500 dark:text-slate-400 font-medium hidden sm:inline">Datum:</label>
|
||||
<input
|
||||
type="date"
|
||||
id="jumpDateInput"
|
||||
value="<?= htmlspecialchars($selectedDate) ?>"
|
||||
onchange="if(this.value) { switchPlannerDate(this.value, event); }"
|
||||
class="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-1.5 text-xs text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/30 font-medium cursor-pointer shadow-2xs"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 7 Dagen Weekstrook -->
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-7 gap-3">
|
||||
<?php foreach ($weekDays as $wd): ?>
|
||||
<a
|
||||
href="<?= ($wd['date'] === $today) ? 'planner.php' : ('planner.php?date=' . $wd['date']) ?>"
|
||||
onclick="switchPlannerDate('<?= $wd['date'] ?>', event); return false;"
|
||||
class="fociz-card-interactive group relative flex flex-col p-3.5 rounded-2xl border transition-all text-left <?= $wd['is_selected']
|
||||
? 'bg-gradient-to-b from-indigo-500/15 via-indigo-500/5 to-transparent dark:from-indigo-500/25 dark:via-indigo-500/10 dark:to-transparent border-indigo-500 ring-2 ring-indigo-500/40 shadow-sm'
|
||||
: 'bg-slate-50/70 dark:bg-[#0c0f17]/50 border-slate-200/80 dark:border-slate-800/80 hover:border-indigo-300 dark:hover:border-indigo-600/50 hover:bg-white dark:hover:bg-[#111624] shadow-2xs' ?>"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<span class="text-[11px] font-bold uppercase tracking-wider <?= $wd['is_selected'] ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-500 dark:text-slate-400' ?>">
|
||||
<?= $wd['short_name'] ?>
|
||||
</span>
|
||||
<?php if ($wd['is_today']): ?>
|
||||
<span class="px-2 py-0.5 rounded-full text-[9px] font-extrabold uppercase bg-indigo-600 text-white shadow-xs">
|
||||
Nu
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div class="flex items-baseline space-x-1.5 mb-3">
|
||||
<span class="text-2xl font-black <?= $wd['is_selected'] ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-900 dark:text-white' ?>">
|
||||
<?= $wd['day_num'] ?>
|
||||
</span>
|
||||
<span class="text-[11px] font-semibold text-slate-400 dark:text-slate-500 uppercase">
|
||||
<?= $wd['month_short'] ?>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Mini chips voor taken en meetings op deze dag -->
|
||||
<div class="flex flex-col gap-1.5 mt-auto pt-2 border-t border-slate-200/60 dark:border-slate-800/60 text-[10px]">
|
||||
<div class="flex items-center justify-between px-2 py-1 rounded-lg bg-white/70 dark:bg-slate-900/60 border border-slate-200/50 dark:border-slate-800/50 text-slate-600 dark:text-slate-400">
|
||||
<span class="flex items-center space-x-1">
|
||||
<i data-lucide="check-square" class="w-3 h-3 text-indigo-500"></i>
|
||||
<span>Taken</span>
|
||||
</span>
|
||||
<span class="font-bold <?= $wd['task_count'] > 0 ? ($wd['completed_count'] === $wd['task_count'] ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-800 dark:text-slate-200') : 'text-slate-400' ?>">
|
||||
<?= $wd['completed_count'] ?>/<?= $wd['task_count'] ?>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between px-2 py-1 rounded-lg bg-sky-50/70 dark:bg-sky-500/10 border border-sky-200/50 dark:border-sky-500/20 text-sky-800 dark:text-sky-300">
|
||||
<span class="flex items-center space-x-1">
|
||||
<i data-lucide="calendar" class="w-3 h-3 text-sky-500"></i>
|
||||
<span>Agenda</span>
|
||||
</span>
|
||||
<span class="font-bold">
|
||||
<?= $wd['meeting_count'] ?>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modular Customizable Widget Grid Container (Fociz v2.0) -->
|
||||
<div class="relative w-full" id="focizWidgetGridContainer">
|
||||
<!-- Blueprint Achtergrond Raster (zichtbaar zodra een widget wordt opgepakt) -->
|
||||
@@ -881,27 +781,136 @@ for ($h = $startHour; $h <= $endHour; $h++) {
|
||||
</div>
|
||||
|
||||
<?php elseif ($wId === 'timeline'): ?>
|
||||
<!-- Widget 3: Tijdlijn & Time-blocking -->
|
||||
<div class="fociz-card p-5 sm:p-6 overflow-hidden">
|
||||
<div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-100 dark:border-slate-800">
|
||||
<!-- Widget: Tijdlijn, Weekoverzicht & Dagselector (1 Geïntegreerde Widget) -->
|
||||
<div class="fociz-card p-5 sm:p-6 overflow-hidden space-y-5">
|
||||
|
||||
<!-- 1. Week Navigatie & Directe Datumkeuze -->
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-3 pb-3 border-b border-slate-100 dark:border-slate-800/80">
|
||||
<!-- Navigatie controls -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<i data-lucide="clock" class="w-4 h-4 text-indigo-600 dark:text-indigo-400"></i>
|
||||
<h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider">Tijdlijn & Time-blocking</h3>
|
||||
<a href="planner.php?date=<?= $prevWeekDate ?>" onclick="switchPlannerDate('<?= $prevWeekDate ?>', event); return false;" class="flex items-center space-x-1.5 px-3.5 py-1.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800/80 dark:hover:bg-slate-700/80 text-slate-700 dark:text-slate-300 text-xs font-semibold transition shadow-2xs cursor-pointer" title="Vorige week (Maandag <?= date('j M', strtotime($prevWeekDate)) ?>)">
|
||||
<i data-lucide="chevron-left" class="w-4 h-4"></i>
|
||||
<span class="hidden sm:inline">Vorige week</span>
|
||||
</a>
|
||||
|
||||
<a href="planner.php" onclick="switchPlannerDate('<?= $today ?>', event); return false;" class="px-3.5 py-1.5 rounded-xl <?= $isTodaySelected ? 'bg-slate-900 text-white dark:bg-white dark:text-slate-900 font-bold shadow-xs' : 'bg-slate-100 hover:bg-slate-200 dark:bg-slate-800/80 dark:hover:bg-slate-700/80 text-slate-700 dark:text-slate-300 font-semibold shadow-2xs' ?> text-xs transition cursor-pointer" title="Spring direct naar vandaag">
|
||||
Vandaag
|
||||
</a>
|
||||
|
||||
<a href="planner.php?date=<?= $nextWeekDate ?>" onclick="switchPlannerDate('<?= $nextWeekDate ?>', event); return false;" class="flex items-center space-x-1.5 px-3.5 py-1.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800/80 dark:hover:bg-slate-700/80 text-slate-700 dark:text-slate-300 text-xs font-semibold transition shadow-2xs cursor-pointer" title="Volgende week (Maandag <?= date('j M', strtotime($nextWeekDate)) ?>)">
|
||||
<span class="hidden sm:inline">Volgende week</span>
|
||||
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
|
||||
<!-- Week Titel & Datumrange -->
|
||||
<div class="text-center md:text-left">
|
||||
<div class="text-[11px] font-bold uppercase tracking-wider text-indigo-600 dark:text-indigo-400">
|
||||
Week <?= $weekNumber ?> • <?= $yearNumber ?>
|
||||
</div>
|
||||
<div class="text-sm sm:text-base font-black text-slate-900 dark:text-white">
|
||||
<?= htmlspecialchars($formattedWeekRange) ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rechterkant: AI Slim Indelen & Directe datumselector -->
|
||||
<div class="flex flex-wrap items-center space-x-2 justify-end">
|
||||
<?php if ($aiSettings['ai_enabled'] && $aiSettings['has_key']): ?>
|
||||
<button onclick="aiSmartSchedule(this)" id="aiScheduleBtn" title="Laat AI Co-Pilot openstaande taken optimaal inplannen om meetings en lunch heen" class="flex items-center space-x-1.5 px-3 py-1 rounded-lg bg-gradient-to-r from-indigo-600 to-sky-600 hover:from-indigo-500 hover:to-sky-500 text-white text-xs font-semibold shadow-xs transition cursor-pointer">
|
||||
<button onclick="aiSmartSchedule(this)" id="aiScheduleBtn" title="Laat AI Co-Pilot openstaande taken optimaal inplannen om meetings en lunch heen" class="flex items-center space-x-1.5 px-3 py-1.5 rounded-xl bg-gradient-to-r from-indigo-600 to-sky-600 hover:from-indigo-500 hover:to-sky-500 text-white text-xs font-semibold shadow-xs transition cursor-pointer">
|
||||
<i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
|
||||
<span class="hidden sm:inline">AI Slim Indelen</span>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($isOutlookConnected): ?>
|
||||
<span class="px-2 py-0.5 rounded-lg bg-sky-50 dark:bg-sky-500/10 border border-sky-200 dark:border-sky-500/20 text-sky-700 dark:text-sky-400 text-[10px] font-semibold">Outlook 365</span>
|
||||
<span class="hidden sm:inline-flex px-2 py-1 rounded-xl bg-sky-50 dark:bg-sky-500/10 border border-sky-200 dark:border-sky-500/20 text-sky-700 dark:text-sky-400 text-[10px] font-semibold">Outlook 365</span>
|
||||
<?php endif; ?>
|
||||
<span class="text-xs text-slate-500 dark:text-slate-400 font-mono"><?= $hours[0] ?> – <?= end($hours) ?></span>
|
||||
|
||||
<input
|
||||
type="date"
|
||||
id="jumpDateInput"
|
||||
value="<?= htmlspecialchars($selectedDate) ?>"
|
||||
onchange="if(this.value) { switchPlannerDate(this.value, event); }"
|
||||
class="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl px-2.5 py-1.5 text-xs text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/30 font-medium cursor-pointer shadow-2xs"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 7 Dagen Weekstrook (Dagselector) -->
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-7 gap-2.5">
|
||||
<?php foreach ($weekDays as $wd): ?>
|
||||
<a
|
||||
href="<?= ($wd['date'] === $today) ? 'planner.php' : ('planner.php?date=' . $wd['date']) ?>"
|
||||
onclick="switchPlannerDate('<?= $wd['date'] ?>', event); return false;"
|
||||
class="fociz-card-interactive group relative flex flex-col p-3 rounded-xl border transition-all text-left <?= $wd['is_selected']
|
||||
? 'bg-gradient-to-b from-indigo-500/15 via-indigo-500/5 to-transparent dark:from-indigo-500/25 dark:via-indigo-500/10 dark:to-transparent border-indigo-500 ring-2 ring-indigo-500/40 shadow-sm'
|
||||
: 'bg-slate-50/70 dark:bg-[#0c0f17]/50 border-slate-200/80 dark:border-slate-800/80 hover:border-indigo-300 dark:hover:border-indigo-600/50 hover:bg-white dark:hover:bg-[#111624] shadow-2xs' ?>"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-[10px] font-bold uppercase tracking-wider <?= $wd['is_selected'] ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-500 dark:text-slate-400' ?>">
|
||||
<?= $wd['short_name'] ?>
|
||||
</span>
|
||||
<?php if ($wd['is_today']): ?>
|
||||
<span class="px-1.5 py-0.2 rounded-full text-[8px] font-extrabold uppercase bg-indigo-600 text-white shadow-xs">
|
||||
Nu
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div class="flex items-baseline space-x-1 mb-2">
|
||||
<span class="text-xl font-black <?= $wd['is_selected'] ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-900 dark:text-white' ?>">
|
||||
<?= $wd['day_num'] ?>
|
||||
</span>
|
||||
<span class="text-[10px] font-semibold text-slate-400 dark:text-slate-500 uppercase">
|
||||
<?= $wd['month_short'] ?>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Mini chips voor taken en meetings op deze dag -->
|
||||
<div class="flex flex-col gap-1 mt-auto pt-1.5 border-t border-slate-200/60 dark:border-slate-800/60 text-[9px]">
|
||||
<div class="flex items-center justify-between px-1.5 py-0.5 rounded-md bg-white/70 dark:bg-slate-900/60 border border-slate-200/50 dark:border-slate-800/50 text-slate-600 dark:text-slate-400">
|
||||
<span class="flex items-center space-x-1">
|
||||
<i data-lucide="check-square" class="w-2.5 h-2.5 text-indigo-500"></i>
|
||||
<span>Taken</span>
|
||||
</span>
|
||||
<span class="font-bold <?= $wd['task_count'] > 0 ? ($wd['completed_count'] === $wd['task_count'] ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-800 dark:text-slate-200') : 'text-slate-400' ?>">
|
||||
<?= $wd['completed_count'] ?>/<?= $wd['task_count'] ?>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between px-1.5 py-0.5 rounded-md bg-sky-50/70 dark:bg-sky-500/10 border border-sky-200/50 dark:border-sky-500/20 text-sky-800 dark:text-sky-300">
|
||||
<span class="flex items-center space-x-1">
|
||||
<i data-lucide="calendar" class="w-2.5 h-2.5 text-sky-500"></i>
|
||||
<span>Agenda</span>
|
||||
</span>
|
||||
<span class="font-bold">
|
||||
<?= $wd['meeting_count'] ?>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<!-- 3. Sub-header van de Tijdlijn voor de geselecteerde dag -->
|
||||
<div class="flex items-center justify-between pt-3 border-t border-slate-100 dark:border-slate-800/80">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-7 h-7 rounded-lg bg-indigo-50 dark:bg-indigo-950/50 text-indigo-600 dark:text-indigo-400 flex items-center justify-center font-bold">
|
||||
<i data-lucide="clock" class="w-3.5 h-3.5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider">
|
||||
Tijdlijn & Time-blocking voor <?= htmlspecialchars($formattedSelectedDate) ?>
|
||||
</h4>
|
||||
<p class="text-[10px] text-slate-400">Urenindeling & synchronisatie met Outlook</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs text-slate-500 dark:text-slate-400 font-mono font-semibold bg-slate-100 dark:bg-slate-800/70 px-2.5 py-1 rounded-lg">
|
||||
<?= $hours[0] ?> – <?= end($hours) ?>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 4. De urentijdlijn rijen -->
|
||||
<div class="space-y-2.5">
|
||||
<?php foreach ($hours as $hour):
|
||||
$hourInt = (int)explode(':', $hour)[0];
|
||||
|
||||
Reference in New Issue
Block a user