projektuebersicht/public/Test.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/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>

    <hr class="menu-divider">

    <div class="menu-section">
      <div class="menu-label">Backup</div>
      <button class="secondary" onclick="exportCSV()">CSV Export</button>
      <button class="secondary" onclick="downloadBackup()">DB Backup</button>
      <button class="secondary" onclick="importDb()">DB Import</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"></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/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/csv.js?v=1"></script>
<script src="/js/backup.js?v=1"></script>
<script src="/js/import.js?v=1"></script>
<script src="/js/init.js?v=5"></script>
</body>
</html>