NiekRabelink/Fociz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Brainstorm huge refactor

Browse Source
This commit is contained in:
Niek Rabelink
2026-09-14 11:10:54 +02:00
parent 5a31f0948a
commit 24fbfb9d82
9 changed files with 747 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
brainstorm_canvas.php
+61 -9
View File
@@ -168,9 +168,9 @@ $categories = [
<div class="flex flex-wrap items-center gap-2.5">
<?php if ($aiSettings['ai_enabled'] && $aiSettings['has_key']): ?>
<button onclick="aiGenerateIdeas(this)" class="flex items-center space-x-1.5 px-3 py-2 rounded-xl bg-violet-50 hover:bg-violet-100 dark:bg-violet-950/50 dark:hover:bg-violet-900/50 text-violet-700 dark:text-violet-300 border border-violet-200 dark:border-violet-800/60 text-xs font-bold transition cursor-pointer shadow-xs" title="Genereer 4 innovatieve ideeën via AI Co-Pilot">
<i data-lucide="sparkles" class="w-4 h-4 text-violet-500"></i>
<span>AI Ideeën</span>
<button onclick="aiGenerateSessionBoard(this)" class="flex items-center space-x-1.5 px-3.5 py-2 rounded-xl bg-violet-600 hover:bg-violet-500 text-white text-xs font-bold transition cursor-pointer shadow-xs" title="Genereer een compleet whiteboard (Ideeën, Knelpunten, Oplossingen en Quick Wins) op basis van de sessie briefing">
<i data-lucide="sparkles" class="w-4 h-4 text-violet-200"></i>
<span>AI Post-its Genereren</span>
</button>
<button onclick="aiCategorizeCards(this)" class="flex items-center space-x-1.5 px-3 py-2 rounded-xl bg-indigo-50 hover:bg-indigo-100 dark:bg-indigo-950/50 dark:hover:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 border border-indigo-200 dark:border-indigo-800/60 text-xs font-bold transition cursor-pointer shadow-xs" title="Sorteer alle kaartjes automatisch in Ideeën, Knelpunten, Oplossingen of Quick Wins">
@@ -198,6 +198,32 @@ $categories = [
</div>
</div>
<!-- Sessie Context & Briefing Banner -->
<?php if (!empty($session['description'])): ?>
<div class="fociz-card p-4 sm:p-5 border-l-4 border-l-indigo-500 relative overflow-hidden transition">
<div class="flex items-start justify-between gap-4">
<div class="space-y-1.5 flex-1">
<div class="flex items-center space-x-2">
<span class="text-xs font-bold uppercase tracking-wider text-indigo-600 dark:text-indigo-400 flex items-center space-x-1.5">
<i data-lucide="file-text" class="w-3.5 h-3.5"></i>
<span>Sessie Briefing & Doelstellingen</span>
</span>
<span class="text-[11px] text-slate-400 dark:text-slate-500">• Context voor AI & Team</span>
</div>
<div class="text-xs text-slate-700 dark:text-slate-300 whitespace-pre-line leading-relaxed font-normal">
<?= htmlspecialchars($session['description']) ?>
</div>
</div>
<?php if ($aiSettings['ai_enabled'] && $aiSettings['has_key']): ?>
<button onclick="aiGenerateSessionBoard(this)" class="flex-shrink-0 px-3 py-2 rounded-xl bg-violet-50 hover:bg-violet-100 dark:bg-violet-950/40 dark:hover:bg-violet-900/40 text-violet-700 dark:text-violet-300 border border-violet-200 dark:border-violet-800/60 text-xs font-bold transition cursor-pointer flex items-center space-x-1.5 shadow-2xs">
<i data-lucide="sparkles" class="w-3.5 h-3.5 text-violet-500"></i>
<span>AI Post-its Maken</span>
</button>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<!-- Whiteboard Categorie Kolommen -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-5">
<?php foreach ($categories as $catKey => $catConfig):
@@ -789,6 +815,9 @@ $categories = [
</button>
</div>
</div>
</div>
</div>
<!-- Modal: Sessie Verwijderen Bevestiging -->
<div id="deleteCanvasSessionModal" onclick="if(event.target === this) closeDeleteCanvasSessionModal()" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
<div class="fociz-card p-6 sm:p-7 shadow-2xl max-w-md w-full space-y-4">
@@ -1297,12 +1326,18 @@ async function submitConvertToRoadmap() {
}
// --- AI Co-Pilot Canvas Assistentie (Release v1.5) ---
async function aiGenerateIdeas(btn) {
if (!confirm('Wil je AI Co-Pilot 4 innovatieve ideeën laten genereren en direct op het canvas plaatsen?')) return;
async function aiGenerateSessionBoard(btn, silent = false) {
if (!silent) {
const hasBriefing = <?= !empty($session['description']) ? 'true' : 'false' ?>;
const confirmMsg = hasBriefing
? 'Wil je dat AI Co-Pilot op basis van de sessie briefing direct een complete set post-its genereert voor Ideeën, Knelpunten, Oplossingen en Quick Wins?'
: 'Wil je dat AI Co-Pilot innovatieve post-its genereert voor het whiteboard?';
if (!confirm(confirmMsg)) return;
}
const origHtml = btn ? btn.innerHTML : '';
if (btn) {
btn.innerHTML = '<span class="animate-pulse flex items-center space-x-1"><i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i><span>Genereren...</span></span>';
btn.innerHTML = '<span class="animate-pulse flex items-center space-x-1.5"><i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i><span>AI genereert post-its...</span></span>';
btn.disabled = true;
if (typeof lucide !== 'undefined') lucide.createIcons();
}
@@ -1311,13 +1346,16 @@ async function aiGenerateIdeas(btn) {
const res = await fetch('/api/ai.php?action=generate_ideas', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ session_id: sessionId, count: 4 })
body: JSON.stringify({ session_id: sessionId, count: 4, full_board: 1 })
});
const data = await res.json();
if (data.success) {
// Verwijder auto_ai parameter uit URL bij reload
const cleanUrl = window.location.pathname + '?id=' + sessionId;
window.history.replaceState({}, document.title, cleanUrl);
location.reload();
} else {
alert(data.error || 'Kon geen ideeën genereren via AI');
alert(data.error || 'Kon geen post-its genereren via AI');
if (btn) {
btn.innerHTML = origHtml;
btn.disabled = false;
@@ -1325,7 +1363,7 @@ async function aiGenerateIdeas(btn) {
}
}
} catch(err) {
alert('Netwerkfout bij aanroepen van AI');
alert('Netwerkfout bij aanroepen van AI: ' + err.message);
if (btn) {
btn.innerHTML = origHtml;
btn.disabled = false;
@@ -1334,6 +1372,10 @@ async function aiGenerateIdeas(btn) {
}
}
async function aiGenerateIdeas(btn) {
return aiGenerateSessionBoard(btn);
}
async function aiCategorizeCards(btn) {
if (!confirm('Wil je dat AI Co-Pilot alle kaartjes automatisch classificeert in de juiste kolom (Ideeën, Knelpunten, Oplossingen of Quick Wins)?')) return;
@@ -1838,6 +1880,16 @@ document.addEventListener('keydown', (e) => {
closeDeleteCanvasSessionModal();
}
});
// Automatische AI-generatie bij doorgestuurde auto_ai=1 parameter (bijv. direct na creatie)
document.addEventListener('DOMContentLoaded', () => {
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('auto_ai') === '1') {
// Toon subtiele toast of indicator en start generatie
const aiBtn = document.querySelector('button[onclick*="aiGenerateSessionBoard"]');
aiGenerateSessionBoard(aiBtn, true);
}
});
</script>
<?php require_once __DIR__ . '/includes/footer.php'; ?>