1234 Zeilen
57 KiB
HTML
1234 Zeilen
57 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="TaskMate - Aufgaben einfach verwalten">
|
|
<meta name="theme-color" content="#000000">
|
|
|
|
<title>TaskMate</title>
|
|
|
|
<!-- Poppins Font -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" href="css/variables.css">
|
|
<link rel="stylesheet" href="css/base.css">
|
|
<link rel="stylesheet" href="css/components.css">
|
|
<link rel="stylesheet" href="css/board.css">
|
|
<link rel="stylesheet" href="css/modal.css">
|
|
<link rel="stylesheet" href="css/calendar.css">
|
|
<link rel="stylesheet" href="css/list.css">
|
|
<link rel="stylesheet" href="css/admin.css">
|
|
<link rel="stylesheet" href="css/proposals.css">
|
|
<link rel="stylesheet" href="css/notifications.css">
|
|
<link rel="stylesheet" href="css/gitea.css">
|
|
<link rel="stylesheet" href="css/responsive.css">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/svg+xml" href="assets/icons/task.svg">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Login Screen -->
|
|
<div id="login-screen" class="login-screen">
|
|
<div class="login-container">
|
|
<div class="login-header">
|
|
<h1>TaskMate</h1>
|
|
<p>Melden Sie sich an, um fortzufahren</p>
|
|
</div>
|
|
|
|
<form id="login-form" class="login-form">
|
|
<div class="form-group">
|
|
<label for="login-username">E-Mail</label>
|
|
<input type="text" id="login-username" name="username" required autocomplete="email" autofocus placeholder="benutzer@beispiel.de">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="login-password">Passwort</label>
|
|
<input type="password" id="login-password" name="password" required autocomplete="current-password">
|
|
</div>
|
|
|
|
<div id="login-error" class="error-message hidden"></div>
|
|
|
|
<button type="submit" class="btn btn-primary btn-block">
|
|
<span class="btn-text">Anmelden</span>
|
|
<span class="btn-loading hidden">
|
|
<span class="spinner"></span>
|
|
</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Admin Screen -->
|
|
<div id="admin-screen" class="admin-screen">
|
|
<header class="admin-header">
|
|
<h1>
|
|
<svg viewBox="0 0 24 24"><path d="M12 2a5 5 0 0 1 5 5v2a5 5 0 0 1-10 0V7a5 5 0 0 1 5-5zm-7 18a7 7 0 0 1 14 0" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
Benutzerverwaltung
|
|
</h1>
|
|
<button id="admin-logout-btn" class="btn btn-secondary">Abmelden</button>
|
|
</header>
|
|
<div class="admin-content">
|
|
<div class="admin-users-section">
|
|
<div class="admin-users-header">
|
|
<h2>Benutzer</h2>
|
|
<button id="btn-new-user" class="btn btn-primary">Neuer Benutzer</button>
|
|
</div>
|
|
<div id="admin-users-list" class="admin-users-list">
|
|
<!-- Users will be rendered here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upload-Einstellungen -->
|
|
<div class="admin-upload-section">
|
|
<div class="admin-section-header">
|
|
<h2>
|
|
<svg viewBox="0 0 24 24" width="20" height="20"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
Upload-Einstellungen
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Maximale Dateigröße -->
|
|
<div class="admin-upload-size">
|
|
<label for="upload-max-size">Maximale Dateigröße</label>
|
|
<div class="upload-size-input">
|
|
<input type="number" id="upload-max-size" min="1" max="100" value="15">
|
|
<span class="upload-size-unit">MB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dateitypen nach Kategorien -->
|
|
<div class="admin-upload-types">
|
|
<h3>Erlaubte Dateiformate</h3>
|
|
|
|
<!-- Bildformate -->
|
|
<div class="upload-category" data-category="images">
|
|
<div class="upload-category-header">
|
|
<label class="upload-category-toggle">
|
|
<input type="checkbox" id="upload-cat-images" checked>
|
|
<span class="upload-category-title">Bildformate</span>
|
|
</label>
|
|
</div>
|
|
<div class="upload-category-types">
|
|
<span class="upload-type-tag" data-type="image/jpeg">JPEG</span>
|
|
<span class="upload-type-tag" data-type="image/png">PNG</span>
|
|
<span class="upload-type-tag" data-type="image/gif">GIF</span>
|
|
<span class="upload-type-tag" data-type="image/webp">WebP</span>
|
|
<span class="upload-type-tag" data-type="image/svg+xml">SVG</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dokumentformate -->
|
|
<div class="upload-category" data-category="documents">
|
|
<div class="upload-category-header">
|
|
<label class="upload-category-toggle">
|
|
<input type="checkbox" id="upload-cat-documents" checked>
|
|
<span class="upload-category-title">Dokumentformate</span>
|
|
</label>
|
|
</div>
|
|
<div class="upload-category-types">
|
|
<span class="upload-type-tag" data-type="application/pdf">PDF</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Office-Formate -->
|
|
<div class="upload-category" data-category="office">
|
|
<div class="upload-category-header">
|
|
<label class="upload-category-toggle">
|
|
<input type="checkbox" id="upload-cat-office" checked>
|
|
<span class="upload-category-title">Office-Formate</span>
|
|
</label>
|
|
</div>
|
|
<div class="upload-category-types">
|
|
<span class="upload-type-tag" data-type="application/msword">DOC</span>
|
|
<span class="upload-type-tag" data-type="application/vnd.openxmlformats-officedocument.wordprocessingml.document">DOCX</span>
|
|
<span class="upload-type-tag" data-type="application/vnd.ms-excel">XLS</span>
|
|
<span class="upload-type-tag" data-type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">XLSX</span>
|
|
<span class="upload-type-tag" data-type="application/vnd.ms-powerpoint">PPT</span>
|
|
<span class="upload-type-tag" data-type="application/vnd.openxmlformats-officedocument.presentationml.presentation">PPTX</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Textformate -->
|
|
<div class="upload-category" data-category="text">
|
|
<div class="upload-category-header">
|
|
<label class="upload-category-toggle">
|
|
<input type="checkbox" id="upload-cat-text" checked>
|
|
<span class="upload-category-title">Textformate</span>
|
|
</label>
|
|
</div>
|
|
<div class="upload-category-types">
|
|
<span class="upload-type-tag" data-type="text/plain">TXT</span>
|
|
<span class="upload-type-tag" data-type="text/csv">CSV</span>
|
|
<span class="upload-type-tag" data-type="text/markdown">Markdown</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Archivformate -->
|
|
<div class="upload-category" data-category="archives">
|
|
<div class="upload-category-header">
|
|
<label class="upload-category-toggle">
|
|
<input type="checkbox" id="upload-cat-archives" checked>
|
|
<span class="upload-category-title">Archivformate</span>
|
|
</label>
|
|
</div>
|
|
<div class="upload-category-types">
|
|
<span class="upload-type-tag" data-type="application/zip">ZIP</span>
|
|
<span class="upload-type-tag" data-type="application/x-rar-compressed">RAR</span>
|
|
<span class="upload-type-tag" data-type="application/x-7z-compressed">7Z</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Datenformate -->
|
|
<div class="upload-category" data-category="data">
|
|
<div class="upload-category-header">
|
|
<label class="upload-category-toggle">
|
|
<input type="checkbox" id="upload-cat-data" checked>
|
|
<span class="upload-category-title">Datenformate</span>
|
|
</label>
|
|
</div>
|
|
<div class="upload-category-types">
|
|
<span class="upload-type-tag" data-type="application/json">JSON</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Speichern-Button -->
|
|
<div class="admin-upload-actions">
|
|
<button id="btn-save-upload-settings" class="btn btn-primary">Einstellungen speichern</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main App -->
|
|
<div id="app-screen" class="app hidden">
|
|
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<h1 class="logo">TaskMate</h1>
|
|
|
|
<!-- Project Selector -->
|
|
<div class="project-selector">
|
|
<select id="project-select" class="project-select">
|
|
<option value="">Projekt wählen...</option>
|
|
</select>
|
|
<button id="btn-edit-project" class="btn btn-icon" title="Projekt bearbeiten">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2" fill="none"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
</button>
|
|
<button id="btn-new-project" class="btn btn-icon" title="Neues Projekt">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M12 4v16m-8-8h16" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-center">
|
|
<!-- View Tabs -->
|
|
<nav class="view-tabs">
|
|
<button class="view-tab active" data-view="board">Board</button>
|
|
<button class="view-tab" data-view="list">Liste</button>
|
|
<button class="view-tab" data-view="calendar">Kalender</button>
|
|
<button class="view-tab" data-view="proposals">Genehmigung</button>
|
|
<button class="view-tab" data-view="gitea">Gitea</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<!-- Search -->
|
|
<div class="search-container">
|
|
<svg class="search-icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" fill="none"/><path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2"/></svg>
|
|
<input type="text" id="search-input" class="search-input" placeholder="Suchen...">
|
|
<button type="button" id="search-clear" class="search-clear hidden" title="Suche zurücksetzen (Esc)">
|
|
<svg viewBox="0 0 24 24" width="16" height="16"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
|
</button>
|
|
<div id="search-spinner" class="search-spinner hidden"></div>
|
|
</div>
|
|
|
|
<!-- Connection Status -->
|
|
<div id="connection-status" class="connection-status online" title="Verbunden">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Online</span>
|
|
</div>
|
|
|
|
<!-- Notification Bell -->
|
|
<div class="notification-bell" id="notification-bell">
|
|
<button id="notification-btn" class="btn btn-icon" title="Benachrichtigungen">
|
|
<svg class="notification-icon" viewBox="0 0 24 24">
|
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M13.73 21a2 2 0 0 1-3.46 0" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<span id="notification-badge" class="notification-badge hidden">0</span>
|
|
</button>
|
|
<div id="notification-dropdown" class="notification-dropdown hidden">
|
|
<div class="notification-header">
|
|
<h3>Benachrichtigungen</h3>
|
|
<button id="btn-mark-all-read" class="btn btn-text">Alle gelesen</button>
|
|
</div>
|
|
<div id="notification-list" class="notification-list">
|
|
<!-- Notifications rendered here -->
|
|
</div>
|
|
<div id="notification-empty" class="notification-empty hidden">
|
|
<svg class="notification-empty-icon" viewBox="0 0 24 24">
|
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" stroke="currentColor" stroke-width="2" fill="none"/>
|
|
<path d="M13.73 21a2 2 0 0 1-3.46 0" stroke="currentColor" stroke-width="2" fill="none"/>
|
|
</svg>
|
|
<p>Keine Benachrichtigungen</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Menu -->
|
|
<div class="user-menu">
|
|
<button id="user-menu-btn" class="user-avatar">
|
|
<span id="user-initial">U</span>
|
|
</button>
|
|
<div id="user-dropdown" class="user-dropdown hidden">
|
|
<div class="user-info">
|
|
<span id="user-name">Benutzer</span>
|
|
<span id="user-role">Angemeldet</span>
|
|
</div>
|
|
<div class="dropdown-divider"></div>
|
|
<button id="btn-settings" class="dropdown-item">Einstellungen</button>
|
|
<div class="dropdown-divider"></div>
|
|
<button id="btn-logout" class="dropdown-item text-danger">Abmelden</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Offline Banner -->
|
|
<div id="offline-banner" class="offline-banner hidden">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M1 1l22 22M16.72 11.06A10.94 10.94 0 0 1 19 12.55M5 12.55a10.94 10.94 0 0 1 5.17-2.39M10.71 5.05A16 16 0 0 1 22.58 9M1.42 9a15.91 15.91 0 0 1 4.7-2.88M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
<span>Offline - Änderungen werden bei Wiederverbindung synchronisiert</span>
|
|
</div>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="main-content">
|
|
|
|
<!-- Board View -->
|
|
<div id="view-board" class="view view-board active">
|
|
<!-- Filter Bar -->
|
|
<div class="filter-bar">
|
|
<div class="filter-group">
|
|
<label>Filter:</label>
|
|
<select id="filter-assignee" class="filter-select">
|
|
<option value="">Alle Benutzer</option>
|
|
</select>
|
|
<select id="filter-priority" class="filter-select">
|
|
<option value="">Alle Prioritäten</option>
|
|
<option value="high">Hoch</option>
|
|
<option value="medium">Mittel</option>
|
|
<option value="low">Niedrig</option>
|
|
</select>
|
|
<select id="filter-labels" class="filter-select">
|
|
<option value="">Alle Labels</option>
|
|
</select>
|
|
<select id="filter-due" class="filter-select">
|
|
<option value="">Alle Fälligkeiten</option>
|
|
<option value="overdue">Überfällig</option>
|
|
<option value="today">Heute</option>
|
|
<option value="week">Diese Woche</option>
|
|
<option value="none">Ohne Datum</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-actions">
|
|
<button id="btn-clear-filters" class="btn btn-text">Filter zurücksetzen</button>
|
|
<button id="btn-show-archived" class="btn btn-text">Archiv anzeigen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Week Strip Calendar -->
|
|
<div id="week-strip" class="week-strip">
|
|
<button id="week-strip-prev" class="week-strip-nav" title="Vorherige Woche">
|
|
<svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
</button>
|
|
<div id="week-strip-days" class="week-strip-days">
|
|
<!-- Days will be rendered by JavaScript -->
|
|
</div>
|
|
<button id="week-strip-next" class="week-strip-nav" title="Nächste Woche">
|
|
<svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
</button>
|
|
<button id="week-strip-today" class="week-strip-today btn btn-text" title="Zur aktuellen Woche">Heute</button>
|
|
</div>
|
|
|
|
<!-- Stats Bar -->
|
|
<div class="board-stats-bar">
|
|
<div class="board-stat">
|
|
<span class="board-stat-icon stat-open">
|
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
</span>
|
|
<span class="board-stat-value" id="board-stat-open">0</span>
|
|
<span class="board-stat-label">Offen</span>
|
|
</div>
|
|
<div class="board-stat">
|
|
<span class="board-stat-icon stat-progress">
|
|
<svg viewBox="0 0 24 24"><path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48 2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48 2.83-2.83" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
</span>
|
|
<span class="board-stat-value" id="board-stat-progress">0</span>
|
|
<span class="board-stat-label">In Arbeit</span>
|
|
</div>
|
|
<div class="board-stat">
|
|
<span class="board-stat-icon stat-done">
|
|
<svg viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" stroke="currentColor" stroke-width="2" fill="none"/><path d="m22 4-10 10-3-3" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
</span>
|
|
<span class="board-stat-value" id="board-stat-done">0</span>
|
|
<span class="board-stat-label">Erledigt</span>
|
|
</div>
|
|
<div class="board-stat stat-danger">
|
|
<span class="board-stat-icon stat-overdue">
|
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><path d="M12 8v4l3 3" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
</span>
|
|
<span class="board-stat-value" id="board-stat-overdue">0</span>
|
|
<span class="board-stat-label">Überfällig</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Board -->
|
|
<div id="board" class="board">
|
|
<!-- Columns will be rendered here -->
|
|
<!-- Add Column Button is rendered dynamically inside the board -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- List View -->
|
|
<div id="view-list" class="view view-list hidden">
|
|
<div class="list-header">
|
|
<div class="list-controls">
|
|
<div class="list-view-toggle">
|
|
<button class="list-toggle-btn active" data-mode="grouped" title="Gruppiert nach Status">
|
|
<svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
Gruppiert
|
|
</button>
|
|
<button class="list-toggle-btn" data-mode="flat" title="Flache Liste">
|
|
<svg viewBox="0 0 24 24"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
Flach
|
|
</button>
|
|
</div>
|
|
<div class="list-sort">
|
|
<label>Sortieren:</label>
|
|
<select id="list-sort-select">
|
|
<option value="dueDate">Fälligkeit</option>
|
|
<option value="priority">Priorität</option>
|
|
<option value="title">Name</option>
|
|
<option value="assignee">Zugewiesen</option>
|
|
<option value="status">Status</option>
|
|
</select>
|
|
<button id="list-sort-direction" class="btn btn-icon" title="Sortierrichtung">
|
|
<svg viewBox="0 0 24 24"><path d="M12 5v14M19 12l-7 7-7-7" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="list-content" class="list-content">
|
|
<!-- Table will be rendered by JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calendar View -->
|
|
<div id="view-calendar" class="view view-calendar hidden">
|
|
<div class="calendar-header">
|
|
<div class="calendar-nav">
|
|
<button id="btn-prev-period" class="btn btn-icon" title="Zurück">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
</button>
|
|
<h2 id="calendar-title">Dezember 2025</h2>
|
|
<button id="btn-next-period" class="btn btn-icon" title="Vor">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="calendar-actions">
|
|
<div class="calendar-filter-dropdown">
|
|
<button class="btn btn-secondary calendar-filter-btn" id="btn-calendar-filter">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
Filter
|
|
</button>
|
|
<div class="calendar-filter-menu hidden" id="calendar-filter-menu">
|
|
<!-- Dynamisch gefüllt -->
|
|
</div>
|
|
</div>
|
|
<button id="btn-today" class="btn btn-secondary">Heute</button>
|
|
<div class="calendar-view-toggle">
|
|
<button class="btn btn-toggle active" data-calendar-view="month">Monat</button>
|
|
<button class="btn btn-toggle" data-calendar-view="week">Woche</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="calendar-weekdays" id="calendar-weekdays">
|
|
<div class="calendar-weekday">Mo</div>
|
|
<div class="calendar-weekday">Di</div>
|
|
<div class="calendar-weekday">Mi</div>
|
|
<div class="calendar-weekday">Do</div>
|
|
<div class="calendar-weekday">Fr</div>
|
|
<div class="calendar-weekday">Sa</div>
|
|
<div class="calendar-weekday">So</div>
|
|
</div>
|
|
<div id="calendar-grid" class="calendar-grid calendar-month-view">
|
|
<!-- Calendar will be rendered here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Proposals View -->
|
|
<div id="view-proposals" class="view proposals-view hidden">
|
|
<div class="proposals-header">
|
|
<h2 id="proposals-title">Genehmigungen</h2>
|
|
<div class="proposals-controls">
|
|
<div class="proposals-sort">
|
|
<label for="proposals-sort">Sortierung:</label>
|
|
<select id="proposals-sort">
|
|
<option value="date">Nach Datum</option>
|
|
<option value="alpha">Alphabetisch</option>
|
|
</select>
|
|
</div>
|
|
<button id="btn-show-proposals-archive" class="btn btn-secondary">Archiv anzeigen</button>
|
|
<button id="btn-new-proposal" class="btn btn-primary">Neue Genehmigung</button>
|
|
</div>
|
|
</div>
|
|
<div id="proposals-list" class="proposals-list">
|
|
<!-- Proposals will be rendered here -->
|
|
</div>
|
|
<div id="proposals-empty" class="proposals-empty hidden">
|
|
<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2" fill="none"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
<h3>Keine Genehmigungen vorhanden</h3>
|
|
<p>Erstellen Sie die erste Genehmigung!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gitea View -->
|
|
<div id="view-gitea" class="view view-gitea hidden">
|
|
|
|
<!-- Kein Projekt ausgewählt -->
|
|
<div id="gitea-no-project" class="gitea-empty-state">
|
|
<svg viewBox="0 0 24 24" width="64" height="64"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<h3>Kein Projekt ausgewählt</h3>
|
|
<p>Wählen Sie ein Projekt aus, um die Git-Integration zu konfigurieren.</p>
|
|
</div>
|
|
|
|
<!-- Konfiguration (wenn nicht verknüpft) -->
|
|
<div id="gitea-config-section" class="gitea-section hidden">
|
|
<div class="gitea-config-header">
|
|
<h2>Repository-Konfiguration</h2>
|
|
<p>Verknüpfen Sie dieses Projekt mit einem Git-Repository</p>
|
|
</div>
|
|
|
|
<!-- Gitea-Verbindungsstatus -->
|
|
<div id="gitea-connection-status" class="gitea-connection-status">
|
|
<span class="status-indicator"></span>
|
|
<span class="status-text">Prüfe Verbindung...</span>
|
|
</div>
|
|
|
|
<form id="gitea-config-form" class="gitea-config-form">
|
|
<!-- Repository-Auswahl -->
|
|
<div class="form-group">
|
|
<label for="gitea-repo-select">Bestehendes Repository auswählen</label>
|
|
<div class="gitea-repo-select-group">
|
|
<select id="gitea-repo-select" class="form-control">
|
|
<option value="">-- Repository wählen --</option>
|
|
</select>
|
|
<button type="button" id="btn-refresh-repos" class="btn btn-icon" title="Repositories aktualisieren">
|
|
<svg viewBox="0 0 24 24" width="18" height="18"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" stroke="currentColor" stroke-width="2" fill="none"/><path d="M3 3v5h5" stroke="currentColor" stroke-width="2" fill="none"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" stroke="currentColor" stroke-width="2" fill="none"/><path d="M21 21v-5h-5" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gitea-divider">
|
|
<span>oder</span>
|
|
</div>
|
|
|
|
<!-- Neues Repository erstellen -->
|
|
<div class="form-group">
|
|
<button type="button" id="btn-create-repo" class="btn btn-secondary btn-block">
|
|
<svg viewBox="0 0 24 24" width="18" height="18"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
|
|
Neues Repository erstellen
|
|
</button>
|
|
</div>
|
|
|
|
<div class="gitea-divider"></div>
|
|
|
|
<!-- Lokaler Pfad -->
|
|
<div class="form-group">
|
|
<label for="local-path-input">Lokaler Pfad (wo Claude Code arbeitet)</label>
|
|
<input type="text" id="local-path-input" class="form-control"
|
|
placeholder="z.B. D:\Projekte\MeinProjekt">
|
|
<span id="path-validation-result" class="form-hint"></span>
|
|
</div>
|
|
|
|
<!-- Default Branch -->
|
|
<div class="form-group">
|
|
<label for="default-branch-input">Standard-Branch</label>
|
|
<input type="text" id="default-branch-input" class="form-control"
|
|
value="main" placeholder="main">
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary" id="btn-save-config">
|
|
<svg viewBox="0 0 24 24" width="18" height="18"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" stroke="currentColor" stroke-width="2" fill="none"/><path d="M17 21v-8H7v8M7 3v5h8" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
Konfiguration speichern
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Hauptansicht (wenn verknüpft) -->
|
|
<div id="gitea-main-section" class="gitea-section hidden">
|
|
|
|
<!-- Repository-Info-Header -->
|
|
<div class="gitea-repo-header">
|
|
<div class="repo-info">
|
|
<h2 id="gitea-repo-name">
|
|
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
<span>Repository</span>
|
|
</h2>
|
|
<a id="gitea-repo-url" class="repo-url" href="#" target="_blank"></a>
|
|
</div>
|
|
<div class="repo-actions">
|
|
<button id="btn-edit-config" class="btn btn-icon" title="Konfiguration bearbeiten">
|
|
<svg viewBox="0 0 24 24" width="18" height="18"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2" fill="none"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
</button>
|
|
<button id="btn-remove-config" class="btn btn-icon btn-danger-hover" title="Konfiguration entfernen">
|
|
<svg viewBox="0 0 24 24" width="18" height="18"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lokaler Pfad Anzeige -->
|
|
<div class="gitea-local-path">
|
|
<span class="path-label">Lokaler Pfad:</span>
|
|
<code id="gitea-local-path-display"></code>
|
|
</div>
|
|
|
|
<!-- Git-Status Panel -->
|
|
<div id="gitea-status-section" class="gitea-status-panel">
|
|
<div class="status-grid">
|
|
<div class="status-item">
|
|
<span class="status-label">Branch</span>
|
|
<select id="branch-select" class="branch-select">
|
|
<!-- Branches dynamisch -->
|
|
</select>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Status</span>
|
|
<span id="git-status-indicator" class="status-badge">Prüfe...</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Änderungen</span>
|
|
<span id="git-changes-count" class="changes-count">0</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Ahead / Behind</span>
|
|
<span id="git-ahead-behind">- / -</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Git-Operationen -->
|
|
<div id="gitea-operations-section" class="gitea-operations-panel">
|
|
<h3>Git-Operationen</h3>
|
|
<div class="operations-grid">
|
|
<button id="btn-git-fetch" class="btn btn-secondary operation-btn">
|
|
<svg viewBox="0 0 24 24" width="18" height="18"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" stroke="currentColor" stroke-width="2" fill="none"/><path d="M3 3v5h5" stroke="currentColor" stroke-width="2" fill="none"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" stroke="currentColor" stroke-width="2" fill="none"/><path d="M21 21v-5h-5" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
Fetch
|
|
</button>
|
|
<button id="btn-git-pull" class="btn btn-secondary operation-btn">
|
|
<svg viewBox="0 0 24 24" width="18" height="18"><path d="M12 5v14M19 12l-7 7-7-7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
Pull
|
|
</button>
|
|
<button id="btn-git-push" class="btn btn-primary operation-btn">
|
|
<svg viewBox="0 0 24 24" width="18" height="18"><path d="M12 19V5M5 12l7-7 7 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
Push
|
|
</button>
|
|
<button id="btn-git-commit" class="btn btn-secondary operation-btn">
|
|
<svg viewBox="0 0 24 24" width="18" height="18"><circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="2" fill="none"/><path d="M12 2v6M12 16v6M2 12h6M16 12h6" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
Commit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Änderungen-Liste -->
|
|
<div id="gitea-changes-section" class="gitea-changes-panel hidden">
|
|
<h3>Geänderte Dateien</h3>
|
|
<div id="git-changes-list" class="changes-list">
|
|
<!-- Dynamisch gefüllt -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Commit-Historie -->
|
|
<div id="gitea-commits-section" class="gitea-commits-panel">
|
|
<h3>Letzte Commits</h3>
|
|
<div id="git-commits-list" class="commits-list">
|
|
<!-- Dynamisch gefüllt -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
<div id="modal-overlay" class="modal-overlay hidden"></div>
|
|
|
|
<!-- Task Modal -->
|
|
<div id="task-modal" class="modal modal-large hidden">
|
|
<div class="modal-header">
|
|
<h2 id="task-modal-title">Neue Aufgabe</h2>
|
|
<span id="save-status-indicator" class="save-status-indicator"></span>
|
|
<button class="modal-close" data-close-modal>×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="task-form">
|
|
<input type="hidden" id="task-id">
|
|
<input type="hidden" id="task-column-id">
|
|
|
|
<div class="form-row">
|
|
<div class="form-group form-group-large">
|
|
<label for="task-title">Titel *</label>
|
|
<input type="text" id="task-title" required maxlength="200">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group form-group-large">
|
|
<label for="task-description">Beschreibung (Markdown)</label>
|
|
<textarea id="task-description" rows="4" placeholder="Beschreibung..."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="task-status">Status</label>
|
|
<select id="task-status"></select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="task-priority">Priorität</label>
|
|
<select id="task-priority">
|
|
<option value="low">Niedrig</option>
|
|
<option value="medium" selected>Mittel</option>
|
|
<option value="high">Hoch</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group form-group-wide">
|
|
<label>Mitarbeitende zuweisen</label>
|
|
<div class="multi-select-dropdown" id="assignees-dropdown">
|
|
<div class="multi-select-trigger" id="assignees-trigger">
|
|
<span class="multi-select-placeholder">Mitarbeitende auswählen...</span>
|
|
<span class="multi-select-arrow">▼</span>
|
|
</div>
|
|
<div class="multi-select-options hidden" id="assignees-options">
|
|
<!-- Options werden dynamisch generiert -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="task-start">Startdatum</label>
|
|
<input type="date" id="task-start">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="task-due">Enddatum</label>
|
|
<input type="date" id="task-due">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="task-time-hours">Zeitschätzung</label>
|
|
<div class="time-estimate-inputs">
|
|
<input type="number" id="task-time-hours" min="0" max="999" placeholder="0"> Std
|
|
<input type="number" id="task-time-mins" min="0" max="59" placeholder="0"> Min
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Labels</label>
|
|
<div id="task-labels" class="labels-select"></div>
|
|
</div>
|
|
|
|
<!-- Subtasks -->
|
|
<div class="form-group">
|
|
<label>Checkliste</label>
|
|
<div id="subtask-progress" class="subtask-progress hidden">
|
|
<div class="progress">
|
|
<div id="subtask-progress-bar" class="progress-bar"></div>
|
|
</div>
|
|
<span id="subtask-progress-text">0/0</span>
|
|
</div>
|
|
<div id="subtasks-container" class="subtasks-container"></div>
|
|
<div class="add-subtask-form">
|
|
<input type="text" id="subtask-input" placeholder="Neue Unteraufgabe...">
|
|
<button type="button" id="btn-add-subtask" class="btn btn-secondary">Hinzufügen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Links -->
|
|
<div class="form-group" id="links-section">
|
|
<label>Links</label>
|
|
<div id="links-container" class="links-container"></div>
|
|
<div class="add-link-form">
|
|
<input type="text" id="link-title" placeholder="Titel (optional)">
|
|
<input type="url" id="link-url" placeholder="https://...">
|
|
<button type="button" id="btn-add-link" class="btn btn-secondary">Hinzufügen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Attachments -->
|
|
<div class="form-group" id="attachments-section">
|
|
<label>Anhänge</label>
|
|
<div id="attachments-container" class="attachments-container"></div>
|
|
<div class="file-upload-area" id="file-upload-area">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
|
<span>Dateien hierher ziehen oder <label for="file-input" class="file-input-label">auswählen</label></span>
|
|
<input type="file" id="file-input" multiple hidden>
|
|
<span class="file-hint">Max. 15 MB pro Datei</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Comments (only in edit mode) -->
|
|
<div class="form-group" id="comments-section" style="display: none;">
|
|
<label>Kommentare</label>
|
|
<div id="comments-container" class="comments-container"></div>
|
|
<div class="add-comment-form">
|
|
<textarea id="comment-input" rows="2" placeholder="Kommentar schreiben... (@Benutzer für Erwähnungen)"></textarea>
|
|
<button type="button" id="btn-add-comment" class="btn btn-secondary">Senden</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- History (only in edit mode) -->
|
|
<div class="form-group" id="history-section" style="display: none;">
|
|
<label>Historie</label>
|
|
<div id="history-container" class="history-container"></div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div class="modal-footer-left">
|
|
<button type="button" id="btn-duplicate-task" class="btn btn-text hidden">Duplizieren</button>
|
|
<button type="button" id="btn-archive-task" class="btn btn-text hidden">Archivieren</button>
|
|
<button type="button" id="btn-restore-task" class="btn btn-text hidden">Wiederherstellen</button>
|
|
<button type="button" id="btn-delete-task" class="btn btn-text text-danger hidden">Löschen</button>
|
|
</div>
|
|
<div class="modal-footer-right">
|
|
<button type="button" id="btn-cancel-task" class="btn btn-secondary hidden">Abbrechen</button>
|
|
<button type="button" id="btn-save-task" class="btn btn-primary hidden">Speichern</button>
|
|
<button type="button" id="btn-back-task" class="btn btn-primary">Zurück</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Add Modal -->
|
|
<div id="quick-add-modal" class="modal modal-small hidden">
|
|
<div class="modal-header">
|
|
<h2>Schnell hinzufügen</h2>
|
|
<button class="modal-close" data-close-modal>×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="quick-add-form">
|
|
<div class="form-group">
|
|
<input type="text" id="quick-task-title" placeholder="Aufgabentitel..." required autofocus>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
|
|
<button type="submit" form="quick-add-form" class="btn btn-primary">Hinzufügen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Column Modal -->
|
|
<div id="column-modal" class="modal modal-small hidden">
|
|
<div class="modal-header">
|
|
<h2 id="column-modal-title">Neue Spalte</h2>
|
|
<button class="modal-close" data-close-modal>×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="column-form">
|
|
<input type="hidden" id="column-id">
|
|
<div class="form-group">
|
|
<label for="column-name">Name *</label>
|
|
<input type="text" id="column-name" required maxlength="50">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="column-color">Farbe (optional)</label>
|
|
<input type="color" id="column-color" value="#00D4FF">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="column-filter-category">Kalender-Filter</label>
|
|
<select id="column-filter-category">
|
|
<option value="open">Offen</option>
|
|
<option value="in_progress" selected>In Arbeit</option>
|
|
<option value="completed">Erledigt</option>
|
|
<option value="custom">Neuer Filter...</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group hidden" id="column-custom-filter-group">
|
|
<label for="column-custom-filter">Neuer Filtername</label>
|
|
<input type="text" id="column-custom-filter" maxlength="30" placeholder="z.B. Wartend, Blockiert...">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="btn-delete-column" class="btn btn-text text-danger" style="display: none;">Löschen</button>
|
|
<div class="modal-footer-right">
|
|
<button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
|
|
<button type="submit" form="column-form" class="btn btn-primary">Speichern</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Modal -->
|
|
<div id="project-modal" class="modal modal-small hidden">
|
|
<div class="modal-header">
|
|
<h2 id="project-modal-title">Neues Projekt</h2>
|
|
<button class="modal-close" data-close-modal>×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="project-form">
|
|
<input type="hidden" id="project-id">
|
|
<div class="form-group">
|
|
<label for="project-name">Name *</label>
|
|
<input type="text" id="project-name" required maxlength="100">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="project-description">Beschreibung</label>
|
|
<textarea id="project-description" rows="3"></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="btn-delete-project" class="btn btn-danger hidden">Projekt löschen</button>
|
|
<div class="modal-footer-right">
|
|
<button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
|
|
<button type="submit" form="project-form" class="btn btn-primary">Speichern</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Label Modal -->
|
|
<div id="label-modal" class="modal modal-small hidden">
|
|
<div class="modal-header">
|
|
<h2 id="label-modal-title">Neues Label</h2>
|
|
<button class="modal-close" data-close-modal>×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="label-form">
|
|
<input type="hidden" id="label-id">
|
|
<div class="form-group">
|
|
<label for="label-name">Name *</label>
|
|
<input type="text" id="label-name" required maxlength="30">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="label-color">Farbe *</label>
|
|
<div class="color-presets">
|
|
<button type="button" class="color-preset" data-color="#DC2626" style="background:#DC2626"></button>
|
|
<button type="button" class="color-preset" data-color="#D97706" style="background:#D97706"></button>
|
|
<button type="button" class="color-preset" data-color="#059669" style="background:#059669"></button>
|
|
<button type="button" class="color-preset" data-color="#3182CE" style="background:#3182CE"></button>
|
|
<button type="button" class="color-preset" data-color="#7C3AED" style="background:#7C3AED"></button>
|
|
<button type="button" class="color-preset" data-color="#DB2777" style="background:#DB2777"></button>
|
|
</div>
|
|
<input type="color" id="label-color" value="#3182CE">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="btn-delete-label" class="btn btn-text text-danger" style="display: none;">Löschen</button>
|
|
<div class="modal-footer-right">
|
|
<button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
|
|
<button type="submit" form="label-form" class="btn btn-primary">Speichern</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirm Modal -->
|
|
<div id="confirm-modal" class="modal modal-small hidden">
|
|
<div class="modal-header">
|
|
<h2 id="confirm-title">Bestätigung</h2>
|
|
<button class="modal-close" data-close-modal>×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="confirm-message"></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="confirm-cancel" class="btn btn-secondary">Abbrechen</button>
|
|
<button type="button" id="confirm-ok" class="btn btn-danger">Bestätigen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Archive Modal -->
|
|
<div id="archive-modal" class="modal modal-large hidden">
|
|
<div class="modal-header">
|
|
<h2>Archiv</h2>
|
|
<button class="modal-close" data-close-modal>×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="archive-list" class="archive-list">
|
|
<!-- Archived tasks will be rendered here -->
|
|
</div>
|
|
<div id="archive-empty" class="archive-empty hidden">
|
|
<p>Keine archivierten Aufgaben vorhanden.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Modal -->
|
|
<div id="settings-modal" class="modal modal-small hidden">
|
|
<div class="modal-header">
|
|
<h2>Einstellungen</h2>
|
|
<button class="modal-close" data-close-modal>×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- User Color Selection -->
|
|
<div class="form-group">
|
|
<label>Meine Farbe</label>
|
|
<p class="text-secondary" style="font-size: var(--text-sm); margin-bottom: var(--spacing-3);">
|
|
Wählen Sie Ihre persönliche Farbe für Aufgaben und Kalender.
|
|
</p>
|
|
<div class="color-picker-container">
|
|
<div id="user-color-options" class="color-options">
|
|
<button type="button" class="color-option" data-color="#EF4444" style="background-color: #EF4444" title="Rot"></button>
|
|
<button type="button" class="color-option" data-color="#F97316" style="background-color: #F97316" title="Orange"></button>
|
|
<button type="button" class="color-option" data-color="#F59E0B" style="background-color: #F59E0B" title="Gelb"></button>
|
|
<button type="button" class="color-option" data-color="#10B981" style="background-color: #10B981" title="Grün"></button>
|
|
<button type="button" class="color-option" data-color="#14B8A6" style="background-color: #14B8A6" title="Türkis"></button>
|
|
<button type="button" class="color-option" data-color="#3B82F6" style="background-color: #3B82F6" title="Blau"></button>
|
|
<button type="button" class="color-option" data-color="#8B5CF6" style="background-color: #8B5CF6" title="Violett"></button>
|
|
<button type="button" class="color-option" data-color="#EC4899" style="background-color: #EC4899" title="Pink"></button>
|
|
<button type="button" class="color-option" data-color="#6B7280" style="background-color: #6B7280" title="Grau"></button>
|
|
</div>
|
|
<div class="color-custom-row">
|
|
<label for="user-color-custom" class="text-secondary" style="font-size: var(--text-sm);">Eigene Farbe:</label>
|
|
<input type="color" id="user-color-custom" value="#3B82F6" title="Beliebige Farbe waehlen">
|
|
</div>
|
|
<div class="color-preview-row">
|
|
<span class="text-secondary" style="font-size: var(--text-sm);">Vorschau:</span>
|
|
<span id="user-color-preview" class="avatar" style="background-color: #3B82F6">
|
|
<span id="user-color-preview-initial">U</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-divider"></div>
|
|
|
|
<!-- Password Change -->
|
|
<div class="form-group">
|
|
<label>Passwort ändern</label>
|
|
<p class="text-secondary" style="font-size: var(--text-sm); margin-bottom: var(--spacing-3);">
|
|
Ändern Sie Ihr Passwort für mehr Sicherheit.
|
|
</p>
|
|
<form id="change-password-form">
|
|
<div class="form-group">
|
|
<label for="current-password">Aktuelles Passwort</label>
|
|
<input type="password" id="current-password" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="new-password">Neues Passwort</label>
|
|
<input type="password" id="new-password" required minlength="8">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="confirm-password">Passwort bestätigen</label>
|
|
<input type="password" id="confirm-password" required>
|
|
</div>
|
|
<div id="password-error" class="error-message hidden"></div>
|
|
<button type="submit" class="btn btn-primary btn-block">Passwort ändern</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Modal (Admin) -->
|
|
<div id="user-modal" class="modal hidden">
|
|
<div class="modal-header">
|
|
<h2 id="user-modal-title">Neuer Benutzer</h2>
|
|
<button class="modal-close" data-close-modal>×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="user-form" class="user-modal-form">
|
|
<input type="hidden" id="edit-user-id">
|
|
<div class="form-group">
|
|
<label for="user-username">Kürzel</label>
|
|
<div class="input-with-prefix">
|
|
<span class="input-prefix">@</span>
|
|
<input type="text" id="user-username" required minlength="2" maxlength="2" pattern="[A-Za-z]{2}" style="text-transform: uppercase;">
|
|
</div>
|
|
<span class="form-hint">2 Buchstaben zur Identifikation bei Aufgaben und Kommentaren</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="user-displayname">Anzeigename</label>
|
|
<input type="text" id="user-displayname" required maxlength="100">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="user-email">E-Mail</label>
|
|
<input type="email" id="user-email" required placeholder="benutzer@beispiel.de">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="user-password">Passwort <span id="password-hint" class="form-hint">(automatisch generiert)</span></label>
|
|
<input type="text" id="user-password" minlength="8" readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="user-role">Rolle</label>
|
|
<select id="user-role" required>
|
|
<option value="user">Benutzer</option>
|
|
<option value="admin">Administrator</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group" id="permissions-group">
|
|
<label>Berechtigungen</label>
|
|
<div class="permissions-list">
|
|
<div class="permission-item">
|
|
<input type="checkbox" id="perm-genehmigung" value="genehmigung">
|
|
<label for="perm-genehmigung">Genehmigung</label>
|
|
<span class="permission-desc">Kann Vorschläge genehmigen</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="btn-delete-user" class="btn btn-text text-danger hidden">Löschen</button>
|
|
<button type="button" id="btn-unlock-user" class="btn btn-text hidden">Entsperren</button>
|
|
<div class="modal-footer-right">
|
|
<button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
|
|
<button type="submit" form="user-form" class="btn btn-primary">Speichern</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Proposal Modal -->
|
|
<div id="proposal-modal" class="modal modal-small hidden">
|
|
<div class="modal-header">
|
|
<h2 id="proposal-modal-title">Neue Genehmigung</h2>
|
|
<button class="modal-close" data-close-modal>×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="proposal-form" class="proposal-modal-form">
|
|
<div class="form-group">
|
|
<label for="proposal-title">Titel *</label>
|
|
<input type="text" id="proposal-title" required maxlength="200">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="proposal-description">Beschreibung</label>
|
|
<textarea id="proposal-description" rows="4" placeholder="Optionale Beschreibung..."></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="proposal-task">Verknüpfte Aufgabe (optional)</label>
|
|
<select id="proposal-task">
|
|
<option value="">Keine Aufgabe</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
|
|
<button type="submit" form="proposal-form" class="btn btn-primary">Erstellen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Git Commit Modal -->
|
|
<div id="git-commit-modal" class="modal modal-small hidden">
|
|
<div class="modal-header">
|
|
<h2>Commit erstellen</h2>
|
|
<button class="modal-close" data-close-modal>×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="git-commit-form">
|
|
<div class="form-group">
|
|
<label for="commit-message">Commit-Nachricht *</label>
|
|
<textarea id="commit-message" rows="4" required
|
|
placeholder="Beschreiben Sie Ihre Änderungen..."></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="commit-stage-all" checked>
|
|
Alle Änderungen einschließen (git add -A)
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
|
|
<button type="submit" form="git-commit-form" class="btn btn-primary">Commit erstellen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Repository Modal -->
|
|
<div id="create-repo-modal" class="modal modal-small hidden">
|
|
<div class="modal-header">
|
|
<h2>Neues Repository erstellen</h2>
|
|
<button class="modal-close" data-close-modal>×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="create-repo-form">
|
|
<div class="form-group">
|
|
<label for="new-repo-name">Repository-Name *</label>
|
|
<input type="text" id="new-repo-name" required
|
|
pattern="[a-zA-Z0-9_-]+"
|
|
placeholder="mein-projekt">
|
|
<span class="form-hint">Nur Buchstaben, Zahlen, Unterstriche und Bindestriche</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="new-repo-description">Beschreibung</label>
|
|
<textarea id="new-repo-description" rows="2"
|
|
placeholder="Optionale Beschreibung..."></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="new-repo-private" checked>
|
|
Privates Repository
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
|
|
<button type="submit" form="create-repo-form" class="btn btn-primary">Repository erstellen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Container -->
|
|
<div id="toast-container" class="toast-container"></div>
|
|
|
|
<!-- Onboarding Tour -->
|
|
<div id="onboarding-overlay" class="onboarding-overlay hidden">
|
|
<div id="onboarding-tooltip" class="onboarding-tooltip">
|
|
<div class="onboarding-content">
|
|
<h3 id="onboarding-title"></h3>
|
|
<p id="onboarding-text"></p>
|
|
</div>
|
|
<div class="onboarding-footer">
|
|
<span id="onboarding-step">1/5</span>
|
|
<div>
|
|
<button id="btn-skip-tour" class="btn btn-text">Überspringen</button>
|
|
<button id="btn-next-tour" class="btn btn-primary">Weiter</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Lightbox -->
|
|
<div id="lightbox" class="lightbox hidden">
|
|
<button id="lightbox-close" class="lightbox-close">×</button>
|
|
<img id="lightbox-image" src="" alt="">
|
|
</div>
|
|
|
|
<!-- Socket.io Client -->
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
|
|
<!-- Main App (ES Module) -->
|
|
<script type="module" src="js/app.js"></script>
|
|
|
|
</body>
|
|
</html>
|