erikandClaude Sonnet 5
db63a29365
Neue Wandtafel (Touch-Dashboard für Kiosk-Anzeige): Auslastung/Besprochen je Gewerk, Aufgaben-Kennzahlen, Ereignis-Feed nach Art gruppiert, vollständige Projektliste zum Scrollen, automatischer Rücksprung nach Untätigkeit mit sichtbarem Countdown. Eigene Kiosk-Rolle ohne Fachrolle und ohne Schreibrechte. Auslastung: Möglichkeit zum Wechsel der ausgewerteten Sitzung entfernt. Aufräumen nicht mehr benötigter Dateien, README auf aktuellen Stand gebracht. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
463 lines
23 KiB
JavaScript
463 lines
23 KiB
JavaScript
// -----------------------------
|
||
// Projektplan — GANTT-Rendering & Zoom
|
||
// -----------------------------
|
||
// Dieses Modul rendert das GANTT-Diagramm der Projektplan-Seite inklusive
|
||
// der TODO- und Meilensteinzeilen, die buildGanttHtml aus plan-build-gantt.js
|
||
// liefert, und zeichnet darauf die Abhängigkeitslinien zwischen den Aufgaben.
|
||
// Es verwaltet außerdem Zoom (pxPerDay in PlanApp), das Anpassen des
|
||
// Datumsbereichs (fitPlanGanttRange) sowie die Ressourcen-Auslastung
|
||
// (computeResourceLoads/renderResourceLoad/openResourceModal, Cockpit-Layout:
|
||
// Detailkarten im Auslastungs-Modal, Vorschau in der Kompakt-Karte darunter)
|
||
// und die KPI-Kachelzeile über dem GANTT (renderPlanKpis — Gesamtfortschritt,
|
||
// offene Aufgaben, nächster Meilenstein, Team-Auslastung, alle aus denselben
|
||
// Plan-Daten abgeleitet). renderPlanGantt ist die zentrale Neu-Render-
|
||
// Funktion (rendert am Ende auch Auslastung und KPIs neu) und wird nach
|
||
// Änderungen von plan-modals.js, plan-drag.js und plan-schedule.js erneut
|
||
// aufgerufen.
|
||
//
|
||
// Läuft wie alle plan-Module in einem IIFE; Zustand: window.PlanApp
|
||
// (plan-state.js).
|
||
|
||
(function(){
|
||
const app = window.PlanApp;
|
||
|
||
// renderPlanGantt: baut das komplette GANTT-Diagramm des aktuellen Projekts
|
||
// neu auf. Nutzt die Datumseingaben der Seite (oder berechnet den
|
||
// Projektzeitraum), berücksichtigt Urlaub, kritischen Pfad, Sperrstatus und
|
||
// Zoomstufe und ruft buildGanttHtml auf. Im Anschluss werden die
|
||
// Abhängigkeitslinien gezeichnet und die Ressourcen-Auslastung aktualisiert.
|
||
window.renderPlanGantt = function(){
|
||
const container = document.getElementById('planGanttContainer');
|
||
if(!app.project || !container) return;
|
||
const prevScroll = container.scrollLeft;
|
||
let start = parseDateISO(document.getElementById('planGanttStart').value);
|
||
let end = parseDateISO(document.getElementById('planGanttEnd').value);
|
||
if(!start || !end){
|
||
const range = ganttRangeFromProjects([app.project], 7, projectAssignees(app.project, app.week).map(a => a.person.id));
|
||
start = range.start; end = range.end;
|
||
document.getElementById('planGanttStart').value = formatDateISO(start);
|
||
document.getElementById('planGanttEnd').value = formatDateISO(end);
|
||
}
|
||
const showVacation = document.getElementById('planShowVacation').checked;
|
||
const vacationPeople = projectAssignees(app.project, app.week).map(a => a.person.id);
|
||
const criticalPath = app.criticalPathActive ? computeCriticalPath(app.project) : [];
|
||
const ghost = collectGhostDates();
|
||
container.innerHTML = buildGanttHtml([app.project], start, end, {
|
||
showVacation, editable: !app.isLocked(), highlightProjectId: app.project.id,
|
||
showTodos: true, vacationPeople, pxPerDay: app.pxPerDay, criticalPath,
|
||
ghostTodos: ghost.todos, ghostMilestones: ghost.milestones, ghostLabel: ghost.label,
|
||
});
|
||
container.scrollLeft = prevScroll;
|
||
requestAnimationFrame(() => renderGanttDependencies(container));
|
||
renderPlanWarnings();
|
||
renderResourceLoad();
|
||
renderPlanKpis();
|
||
// Aufgabenliste und Dashboard zeigen dieselben Aufgaben-/Meilensteindaten
|
||
// in anderer Form (js/plan/plan-tasks.js, js/plan/plan-sections.js). Sie
|
||
// hängen sich hier mit ein, weil renderPlanGantt() die zentrale
|
||
// Neu-Render-Funktion nach jeder Änderung ist — so bleiben alle drei
|
||
// Bereiche ohne zusätzliche Aufrufe in den ändernden Modulen gleich.
|
||
if(typeof renderPlanTasks === 'function') renderPlanTasks();
|
||
if(typeof renderPlanDashboard === 'function') renderPlanDashboard();
|
||
};
|
||
|
||
// collectGhostDates: liest die Termine derselben Aufgaben/Meilensteine aus
|
||
// der letzten früheren Sitzung MIT Planinhalt (app.previousPlannedProjectVersion()
|
||
// aus plan-history.js) und gibt sie als Maps id -> Termin zurück, die
|
||
// buildGanttHtml als ghostTodos/ghostMilestones für die gestrichelten
|
||
// Vergleichs-Umrisse nutzt. Das Label der gefundenen Sitzung wird
|
||
// mitgeliefert, damit die Tooltips sie namentlich nennen können statt
|
||
// pauschal "Vorwoche" zu behaupten.
|
||
// Leere Maps, wenn der Schalter aus ist, es keine frühere Fassung mit
|
||
// Terminplan gibt oder dem Projekt die projectUid fehlt (Altdaten).
|
||
// Rückgabe: { todos: Map, milestones: Map, label: String }.
|
||
function collectGhostDates(){
|
||
const empty = { todos: new Map(), milestones: new Map(), label: '' };
|
||
const toggle = document.getElementById('planShowGhost');
|
||
if(toggle && !toggle.checked) return empty;
|
||
if(typeof app.previousPlannedProjectVersion !== 'function') return empty;
|
||
const prev = app.previousPlannedProjectVersion();
|
||
if(!prev || !prev.project || !prev.project.plan) return empty;
|
||
|
||
const todos = new Map();
|
||
(prev.project.plan.todos || []).forEach(t => {
|
||
if(t.id && t.start && t.end) todos.set(t.id, { start: t.start, end: t.end });
|
||
});
|
||
const milestones = new Map();
|
||
(prev.project.plan.milestones || []).forEach(m => {
|
||
if(m.id && m.date) milestones.set(m.id, m.date);
|
||
});
|
||
return { todos, milestones, label: prev.week.label };
|
||
}
|
||
|
||
// renderPlanWarnings: füllt das Hinweisband über dem GANTT
|
||
// (#planWarnings in App.html) mit den Urlaubs-Kollisionen des
|
||
// Projekts — Aufgaben, deren Zeitraum in die Abwesenheit einer zugeordneten
|
||
// Person fällt. Die Prüfung selbst liegt in plan-build-gantt.js
|
||
// (app.absenceConflictsForTodo), damit Balken-Markierung und diese Liste
|
||
// garantiert dasselbe melden. Keine Parameter, keine Rückgabe.
|
||
window.renderPlanWarnings = function(){
|
||
const el = document.getElementById('planWarnings');
|
||
if(!el || !app.project) return;
|
||
if(typeof app.absenceConflictsForTodo !== 'function'){ el.innerHTML = ''; return; }
|
||
|
||
const plan = app.ensurePlanLocal();
|
||
const rows = [];
|
||
(plan.todos || []).forEach(t => {
|
||
if(t.done) return; // erledigte Aufgaben sind kein Planungsproblem mehr
|
||
const conflicts = app.absenceConflictsForTodo(t);
|
||
conflicts.forEach(c => {
|
||
rows.push(`<li><b>${esc(t.title || 'TODO')}</b> — ${esc(c.name)} ist ${esc(c.type.toLowerCase())} (${formatDateDE(c.start)}–${formatDateDE(c.end)})</li>`);
|
||
});
|
||
});
|
||
|
||
if(rows.length === 0){ el.innerHTML = ''; return; }
|
||
el.innerHTML = `<div class="plan-warning-band">
|
||
<div class="plan-warning-head">${icon('warning')} ${rows.length} Terminkonflikt${rows.length === 1 ? '' : 'e'} mit Abwesenheiten</div>
|
||
<ul class="plan-warning-list">${rows.join('')}</ul>
|
||
</div>`;
|
||
};
|
||
|
||
// kpiTile: baut das HTML einer einzelnen Kachel für renderPlanKpis().
|
||
// Parameter: label (Kachel-Titel), value (Hauptzahl), sub (Unterzeile),
|
||
// warn (optional, hebt den Wert farblich hervor, z. B. bei überfälligen
|
||
// Aufgaben). Rückgabe: HTML-String.
|
||
function kpiTile(label, value, sub, warn){
|
||
return `<div class="plan-kpi-tile${warn ? ' warn' : ''}">
|
||
<div class="kpi-label">${esc(label)}</div>
|
||
<div class="kpi-value">${esc(value)}</div>
|
||
<div class="kpi-sub">${esc(sub)}</div>
|
||
</div>`;
|
||
}
|
||
|
||
// renderPlanKpis: füllt die KPI-Kachelzeile über dem GANTT (Cockpit-Layout,
|
||
// #planKpiRow in App.html) mit vier Kennzahlen, die alle aus den
|
||
// bereits vorhandenen Plan-Daten abgeleitet sind (keine neue Datenquelle):
|
||
// Gesamtfortschritt (Ø-Fortschritt aller TODOs), offene Aufgaben (inkl.
|
||
// überfällige), nächster anstehender Meilenstein und Team-Auslastung
|
||
// (Ø-Prozentwert aus computeResourceLoads(), dieselbe Zahl wie im
|
||
// Auslastungs-Modal). Wird nach jedem GANTT-Rendering aufgerufen, damit sie
|
||
// nach TODO-/Meilenstein-/Zuordnungsänderungen sofort aktuell ist.
|
||
window.renderPlanKpis = function(){
|
||
const row = document.getElementById('planKpiRow');
|
||
if(!row || !app.project) return;
|
||
const plan = app.ensurePlanLocal();
|
||
const todos = Array.isArray(plan.todos) ? plan.todos : [];
|
||
const milestones = Array.isArray(plan.milestones) ? plan.milestones : [];
|
||
const today = new Date();
|
||
today.setHours(0, 0, 0, 0);
|
||
|
||
let progressTile;
|
||
if(todos.length === 0){
|
||
progressTile = kpiTile('Gesamtfortschritt', '–', 'Keine Aufgaben angelegt');
|
||
} else {
|
||
const avg = Math.round(todos.reduce((s, t) => s + (parseInt(t.progress, 10) || 0), 0) / todos.length);
|
||
const doneCount = todos.filter(t => t.done).length;
|
||
progressTile = kpiTile('Gesamtfortschritt', avg + '%', doneCount + ' von ' + todos.length + ' Aufgaben erledigt');
|
||
}
|
||
|
||
const open = todos.filter(t => !t.done);
|
||
const overdue = open.filter(t => t.end && parseDateISO(t.end) < today);
|
||
const openSub = overdue.length > 0 ? overdue.length + ' überfällig' : (open.length > 0 ? 'Im Zeitplan' : 'Alle Aufgaben erledigt');
|
||
const openTile = kpiTile('Offene Aufgaben', String(open.length), openSub, overdue.length > 0);
|
||
|
||
const upcoming = milestones
|
||
.filter(m => m.date && parseDateISO(m.date) >= today)
|
||
.sort((a, b) => parseDateISO(a.date) - parseDateISO(b.date));
|
||
let milestoneTile;
|
||
if(upcoming.length > 0){
|
||
milestoneTile = kpiTile('Nächster Meilenstein', formatDateDE(parseDateISO(upcoming[0].date)), upcoming[0].name || 'Meilenstein');
|
||
} else {
|
||
milestoneTile = kpiTile('Nächster Meilenstein', '–', milestones.length > 0 ? 'Keine anstehenden Meilensteine' : 'Keine Meilensteine angelegt');
|
||
}
|
||
|
||
const { loads, maxDays } = computeResourceLoads();
|
||
const loadValues = Object.values(loads);
|
||
let loadTile;
|
||
if(loadValues.length === 0){
|
||
loadTile = kpiTile('Team-Auslastung', '–', 'Keine Beteiligten zugeordnet');
|
||
} else {
|
||
const avgPct = Math.round(loadValues.reduce((s, l) => s + (l.days / maxDays * 100), 0) / loadValues.length);
|
||
const top = loadValues.slice().sort((a, b) => b.days - a.days)[0];
|
||
loadTile = kpiTile('Team-Auslastung', avgPct + '%', top.days > 0 ? 'Höchste Auslastung: ' + top.person.name : 'Noch keine Aufgaben zugewiesen');
|
||
}
|
||
|
||
row.innerHTML = progressTile + openTile + milestoneTile + loadTile;
|
||
};
|
||
|
||
// renderGanttDependencies: zeichnet für alle TODO-/Meilenstein-Balken die
|
||
// Abhängigkeits-Pfade als SVG-Kurven mit Pfeilspitzen in das Diagramm.
|
||
// Bereits vorhandene Linien werden zuvor entfernt; Konflikt- und
|
||
// erledigte-Kanten erhalten eigene Farben. Parameter: container (optional,
|
||
// GANTT-Container). Rückgabe: keine.
|
||
window.renderGanttDependencies = function(container){
|
||
const c = container || document.getElementById('planGanttContainer');
|
||
if(!c) return;
|
||
const chart = c.querySelector('.gantt-chart');
|
||
if(!chart) return;
|
||
|
||
let svg = chart.querySelector('.gantt-dependencies-svg');
|
||
if(svg) svg.remove();
|
||
|
||
const nodeBars = Array.from(chart.querySelectorAll('.gantt-bar.todo[data-todo-id], .gantt-milestone[data-todo-id]'));
|
||
if(nodeBars.length === 0) return;
|
||
|
||
const chartRect = chart.getBoundingClientRect();
|
||
const barMap = new Map();
|
||
nodeBars.forEach(b => {
|
||
if(b.dataset.todoId) barMap.set(b.dataset.todoId, b);
|
||
});
|
||
|
||
const paths = [];
|
||
nodeBars.forEach(targetBar => {
|
||
const dependsOnStr = targetBar.dataset.todoDepends;
|
||
if(!dependsOnStr) return;
|
||
const depIds = dependsOnStr.split(',').map(s => s.trim()).filter(Boolean);
|
||
depIds.forEach(depId => {
|
||
const sourceBar = barMap.get(depId);
|
||
if(!sourceBar) return;
|
||
|
||
const sourceRect = sourceBar.getBoundingClientRect();
|
||
const targetRect = targetBar.getBoundingClientRect();
|
||
|
||
const x1 = sourceRect.right - chartRect.left;
|
||
const y1 = sourceRect.top + sourceRect.height / 2 - chartRect.top;
|
||
const x2 = targetRect.left - chartRect.left;
|
||
const y2 = targetRect.top + targetRect.height / 2 - chartRect.top;
|
||
|
||
const isConflict = x2 < x1;
|
||
const isDone = targetBar.classList.contains('done') && sourceBar.classList.contains('done');
|
||
|
||
let d = '';
|
||
if(x2 >= x1 + 10){
|
||
const midX = x1 + (x2 - x1) / 2;
|
||
d = `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`;
|
||
} else {
|
||
const r = 16;
|
||
d = `M ${x1} ${y1} C ${x1 + r} ${y1}, ${x1 + r} ${(y1 + y2)/2}, ${(x1 + x2)/2} ${(y1 + y2)/2} C ${x2 - r} ${(y1 + y2)/2}, ${x2 - r} ${y2}, ${x2} ${y2}`;
|
||
}
|
||
|
||
let pathClass = 'gantt-dep-path';
|
||
let markerId = 'gantt-arrow-normal';
|
||
if(isConflict){ pathClass += ' conflict'; markerId = 'gantt-arrow-conflict'; }
|
||
else if(isDone){ pathClass += ' done'; markerId = 'gantt-arrow-done'; }
|
||
|
||
paths.push(`<path class="${pathClass}" d="${d}" marker-end="url(#${markerId})" data-source="${esc(sourceBar.dataset.todoId)}" data-target="${esc(targetBar.dataset.todoId)}" />`);
|
||
});
|
||
});
|
||
|
||
if(paths.length === 0) return;
|
||
|
||
svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||
svg.setAttribute('class', 'gantt-dependencies-svg');
|
||
svg.innerHTML = `
|
||
<defs>
|
||
<marker id="gantt-arrow-normal" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto">
|
||
<path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="var(--accent)" />
|
||
</marker>
|
||
<marker id="gantt-arrow-conflict" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto">
|
||
<path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="var(--red)" />
|
||
</marker>
|
||
<marker id="gantt-arrow-done" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto">
|
||
<path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="var(--green)" />
|
||
</marker>
|
||
</defs>
|
||
${paths.join('')}
|
||
`;
|
||
|
||
chart.appendChild(svg);
|
||
};
|
||
|
||
// fitPlanGanttRange: setzt die Datumsfelder der Seite auf den Projektzeitraum
|
||
// (inkl. 7 Tage Puffer) zurück und rendert das Diagramm neu. Wird auch nach
|
||
// Drags außerhalb des sichtbaren Bereichs von plan-drag.js genutzt.
|
||
window.fitPlanGanttRange = function(){
|
||
// Nur die Abwesenheiten der Projektbeteiligten dürfen den Zeitraum
|
||
// aufziehen — alle anderen Urlaubszeilen werden ohnehin nicht gezeichnet.
|
||
const range = ganttRangeFromProjects([app.project], 7, projectAssignees(app.project, app.week).map(a => a.person.id));
|
||
document.getElementById('planGanttStart').value = formatDateISO(range.start);
|
||
document.getElementById('planGanttEnd').value = formatDateISO(range.end);
|
||
renderPlanGantt();
|
||
};
|
||
|
||
// zoomPlanGantt: ändert die Pixel-pro-Tag-Stufe des Diagramms.
|
||
// Nach unten hinaus wird wieder auf die Containerbreite angepasst (fit).
|
||
window.zoomPlanGantt = function(dir){
|
||
const container = document.getElementById('planGanttContainer');
|
||
let start = parseDateISO(document.getElementById('planGanttStart').value);
|
||
let end = parseDateISO(document.getElementById('planGanttEnd').value);
|
||
if(!start || !end) return;
|
||
const totalDays = Math.max(1, daysBetween(start, end) + 1);
|
||
const cw = container ? Math.max(200, container.clientWidth - 250) : 900;
|
||
const fitPx = Math.max(3, cw / totalDays);
|
||
const base = app.pxPerDay || fitPx;
|
||
let next;
|
||
if(dir > 0){
|
||
next = Math.min(120, Math.round(base * 1.35));
|
||
} else {
|
||
next = Math.round(base / 1.35);
|
||
if(next <= fitPx * 0.7) next = null;
|
||
}
|
||
app.pxPerDay = next;
|
||
renderPlanGantt();
|
||
};
|
||
|
||
// ---------- Ressourcen-Auslastung ----------
|
||
|
||
// computeResourceLoads: berechnet die Auslastung der Projektbeteiligten in
|
||
// Werktagen (ohne Wochenenden) anhand der ihnen zugeordneten TODOs.
|
||
// Gemeinsam genutzt von renderResourceLoad() (Detailkarten im
|
||
// Auslastungs-Modal) und renderPlanKpis() (Team-Auslastung-Kachel), damit
|
||
// beide dieselbe Zahl zeigen.
|
||
//
|
||
// Neben der Auslastung IN DIESEM Projekt (days/todos) wird zusätzlich
|
||
// erfasst, wie stark dieselbe Person in den ÜBRIGEN Projekten derselben
|
||
// Sitzung gebunden ist (otherDays/otherProjects). Ohne diesen Blick über den
|
||
// Projektrand ist eine Überbuchung strukturell unsichtbar: jemand kann hier
|
||
// entspannt aussehen und trotzdem in vier weiteren Projekten verplant sein.
|
||
// Die Daten dafür sind bereits vorhanden — app.week.projects enthält alle
|
||
// Projekte der Sitzung (GET /load-all lädt sie ohnehin komplett).
|
||
//
|
||
// Rückgabe: { loads, maxDays } — loads ist ein Objekt Person-ID ->
|
||
// { person, roles, days, todos, otherDays, otherProjects }, maxDays das
|
||
// Maximum über alle Personen (mindestens 1, für Prozent-Berechnungen; bezieht
|
||
// sich bewusst nur auf die projekteigenen Tage, damit die Balken im Modal
|
||
// untereinander vergleichbar bleiben).
|
||
function computeResourceLoads(){
|
||
const plan = app.ensurePlanLocal();
|
||
const todos = Array.isArray(plan.todos) ? plan.todos.filter(t => t.start && t.end) : [];
|
||
const assignees = projectAssignees(app.project, app.week);
|
||
|
||
const loads = {};
|
||
assignees.forEach(a => {
|
||
if(!loads[a.person.id]){
|
||
loads[a.person.id] = { person: a.person, roles: [], days: 0, todos: [], otherDays: 0, otherProjects: [] };
|
||
}
|
||
if(!loads[a.person.id].roles.includes(a.role)) loads[a.person.id].roles.push(a.role);
|
||
});
|
||
|
||
todos.forEach(t => {
|
||
if(!Array.isArray(t.assignees) || t.assignees.length === 0) return;
|
||
const days = workdaysBetween(parseDateISO(t.start), parseDateISO(t.end));
|
||
t.assignees.forEach(pid => {
|
||
if(!loads[pid]) return;
|
||
loads[pid].days += days;
|
||
loads[pid].todos.push(t.title);
|
||
});
|
||
});
|
||
|
||
// Auslastung in den anderen Projekten derselben Sitzung
|
||
((app.week && app.week.projects) || []).forEach(other => {
|
||
if(other.id === app.project.id) return;
|
||
const otherTodos = (other.plan && Array.isArray(other.plan.todos)) ? other.plan.todos : [];
|
||
otherTodos.forEach(t => {
|
||
if(!t.start || !t.end || !Array.isArray(t.assignees)) return;
|
||
const days = workdaysBetween(parseDateISO(t.start), parseDateISO(t.end));
|
||
t.assignees.forEach(pid => {
|
||
if(!loads[pid]) return; // nur Personen, die auch hier beteiligt sind
|
||
loads[pid].otherDays += days;
|
||
const label = other.nr ? (other.nr + ' ' + (other.name || '')) : (other.name || 'Projekt');
|
||
if(!loads[pid].otherProjects.includes(label)) loads[pid].otherProjects.push(label);
|
||
});
|
||
});
|
||
});
|
||
|
||
const maxDays = Math.max(1, Object.values(loads).reduce((m, l) => Math.max(m, l.days), 0));
|
||
return { loads, maxDays };
|
||
}
|
||
|
||
// openResourceModal: springt in den Bereich "Terminplan", in dem die
|
||
// Auslastungskarten stehen (#resourceLoadContainer). Früher öffnete die
|
||
// Funktion ein eigenes Modal; seit die Seite in Bereiche gegliedert ist
|
||
// (js/plan/plan-sections.js), ist der Inhalt fester Bestandteil des
|
||
// Terminplan-Bereichs. Der Name bleibt, weil die Kompakt-Karte
|
||
// "Ressourcen-Auslastung" im Dashboard darauf verweist.
|
||
window.openResourceModal = function(){
|
||
if(typeof showPlanSection === 'function') showPlanSection('terminplan');
|
||
const container = document.getElementById('resourceLoadContainer');
|
||
if(container) container.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
};
|
||
|
||
// renderResourceLoad: rendert pro Person eine Auslastungskarte mit Balken
|
||
// und Abwesenheits-Hinweis in #resourceLoadContainer (Inhalt des
|
||
// Auslastungs-Modals) sowie eine kompakte Vorschau (Balkenreihe) in
|
||
// #planResourceSummary (die Kompakt-Karte selbst). Ein Klick auf eine
|
||
// Detailkarte öffnet das Abwesenheits-Modal aus plan-modals.js.
|
||
window.renderResourceLoad = function(){
|
||
const container = document.getElementById('resourceLoadContainer');
|
||
const summaryEl = document.getElementById('planResourceSummary');
|
||
if(!container || !app.project) return;
|
||
const { loads, maxDays } = computeResourceLoads();
|
||
const loadValues = Object.values(loads);
|
||
|
||
if(loadValues.length === 0){
|
||
container.innerHTML = '<span class="hint">Keine Beteiligten zugeordnet.</span>';
|
||
if(summaryEl) summaryEl.innerHTML = '<span class="hint">Keine Beteiligten zugeordnet.</span>';
|
||
return;
|
||
}
|
||
|
||
if(summaryEl){
|
||
const cells = loadValues.map(l => {
|
||
const pct = Math.round(l.days / maxDays * 100);
|
||
const otherHint = l.otherDays > 0 ? ` (+${l.otherDays} anderswo)` : '';
|
||
return `<div class="plan-heat-cell" style="opacity:${Math.max(.15, pct / 100)}" title="${esc(l.person.name)}: ${l.days} Tage${otherHint}"></div>`;
|
||
}).join('');
|
||
const alsoBooked = loadValues.filter(l => l.otherDays > 0).length;
|
||
const chip = alsoBooked > 0
|
||
? `<span class="plan-mini-chip warn">${alsoBooked} auch in anderen Projekten</span>`
|
||
: `<span class="plan-mini-chip">nur in diesem Projekt</span>`;
|
||
summaryEl.innerHTML = `<div class="plan-heat-row">${cells}</div>
|
||
<div class="plan-mini-chip-row">${chip}</div>`;
|
||
}
|
||
|
||
let html = '<div class="section-title" style="margin-bottom:8px;font-size:13px">Ressourcen-Auslastung (Aufgabentage, ohne Wochenenden)</div>';
|
||
html += '<div class="load-grid plan-resource-grid">';
|
||
Object.values(loads).forEach(l => {
|
||
const pct = Math.round(l.days / maxDays * 100);
|
||
const absCount = app.countPersonAbsences(l.person.id);
|
||
const absBadge = absCount > 0 ? `<div class="hint" style="font-size:10px;margin-top:2px">${absCount} Abwesenheit(en)</div>` : '';
|
||
|
||
let todoListHtml;
|
||
if(l.todos.length === 0){
|
||
todoListHtml = '<div class="hint">keine TODOs</div>';
|
||
} else {
|
||
todoListHtml = l.todos.slice(0,3).map(t => `<div><span>${esc(t)}</span></div>`).join('');
|
||
if(l.todos.length > 3){
|
||
todoListHtml += '<div class="hint">+' + (l.todos.length - 3) + ' weitere</div>';
|
||
}
|
||
}
|
||
|
||
// Gegenüberstellung: Tage in diesem Projekt vs. in den übrigen Projekten
|
||
// derselben Sitzung (siehe computeResourceLoads) — macht sichtbar, wenn
|
||
// jemand hier entspannt aussieht, aber anderswo ausgebucht ist.
|
||
const otherBadge = l.otherDays > 0
|
||
? `<div class="plan-resource-other" title="${esc(l.otherProjects.join('\n'))}">
|
||
+${l.otherDays} Tage in ${l.otherProjects.length} weiteren Projekt${l.otherProjects.length === 1 ? '' : 'en'}
|
||
</div>`
|
||
: `<div class="plan-resource-other muted">keine weiteren Projekte</div>`;
|
||
|
||
html += `<div class="load-card plan-resource-card plan-resource-clickable" onclick="openAbsenceModal('${esc(l.person.id)}')" title="Klicken, um Urlaube/Abwesenheiten zu bearbeiten">
|
||
<h3>${esc(l.person.name)} <span style="font-size:10px;color:#888;font-weight:normal">(${esc(l.roles.join(' / '))})</span></h3>
|
||
<div class="load-num" style="font-size:18px">${l.days}</div>
|
||
<div class="bar" style="height:6px;margin-top:4px"><div style="width:${pct}%;background:${pct>75?'#c53030':pct>45?'#d69e2e':'#2f855a'}"></div></div>
|
||
${otherBadge}
|
||
<div class="load-detail" style="font-size:10px;margin-top:4px">${todoListHtml}</div>
|
||
${absBadge}
|
||
</div>`;
|
||
});
|
||
html += '</div>';
|
||
container.innerHTML = html;
|
||
};
|
||
|
||
// Abhängigkeitslinien hängen von Pixel-Positionen ab -> bei Fenstergröße neu zeichnen
|
||
// Debounce, damit während des Ziehens nicht unnötig neu gerendert wird.
|
||
// Seit der Projektbereich ein Bereich der Hauptseite ist, läuft dieser
|
||
// Lauscher auch, während ein ganz anderer Bereich sichtbar ist. In einem
|
||
// ausgeblendeten Container sind alle gemessenen Positionen 0 — das Zeichnen
|
||
// wäre nicht nur überflüssig, sondern falsch. Deshalb der Bereichs-Test.
|
||
window.addEventListener('resize', () => {
|
||
if(currentTab !== 'plan' || !app.project) return;
|
||
if(app.resizeTimer) clearTimeout(app.resizeTimer);
|
||
app.resizeTimer = setTimeout(() => renderGanttDependencies(), 150);
|
||
});
|
||
})(); |