initial commit
This commit is contained in:
+209
@@ -0,0 +1,209 @@
|
||||
<?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>
|
||||
Reference in New Issue
Block a user