commit 004003cd176824b843b1db1cc1053ad831fcd803 Author: Erik Date: Wed Aug 12 08:27:20 2026 +0200 Initial commit: Projektübersicht - Docker GANT diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..4284e7a Binary files /dev/null and b/.DS_Store differ diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..fc88ea9 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,6 @@ +node_modules/ +npm-debug.log +.git +.gitignore +Docker/* +!Docker/Dockerfile diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..27b0a8b --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,5 @@ +{ + "recommendations": [ + "cgaspard.lmstudio-code" + ] +} \ No newline at end of file diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..870fe7e --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,133 @@ +# AGENTS.md + +## File structure + +``` +. +├── server.js # Express server with API endpoints +├── package.json # Dependencies (express, cors) +├── public/ +│ ├── Test.html # Root HTML file (served at /) +│ ├── main.v2.js # Complete frontend client app +│ └── styles.css # UI styles +├── Docker/ +│ └── Dockerfile # Node.js Alpine image +├── docker-compose.yml # Docker service definition +└── sessions/ # Data directory (bind-mounted in Docker) + ├── ELT/ # Elektro department + ├── HLS/ # HLS department + └── ARCH/ # Architektur department +``` + +## Overview + +Single-page app for tracking engineering projects across weekly sessions +("Sitzungen"). Vanilla JS/HTML/CSS frontend (`public/`) + Node.js/Express server +(`server.js`). No build step, no bundler. Data is persisted as CSV files under +`sessions/`. + +## Running + +- `npm install` then `npm start` (executes `node server.js`). +- Or with Docker: `docker compose -f Docker/docker-compose.yml up --build`. +- Server runs on `PORT` env var or defaults to `3003`; serves `public/Test.html` + as root and API under `/load-all`, `/save-csv`, `/delete-csv`. +- Frontend assumes the API lives at `window.location.origin`, falling back to + `http://localhost:3003` when opened as a local file. Opening `Test.html` + directly without a server will load seed/demo data. + +## Operations + +### Local +```bash +npm install +npm start +``` +Access at `http://localhost:3003` (or `PORT=3004` if occupied). + +### Docker +```bash +docker compose -f Docker/docker-compose.yml up --build +``` +Access at `http://localhost:3003` (or override with `PORT=3004`). + +## CSV format + +- Delimiter: semicolon (`;`) +- Encoding: UTF-8 with BOM (`\ufeff`) +- Structure: + - `sessions//` contains department data + - Week files: `.csv` (e.g., `KW_30___2026.csv`) + - Global people: `_people.csv` with columns `NAME;Rollen;Voller Name` + +## Data layout +- Data is split by department: `sessions/ELT/`, `sessions/HLS/`, `sessions/ARCH/`. + Valid departments are hard-coded in `server.js` (`VALID_DEPARTMENTS`) and + `main.v2.js` (`DEPARTMENTS`). Unknown department values fall back to `ELT`. +- Each week is one CSV file named `.csv` with `;` delimiter and UTF-8 BOM. +- Each department has a global people list in `_people.csv` with columns + `NAME;Rollen;Voller Name`. New people are added globally and copied into the + current week. Historical weeks keep their own person copies so deleted global + people remain visible in old sessions. +- The app reads CSVs on startup via `/load-all`; `localStorage` is used only + for the last-selected department/tab UI state. Do not store data in + `localStorage`. +- Editing CSVs by hand is possible but risky; prefer the UI. + +## Architecture notes + +- Frontend is in `public/` (`Test.html`, `main.v2.js`, `styles.css`). +- `main.v2.js` is the entire client app loaded as a classic non-module ` + + + + +

+ +

+ + + +

+ +

Projektübersicht Elektro

+ +

+ + + + + + + +

+ + + + +

+ +

+ Beteiligt X + Optional (X) +

+ + + + + + + + + +

+ + + + + + + \ No newline at end of file diff --git a/public/dein_bild.ico b/public/dein_bild.ico new file mode 100644 index 0000000..4ecb878 Binary files /dev/null and b/public/dein_bild.ico differ diff --git a/public/main.v2.js b/public/main.v2.js new file mode 100644 index 0000000..625ca4d --- /dev/null +++ b/public/main.v2.js @@ -0,0 +1,2813 @@ +// ----------------------------- +// Projektübersicht — kommentierter Quellcode +// Autor: (kommentiert automatisch) +// Hinweis: Kommentare erklären die Struktur und Funktion der wichtigsten +// Teile. Funktionaler Code wurde nicht verändert. +// ----------------------------- + +// Konstanten: Leistungsphasen, Rollen und LocalStorage-Key +const LPHS = ["LPH 1","LPH 2","LPH 3","LPH 4","LPH 5","LPH 6","LPH 7","LPH 8", "W+M"]; // Spalten für Leistungsphasen +const ROLES = ["Planung","Projektleitung","Bauüberwachung"]; // Gruppierung der Personen +const GROUP_ORDER = ["Aktive Projekte","Kleine Projekte","In Anbahnung","Allgemein"]; // Reihenfolge der Projektgruppen +const STORAGE = "projuebersicht_v1"; // Durch lokale UI-State-Persistenz genutzter Key +const DEFAULT_DEPARTMENT = 'ELT'; +const DEFAULT_TAB = 'board'; + +// Farbpalette für GANTT-Balken (eine pro Projekt, wiederholend) +const GANTT_COLORS = ['#0071e3','#248a3d','#b25000','#7c3aed','#d70015','#0ca678','#d9480f','#5f3dc4']; + +// Passwortschutz: SHA256-Hash des erlaubten Passworts. +// Wenn Sie das Passwort ändern möchten, generieren Sie den SHA256-Hash (https://emn178.github.io/online-tools/sha256.html) +// des neuen Passworts und ersetzen Sie den Wert hier. +const PROTECTED_PASSWORD_HASH = "107bab579e8500e459690cf48ba77de32be43cadb8421bbe79fad20a55b39b6f"; + +// requestedAction speichert die Aktion, die nach erfolgreicher Passwort-Eingabe ausgeführt wird. +let requestedAction = null; +let saveSyncTimer = null; +let isAuthenticated = false; + +// In-memory Datenbank: Sitzungen (weeks) und aktuell ausgewählte Sitzung +let db = { weeks: [], currentWeek: null, globalPeople: {} }; + +// Aktuelle Abteilung (ELT, HLS, ARCH). Daten werden in sessions// getrennt gespeichert. +let currentDepartment = DEFAULT_DEPARTMENT; +let currentTab = DEFAULT_TAB; +const DEPARTMENTS = { + ELT: { label: 'Elektro', icon: '' }, + HLS: { label: 'HLS', icon: '' }, + ARCH: { label: 'Architektur', icon: '' } +}; + +// departmentParam: gibt ein Query-String-Fragment fuer die aktuelle Abteilung zurueck. +function departmentParam(){ + return '?department=' + encodeURIComponent(currentDepartment); +} + +function saveUiState(){ + try { + const state = { department: currentDepartment, tab: currentTab }; + window.localStorage.setItem(STORAGE, JSON.stringify(state)); + } catch (err) { + console.warn('UI-State kann nicht gespeichert werden:', err); + } +} + +function loadUiState(){ + try { + const state = JSON.parse(window.localStorage.getItem(STORAGE) || '{}'); + if(state.department && DEPARTMENTS[state.department]) currentDepartment = state.department; + // Tab wird nicht aus dem localStorage wiederhergestellt, damit nach dem + // Neuladen immer das Projektboard angezeigt wird. + } catch (err) { + console.warn('UI-State kann nicht geladen werden:', err); + } +} + +// ---------- Datumshilfsfunktionen (GANTT) ---------- + +function parseDateISO(d){ + if(!d) return null; + const m = String(d).match(/^(\d{4})-(\d{2})-(\d{2})$/); + if(!m) return null; + const date = new Date(parseInt(m[1]), parseInt(m[2])-1, parseInt(m[3])); + if(isNaN(date.getTime())) return null; + return date; +} + +function formatDateISO(d){ + if(!d || isNaN(d.getTime())) return ''; + const y = d.getFullYear(); + const m = String(d.getMonth()+1).padStart(2,'0'); + const day = String(d.getDate()).padStart(2,'0'); + return `${y}-${m}-${day}`; +} + +function addDays(d, n){ + const res = new Date(d.getTime()); + res.setDate(res.getDate() + n); + return res; +} + +function daysBetween(a, b){ + const ms = b.getTime() - a.getTime(); + return Math.round(ms / (1000 * 60 * 60 * 24)); +} + +// workdaysBetween: Anzahl der Werktage (Mo–Fr) im Zeitraum inkl. Start- und Endtag. +// Wochenendtage (Sa/So) werden nicht mitgezählt – z.B. für die Auslastung. +function workdaysBetween(a, b){ + if(!a || !b || b < a) return 0; + let count = 0; + let current = new Date(a.getTime()); + while(current <= b){ + const day = current.getDay(); + if(day !== 0 && day !== 6) count++; + current = addDays(current, 1); + } + return count; +} + +function formatDateDE(d){ + if(!d || isNaN(d.getTime())) return ''; + return `${String(d.getDate()).padStart(2,'0')}.${String(d.getMonth()+1).padStart(2,'0')}.${d.getFullYear()}`; +} + +// ISO-Kalenderwoche nach https://en.wikipedia.org/wiki/ISO_week_date +function getWeekNumber(d){ + const date = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate())); + const dayNum = date.getUTCDay() || 7; + date.setUTCDate(date.getUTCDate() + 4 - dayNum); + const yearStart = new Date(Date.UTC(date.getUTCFullYear(), 0, 1)); + return Math.ceil((((date - yearStart) / 86400000) + 1) / 7); +} + +// ---------- Datumsbereich-Picker ---------- +// Ein Kalender-Popup für Von+Bis: erster Klick setzt das Startdatum, +// zweiter Klick das Enddatum (bei Klick vor dem Start wird getauscht). +// Schreibt ISO-Werte in zwei (versteckte) Inputs und aktualisiert optional +// ein Anzeige-Element. Verwendung: openRangePicker({ anchor, startInputId, endInputId, displayId, onApply }) + +let rangePickerState = null; + +function openDatePicker(opts){ + closeRangePicker(); + const input = document.getElementById(opts.inputId); + if(!input) return; + const preValue = parseDateISO(input.value); + const today = new Date(); + rangePickerState = { + opts: Object.assign({}, opts, { mode: 'single' }), + start: preValue, + end: preValue, + mode: 'single', + // Ansichtsmonat: vorhandener Wert, sonst heutiger Monat + viewYear: (preValue || today).getFullYear(), + viewMonth: (preValue || today).getMonth() + }; + + const pop = document.createElement('div'); + pop.id = 'rangePickerPopup'; + pop.className = 'range-picker'; + document.body.appendChild(pop); + + const anchorRect = opts.anchor ? opts.anchor.getBoundingClientRect() : { left: window.innerWidth/2 - 140, bottom: window.innerHeight/2 - 160 }; + pop.style.left = Math.max(8, Math.min(anchorRect.left, window.innerWidth - 296)) + 'px'; + pop.style.top = Math.min(anchorRect.bottom + 6, window.innerHeight - 340) + 'px'; + + renderRangePicker(); + + setTimeout(() => { + document.addEventListener('mousedown', rangePickerOutsideClick); + }, 0); +} + +function openRangePicker(opts){ + closeRangePicker(); + const isSingle = (opts.mode || 'range') === 'single'; + const startInput = document.getElementById(isSingle ? (opts.inputId || opts.startInputId) : opts.startInputId); + const endInput = isSingle ? null : document.getElementById(opts.endInputId); + if(!startInput || (!isSingle && !endInput)) return; + + const preStart = parseDateISO(startInput.value); + const preEnd = isSingle ? preStart : parseDateISO(endInput.value); + const today = new Date(); + rangePickerState = { + opts: Object.assign({}, opts, { mode: isSingle ? 'single' : 'range' }), + start: preStart, + end: preEnd, + mode: isSingle ? 'single' : 'range', + // Ansichtsmonat: vorhandener Start, sonst heutiger Monat + viewYear: (preStart || today).getFullYear(), + viewMonth: (preStart || today).getMonth() + }; + + const pop = document.createElement('div'); + pop.id = 'rangePickerPopup'; + pop.className = 'range-picker'; + document.body.appendChild(pop); + + // Position: unterhalb des Ankers, innerhalb des Viewports halten + const anchorRect = opts.anchor ? opts.anchor.getBoundingClientRect() : { left: window.innerWidth/2 - 140, bottom: window.innerHeight/2 - 160 }; + pop.style.left = Math.max(8, Math.min(anchorRect.left, window.innerWidth - 296)) + 'px'; + pop.style.top = Math.min(anchorRect.bottom + 6, window.innerHeight - 340) + 'px'; + + renderRangePicker(); + + // Klick außerhalb schließt das Popup (ohne Übernahme) + setTimeout(() => { + document.addEventListener('mousedown', rangePickerOutsideClick); + }, 0); +} + +function rangePickerOutsideClick(e){ + const pop = document.getElementById('rangePickerPopup'); + if(pop && !pop.contains(e.target)) closeRangePicker(); +} + +function closeRangePicker(){ + const pop = document.getElementById('rangePickerPopup'); + if(pop) pop.remove(); + document.removeEventListener('mousedown', rangePickerOutsideClick); + rangePickerState = null; +} + +function rangePickerNav(delta){ + if(!rangePickerState) return; + let m = rangePickerState.viewMonth + delta; + let y = rangePickerState.viewYear; + if(m < 0){ m = 11; y--; } + if(m > 11){ m = 0; y++; } + rangePickerState.viewMonth = m; + rangePickerState.viewYear = y; + renderRangePicker(); +} + +function rangePickerSelect(iso){ + if(!rangePickerState) return; + const d = parseDateISO(iso); + if(!d) return; + const st = rangePickerState; + if(st.mode === 'single'){ + st.start = d; + st.end = d; + applyRangePicker(); + return; + } + if(!st.start || (st.start && st.end)){ + // Neuen Bereich beginnen + st.start = d; + st.end = null; + } else { + // Zweiter Klick: Ende setzen, bei Bedarf tauschen + if(d < st.start){ st.end = st.start; st.start = d; } + else st.end = d; + applyRangePicker(); + return; + } + renderRangePicker(); +} + +function applyRangePicker(){ + if(!rangePickerState) return; + const { opts, start, end } = rangePickerState; + const isSingle = (opts.mode || 'range') === 'single'; + const startInput = document.getElementById(isSingle ? (opts.inputId || opts.startInputId) : opts.startInputId); + const endInput = isSingle ? null : document.getElementById(opts.endInputId); + const selected = start || end; + if(startInput) startInput.value = isSingle ? (selected ? formatDateISO(selected) : '') : (start ? formatDateISO(start) : ''); + if(endInput) endInput.value = end ? formatDateISO(end) : (start ? formatDateISO(start) : ''); + if(opts.displayId){ + const disp = document.getElementById(opts.displayId); + if(disp){ + const from = start ? formatDateDE(start) : ''; + const to = end ? formatDateDE(end) : from; + disp.value = isSingle ? (from || '') : (from ? (from + ' – ' + to) : ''); + } + } + const cb = opts.onApply; + closeRangePicker(); + if(typeof cb === 'function') cb(); +} + +function renderRangePicker(){ + const pop = document.getElementById('rangePickerPopup'); + if(!pop || !rangePickerState) return; + const st = rangePickerState; + const monthNames = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember']; + const first = new Date(st.viewYear, st.viewMonth, 1); + // Wochentag des Monatsersten, Montag = 0 + const firstWeekday = (first.getDay() + 6) % 7; + const daysInMonth = new Date(st.viewYear, st.viewMonth + 1, 0).getDate(); + const today = new Date(); + const todayMid = new Date(today.getFullYear(), today.getMonth(), today.getDate()); + + let hint; + if(st.mode === 'single') hint = 'Datum wählen'; + else if(!st.start || (st.start && st.end)) hint = 'Startdatum wählen'; + else hint = 'Enddatum wählen (Start: ' + formatDateDE(st.start) + ')'; + + let html = `

+ + ${monthNames[st.viewMonth]} ${st.viewYear} + +

${hint}

`; + ['Mo','Di','Mi','Do','Fr','Sa','So'].forEach(w => html += `

${w}

`); + for(let i = 0; i < firstWeekday; i++) html += '

'; + for(let day = 1; day <= daysInMonth; day++){ + const d = new Date(st.viewYear, st.viewMonth, day); + const iso = formatDateISO(d); + const classes = ['range-picker-day']; + if(d.getDay() === 0 || d.getDay() === 6) classes.push('weekend'); + if(d.getTime() === todayMid.getTime()) classes.push('today'); + if(st.start && d.getTime() === st.start.getTime()) classes.push('sel-start'); + if(st.end && d.getTime() === st.end.getTime()) classes.push('sel-end'); + if(st.start && st.end && d > st.start && d < st.end) classes.push('in-range'); + html += `

${day}

`; + } + html += '

'; + html += ``; + pop.innerHTML = html; +} + +// ---------- Kollabierbarer Header ---------- + +const HEADER_COLLAPSED_KEY = 'projuebersicht-header-collapsed'; + +function loadHeaderState(){ + let collapsed = true; // Default: Menü ist beim ersten Start geschlossen + try { + const stored = window.localStorage.getItem(HEADER_COLLAPSED_KEY); + if(stored !== null){ + collapsed = stored === 'true'; + } + } catch (err) {} + setHeaderCollapsed(collapsed, false); +} + +function saveHeaderState(collapsed){ + try { + window.localStorage.setItem(HEADER_COLLAPSED_KEY, collapsed ? 'true' : 'false'); + } catch (err) {} +} + +function setHeaderCollapsed(collapsed, persist){ + const menu = document.getElementById('headerMenu'); + const btn = document.querySelector('.header-bar .header-toggle'); + const icon = document.querySelector('.header-bar .header-toggle-icon'); + if(!menu) return; + if(collapsed){ + menu.classList.remove('open'); + menu.setAttribute('aria-hidden', 'true'); + if(icon) icon.textContent = '☰'; + if(btn) btn.setAttribute('aria-expanded', 'false'); + } else { + menu.classList.add('open'); + menu.setAttribute('aria-hidden', 'false'); + if(icon) icon.textContent = '✕'; + if(btn) btn.setAttribute('aria-expanded', 'true'); + } + if(persist) saveHeaderState(collapsed); +} + +function toggleHeader(){ + const menu = document.getElementById('headerMenu'); + const isOpen = menu && menu.classList.contains('open'); + setHeaderCollapsed(isOpen, true); +} + +// ---------- Theme (Light/Dark) ---------- + +function applyThemeIcon(theme){ + const icon = document.getElementById('themeIcon'); + if(!icon) return; + icon.textContent = theme === 'dark' ? '☀️' : '🌙'; +} + +function loadTheme(){ + let theme = 'auto'; + try { + theme = window.localStorage.getItem('projuebersicht-theme') || 'auto'; + } catch (err) { + console.warn('Theme kann nicht geladen werden:', err); + } + applyTheme(theme, false); +} + +function saveTheme(theme){ + try { + window.localStorage.setItem('projuebersicht-theme', theme); + } catch (err) { + console.warn('Theme kann nicht gespeichert werden:', err); + } +} + +function effectiveTheme(theme){ + if(theme === 'dark') return 'dark'; + if(theme === 'light') return 'light'; + return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; +} + +function applyTheme(theme, persist){ + const html = document.documentElement; + const eff = effectiveTheme(theme); + if(theme === 'dark') html.setAttribute('data-theme', 'dark'); + else if(theme === 'light') html.setAttribute('data-theme', 'light'); + else html.removeAttribute('data-theme'); + applyThemeIcon(eff); + if(persist) saveTheme(theme); +} + +function toggleTheme(){ + const html = document.documentElement; + const currentAttr = html.getAttribute('data-theme'); + const currentTheme = currentAttr || 'auto'; + const currentEffective = effectiveTheme(currentTheme); + const next = currentEffective === 'dark' ? 'light' : 'dark'; + applyTheme(next, true); +} + +// Bei Änderung der Systemeinstellung im "Auto"-Modus sofort anpassen +if(window.matchMedia){ + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(){ + let theme = 'auto'; + try { + theme = window.localStorage.getItem('projuebersicht-theme') || 'auto'; + } catch (err) {} + applyTheme(theme, false); + }); +} + +// ---------- Persistence (CSV-only via localhost server) ---------- + +// save: synchronisiert die aktuellen Daten als CSV-Dateien zum Server. +// Jede Sitzung wird als eigene CSV-Datei gespeichert. Personen und Rollen werden +// in der Sitzungscsv selbst abgelegt. +function save(){ + scheduleSessionSync(); +} + +function scheduleSessionSync(){ + if(saveSyncTimer){ clearTimeout(saveSyncTimer); } + saveSyncTimer = setTimeout(() => { syncAllToServer(); saveSyncTimer = null; }, 500); +} + +function syncAllToServer(){ + // Zuerst globale Personenliste speichern + saveGlobalPeopleToServer(); + // Dann jede Sitzung speichern + db.weeks.forEach(w => { + const filename = filenameForWeek(w.label); + const csv = weekToCsv(w); + sendCsvToServer(filename, csv) + .then(res => { if(res && res.ok) console.log('Sitzung gespeichert:', filename); }) + .catch(err => { console.error('Sitzung konnte nicht gespeichert werden:', filename, err.message || err); }); + }); +} + +function saveGlobalPeopleToServer(){ + const people = db.globalPeople[currentDepartment] || []; + if(people.length === 0) return; + const csv = globalPeopleToCsv(people); + sendCsvToServer('_people.csv', csv) + .then(res => { if(res && res.ok) console.log('Globale Personenliste gespeichert'); }) + .catch(err => { console.error('Globale Personenliste konnte nicht gespeichert werden:', err.message || err); }); +} + +// baseUrl: dynamische Server-URL, damit die App auch von anderen Geraeten im Netzwerk erreichbar ist. +// Fallback auf localhost:3003, wenn die Seite als lokale Datei geladen wurde. +function baseUrl(){ + const origin = window.location.origin; + if(typeof origin === 'string' && /^https?:\/\//.test(origin)){ + return origin; + } + return 'http://localhost:3003'; +} + +// switchDepartment: wechselt die aktive Abteilung und lädt deren Daten neu. +function switchDepartment(dept){ + if(!DEPARTMENTS[dept]) return; + currentDepartment = dept; + saveUiState(); + + // UI-Status der Abteilungs-Tabs aktualisieren + document.querySelectorAll('.dept-tab').forEach(btn => { + btn.classList.toggle('active', btn.dataset.dept === dept); + }); + + // Seitentitel anpassen + const info = DEPARTMENTS[dept]; + document.title = 'Projektübersicht ' + info.label; + const titleEl = document.getElementById('pageTitle'); + if(titleEl) titleEl.textContent = info.icon + ' Projektübersicht ' + info.label; + + // Datenbank leeren und neu laden + db = { weeks: [], currentWeek: null, globalPeople: db.globalPeople || {} }; + load(); +} + +// load: liest alle CSV-Dateien vom Server ein und baut daraus die Datenbank auf. +function load(){ + if(!window.fetch){ + alert('Ihr Browser unterstützt keine Netzwerk-Anfragen. Bitte verwenden Sie einen aktuellen Browser.'); + seed(); return; + } + const url = baseUrl() + '/load-all' + departmentParam(); + console.log('Loading from', url); + fetch(url) + .then(r => { if(!r.ok) throw new Error('Server HTTP '+r.status); return r.json(); }) + .then(data => { + // Globale Personenliste laden + db.globalPeople[currentDepartment] = parseGlobalPeopleCsv(data.people); + + const parsedSessions = (data.sessions || []).map(s => ({ filename: s.filename, rows: parseCsvText(s.content) })); + + db.weeks = []; + parsedSessions.forEach(s => { + const w = parseSessionCsv(s.filename, s.rows); + if(w) db.weeks.push(w); + }); + + if(db.weeks.length === 0){ + console.warn('Server lieferte 0 Sitzungsdateien. Es werden Beispieldaten (seed) angezeigt. Pruefen Sie, ob der Ordner sessions/ mitkopiert wurde.'); + seed(); + } + else { + db.weeks.sort((a,b) => weekSortKey(a.label).localeCompare(weekSortKey(b.label))); + applyAutoLock(); + const latest = db.weeks[db.weeks.length - 1]; + if(!db.currentWeek || !db.weeks.some(w => w.id === db.currentWeek)){ + db.currentWeek = latest.id; + } + console.log(`Server-Load erfolgreich: ${db.weeks.length} Sitzung(en).`); + } + // Geschützte Tabs dürfen nicht ohne Passwort angezeigt werden, auch wenn + // sie im UI-State gespeichert waren. + if(currentTab === 'projects' || currentTab === 'people') currentTab = DEFAULT_TAB; + renderAll(); + showTab(currentTab, true); + }) + .catch(err => { + console.error('Laden vom Server fehlgeschlagen:', err); + const serverUrl = baseUrl(); + const msg = 'Server unter ' + serverUrl + ' nicht erreichbar.\n\n' + + 'Mögliche Ursachen:\n' + + '- Der Server wurde nicht gestartet\n' + + '- Der Server läuft auf einem anderen Port (Standard: 3003)\n' + + '- Firewall/Antivirus blockiert ' + serverUrl + '\n\n' + + 'Es werden jetzt die Beispieldaten angezeigt.'; + alert(msg); + seed(); renderAll(); + }); +} + +// CSV-Hilfsfunktionen ---------------------------------------- + +function filenameForWeek(label){ + return (label.replace(/[^\w]/g,'_'))+'.csv'; +} + +function csvEscape(v){ + const s = (v === null || v === undefined ? '' : String(v)); + if(/[;"\n\r]/.test(s)) return '"' + s.replace(/"/g,'""') + '"'; + return s; +} + +function globalPeopleToCsv(people){ + const rows = [['NAME', 'Rollen', 'Voller Name', 'E-Mail', 'Abwesenheiten']]; + people.slice().sort((a,b) => a.name.localeCompare(b.name)).forEach(p => { + const absences = Array.isArray(p.absences) ? JSON.stringify(p.absences) : ''; + rows.push([p.name, (p.role || []).join(','), p.fullName || '', p.email || '', absences]); + }); + return '\ufeff' + rows.map(r => r.map(csvEscape).join(';')).join('\n'); +} + +function parseGlobalPeopleCsv(text){ + if(!text) return []; + const rows = parseCsvText(text); + if(!rows.length) return []; + const people = []; + rows.slice(1).forEach(row => { + const name = (row[0] || '').trim(); + if(!name) return; + const roles = String(row[1] || 'Planung').split(',').map(x => x.trim()).filter(Boolean); + const fullName = (row[2] || '').trim() || name; + const email = (row[3] || '').trim(); + let absences = []; + if(row[4]){ + try { + const parsed = JSON.parse(row[4]); + if(Array.isArray(parsed)) absences = parsed; + } catch(e) { + // Ignoriere fehlerhafte JSON-Daten + } + } + people.push({ id: personIdForName(name), name, fullName, email, role: roles, absences }); + }); + return people; +} + +// Persistente ID fuer eine Person aus dem Kuerzel, damit Anwesenheit und +// Zuordnungen auch nach einem Neuladen stabil bleiben. +function personIdForName(name){ + return 'p_' + String(name).trim().toLowerCase().replace(/[^a-z0-9]/g,'_'); +} + +function weekToCsv(w){ + // allPeople enthält für das Board jede (Person, Rolle)-Kombination einmal. + const grouped = peopleByRole(w); + const allPeople = []; + ROLES.forEach(r => grouped[r].forEach(entry => allPeople.push(entry))); + const rows = []; + // Metadaten-Zeile: Label, Datum und Sperrstatus der Sitzung + rows.push(['WOCHE', w.label || '', w.date || '', w.locked ? '1' : '']); + // PERSONEN-Zeile: Pro Spalte Name|Rolle|Voller Name, damit beim Laden + // die Zuordnung pro Rolle eindeutig bleibt und der volle Name erhalten ist. + // Der volle Name wird immer als dritter Teil gespeichert (auch leer), + // damit er beim Bearbeiten nicht versehentlich verloren geht. + const peopleMeta = allPeople.map(e => `${e.person.name}|${e.role}|${e.person.fullName || ''}`); + rows.push(['PERSONEN', '', '', ...peopleMeta, ...LPHS.map(() => ''), '','']); + rows.push(['Pr.-Nr.','Bezeichnung','Status', ...allPeople.map(e => e.person.name), ...LPHS, 'Gruppe','Index','Plan']); + rows.push(['ANWESENHEIT','', ...allPeople.map(e => w.attendance && w.attendance[e.person.id] ? 'X' : ''), ...LPHS.map(() => ''),'','','']); + w.projects.forEach(p => { + const arr = [p.nr || '', p.name || '', p.status || '']; + allPeople.forEach(entry => { + const s = p.assign[assignKey(entry.person.id, entry.role)]; + arr.push(s === 1 ? 'X' : s === 2 ? '(X)' : ''); + }); + LPHS.forEach(l => { + const v = p.lph[l]; + arr.push(v !== undefined && v !== '' ? String(v).replace(/%/g,'') + '%' : ''); + }); + arr.push(p.group || ''); + arr.push(p.order !== undefined ? String(p.order) : ''); + arr.push(p.plan ? JSON.stringify(p.plan) : ''); + rows.push(arr); + }); + return '\ufeff' + rows.map(r => r.map(csvEscape).join(';')).join('\n'); +} + + +function parseCsvText(text){ + // Manche ältere CSV-Dateien enthalten ein UTF-8-BOM gefolgt von einem + // literalen "ï»¿" (dreifach kodiert). Beides am Anfang entfernen. + return text.replace(/^[\ufeff\u00EF\u00BB\u00BF]+/,'').split(/\r?\n/).filter(line => line.trim() !== '').map(parseCsvLine); +} + +// Toleranter CSV-Zeilenparser. Versteht sowohl sauberes CSV als auch +// das ältere Format, bei dem Felder nur ein öffnendes Anführungszeichen +// hatten und das Semikolon innerhalb eines quoted Feldes gleichzeitig +// als Trennzeichen diente. +function parseCsvLine(line){ + const result = []; + let current = ''; + let inQuotes = false; + let hasUnclosedQuotes = false; + let i = 0; + while(i < line.length){ + const c = line[i]; + const n = line[i+1]; + if(inQuotes){ + if(c === '"' && n === '"'){ + current += '"'; i += 2; + } else if(c === ';' && n === '"'){ + // Altes Trennzeichen \";\\" innerhalb eines quoted Feldes + result.push(current); + current = ''; + inQuotes = false; + i += 1; + } else if(c === '"' && (n === ';' || n === undefined)){ + result.push(current); + current = ''; + inQuotes = false; + i += (n === ';' ? 2 : 1); + } else { + current += c; i++; + } + } else { + if(c === ';'){ + result.push(current); + current = ''; i++; + } else if(c === '"'){ + inQuotes = true; i++; + } else { + current += c; i++; + } + } + } + if(inQuotes) hasUnclosedQuotes = true; + result.push(current); + if(hasUnclosedQuotes){ + console.warn('CSV-Zeile enthält nicht geschlossene Anführungszeichen:', line.slice(0,80)); + } + return result; +} + +function decodeWeekLabel(filename){ + const base = filename.replace(/\.csv$/i,''); + let label = base.replace(/_+/g,' ').trim(); + if(/^KW \d+ \d+$/.test(label)){ + label = label.replace(/^KW (\d+) (\d+)$/, 'KW $1 / $2'); + } + return label || base; +} + +// Erzeugt einen Sortierschlüssel aus einem Wochenlabel, sodass z.B. +// "KW 9 / 2026" vor "KW 10 / 2026" kommt. +function weekSortKey(label){ + const m = String(label || '').match(/KW\s*(\d+)[^\d]+(\d{4})/i); + if(m){ + const kw = m[1].padStart(2,'0'); + return `${m[2]}-${kw}`; + } + return String(label || '').toLowerCase(); +} + + +function parseSessionCsv(filename, rows){ + if(!rows || rows.length === 0) return null; + let label, date, headerRowIdx = 0, attendanceRowIdx = 1, projectStartIdx = 2; + let locked = false; + let metaPeopleRow = null; + if(rows[0][0] === 'WOCHE'){ + label = rows[0][1] || decodeWeekLabel(filename); + date = rows[0][2] || ''; + locked = (rows[0][3] || '').trim() === '1'; + if(rows[1] && rows[1][0] === 'PERSONEN'){ + metaPeopleRow = rows[1]; + headerRowIdx = 2; attendanceRowIdx = 3; + } else { + headerRowIdx = 1; attendanceRowIdx = 2; + } + } else { + label = decodeWeekLabel(filename); + date = ''; + } + projectStartIdx = attendanceRowIdx + 1; + + const header = rows[headerRowIdx]; + if(!header || header.length < 4) return { id: uid(), label, date, people: [], projects: [], attendance: {} }; + + const lphStart = header.indexOf('LPH 1'); + const groupIdx = header.indexOf('Gruppe'); + const orderIdx = header.indexOf('Index'); + const planIdx = header.indexOf('Plan'); + const peopleCols = header.slice(3, lphStart === -1 ? header.length : lphStart); + + const people = []; + const colMap = []; + const personMeta = metaPeopleRow ? metaPeopleRow.slice(3, lphStart === -1 ? metaPeopleRow.length : lphStart) : []; + const personByName = {}; + const nameOccurrences = {}; + peopleCols.forEach((name, idx) => { + const n = (name || '').trim(); + if(!n){ colMap.push(null); return; } + + let roles = ['Planung']; + let fullName = n; + if(personMeta[idx]){ + const parts = String(personMeta[idx]).split('|'); + const rawRoles = parts[1] || ''; + const parsedRoles = rawRoles.split(',').map(x => x.trim()).filter(x => ROLES.includes(x)); + if(parsedRoles.length > 0) roles = parsedRoles; + // Voller Name ist alles ab dem zweiten Pipe; damit sind auch Pipe-Zeichen + // im Namen möglich. Leere Strings werden bewusst übernommen. + if(parts.length >= 3) fullName = parts.slice(2).join('|').trim(); + } else { + const occurrence = nameOccurrences[n] || 0; + roles = [ROLES[Math.min(occurrence, ROLES.length - 1)]]; + nameOccurrences[n] = occurrence + 1; + } + + // Gleiche Person (gleiches Kürzel) wird im Board pro Rolle mehrfach + // dargestellt, soll aber im Datenmodell nur einmal existieren. + let person = personByName[n]; + if(!person){ + person = { id: personIdForName(n), name: n, fullName: fullName, role: [] }; + personByName[n] = person; + people.push(person); + } + // Überschreibe den vollen Namen mit dem Wert aus der CSV; die CSV ist + // hier die führende Datenquelle für den vollständigen Namen. + person.fullName = fullName; + // Sammle alle bekannten Rollen der Person; die aktuelle Spaltenrolle + // wird für die Zuordnung über colMap verwendet. + roles.forEach(r => { if(!person.role.includes(r)) person.role.push(r); }); + + colMap.push({ person, role: roles[0] }); + }); + + const projects = []; + for(let rIdx = projectStartIdx; rIdx < rows.length; rIdx++){ + const row = rows[rIdx]; + if(row.length < 4) continue; + const nr = row[0] || ''; + const name = row[1] || ''; + const status = row[2] || ''; + if(!nr.trim() && !name.trim()) continue; + + const assign = {}; + peopleCols.forEach((_, i) => { + const entry = colMap[i]; + if(!entry) return; + const v = (row[3+i] || '').trim(); + const key = assignKey(entry.person.id, entry.role); + if(v === 'X') assign[key] = 1; + else if(v === '(X)') assign[key] = 2; + }); + + const lph = {}; + if(lphStart !== -1){ + LPHS.forEach((l, j) => { + const raw = row[lphStart + j]; + if(raw !== undefined && raw !== ''){ + const num = String(raw).replace(/%/g,''); + if(!isNaN(parseFloat(num)) && isFinite(num)) lph[l] = num; + } + }); + } + + let group = 'Aktive Projekte'; + if(groupIdx >= 0 && row[groupIdx]) group = row[groupIdx].trim() || group; + else if(row.length > 3) group = row[row.length - 1].trim() || group; + + let order = rIdx - projectStartIdx; + if(orderIdx >= 0 && row[orderIdx] !== undefined && row[orderIdx] !== ''){ + const parsed = parseInt(row[orderIdx], 10); + if(!isNaN(parsed)) order = parsed; + } + + let plan = null; + if(planIdx >= 0 && row[planIdx]){ + try { + const parsed = JSON.parse(row[planIdx]); + if(parsed && typeof parsed === 'object') plan = parsed; + } catch(e) { + console.warn('Plan-Daten für Projekt konnten nicht geparst werden:', nr, name, e); + } + } + + projects.push({ id: uid(), nr, name, status, group, lph, assign, order, plan }); + } + + const attendance = {}; + const attRow = rows[attendanceRowIdx]; + if(attRow && attRow[0] === 'ANWESENHEIT'){ + peopleCols.forEach((_, i) => { + const entry = colMap[i]; + if(entry && (attRow[2+i] || '').trim() === 'X'){ + attendance[entry.person.id] = true; + } + }); + } + + return { id: uid(), label, date, people, projects, attendance, locked }; +} + +// uid: generiert eine einfache, ausreichend eindeutige ID +function uid(){ return Date.now().toString(36)+Math.random().toString(36).slice(2,7); } + +// assignKey: Schlüssel für Projektzuordnungen (Person + Rolle getrennt) +function assignKey(personId, role){ return personId + '|' + role; } + +// sortGroups: sortiert Gruppen-Namen nach GROUP_ORDER, unbekannte ans Ende +function sortGroups(arr){ + return arr.sort((a,b)=>{ + const ia=GROUP_ORDER.indexOf(a), ib=GROUP_ORDER.indexOf(b); + return (ia===-1?999:ia)-(ib===-1?999:ib); + }); +} + +// seed: initialisiert Beispiel-Daten (Personen + eine Woche mit Projekten) +function seed(){ + const people = [ + {id:personIdForName('AP'), name:"AP", fullName:"Anton Peters", role:["Planung"]}, + {id:personIdForName('SK'), name:"SK", fullName:"Stefan Krause", role:["Planung"]}, + {id:personIdForName('AK'), name:"AK", fullName:"Alexander Klein", role:["Planung"]}, + {id:personIdForName('ED'), name:"ED", fullName:"Eva Dreyer", role:["Planung"]}, + {id:personIdForName('SE'), name:"SE", fullName:"Stefan Eschweiler", role:["Planung"]}, + {id:personIdForName('THK'), name:"THK", fullName:"Thorsten H. Klein", role:["Projektleitung"]}, + {id:personIdForName('SP'), name:"SP", fullName:"Sven Peschke", role:["Projektleitung"]}, + {id:personIdForName('SG'), name:"SG", fullName:"Sandra Gloag", role:["Projektleitung"]}, + {id:personIdForName('TW'), name:"TW", fullName:"Thorsten Wörster", role:["Projektleitung"]}, + {id:personIdForName('RR'), name:"RR", fullName:"Robert Rahn", role:["Bauüberwachung"]}, + {id:personIdForName('MK'), name:"MK", fullName:"Martin Kluge", role:["Bauüberwachung"]}, + {id:personIdForName('HR'), name:"HR", fullName:"Hartwig Rauch", role:["Bauüberwachung"]}, + ]; + db.globalPeople[currentDepartment] = JSON.parse(JSON.stringify(people)); + + const wid = uid(); + db.weeks = [{ + id: wid, label:"KW 30 / 2026", date:"2026-07-24", attendance:{}, people, projects: [ + demoProj("18-4007","Janusz-Korczak-Gesamtsch. Bottrop","Aktive Projekte","LPH5 als Vorabzug raus. NW-Räume vorauss. August.",{"LPH 1":100,"LPH 2":100,"LPH 3":100,"LPH 5":100,"LPH 6":100,"LPH 7":100,"LPH 8":95}), + demoProj("21-4030","NSHV Köln Immobilienprüfung in Hof","Aktive Projekte","Thorsten W. klärt und übernimmt Schriftverkehr. LV liegt zur Sichtung bei T.W.",{"LPH 1":100,"LPH 2":100,"LPH 3":100,"LPH 5":100,"LPH 6":100}), + demoProj("22-4056","Gymnasium Hemer","Aktive Projekte","",{"LPH 1":100,"LPH 2":100,"LPH 3":100,"LPH 5":100,"LPH 6":100,"LPH 7":100,"LPH 8":90}), + demoProj("22-4066","DSW 21 – Umbau E-Mobilität","Aktive Projekte","Elt-Montagen ab KW 33.",{"LPH 1":100,"LPH 2":100,"LPH 3":100,"LPH 5":100,"LPH 6":100,"LPH 7":100,"LPH 8":20}), + demoProj("24-4043","S-K ODL-Heim Sanierung Krefeld","Aktive Projekte","Voraussichtlich LV-Abgabe.",{"LPH 1":100,"LPH 2":100,"LPH 3":100,"LPH 5":100}), + ] + }]; + db.currentWeek = wid; + save(); +} + +// demoProj: Helfer zum Erzeugen eines Projekt-Objekts (für seed/Tests) +function demoProj(nr,name,group,status,lph){ + return {id:uid(), nr, name, group, status, lph: {...lph}, assign:{}, plan: null}; +} + +// ---------- Week management ---------- + +// refreshWeekSelect: aktualisiert das Dropdown mit verfügbaren Sitzungen +function refreshWeekSelect(){ + const sel = document.getElementById('weekSelect'); + sel.innerHTML = db.weeks.map(w=>``).join(''); +} + +function formatWeekDate(dateString){ + if(!dateString) return ''; + const parts = dateString.split('-'); + if(parts.length!==3) return dateString; + return `${parts[2]}.${parts[1]}.${parts[0]}`; +} + +function updateWeekDate(){ + const disp = document.getElementById('weekDateDisplay'); + const w = currentWeek(); + if(!disp) return; + disp.textContent = w?.date ? `Datum: ${formatWeekDate(w.date)}` : ''; +} + +// currentWeek: liefert das Woche-Objekt zur aktuellen Auswahl (oder undefined) +function currentWeek(){ return db.weeks.find(w=>w.id===db.currentWeek); } + +// switchWeek: setzt die aktuelle Woche und rendert die Ansicht neu +function switchWeek(id){ db.currentWeek = id; save(); renderAll(); } + +// newWeek: Dialog zur Erzeugung einer neuen Sitzung +function newWeek(){ + const label = prompt("Bezeichnung der neuen Sitzung (z.B. KW 31 / 2026):","KW / 2026"); + if(!label) return; + const date = prompt("Datum (JJJJ-MM-TT):", new Date().toISOString().slice(0,10)) || ""; + // Neue Woche übernimmt die aktuell globale Personenliste + const people = JSON.parse(JSON.stringify(db.globalPeople[currentDepartment] || [])); + const w = {id:uid(), label, date, people, projects:[], attendance:{}, locked:false}; + db.weeks.push(w); + applyAutoLock(); + db.currentWeek=w.id; save(); renderAll(); +} + +// cloneWeek: dupliziert die aktuelle Sitzung inkl. Projekten +function cloneWeek(){ + const cur = currentWeek(); if(!cur) return; + const label = prompt("Bezeichnung der duplizierten Sitzung:", cur.label+" (Kopie)"); + if(!label) return; + const date = prompt("Datum (JJJJ-MM-TT):", new Date().toISOString().slice(0,10)) || ""; + const w = JSON.parse(JSON.stringify(cur)); + w.id=uid(); w.label=label; w.date=date; w.attendance={}; w.locked=false; + // Neue IDs für duplizierte Projekte und Kennzeichnung + w.projects.forEach(p=>{ + p.id = uid(); + if(p.status && p.status.trim() !== "") p.statusState = 'duplicated'; + else delete p.statusState; + }); + db.weeks.push(w); + applyAutoLock(); + db.currentWeek=w.id; save(); renderAll(); +} + +// applyAutoLock: sperrt alle Sitzungen bis auf die chronologisch +// letzte (aktuellste). Wird beim Laden, Erstellen und Duplizieren verwendet, +// damit historische Sitzungen nicht mehr unbeabsichtigt bearbeitet werden. +function applyAutoLock(){ + if(db.weeks.length === 0) return; + const sorted = [...db.weeks].sort((a,b) => weekSortKey(a.label).localeCompare(weekSortKey(b.label))); + const latestId = sorted[sorted.length - 1].id; + db.weeks.forEach(w => { + w.locked = (w.id !== latestId); + }); +} + +// isWeekLocked: prüft, ob die aktuell ausgewählte Sitzung gesperrt ist +function isWeekLocked(w){ + return !!w && !!w.locked; +} + +// guardWeekLocked: zeigt eine Warnung, wenn die aktuelle Sitzung gesperrt ist. +// Wird von Bearbeitungsfunktionen verwendet, um versehentliche Änderungen an +// historischen Sitzungen zu verhindern. +function guardWeekLocked(){ + const w = currentWeek(); + if(isWeekLocked(w)){ + alert('Diese Sitzung ist gesperrt. Bitte entsperren Sie sie zuerst.'); + return true; + } + return false; +} + +// unlockCurrentWeek: Entsperrt die aktuelle Sitzung nach Passwortprüfung +function unlockCurrentWeek(skipAuth = false){ + const w = currentWeek(); + if(!w || !w.locked) return; + if(!skipAuth && !isAuthenticated){ + requestedAction = { type: 'unlockWeek' }; + document.getElementById('passwordModal').style.display='flex'; + document.getElementById('passwordInput').value=''; + document.getElementById('passwordInput').focus(); + return; + } + w.locked = false; + save(); renderAll(); + requestedAction = null; +} + +// deleteWeek: löscht die aktuell ausgewählte Sitzung (wenn mehr als 1 vorhanden) +function deleteWeek(skipAuth = false){ + if(db.weeks.length<=1){ alert("Mindestens eine Sitzung muss bestehen bleiben."); return; } + if(!skipAuth && !isAuthenticated){ + requestedAction = { type: 'deleteWeek' }; + document.getElementById('passwordModal').style.display='flex'; + document.getElementById('passwordInput').value=''; + document.getElementById('passwordInput').focus(); + return; + } + if(!confirm("Diese Sitzung wirklich löschen?")) { requestedAction = null; return; } + const current = currentWeek(); + const filename = current ? filenameForWeek(current.label) : null; + if(filename){ + console.log('Lösche CSV-Datei auf Server:', filename); + deleteCsvFromServer(filename).then(res=>{ + if(res && res.ok){ console.log('CSV-Datei gelöscht:', filename); } + else { alert('CSV-Löschung fehlgeschlagen: ' + (res && res.error ? res.error : 'unbekannter Fehler')); } + }).catch(err=>{ alert('CSV-Löschung fehlgeschlagen: ' + (err.message || err)); }); + } + db.weeks = db.weeks.filter(w=>w.id!==db.currentWeek); + db.weeks.sort((a,b) => weekSortKey(a.label).localeCompare(weekSortKey(b.label))); + db.currentWeek = db.weeks[db.weeks.length - 1].id; + applyAutoLock(); + save(); + renderAll(); + requestedAction = null; +} + +function deleteCsvFromServer(filename){ + if(!window.fetch) return Promise.reject(new Error('fetch nicht verfügbar')); + return fetch(baseUrl() + '/delete-csv', { + method: 'POST', + headers: {'Content-Type':'application/json; charset=utf-8'}, + body: JSON.stringify({ filename, department: currentDepartment }) + }).then(r=>{ if(!r.ok) throw new Error('Server HTTP '+r.status); return r.json(); }); +} + +let currentStatusEditor = null; +let currentStatusPid = null; + +function statusFocus(el, pid){ + currentStatusEditor = el; + currentStatusPid = pid; +} + +function statusBlur(el, pid){ + const val = statusValueFromHtml(el.innerHTML); + editProj(pid, 'status', val); + if(currentStatusEditor === el){ currentStatusEditor = null; currentStatusPid = null; } +} + +function statusValueFromHtml(html){ + const tmp = document.createElement('div'); + tmp.innerHTML = html; + const text = (tmp.textContent || tmp.innerText || '').replace(/\u00A0/g, ' '); + return text.trim() === '' ? '' : html; +} + +function formatStatus(command, value){ + if(!currentStatusEditor) return; + currentStatusEditor.focus(); + document.execCommand(command, false, value || null); +} + +// ---------- Board (Haupttabelle) ---------- + +// peopleByRole: gruppiert Personen nach Rolle zurück in ein Objekt +function peopleByRole(target){ + const m = {}; ROLES.forEach(r=>m[r]=[]); + const people = []; + if(Array.isArray(target)){ + target.forEach(w => { if(w && Array.isArray(w.people)) people.push(...w.people); }); + } else if(target && Array.isArray(target.people)){ + people.push(...target.people); + } else if(Array.isArray(currentWeek()?.people)){ + people.push(...currentWeek().people); + } + const seen = new Set(); + people.forEach(p=>{ + const personRoles = Array.isArray(p.role) ? p.role : [p.role]; + personRoles.forEach(role=>{ + if(!m[role]) m[role]=[]; + const key = `${p.id}|${role}`; + if(!seen.has(key)){ + seen.add(key); + m[role].push({person:p, role}); + } + }); + }); + return m; +} + +function roleClass(role){ + if(Array.isArray(role)){ + return role.map(r=>'role-'+r.toLowerCase().replace(/\s+/g,'-')).join(' '); + } + return 'role-' + role.toLowerCase().replace(/\s+/g,'-'); +} + +// renderBoard: baut die HTML-Tabelle für das Board auf (Kopf, Zeilen, Zellen) +function renderBoard(){ + const w = currentWeek(); + const locked = isWeekLocked(w); + const table = document.getElementById('boardTable'); + const grouped = peopleByRole(w); + + // Kopfzeilen: Rollen und Leistungsphasen + let h1 = `Pr.-Nr.BezeichnungStatus / Kommentar`; + ROLES.forEach(r=>{ h1 += `${r}`; }); + h1 += `Leistungsphasen (%)`; + + let h2 = ``; + ROLES.forEach(r=>{ + if(grouped[r].length===0) h2 += `–`; + grouped[r].forEach(entry=> h2 += `${entry.person.name}`); + }); + LPHS.forEach(l=> h2 += `${l}`); + h2 += ``; + + // Projekte nach Gruppen (z.B. "Aktive Projekte") zusammenfassen + const groups = {}; + w.projects.forEach(p=>{ (groups[p.group]||(groups[p.group]=[])).push(p); }); + + // Projekte nach ihrer Reihenfolge sortieren + Object.keys(groups).forEach(g=>{ + groups[g].sort((a, b) => (a.order || 0) - (b.order || 0)); + }); + + let body = ""; + const allPeople = []; + ROLES.forEach(r=> grouped[r].forEach(entry=>allPeople.push(entry))); + + // Jede Gruppe als Abschnitt, dann Zeilen für Projekte + sortGroups(Object.keys(groups)).forEach(g=>{ + const colspan = 3 + allPeople.length + LPHS.length + 1; // Spaltenanzahl für Gruppentitel + body += `${esc(g)}`; + groups[g].forEach(p=>{ + body += ``; + body += `${esc(p.nr)}`; + body += `${esc(p.name)}`; + // Status-Editor: contenteditable mit kleiner Toolbar (Fett, Farben, Absätze mit Enter) + const statusClass = p.statusState === 'new' ? 'status-new' : p.statusState === 'duplicated' ? 'status-duplicated' : ''; + const statusEditable = locked ? 'false' : 'true'; + const statusToolbar = locked ? '' : ` + `; + const statusClick = locked ? '' : `onfocus="statusFocus(this,'${p.id}')" onblur="statusBlur(this,'${p.id}')"`; + const safeStatus = sanitizeStatusHtml(p.status || ''); + body += ` + ${statusToolbar} +

${safeStatus}

+ `; + + // Personen-Spalten: Klick wechselt Zustand (nicht, optional, Hauptverantwortung) + allPeople.forEach(entry=>{ + const state = p.assign[assignKey(entry.person.id, entry.role)] || 0; // 0=keine,1=Haupt,2=optional + const cls = state===1?'on':state===2?'optional':''; + const txt = state===1?'X':state===2?'(X)':''; + const click = locked ? '' : `onclick="cycleAssign('${p.id}','${entry.person.id}','${entry.role}')"`; + body += `${txt}`; + }); + + // LPH-Spalten mit Prozentwerten und Fortschrittsbalken + LPHS.forEach(l=>{ + const v = (p.lph[l]!==undefined && p.lph[l]!="") ? p.lph[l] : ""; + const inputAttr = locked ? 'readonly tabindex="-1"' : `onchange="editLph('${p.id}','${l}',this.value)"`; + body += ``; + if(v!=""){ const pct = Math.min(100, parseFloat(v)||0); + body += `

`; } + body += ``; + }); + body += ``; + }); + + }); + + let lockNotice = ''; + if(locked){ + lockNotice = `

+ Diese Sitzung ist gesperrt. Bearbeiten nur nach Passworteingabe möglich. + +

`; + } + + table.innerHTML = `${h1}${h2}${body}`; + + // Legende mit vollständigen Namen und Anwesenheitstracking + let legendeHtml = lockNotice + `

Legende Projektkürzel${locked ? '' : ' (klick für Anwesenheit)'}:

`; + const weekAttendance = w?.attendance || {}; + const legendeItems = []; + allPeople.forEach(entry=>{ + if(!legendeItems.some(item=>item.id===entry.person.id)){ + legendeItems.push({id:entry.person.id, name:entry.person.name, fullName:entry.person.fullName||entry.person.name}); + } + }); + legendeHtml += `

` + legendeItems.map(item=>{ + const isPresent = weekAttendance[item.id]; + const cursor = locked ? 'not-allowed' : 'pointer'; + const click = locked ? '' : `onclick="toggleAttendance('${item.id}')"`; + return `

${esc(item.name)} = ${esc(item.fullName)}

`; + }).join('') + `

`; + document.getElementById('boardLegend').innerHTML = legendeHtml; + adjustStickyOffsets(); +} + +// Sanitizing: Erlaubt nur eine kleine Whitelist an HTML-Tags/Attributen, +// damit Formatierung funktioniert, aber keine Skripte eingeschleust werden. +function sanitizeStatusHtml(html){ + if(!html) return ''; + const div = document.createElement('div'); + div.innerHTML = html; + const allowedTags = new Set(['B','STRONG','I','EM','U','P','BR','DIV','SPAN','FONT']); + const allowedAttrs = new Set(['style']); + const walk = (node) => { + for(let i = node.childNodes.length - 1; i >= 0; i--){ + const child = node.childNodes[i]; + if(child.nodeType === 3) continue; + if(child.nodeType === 1){ + if(!allowedTags.has(child.tagName.toUpperCase())){ + while(child.firstChild) node.insertBefore(child.firstChild, child); + node.removeChild(child); + continue; + } + for(let j = child.attributes.length - 1; j >= 0; j--){ + const attr = child.attributes[j].name; + if(!allowedAttrs.has(attr.toLowerCase())) child.removeAttribute(attr); + } + if(child.hasAttribute('style')){ + // Erlaubt nur color und font-weight im style-Attribut + const style = child.getAttribute('style'); + const safe = (style || '').split(';').map(s => s.trim()).filter(s => { + const prop = s.split(':')[0].trim().toLowerCase(); + return prop === 'color' || prop === 'font-weight'; + }).join('; '); + if(safe) child.setAttribute('style', safe); + else child.removeAttribute('style'); + } + walk(child); + } + } + }; + walk(div); + return div.innerHTML; +} + + +// getProgressColor: erzeugt eine Farbe basierend auf Prozent (grün→rot) +function getProgressColor(pct){ + const hue = Math.round(Math.max(0, Math.min(100, pct)) * 1.2); + return `hsl(${hue},70%,40%)`; +} + +// adjustStickyOffsets: berechnet die reale Höhe der ersten Kopfzeile +// und setzt den top-Wert der zweiten Kopfzeile entsprechend, damit +// beide sticky-Zeilen exakt aneinander anschließen (keine Lücke/Überlappung) +function adjustStickyOffsets(){ + const firstRow = document.querySelector('#boardTable thead tr:nth-child(1)'); + if(!firstRow) return; + const h = firstRow.getBoundingClientRect().height; + document.querySelectorAll('#boardTable thead tr:nth-child(2) th').forEach(th=>{ + th.style.top = h + 'px'; + }); +} + +// toggleAttendance: togglet den Anwesenheitsstatus eines Projektbeteiligten für die aktuelle Sitzung +function toggleAttendance(personId){ + if(guardWeekLocked()) return; + const w = currentWeek(); + if(!w) return; + if(!w.attendance) w.attendance = {}; + w.attendance[personId] = !w.attendance[personId]; + save(); + renderBoard(); +} + +// esc: einfache Escape-Funktion für Ausgabe in HTML +function esc(s){ return (s||"").replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"'); } + +// cycleAssign: wechselt die Zuweisung einer Person zu einem Projekt (0→1→2→0) +function cycleAssign(pid, personId, role){ + if(guardWeekLocked()) return; + const p = currentWeek().projects.find(x=>x.id===pid); + const key = assignKey(personId, role); + const cur = p.assign[key]||0; + const next = (cur+1)%3; + if(next===0) delete p.assign[key]; else p.assign[key]=next; + save(); renderBoard(); +} + +// editLph: setzt oder entfernt den Prozentwert einer Leistungsphase für ein Projekt +function editLph(pid,lph,val){ + if(guardWeekLocked()) return; + const p = currentWeek().projects.find(x=>x.id===pid); + val = val.trim(); + if(val==="") delete p.lph[lph]; + else p.lph[lph]=val.replace('%',''); + save(); renderBoard(); +} + +// editProj: aktualisiert Felder eines Projekts; für Status wird zusätzlich +// ein flag `statusState` gesetzt, wenn ein neuer Kommentar angelegt wird +function editProj(pid,field,val){ + if(guardWeekLocked()) return; + const p = currentWeek().projects.find(x=>x.id===pid); + if(!p) return; + if(field==='status'){ + const before = (p.status||"").trim(); + const after = val.trim(); + if(before === "" && after !== ""){ + p.statusState = 'new'; + } else if(after === ""){ + delete p.statusState; + } + } + p[field]=val; save(); +} + +// delProj: löscht ein Projekt aus der aktuellen Sitzung +function delProj(pid){ + if(guardWeekLocked()) return; + if(!confirm("Projekt aus dieser Sitzung löschen?")) return; + const w = currentWeek(); + w.projects = w.projects.filter(x=>x.id!==pid); + save(); renderBoard(); +} + +// ---------- Personen-Verwaltung (global pro Abteilung) ---------- + +// addPerson: fügt eine neue Person der globalen Liste hinzu und +// synchronisiert sie in die aktuelle Sitzung. +function addPerson(){ + if(guardWeekLocked()) return; + const w = currentWeek(); + if(!w) return; + const name = document.getElementById('newPersonName').value.trim(); + const fullName = document.getElementById('newPersonFullName').value.trim(); + const email = document.getElementById('newPersonEmail').value.trim(); + if(!name){ alert("Kürzel eingeben."); return; } + const roles = [...document.querySelectorAll('input[name="newPersonRoles"]:checked')].map(el=>el.value); + if(roles.length===0){ alert("Bitte mindestens eine Rolle auswählen."); return; } + + const person = {id:personIdForName(name), name, fullName:fullName||name, email:email, role:roles}; + + // Globale Liste aktualisieren + if(!Array.isArray(db.globalPeople[currentDepartment])) db.globalPeople[currentDepartment] = []; + const existing = db.globalPeople[currentDepartment].find(p => p.id === person.id); + if(existing){ + alert('Eine Person mit diesem Kürzel existiert bereits.'); + return; + } + db.globalPeople[currentDepartment].push(person); + + // Aktuelle Sitzung aktualisieren + if(!Array.isArray(w.people)) w.people = []; + if(!w.people.find(p => p.id === person.id)){ + w.people.push(JSON.parse(JSON.stringify(person))); + } + + document.getElementById('newPersonName').value=''; + document.getElementById('newPersonFullName').value=''; + document.getElementById('newPersonEmail').value=''; + document.querySelectorAll('input[name="newPersonRoles"]').forEach(el=>el.checked=false); + save(); renderPeople(); renderBoard(); +} + +// delPerson: entfernt eine Person aus der globalen Liste. Bereits in +// historischen Sitzungen verwendete Personen bleiben dort sichtbar, da +// jede Sitzung ihre eigene Kopie der Personendaten speichert. +function delPerson(id){ + if(!confirm("Person global löschen? Sie bleibt in bereits existierenden Sitzungen sichtbar, wird aber in neuen Sitzungen nicht mehr angeboten.")) return; + + // Aus globaler Liste entfernen + if(Array.isArray(db.globalPeople[currentDepartment])){ + db.globalPeople[currentDepartment] = db.globalPeople[currentDepartment].filter(p=>p.id!==id); + } + + // Aus aktueller Sitzung entfernen (nur wenn nicht in Zuordnungen genutzt) + const w = currentWeek(); + if(w){ + const inUse = w.projects.some(p => Object.keys(p.assign).some(k => k.startsWith(id + '|'))); + if(inUse){ + alert('Die Person ist in der aktuellen Sitzung noch Projekten zugeordnet. Bitte zuerst die Zuordnungen entfernen.'); + return; + } + w.people = (w.people || []).filter(p=>p.id!==id); + } + + save(); renderPeople(); renderBoard(); +} + +// editPerson: ändert Name/Vollname/Rolle sowohl global als auch in der +// aktuellen Sitzung. Historische Sitzungen bleiben unverändert. +function editPerson(id,field,val){ + if(guardWeekLocked()) return; + const w = currentWeek(); + if(!w) return; + + // Global aktualisieren + const globalPeople = db.globalPeople[currentDepartment] || []; + const globalPerson = globalPeople.find(p => p.id === id); + + if(field === 'name'){ + const newName = val.trim(); + if(!newName) return; + const newId = personIdForName(newName); + if(newId !== id && globalPeople.some(p => p.id === newId)){ + alert('Dieses Kürzel wird bereits verwendet.'); + return; + } + if(globalPerson){ + globalPerson.name = newName; + globalPerson.id = newId; + } + // Aktuelle Sitzung aktualisieren und Zuordnungen migrieren + const localPerson = (w.people || []).find(p => p.id === id); + if(localPerson){ + localPerson.name = newName; + localPerson.id = newId; + } + w.projects.forEach(p => { + const newAssign = {}; + Object.keys(p.assign).forEach(k => { + const [oldId, role] = k.split('|'); + if(oldId === id){ + newAssign[assignKey(newId, role)] = p.assign[k]; + } else { + newAssign[k] = p.assign[k]; + } + }); + p.assign = newAssign; + if(p.plan && Array.isArray(p.plan.people)){ + p.plan.people = p.plan.people.map(pid => pid === id ? newId : pid); + } + }); + if(w.attendance){ + if(w.attendance[id]){ + w.attendance[newId] = true; + delete w.attendance[id]; + } + } + save(); renderPeople(); renderBoard(); + return; + } + + if(field === 'role'){ + const roles = Array.isArray(val) ? [...new Set(val)] : val ? [val] : []; + if(globalPerson) globalPerson.role = roles; + const localPerson = (w.people || []).find(p => p.id === id); + if(localPerson) localPerson.role = roles; + } else { + if(globalPerson) globalPerson[field] = val; + const localPerson = (w.people || []).find(p => p.id === id); + if(localPerson) localPerson[field] = val; + } + save(); renderPeople(); renderBoard(); +} + +function togglePersonRole(id, role, checked){ + if(guardWeekLocked()) return; + const w = currentWeek(); + if(!w) return; + + const globalPeople = db.globalPeople[currentDepartment] || []; + const globalPerson = globalPeople.find(p => p.id === id); + const localPerson = (w.people || []).find(p => p.id === id); + + function updateRoles(person){ + person.role = Array.isArray(person.role) ? [...person.role] : person.role ? [person.role] : []; + if(checked){ + if(!person.role.includes(role)) person.role.push(role); + } else { + person.role = person.role.filter(r=>r!==role); + } + } + + if(globalPerson) updateRoles(globalPerson); + if(localPerson) updateRoles(localPerson); + save(); renderPeople(); renderBoard(); +} + +// renderPeople: baut die Liste der Personen für die UI +function renderPeople(){ + const people = db.globalPeople[currentDepartment] || []; + const locked = isWeekLocked(currentWeek()); + let html = `

`; + people.forEach(p=>{ + const isOpen = personAbsenceOpen[p.id]; + html += `

`; + html += `

+ ⋮⋮ + ${isOpen ? '▼' : '▶'} + + + +

${ROLES.map(rr=>` ${rr}`).join('')}

+ +

`; + + // Aufklappbare Abwesenheiten + html += `

`; + const absences = p.absences || []; + if(absences.length > 0){ + html += `

`; + absences.forEach(a => { + html += `

+ ${esc(a.type || 'Abwesenheit')}: ${formatDateDE(parseDateISO(a.start))}–${formatDateDE(parseDateISO(a.end))} + ${a.note ? `${esc(a.note)}` : ''} + ${locked ? '' : ``} +

`; + }); + html += `

`; + } + if(!locked){ + html += `

+ + + + + + +

`; + } + html += `

`; + }); + html += `

`; + if(people.length===0) html = '

Keine Personen vorhanden.

'; + document.getElementById('peopleList').innerHTML=html; +} + +let personAbsenceOpen = {}; + +function togglePersonAbsences(personId){ + personAbsenceOpen[personId] = !personAbsenceOpen[personId]; + renderPeople(); +} + +let draggedPerson = null; + +function getPersonCard(el){ + return el && el.closest ? el.closest('.person-card') : null; +} + +function handlePersonDragStart(event){ + draggedPerson = getPersonCard(event.target); + if(!draggedPerson) return; + event.dataTransfer.effectAllowed = 'move'; + draggedPerson.style.opacity = '0.5'; +} + +function handlePersonDragOver(event){ + event.preventDefault(); + event.dataTransfer.dropEffect = 'move'; +} + +function handlePersonDrop(event){ + event.preventDefault(); + const targetCard = getPersonCard(event.target); + if(!draggedPerson || draggedPerson === targetCard) return; + const sortable = document.querySelector('.people-sortable'); + if(!sortable) return; + const afterElement = getDragAfterElement(sortable, event.clientY); + if(afterElement == null){ + sortable.appendChild(draggedPerson); + } else { + sortable.insertBefore(draggedPerson, afterElement); + } + reorderPeople(); +} + +function handlePersonDragEnd(event){ + const card = getPersonCard(event.target); + if(card) card.style.opacity = '1'; + draggedPerson = null; +} + +function reorderPeople(){ + if(guardWeekLocked()) return; + const sortable = document.querySelector('.people-sortable'); + if(!sortable) return; + const people = db.globalPeople[currentDepartment] || []; + if(people.length === 0) return; + const newPeople = []; + [...sortable.querySelectorAll('[data-person-id]')].forEach(item => { + const person = people.find(p => p.id === item.dataset.personId); + if(person) newPeople.push(person); + }); + if(newPeople.length === people.length){ + db.globalPeople[currentDepartment] = newPeople; + save(); + } +} + +// ---------- Projekte (Listen-Ansicht) ---------- + +// addProjectToList: fügt ein Projekt über Eingabefelder in die aktuelle Sitzung +function addProjectToList(){ + if(guardWeekLocked()) return; + const nr = document.getElementById('newProjNr').value.trim(); + const name = document.getElementById('newProjName').value.trim(); + if(!name){ alert("Bitte Projektbezeichnung eingeben."); return; } + const group = document.getElementById('newProjGroup').value; + const w = currentWeek(); + const nextOrder = w.projects + .filter(p=>p.group===group) + .reduce((max,p)=> Math.max(max, p.order!==undefined ? p.order : 0), -1) + 1; + w.projects.push({id:uid(),nr,name,group,status:'',lph:{},assign:{}, statusState: undefined, order: nextOrder, plan: null}); + document.getElementById('newProjNr').value=''; + document.getElementById('newProjName').value=''; + save(); renderProjects(); renderBoard(); +} + +// delProjectFromList: löscht ein Projekt in der Listen-Ansicht +function delProjectFromList(id){ + if(guardWeekLocked()) return; + if(!confirm("Projekt aus dieser Sitzung löschen?")) return; + const w = currentWeek(); + w.projects = w.projects.filter(p=>p.id!==id); + save(); renderProjects(); renderBoard(); +} + +// editProjectField: ändert ein Feld eines Projekts (z.B. Name oder Gruppe) +function editProjectField(id,field,val){ + if(guardWeekLocked()) return; + const p = currentWeek().projects.find(x=>x.id===id); + if(p){ p[field]=val; save(); renderProjects(); renderBoard(); } +} + +// renderProjects: baut die HTML-Liste der Projekte (gruppiert nach group, mit Drag-and-Drop) +function renderProjects(){ + const w = currentWeek(); + if(!w) return; + let html=""; + const groups = {}; + w.projects.forEach(p=>{ (groups[p.group]||(groups[p.group]=[])).push(p); }); + Object.keys(groups).forEach(g=>{ + groups[g].sort((a,b)=>(a.order||0)-(b.order||0)); + }); + + sortGroups(Object.keys(groups)).forEach(g=>{ + html += `

${esc(g)}

`; + html += `

`; + groups[g].forEach(p=>{ + html += `

+ ⋮⋮ + + + + +

`; + }); + html += `

`; + if(groups[g].length===0) html+=`

Keine Projekte.

`; + }); + document.getElementById('projectsList').innerHTML=html; +} + +// Drag-and-Drop Handling für Projekte +let draggedProject = null; + +function handleDragStart(event){ + draggedProject = event.currentTarget; + event.dataTransfer.effectAllowed = 'move'; + event.currentTarget.style.opacity = '0.5'; +} + +function handleDragOver(event){ + event.preventDefault(); + event.dataTransfer.dropEffect = 'move'; +} + +function handleDrop(event){ + event.preventDefault(); + if(!draggedProject || draggedProject === event.currentTarget) return; + const sortable = event.currentTarget.parentElement; + const afterElement = getDragAfterElement(sortable, event.clientY); + if(afterElement == null){ + sortable.appendChild(draggedProject); + } else { + sortable.insertBefore(draggedProject, afterElement); + } + reorderProjects(); +} + +function handleDragEnd(event){ + event.currentTarget.style.opacity = '1'; + draggedProject = null; +} + +function getDragAfterElement(container, y){ + const draggableElements = [...container.querySelectorAll('.person-list-item:not([style*="opacity"])')]; + return draggableElements.reduce((closest, child) => { + const box = child.getBoundingClientRect(); + const offset = y - box.top - box.height / 2; + if(offset < 0 && offset > closest.offset){ + return { offset: offset, element: child }; + } else { + return closest; + } + }, { offset: Number.NEGATIVE_INFINITY }).element; +} + +function reorderProjects(){ + if(guardWeekLocked()) return; + const w = currentWeek(); + const sortables = document.querySelectorAll('.projects-sortable'); + sortables.forEach(sortable => { + const group = sortable.dataset.group; + const items = sortable.querySelectorAll('[data-project-id]'); + items.forEach((item, index) => { + const projectId = item.dataset.projectId; + const project = w.projects.find(p => p.id === projectId); + if(project){ + project.order = index; + project.group = group; + } + }); + }); + save(); + renderProjects(); + renderBoard(); +} + +// ---------- Auslastung (Load) ---------- + +// renderLoad: berechnet die Belastung der Personen (Haupt=1, Optional=0,5) +// und zeigt eine einfache Visualisierung pro Rolle +function renderLoad(){ + const scope = document.getElementById('loadScope').value; + const selectedWeek = currentWeek(); + const weeks = scope==='all' ? db.weeks : (selectedWeek ? [selectedWeek] : []); + if(weeks.length === 0){ + document.getElementById('loadGrid').innerHTML = '

Keine Sitzung ausgewählt oder die Daten werden noch geladen.

'; + return; + } + const grouped = scope==='all' ? peopleByRole(db.weeks) : peopleByRole(selectedWeek); + const stats = {}; + ROLES.forEach(r=>{ + grouped[r].forEach(entry=>{ + stats[assignKey(entry.person.id, r)] = {main:0,opt:0,kleine:0,projects:{},anbahnung:0}; + }); + }); + + weeks.forEach(w=>{ + w.projects.forEach(pr=>{ + const isAnbahnung = pr.group === 'In Anbahnung'; + const isKleine = pr.group === 'Kleine Projekte'; + Object.keys(pr.assign).forEach(aKey=>{ + if(!stats[aKey]) return; + if(isAnbahnung){ + if(pr.assign[aKey]===1 || pr.assign[aKey]===2) stats[aKey].anbahnung++; + return; + } + const st = pr.assign[aKey]; + if(isKleine){ + if(st===1 || st===2){ + stats[aKey].kleine = (stats[aKey].kleine||0) + 1; + const key = pr.name; + stats[aKey].projects[key]=(stats[aKey].projects[key]||0)+1; + } + return; + } + if(st===1) stats[aKey].main++; + else if(st===2) stats[aKey].opt++; + const key = pr.name; + stats[aKey].projects[key]=(stats[aKey].projects[key]||0)+1; + }); + }); + }); + + // Bestimme Maximalwert für Skalierung + let maxLoad=1; + Object.keys(stats).forEach(k=>{ const l=stats[k].main+stats[k].opt*0.5+(stats[k].kleine||0)*0.3; if(l>maxLoad)maxLoad=l; }); + + let html=""; + ROLES.forEach(r=>{ + html += `

${r}

`; + if(grouped[r].length===0){ + html += `

Keine Personen.

`; + } + grouped[r].forEach(entry=>{ + const s = stats[assignKey(entry.person.id, r)]; + const load = s.main + s.opt*0.5 + (s.kleine||0)*0.3; + const pct = Math.round(load/maxLoad*100); + const detail = Object.keys(s.projects).map(k=>`

${esc(k)}${s.projects[k]}×

`).join('') || '

keine Zuordnung

'; + const anbahnungBadge = (s.anbahnung && s.anbahnung>0) ? `(${s.anbahnung} in Anbahnung)` : ''; + html += `

${esc(entry.person.fullName)} (${r})

${anbahnungBadge}

${load.toString().replace('.',',')}

${detail}

`; + }); + html += `

`; + }); + document.getElementById('loadGrid').innerHTML=html; +} + +// ---------- GANTT / Projektplan ---------- + +let ganttModalProjectId = null; + +function ensurePlan(p){ + if(!p.plan) p.plan = { start:'', end:'', todos:[], milestones:[], people:[], progress:0 }; + // Alte Meilensteine bleiben erhalten; neu sind todos die primären Planungselemente. + if(!Array.isArray(p.plan.todos)) p.plan.todos = []; + if(!Array.isArray(p.plan.milestones)) p.plan.milestones = []; + return p.plan; +} + +// Beteiligte eines Projekts aus dem Board ableiten (Haupt + Optional) +// week optional: wenn die Funktion nicht im Kontext der aktuellen Hauptseite +// aufgerufen wird (z.B. Projektplan-Seite), muss die passende Woche übergeben +// werden, damit die Personenliste korrekt aufgelöst wird. +function projectAssignees(p, week = null){ + const w = week || currentWeek(); + const people = w ? (w.people || []) : []; + const globalList = db.globalPeople[currentDepartment] || []; + const result = []; + people.forEach(person => { + const globalPerson = globalList.find(gp => gp.id === person.id); + const email = globalPerson ? globalPerson.email : ''; + + (person.role || ['Planung']).forEach(role => { + const key = assignKey(person.id, role); + if(p.assign && p.assign[key]){ + result.push({ person, role, state: p.assign[key], email}); + } + }); + }); + return result; +} + +function projectColor(p){ + const idx = Math.abs(String(p.id).split('').reduce((a,c)=>a+c.charCodeAt(0),0)) % GANTT_COLORS.length; + return GANTT_COLORS[idx]; +} + +function ganttRangeFromProjects(projects, padDays = 7){ + let min = null, max = null; + projects.forEach(p => { + const plan = p.plan; + if(!plan) return; + [plan.start, plan.end].forEach(d => { + const date = parseDateISO(d); + if(!date) return; + if(!min || date < min) min = date; + if(!max || date > max) max = date; + }); + (plan.milestones || []).forEach(m => { + const date = parseDateISO(m.date); + if(!date) return; + if(!min || date < min) min = date; + if(!max || date > max) max = date; + }); + (plan.todos || []).forEach(t => { + [t.start, t.end].forEach(d => { + const date = parseDateISO(d); + if(!date) return; + if(!min || date < min) min = date; + if(!max || date > max) max = date; + }); + }); + }); + // Urlaub berücksichtigen + (db.globalPeople[currentDepartment] || []).forEach(person => { + (person.absences || []).forEach(a => { + const s = parseDateISO(a.start), e = parseDateISO(a.end); + if(s){ if(!min || s < min) min = s; if(!max || s > max) max = s; } + if(e){ if(!min || e < min) min = e; if(!max || e > max) max = e; } + }); + }); + if(!min || !max){ + const today = new Date(); + min = new Date(today.getFullYear(), today.getMonth(), 1); + max = addDays(min, 90); + } + return { start: addDays(min, -padDays), end: addDays(max, padDays) }; +} + +function fitGanttRange(){ + const w = currentWeek(); if(!w) return; + const range = ganttRangeFromProjects(w.projects, 7); + document.getElementById('ganttStart').value = formatDateISO(range.start); + document.getElementById('ganttEnd').value = formatDateISO(range.end); + renderGantt(); +} + +function renderGantt(){ + const w = currentWeek(); + const container = document.getElementById('ganttContainer'); + if(!w || !container){ + if(container) container.innerHTML = '

Keine Sitzung ausgewählt.

'; + return; + } + let start = parseDateISO(document.getElementById('ganttStart').value); + let end = parseDateISO(document.getElementById('ganttEnd').value); + if(!start || !end){ + const range = ganttRangeFromProjects(w.projects, 7); + start = range.start; end = range.end; + document.getElementById('ganttStart').value = formatDateISO(start); + document.getElementById('ganttEnd').value = formatDateISO(end); + } + const showVacation = document.getElementById('ganttShowVacation').checked; + container.innerHTML = buildGanttHtml(w.projects, start, end, { showVacation, editable: !isWeekLocked(w) }); +} + +function buildGanttHtml(projects, start, end, options = {}){ + const { showVacation = true, editable = false, highlightProjectId = null, pxPerDay = null } = options; + const totalDays = Math.max(1, daysBetween(start, end) + 1); + + function timeline(content){ + return `

${content}

`; + } + + function dragAttrs(type, attrs){ + if(!editable) return ''; + let s = ` data-gantt-type="${type}" draggable="false"`; + for(const [k,v] of Object.entries(attrs)){ + s += ` data-gantt-${k}="${esc(String(v))}"`; + } + return s; + } + + function resizeHandles(){ + if(!editable) return ''; + return ``; + } + + // Kopfzeile: Monate und Tage + let headerMonths = '

'; + headerMonths += '

Projekt

'; + let monthsHtml = ''; + let current = new Date(start.getTime()); + let lastMonth = -1; + let monthCells = []; + for(let i = 0; i < totalDays; i++){ + if(current.getMonth() !== lastMonth){ + monthCells.push({ month: current.getMonth(), year: current.getFullYear(), startIdx: i }); + lastMonth = current.getMonth(); + } + current = addDays(current, 1); + } + monthCells.forEach((m, idx) => { + const next = monthCells[idx + 1]; + const span = next ? next.startIdx - m.startIdx : totalDays - m.startIdx; + const names = ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez']; + monthsHtml += `

${names[m.month]} ${m.year}

`; + }); + headerMonths += timeline(monthsHtml) + '

'; + + let headerWeeks = '

'; + headerWeeks += '

'; + let weeksHtml = ''; + current = new Date(start.getTime()); + let lastWeek = -1; + let lastYear = -1; + let weekStartIdx = 0; + const weekCells = []; + for(let i = 0; i < totalDays; i++){ + const cw = getWeekNumber(current); + const cy = current.getFullYear(); + if(cw !== lastWeek || cy !== lastYear){ + if(lastWeek !== -1){ + weekCells.push({ week: lastWeek, year: lastYear, startIdx: weekStartIdx, endIdx: i - 1 }); + } + weekStartIdx = i; + lastWeek = cw; + lastYear = cy; + } + current = addDays(current, 1); + } + if(lastWeek !== -1){ + weekCells.push({ week: lastWeek, year: lastYear, startIdx: weekStartIdx, endIdx: totalDays - 1 }); + } + weekCells.forEach(w => { + const span = w.endIdx - w.startIdx + 1; + weeksHtml += `

KW ${w.week}

`; + }); + headerWeeks += timeline(weeksHtml) + '

'; + + // Raster-Overlay: Wochenenden schattieren und Heute-Linie markieren. + // Liegt als eine Ebene hinter allen Zeilen (erste Chart-Kindnode), + // damit nicht jede Zeile eigene Tageszellen braucht. + let gridHtml = '

'; + current = new Date(start.getTime()); + let weekendStartIdx = null; + for(let i = 0; i <= totalDays; i++){ + const isWeekend = i < totalDays && (current.getDay() === 0 || current.getDay() === 6); + if(isWeekend && weekendStartIdx === null) weekendStartIdx = i; + if(!isWeekend && weekendStartIdx !== null){ + const span = i - weekendStartIdx; + gridHtml += `

`; + weekendStartIdx = null; + } + current = addDays(current, 1); + } + const today = new Date(); + const todayMid = new Date(today.getFullYear(), today.getMonth(), today.getDate()); + if(todayMid >= start && todayMid <= end){ + const todayIdx = daysBetween(start, todayMid); + gridHtml += `

`; + } + gridHtml += '

'; + + let body = gridHtml + headerMonths + headerWeeks; + + // Urlaubszeilen + if(showVacation){ + let allPeople = db.globalPeople[currentDepartment] || []; + // Optional: nur Urlaub bestimmter Personen anzeigen + if(options.vacationPeople && Array.isArray(options.vacationPeople)){ + const allowed = new Set(options.vacationPeople); + allPeople = allPeople.filter(person => allowed.has(person.id)); + } + // Pro Person eine Zeile: alle Abwesenheiten als Balken in derselben Timeline + allPeople.forEach(person => { + let barsHtml = ''; + (person.absences || []).forEach(a => { + const s = parseDateISO(a.start), e = parseDateISO(a.end); + if(!s || !e || e < start || s > end) return; + const rowStart = s < start ? start : s; + const rowEnd = e > end ? end : e; + const offset = daysBetween(start, rowStart); + const span = daysBetween(rowStart, rowEnd) + 1; + barsHtml += `

${resizeHandles()}

`; + }); + if(!barsHtml) return; // keine Abwesenheit im sichtbaren Zeitraum -> keine Zeile + body += `

`; + body += `

${esc(person.name)}

`; + body += timeline(barsHtml); + body += `

`; + }); + } + + // Projektzeilen + projects.slice().sort((a,b) => (a.order||0)-(b.order||0)).forEach(p => { + const plan = p.plan; + const color = projectColor(p); + const milestones = plan && Array.isArray(plan.milestones) ? plan.milestones : []; + body += `

`; + body += `

${esc(p.nr ? p.nr + ' ' : '')}${esc(p.name)}

`; + + let rowContent = ''; + + // Projekt-Balken + const s = plan ? parseDateISO(plan.start) : null, e = plan ? parseDateISO(plan.end) : null; + if(s && e){ + const barStart = s < start ? start : s; + const barEnd = e > end ? end : e; + if(barEnd >= start && barStart <= end){ + const offset = daysBetween(start, barStart); + const span = daysBetween(barStart, barEnd) + 1; + const progress = Math.max(0, Math.min(100, plan && parseFloat(plan.progress) ? parseFloat(plan.progress) : 0)); + rowContent += `

`; + rowContent += `${resizeHandles()}

`; + rowContent += `${esc(p.name)}`; + rowContent += `

`; + } + } + + // Meilensteine: nur die nicht positionierten (keine position) in der Projektzeile anzeigen. + // Positionierte Meilensteine werden vom Aufrufer (z.B. Projektplan) als separate Zeilen eingefügt. + milestones.forEach((m, mIdx) => { + if(options.showTodos && m.position) return; + const d = parseDateISO(m.date); + if(!d || d < start || d > end) return; + const offset = daysBetween(start, d); + rowContent += `

`; + rowContent += `

${esc(m.name || '')}

`; + }); + + body += timeline(rowContent) + `

`; + }); + + // pxPerDay setzt eine feste Breite pro Tag, damit das Diagramm bei hohem + // Zoom breiter als der Container wird und horizontal gescrollt werden kann. + let chartStyle = ''; + if(pxPerDay){ + chartStyle = ` style="min-width:${(220 + Math.ceil(totalDays * pxPerDay)).toFixed(0)}px"`; + } + return `

${body}

`; +} + +// ---------- Projektplan-Seite (TODOs + GANTT) ---------- + +function openProjectPlan(pid){ + const w = currentWeek(); if(!w) return; + const p = w.projects.find(x => x.id === pid); if(!p) return; + // IDs sind nicht persistent (werden bei jedem CSV-Laden neu erzeugt). + // Daher werden stabile Werte (Label, Projekt-Nr., Name) in der URL übergeben. + const url = new URL('project-plan.html', window.location.href); + url.searchParams.set('department', currentDepartment); + url.searchParams.set('weekLabel', w.label); + url.searchParams.set('projNr', p.nr || ''); + url.searchParams.set('projName', p.name || ''); + window.open(url.toString(), '_blank'); +} + +// Diese Funktion wird von project-plan.html aufgerufen, um das aktuelle +// Wochen-/Projekt-Objekt im Hauptfenster zu finden. +function findProjectForPlan(department, weekId, projectId){ + if(currentDepartment !== department){ + const targetWeek = db.weeks.find(w => w.id === weekId); + if(!targetWeek) return null; + // temporär umschalten ist unpraktisch, daher versuchen wir über load-all + return null; + } + const w = db.weeks.find(x => x.id === weekId); + if(!w) return null; + return { week: w, project: w.projects.find(x => x.id === projectId) }; +} + +// ---------- Urlaub / Abwesenheiten ---------- + +function addAbsence(personId){ + if(guardWeekLocked()) return; + const people = db.globalPeople[currentDepartment] || []; + const person = people.find(p => p.id === personId); + if(!person) return; + const start = document.getElementById('absenceStart_' + personId).value; + const end = document.getElementById('absenceEnd_' + personId).value; + const type = document.getElementById('absenceType_' + personId).value; + const note = document.getElementById('absenceNote_' + personId).value.trim(); + if(!start || !end){ alert('Bitte Start- und Enddatum angeben.'); return; } + if(parseDateISO(end) < parseDateISO(start)){ alert('Enddatum liegt vor Startdatum.'); return; } + if(!Array.isArray(person.absences)) person.absences = []; + person.absences.push({ id: uid(), start, end, type, note }); + person.absences.sort((a,b) => parseDateISO(a.start) - parseDateISO(b.start)); + save(); + renderPeople(); + if(currentTab === 'gantt') renderGantt(); +} + +function deleteAbsence(personId, absenceId){ + if(guardWeekLocked()) return; + const people = db.globalPeople[currentDepartment] || []; + const person = people.find(p => p.id === personId); + if(!person || !person.absences) return; + person.absences = person.absences.filter(a => a.id !== absenceId); + save(); + renderPeople(); + if(currentTab === 'gantt') renderGantt(); +} + +// ---------- Tabs (Navigation) ---------- + +// showTab: wechselt zwischen Ansichten; für sensible Tabs wird ein Passwort verlangt +function showTab(t, skipAuth = false){ + // Für die Tabs 'projects' und 'people' ist ein Passwortschutz vorgesehen + if((t==='projects' || t==='people') && !skipAuth && !isAuthenticated){ + requestedAction = { type: 'tab', tab: t }; + document.getElementById('passwordModal').style.display='flex'; + document.getElementById('passwordInput').value=''; + document.getElementById('passwordInput').focus(); + return; + } + currentTab = t; + saveUiState(); + + ['board','projects','load','people'].forEach(x=>{ + const el = document.getElementById(x); + if(el) el.style.display=(x===t?'block':'none'); + }); + document.querySelectorAll('.tab').forEach(el=>el.classList.toggle('active',el.dataset.tab===t)); + if(t==='board' && currentWeek()) renderBoard(); + if(t==='projects') renderProjects(); + if(t==='load') renderLoad(); + if(t==='people') renderPeople(); +} + +// ---------- Passwort-Schutz Implementierung ---------- + +// confirmPassword: prüft das eingegebene Passwort gegen den gespeicherten Hash +function confirmPassword(){ + const pwd = document.getElementById('passwordInput').value; + if(!pwd) { alert("Bitte Passwort eingeben!"); return; } + + const pwdHash = CryptoJS.SHA256(pwd).toString(); + + if(pwdHash === PROTECTED_PASSWORD_HASH){ + const action = requestedAction; + requestedAction = null; + document.getElementById('passwordModal').style.display='none'; + setTimeout(() => { + if(action?.type==='tab') showTab(action.tab, true); + else if(action?.type==='deleteWeek') deleteWeek(true); + else if(action?.type==='unlockWeek') unlockCurrentWeek(true); + }, 100); + } else { + alert("Falsches Passwort!"); + document.getElementById('passwordInput').value=''; + document.getElementById('passwordInput').focus(); + } +} +function closePasswordModal(){ + document.getElementById('passwordModal').style.display='none'; + requestedAction = null; +} + +// ---------- Export PDF ---------- + +// exportPDF: erzeugt ein PDF im Format A4 hochkant (Deckblatt) und im Querformat (Tabelle, +// Anwesenheit und Auslastung auf mehreren Seiten, falls nötig). +async function exportPDF(){ + const { jsPDF } = window.jspdf; + if(!jsPDF || !window.html2canvas){ + alert('PDF-Export nicht verfügbar. Bitte prüfen Sie die Internetverbindung (erforderlich für html2canvas / jsPDF).'); + return; + } + const w = currentWeek(); + if(!w) return; + + // Temporären Container in unsichtbarem Bereich anlegen + let container = document.getElementById('pdfExportContainer'); + if(container) container.remove(); + container = document.createElement('div'); + container.id = 'pdfExportContainer'; + container.style.position = 'fixed'; + container.style.top = '-10000px'; + container.style.left = '0'; + container.style.width = '1200px'; + container.style.background = '#fff'; + container.style.padding = '20px'; + container.style.fontFamily = 'Arial, sans-serif'; + container.style.fontSize = '10px'; + container.style.color = '#1a1a1a'; + document.body.appendChild(container); + + const grouped = peopleByRole(w); + const allPeople = []; + ROLES.forEach(r => grouped[r].forEach(entry => allPeople.push(entry))); + + // --- Teilnehmerlisten --- + const att = w.attendance || {}; + const presentList = (w.people || []).filter(p => att[p.id]).map(p => `${esc(p.name)} (${esc(p.fullName || p.name)})`).join(', '); + const absentList = (w.people || []).filter(p => !att[p.id]).map(p => `${esc(p.name)} (${esc(p.fullName || p.name)})`).join(', '); + + // Ico als Bild laden und in Base64 umwandeln, damit html2canvas es korrekt rendern kann + let logoDataUrl = null; + try { + const icoResponse = await fetch(baseUrl() + '/dein_bild.ico'); + if(icoResponse.ok){ + const icoBlob = await icoResponse.blob(); + logoDataUrl = await blobToDataUrl(icoBlob); + } + } catch(e){ + console.warn('Konnte Logo nicht laden:', e); + } + + // Deckblatt: A4 hochkant, einfacher Titel und Übersicht + const cover = document.createElement('div'); + cover.style.width = '595px'; + cover.style.minHeight = '842px'; + cover.style.padding = '80px 60px'; + cover.style.boxSizing = 'border-box'; + cover.style.background = '#fff'; + cover.style.display = 'flex'; + cover.style.flexDirection = 'column'; + cover.style.justifyContent = 'center'; + cover.style.textAlign = 'center'; + cover.style.fontFamily = 'Arial, sans-serif'; + const logoHtml = logoDataUrl + ? `

` + : `

⚡

`; + cover.innerHTML = ` + ${logoHtml} +

Projektübersicht ${DEPARTMENTS[currentDepartment].label}

${esc(w.label)}

+ ${w.date ? `

Datum: ${esc(formatWeekDate(w.date))}

` : ''} +

Erstellt am ${new Date().toLocaleDateString('de-DE')}

+ `; + container.appendChild(cover); + + // Inhaltsseiten: A4 quer (Container bleibt leer, Blöcke werden einzeln gerendert) + const content = document.createElement('div'); + content.style.width = '1123px'; // A4 Quer bei 96 DPI + content.style.background = '#fff'; + content.style.padding = '20px'; + content.style.boxSizing = 'border-box'; + content.innerHTML = buildPdfAttendanceBlock(presentList, absentList) + + buildPdfLoadSection(allPeople); + container.appendChild(content); + + const pdf = new jsPDF({ unit: 'px', format: 'a4' }); + const pageWidthPx = pdf.internal.pageSize.getWidth(); + const pageHeightPx = pdf.internal.pageSize.getHeight(); + const marginPx = 32; + const landscapePageW = pageHeightPx - marginPx * 2; + const landscapePageH = pageWidthPx - marginPx * 2; + + async function addImageToLandscapePage(canvas){ + const imgW = landscapePageW; + const imgH = (canvas.height * imgW) / canvas.width; + pdf.addPage([pageHeightPx, pageWidthPx], 'landscape'); + pdf.addImage(canvas.toDataURL('image/png'), 'PNG', marginPx, marginPx, imgW, imgH); + } + + async function drawBlockOnLandscapePage(blockHTML){ + const wrapper = document.createElement('div'); + wrapper.style.width = '1123px'; + wrapper.style.padding = '20px'; + wrapper.style.boxSizing = 'border-box'; + wrapper.style.background = '#fff'; + wrapper.innerHTML = blockHTML; + container.appendChild(wrapper); + const canvas = await html2canvas(wrapper, { scale: 2, useCORS: true, backgroundColor: '#ffffff', width: 1123 }); + const imgH = (canvas.height * landscapePageW) / canvas.width; + wrapper.remove(); + return { canvas, imgH }; + } + + try { + // Deckblatt (Hochkant) zeichnen + const coverCanvas = await html2canvas(cover, { scale: 2, useCORS: true, backgroundColor: '#ffffff', width: 595, height: 842 }); + if(pdf.internal.getNumberOfPages() > 0) pdf.addPage(); + const coverW = pageWidthPx - marginPx * 2; + const coverH = (coverCanvas.height * coverW) / coverCanvas.width; + const coverX = marginPx + (coverW - (coverCanvas.width * coverW / coverCanvas.width)) / 2; + pdf.addImage(coverCanvas.toDataURL('image/png'), 'PNG', marginPx, marginPx + ((pageHeightPx - marginPx * 2 - coverH) / 2), coverW, coverH); + + const headerRows = buildPdfTableHeaderRows(allPeople); + + // Projektgruppen vorbereiten + const groups = {}; + w.projects.forEach(p => { (groups[p.group] || (groups[p.group] = [])).push(p); }); + Object.keys(groups).forEach(g => groups[g].sort((a,b) => (a.order || 0) - (b.order || 0))); + + // Anwesenheit und Auslastung als HTML-Strings vorbereiten + const extraBlocks = [buildPdfAttendanceBlock(presentList, absentList), buildPdfLoadSection(allPeople)]; + + // Hilfsfunktion: misst Höhe einer Tabelle mit gegebenen Zeilen + async function measureBlockWithRows(titleRow, bodyRows){ + const wrapper = renderSinglePdfBlock(container, headerRows, titleRow, bodyRows); + const canvas = await html2canvas(wrapper, { scale: 2, useCORS: true, backgroundColor: '#ffffff', width: 1123 }); + const imgH = (canvas.height * landscapePageW) / canvas.width; + wrapper.remove(); + return { canvas, imgH }; + } + + const groupBlocks = []; + + for(const groupName of sortGroups(Object.keys(groups))){ + const projects = groups[groupName]; + if(!projects || projects.length === 0) continue; + + const titleRow = buildPdfGroupTitleRow(groupName, allPeople); + + let currentRows = ''; + let currentStart = 0; + + for(let i = 0; i < projects.length; i++){ + const rowHTML = buildPdfProjectRow(projects[i], allPeople); + const testRows = currentRows + rowHTML; + const { imgH: testImgH } = await measureBlockWithRows(titleRow, testRows); + + // Wenn die aktuelle Seite überschritten würde und wir bereits Zeilen haben, + // schließen wir den aktuellen Block ab und beginnen auf der nächsten Seite neu. + if(testImgH > landscapePageH && currentRows !== ''){ + groupBlocks.push({ titleRow, bodyRows: currentRows, isContinuation: currentStart > 0 }); + currentRows = rowHTML; + currentStart = i; + } else { + currentRows = testRows; + } + } + if(currentRows !== ''){ + groupBlocks.push({ titleRow, bodyRows: currentRows, isContinuation: currentStart > 0 }); + } + } + + // Projektboard-Blöcke zeichnen + for(const block of groupBlocks){ + const wrapper = renderSinglePdfBlock(container, headerRows, block.titleRow, block.bodyRows); + const canvas = await html2canvas(wrapper, { scale: 2, useCORS: true, backgroundColor: '#ffffff', width: 1123 }); + await addImageToLandscapePage(canvas); + wrapper.remove(); + } + + // Anwesenheit und Auslastung zeichnen + for(const blockHTML of extraBlocks){ + const { canvas } = await drawBlockOnLandscapePage(blockHTML); + await addImageToLandscapePage(canvas); + } + + // Erste (automatisch angelegte) leere Startseite entfernen, da Deckblatt manuell hinzugefügt wurde + if(pdf.internal.getNumberOfPages() > 1){ + try { pdf.deletePage(1); } catch(e){} + } + + const filename = 'Projektuebersicht_' + (w.label.replace(/[^\w]/g,'_')) + '.pdf'; + pdf.save(filename); + } catch(err){ + console.error('PDF-Export fehlgeschlagen:', err); + alert('PDF-Export fehlgeschlagen: ' + (err.message || err)); + } finally { + container.remove(); + } +} + +// buildPdfTableHeaderRows: baut die Kopfzeilen der Projektübersichts-Tabelle als HTML-String (zwei Zeilen). +function buildPdfTableHeaderRows(allPeople){ + let h1 = `Pr.-Nr.BezeichnungStatus`; + const grouped = peopleByRole(currentWeek()); + ROLES.forEach(r => { + const count = Math.max(1, grouped[r].length); + h1 += `${r}`; + }); + h1 += `Leistungsphasen (%)`; + + let h2 = ``; + ROLES.forEach(r => { + if(grouped[r].length === 0){ + h2 += `–`; + } else { + grouped[r].forEach(entry => { + h2 += `${esc(entry.person.name)}`; + }); + } + }); + LPHS.forEach(l => h2 += `${l}`); + h2 += ``; + return h1 + h2; +} + +// buildPdfProjectRow: baut eine einzelne Projektzeile als HTML-String. +function buildPdfProjectRow(p, allPeople){ + let body = ``; + body += `${esc(p.nr)}`; + body += `${esc(p.name)}`; + const statusText = pdfStatusText(p.status); + body += `${statusText}`; + allPeople.forEach(entry => { + const s = p.assign[assignKey(entry.person.id, entry.role)] || 0; + const txt = s === 1 ? 'X' : s === 2 ? '(X)' : ''; + const bg = s === 1 ? '#9ae6b4' : s === 2 ? '#fbd38d' : '#fff'; + body += `${txt}`; + }); + LPHS.forEach(l => { + const v = (p.lph[l] !== undefined && p.lph[l] !== '') ? String(p.lph[l]).replace('%','') : ''; + body += `${esc(v ? v + '%' : '')}`; + }); + body += ``; + return body; +} + +// buildPdfGroupTitleRow: baut die Zeile mit dem Gruppentitel. +function buildPdfGroupTitleRow(groupName, allPeople){ + const colCount = 3 + allPeople.length + LPHS.length; + return `${esc(groupName)}`; +} + +// renderSinglePdfBlock: erzeugt einen DOM-Wrapper mit einer einzelnen Tabelle +// für den PDF-Export (hilft bei der Höhenmessung). +function renderSinglePdfBlock(container, headerRows, titleRow, bodyRows){ + const wrapper = document.createElement('div'); + wrapper.style.width = '1123px'; + wrapper.style.padding = '20px'; + wrapper.style.boxSizing = 'border-box'; + wrapper.style.background = '#fff'; + wrapper.innerHTML = `

${titleRow}${headerRows}${bodyRows}

`; + container.appendChild(wrapper); + return wrapper; +} + +// buildPdfAttendanceBlock: baut den Anwesenheits-Block als HTML-String. +function buildPdfAttendanceBlock(presentList, absentList){ + return `

Anwesenheit

Anwesend: ${presentList || '—'}

Abwesend: ${absentList || '—'}

`; +} + +// pdfStatusText: konvertiert HTML-Status in reinen Text mit Zeilenumbrüchen. +function pdfStatusText(htmlStatus){ + if(!htmlStatus) return ''; + const div = document.createElement('div'); + div.innerHTML = htmlStatus; + const text = (div.textContent || div.innerText || '').replace(/\u00A0/g, ' ').trim(); + return esc(text); +} + +// buildPdfLoadSection: baut die Auslastungsübersicht für das PDF. +function buildPdfLoadSection(allPeople){ + const w = currentWeek(); + const grouped = peopleByRole(w); + const stats = {}; + ROLES.forEach(r => { + grouped[r].forEach(entry => { + stats[assignKey(entry.person.id, r)] = {main:0, opt:0, kleine:0, anbahnung:0, projects:{}}; + }); + }); + + w.projects.forEach(pr => { + const isAnbahnung = pr.group === 'In Anbahnung'; + const isKleine = pr.group === 'Kleine Projekte'; + Object.keys(pr.assign).forEach(aKey => { + if(!stats[aKey]) return; + if(isAnbahnung){ + if(pr.assign[aKey] === 1 || pr.assign[aKey] === 2) stats[aKey].anbahnung++; + return; + } + const st = pr.assign[aKey]; + if(isKleine){ + if(st === 1 || st === 2){ + stats[aKey].kleine++; + stats[aKey].projects[pr.name] = (stats[aKey].projects[pr.name] || 0) + 1; + } + return; + } + if(st === 1) stats[aKey].main++; + else if(st === 2) stats[aKey].opt++; + stats[aKey].projects[pr.name] = (stats[aKey].projects[pr.name] || 0) + 1; + }); + }); + + let maxLoad = 1; + Object.keys(stats).forEach(k => { + const l = stats[k].main + stats[k].opt * 0.5 + stats[k].kleine * 0.3; + if(l > maxLoad) maxLoad = l; + }); + + let html = `

Auslastung der Projektbeteiligten (aktuelle Sitzung)

`; + html += ''; + + ROLES.forEach(r => { + grouped[r].forEach(entry => { + const s = stats[assignKey(entry.person.id, r)]; + const load = s.main + s.opt * 0.5 + s.kleine * 0.3; + const pct = Math.round(load / maxLoad * 100); + const color = pct > 75 ? '#c53030' : pct > 45 ? '#d69e2e' : '#2f855a'; + const detail = Object.keys(s.projects).map(k => `${esc(k)} (${s.projects[k]}×)`).join(', ') || '—'; + html += ` + + + + + + `; + }); + }); + + html += '

Rolle	Kürzel	Punkte	Balken	Projektdetails
${r}	${esc(entry.person.name)}	${load.toString().replace('.',',')}	+ + + + ${pct}% +	${detail}${s.anbahnung ? ` In Anbahnung: ${s.anbahnung}` : ''}

'; + html += '

Haupt=1 · Optional=0,5 · Kleine Projekte=0,3 · In Anbahnung wird nicht in der Punktzahl gezählt.

'; + html += '

'; + return html; +} + +// sendCsvToServer: POSTet CSV an /save-csv +function blobToDataUrl(blob){ + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onloadend = () => resolve(reader.result); + reader.onerror = reject; + reader.readAsDataURL(blob); + }); +} + +function sendCsvToServer(filename, csvContent){ + if(!window.fetch) return Promise.reject(new Error('fetch nicht verfügbar')); + return fetch(baseUrl() + '/save-csv',{ + method:'POST', + headers:{'Content-Type':'application/json; charset=utf-8'}, + body:JSON.stringify({filename,csv:csvContent,department:currentDepartment}) + }).then(r=>{ if(!r.ok) throw new Error('Server HTTP '+r.status); return r.json(); }); +} + +// ---------- Show Mode ---------- + +let showModeActive = false; +let showModeTimer = null; +let showModeResumeTimer = null; +let showModePaused = false; +let showModeOriginal = { department: DEFAULT_DEPARTMENT, tab: DEFAULT_TAB }; +const SHOW_MODE_SLIDE_DURATION = 10000; // 10 Sekunden pro Slide +const SHOW_MODE_PAUSE_DURATION = 60000; // 1 Minute Pause +const SHOW_MODE_SEQUENCE = [ + { dept: 'ELT', view: 'board' }, + { dept: 'ELT', view: 'load' }, + { dept: 'HLS', view: 'board' }, + { dept: 'HLS', view: 'load' }, + { dept: 'ARCH', view: 'board' }, + { dept: 'ARCH', view: 'load' } +]; +let showModeIndex = 0; + +function startShowMode(){ + if(showModeActive) return; + showModeActive = true; + showModePaused = false; + showModeOriginal = { department: currentDepartment, tab: currentTab }; + showModeIndex = 0; + + const overlay = document.getElementById('showModeOverlay'); + if(overlay) overlay.style.display = 'flex'; + + // Menü schließen, falls offen + setHeaderCollapsed(true, false); + + showModeNextSlide(); +} + +function stopShowMode(){ + showModeActive = false; + showModePaused = false; + clearTimeout(showModeTimer); + clearTimeout(showModeResumeTimer); + + const overlay = document.getElementById('showModeOverlay'); + if(overlay) overlay.style.display = 'none'; + + // Ursprünglichen Zustand wiederherstellen + currentTab = showModeOriginal.tab; + if(currentDepartment !== showModeOriginal.department){ + switchDepartment(showModeOriginal.department); + } else { + showTab(currentTab, true); + renderAll(); + } +} + +function pauseShowMode(){ + if(!showModeActive) return; + if(showModePaused){ + // bereits pausiert -> sofort fortsetzen + resumeShowMode(); + return; + } + showModePaused = true; + clearTimeout(showModeTimer); + clearTimeout(showModeResumeTimer); + const pausedEl = document.getElementById('showModePaused'); + if(pausedEl) pausedEl.style.display = 'block'; + showModeResumeTimer = setTimeout(() => { + if(showModeActive && showModePaused) resumeShowMode(); + }, SHOW_MODE_PAUSE_DURATION); +} + +function resumeShowMode(){ + if(!showModeActive) return; + showModePaused = false; + clearTimeout(showModeResumeTimer); + const pausedEl = document.getElementById('showModePaused'); + if(pausedEl) pausedEl.style.display = 'none'; + showModeNextSlide(); +} + +function showModeNextSlide(){ + if(!showModeActive || showModePaused) return; + + const slide = SHOW_MODE_SEQUENCE[showModeIndex % SHOW_MODE_SEQUENCE.length]; + showModeIndex++; + + const titleEl = document.getElementById('showModeTitle'); + if(titleEl){ + const deptLabel = DEPARTMENTS[slide.dept] ? DEPARTMENTS[slide.dept].label : slide.dept; + titleEl.textContent = `${deptLabel} – ${slide.view === 'load' ? 'Auslastung' : 'Projektboard'}`; + } + + // Ladehinweis anzeigen, damit der alte Inhalt nicht kurz sichtbar flackert + const content = document.getElementById('showModeContent'); + if(content){ + content.innerHTML = '

Lädt…

'; + } + + // Wechsle Department und View in der Hauptansicht, dann kopiere ins Overlay. + // Da switchDepartment asynchron lädt, müssen wir auf den Abschluss warten. + if(currentDepartment !== slide.dept){ + // Temporär currentTab setzen, damit nach dem Laden der richtige Tab aktiv ist. + currentTab = slide.view; + switchDepartment(slide.dept); + // Warte bis Daten geladen sind, dann rendern und kopieren + waitForLoadThenRender(slide.view); + } else { + showTab(slide.view, true); + renderAll(); + requestAnimationFrame(() => { + requestAnimationFrame(() => { + copyCurrentViewToShowMode(); + scheduleNextShowModeSlide(); + }); + }); + } +} + +function waitForLoadThenRender(view){ + let attempts = 0; + const check = setInterval(() => { + attempts++; + // Wenn Wochen geladen sind oder nach Seed gefallen ist + if(db.weeks.length > 0 || attempts > 30){ + clearInterval(check); + showTab(view, true); + renderAll(); + // Kurze Verzögerung, damit das DOM aktualisiert ist, bevor kopiert wird + requestAnimationFrame(() => { + requestAnimationFrame(() => { + copyCurrentViewToShowMode(); + scheduleNextShowModeSlide(); + }); + }); + } + }, 200); +} + +function scheduleNextShowModeSlide(){ + if(!showModeActive || showModePaused) return; + clearTimeout(showModeTimer); + showModeTimer = setTimeout(() => { + showModeNextSlide(); + }, SHOW_MODE_SLIDE_DURATION); +} + +function copyCurrentViewToShowMode(){ + const content = document.getElementById('showModeContent'); + const sourceId = currentTab === 'load' ? 'load' : 'board'; + const source = document.getElementById(sourceId); + if(content && source){ + content.innerHTML = source.innerHTML; + // Im Show Mode sollen in der Auslastung Überschrift und Steuerelemente ausgeblendet werden + if(currentTab === 'load'){ + content.querySelectorAll('.section-title, .toolbar').forEach(el => el.remove()); + } + } +} + +// ESC beendet Show Mode +document.addEventListener('keydown', function(e){ + if(showModeActive && e.key === 'Escape'){ + stopShowMode(); + } +}); + + +// ---------- Init / Start ---------- + +// renderAll: Convenience um UI-Elemente zu initialisieren +function renderAll(){ + refreshWeekSelect(); + updateWeekDate(); + renderBoard(); + const activeTab = document.querySelector('.tab.active')?.dataset.tab || currentTab; + if(activeTab === 'load') renderLoad(); + else if(activeTab === 'projects') renderProjects(); + else if(activeTab === 'people') renderPeople(); +} + +function initUiState(){ + loadUiState(); + loadTheme(); + loadHeaderState(); + document.querySelectorAll('.dept-tab').forEach(btn => { + btn.classList.toggle('active', btn.dataset.dept === currentDepartment); + }); + const info = DEPARTMENTS[currentDepartment]; + document.title = 'Projektübersicht ' + info.label; + const titleEl = document.getElementById('pageTitle'); + if(titleEl) titleEl.textContent = info.icon + ' Projektübersicht ' + info.label; + + const tab = ['board','load','projects','people'].includes(currentTab) ? currentTab : DEFAULT_TAB; + // Beim initialen Start niemals einen passwortgeschützten Tab direkt anzeigen. + const safeTab = (tab === 'projects' || tab === 'people') ? DEFAULT_TAB : tab; + showTab(safeTab, true); +} + +function syncRangeDisplay(displayId, startId, endId){ + const disp = document.getElementById(displayId); + if(!disp) return; + const sEl = document.getElementById(startId); + const eEl = document.getElementById(endId); + const s = sEl ? parseDateISO(sEl.value) : null; + const e = eEl ? parseDateISO(eEl.value) : null; + const from = s ? formatDateDE(s) : ''; + const to = e ? formatDateDE(e) : from; + disp.value = from ? (from + ' – ' + to) : ''; +} + +// Automatische Initialisierung nur auf der Hauptseite (Projektboard). +// Andere Seiten (z.B. Projektplan) laden main.v2.js nur für die Hilfsfunktionen. +if(document.getElementById('board')){ + initUiState(); + switchDepartment(currentDepartment); +} diff --git a/public/project-plan.html b/public/project-plan.html new file mode 100644 index 0000000..3a685c5 --- /dev/null +++ b/public/project-plan.html @@ -0,0 +1,305 @@ + + + + + +Projektplan + + + + +

Projektplan

+ +

+ Zeitraum: + + + + + Urlaub anzeigen + + + + + + +

+ + + + + + + + + + + + + + diff --git a/public/project-plan.js b/public/project-plan.js new file mode 100644 index 0000000..be906a1 --- /dev/null +++ b/public/project-plan.js @@ -0,0 +1,1528 @@ +// Projektplan-Seite: TODOs und Meilensteine direkt im GANTT-Diagramm. +// Daten werden über denselben Server wie das Hauptfenster geladen. + +(function(){ + const params = new URLSearchParams(location.search); + const department = params.get('department') || 'ELT'; + const weekLabel = params.get('weekLabel'); + const projNr = params.get('projNr') || ''; + const projName = params.get('projName') || ''; + + let planWeek = null; + let planProject = null; + // px pro Tag für die GANTT-Zoomstufe (null = an Containerbreite anpassen) + let planGanttPxPerDay = 14; + let criticalPathActive = false; + + function init(){ + loadTheme(); // Theme aus localStorage / System übernehmen + if(!weekLabel || !projName){ + document.getElementById('planTitle').textContent = 'Fehler'; + document.getElementById('planSubtitle').textContent = 'Kein Projekt ausgewählt.'; + return; + } + currentDepartment = department; // global aus main.v2.js + bindToolbarButtons(); + loadPlanData(); + } + + function bindToolbarButtons(){ + const addTodoBtn = document.getElementById('addTodoBtn'); + if(addTodoBtn) addTodoBtn.addEventListener('click', () => addTodo()); + const autoScheduleBtn = document.getElementById('autoScheduleBtn'); + if(autoScheduleBtn) autoScheduleBtn.addEventListener('click', () => autoScheduleTodos()); + const criticalPathBtn = document.getElementById('criticalPathBtn'); + if(criticalPathBtn) criticalPathBtn.addEventListener('click', () => toggleCriticalPath()); + } + + function loadPlanData(){ + if(!window.fetch){ + document.getElementById('planSubtitle').textContent = 'Netzwerk nicht verfügbar.'; + return; + } + const url = baseUrl() + '/load-all?department=' + encodeURIComponent(department); + fetch(url) + .then(r => { if(!r.ok) throw new Error('Server HTTP '+r.status); return r.json(); }) + .then(data => { + db = { weeks: [], currentWeek: null, globalPeople: {} }; + db.globalPeople[department] = parseGlobalPeopleCsv(data.people); + const parsed = (data.sessions || []).map(s => ({ filename: s.filename, rows: parseCsvText(s.content) })); + parsed.forEach(s => { + const w = parseSessionCsv(s.filename, s.rows); + if(w) db.weeks.push(w); + }); + db.weeks.sort((a,b) => weekSortKey(a.label).localeCompare(weekSortKey(b.label))); + planWeek = db.weeks.find(w => w.label === weekLabel); + if(!planWeek){ + document.getElementById('planTitle').textContent = 'Nicht gefunden'; + document.getElementById('planSubtitle').textContent = 'Sitzung "' + esc(weekLabel) + '" konnte nicht geladen werden.'; + return; + } + planProject = planWeek.projects.find(p => (p.nr || '') === projNr && (p.name || '') === projName); + if(!planProject){ + document.getElementById('planTitle').textContent = 'Nicht gefunden'; + document.getElementById('planSubtitle').textContent = 'Projekt nicht in dieser Sitzung vorhanden.'; + return; + } + renderPlanPage(); + }) + .catch(err => { + document.getElementById('planTitle').textContent = 'Fehler beim Laden'; + document.getElementById('planSubtitle').textContent = err.message; + }); + } + + function ensurePlanLocal(){ + if(!planProject.plan) planProject.plan = { start:'', end:'', todos:[], milestones:[], people:[], progress:0 }; + if(!Array.isArray(planProject.plan.todos)) planProject.plan.todos = []; + // Migration alter Einzel-Abhängigkeiten zu Array + planProject.plan.todos.forEach(t => { + if(!Array.isArray(t.dependsOn)){ + t.dependsOn = t.dependsOn ? [t.dependsOn] : []; + } + if(!Array.isArray(t.assignees)) t.assignees = []; + if(t.progress === undefined) t.progress = t.done ? 100 : 0; + }); + return planProject.plan; + } + + function isLocked(){ + return !!planWeek.locked; + } + + function renderPlanPage(){ + const p = planProject; + const plan = ensurePlanLocal(); + document.getElementById('planTitle').textContent = (p.nr ? p.nr + ' – ' : '') + p.name; + document.getElementById('planSubtitle').textContent = planWeek.label + (planWeek.date ? ' · ' + formatWeekDate(planWeek.date) : ''); + + // GANTT inkl. TODOs + const addMilestoneBtn = document.getElementById('addMilestoneBtn'); + const locked = isLocked(); + if(addMilestoneBtn) addMilestoneBtn.style.display = locked ? 'none' : ''; + + fitPlanGanttRange(); + } + + // ---------- Drag-and-Drop für TODO- und Meilenstein-Zeilen direkt im GANTT ---------- + + let ganttTodoDrag = null; + const DRAGGABLE_GANTT_ROW_SELECTOR = '.gantt-row.gantt-todo, .gantt-row.gantt-milestone-row'; + + function initGanttTodoDrag(){ + const container = document.getElementById('planGanttContainer'); + if(!container) return; + container.addEventListener('mousedown', onGanttTodoMouseDown); + document.addEventListener('mousemove', onGanttTodoMouseMove); + document.addEventListener('mouseup', onGanttTodoMouseUp); + } + + function onGanttTodoMouseDown(e){ + if(isLocked()) return; + const handle = e.target.closest('.gantt-todo-drag'); + if(!handle) return; + const row = handle.closest(DRAGGABLE_GANTT_ROW_SELECTOR); + if(!row) return; + + e.preventDefault(); + e.stopPropagation(); + + ganttTodoDrag = { + row, + startY: e.clientY, + moved: false + }; + row.classList.add('dragging'); + } + + function onGanttTodoMouseMove(e){ + if(!ganttTodoDrag) return; + const chart = ganttTodoDrag.row.closest('.gantt-chart'); + if(!chart) return; + + const dy = e.clientY - ganttTodoDrag.startY; + if(Math.abs(dy) > 3) ganttTodoDrag.moved = true; + if(!ganttTodoDrag.moved) return; + + const afterElement = getGanttRowDragAfterElement(chart, e.clientY); + if(ganttTodoDrag.row && afterElement == null){ + chart.appendChild(ganttTodoDrag.row); + } else if(ganttTodoDrag.row && afterElement && afterElement !== ganttTodoDrag.row){ + chart.insertBefore(ganttTodoDrag.row, afterElement); + } + } + + function onGanttTodoMouseUp(e){ + if(!ganttTodoDrag) return; + const drag = ganttTodoDrag; + ganttTodoDrag = null; + drag.row.classList.remove('dragging'); + if(drag.moved){ + reorderPlanRows(); + } + } + + function getGanttRowDragAfterElement(chart, y){ + const draggableElements = [...chart.querySelectorAll(DRAGGABLE_GANTT_ROW_SELECTOR + ':not(.dragging)')]; + return draggableElements.reduce((closest, child) => { + const box = child.getBoundingClientRect(); + const offset = y - box.top - box.height / 2; + if(offset < 0 && offset > closest.offset){ + return { offset: offset, element: child }; + } else { + return closest; + } + }, { offset: Number.NEGATIVE_INFINITY }).element; + } + + function reorderPlanRows(){ + if(isLocked()) return; + const chart = document.querySelector('#planGanttContainer .gantt-chart'); + if(!chart) return; + const plan = ensurePlanLocal(); + const todos = Array.isArray(plan.todos) ? plan.todos : []; + const milestones = Array.isArray(plan.milestones) ? plan.milestones : []; + const todoIds = todos.map(t => t.id); + const milestoneIds = milestones.map(m => m.id); + + // Alle beweglichen Zeilen in aktueller DOM-Reihenfolge + const rows = [...chart.querySelectorAll(DRAGGABLE_GANTT_ROW_SELECTOR)]; + const todoRowIds = rows.filter(r => r.classList.contains('gantt-todo')).map(r => r.dataset.todoId).filter(Boolean); + const milestoneRowIds = rows.filter(r => r.classList.contains('gantt-milestone-row')).map(r => r.dataset.milestoneId).filter(Boolean); + + // Sicherheitscheck: Anzahl muss stimmen + if(todoRowIds.length !== todoIds.length) return; + if(milestoneRowIds.length !== milestoneIds.length) return; + + // TODOs neu ordnen + const newTodos = []; + todoRowIds.forEach(id => { + const t = todos.find(x => x.id === id); + if(t) newTodos.push(t); + }); + plan.todos = newTodos; + + // Meilenstein-Positionen neu berechnen + // Regeln: + // - Steht der Meilenstein direkt vor einer TODO -> before:todoId + // - Steht er direkt nach einer TODO -> after:todoId + // - Steht er ganz am Anfang (vor erster TODO) oder es gibt keine TODO -> '' (oben in Projektzeile) + // - Steht er ganz am Ende (nach letzter TODO) -> after:lastTodoId + rows.forEach((row, idx) => { + if(!row.classList.contains('gantt-milestone-row')) return; + const msId = row.dataset.milestoneId; + const ms = milestones.find(m => m.id === msId); + if(!ms) return; + + let position = ''; + const prevRow = rows[idx - 1]; + const nextRow = rows[idx + 1]; + + if(prevRow && prevRow.classList.contains('gantt-todo')){ + position = 'after:' + prevRow.dataset.todoId; + } else if(nextRow && nextRow.classList.contains('gantt-todo')){ + position = 'before:' + nextRow.dataset.todoId; + } else if(prevRow && prevRow.classList.contains('gantt-milestone-row')){ + // Zwei Meilensteine hintereinander: beziehe dich auf die nächste TODO danach oder letzte davor + // Suche nächste TODO nach diesem Block + let nextTodoId = null; + for(let i = idx + 1; i < rows.length; i++){ + if(rows[i].classList.contains('gantt-todo')){ nextTodoId = rows[i].dataset.todoId; break; } + } + if(nextTodoId){ + position = 'before:' + nextTodoId; + } else { + // Keine TODO danach -> letzte TODO davor suchen + let prevTodoId = null; + for(let i = idx - 1; i >= 0; i--){ + if(rows[i].classList.contains('gantt-todo')){ prevTodoId = rows[i].dataset.todoId; break; } + } + if(prevTodoId) position = 'after:' + prevTodoId; + } + } + ms.position = position; + }); + + savePlan(); + renderPlanGantt(); + } + + function renderProjectAssignees(){ + const assignees = projectAssignees(planProject, planWeek); + if(assignees.length === 0) return 'Keine Zuordnungen im Projektboard.'; + return assignees.map(a => { + const cls = a.state === 1 ? 'main' : a.state === 2 ? 'optional' : ''; + return `${esc(a.person.name)}${a.role ? ' (' + esc(a.role) + ')' : ''}`; + }).join(''); + } + + // --------- Mail-Link für alle zugeordneten Personen ---------- + window.todoMail = function() { + if (!planProject || !planWeek) { + console.warn('Kein aktuelles Projekt/keine aktuelle Woche gefunden – Mail kann nicht erstellt werden.'); + return; + } + + const assignees = projectAssignees(planProject, planWeek); + + const empfaengerListe = assignees + .map(a => a.email || (a.person && a.person.email) || '') + .filter(email => email && email.trim() !== ''); + + const eindeutigeEmpfaenger = [...new Set(empfaengerListe)]; + + if (eindeutigeEmpfaenger.length === 0) { + console.warn('Keine gültigen E-Mail-Adressen der zugeordneten Personen gefunden.'); + return; + } + + const empfaenger = eindeutigeEmpfaenger.join(','); + + const titleEl = document.getElementById('planTitle'); + const projektname = titleEl ? titleEl.textContent.trim() : 'Projekt'; + const seitenLink = window.location.href; + const betreff = 'Neue Aufgaben im Projekt ' + projektname; + + const nachricht = + 'Guten Tag,\n\n' + + 'es wurden neue Aufgaben im Projekt ' + projektname + ' hinzugefügt.\n\n' + + 'Link zum Projekt:\n' + + seitenLink + '\n\n' + + 'Mit freundlichen Grüßen'; + + const mailtoLink = + 'mailto:' + encodeURIComponent(empfaenger).replace(/%2C/g, ',') + + '?subject=' + encodeURIComponent(betreff) + + '&body=' + encodeURIComponent(nachricht); + + if (mailtoLink.length > 1800) { + console.warn('mailto-Link ist sehr lang (' + mailtoLink.length + ' Zeichen) – manche Mail-Clients könnten ihn abschneiden.'); + } + + window.location.href = mailtoLink; + }; + + // ---------- Meilenstein-Modal ---------- + + let currentMilestoneIndex = null; + + window.openMilestoneModal = function(index){ + if(isLocked()) return; + const plan = ensurePlanLocal(); + if(!Array.isArray(plan.milestones)) plan.milestones = []; + // Migration alter Meilensteine + plan.milestones.forEach(m => { if(!Array.isArray(m.dependsOn)) m.dependsOn = []; }); + currentMilestoneIndex = index; + + const isNew = index === null || plan.milestones[index] === undefined; + const currentMs = isNew ? null : plan.milestones[index]; + document.getElementById('milestoneEditName').value = isNew ? '' : (currentMs.name || ''); + document.getElementById('milestoneEditDate').value = isNew ? '' : (currentMs.date || ''); + + const positionSelect = document.getElementById('milestoneEditPosition'); + if(positionSelect){ + const currentPosition = currentMs && currentMs.position ? currentMs.position : ''; + const defaultAfterTodo = isNew && plan.todos && plan.todos.length > 0 ? plan.todos[plan.todos.length - 1].id : null; + let opts = ''; + if(plan.todos && plan.todos.length > 0){ + plan.todos.forEach(t => { + const beforeVal = 'before:' + t.id; + const afterVal = 'after:' + t.id; + const beforeSel = currentPosition === beforeVal ? 'selected' : ''; + let afterSel = currentPosition === afterVal ? 'selected' : ''; + if(isNew && defaultAfterTodo === t.id && !currentPosition) afterSel = 'selected'; + opts += ``; + opts += ``; + }); + } + positionSelect.innerHTML = opts; + } + + const dependsOnList = document.getElementById('milestoneEditDependsOn'); + if(dependsOnList){ + const currentDeps = currentMs && Array.isArray(currentMs.dependsOn) ? currentMs.dependsOn : []; + let listHtml = ''; + + // Andere Meilensteine als Vorgänger anbieten + if(plan.milestones.length > 1){ + listHtml += '

Meilensteine

'; + plan.milestones.forEach(m => { + if(currentMs && m.id === currentMs.id) return; + const mId = 'm_' + m.id; + const checked = currentDeps.includes(mId) ? 'checked' : ''; + listHtml += ` 🚩 ${esc(m.name || 'Meilenstein')} (${formatDateDE(parseDateISO(m.date))})`; + }); + } + + // TODOs als Vorgänger anbieten + if(plan.todos && plan.todos.length > 0){ + listHtml += '

Aufgaben

'; + (plan.todos || []).forEach(t => { + const checked = currentDeps.includes(t.id) ? 'checked' : ''; + const datesStr = (t.start || t.end) ? ` (${formatDateDE(parseDateISO(t.start))}–${formatDateDE(parseDateISO(t.end))})` : ''; + listHtml += ` ${esc(t.title || 'TODO')}${datesStr}`; + }); + } + if(listHtml === '') listHtml = 'Keine anderen Aufgaben oder Meilensteine vorhanden.'; + dependsOnList.innerHTML = listHtml; + } + + document.getElementById('milestoneModal').style.display = 'flex'; + document.getElementById('milestoneEditName').focus(); + } + + window.closeMilestoneModal = function(){ + document.getElementById('milestoneModal').style.display = 'none'; + currentMilestoneIndex = null; + }; + + window.saveMilestoneEdit = function(){ + if(isLocked()) return; + const name = document.getElementById('milestoneEditName').value.trim(); + const date = document.getElementById('milestoneEditDate').value; + if(!name || !date){ alert('Bitte Name und Datum angeben.'); return; } + + const dependsOnList = document.getElementById('milestoneEditDependsOn'); + const dependsOn = dependsOnList ? Array.from(dependsOnList.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value).filter(Boolean) : []; + + const positionSelect = document.getElementById('milestoneEditPosition'); + const position = positionSelect ? positionSelect.value : ''; + + const plan = ensurePlanLocal(); + if(!Array.isArray(plan.milestones)) plan.milestones = []; + + if(currentMilestoneIndex === null){ + plan.milestones.push({ id: uid(), name, date, dependsOn, position }); + } else if(plan.milestones[currentMilestoneIndex]){ + const m = plan.milestones[currentMilestoneIndex]; + m.name = name; + m.date = date; + m.dependsOn = dependsOn; + m.position = position; + } + plan.milestones.sort((a,b) => parseDateISO(a.date) - parseDateISO(b.date)); + savePlan(); + closeMilestoneModal(); + renderPlanGantt(); + }; + + // Entfernt eine gelöschte ID aus allen dependsOn-Listen (TODOs und Meilensteine) + function removeDependencyRefs(plan, deletedId){ + (plan.todos || []).forEach(t => { + if(Array.isArray(t.dependsOn)) t.dependsOn = t.dependsOn.filter(id => id !== deletedId); + }); + (plan.milestones || []).forEach(m => { + if(Array.isArray(m.dependsOn)) m.dependsOn = m.dependsOn.filter(id => id !== deletedId); + }); + } + + window.deleteMilestoneEdit = function(){ + if(isLocked()) return; + if(currentMilestoneIndex === null){ closeMilestoneModal(); return; } + if(!confirm('Meilenstein löschen?')) return; + const plan = ensurePlanLocal(); + if(plan.milestones && plan.milestones[currentMilestoneIndex]){ + const deletedId = 'm_' + plan.milestones[currentMilestoneIndex].id; + plan.milestones.splice(currentMilestoneIndex, 1); + removeDependencyRefs(plan, deletedId); + savePlan(); + } + closeMilestoneModal(); + renderPlanGantt(); + }; + + window.addPlanMilestone = function(){ + openMilestoneModal(null); + }; + + // ---------- TODO-Modal ---------- + + let currentTodoIndex = null; + + window.openTodoModal = function(index){ + if(isLocked()) return; + const plan = ensurePlanLocal(); + if(!Array.isArray(plan.todos)) plan.todos = []; + currentTodoIndex = index; + + const isNew = index === null || plan.todos[index] === undefined; + const currentTodo = !isNew ? plan.todos[index] : null; + + document.getElementById('todoEditTitle').value = isNew ? '' : (currentTodo.title || ''); + document.getElementById('todoEditStart').value = isNew ? '' : (currentTodo.start || ''); + document.getElementById('todoEditEnd').value = isNew ? '' : (currentTodo.end || ''); + document.getElementById('todoEditDone').checked = isNew ? false : !!currentTodo.done; + const progress = isNew ? 0 : (parseInt(currentTodo.progress, 10) || 0); + document.getElementById('todoEditProgress').value = progress; + document.getElementById('todoEditProgressVal').textContent = progress + '%'; + + const dependsOnList = document.getElementById('todoEditDependsOn'); + if(dependsOnList){ + const currentDeps = currentTodo && Array.isArray(currentTodo.dependsOn) ? currentTodo.dependsOn : []; + let listHtml = ''; + + // Meilensteine als Vorgänger anbieten + if(Array.isArray(plan.milestones) && plan.milestones.length > 0){ + listHtml += '

Meilensteine

'; + plan.milestones.forEach(m => { + const mId = 'm_' + m.id; + const checked = currentDeps.includes(mId) ? 'checked' : ''; + listHtml += ` 🚩 ${esc(m.name || 'Meilenstein')} (${formatDateDE(parseDateISO(m.date))})`; + }); + } + + // Andere TODOs als Vorgänger anbieten + if(plan.todos && plan.todos.length > 1){ + listHtml += '

Aufgaben

'; + (plan.todos || []).forEach(t => { + if(currentTodo && t.id === currentTodo.id) return; + const checked = currentDeps.includes(t.id) ? 'checked' : ''; + const datesStr = (t.start || t.end) ? ` (${formatDateDE(parseDateISO(t.start))}–${formatDateDE(parseDateISO(t.end))})` : ''; + listHtml += ` ${esc(t.title || 'TODO')}${datesStr}`; + }); + } + if(listHtml === '') listHtml = 'Keine anderen Aufgaben oder Meilensteine vorhanden.'; + dependsOnList.innerHTML = listHtml; + } + + const assigneesDiv = document.getElementById('todoEditAssignees'); + if(assigneesDiv){ + const assignees = projectAssignees(planProject, planWeek); + const currentAssignees = currentTodo && Array.isArray(currentTodo.assignees) ? currentTodo.assignees : []; + const seenPeople = new Set(); + const uniquePeople = []; + assignees.forEach(a => { + if(!seenPeople.has(a.person.id)){ + seenPeople.add(a.person.id); + uniquePeople.push(a.person); + } + }); + assigneesDiv.innerHTML = uniquePeople.map(person => { + const checked = currentAssignees.includes(person.id) ? 'checked' : ''; + return ` ${esc(person.name)}`; + }).join('') || 'Keine Projektzuordnungen im Board.'; + } + + document.getElementById('todoModal').style.display = 'flex'; + document.getElementById('todoEditTitle').focus(); + }; + + window.closeTodoModal = function(){ + document.getElementById('todoModal').style.display = 'none'; + currentTodoIndex = null; + }; + + window.saveTodoEdit = function(){ + if(isLocked()) return; + const title = document.getElementById('todoEditTitle').value.trim(); + let start = document.getElementById('todoEditStart').value; + let end = document.getElementById('todoEditEnd').value; + // Nur ein Datum angegeben: als eintägige Aufgabe behandeln, + // sonst würde kein Balken im GANTT erscheinen. + if(start && !end) end = start; + if(end && !start) start = end; + const done = document.getElementById('todoEditDone').checked; + let progress = parseInt(document.getElementById('todoEditProgress').value, 10) || 0; + // "Erledigt" impliziert 100 % Fortschritt + if(done && progress < 100) progress = 100; + + const dependsOnList = document.getElementById('todoEditDependsOn'); + const dependsOn = dependsOnList ? Array.from(dependsOnList.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value).filter(Boolean) : []; + + const assigneesDiv = document.getElementById('todoEditAssignees'); + const assignees = assigneesDiv ? Array.from(assigneesDiv.querySelectorAll('input:checked')).map(cb => cb.value) : []; + + if(!title){ alert('Bitte einen Titel eingeben.'); return; } + if(start && end && parseDateISO(end) < parseDateISO(start)){ alert('Enddatum liegt vor Startdatum.'); return; } + + const plan = ensurePlanLocal(); + if(!Array.isArray(plan.todos)) plan.todos = []; + + if(currentTodoIndex === null){ + plan.todos.push({ id: uid(), title, start, end, done, progress, dependsOn, assignees }); + } else if(plan.todos[currentTodoIndex]){ + const t = plan.todos[currentTodoIndex]; + t.title = title; + t.start = start; + t.end = end; + t.done = done; + t.progress = progress; + t.dependsOn = dependsOn; + t.assignees = assignees; + } + savePlan(); + closeTodoModal(); + renderPlanGantt(); + }; + + window.deleteTodoEdit = function(){ + if(isLocked()) return; + if(currentTodoIndex === null){ closeTodoModal(); return; } + if(!confirm('TODO löschen?')) return; + const plan = ensurePlanLocal(); + if(plan.todos && plan.todos[currentTodoIndex]){ + const deletedId = plan.todos[currentTodoIndex].id; + plan.todos.splice(currentTodoIndex, 1); + removeDependencyRefs(plan, deletedId); + // Meilensteine, die relativ zu dieser TODO positioniert waren, zurücksetzen + (plan.milestones || []).forEach(m => { + if(m.position === 'before:' + deletedId || m.position === 'after:' + deletedId) m.position = ''; + }); + savePlan(); + } + closeTodoModal(); + renderPlanGantt(); + }; + + window.addTodoFromList = function(){ + if(isLocked()) return; + const title = document.getElementById('newTodoTitle').value.trim(); + let start = document.getElementById('newTodoStart').value; + let end = document.getElementById('newTodoEnd').value; + if(start && !end) end = start; + if(end && !start) start = end; + if(!title){ alert('Bitte einen Titel eingeben.'); return; } + if(start && end && parseDateISO(end) < parseDateISO(start)){ alert('Enddatum liegt vor Startdatum.'); return; } + const plan = ensurePlanLocal(); + plan.todos.push({ id: uid(), title, start, end, done: false, progress: 0, dependsOn: [], assignees: [] }); + document.getElementById('newTodoTitle').value = ''; + document.getElementById('newTodoStart').value = ''; + document.getElementById('newTodoEnd').value = ''; + savePlan(); + renderPlanGantt(); + }; + + window.addTodo = function(){ + openTodoModal(null); + }; + + function saveGlobalPeople(){ + const people = db.globalPeople[department] || []; + if(people.length > 0){ + const peopleCsv = globalPeopleToCsv(people); + sendCsvToServer('_people.csv', peopleCsv).catch(err => console.error('Speichern Personen fehlgeschlagen:', err)); + } + } + + window.updateTodo = function(idx, field, value){ + if(isLocked()) return; + const plan = ensurePlanLocal(); + if(!plan.todos[idx]) return; + plan.todos[idx][field] = value; + savePlan(); + renderPlanGantt(); + }; + + window.toggleTodoDone = function(idx){ + if(isLocked()) return; + const plan = ensurePlanLocal(); + if(!plan.todos[idx]) return; + plan.todos[idx].done = !plan.todos[idx].done; + savePlan(); + renderPlanGantt(); + }; + + window.deleteTodo = function(idx){ + if(isLocked()) return; + if(!confirm('TODO löschen?')) return; + const plan = ensurePlanLocal(); + if(!plan.todos[idx]) return; + const deletedId = plan.todos[idx].id; + plan.todos.splice(idx, 1); + removeDependencyRefs(plan, deletedId); + (plan.milestones || []).forEach(m => { + if(m.position === 'before:' + deletedId || m.position === 'after:' + deletedId) m.position = ''; + }); + savePlan(); + renderPlanGantt(); + }; + + function savePlan(){ + if(!planWeek || !planProject) return; + // Speichere nur diese Sitzung; globale Personenliste nicht überschreiben + const filename = filenameForWeek(planWeek.label); + const csv = weekToCsv(planWeek); + sendCsvToServer(filename, csv).catch(err => console.error('Speichern fehlgeschlagen:', err)); + } + + window.renderPlanGantt = function(){ + const container = document.getElementById('planGanttContainer'); + if(!planProject || !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([planProject], 7); + 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(planProject, planWeek).map(a => a.person.id); + const criticalPath = criticalPathActive ? computeCriticalPath(planProject) : []; + container.innerHTML = buildGanttHtml([planProject], start, end, { showVacation, editable: !isLocked(), highlightProjectId: planProject.id, showTodos: true, vacationPeople, pxPerDay: planGanttPxPerDay, criticalPath }); + container.scrollLeft = prevScroll; + requestAnimationFrame(() => renderGanttDependencies(container)); + renderResourceLoad(); + }; + + 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(``); + }); + }); + + if(paths.length === 0) return; + + svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + svg.setAttribute('class', 'gantt-dependencies-svg'); + svg.innerHTML = ` + + + + + + + + + + + + ${paths.join('')} + `; + + chart.appendChild(svg); + }; + + window.fitPlanGanttRange = function(){ + const range = ganttRangeFromProjects([planProject], 7); + 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 = planGanttPxPerDay || 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; + } + planGanttPxPerDay = next; + renderPlanGantt(); + }; + + // buildGanttHtml in main.v2.js erweitern, damit TODOs als eigene Balken dargestellt + // werden und neue TODOs direkt unter der Projektzeile angelegt werden können. + const originalBuildGanttHtml = window.buildGanttHtml; + window.buildGanttHtml = function(projects, start, end, options = {}){ + if(!options.showTodos) return originalBuildGanttHtml(projects, start, end, options); + const baseHtml = originalBuildGanttHtml(projects, start, end, options); + const temp = document.createElement('div'); + temp.innerHTML = baseHtml; + const chart = temp.querySelector('.gantt-chart'); + if(!chart) return baseHtml; + const totalDays = Math.max(1, daysBetween(start, end) + 1); + const editable = options.editable; + + projects.forEach(p => { + const plan = p.plan || {}; + const todos = Array.isArray(plan.todos) ? plan.todos : []; + const milestones = Array.isArray(plan.milestones) ? plan.milestones : []; + + // Projektzeile finden, unter der TODOs und Meilensteine eingehängt werden + const projectRow = chart.querySelector('.gantt-row.gantt-project.highlighted') || + Array.from(chart.querySelectorAll('.gantt-row.gantt-project')).find(r => { + const label = r.querySelector('.gantt-label'); + return label && label.textContent.includes(p.name); + }); + + function buildTodoRow(todo, tIdx){ + if(!todo.id) todo.id = uid(); + const s = parseDateISO(todo.start), e = parseDateISO(todo.end); + const row = document.createElement('div'); + row.className = 'gantt-row gantt-todo' + (todo.done ? ' done' : ''); + row.dataset.todoId = todo.id; + row.dataset.todoIndex = tIdx; + + let barHtml = ''; + if(s && e){ + const barStart = s < start ? start : s; + const barEnd = e > end ? end : e; + if(barEnd >= start && barStart <= end){ + const offset = daysBetween(start, barStart); + const span = daysBetween(barStart, barEnd) + 1; + const dragAttrs = editable ? ` data-gantt-type="todo" data-gantt-project="${esc(p.id)}" data-gantt-index="${tIdx}" data-gantt-start="${formatDateISO(s)}" data-gantt-end="${formatDateISO(e)}" draggable="false"` : ''; + const handles = editable ? `` : ''; + const isCritical = options.criticalPath && options.criticalPath.includes(todo.id); + const progress = Math.max(0, Math.min(100, parseInt(todo.progress, 10) || 0)); + barHtml = `

${handles}

`; + } + } + + let depBadge = ''; + if(Array.isArray(todo.dependsOn) && todo.dependsOn.length > 0){ + // Vorgänger können TODOs oder Meilensteine (Prefix "m_") sein + const preds = todo.dependsOn.map(id => { + const t = todos.find(x => x.id === id); + if(t) return { title: t.title || 'TODO', end: t.end }; + const m = milestones.find(x => 'm_' + x.id === id); + if(m) return { title: '🚩 ' + (m.name || 'Meilenstein'), end: m.date }; + return null; + }).filter(Boolean); + if(preds.length > 0){ + const isConflict = preds.some(pred => pred.end && todo.start && parseDateISO(todo.start) <= parseDateISO(pred.end)); + const names = preds.map(pr => pr.title).join(', '); + depBadge = `↳ ${preds.length === 1 ? esc(preds[0].title) : esc(preds.length + ' Vorgänger')}`; + } + } + + row.innerHTML = `

+ ${editable ? '⋮⋮' : ''} + ${esc(todo.title || 'TODO')}${depBadge} +

${barHtml}

`; + return row; + } + + function buildMilestoneRow(m, mIdx){ + const d = parseDateISO(m.date); + const row = document.createElement('div'); + row.className = 'gantt-row gantt-milestone-row' + (m.position ? ' positioned' : ''); + row.dataset.milestoneId = m.id; + row.dataset.milestoneIndex = mIdx; + let diamond = '', labelStyle = 'display:none'; + if(d){ + if(d >= start && d <= end){ + const offset = daysBetween(start, d); + const left = (offset / totalDays * 100).toFixed(4) + '%'; + const dragAttrs = editable ? ` data-gantt-type="milestone" data-gantt-project="${esc(p.id)}" data-gantt-index="${mIdx}" data-gantt-date="${formatDateISO(d)}" draggable="false"` : ''; + const deps = esc((m.dependsOn || []).join(',')); + diamond = `

`; + labelStyle = 'left:' + left; + } + } + row.innerHTML = `

+ ${editable ? '⋮⋮' : ''} + ${esc(m.name || 'Meilenstein')} +

${diamond}

${esc(m.name || '')}

`; + return row; + } + + if(!projectRow) return; + let insertAfter = projectRow; + const insertedMilestoneIds = new Set(); + + todos.forEach((todo, tIdx) => { + // Meilensteine, die VOR dieser Aufgabe positioniert sind + milestones.filter(m => m.position === 'before:' + todo.id).forEach(m => { + const mIdx = milestones.indexOf(m); + const row = buildMilestoneRow(m, mIdx); + insertAfter.parentNode.insertBefore(row, insertAfter.nextSibling); + insertAfter = row; + }); + + // Aufgabenzeile + const todoRow = buildTodoRow(todo, tIdx); + insertAfter.parentNode.insertBefore(todoRow, insertAfter.nextSibling); + insertAfter = todoRow; + + // Meilensteine, die NACH dieser Aufgabe positioniert sind + milestones.filter(m => m.position === 'after:' + todo.id).forEach(m => { + const mIdx = milestones.indexOf(m); + const row = buildMilestoneRow(m, mIdx); + insertAfter.parentNode.insertBefore(row, insertAfter.nextSibling); + insertAfter = row; + insertedMilestoneIds.add(m.id); + }); + }); + + // Positionierte Meilensteine, deren referenzierte Aufgabe nicht mehr existiert, + // am Ende der Aufgabenliste anhängen, damit sie nicht verloren gehen. + milestones.filter(m => m.position && !insertedMilestoneIds.has(m.id)).forEach(m => { + const mIdx = milestones.indexOf(m); + const row = buildMilestoneRow(m, mIdx); + insertAfter.parentNode.insertBefore(row, insertAfter.nextSibling); + insertAfter = row; + }); + + }); + + return temp.innerHTML; + }; + + // ---------- GANTT Drag-Editing (Balken, Meilensteine, Urlaub) ---------- + + let ganttDrag = null; + + function initGanttDrag(){ + const container = document.getElementById('planGanttContainer'); + if(!container) return; + container.addEventListener('mousedown', onGanttMouseDown); + container.addEventListener('dblclick', onGanttDoubleClick); + document.addEventListener('mousemove', onGanttMouseMove); + document.addEventListener('mouseup', onGanttMouseUp); + // Klick ohne Bewegung wird bereits in onGanttMouseUp behandelt (Modal öffnen). + // Ein zusätzlicher click-Handler würde das Modal doppelt bzw. nach einem + // Drag ungewollt öffnen. + } + + function onGanttMouseDown(e){ + if(isLocked()) return; + const bar = e.target.closest('[data-gantt-type]'); + if(!bar) return; + const timeline = bar.closest('.gantt-timeline'); + if(!timeline) return; + + const rangeStart = parseDateISO(document.getElementById('planGanttStart').value); + const rangeEnd = parseDateISO(document.getElementById('planGanttEnd').value); + if(!rangeStart || !rangeEnd) return; + + const resize = e.target.closest('.gantt-resize'); + const rect = timeline.getBoundingClientRect(); + + ganttDrag = { + bar, + timeline, + type: bar.dataset.ganttType, + action: resize ? resize.dataset.resize : 'move', + startX: e.clientX, + startY: e.clientY, + timelineWidth: rect.width, + rangeStart, + rangeEnd, + moved: false, + originalStart: parseDateISO(bar.dataset.ganttStart || bar.dataset.ganttDate), + originalEnd: parseDateISO(bar.dataset.ganttEnd), + personId: bar.dataset.ganttPerson, + absenceId: bar.dataset.ganttAbsence, + projectId: bar.dataset.ganttProject, + milestoneIndex: bar.dataset.ganttType === 'milestone' && bar.dataset.ganttIndex !== undefined ? parseInt(bar.dataset.ganttIndex, 10) : null, + todoIndex: bar.dataset.ganttType === 'todo' && bar.dataset.ganttIndex !== undefined ? parseInt(bar.dataset.ganttIndex, 10) : null + }; + + e.preventDefault(); + e.stopPropagation(); + } + + function onGanttMouseMove(e){ + if(!ganttDrag) return; + const totalDays = daysBetween(ganttDrag.rangeStart, ganttDrag.rangeEnd) + 1; + const pxPerDay = ganttDrag.timelineWidth / totalDays; + const dx = e.clientX - ganttDrag.startX; + const dayDelta = Math.round(dx / pxPerDay); + + if(Math.abs(dx) > 2) ganttDrag.moved = true; + + if(ganttDrag.type === 'milestone'){ + const newDate = addDays(ganttDrag.originalStart, dayDelta); + const offset = daysBetween(ganttDrag.rangeStart, newDate); + const left = (offset / totalDays * 100).toFixed(4) + '%'; + ganttDrag.bar.style.left = left; + // Zugehöriges Label (nächstes Geschwister-Element) mitbewegen + const label = ganttDrag.bar.nextElementSibling; + if(label && label.classList.contains('gantt-milestone-label')) label.style.left = left; + return; + } + + let newStart, newEnd; + if(ganttDrag.action === 'move'){ + newStart = addDays(ganttDrag.originalStart, dayDelta); + newEnd = addDays(ganttDrag.originalEnd, dayDelta); + } else if(ganttDrag.action === 'left'){ + newStart = addDays(ganttDrag.originalStart, dayDelta); + newEnd = ganttDrag.originalEnd; + if(newStart > newEnd) newStart = newEnd; + } else if(ganttDrag.action === 'right'){ + newStart = ganttDrag.originalStart; + newEnd = addDays(ganttDrag.originalEnd, dayDelta); + if(newEnd < newStart) newEnd = newStart; + } + + const barStart = newStart < ganttDrag.rangeStart ? ganttDrag.rangeStart : newStart; + const barEnd = newEnd > ganttDrag.rangeEnd ? ganttDrag.rangeEnd : newEnd; + const offset = daysBetween(ganttDrag.rangeStart, barStart); + const span = daysBetween(barStart, barEnd) + 1; + ganttDrag.bar.style.left = (offset / totalDays * 100).toFixed(4) + '%'; + ganttDrag.bar.style.width = (span / totalDays * 100).toFixed(4) + '%'; + } + + function onGanttMouseUp(e){ + if(!ganttDrag) return; + const drag = ganttDrag; + ganttDrag = null; + + if(!drag.moved && drag.type === 'milestone'){ + openMilestoneModal(drag.milestoneIndex); + return; + } + if(!drag.moved && drag.type === 'todo'){ + openTodoModal(drag.todoIndex); + return; + } + + const totalDays = daysBetween(drag.rangeStart, drag.rangeEnd) + 1; + const pxPerDay = drag.timelineWidth / totalDays; + const dx = e.clientX - drag.startX; + const dayDelta = Math.round(dx / pxPerDay); + if(dayDelta === 0){ + renderPlanGantt(); + return; + } + + let newStartStr, newEndStr; + let needsRefit = false; + + if(drag.type === 'milestone'){ + const newDate = addDays(drag.originalStart, dayDelta); + newStartStr = formatDateISO(newDate); + updateMilestoneDate(drag.projectId, drag.milestoneIndex, newStartStr); + if(newDate < drag.rangeStart || newDate > drag.rangeEnd) needsRefit = true; + } else { + let newStart, newEnd; + if(drag.action === 'move'){ + newStart = addDays(drag.originalStart, dayDelta); + newEnd = addDays(drag.originalEnd, dayDelta); + } else if(drag.action === 'left'){ + newStart = addDays(drag.originalStart, dayDelta); + newEnd = drag.originalEnd; + if(newStart > newEnd) newStart = newEnd; + } else { + newStart = drag.originalStart; + newEnd = addDays(drag.originalEnd, dayDelta); + if(newEnd < newStart) newEnd = newStart; + } + newStartStr = formatDateISO(newStart); + newEndStr = formatDateISO(newEnd); + if(newStart < drag.rangeStart || newEnd > drag.rangeEnd) needsRefit = true; + + if(drag.type === 'project'){ + updateProjectDates(drag.projectId, newStartStr, newEndStr); + } else if(drag.type === 'vacation'){ + updateVacationDates(drag.personId, drag.absenceId, newStartStr, newEndStr); + } else if(drag.type === 'todo'){ + updateTodoDates(drag.todoIndex, newStartStr, newEndStr); + } + } + + if(needsRefit) fitPlanGanttRange(); + else renderPlanGantt(); + } + + function updateTodoDates(idx, start, end){ + const plan = ensurePlanLocal(); + if(!plan.todos[idx]) return; + plan.todos[idx].start = start; + plan.todos[idx].end = end; + savePlan(); + } + + function onGanttDoubleClick(e){ + if(isLocked()) return; + const timeline = e.target.closest('.gantt-timeline'); + if(!timeline) return; + // Nicht auslösen, wenn auf einen Balken geklickt wurde + if(e.target.closest('[data-gantt-type]')) return; + const rect = timeline.getBoundingClientRect(); + const x = e.clientX - rect.left; + const rangeStart = parseDateISO(document.getElementById('planGanttStart').value); + const rangeEnd = parseDateISO(document.getElementById('planGanttEnd').value); + if(!rangeStart || !rangeEnd) return; + const totalDays = daysBetween(rangeStart, rangeEnd) + 1; + const dayOffset = Math.max(0, Math.min(totalDays - 1, Math.round(x / rect.width * totalDays))); + const date = formatDateISO(addDays(rangeStart, dayOffset)); + openTodoModal(null); + document.getElementById('todoEditStart').value = date; + document.getElementById('todoEditEnd').value = date; + } + + function updateProjectDates(projectId, start, end){ + const p = planWeek.projects.find(x => x.id === projectId); + if(!p) return; + ensurePlan(p); + p.plan.start = start; + p.plan.end = end; + savePlan(); + } + + function updateMilestoneDate(projectId, index, date){ + const p = planWeek.projects.find(x => x.id === projectId); + if(!p) return; + ensurePlan(p); + if(!Array.isArray(p.plan.milestones)) p.plan.milestones = []; + if(p.plan.milestones[index]){ + p.plan.milestones[index].date = date; + savePlan(); + // Optional: Abhängige TODOs automatisch nachziehen + const msId = 'm_' + p.plan.milestones[index].id; + const affected = (p.plan.todos || []).filter(t => Array.isArray(t.dependsOn) && t.dependsOn.includes(msId)); + if(affected.length > 0) autoScheduleTodos(); + } + } + + function updateVacationDates(personId, absenceId, start, end){ + const localPerson = (planWeek.people || []).find(p => p.id === personId); + if(localPerson && localPerson.absences){ + const a = localPerson.absences.find(x => x.id === absenceId); + if(a){ a.start = start; a.end = end; } + } + const globalPeople = db.globalPeople[department] || []; + const globalPerson = globalPeople.find(p => p.id === personId); + if(globalPerson && globalPerson.absences){ + const a = globalPerson.absences.find(x => x.id === absenceId); + if(a){ a.start = start; a.end = end; } + } + savePlan(); + saveGlobalPeople(); + } + + // ---------- Kritischer Pfad & Auto-Schedule ---------- + + // computeCriticalPath: liefert Array der TODO-IDs, die auf einem kritischen Pfad liegen + // (längste Kette von Vorgänger-Abhängigkeiten, End-to-Start) + window.computeCriticalPath = function(project){ + if(!project || !project.plan) return []; + const todos = (project.plan.todos || []).filter(t => t.start && t.end); + const milestones = (project.plan.milestones || []).filter(m => m.date); + if(todos.length === 0 && milestones.length === 0) return []; + + // Einheitliche Knoten: TODOs und Meilensteine (Dauer 1) + const nodes = todos.map(t => ({ type: 'todo', id: t.id, obj: t, start: parseDateISO(t.start), end: parseDateISO(t.end), duration: Math.max(1, daysBetween(parseDateISO(t.start), parseDateISO(t.end)) + 1) })); + milestones.forEach(m => { + const d = parseDateISO(m.date); + nodes.push({ type: 'milestone', id: 'm_' + m.id, obj: m, start: d, end: d, duration: 1 }); + }); + const nodeMap = new Map(nodes.map(n => [n.id, n])); + + function depsOf(n){ + return Array.isArray(n.obj.dependsOn) ? n.obj.dependsOn : []; + } + + // Frühester Start (ES) und frühestes Ende (EF) berechnen. + // visiting-Set schützt vor Endlos-Rekursion bei zyklischen Abhängigkeiten. + const es = {}, ef = {}; + const esVisiting = new Set(); + function computeES(n){ + if(es[n.id] !== undefined) return es[n.id]; + if(esVisiting.has(n.id)){ es[n.id] = null; ef[n.id] = null; return null; } // Zyklus + if(!n.start || !n.end){ es[n.id] = null; ef[n.id] = null; return null; } + esVisiting.add(n.id); + const deps = depsOf(n); + let maxEF = null; + deps.forEach(depId => { + const dep = nodeMap.get(depId); + if(!dep) return; + const depStart = computeES(dep); + if(!depStart) return; + const depEnd = addDays(depStart, dep.duration - 1); + if(maxEF === null || depEnd > maxEF) maxEF = depEnd; + }); + esVisiting.delete(n.id); + es[n.id] = maxEF === null ? n.start : addDays(maxEF, 1); + ef[n.id] = addDays(es[n.id], n.duration - 1); + return es[n.id]; + } + nodes.forEach(n => computeES(n)); + + const validNodes = nodes.filter(n => es[n.id]); + if(validNodes.length === 0) return []; + const maxEF = validNodes.reduce((max, n) => { const d = ef[n.id]; return !max || d > max ? d : max; }, null); + + // Spätestes Ende (LF) und spätester Start (LS) rückwärts berechnen. + // Wichtig: LF eines Knotens ist der Tag VOR dem spätesten Start (LS) + // seines frühesten Nachfolgers – nicht vor dessen LF. + const lf = {}, ls = {}; + const lfVisiting = new Set(); + function computeLF(n){ + if(lf[n.id] !== undefined) return lf[n.id]; + if(lfVisiting.has(n.id)){ lf[n.id] = null; ls[n.id] = null; return null; } // Zyklus + if(!n.start || !n.end){ lf[n.id] = null; ls[n.id] = null; return null; } + lfVisiting.add(n.id); + const successors = validNodes.filter(succ => depsOf(succ).includes(n.id)); + let minLF = null; + successors.forEach(succ => { + if(!computeLF(succ)) return; + const succLS = ls[succ.id]; + if(!succLS) return; + const candidate = addDays(succLS, -1); + if(minLF === null || candidate < minLF) minLF = candidate; + }); + lfVisiting.delete(n.id); + lf[n.id] = minLF === null ? maxEF : minLF; + ls[n.id] = addDays(lf[n.id], -(n.duration - 1)); + return lf[n.id]; + } + validNodes.forEach(n => computeLF(n)); + + return validNodes.filter(n => n.type === 'todo' && es[n.id] && ls[n.id] && daysBetween(es[n.id], ls[n.id]) === 0).map(n => n.id); + }; + + window.toggleCriticalPath = function(){ + criticalPathActive = !criticalPathActive; + const btn = document.getElementById('criticalPathBtn'); + if(btn) btn.classList.toggle('active', criticalPathActive); + renderPlanGantt(); + if(criticalPathActive){ + const path = computeCriticalPath(planProject); + if(path.length === 0){ + showToast('Kein kritischer Pfad ermittelt (zu wenig Aufgaben oder Abhängigkeiten).'); + } else { + showToast(path.length + ' Aufgabe(n) auf dem kritischen Pfad hervorgehoben.'); + } + } + }; + + window.autoScheduleTodos = function(){ + if(isLocked()) return; + const plan = ensurePlanLocal(); + if(!Array.isArray(plan.todos) || plan.todos.length === 0) return; + const todos = plan.todos.filter(t => t.start && t.end); + const todoMap = new Map(todos.map(t => [t.id, t])); + const milestones = Array.isArray(plan.milestones) ? plan.milestones.filter(m => m.date) : []; + const milestoneMap = new Map(milestones.map(m => ['m_' + m.id, m])); + + function duration(t){ const s = parseDateISO(t.start), e = parseDateISO(t.end); return s && e ? Math.max(1, daysBetween(s, e) + 1) : 1; } + + // processed: bereits fertig eingeplante Knoten + // visiting: aktuell im Rekursionspfad -> schützt vor Endlos-Rekursion bei Zyklen + // moved: Knoten, deren Datum sich tatsächlich geändert hat + const processed = new Set(); + const visiting = new Set(); + const moved = new Set(); + let hasCycle = false; + + function scheduleTodo(t){ + if(processed.has(t.id)) return; + if(visiting.has(t.id)){ hasCycle = true; return; } + const tStart = parseDateISO(t.start); + if(!tStart){ processed.add(t.id); return; } + visiting.add(t.id); + const deps = Array.isArray(t.dependsOn) ? t.dependsOn : []; + let earliest = tStart; + deps.forEach(depId => { + let depEnd = null; + const depTodo = todoMap.get(depId); + if(depTodo){ + scheduleTodo(depTodo); + depEnd = parseDateISO(depTodo.end); + } else { + const depMs = milestoneMap.get(depId); + if(depMs) depEnd = parseDateISO(depMs.date); + } + if(!depEnd) return; + const candidate = addDays(depEnd, 1); + if(candidate > earliest) earliest = candidate; + }); + visiting.delete(t.id); + const dur = duration(t); + const newStart = formatDateISO(earliest); + const newEnd = formatDateISO(addDays(earliest, dur - 1)); + if(newStart !== t.start || newEnd !== t.end){ + t.start = newStart; + t.end = newEnd; + moved.add(t.id); + } + processed.add(t.id); + } + + function scheduleMilestone(m){ + const mId = 'm_' + m.id; + if(processed.has(mId)) return; + if(visiting.has(mId)){ hasCycle = true; return; } + const deps = Array.isArray(m.dependsOn) ? m.dependsOn : []; + let earliest = parseDateISO(m.date); + if(!earliest){ processed.add(mId); return; } + visiting.add(mId); + deps.forEach(depId => { + let depEnd = null; + const depTodo = todoMap.get(depId); + if(depTodo){ + scheduleTodo(depTodo); + depEnd = parseDateISO(depTodo.end); + } else { + const depMs = milestoneMap.get(depId); + if(depMs && depMs.id !== m.id){ + scheduleMilestone(depMs); + depEnd = parseDateISO(depMs.date); + } + } + if(!depEnd) return; + const candidate = addDays(depEnd, 1); + if(candidate > earliest) earliest = candidate; + }); + visiting.delete(mId); + const newDate = formatDateISO(earliest); + if(newDate !== m.date){ + m.date = newDate; + moved.add(mId); + } + processed.add(mId); + } + + todos.forEach(t => scheduleTodo(t)); + milestones.forEach(m => scheduleMilestone(m)); + if(moved.size > 0){ + savePlan(); + renderPlanGantt(); + showToast(moved.size + ' Element(e) automatisch verschoben.' + (hasCycle ? ' Achtung: zyklische Abhängigkeit gefunden!' : '')); + } else if(hasCycle){ + showToast('Achtung: zyklische Abhängigkeit gefunden – bitte Vorgänger prüfen.'); + } else { + showToast('Keine Änderungen nötig – alle Termine passen zu den Abhängigkeiten.'); + } + }; + + // ---------- Ressourcen-Auslastung ---------- + + window.renderResourceLoad = function(){ + const container = document.getElementById('resourceLoadContainer'); + if(!container || !planProject) return; + const plan = ensurePlanLocal(); + const todos = Array.isArray(plan.todos) ? plan.todos.filter(t => t.start && t.end) : []; + const assignees = projectAssignees(planProject, planWeek); + if(assignees.length === 0){ + container.innerHTML = ''; + return; + } + + const loads = {}; + assignees.forEach(a => { + if(!loads[a.person.id]){ + loads[a.person.id] = { person: a.person, roles: [], days: 0, todos: [] }; + } + 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); + }); + }); + + const maxDays = Math.max(1, Object.values(loads).reduce((m, l) => Math.max(m, l.days), 0)); + + let html = '

Ressourcen-Auslastung (Aufgabentage, ohne Wochenenden)

'; + html += '

'; + Object.values(loads).forEach(l => { + const pct = Math.round(l.days / maxDays * 100); + const absCount = countPersonAbsences(l.person.id); + const absBadge = absCount > 0 ? `

🏖 ${absCount} Abwesenheit(en)

` : ''; + + let todoListHtml; + if(l.todos.length === 0){ + todoListHtml = '

keine TODOs

'; + } else { + todoListHtml = l.todos.slice(0,3).map(t => `

${esc(t)}

`).join(''); + if(l.todos.length > 3){ + todoListHtml += '

+' + (l.todos.length - 3) + ' weitere

'; + } + } + + html += `

${esc(l.person.name)} (${esc(l.roles.join(' / '))})

${l.days}

${todoListHtml}

+ ${absBadge} +

`; + }); + html += '

'; + container.innerHTML = html; + }; + + // ---------- Abwesenheits-Modal (Urlaube der Projektbeteiligten) ---------- + + let currentAbsencePersonId = null; + + // Person in der globalen Liste finden (dort werden Abwesenheiten gepflegt) + function findGlobalPerson(personId){ + return (db.globalPeople[department] || []).find(p => p.id === personId) || null; + } + + function countPersonAbsences(personId){ + const p = findGlobalPerson(personId); + return p && Array.isArray(p.absences) ? p.absences.length : 0; + } + + window.openAbsenceModal = function(personId){ + const person = findGlobalPerson(personId); + if(!person) return; + currentAbsencePersonId = personId; + document.getElementById('absenceModalTitle').textContent = 'Abwesenheiten – ' + (person.fullName || person.name); + // Formularfelder zurücksetzen + const startInput = document.getElementById('absenceEditStart'); + const endInput = document.getElementById('absenceEditEnd'); + const rangeDisplay = document.getElementById('absenceEditRange'); + if(startInput) startInput.value = ''; + if(endInput) endInput.value = ''; + if(rangeDisplay) rangeDisplay.value = ''; + renderAbsenceModalList(); + document.getElementById('absenceModal').style.display = 'flex'; + }; + + window.closeAbsenceModal = function(){ + document.getElementById('absenceModal').style.display = 'none'; + currentAbsencePersonId = null; + }; + + function renderAbsenceModalList(){ + const listDiv = document.getElementById('absenceModalList'); + const person = findGlobalPerson(currentAbsencePersonId); + if(!listDiv || !person) return; + const absences = Array.isArray(person.absences) ? person.absences : []; + const locked = isLocked(); + if(absences.length === 0){ + listDiv.innerHTML = 'Keine Abwesenheiten eingetragen.'; + } else { + listDiv.innerHTML = '

' + absences.map(a => ` +

+ ${esc(a.type || 'Abwesenheit')}: ${formatDateDE(parseDateISO(a.start))}–${formatDateDE(parseDateISO(a.end))} + ${a.note ? `${esc(a.note)}` : ''} + ${locked ? '' : ``} +

`).join('') + '

'; + } + const form = document.getElementById('absenceModalForm'); + if(form) form.style.display = locked ? 'none' : ''; + } + + window.addPlanAbsence = function(){ + if(isLocked()) return; + const person = findGlobalPerson(currentAbsencePersonId); + if(!person) return; + const start = document.getElementById('absenceEditStart').value; + const end = document.getElementById('absenceEditEnd').value; + const type = document.getElementById('absenceEditType').value; + const note = document.getElementById('absenceEditNote').value.trim(); + if(!start || !end){ alert('Bitte Start- und Enddatum angeben.'); return; } + if(parseDateISO(end) < parseDateISO(start)){ alert('Enddatum liegt vor Startdatum.'); return; } + if(!Array.isArray(person.absences)) person.absences = []; + const absence = { id: uid(), start, end, type, note }; + person.absences.push(absence); + person.absences.sort((a,b) => parseDateISO(a.start) - parseDateISO(b.start)); + // Auch die Sitzungs-lokale Kopie aktualisieren, damit die Anzeige konsistent bleibt + const localPerson = (planWeek.people || []).find(p => p.id === currentAbsencePersonId); + if(localPerson){ + if(!Array.isArray(localPerson.absences)) localPerson.absences = []; + localPerson.absences.push({ ...absence }); + localPerson.absences.sort((a,b) => parseDateISO(a.start) - parseDateISO(b.start)); + } + saveGlobalPeople(); + savePlan(); + document.getElementById('absenceEditStart').value = ''; + document.getElementById('absenceEditEnd').value = ''; + const rangeDisplay = document.getElementById('absenceEditRange'); + if(rangeDisplay) rangeDisplay.value = ''; + document.getElementById('absenceEditNote').value = ''; + renderAbsenceModalList(); + renderPlanGantt(); + }; + + window.deletePlanAbsence = function(absenceId){ + if(isLocked()) return; + const person = findGlobalPerson(currentAbsencePersonId); + if(!person || !Array.isArray(person.absences)) return; + person.absences = person.absences.filter(a => a.id !== absenceId); + const localPerson = (planWeek.people || []).find(p => p.id === currentAbsencePersonId); + if(localPerson && Array.isArray(localPerson.absences)){ + localPerson.absences = localPerson.absences.filter(a => a.id !== absenceId); + } + saveGlobalPeople(); + savePlan(); + renderAbsenceModalList(); + renderPlanGantt(); + }; + + // Toast-Benachrichtigung + let toastTimer = null; + function showToast(message){ + let toast = document.getElementById('planToast'); + if(!toast){ + toast = document.createElement('div'); + toast.id = 'planToast'; + toast.className = 'plan-toast'; + document.body.appendChild(toast); + } + toast.textContent = message; + toast.classList.add('show'); + // Vorherigen Timer abbrechen, sonst verschwindet ein neuer Toast zu früh + if(toastTimer) clearTimeout(toastTimer); + toastTimer = setTimeout(() => { toast.classList.remove('show'); toastTimer = null; }, 2500); + } + + // Abhängigkeitslinien hängen von Pixel-Positionen ab -> bei Fenstergröße neu zeichnen + let resizeTimer = null; + window.addEventListener('resize', () => { + if(resizeTimer) clearTimeout(resizeTimer); + resizeTimer = setTimeout(() => renderGanttDependencies(), 150); + }); + + document.addEventListener('DOMContentLoaded', init); + document.addEventListener('DOMContentLoaded', initGanttDrag); + document.addEventListener('DOMContentLoaded', initGanttTodoDrag); +})(); diff --git a/public/styles.css b/public/styles.css new file mode 100644 index 0000000..8cde982 --- /dev/null +++ b/public/styles.css @@ -0,0 +1,2115 @@ +/* === Design-Tokens === */ +:root { + --accent: #0071e3; + --accent-hover: #0077ed; + --accent-active: #006ad1; + --accent-soft: #e8f1fd; + + --text: #1d1d1f; + --text-muted: #6e6e73; + --text-subtle: #86868b; + + --bg: #f5f5f7; + --surface: #ffffff; + --surface-alt: #fafafc; + --surface-sunk: #f0f0f2; + + --line: #d2d2d7; + --line-soft: #e8e8ed; + + --green: #248a3d; + --amber: #b25000; + --red: #d70015; + + --r-sm: 6px; + --r-md: 8px; + --r-lg: 12px; + --r-xl: 16px; + --r-pill: 980px; + + --sh-1: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06); + --sh-2: 0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04); + --sh-3: 0 8px 28px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06); + + --ease: cubic-bezier(.4, 0, .2, 1); +} + +/* === Basis & Reset === */ +* { box-sizing: border-box; } + +body { + font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', + Roboto, Helvetica, Arial, sans-serif; + margin: 0; + background: var(--bg); + color: var(--text); + font-size: 13px; + line-height: 1.45; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + letter-spacing: -0.005em; +} + +.container { padding: 20px 24px; } + +/* === Kopfzeile & Navigation === */ +header { + background: rgba(255,255,255,.82); + -webkit-backdrop-filter: saturate(180%) blur(20px); + backdrop-filter: saturate(180%) blur(20px); + border-bottom: 1px solid var(--line-soft); + color: var(--text); + padding: 10px 24px; +} + +.header-bar { + position: relative; + display: flex; + align-items: center; + gap: 16px; + min-height: 48px; +} + +header h1 { + font-size: 19px; + font-weight: 600; + margin: 0; + letter-spacing: -0.02em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding-right: 140px; +} + +.header-logo { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + height: 44px; + width: auto; + max-width: 120px; + object-fit: contain; + pointer-events: none; +} + +.header-toggle { + position: relative; + z-index: 10; + padding: 6px 10px; + min-width: 36px; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.header-toggle-icon { font-size: 16px; } + +@media (max-width: 520px) { + .header-logo { height: 36px; max-width: 80px; } + header h1 { font-size: 16px; padding-right: 100px; } +} + +/* === Seiten-Menü (links ausfahrend) === */ +.side-menu { + position: fixed; + top: 0; + left: 0; + bottom: 0; + width: 280px; + max-width: 80vw; + background: var(--surface); + border-right: 1px solid var(--line-soft); + box-shadow: var(--sh-3); + z-index: 200; + transform: translateX(-100%); + transition: transform .3s var(--ease); + display: flex; + flex-direction: column; +} + +.side-menu.open { + transform: translateX(0); +} + +.side-menu-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 14px 18px; + border-bottom: 1px solid var(--line-soft); + font-weight: 600; + font-size: 16px; +} + +.side-menu-header-actions { + display: flex; + align-items: center; + gap: 8px; +} + +.theme-toggle-circle { + width: 34px; + height: 34px; + border-radius: 50%; + padding: 0; + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--surface-sunk); + border: 1px solid var(--line-soft); + color: var(--text); + cursor: pointer; + transition: background .2s var(--ease), transform .1s var(--ease); +} + +.theme-toggle-circle:hover { background: var(--line-soft); } +.theme-toggle-circle:active { transform: scale(.95); } + +.side-menu-content { + padding: 16px; + display: flex; + flex-direction: column; + gap: 18px; + overflow-y: auto; +} + +.menu-section { + display: flex; + flex-direction: column; + gap: 8px; +} + +.menu-label { + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: .04em; + color: var(--text-muted); + margin-bottom: 2px; +} + +.menu-section button { width: 100%; justify-content: center; } + +.menu-divider { + border: none; + border-top: 1px solid var(--line-soft); + margin: 0; +} + +/* === Show Mode === */ +.show-mode-overlay { + position: fixed; + inset: 0; + background: var(--bg); + z-index: 1000; + display: flex; + flex-direction: column; +} + +.show-mode-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 14px 24px; + background: var(--surface); + border-bottom: 1px solid var(--line-soft); + font-size: 18px; + font-weight: 600; +} + +.show-mode-content { + flex: 1; + overflow: auto; + padding: 24px; +} + +.show-mode-content .container { + padding: 0; + max-width: 1400px; + margin: 0 auto; +} + +.show-mode-content .section-title { + margin-top: 0; +} + +.show-mode-paused { + position: fixed; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + background: var(--surface); + border: 1px solid var(--line-soft); + padding: 12px 24px; + border-radius: var(--r-pill); + box-shadow: var(--sh-3); + font-weight: 600; + z-index: 1001; + pointer-events: none; +} + +/* Kompakte Darstellung im Show Mode */ +.show-mode-content { + font-size: 12px; +} + +.show-mode-content .table-wrap { + max-height: none; + overflow: visible; +} + +.show-mode-content table { + font-size: 10px !important; +} + +.show-mode-content th, +.show-mode-content td { + padding: 3px 4px !important; +} + +.show-mode-content thead tr:nth-child(1) th, +.show-mode-content thead tr:nth-child(2) th { + position: static; +} + +.show-mode-content th.rot { + height: 60px !important; +} + +.show-mode-content .proj-name { + min-width: 120px !important; +} + +.show-mode-content .status { + min-width: 160px !important; +} + +.show-mode-content .status-edit { + min-height: 24px !important; + padding: 3px 5px !important; + font-size: 10px !important; +} + +.show-mode-content .person-cell { + width: 22px !important; +} + +.show-mode-content .lph-cell { + width: 38px !important; +} + +.show-mode-content .lph-cell input { + width: 30px !important; +} + +.show-mode-content .bar { + height: 3px !important; + margin-top: 2px !important; +} + +.show-mode-content .group-header td { + padding: 4px 6px !important; +} + +.show-mode-content #boardLegend { + display: none; +} + +.show-mode-content .load-grid { + gap: 12px; +} + +.show-mode-content .load-row { + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; + gap: 10px !important; +} + +.show-mode-content .load-card { + padding: 10px 12px !important; +} + +.show-mode-content .load-card h3 { + font-size: 12px !important; +} + +.show-mode-content .load-num { + font-size: 22px !important; +} + +.show-mode-content .load-detail { + font-size: 10px !important; + margin-top: 6px !important; +} + +.show-mode-loading { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + font-size: 24px; + color: var(--text-muted); +} + +/* Show Mode: Auslastungs-Steuerelemente und Überschrift ausblenden */ +.show-mode-overlay .show-mode-content #load .section-title, +.show-mode-overlay .show-mode-content #load .toolbar { + display: none !important; +} + +/* Show Mode: Bearbeitung deaktivieren */ +.show-mode-content .person-cell, +.show-mode-content .lph-cell input, +.show-mode-content .status-edit { + pointer-events: none !important; + cursor: default !important; +} + +.show-mode-content .del-proj { + pointer-events: none !important; +} + +.show-mode-content input[type=text].edit-name, +.show-mode-content input[type=checkbox] { + pointer-events: none !important; +} + +.show-mode-content button { + pointer-events: none !important; +} + +.side-menu-backdrop { + position: fixed; + inset: 0; + background: rgba(0,0,0,.35); + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); + z-index: 150; + opacity: 0; + visibility: hidden; + transition: opacity .3s var(--ease), visibility .3s var(--ease); +} + +.side-menu.open ~ .side-menu-backdrop { + opacity: 1; + visibility: visible; +} + +.toolbar { + display: flex; + gap: 8px; + flex-wrap: wrap; + align-items: center; +} + +button.active { + background: var(--accent); + color: #fff; + border-color: var(--accent); +} + +.week-date { + color: var(--text-muted); + font-size: 13px; + margin-left: 4px; +} + +/* Abteilungs-Tabs: Segmented Control */ +.dept-tabs { + position: relative; + display: flex; + align-items: stretch; + justify-content: center; + min-height: 54px; + background: var(--bg); + padding: 0; +} + +.menu-corner-btn { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 54px; + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--bg); + border: none; + border-right: 1px solid var(--line-soft); + border-radius: 0; + box-shadow: none; + color: var(--text); + cursor: pointer; + font-size: 18px; + transition: background .2s var(--ease); +} + +.menu-corner-btn:hover { background: var(--surface-sunk); } +.menu-corner-btn:active { transform: none; } + +.dept-tabs-center { + display: flex; + align-items: center; + gap: 2px; + flex-wrap: wrap; + padding: 12px 24px 0 24px; +} + +.dept-tab { + background: transparent; + color: var(--text-muted); + padding: 10px 22px; + cursor: pointer; + border: none; + border-radius: var(--r-md); + font-size: 15px; + font-weight: 500; + transition: background .2s var(--ease), color .2s var(--ease); +} + +.dept-tab:hover { + background: rgba(0,0,0,.045); + color: var(--text); +} + +.dept-tab.active { + background: var(--surface); + color: var(--text); + font-weight: 600; + box-shadow: var(--sh-1); +} + +/* Unter-Tabs */ +.tabs { + display: flex; + gap: 2px; + background: var(--bg); + padding: 6px 24px 0 24px; + flex-wrap: wrap; + border-bottom: 1px solid var(--line-soft); +} + +.tab { + background: transparent; + color: var(--text-muted); + padding: 8px 14px; + cursor: pointer; + border: none; + border-radius: var(--r-sm) var(--r-sm) 0 0; + font-size: 13px; + font-weight: 500; + transition: color .2s var(--ease), box-shadow .2s var(--ease); +} + +.tab:hover { color: var(--text); } + +.tab.active { + background: transparent; + color: var(--accent); + font-weight: 600; + box-shadow: inset 0 -2px 0 var(--accent); +} + +/* === Buttons & Formulare === */ +button { + cursor: pointer; + border: none; + border-radius: var(--r-pill); + padding: 7px 16px; + font-size: 13px; + font-weight: 500; + font-family: inherit; + background: var(--accent); + color: #fff; + letter-spacing: -0.01em; + transition: background .2s var(--ease), transform .1s var(--ease), + box-shadow .2s var(--ease); +} + +button:hover { background: var(--accent-hover); } +button:active { background: var(--accent-active); transform: scale(.97); } + +button:focus-visible { + outline: none; + box-shadow: 0 0 0 3px rgba(0,113,227,.35); +} + +button.secondary { + background: rgba(0,0,0,.06); + color: var(--text); +} +button.secondary:hover { background: rgba(0,0,0,.10); } +button.secondary:active { background: rgba(0,0,0,.14); } + +button.danger { background: var(--red); } +button.danger:hover { background: #e8112d; } +button.danger:active { background: #b8000f; } + +button.small { + padding: 3px 10px; + font-size: 11px; +} + +select, +input[type=text], +input[type=date] { + padding: 7px 10px; + border: 1px solid var(--line); + border-radius: var(--r-md); + font-size: 13px; + font-family: inherit; + color: var(--text); + background: var(--surface); + transition: border-color .15s var(--ease), box-shadow .15s var(--ease); +} + +select:focus, +input[type=text]:focus, +input[type=date]:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(0,113,227,.18); +} + +select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding-right: 28px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236e6e73' d='M0 0h10L5 6z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 10px center; + background-color: var(--surface); +} + +.role-checkboxes { + display: flex; + gap: 12px; + flex-wrap: wrap; + align-items: center; +} + +.role-checkboxes label { + display: flex; + align-items: center; + gap: 5px; + font-size: 12px; + color: var(--text-muted); +} + +input[type=checkbox] { accent-color: var(--accent); } + +/* === Tabellen & Matrix === */ +table { + border-collapse: separate; + border-spacing: 0; + width: 100%; + background: var(--surface); + font-size: 12px; +} + +th, +td { + border: 1px solid var(--line-soft); + padding: 5px 7px; + text-align: center; + vertical-align: middle; +} + +thead tr:nth-child(1) th { + background: var(--surface-sunk); + color: var(--text); + font-weight: 600; + border: 1px solid var(--line); + position: sticky; + top: 0; + z-index: 10; +} + +thead tr:nth-child(2) th { + background: var(--surface-alt); + color: var(--text); + font-weight: 500; + border: 1px solid var(--line); + position: sticky; + top: 0; /* Wird von adjustStickyOffsets() dynamisch überschrieben */ + z-index: 6; +} + +th.rot { + background: var(--surface); + writing-mode: vertical-rl; + transform: rotate(180deg); + height: 90px; + padding: 4px 2px; + font-weight: 500; +} + +td.left { + text-align: left; + min-width: 80px; +} + +tr:nth-child(even) td { background: var(--surface-alt); } + +.proj-name { + font-weight: 600; + min-width: 160px; + letter-spacing: -0.01em; +} + +.group-header td { + background: var(--surface-sunk) !important; + font-weight: 600; + text-align: left; + color: var(--text); + letter-spacing: -0.01em; +} + +/* === Status-Felder in der Projektzeile === */ +.status { + min-width: 240px; + position: relative; + vertical-align: top; +} + +.status-edit { + width: 100%; + min-height: 34px; + border: 1px solid var(--line-soft); + border-radius: var(--r-sm); + padding: 5px 7px; + font-size: 11px; + font-family: inherit; + line-height: 1.4; + color: var(--text); + background: var(--surface); + text-align: left; + white-space: pre-wrap; + word-break: break-word; + transition: border-color .15s var(--ease), box-shadow .15s var(--ease); +} + +.status-edit:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(0,113,227,.18); +} + +.status-edit.status-new { color: var(--green); } +.status-edit.status-duplicated { color: var(--text); } +.status-edit p { margin: 0 0 4px; } +.status-edit p:last-child { margin-bottom: 0; } +.status-edit b, +.status-edit strong { font-weight: 600; } + +.status-toolbar { + display: none; + position: absolute; + bottom: 100%; + left: 0; + margin-bottom: 4px; + background: rgba(255,255,255,.9); + -webkit-backdrop-filter: saturate(180%) blur(16px); + backdrop-filter: saturate(180%) blur(16px); + border: 1px solid var(--line-soft); + border-radius: var(--r-md); + padding: 3px; + gap: 2px; + box-shadow: var(--sh-2); + z-index: 10; +} + +.status:focus-within .status-toolbar { display: flex; } + +.status-toolbar button { + padding: 3px 7px; + font-size: 11px; + line-height: 1.2; + min-width: 24px; + border-radius: var(--r-sm); + background: transparent; + color: var(--text); + border: none; +} + +.status-toolbar button:hover { background: rgba(0,0,0,.06); } +.status-toolbar button:active { background: rgba(0,0,0,.10); transform: none; } + +.status-toolbar button.color-red { color: var(--red); } +.status-toolbar button.color-green { color: var(--green); } +.status-toolbar button.color-blue { color: var(--accent); } +.status-toolbar button.color-black { + color: var(--text); + font-weight: 600; +} + +/* === Personen-Zuweisungszellen === */ +.person-cell { + cursor: pointer; + user-select: none; + width: 26px; + transition: background .12s var(--ease); +} + +.person-cell.on { + background: var(--green) !important; + color: #fff; + font-weight: 600; +} + +.person-cell.optional { + background: #d18b00 !important; + color: #fff; + font-weight: 600; +} + +.locked-cell { + cursor: not-allowed !important; + background: var(--surface-sunk) !important; + opacity: .65; +} + +.locked-cell input { + background: var(--surface-sunk) !important; + cursor: not-allowed !important; + border-color: var(--line-soft) !important; +} + +/* Gesperrte Zellen immer grau, auch wenn X/(X) gesetzt ist */ +.person-cell.locked-cell.on, +.person-cell.locked-cell.optional { + background: var(--surface-sunk) !important; + color: var(--text-muted) !important; +} + +/* === Rollenfarben === */ +.person-cell.role-planung { + background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)), + rgb(212, 245, 224); + background-attachment: fixed; +} + +.person-cell.role-projektleitung { + background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)), + rgb(255, 219, 219); + background-attachment: fixed; +} + +.person-cell.role-bauüberwachung { + background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)), + rgb(203, 238, 255); + background-attachment: fixed; +} + +.role-planung, +.role-planung.rot { + background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)), + rgb(212, 245, 224); + background-attachment: fixed; +} + +.role-projektleitung, +.role-projektleitung.rot { + background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)), + rgb(255, 219, 219); + background-attachment: fixed; +} + +.role-bauüberwachung, +.role-bauüberwachung.rot { + background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)), + rgb(203, 238, 255); + background-attachment: fixed; +} + +th.role-planung, +th.role-projektleitung, +th.role-bauüberwachung { color: var(--text); } + +/* === LPH / Balken / Überschriften === */ +.lph-cell { width: 50px; } + +.lph-cell input { + width: 38px; + border: 1px solid var(--line-soft); + border-radius: var(--r-sm); + padding: 3px; + text-align: center; + font-size: 11px; + font-family: inherit; +} + +.bar { + height: 5px; + border-radius: var(--r-pill); + background: var(--line-soft); + margin-top: 4px; + overflow: hidden; +} + +.bar > div { + height: 100%; + background: var(--green); + border-radius: var(--r-pill); + transition: width .3s var(--ease); +} + +.section-title { + font-size: 17px; + font-weight: 600; + margin: 24px 0 10px; + color: var(--text); + letter-spacing: -0.02em; +} + +/* === Lade-/Auswertungsübersicht === */ +.load-grid { + display: flex; + flex-direction: column; + gap: 20px; + width: 100%; +} + +.load-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 14px; + align-items: start; + width: 100%; +} + +.load-row-title { + grid-column: 1 / -1; + width: 100%; + font-size: 20px; + font-weight: 600; + margin: 0 0 2px 0; + padding-top: 4px; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: .04em; + font-size: 14px; +} + +.load-card { + background: var(--surface); + border: 1px solid var(--line-soft); + border-radius: var(--r-lg); + padding: 16px 18px; + min-width: 0; + width: 100%; + box-shadow: var(--sh-1); + transition: box-shadow .2s var(--ease), transform .2s var(--ease); +} + +.load-card:hover { + box-shadow: var(--sh-2); + transform: translateY(-1px); +} + +.load-card h3 { + margin: 0 0 4px; + font-size: 14px; + font-weight: 600; + letter-spacing: -0.01em; +} + +.load-num { + font-size: 30px; + font-weight: 600; + color: var(--text); + letter-spacing: -0.03em; + line-height: 1.1; +} + +.load-detail { + font-size: 11px; + color: var(--text-muted); + margin-top: 10px; +} + +.load-detail div { + display: flex; + justify-content: space-between; + padding: 4px 0; + border-bottom: 1px solid var(--line-soft); +} + +.load-detail div:last-child { border-bottom: none; } + +/* === Modal, Form-Elemente & Listen === */ +.modal-bg { + position: fixed; + inset: 0; + background: rgba(0,0,0,.35); + -webkit-backdrop-filter: blur(6px); + backdrop-filter: blur(6px); + display: none; + align-items: center; + justify-content: center; + z-index: 100; +} + +.modal { + background: var(--surface); + padding: 28px; + border-radius: var(--r-xl); + max-width: 500px; + width: 90%; + max-height: 85vh; + overflow: auto; + box-shadow: var(--sh-3); +} + +.modal h2 { + margin-top: 0; + font-size: 20px; + font-weight: 600; + letter-spacing: -0.02em; +} + +.form-row { + margin-bottom: 14px; + display: flex; + flex-direction: column; + gap: 5px; +} + +.form-row label { + font-weight: 500; + font-size: 12px; + color: var(--text-muted); +} + +.person-list-item, +.person-card { + display: flex; + flex-direction: column; + border-bottom: 1px solid var(--line-soft); + width: 100%; +} + +.person-list-item { + align-items: center; + gap: 8px; + padding: 8px 4px; + overflow-x: auto; + flex-direction: row; +} + +.person-card:last-child, +.person-list-item:last-child { border-bottom: none; } + +.person-header { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 4px; + cursor: pointer; + overflow-x: auto; +} + +.person-header:hover { background: var(--surface-sunk); } + +.person-toggle { + flex: 0 0 auto; + font-size: 11px; + color: var(--text-subtle); + width: 14px; + text-align: center; +} + +.person-list-item span.drag-handle, +.person-header span.drag-handle { + flex: 0 0 auto; + color: var(--text-subtle); + cursor: grab; +} + +.person-list-item input[type=text], +.person-header input[type=text] { flex: 0 0 auto; max-width: 25vw; } +.person-list-item input[type=text]:nth-of-type(1), +.person-header input[type=text]:nth-of-type(1) { max-width: 80px; } +.person-list-item input[type=text]:nth-of-type(2), +.person-header input[type=text]:nth-of-type(2) { max-width: 180px; } + +.person-list-item select, +.person-header select, +.person-header .role-checkboxes { + flex: 0 0 auto; + min-width: 110px; +} + +.person-list-item button, +.person-header button { + flex: 0 0 auto; + margin-left: auto; + white-space: nowrap; +} + +/* === Hinweise & Hilfsklassen === */ +.legend { + font-size: 11px; + color: var(--text-muted); + margin: 10px 0; + display: flex; + gap: 16px; + flex-wrap: wrap; +} + +.legend span { + display: inline-flex; + align-items: center; + gap: 5px; +} + +.legend-list { + display: flex; + flex-wrap: wrap; + gap: 10px; + padding-bottom: 4px; +} + +.legend-item { + flex: 0 0 auto; + padding: 6px 10px; + background: var(--surface); + border: 1px solid var(--line-soft); + border-radius: var(--r-sm); + color: var(--text); + user-select: none; + transition: opacity .2s var(--ease), background .2s var(--ease); + cursor: pointer; + white-space: nowrap; +} + +.legend-item:hover { opacity: .8; } + +.legend-item.present { + background: var(--green); + color: #fff; + border-color: transparent; +} + +.legend-item span { + font-weight: 600; + color: inherit; +} + +.legend-item.locked-legend-item { opacity: .7; } + +#boardLegend { + background: var(--surface); + border: 1px solid var(--line-soft); +} + +.swatch { + width: 12px; + height: 12px; + border-radius: 4px; + display: inline-block; + box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); +} + +.table-wrap { + overflow: auto; + max-height: 75vh; + border-radius: var(--r-lg); + border: 1px solid var(--line-soft); + box-shadow: var(--sh-1); + background: var(--surface); +} + +.hint { + color: var(--text-subtle); + font-size: 12px; + margin: 8px 0; +} + +.del-proj { + color: var(--red); + cursor: pointer; + font-weight: 600; +} + +.lock-notice button { margin-left: 12px; } + +.locked-legend-item { + opacity: .7; + filter: grayscale(.35); +} + +input[type=text].edit-name { + border: 1px solid transparent; + background: transparent; + font-weight: 600; + width: 100%; + font-size: 12px; + padding: 3px 5px; + border-radius: var(--r-sm); +} + +input[type=text].edit-name:hover { background: rgba(0,0,0,.03); } + +input[type=text].edit-name:focus { + background: var(--surface); + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(0,113,227,.18); + outline: none; +} + +/* === Scrollbars (WebKit) === */ +::-webkit-scrollbar { width: 10px; height: 10px; } +::-webkit-scrollbar-track { background: transparent; } +::-webkit-scrollbar-thumb { + background: rgba(0,0,0,.2); + border-radius: var(--r-pill); + border: 2px solid transparent; + background-clip: content-box; +} +::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.32); background-clip: content-box; } + +/* ============================================================ + === DARK MODE === + Automatisch nach Systemeinstellung ODER manuell per + auslösbar. + ============================================================ */ + +@media (prefers-color-scheme: dark) { + html:not([data-theme="light"]) { color-scheme: dark; } + + html:not([data-theme="light"]) { + --accent: #0a84ff; + --accent-hover: #2f95ff; + --accent-active: #0060df; + --accent-soft: #10263f; + + --text: #f5f5f7; + --text-muted: #a1a1a6; + --text-subtle: #86868b; + + --bg: #000000; + --surface: #1c1c1e; + --surface-alt: #232326; + --surface-sunk: #2c2c2e; + + --line: #3a3a3c; + --line-soft: #2c2c2e; + + --green: #30d158; + --amber: #ff9f0a; + --red: #ff453a; + + --sh-1: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); + --sh-2: 0 2px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); + --sh-3: 0 12px 40px rgba(0,0,0,.7), 0 2px 10px rgba(0,0,0,.5); + } +} + +html[data-theme="dark"] { + color-scheme: dark; + + --accent: #0a84ff; + --accent-hover: #2f95ff; + --accent-active: #0060df; + --accent-soft: #10263f; + + --text: #f5f5f7; + --text-muted: #a1a1a6; + --text-subtle: #86868b; + + --bg: #000000; + --surface: #1c1c1e; + --surface-alt: #232326; + --surface-sunk: #2c2c2e; + + --line: #3a3a3c; + --line-soft: #2c2c2e; + + --green: #30d158; + --amber: #ff9f0a; + --red: #ff453a; + + --sh-1: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); + --sh-2: 0 2px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); + --sh-3: 0 12px 40px rgba(0,0,0,.7), 0 2px 10px rgba(0,0,0,.5); +} + +/* Gemeinsame Dark-Style-Regeln (System oder manuell) */ +@media (prefers-color-scheme: dark) { + html:not([data-theme="light"]) header { + background: rgba(28,28,30,.75); + border-bottom: 1px solid var(--line); + } + html:not([data-theme="light"]) .side-menu { + background: var(--surface); + border-right-color: var(--line); + } + html:not([data-theme="light"]) .side-menu-header, + html:not([data-theme="light"]) .menu-divider { + border-color: var(--line); + } + html:not([data-theme="light"]) .show-mode-overlay { background: var(--bg); } + html:not([data-theme="light"]) .show-mode-header { + background: var(--surface); + border-bottom-color: var(--line); + } + html:not([data-theme="light"]) .show-mode-paused { + background: var(--surface); + border-color: var(--line); + } + html:not([data-theme="light"]) .theme-toggle-circle { + background: var(--surface-sunk); + border-color: var(--line); + color: var(--text); + } + html:not([data-theme="light"]) .menu-corner-btn { + background: var(--bg); + border-right-color: var(--line); + color: var(--text); + } + html:not([data-theme="light"]) .menu-corner-btn:hover { background: var(--surface-sunk); } + html:not([data-theme="light"]) .header-logo { filter: brightness(.92); } + html:not([data-theme="light"]) .dept-tab:hover { background: rgba(255,255,255,.08); } + html:not([data-theme="light"]) .dept-tab.active { background: var(--surface-sunk); } + html:not([data-theme="light"]) .tabs { border-bottom: 1px solid var(--line); } + + html:not([data-theme="light"]) button:focus-visible { box-shadow: 0 0 0 3px rgba(10,132,255,.45); } + html:not([data-theme="light"]) button.secondary { background: rgba(255,255,255,.10); color: var(--text); } + html:not([data-theme="light"]) button.secondary:hover { background: rgba(255,255,255,.15); } + html:not([data-theme="light"]) button.secondary:active { background: rgba(255,255,255,.20); } + html:not([data-theme="light"]) button.danger { background: #d70015; } + html:not([data-theme="light"]) button.danger:hover { background: #ff453a; } + html:not([data-theme="light"]) button.danger:active { background: #a3000f; } + + html:not([data-theme="light"]) select, + html:not([data-theme="light"]) input[type=text], + html:not([data-theme="light"]) input[type=date] { + background-color: var(--surface-sunk); + border-color: var(--line); + color: var(--text); + } + html:not([data-theme="light"]) select:focus, + html:not([data-theme="light"]) input[type=text]:focus, + html:not([data-theme="light"]) input[type=date]:focus { + box-shadow: 0 0 0 3px rgba(10,132,255,.28); + } + html:not([data-theme="light"]) select { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23a1a1a6' d='M0 0h10L5 6z'/%3E%3C/svg%3E"); + } + html:not([data-theme="light"]) ::placeholder { color: var(--text-subtle); } + + html:not([data-theme="light"]) th.rot { background: var(--surface); } + + html:not([data-theme="light"]) .status-edit { + background: var(--surface-sunk); + border-color: var(--line); + } + html:not([data-theme="light"]) .status-edit:focus { box-shadow: 0 0 0 3px rgba(10,132,255,.28); } + html:not([data-theme="light"]) .status-edit.status-new { color: var(--green); } + html:not([data-theme="light"]) .status-toolbar { + background: rgba(44,44,46,.9); + border-color: var(--line); + } + html:not([data-theme="light"]) .status-toolbar button:hover { background: rgba(255,255,255,.10); } + html:not([data-theme="light"]) .status-toolbar button:active { background: rgba(255,255,255,.16); } + + html:not([data-theme="light"]) .person-cell.on { background: #1e7a38 !important; color: #fff; } + html:not([data-theme="light"]) .person-cell.optional { background: #9a6200 !important; color: #fff; } + html:not([data-theme="light"]) .locked-cell { background: #38383a !important; opacity: .55; } + html:not([data-theme="light"]) .locked-cell input { + background: #38383a !important; + border-color: var(--line) !important; + color: var(--text-muted) !important; + } + html:not([data-theme="light"]) .person-cell.locked-cell.on, + html:not([data-theme="light"]) .person-cell.locked-cell.optional { + background: #38383a !important; + color: var(--text-subtle) !important; + } + + html:not([data-theme="light"]) .person-cell.role-planung, + html:not([data-theme="light"]) .role-planung, + html:not([data-theme="light"]) .role-planung.rot { + background: #1b3626; + background-attachment: scroll; + color: var(--text); + } + html:not([data-theme="light"]) .person-cell.role-projektleitung, + html:not([data-theme="light"]) .role-projektleitung, + html:not([data-theme="light"]) .role-projektleitung.rot { + background: #3d2224; + background-attachment: scroll; + color: var(--text); + } + html:not([data-theme="light"]) .person-cell.role-bauüberwachung, + html:not([data-theme="light"]) .role-bauüberwachung, + html:not([data-theme="light"]) .role-bauüberwachung.rot { + background: #17313f; + background-attachment: scroll; + color: var(--text); + } + html:not([data-theme="light"]) th.role-planung, + html:not([data-theme="light"]) th.role-projektleitung, + html:not([data-theme="light"]) th.role-bauüberwachung { color: var(--text); } + + html:not([data-theme="light"]) .lph-cell input { + background: var(--surface-sunk); + border-color: var(--line); + color: var(--text); + } + html:not([data-theme="light"]) .bar { background: #38383a; } + + html:not([data-theme="light"]) .load-card { border-color: var(--line); } + html:not([data-theme="light"]) .modal-bg { background: rgba(0,0,0,.6); } + html:not([data-theme="light"]) .modal { border: 1px solid var(--line); } + + html:not([data-theme="light"]) .swatch { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } + html:not([data-theme="light"]) .table-wrap { border-color: var(--line); } + html:not([data-theme="light"]) .del-proj { color: var(--red); } + html:not([data-theme="light"]) input[type=text].edit-name { border-color: transparent; background: transparent; } + html:not([data-theme="light"]) input[type=text].edit-name:hover { background: rgba(255,255,255,.06); } + html:not([data-theme="light"]) input[type=text].edit-name:focus { + background: var(--surface-sunk); + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(10,132,255,.28); + } + html:not([data-theme="light"]) .locked-legend-item { opacity: .6; } + html:not([data-theme="light"]) .legend-item.present { color: #fff; } + + html:not([data-theme="light"]) ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); background-clip: content-box; } + html:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); background-clip: content-box; } +} + +html[data-theme="dark"] header { + background: rgba(28,28,30,.75); + border-bottom: 1px solid var(--line); +} +html[data-theme="dark"] .side-menu { + background: var(--surface); + border-right-color: var(--line); +} +html[data-theme="dark"] .side-menu-header, +html[data-theme="dark"] .menu-divider { + border-color: var(--line); +} +html[data-theme="dark"] .show-mode-overlay { background: var(--bg); } +html[data-theme="dark"] .show-mode-header { + background: var(--surface); + border-bottom-color: var(--line); +} +html[data-theme="dark"] .show-mode-paused { + background: var(--surface); + border-color: var(--line); +} +html[data-theme="dark"] .theme-toggle-circle { + background: var(--surface-sunk); + border-color: var(--line); + color: var(--text); +} +html[data-theme="dark"] .menu-corner-btn { + background: var(--bg); + border-right-color: var(--line); + color: var(--text); +} +html[data-theme="dark"] .menu-corner-btn:hover { background: var(--surface-sunk); } +html[data-theme="dark"] .header-logo { filter: brightness(.92); } +html[data-theme="dark"] .dept-tab:hover { background: rgba(255,255,255,.08); } +html[data-theme="dark"] .dept-tab.active { background: var(--surface-sunk); } +html[data-theme="dark"] .tabs { border-bottom: 1px solid var(--line); } + +html[data-theme="dark"] button:focus-visible { box-shadow: 0 0 0 3px rgba(10,132,255,.45); } +html[data-theme="dark"] button.secondary { background: rgba(255,255,255,.10); color: var(--text); } +html[data-theme="dark"] button.secondary:hover { background: rgba(255,255,255,.15); } +html[data-theme="dark"] button.secondary:active { background: rgba(255,255,255,.20); } +html[data-theme="dark"] button.danger { background: #d70015; } +html[data-theme="dark"] button.danger:hover { background: #ff453a; } +html[data-theme="dark"] button.danger:active { background: #a3000f; } + +html[data-theme="dark"] select, +html[data-theme="dark"] input[type=text], +html[data-theme="dark"] input[type=date] { + background-color: var(--surface-sunk); + border-color: var(--line); + color: var(--text); +} +html[data-theme="dark"] select:focus, +html[data-theme="dark"] input[type=text]:focus, +html[data-theme="dark"] input[type=date]:focus { + box-shadow: 0 0 0 3px rgba(10,132,255,.28); +} +html[data-theme="dark"] select { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23a1a1a6' d='M0 0h10L5 6z'/%3E%3C/svg%3E"); +} +html[data-theme="dark"] ::placeholder { color: var(--text-subtle); } + +html[data-theme="dark"] th.rot { background: var(--surface); } + +html[data-theme="dark"] .status-edit { + background: var(--surface-sunk); + border-color: var(--line); +} +html[data-theme="dark"] .status-edit:focus { box-shadow: 0 0 0 3px rgba(10,132,255,.28); } +html[data-theme="dark"] .status-edit.status-new { color: var(--green); } +html[data-theme="dark"] .status-toolbar { + background: rgba(44,44,46,.9); + border-color: var(--line); +} +html[data-theme="dark"] .status-toolbar button:hover { background: rgba(255,255,255,.10); } +html[data-theme="dark"] .status-toolbar button:active { background: rgba(255,255,255,.16); } + +html[data-theme="dark"] .person-cell.on { background: #1e7a38 !important; color: #fff; } +html[data-theme="dark"] .person-cell.optional { background: #9a6200 !important; color: #fff; } +html[data-theme="dark"] .locked-cell { background: #38383a !important; opacity: .55; } +html[data-theme="dark"] .locked-cell input { + background: #38383a !important; + border-color: var(--line) !important; + color: var(--text-muted) !important; +} +html[data-theme="dark"] .person-cell.locked-cell.on, +html[data-theme="dark"] .person-cell.locked-cell.optional { + background: #38383a !important; + color: var(--text-subtle) !important; +} + +html[data-theme="dark"] .person-cell.role-planung, +html[data-theme="dark"] .role-planung, +html[data-theme="dark"] .role-planung.rot { + background: #1b3626; + background-attachment: scroll; + color: var(--text); +} +html[data-theme="dark"] .person-cell.role-projektleitung, +html[data-theme="dark"] .role-projektleitung, +html[data-theme="dark"] .role-projektleitung.rot { + background: #3d2224; + background-attachment: scroll; + color: var(--text); +} +html[data-theme="dark"] .person-cell.role-bauüberwachung, +html[data-theme="dark"] .role-bauüberwachung, +html[data-theme="dark"] .role-bauüberwachung.rot { + background: #17313f; + background-attachment: scroll; + color: var(--text); +} +html[data-theme="dark"] th.role-planung, +html[data-theme="dark"] th.role-projektleitung, +html[data-theme="dark"] th.role-bauüberwachung { color: var(--text); } + +html[data-theme="dark"] .lph-cell input { + background: var(--surface-sunk); + border-color: var(--line); + color: var(--text); +} +html[data-theme="dark"] .bar { background: #38383a; } + +html[data-theme="dark"] .load-card { border-color: var(--line); } +html[data-theme="dark"] .modal-bg { background: rgba(0,0,0,.6); } +html[data-theme="dark"] .modal { border: 1px solid var(--line); } + +html[data-theme="dark"] .swatch { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } +html[data-theme="dark"] .table-wrap { border-color: var(--line); } +html[data-theme="dark"] .del-proj { color: var(--red); } +html[data-theme="dark"] input[type=text].edit-name { border-color: transparent; background: transparent; } +html[data-theme="dark"] input[type=text].edit-name:hover { background: rgba(255,255,255,.06); } +html[data-theme="dark"] input[type=text].edit-name:focus { + background: var(--surface-sunk); + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(10,132,255,.28); +} +html[data-theme="dark"] .locked-legend-item { opacity: .6; } +html[data-theme="dark"] .legend-item.present { color: #fff; } + +html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); background-clip: content-box; } +html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); background-clip: content-box; } + +/* === GANTT / Projektplan === */ +.modal-wide { + max-width: 900px; + width: 92%; +} + +.gantt-container { + background: var(--surface); + border: 1px solid var(--line-soft); + border-radius: var(--r-lg); + padding: 12px 0; + box-shadow: var(--sh-1); + width: 100%; + box-sizing: border-box; + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} + +.gantt-chart { + width: 100%; + min-width: 0; + position: relative; +} + +.gantt-row { + display: flex; + align-items: center; + position: relative; + height: 32px; + border-bottom: 1px solid var(--line-soft); +} + +.gantt-row.gantt-header, +.gantt-row.gantt-days { + height: 26px; + border-bottom: 1px solid var(--line); +} + +.gantt-timeline { + position: relative; + flex: 1 1 auto; + height: 100%; + min-width: 0; + overflow: hidden; +} + +.gantt-row.gantt-project { + height: 34px; +} + +.gantt-row.gantt-project.highlighted { + background: var(--accent-soft); +} + +.gantt-row.gantt-vacation { + height: 22px; + background: transparent; + font-size: 11px; + color: var(--text-muted); +} + +.gantt-label { + width: 220px; + flex: 0 0 220px; + min-width: 220px; + max-width: 220px; + height: 100%; + align-self: stretch; + box-sizing: border-box; + padding: 0 12px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-weight: 500; + font-size: 12px; + border-right: 1px solid var(--line-soft); + position: sticky; + left: 0; + z-index: 10; + background: var(--surface); + display: flex; + align-items: center; +} + +.gantt-row.gantt-header .gantt-label, +.gantt-row.gantt-days .gantt-label { + background: var(--surface); + z-index: 15; +} + +.gantt-row.gantt-project.highlighted .gantt-label { + background: var(--accent-soft); +} + +.gantt-row.gantt-vacation .gantt-label { + font-weight: normal; + display: flex; + align-items: center; + gap: 6px; + background: var(--surface); +} + +.gantt-row.gantt-todo .gantt-label { + background: var(--surface); +} + +.gantt-vacation-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--amber); +} + +.gantt-month, +.gantt-day { + position: absolute; + top: 0; + bottom: 0; + border-right: 1px solid var(--line-soft); + font-size: 10px; + color: var(--text-muted); + padding: 2px 4px; + white-space: nowrap; + overflow: hidden; + box-sizing: border-box; +} + +.gantt-month { + background: var(--surface-sunk); + font-weight: 600; +} + +.gantt-day { + display: flex; + align-items: center; + justify-content: center; +} + +.gantt-day.weekend { + background: var(--surface-sunk); + opacity: .7; +} + +.gantt-day.gantt-week { + font-weight: 600; + color: var(--text); + border-right: 1px solid var(--line); +} + +/* Raster-Overlay: liegt über die gesamte Timeline-Breite (rechts der Labels). + Wochenend-Flächen zeichnen ohne z-index (Zeilen liegen darüber, sind aber + transparent); die Heute-Linie bekommt z-index, damit sie über den Balken, + aber unter den sticky Labels liegt. */ +.gantt-grid-overlay { + position: absolute; + top: 0; + bottom: 0; + left: 220px; + right: 0; + pointer-events: none; +} + +.gantt-grid-weekend { + position: absolute; + top: 0; + bottom: 0; + background: var(--surface-sunk); + opacity: .55; +} + +.gantt-grid-today { + position: absolute; + top: 0; + bottom: 0; + width: 0; + border-left: 2px solid var(--red); + opacity: .7; + z-index: 9; +} + +.gantt-bar { + position: absolute; + top: 6px; + bottom: 6px; + border-radius: var(--r-sm); + overflow: hidden; + box-shadow: var(--sh-1); +} + +.gantt-bar.project { + color: #fff; + display: flex; + align-items: center; +} + +.gantt-bar .gantt-progress { + position: absolute; + top: 0; + left: 0; + bottom: 0; + background: rgba(0,0,0,.22); + pointer-events: none; +} + +.gantt-bar-label { + position: relative; + z-index: 1; + padding: 0 8px; + font-size: 11px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.gantt-bar.vacation { + top: 4px; + bottom: 4px; + background: repeating-linear-gradient( + 45deg, + rgba(255, 159, 10, .55), + rgba(255, 159, 10, .55) 6px, + rgba(255, 159, 10, .35) 6px, + rgba(255, 159, 10, .35) 12px + ); + border: 1px solid var(--amber); + border-radius: var(--r-pill); +} + +.gantt-row.gantt-todo { height: 26px; font-size: 11px; } +.gantt-row.gantt-todo.done { opacity: .55; } +.gantt-row.gantt-milestone-row { height: 40px; font-size: 11px; background: transparent; } +.gantt-row.gantt-milestone-row .gantt-milestone { top: 6px; } +.gantt-row.gantt-milestone-row .gantt-milestone-label { top: 24px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; } +.gantt-row.gantt-todo-add { + height: 34px; + font-size: 12px; + background: var(--surface-alt); + position: relative; +} +.gantt-todo-add-sticky { + position: sticky; + left: 0; + z-index: 10; + display: flex; + align-items: center; + background: var(--surface-alt); + border-right: 1px solid var(--line-soft); + height: 100%; + align-self: stretch; + box-sizing: border-box; +} +.gantt-todo-add-sticky .gantt-label { + position: static; + border-right: none; + background: transparent; + flex: 0 0 220px; + width: 220px; + min-width: 220px; + max-width: 220px; + box-sizing: border-box; + display: flex; + align-items: center; + gap: 6px; + padding: 0 12px; +} +.gantt-bar.todo { + top: 5px; + bottom: 5px; + background: var(--accent); + border-radius: var(--r-sm); +} +.gantt-bar.todo.done { + background: var(--green); +} +.gantt-bar.todo.critical { + background: var(--red); + box-shadow: 0 0 0 2px rgba(215,0,21,.25); +} +.gantt-todo-add-controls { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: nowrap; + width: fit-content; + max-width: 100%; + flex-shrink: 0; + padding-right: 8px; +} +.gantt-todo-add input[type=text], +.gantt-todo-add input[type=date] { + padding: 4px 7px; + font-size: 12px; +} +.gantt-todo-add input[type=text] { + flex: 0 0 180px; + width: 180px; + min-width: 140px; +} +.gantt-todo-add input[type=date] { + flex: 0 0 120px; + width: 120px; + min-width: 120px; +} +.gantt-todo-add button { + flex: 0 0 auto; + padding: 4px 12px; + font-size: 12px; +} +.gantt-todo-add .gantt-timeline { + display: flex; + align-items: center; + gap: 8px; + padding: 0 8px; + overflow: hidden; +} +.gantt-todo-actions { + display: inline-flex; + gap: 4px; + margin-left: 6px; +} + +/* === GANTT Abhängigkeiten (Dependencies) === */ +.gantt-dependencies-svg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 8; + overflow: visible; +} + +.gantt-dep-path { + fill: none; + stroke: var(--accent); + stroke-width: 2.2px; + stroke-linecap: round; + stroke-linejoin: round; + opacity: 0.85; + transition: stroke 0.2s, stroke-width 0.2s, opacity 0.2s; +} + +.gantt-dep-path.conflict { + stroke: var(--red); + stroke-dasharray: 5 3; +} + +.gantt-dep-path.done { + stroke: var(--green); +} + +.gantt-dep-path.highlight { + stroke-width: 3.5px; + opacity: 1; + filter: drop-shadow(0 0 3px rgba(0, 113, 227, 0.4)); +} + +.gantt-dep-badge { + display: inline-flex; + align-items: center; + gap: 3px; + font-size: 10px; + padding: 1px 6px; + border-radius: var(--r-pill); + background: var(--accent-soft); + color: var(--accent); + margin-left: 6px; + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + vertical-align: middle; + border: 1px solid rgba(0, 113, 227, 0.2); +} + +.gantt-dep-badge.conflict { + background: rgba(215, 0, 21, 0.1); + color: var(--red); + border-color: rgba(215, 0, 21, 0.2); +} +.gantt-todo-actions button { + padding: 2px 7px; + font-size: 10px; +} + +.gantt-milestone { + position: absolute; + top: 2px; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 12px solid var(--red); + transform: translateX(-50%); + z-index: 2; + cursor: grab; +} +.gantt-milestone:active { cursor: grabbing; } + +.gantt-milestone-label { + position: absolute; + top: 16px; + transform: translateX(-50%); + font-size: 10px; + color: var(--text-muted); + white-space: nowrap; + pointer-events: none; + z-index: 2; +} + +.gantt-bar.project, +.gantt-bar.vacation { cursor: grab; } +.gantt-bar.project:active, +.gantt-bar.vacation:active { cursor: grabbing; } + +.gantt-resize { + position: absolute; + top: 0; + bottom: 0; + width: 10px; + cursor: col-resize; + z-index: 3; +} +.gantt-resize-left { left: 0; } +.gantt-resize-right { right: 0; } +.gantt-resize:hover { background: rgba(255,255,255,.25); } + +.gantt-form { + display: grid; + gap: 12px; +} + +.gantt-form-row { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; +} + +.gantt-form-row input[type=date] { flex: 1 1 140px; } +.gantt-form-row input[type=text] { flex: 2 1 200px; } + +.gantt-modal-preview .gantt-chart { + min-width: auto; +} + +/* === Datumsbereich-Picker (Von/Bis in einem Kalenderfenster) === */ +.range-picker { + position: fixed; + z-index: 1100; + width: 288px; + background: var(--surface); + border: 1px solid var(--line); + border-radius: var(--r-lg); + box-shadow: var(--sh-3); + padding: 10px; + font-size: 13px; +} + +.range-picker-head { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 4px; +} + +.range-picker-title { + font-weight: 600; + font-size: 13px; +} + +.range-picker-hint { + font-size: 11px; + color: var(--text-muted); + text-align: center; + margin-bottom: 6px; +} + +.range-picker-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 2px; +} + +.range-picker-weekday { + text-align: center; + font-size: 10px; + font-weight: 600; + color: var(--text-muted); + padding: 2px 0; +} + +.range-picker-day { + text-align: center; + padding: 5px 0; + border-radius: var(--r-sm); + cursor: pointer; + user-select: none; +} + +.range-picker-day:hover { background: var(--surface-sunk); } +.range-picker-day.weekend { color: var(--text-subtle); } +.range-picker-day.today { outline: 1px solid var(--accent); outline-offset: -1px; } +.range-picker-day.in-range { background: var(--accent-soft); border-radius: 0; } +.range-picker-day.sel-start, +.range-picker-day.sel-end { + background: var(--accent); + color: #fff; + font-weight: 600; +} + +.range-picker-footer { + display: flex; + justify-content: space-between; + gap: 8px; + margin-top: 8px; +} + +/* Anzeige-Feld, das den Picker öffnet */ +.range-picker-display { + cursor: pointer; + background: var(--surface); + min-width: 170px; +} + +.person-absences { + padding: 8px 8px 8px 40px; + border-bottom: 1px solid var(--line-soft); + background: var(--surface-alt); +} + +.absence-list { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-bottom: 8px; +} + +.absence-chip { + display: inline-flex; + align-items: center; + gap: 6px; + background: var(--surface); + border: 1px solid var(--line-soft); + border-radius: var(--r-pill); + padding: 3px 10px; + font-size: 12px; +} + +.absence-chip small { + color: var(--text-muted); + font-size: 11px; +} + +.absence-form { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; +} + +.absence-form input[type=date] { width: 130px; } +.absence-form select { min-width: 110px; } + +/* Dark mode GANTT */ +@media (prefers-color-scheme: dark) { + html:not([data-theme="light"]) .gantt-container { border-color: var(--line); } + html:not([data-theme="light"]) .gantt-row { border-color: var(--line); } + html:not([data-theme="light"]) .gantt-row.gantt-header, + html:not([data-theme="light"]) .gantt-row.gantt-days { border-color: var(--line); } + html:not([data-theme="light"]) .gantt-month { background: var(--surface-sunk); } + html:not([data-theme="light"]) .gantt-day.weekend { background: var(--surface-sunk); } + html:not([data-theme="light"]) .gantt-row.gantt-project.highlighted { background: var(--accent-soft); } + html:not([data-theme="light"]) .person-absences { background: var(--surface-sunk); border-color: var(--line); } + html:not([data-theme="light"]) .absence-chip { background: var(--surface); border-color: var(--line); } +} + +html[data-theme="dark"] .gantt-container { border-color: var(--line); } +html[data-theme="dark"] .gantt-row { border-color: var(--line); } +html[data-theme="dark"] .gantt-row.gantt-header, +html[data-theme="dark"] .gantt-row.gantt-days { border-color: var(--line); } +html[data-theme="dark"] .gantt-month { background: var(--surface-sunk); } +html[data-theme="dark"] .gantt-day.weekend { background: var(--surface-sunk); } +html[data-theme="dark"] .gantt-row.gantt-project.highlighted { background: var(--accent-soft); } +html[data-theme="dark"] .person-absences { background: var(--surface-sunk); border-color: var(--line); } +html[data-theme="dark"] .absence-chip { background: var(--surface); border-color: var(--line); } \ No newline at end of file diff --git a/server.js b/server.js new file mode 100644 index 0000000..04fa6a0 --- /dev/null +++ b/server.js @@ -0,0 +1,113 @@ +const express = require('express'); +const fs = require('fs'); +const path = require('path'); +const app = express(); + +const BOM = Buffer.from([0xEF, 0xBB, 0xBF]); +const PORT = process.env.PORT || 3003; +const VALID_DEPARTMENTS = new Set(['ELT','HLS','ARCH']); + +app.use(require('cors')()); +app.use(express.json({ limit: '2mb' })); +app.use(express.static(path.join(__dirname, 'public'), { + setHeaders: (res, path) => { + if(path.endsWith('.js') || path.endsWith('.css') || path.endsWith('.html')){ + res.set('Cache-Control', 'no-cache, no-store, must-revalidate'); + res.set('Pragma', 'no-cache'); + res.set('Expires', '0'); + } + } +})); + +const SESSIONS_DIR = path.join(__dirname, 'sessions'); +if(!fs.existsSync(SESSIONS_DIR)) fs.mkdirSync(SESSIONS_DIR, { recursive: true }); + +// Erlaubt ausschliesslich sichere CSV-Dateinamen im Format .csv +function safeName(name){ + const raw = String(name || ''); + // Pfad-Trennzeichen und Verzeichnisnavigation ablehnen + if(/[\\/]|\.\./.test(raw)) return null; + const base = path.basename(raw); + if(!base || base.toLowerCase() === '.csv') return null; + const safe = base.replace(/[^a-zA-Z0-9_\-\.]/g,'_'); + if(!/^([a-zA-Z0-9_\-]+)\.csv$/i.test(safe)) return null; + return safe; +} + +function departmentDir(department){ + const dept = (typeof department === 'string' && VALID_DEPARTMENTS.has(department)) ? department : 'ELT'; + const dir = path.join(SESSIONS_DIR, dept); + if(!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true }); + return dir; +} + +app.post('/save-csv', (req, res) => { + const { filename, csv, department } = req.body || {}; + if(!filename || typeof csv !== 'string') return res.status(400).json({ ok: false, error: 'Missing filename or csv' }); + const safe = safeName(filename); + if(!safe) return res.status(400).json({ ok: false, error: 'Invalid filename' }); + const dir = departmentDir(department); + const out = path.join(dir, safe); + const data = Buffer.concat([BOM, Buffer.from(csv, 'utf8')]); + fs.writeFile(out, data, (err) => { + if(err){ console.error('Write error', err); return res.status(500).json({ ok:false, error: String(err) }); } + console.log('Saved CSV:', out); + return res.json({ ok: true, path: out }); + }); +}); + +app.post('/delete-csv', (req, res) => { + const { filename, department } = req.body || {}; + if(!filename) return res.status(400).json({ ok: false, error: 'Missing filename' }); + const safe = safeName(filename); + if(!safe) return res.status(400).json({ ok: false, error: 'Invalid filename' }); + const dir = departmentDir(department); + const out = path.join(dir, safe); + fs.unlink(out, (err) => { + if(err){ + if(err.code === 'ENOENT') { + console.log('CSV-Datei nicht gefunden:', out); + return res.json({ ok: true, missing: true }); + } + console.error('Delete error', err); + return res.status(500).json({ ok:false, error: String(err) }); + } + console.log('Deleted CSV:', out); + return res.json({ ok: true }); + }); +}); + +app.get('/load-all', (req, res) => { + const dir = departmentDir(req.query.department); + fs.readdir(dir, (err, files) => { + if(err){ console.error('Read error', err); return res.status(500).json({ ok:false, error: String(err) }); } + const csvFiles = files.filter(f => f.toLowerCase().endsWith('.csv')); + const result = { ok: true, sessions: [], people: null }; + csvFiles.forEach(filename => { + if(filename.toLowerCase() === '_people.csv'){ + result.people = fs.readFileSync(path.join(dir, filename), 'utf8'); + return; + } + const content = fs.readFileSync(path.join(dir, filename), 'utf8'); + result.sessions.push({ filename, content }); + }); + // Sortiere Sitzungen nach Dateiname, damit die Reihenfolge stabil ist + result.sessions.sort((a,b) => a.filename.localeCompare(b.filename)); + res.json(result); + }); +}); + +app.get('/health', (req,res)=> res.json({ok:true})); + +app.get('/', (req,res)=>{ + res.sendFile(path.join(__dirname, 'public', 'Test.html')); +}); + +const server = app.listen(PORT, ()=> console.log(`CSV-Session server running on http://localhost:${PORT}`)); +server.on('error', (err) => { + console.error('Server konnte nicht starten:', err.message); + if(err.code === 'EADDRINUSE'){ + console.error(`Port ${PORT} ist bereits belegt. Bitte einen anderen PORT verwenden, z.B. PORT=3004 npm start`); + } + process.exit(1); +}); diff --git a/sessions/.DS_Store b/sessions/.DS_Store new file mode 100644 index 0000000..3903cb3 Binary files /dev/null and b/sessions/.DS_Store differ diff --git a/sessions/ARCH/KW_32___2026.csv b/sessions/ARCH/KW_32___2026.csv new file mode 100644 index 0000000..75b068d --- /dev/null +++ b/sessions/ARCH/KW_32___2026.csv @@ -0,0 +1,8 @@ +WOCHE;KW 32 / 2026;2026-08-05; +PERSONEN;;;RS|Planung|Rieke Stilleke;AC|Planung|Atilla Ceylan;CJ|Planung|Carina Jost;SM|Planung|Shahab Mushref;TC|Planung|Tetiana Chevhuz;MK|Projektleitung|Maximilian Kriener;SS|Projektleitung|Sekandar Seradj;MK|Bauüberwachung|Maximilian Kriener;SS|Bauüberwachung|Sekandar Seradj;;;;;;;;;;; +Pr.-Nr.;Bezeichnung;Status;RS;AC;CJ;SM;TC;MK;SS;MK;SS;LPH 1;LPH 2;LPH 3;LPH 4;LPH 5;LPH 6;LPH 7;LPH 8;W+M;Gruppe;Index;Plan +ANWESENHEIT;;;;;;;;;;;;;;;;;;;;;; +21-4001;Feuerwehrgeräteh. Rodenkirchen;- Wettbewerbsbeitrag erstellt;;;;;;;;;;100%;100%;;;;;;;;Aktive Projekte;5; +;Umbau Praxisräume;- Bestandsaufnahme geplant Test schreiben ;;;;;;;;;;100%;;;;;;;;;In Anbahnung;0; +;Denkmalschutzgutachten;- Kurzcheck erstellt;;;;;;;;;;100%;;;;;;;;;In Anbahnung;1; +;Architektur Zeichnungsvorlagen;- Vorlagen aktualisiert;;;;;;;;;;100%;;;;;;;;;Allgemein;0; \ No newline at end of file diff --git a/sessions/ARCH/_people.csv b/sessions/ARCH/_people.csv new file mode 100644 index 0000000..b526578 --- /dev/null +++ b/sessions/ARCH/_people.csv @@ -0,0 +1,8 @@ +NAME;Rollen;Voller Name;E-Mail;Abwesenheiten +AC;Planung;Atilla Ceylan;a.ceylan@rauschenberg-ing.de;[] +CJ;Planung;Carina Jost;c.jost@rauschenberg-ing.de;[] +MK;Projektleitung,Bauüberwachung;Maximilian Kriener;m.kriener@rauschenberg-ing.de;[] +RS;Planung;Rieke Stilleke;r.stilleke@rauschenberg-ing.de;[] +SM;Planung;Shahab Mushref;s.mushref@rauschenberg-ing.de;[] +SS;Projektleitung,Bauüberwachung;Sekandar Seradj;s.seradj@rauschenberg-ing.de;[] +TC;Planung;Tetiana Chevhuz;t.chevhuz@rauschenberg-ing.de; \ No newline at end of file diff --git a/sessions/ELT/KW_30___2026.csv b/sessions/ELT/KW_30___2026.csv new file mode 100644 index 0000000..26fd2d1 --- /dev/null +++ b/sessions/ELT/KW_30___2026.csv @@ -0,0 +1,9 @@ +WOCHE;KW 30 / 2026;2026-07-24;1 +PERSONEN;;;AP|Planung|AP;SK|Planung|SK;AK|Planung|AK;ED|Planung|ED;SE|Planung|SE;THK|Planung|THK;SP|Planung|SP;SG|Planung|SG;TW|Planung|TW;RR|Planung|RR;MK|Planung|MK;HR|Planung|HR;;;;;;;;;;; +Pr.-Nr.;Bezeichnung;Status;AP;SK;AK;ED;SE;THK;SP;SG;TW;RR;MK;HR;LPH 1;LPH 2;LPH 3;LPH 4;LPH 5;LPH 6;LPH 7;LPH 8;W+M;Gruppe;Index;Plan +ANWESENHEIT;;;;;;;;;;;;;;;;;;;;;;;;; +18-4007;Janusz-Korczak-Gesamtsch. Bottrop;LPH5 als Vorabzug raus. NW-Räume vorauss. August.;;;;;;;;;;;;;100%;100%;100%;;100%;100%;100%;95%;;Aktive Projekte;0; +21-4030;NSHV Köln Immobilienprüfung in Hof;Thorsten W. klärt und übernimmt Schriftverkehr. LV liegt zur Sichtung bei T.W.;;;;;;;;;;;;;100%;100%;100%;;100%;100%;;;;Aktive Projekte;1; +22-4056;Gymnasium Hemer;;;;;;;;;;;;;;100%;100%;100%;;100%;100%;100%;90%;;Aktive Projekte;2; +22-4066;DSW 21 – Umbau E-Mobilität;Elt-Montagen ab KW 33.;;;;;;;;;;;;;100%;100%;100%;;100%;100%;100%;20%;;Aktive Projekte;3; +24-4043;S-K ODL-Heim Sanierung Krefeld;Voraussichtlich LV-Abgabe.;;;;;;;;;;;;;100%;100%;100%;;100%;;;;;Aktive Projekte;4; \ No newline at end of file diff --git a/sessions/ELT/KW_31___2026.csv b/sessions/ELT/KW_31___2026.csv new file mode 100644 index 0000000..14e6da3 --- /dev/null +++ b/sessions/ELT/KW_31___2026.csv @@ -0,0 +1,33 @@ +WOCHE;KW 31 / 2026;2026-07-29;1 +PERSONEN;;;AP|Planung|Alexander Plum;AK|Planung|Alexander Kenne;ED|Planung|Erik Dunin;SK|Planung|Simon Kunigk;SE|Planung|Steven Esche;WS|Planung|Winfried Sältzer;ED|Projektleitung|Erik Dunin;SP|Projektleitung|Sebastian Pöttinger;THK|Projektleitung|Thorsten Kramp;RR|Projektleitung|Robert Röllecke;MK|Projektleitung|Maximilian Kriener;TW|Projektleitung|Thorsten Werner;SG|Projektleitung|Steffen Gaida;ED|Bauüberwachung|Erik Dunin;SK|Bauüberwachung|Simon Kunigk;SP|Bauüberwachung|Sebastian Pöttinger;THK|Bauüberwachung|Thorsten Kramp;HR|Bauüberwachung|Hermann Rollecke;;;;;;;;;;; +Pr.-Nr.;Bezeichnung;Status;AP;AK;ED;SK;SE;WS;ED;SP;THK;RR;MK;TW;SG;ED;SK;SP;THK;HR;LPH 1;LPH 2;LPH 3;LPH 4;LPH 5;LPH 6;LPH 7;LPH 8;W+M;Gruppe;Index;Plan +ANWESENHEIT;;X;X;;X;X;X;;X;X;;;;X;;X;X;X;;;;;;;;;;;;; +18-4007;Janusz-Korczak-Gesamtsch. Bottrop;- KW 35 NW Raum Planung

- KW 44 Möbel

;;;;;;;;;;;;;;;;;;;100%;100%;100%;;90%;;;;;Aktive Projekte;0;"{""start"":"""",""end"":"""",""milestones"":[],""people"":[],""progress"":0}" +21-4030;NSHV Köln Immobilienprüfung in Hof;- Thorsten W. klärt und übernimmt Schriftverkehr - LV liegt zur Sichtung bei T.W.;;;;;;;;;;;;;;;;;;;100%;100%;100%;;100%;100%;;;;Aktive Projekte;2; +22-4066;DSW 21, Umbau E-Mobilität;"- Elt-Montagen ab KW 33.";;;;;;;;;;;;;;;;;;;100%;100%;100%;;100%;100%;100%;20%;;Aktive Projekte;6; +24-4043;S-K ODL-Heim Sanierung Krefeld;- Vorraussichtlich LV-Abgabe XX.XX

- LPH5 mündlich freigegeben

- Neuer EG Grundriss mit diversen Änderungen kommt noch von Architekten

;;;;;;;;;;;;;;;;;;;100%;100%;100%;;100%;;;;;Aktive Projekte;10; +21-4001;Feuerwehrgeräteh. Rodenkirchen;"- KNX muß noch programmiert werden. Abnahme 27.07

- Fertigstellung Ende Juli

- Abnahmen laufen bis Ende KW31

- Blackbuilding Test 26.07

";;X;;;;;;;;;;;X;;;;;;;;;;100%;100%;100%;;;Aktive Projekte;1;"{""start"":"""",""end"":"""",""milestones"":[{""id"":""mslrv3i1edl08"",""name"":""SV Abnahme"",""date"":""2026-08-18""},{""id"":""mslrvh7hjau1e"",""name"":""Test"",""date"":""2026-09-05""}],""people"":[""p_ap"",""p_ak"",""p_sk"",""p_sg""],""progress"":""0"",""todos"":[{""id"":""msluufbp114g1"",""title"":""Test"",""start"":""2026-08-09"",""end"":""2026-08-13"",""done"":false},{""id"":""mslv6h76cmx8k"",""title"":""iuguzgv"",""start"":""2026-08-23"",""end"":""2026-09-06"",""done"":false},{""id"":""mslw4l3qp1v18"",""title"":""Hallo"",""start"":""2026-11-29"",""end"":""2027-04-30"",""done"":false}]}" +22-4027;Sporthalle Soest;- SV und VOB Abnahme erfolgt.

- Nachprüfung VOB 24.07

- Keine Infos über Nachprüfung

;;;;;;;;;;;;;;;;;;;100%;100%;100%;;100%;100%;100%;90%;;Aktive Projekte;3; +22-4056;Gymnasium Hemer;;;;;;;;;;;;;;;;;;;;100%;100%;100%;;100%;100%;100%;90%;;Aktive Projekte;4; +22-4056-1;Gymnasium Hemer (Deckensanierung);- Beginn der Arbeiten vorraussichtlich KW 30 (KW 32 Kickoff);;;;;;;;;;;;;;;;;;;;;100%;;100%;100%;;;;Aktive Projekte;5; +23-4042;GWK Neufelder Straße;"- Nachweis für E-30 Leitungen notwendig. Rechnungen wurden nicht anerkannt.

- 22.07 Aufschaltung BMA und Amok

- KW 31 VOB Abnahme

";;;;;;;;;;;;;;;;;;;100%;100%;100%;;100%;100%;100%;95%;;Aktive Projekte;7; +23-4070;Umbau Bürogebäude NEW, MV10;"- neue NSHV anbieten(Warten auf Infos),

- 28.07 Sachverständiger Abnahme ELT&SiBe

- 30.07 Sachverständigen Abnahme BMA

";;;;;;;;;;;;;;;;;;;100%;100%;100%;;100%;100%;100%;90%;;Aktive Projekte;8; +23-4072;S-K OGS-Kaldenkirchen Schulanbau;"- Feininstallation beginnt, Fertigstellung voraussichtlich 01.08";;;;;;;;;;;;;;;;;;;;;;;;;;70%;;Aktive Projekte;9; +24-4049;BMA Remscheid;"- Feuerwehrabnahme organisiert die Errichterfirma.

- SV-Abnahmen 15 & 16.07: nicht abgenommen

";;;;;;;;;;;;;;;;;;;100%;100%;100%;;100%;100%;100%;90%;;Aktive Projekte;11; +24-4069;S-K Erw. GS Blankenheim Neubau;- nur backup;;;;;;;;;;;;;;;;;;;;;;;100%;100%;;;;Kleine Projekte;0; +24-4096;Umbau Wohngebäude Kirchhoff;"- Position HA wird von uns bestimmt. - Notwendiges Leerrohr für Leuchten im Vordach ist zu klären.

- Abgabe Kostenberechnung bis Ende KW29

- LV Fertig bis Ende KW 32

";;;;(X);;;;;;;;;;;;;;;100%;100%;100%;;95%;85%;0%;;;Aktive Projekte;12; +25-4003;Märkische Bank Boele;- Feininstallation

- Ab KW30 Einbringung Tresore

- KW 44 Möbel

- LV liegt zur Sichtung bei T.W.

;;;;;;;;;;;;;;;;;;;100%;100%;100%;;100%;100%;;;;Aktive Projekte;2; +22-4066;DSW 21, Umbau E-Mobilität;"- Elt-Montagen ab KW 33.";;;;;;;;;;;;;;;;;;;100%;100%;100%;;100%;100%;100%;20%;;Aktive Projekte;6; +24-4043;S-K ODL-Heim Sanierung Krefeld;- Vorraussichtlich LV-Abgabe XX.XX

- LPH5 mündlich freigegeben

- Neuer EG Grundriss mit diversen Änderungen kommt noch von Architekten

;;;;;;;;;;;;;;;;;;;100%;100%;100%;;100%;;;;;Aktive Projekte;10; +21-4001;Feuerwehrgeräteh. Rodenkirchen;"- KNX muß noch programmiert werden. Abnahme 27.07

- Fertigstellung Ende Juli

- Abnahmen laufen bis Ende KW31

- Blackbuilding Test 26.07

";X;;X;;;;X;X;;;;;;X;;;;;;;;;100%;100%;100%;;;Aktive Projekte;1;"{""start"":"""",""end"":"""",""milestones"":[{""id"":""mslrvh7hjau1e"",""name"":""Übergabe"",""date"":""2026-09-12"",""dependsOn"":[""mslv6h76cmx8k""],""position"":""after:mslv6h76cmx8k""}],""people"":[""p_ap"",""p_ak"",""p_sk"",""p_sg""],""progress"":""0"",""todos"":[{""id"":""msluufbp114g1"",""title"":""Test"",""start"":""2026-08-10"",""end"":""2026-08-14"",""done"":false,""dependsOn"":[],""assignees"":[""p_ap"",""p_ed""],""progress"":0},{""id"":""mslv6h76cmx8k"",""title"":""Test 2"",""start"":""2026-08-24"",""end"":""2026-09-04"",""done"":false,""dependsOn"":[""msluufbp114g1""],""assignees"":[""p_ap""],""progress"":41},{""id"":""mslw4l3qp1v18"",""title"":""Test 3"",""start"":""2026-09-14"",""end"":""2026-09-22"",""done"":false,""dependsOn"":[""m_mslrvh7hjau1e""],""assignees"":[],""progress"":0},{""id"":""msoltaa1itx48"",""title"":""Gehen"",""start"":""2026-09-23"",""end"":""2026-09-25"",""done"":false,""progress"":0,""dependsOn"":[""mslw4l3qp1v18""],""assignees"":[""p_ws""]}]}" +22-4027;Sporthalle Soest;- SV und VOB Abnahme erfolgt.

- Nachprüfung VOB 24.07

- Keine Infos über Nachprüfung

- 22.07 Aufschaltung BMA und Amok

- KW 31 VOB Abnahme

";;;;;;;;;;;;;;;;;;;100%;100%;100%;;100%;100%;100%;95%;;Aktive Projekte;7; +23-4070;Umbau Bürogebäude NEW, MV10;"- neue NSHV anbieten(Warten auf Infos),

- 28.07 Sachverständiger Abnahme ELT&SiBe

- 30.07 Sachverständigen Abnahme BMA

- SV-Abnahmen 15 & 16.07: nicht abgenommen

- Notwendiges Leerrohr für Leuchten im Vordach ist zu klären.

- Abgabe Kostenberechnung bis Ende KW29

- LV Fertig bis Ende KW 32

;;;;;;;;;;;;;;;;;;;100%;100%;100%;;95%;85%;0%;;;Aktive Projekte;12; +25-4003;Märkische Bank Boele;- Feininstallation

- Ab KW30 Einbringung Tresore

;;;;;;;;;;;;;;;;;;;100%;100%;100%;;100%;100%;100%;80%;;Aktive Projekte;13; +25-4028;TenBrinke, Amprion, Wietmarschen;;;;;;;;;;;;;;;;;;;;100%;100%;100%;;95%;;;;;Aktive Projekte;14; +25-4028-1;TenBrinke, Amprion, Meerbusch;;;;;;;;;;;;;;;;;;;;100%;100%;100%;;95%;;;;;Aktive Projekte;15; +25-4028-2;TenBrinke, Amprion, Gelsenkirchen;;;;;;;;;;;;;;;;;;;;100%;100%;100%;;95%;;;;;Aktive Projekte;16; +26-4018;TUI Immobilien GmbH Salzgitter;;;;;;;;;;;;;;;;;;;;50%;;;;;;;;;Aktive Projekte;17; +26-4023;HA Rettungsw. Nahmer Gasst. - Los 1;;;;;;;;;;;;;;;;;;;;;;;;;;;;;In Anbahnung;0; +26-4024;HA Rettungsw. Dahl Am Obergr. - Los 2;;;;;;;;;;;;;;;;;;;;;;;;;;;;;In Anbahnung;1; +26-4025;HA, SeePark Hengstey;- LPH2 erfolgt, weitere Arbeiten folgen.;;;;;;;;;;;;;;;;;;;100%;100%;;;;;;;;Aktive Projekte;18; +26-4026;Stadt Hemer, Anbau OGS Oesetalschule;"- Bearbeitung LPH3 in Absprache mit Achitektur S+D";;;;;;;;;;;;;;;;;;;100%;100%;;;;;;;;Aktive Projekte;19; +26-4046;AXA Außenbeleuchtung;- Warten auf Unterlagen (Grundlagen & Vorplanung);;;;;;;;;;;;;;;;;;;10%;;;;;;;;;Aktive Projekte;20; +;KFW Köln/Bonn Sicherheitskonzept;- Auftrag erhalten;;;;;;;;;;;;;;;;;;;;;;;;;;;;In Anbahnung;2; +;Swisstal;;;;;;;;;;;;;;;;;;;;;;;;;;;;;In Anbahnung;3;"{""start"":"""",""end"":"""",""milestones"":[],""people"":[],""progress"":0}" +;Plancodierung/Benennung;- Von Rieke erstellt. Info folgt ? KW31?;;;;;;;;;;;;;;;;;;;;;;;;;;;;Allgemein;0; +;Ordnerstruktur;- in Projekthilfen _Ordnerstruktur abgelegt, ist in Anlehnung an Leitfaden aufgebaut;;;;;;;;;;;;;;;;;;;;;;;;;;;;Allgemein;1; +26-4042;Zanderstraße 7, PV-Anlage;- 82 kWp Anlage angefragt. Preisschätzung wird angefertigt;;;;;;;;;;;;;;;;;;;100%;80%;;;;80%;;;;Kleine Projekte;1; \ No newline at end of file diff --git a/sessions/ELT/_people.csv b/sessions/ELT/_people.csv new file mode 100644 index 0000000..14d8eec --- /dev/null +++ b/sessions/ELT/_people.csv @@ -0,0 +1,14 @@ +NAME;Rollen;Voller Name;E-Mail;Abwesenheiten +AK;Planung;Alex Kenne;a.kenne@rauschenberg-ing.de;[] +AP;Planung;Alexander Plum;a.plum@rauschenberg-ing.de;[] +ED;Planung,Projektleitung,Bauüberwachung;Erik Dunin;e.dunin@rauschenberg-ing.de;[] +HR;Planung,Bauüberwachung;Hermann Rollecke;h.roellecke@rauschenberg-ing.de;[] +MK;Planung,Projektleitung;Maximilian Kriener;m.kriener@rauschenberg-ing.de;[] +RR;Planung,Projektleitung;Robert Röllecke;r.roellecke@rauschenberg-ing.de;[] +SE;Planung;Steven Esche;s.esche@rauschenberg-ing.de;[] +SG;Planung,Projektleitung;Steffen Gaida;s.gaida@rauschenberg-ing.de;[] +SK;Planung,Bauüberwachung;Simon Kunigk;s.kunigk@rauschenberg-ing.de;[] +SP;Planung,Projektleitung,Bauüberwachung;Sebastian Pöttinger;s.poettinger@rauschenberg-ing.de;[] +THK;Planung,Projektleitung,Bauüberwachung;Thorsten Kramp;t.kramp@rauschenberg-ing.de;[] +TW;Planung,Projektleitung;Thorsten Werner;t.werner@rauschenberg-ing.de;[] +WS;Planung;Winfried Sältzer;w.sältzer@rauschenberg-ing.de;[] \ No newline at end of file diff --git a/sessions/HLS/KW_30___2026.csv b/sessions/HLS/KW_30___2026.csv new file mode 100644 index 0000000..26fd2d1 --- /dev/null +++ b/sessions/HLS/KW_30___2026.csv @@ -0,0 +1,9 @@ +WOCHE;KW 30 / 2026;2026-07-24;1 +PERSONEN;;;AP|Planung|AP;SK|Planung|SK;AK|Planung|AK;ED|Planung|ED;SE|Planung|SE;THK|Planung|THK;SP|Planung|SP;SG|Planung|SG;TW|Planung|TW;RR|Planung|RR;MK|Planung|MK;HR|Planung|HR;;;;;;;;;;; +Pr.-Nr.;Bezeichnung;Status;AP;SK;AK;ED;SE;THK;SP;SG;TW;RR;MK;HR;LPH 1;LPH 2;LPH 3;LPH 4;LPH 5;LPH 6;LPH 7;LPH 8;W+M;Gruppe;Index;Plan +ANWESENHEIT;;;;;;;;;;;;;;;;;;;;;;;;; +18-4007;Janusz-Korczak-Gesamtsch. Bottrop;LPH5 als Vorabzug raus. NW-Räume vorauss. August.;;;;;;;;;;;;;100%;100%;100%;;100%;100%;100%;95%;;Aktive Projekte;0; +21-4030;NSHV Köln Immobilienprüfung in Hof;Thorsten W. klärt und übernimmt Schriftverkehr. LV liegt zur Sichtung bei T.W.;;;;;;;;;;;;;100%;100%;100%;;100%;100%;;;;Aktive Projekte;1; +22-4056;Gymnasium Hemer;;;;;;;;;;;;;;100%;100%;100%;;100%;100%;100%;90%;;Aktive Projekte;2; +22-4066;DSW 21 – Umbau E-Mobilität;Elt-Montagen ab KW 33.;;;;;;;;;;;;;100%;100%;100%;;100%;100%;100%;20%;;Aktive Projekte;3; +24-4043;S-K ODL-Heim Sanierung Krefeld;Voraussichtlich LV-Abgabe.;;;;;;;;;;;;;100%;100%;100%;;100%;;;;;Aktive Projekte;4; \ No newline at end of file diff --git a/sessions/HLS/KW_32___2026.csv b/sessions/HLS/KW_32___2026.csv new file mode 100644 index 0000000..17de85e --- /dev/null +++ b/sessions/HLS/KW_32___2026.csv @@ -0,0 +1,11 @@ +WOCHE;KW 32 / 2026;2026-08-05; +PERSONEN;;;MZ|Planung|Markus Zimmermann;FP|Planung|Frank Pietruschka;TK|Planung|Tim Küppers;RR|Projektleitung|Robert Röllecke;AS|Bauüberwachung|Andreas Simon;SL|Bauüberwachung|Steffan Licata;;;;;;;;;;; +Pr.-Nr.;Bezeichnung;Status;MZ;FP;TK;RR;AS;SL;LPH 1;LPH 2;LPH 3;LPH 4;LPH 5;LPH 6;LPH 7;LPH 8;W+M;Gruppe;Index;Plan +ANWESENHEIT;;;;;;;;;;;;;;;;;;; +24-4101;Krankenhaus Köln, Heizungsmodernisierung;- Austausch Kesselhaus geplant;;;;;;;100%;100%;100%;;100%;100%;;90%;;Aktive Projekte;0;"{""start"":"""",""end"":"""",""todos"":[{""id"":""msmzj493z5gie"",""title"":""Abgabe"",""start"":""2026-08-10"",""end"":""2026-08-28"",""done"":false,""progress"":23,""dependsOn"":[],""assignees"":[""p_fp""]}],""milestones"":[{""id"":""msmzi2pbbsv1s"",""name"":""sxcdv"",""date"":""2026-08-15"",""dependsOn"":[],""position"":""""}],""people"":[],""progress"":0}" +24-4102;Bürokomplex Dortmund, Lüftung;- Filterkonzept in Abstimmung;;;;;;;100%;100%;100%;;95%;;;;;Aktive Projekte;1;"{""start"":"""",""end"":"""",""todos"":[],""milestones"":[{""id"":""msmzhc7wo8alc"",""name"":""Test 123"",""date"":""2026-08-10"",""dependsOn"":[],""position"":""""}],""people"":[],""progress"":0}" +26-4105;Wohnanlage Essen, Regenwasser;- Planung Drainage;;;;;;;100%;100%;;;;;;;;Aktive Projekte;4; +;Badmodernisierung Privatkunde;- Angebot erstellt;;;;;;;;;;;100%;;;;;In Anbahnung;0; +;Wärmepumpen-Studie;- Erstgespräch durchgeführt;;;;;;;100%;;;;;;;;;In Anbahnung;1; +;HLS Planungscheckliste;- Vorlage aktualisiert;;;;;;;100%;;;;;;;;;Allgemein;0; +21-4001;Feuerwehrgeräteh. Rodenkirchen;;;;;;;;;;;;;;;;;Aktive Projekte;5; \ No newline at end of file diff --git a/sessions/HLS/_people.csv b/sessions/HLS/_people.csv new file mode 100644 index 0000000..8fe1e2d --- /dev/null +++ b/sessions/HLS/_people.csv @@ -0,0 +1,7 @@ +NAME;Rollen;Voller Name;E-Mail;Abwesenheiten +AS;Bauüberwachung;Andreas Simon;[];[] +FP;Planung;Frank Pietruschka;[];[] +MZ;Planung;Markus Zimmermann;[];[] +RR;Planung,Projektleitung;Robert Röllecke;[];[] +SL;Bauüberwachung;Steffan Licata;[];[] +TK;Planung;Tim Küppers;[];[] \ No newline at end of file

Zugriff erforderlich

${esc(entry.person.fullName)} (${r})

${anbahnungBadge}

Projektübersicht ${DEPARTMENTS[currentDepartment].label}

Projektplan

Meilenstein

TODO

Abwesenheiten

${esc(l.person.name)} (${esc(l.roles.join(' / '))})