244 lines
10 KiB
HTML
244 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<!--
|
||
HAUPTSEITE der Projektübersicht (wird vom Express-Server unter "/" ausgeliefert).
|
||
Die Seite zeigt die vier Tabs Projektboard, Auslastung, Projekte und Projektbeteiligte
|
||
und verwaltet wöchentliche Sitzungen (Sitzungswahl, -anlage, -duplikat und -löschung im
|
||
seitlichen Menü) je Abteilung (ELT, HLS, Architektur). Sie lädt das gemeinsame Stylesheet
|
||
styles.css sowie der Reihe nach die Module js/globals.js, js/utils.js, js/ui.js,
|
||
js/date-picker.js, js/csv.js, js/server.js, js/store.js, js/weeks.js, danach die
|
||
tab-spezifischen Module js/board/board.js, js/people/people.js,
|
||
js/projects/projects.js, js/load/load.js sowie js/gantt.js, js/showmode.js,
|
||
js/tabs-auth.js, js/pdf.js und js/init.js; crypto-js und pdfmake kommen von einem
|
||
CDN. Über openProjectPlan()
|
||
aus js/gantt.js öffnet diese Seite die Projektplan-Ansicht project-plan.html in einem
|
||
neuen Tab, die nur die gemeinsamen Module plus die js/plan/*-Module lädt.
|
||
-->
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Projektübersicht Elektro</title>
|
||
<link rel="stylesheet" href="/styles.css?v=3">
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.10/pdfmake.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.10/vfs_fonts.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="dept-tabs">
|
||
<button class="menu-corner-btn" onclick="toggleHeader()" title="Menü öffnen/schließen" aria-expanded="false" aria-controls="headerMenu">
|
||
<span class="header-toggle-icon">☰</span>
|
||
</button>
|
||
<div class="dept-tabs-center">
|
||
<button class="dept-tab active" data-dept="ELT" onclick="switchDepartment('ELT')">ELT</button>
|
||
<button class="dept-tab" data-dept="HLS" onclick="switchDepartment('HLS')">HLS</button>
|
||
<button class="dept-tab" data-dept="ARCH" onclick="switchDepartment('ARCH')">Architektur</button>
|
||
</div>
|
||
</div>
|
||
|
||
<header>
|
||
<div class="header-bar">
|
||
<h1 id="pageTitle">Projektübersicht Elektro</h1>
|
||
<img src="/dein_bild.ico" alt="Logo" class="header-logo">
|
||
</div>
|
||
</header>
|
||
|
||
<div id="headerMenu" class="side-menu" aria-hidden="true">
|
||
<div class="side-menu-header">
|
||
<span>Menü</span>
|
||
<div class="side-menu-header-actions">
|
||
<button class="theme-toggle-circle" id="themeToggle" onclick="toggleTheme()" title="Hell/Dunkel umschalten">
|
||
<span id="themeIcon">🌙</span>
|
||
</button>
|
||
<button class="header-toggle secondary" onclick="toggleHeader()" title="Menü schließen">
|
||
<span class="header-toggle-icon">✕</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="side-menu-content">
|
||
<div class="menu-section">
|
||
<div class="menu-label">Sitzung (KW)</div>
|
||
<select id="weekSelect" onchange="switchWeek(this.value)"></select>
|
||
<div id="weekDateDisplay" class="week-date"></div>
|
||
</div>
|
||
|
||
<hr class="menu-divider">
|
||
|
||
<div class="menu-section">
|
||
<div class="menu-label">Sitzungen verwalten</div>
|
||
<button onclick="newWeek()">+ Neue Sitzung</button>
|
||
<button class="secondary" onclick="cloneWeek()">Sitzung duplizieren</button>
|
||
<button class="danger" onclick="deleteWeek()">Sitzung löschen</button>
|
||
</div>
|
||
|
||
<hr class="menu-divider">
|
||
|
||
<div class="menu-section">
|
||
<div class="menu-label">Präsentation</div>
|
||
<button class="secondary" onclick="exportPDF()">PDF Export</button>
|
||
<button class="secondary" onclick="startShowMode()">Show Mode</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Show Mode Overlay -->
|
||
<div id="showModeOverlay" class="show-mode-overlay" style="display:none;" onclick="pauseShowMode()">
|
||
<div class="show-mode-header">
|
||
<span id="showModeTitle">Show Mode</span>
|
||
<button class="secondary" onclick="stopShowMode()">Beenden</button>
|
||
</div>
|
||
<div id="showModeContent" class="show-mode-content"></div>
|
||
<div id="showModePaused" class="show-mode-paused" style="display:none;">Pausiert – berühre zum Fortsetzen</div>
|
||
</div>
|
||
<div id="sideMenuBackdrop" class="side-menu-backdrop" onclick="toggleHeader()"></div>
|
||
|
||
<div class="tabs">
|
||
<button class="tab active" data-tab="board" onclick="showTab('board')">Projektboard</button>
|
||
<button class="tab" data-tab="load" onclick="showTab('load')">Auslastung</button>
|
||
<button class="tab" data-tab="projects" onclick="showTab('projects')">Projekte</button>
|
||
<button class="tab" data-tab="people" onclick="showTab('people')">Projektbeteiligte</button>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<!-- BOARD -->
|
||
<div id="board">
|
||
<div class="legend">
|
||
<span><span class="swatch" style="background:#2f855a"></span> Beteiligt X</span>
|
||
<span><span class="swatch" style="background:#d69e2e"></span> Optional (X)</span>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table id="boardTable"></table>
|
||
</div>
|
||
<div id="boardLegend" style="margin-top:16px; padding:12px; background:#f7fafc; border-radius:6px; font-size:12px;"></div>
|
||
</div>
|
||
|
||
<!-- LOAD -->
|
||
<div id="load" style="display:none">
|
||
<div class="section-title">Auslastung der Projektbeteiligten</div>
|
||
<div class="toolbar" style="margin-bottom:12px">
|
||
<label>Auswertung:</label>
|
||
<select id="loadScope" onchange="renderLoad()">
|
||
<option value="current">Aktuelle Sitzung</option>
|
||
<option value="all">Alle Sitzungen (Historie)</option>
|
||
</select>
|
||
<span class="hint">Auswertung über den rollenspezifischen Gewichtungsfaktor je Leistungsphase.</span>
|
||
</div>
|
||
<div class="load-grid" id="loadGrid"></div>
|
||
</div>
|
||
|
||
<!-- PROJECTS -->
|
||
<div id="projects" style="display:none">
|
||
<div class="section-title">Projekte verwalten</div>
|
||
<div class="toolbar" style="margin-bottom:12px">
|
||
<button onclick="openNewProjModal()">+ Neues Projekt</button>
|
||
</div>
|
||
<div id="projectsList"></div>
|
||
</div>
|
||
|
||
<!-- PEOPLE -->
|
||
<div id="people" style="display:none">
|
||
<div class="section-title">Projektbeteiligte verwalten</div>
|
||
<div class="toolbar" style="margin-bottom:12px; align-items: flex-start;">
|
||
<input type="text" id="newPersonName" placeholder="Kürzel (z.B. AP)" style="width:100px">
|
||
<input type="text" id="newPersonFullName" placeholder="Voller Name (z.B. Anton Peters)">
|
||
<input type="text" id="newPersonEmail" placeholder="E-Mail (z.B. anton.peters@rauschenberg-ing.de)">
|
||
<div class="role-checkboxes">
|
||
<label><input type="checkbox" name="newPersonRoles" value="Planung"> Planung</label>
|
||
<label><input type="checkbox" name="newPersonRoles" value="Projektleitung"> Projektleitung</label>
|
||
<label><input type="checkbox" name="newPersonRoles" value="Bauüberwachung"> Bauüberwachung</label>
|
||
</div>
|
||
<button onclick="addPerson()">+ Person hinzufügen</button>
|
||
</div>
|
||
<div id="peopleList"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Passwort Modal -->
|
||
<div class="modal-bg" id="passwordModal">
|
||
<div class="modal">
|
||
<h2>Zugriff erforderlich</h2>
|
||
<p style="color:#666;margin-bottom:12px">Bitte geben Sie das Passwort ein, um auf diesen Bereich zuzugreifen.</p>
|
||
<div class="form-row">
|
||
<label>Passwort</label>
|
||
<input type="password" id="passwordInput" placeholder="Passwort eingeben" onkeypress="if(event.key==='Enter') confirmPassword()">
|
||
</div>
|
||
<div class="toolbar">
|
||
<button onclick="confirmPassword()">Bestätigen</button>
|
||
<button class="secondary" onclick="closePasswordModal()">Abbrechen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Aufwand je Leistungsphase Modal -->
|
||
<div class="modal-bg" id="lpModal" style="display:none">
|
||
<div class="modal">
|
||
<h2>Aufwand je Leistungsphase</h2>
|
||
<p style="color:#888;margin-bottom:6px" id="lpModalProject"></p>
|
||
<p class="hint" style="margin-bottom:10px">
|
||
Rollenbezogene Gewichtungsfaktoren je Leistungsphase (Standardwerte laut
|
||
Vorlage im Code). Die amtierende Leistungsphase wird pro Projekt im Tab
|
||
„Projekte" gewählt.
|
||
</p>
|
||
<div id="lpModalRows"></div>
|
||
<div class="toolbar" style="margin-top:12px">
|
||
<button onclick="saveLpModal()">Speichern</button>
|
||
<button class="secondary" onclick="closeLpModal()">Abbrechen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Neues Projekt Modal (inkl. LP-Aufwand) -->
|
||
<div class="modal-bg" id="newProjModal" style="display:none">
|
||
<div class="modal">
|
||
<h2>Neues Projekt</h2>
|
||
<div class="form-row">
|
||
<label>Projekt-Nr.</label>
|
||
<input type="text" id="newProjNr" placeholder="z. B. 26-4001" style="width:100%">
|
||
</div>
|
||
<div class="form-row">
|
||
<label>Bezeichnung</label>
|
||
<input type="text" id="newProjName" placeholder="Projektbezeichnung" style="width:100%">
|
||
</div>
|
||
<div class="form-row">
|
||
<label>Gruppe</label>
|
||
<select id="newProjGroup" style="width:100%">
|
||
<option>Aktive Projekte</option>
|
||
<option>Kleine Projekte</option>
|
||
<option>In Anbahnung</option>
|
||
<option>Allgemein</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label>Aktive Leistungsphase</label>
|
||
<select id="newProjActiveLP" style="width:100%"></select>
|
||
</div>
|
||
<p class="hint" style="margin:8px 0 10px">
|
||
Rollenbezogener Gewichtungsfaktor je Leistungsphase (Standardwerte laut
|
||
Vorlage im Code).
|
||
</p>
|
||
<div id="newProjLpRows"></div>
|
||
<div class="toolbar" style="margin-top:12px">
|
||
<button onclick="saveNewProj()">Anlegen</button>
|
||
<button class="secondary" onclick="closeNewProjModal()">Abbrechen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/js/globals.js?v=5"></script>
|
||
<script src="/js/utils.js?v=5"></script>
|
||
<script src="/js/ui.js?v=5"></script>
|
||
<script src="/js/date-picker.js?v=5"></script>
|
||
<script src="/js/csv.js?v=5"></script>
|
||
<script src="/js/server.js?v=5"></script>
|
||
<script src="/js/store.js?v=5"></script>
|
||
<script src="/js/weeks.js?v=5"></script>
|
||
<script src="/js/board/board.js?v=6"></script>
|
||
<script src="/js/people/people.js?v=6"></script>
|
||
<script src="/js/projects/projects.js?v=6"></script>
|
||
<script src="/js/load/load.js?v=6"></script>
|
||
<script src="/js/gantt.js?v=5"></script>
|
||
<script src="/js/showmode.js?v=5"></script>
|
||
<script src="/js/tabs-auth.js?v=5"></script>
|
||
<script src="/js/pdf.js?v=5"></script>
|
||
<script src="/js/init.js?v=5"></script>
|
||
</body>
|
||
</html> |