167 lines
7.1 KiB
HTML
167 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<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">Zählt Projektzuordnungen (Haupt=1 · Optional=0,5 · Kleine Projekte=0,3 · In Anbahnung wird nicht gezählt).</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">
|
||
<input type="text" id="newProjNr" placeholder="Projekt-Nr. (z.B. 26-4001)">
|
||
<input type="text" id="newProjName" placeholder="Projektbezeichnung">
|
||
<select id="newProjGroup">
|
||
<option>Aktive Projekte</option>
|
||
<option>Kleine Projekte</option>
|
||
<option>In Anbahnung</option>
|
||
<option>Allgemein</option>
|
||
</select>
|
||
<button onclick="addProjectToList()">+ Projekt hinzufügen</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>
|
||
|
||
<script src="main.v2.js"></script>
|
||
</body>
|
||
</html> |