209 lines
5.7 KiB
PHP
209 lines
5.7 KiB
PHP
<?php
|
||
date_default_timezone_set("Europe/Berlin");
|
||
require_once "config/config.php";
|
||
include("Data.class.php");
|
||
$Data = new Data($pdo);
|
||
|
||
$statusFilter = (isset($_GET['status']) && $_GET['status'] !== '')
|
||
? intval($_GET['status'])
|
||
: null;
|
||
|
||
|
||
if ($statusFilter !== null) {
|
||
$sql = $pdo->prepare("SELECT * FROM termine WHERE status = :s ORDER BY startzeit ASC");
|
||
$sql->execute([':s' => $statusFilter]);
|
||
$termine = $sql->fetchAll(PDO::FETCH_ASSOC);
|
||
} else {
|
||
$sql = $pdo->query("SELECT * FROM termine ORDER BY status ASC, startzeit ASC");
|
||
$termine = $sql->fetchAll(PDO::FETCH_ASSOC);
|
||
}
|
||
|
||
function badgeLocationType($art) {
|
||
$class = '';
|
||
switch (strtolower($art)) {
|
||
case 'party': $class = 'badge-party'; break;
|
||
case 'club': $class = 'badge-club'; break;
|
||
case 'hochzeit': $class = 'badge-hochzeit'; break;
|
||
}
|
||
return "<span class='badge $class text-white'>" . htmlspecialchars($art) . "</span>";
|
||
}
|
||
|
||
?>
|
||
|
||
<!-- KORREKTER VIEWPORT -->
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<!-- Bootstrap CSS -->
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
||
<!-- Bootstrap Icons -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||
|
||
<title>ANJUMA Dashboard</title>
|
||
</head>
|
||
|
||
|
||
|
||
<style>
|
||
|
||
.badge-party {
|
||
background-color: #0d6efd; /* Blau */
|
||
}
|
||
.badge-club {
|
||
background-color: #6f42c1; /* Lila */
|
||
}
|
||
.badge-hochzeit {
|
||
background-color: #dc3545; /* Rot */
|
||
}
|
||
|
||
/* Bootstrap Borders killen */
|
||
.table td,
|
||
.table th,
|
||
.table tr {
|
||
border: none !important;
|
||
}
|
||
|
||
/* Hintergrundfarben (lassen wir wie du sie hast) */
|
||
.table tr.status-open > td {
|
||
background-color: #cfe2ff !important;
|
||
}
|
||
.table tr.status-ready > td {
|
||
background-color: #fff3cd !important;
|
||
}
|
||
.table tr.status-done > td {
|
||
background-color: #d1e7dd !important;
|
||
}
|
||
.table tr.status-cancel > td {
|
||
background-color: #f8d7da !important;
|
||
}
|
||
|
||
/* Linker Farbstreifen – stabil & sauber */
|
||
tr.status-open td:first-child {
|
||
box-shadow: inset 4px 0 0 0 #0d6efd !important;
|
||
}
|
||
tr.status-ready td:first-child {
|
||
box-shadow: inset 4px 0 0 0 #ffc107 !important;
|
||
}
|
||
tr.status-done td:first-child {
|
||
box-shadow: inset 4px 0 0 0 #198754 !important;
|
||
}
|
||
tr.status-cancel td:first-child {
|
||
box-shadow: inset 4px 0 0 0 #dc3545 !important;
|
||
}
|
||
|
||
|
||
/* MOBILE OPTIMIERUNG */
|
||
/* Desktop normal */
|
||
@media (min-width: 769px) {
|
||
.mobile-label {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
/* Mobile optimiert */
|
||
@media (max-width: 768px) {
|
||
|
||
/* Kopfzeile ausblenden (wir ersetzen sie je Zelle) */
|
||
thead {
|
||
display: none;
|
||
}
|
||
|
||
/* Zeilen als Blöcke */
|
||
table tr {
|
||
display: block;
|
||
margin-bottom: 18px;
|
||
padding: 12px;
|
||
border-radius: 10px;
|
||
background: #ffffff;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
|
||
}
|
||
|
||
/* Tabellenzellen untereinander */
|
||
table td {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
padding: 8px 5px !important;
|
||
font-size: 15px;
|
||
border: none !important;
|
||
}
|
||
|
||
/* Label links, Wert rechts */
|
||
table td::before {
|
||
content: attr(data-label);
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
/* Bearbeiten Button schön */
|
||
td .btn {
|
||
width: 100%;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|
||
|
||
|
||
<div class="container mt-4">
|
||
<div class="row justify-content-center">
|
||
<div class="col-12">
|
||
|
||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||
<h3 class="mb-0"><i class="bi bi-calendar-event"></i> Termine</h3>
|
||
|
||
<a href="termin_create.php" class="btn btn-primary">
|
||
<i class="bi bi-plus-circle"></i> Neuer Termin
|
||
</a>
|
||
</div>
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-hover align-middle shadow-sm">
|
||
<thead class="table-dark">
|
||
<tr>
|
||
<th><i class="bi bi-hash"></i> ID</th>
|
||
<th><i class="bi bi-clock-history"></i> Startzeit</th>
|
||
<th><i class="bi bi-geo-alt"></i> Location</th>
|
||
<th><i class="bi bi-person-circle"></i> Erstellt von</th>
|
||
<th class="text-end">Aktion</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<?php foreach ($termine as $row): ?>
|
||
<tr class="<?= $Data->getTerminLabel($row['id']); ?>">
|
||
|
||
<td data-label="ID"><?= $row['id']; ?></td>
|
||
|
||
<td data-label="Startzeit">
|
||
<?= $Data->timestampToDate($row['startzeit']); ?>
|
||
</td>
|
||
|
||
<td data-label="Location"><?= $row['location'] . " " . badgeLocationType($row['locationtype']); ?></td>
|
||
|
||
<td data-label="Erstellt von">
|
||
<?= $Data->getDataByID($row['user_id'], "name"); ?>
|
||
</td>
|
||
|
||
<td data-label="Aktion" class="text-end">
|
||
<a href="termin_show.php?id=<?= $row['id']; ?>"
|
||
class="btn btn-warning btn-sm w-100">
|
||
<i class="bi bi-pencil-square"></i> Bearbeiten
|
||
</a>
|
||
</td>
|
||
|
||
</tr>
|
||
<?php endforeach; ?>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<body>
|
||
<!-- Bootstrap JS Bundle (mit Popper) -->
|
||
</body>
|