Kalenderübersicht der Termin
This commit is contained in:
Borgal
@@ -14,6 +14,61 @@
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
|
||||
<style>
|
||||
body {
|
||||
padding-top: 56px;
|
||||
}
|
||||
|
||||
/* Kalender-Stile */
|
||||
.calendar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.calendar-grid.fw-bold {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
aspect-ratio: 1 / 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #e9ecef;
|
||||
padding: 0.8rem;
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar-day.meeting-day {
|
||||
cursor: pointer;
|
||||
border: 2px solid #6c757d;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.calendar-day.meeting-day:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.calendar-day .day-number {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Stil für die Wochentage (aktualisiert) */
|
||||
.calendar-grid.fw-bold .calendar-day {
|
||||
padding: 0.2rem;
|
||||
/* Höhe reduziert */
|
||||
color: #121212;
|
||||
/* Farbe abgedunkelt */
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
215
meeting.php
Executable file
215
meeting.php
Executable file
@@ -0,0 +1,215 @@
|
||||
<?php
|
||||
include('inc/check_login.php');
|
||||
include('inc/db.php');
|
||||
include('inc/header.php');
|
||||
|
||||
// Funktion zum Abrufen der Treffen für einen bestimmten Monat
|
||||
function get_meetings_for_month($conn, $month, $year)
|
||||
{
|
||||
$sql = "SELECT meetings.id, meetings.meeting_date, meetings.color_id, colors.hex_code
|
||||
FROM meetings
|
||||
JOIN colors ON meetings.color_id = colors.id
|
||||
WHERE YEAR(meeting_date) = ? AND MONTH(meeting_date) = ?";
|
||||
|
||||
$stmt = mysqli_prepare($conn, $sql);
|
||||
|
||||
if (!$stmt) {
|
||||
error_log('Fehler bei der Abfragevorbereitung: ' . mysqli_error($conn));
|
||||
return [];
|
||||
}
|
||||
|
||||
mysqli_stmt_bind_param($stmt, "ii", $year, $month);
|
||||
mysqli_stmt_execute($stmt);
|
||||
$result = mysqli_stmt_get_result($stmt);
|
||||
|
||||
$meetings = [];
|
||||
if ($result) {
|
||||
while ($row = mysqli_fetch_assoc($result)) {
|
||||
$day = date('j', strtotime($row['meeting_date']));
|
||||
$meetings[$day] = $row;
|
||||
}
|
||||
}
|
||||
mysqli_stmt_close($stmt);
|
||||
return $meetings;
|
||||
}
|
||||
|
||||
// Funktion zum Abrufen der Details für ein einzelnes Treffen
|
||||
function get_meeting_details($conn, $meeting_id)
|
||||
{
|
||||
// TODO: Die Daten aus der Datenbank abrufen
|
||||
// Aktuell nur Beispieldaten
|
||||
$details = [
|
||||
'meeting_date' => date('Y-m-d', strtotime('2025-08-13')),
|
||||
'color_name' => 'Blau',
|
||||
'hex_code' => '#0000FF',
|
||||
'participants' => [
|
||||
['name' => 'Max Mustermann', 'status' => 'correct'],
|
||||
['name' => 'Erika Musterfrau', 'status' => 'fine'],
|
||||
['name' => 'Hans Schmidt', 'status' => 'correct']
|
||||
]
|
||||
];
|
||||
return $details;
|
||||
}
|
||||
|
||||
function hexToRgb($hex)
|
||||
{
|
||||
// Entferne das führende #
|
||||
$hex = ltrim($hex, '#');
|
||||
|
||||
// Falls 3-stellig, erweitere auf 6-stellig
|
||||
if (strlen($hex) === 3) {
|
||||
$hex = $hex[0] . $hex[0] .
|
||||
$hex[1] . $hex[1] .
|
||||
$hex[2] . $hex[2];
|
||||
}
|
||||
|
||||
// Falls nicht 6-stellig, gib einen Standardwert zurück
|
||||
if (strlen($hex) !== 6) {
|
||||
return '0, 0, 0'; // Fallback: Schwarz
|
||||
}
|
||||
|
||||
// Umwandlung in RGB
|
||||
$r = hexdec(substr($hex, 0, 2));
|
||||
$g = hexdec(substr($hex, 2, 2));
|
||||
$b = hexdec(substr($hex, 4, 2));
|
||||
|
||||
return "$r, $g, $b";
|
||||
}
|
||||
|
||||
|
||||
// Wenn die Seite per AJAX aufgerufen wird, um Details zu laden
|
||||
if (isset($_GET['meeting_id'])) {
|
||||
$details = get_meeting_details($conn, $_GET['meeting_id']);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode($details);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Standard-Seitenansicht
|
||||
$current_month = isset($_GET['month']) ? $_GET['month'] : date('m');
|
||||
$current_year = isset($_GET['year']) ? $_GET['year'] : date('Y');
|
||||
$meetings_in_month = get_meetings_for_month($conn, $current_month, $current_year);
|
||||
$first_day_of_month = mktime(0, 0, 0, $current_month, 1, $current_year);
|
||||
$number_of_days = date('t', $first_day_of_month);
|
||||
$day_of_week = date('N', $first_day_of_month); // 1 = Montag, 7 = Sonntag
|
||||
?>
|
||||
|
||||
<div class="container pb-3">
|
||||
<div class="row justify-content-center mb-5">
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow">
|
||||
<div class="card-header text-center">
|
||||
<a href="?month=<?= $current_month - 1 > 0 ? $current_month - 1 : 12 ?>&year=<?= $current_month - 1 > 0 ? $current_year : $current_year - 1 ?>" class="btn btn-sm btn-outline-secondary float-start"><</a>
|
||||
<h5 class="d-inline-block"><?= date('F Y', $first_day_of_month) ?></h5>
|
||||
<a href="?month=<?= $current_month + 1 < 13 ? $current_month + 1 : 1 ?>&year=<?= $current_month + 1 < 13 ? $current_year : $current_year + 1 ?>" class="btn btn-sm btn-outline-secondary float-end">></a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="calendar-grid text-center fw-bold">
|
||||
<div class="calendar-day text-dark">Mo</div>
|
||||
<div class="calendar-day text-dark">Di</div>
|
||||
<div class="calendar-day text-dark">Mi</div>
|
||||
<div class="calendar-day text-dark">Do</div>
|
||||
<div class="calendar-day text-dark">Fr</div>
|
||||
<div class="calendar-day text-dark">Sa</div>
|
||||
<div class="calendar-day text-dark">So</div>
|
||||
</div>
|
||||
<div class="calendar-grid text-center">
|
||||
<?php
|
||||
// Leerfelder für den Start des Monats
|
||||
for ($i = 1; $i < $day_of_week; $i++): ?>
|
||||
<div class="calendar-day text-muted"></div>
|
||||
<?php endfor;
|
||||
|
||||
// Tage des Monats
|
||||
for ($day = 1; $day <= $number_of_days; $day++):
|
||||
$has_meeting = isset($meetings_in_month[$day]);
|
||||
$day_data = $has_meeting ? $meetings_in_month[$day] : null;
|
||||
$meeting_id = $has_meeting ? $day_data['id'] : '';
|
||||
?>
|
||||
<div class="calendar-day <?= $has_meeting ? 'meeting-day' : '' ?>"
|
||||
style="<?= $has_meeting ? 'background-color: rgba(' . hexToRgb($day_data['hex_code']) . ', 0.3);' : '' ?>"
|
||||
|
||||
data-meeting-id="<?= $meeting_id ?>">
|
||||
<span class="day-number text-dark"><?= $day ?></span>
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow" id="meeting-details-card">
|
||||
<div class="card-body text-center text-muted">
|
||||
<p>Wähle ein Treffen im Kalender aus, um die Details zu sehen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const meetingDays = document.querySelectorAll('.meeting-day');
|
||||
const detailsCard = document.getElementById('meeting-details-card');
|
||||
|
||||
meetingDays.forEach(day => {
|
||||
day.addEventListener('click', function() {
|
||||
const meetingId = this.dataset.meetingId;
|
||||
if (!meetingId) return;
|
||||
|
||||
detailsCard.innerHTML = `
|
||||
<div class="card-body text-center text-muted">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Lade...</span></span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
fetch(`meeting.php?meeting_id=${meetingId}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data) {
|
||||
const participantsHtml = data.participants.map(p => `
|
||||
<li>
|
||||
${p.status === 'correct' ? '✅' : '❌'}
|
||||
${p.name}
|
||||
${p.status === 'fine' ? ' (1 € Strafe)' : ''}
|
||||
</li>
|
||||
`).join('');
|
||||
|
||||
detailsCard.innerHTML = `
|
||||
<div class="card-header text-center">
|
||||
<h5 class="mb-0">${new Date(data.meeting_date).toLocaleDateString()}</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted text-center mb-3">Farbvorgabe: <span class="fw-bold" style="color: ${data.hex_code};">${data.color_name}</span></p>
|
||||
<ul class="list-unstyled">
|
||||
${participantsHtml}
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
detailsCard.innerHTML = `
|
||||
<div class="card-body text-center text-muted">
|
||||
<p>Keine Details gefunden.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Fehler beim Laden der Details:', error);
|
||||
detailsCard.innerHTML = `
|
||||
<div class="card-body text-center text-danger">
|
||||
<p>Ein Fehler ist aufgetreten.</p>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php include('inc/footer.php'); ?>
|
||||
Reference in New Issue
Block a user