245 lines
5.7 KiB
Plaintext
245 lines
5.7 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Praxis System</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<link rel="stylesheet" href="/css/bootstrap.min.css" />
|
|
<link rel="stylesheet" href="/bootstrap-icons/bootstrap-icons.min.css" />
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
background: #f4f6f9;
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
Roboto, Ubuntu;
|
|
}
|
|
|
|
.layout {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
width: 240px;
|
|
background: #111827;
|
|
color: white;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
margin-bottom: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 15px;
|
|
border-radius: 8px;
|
|
color: #cbd5e1;
|
|
text-decoration: none;
|
|
margin-bottom: 6px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: #1f2937;
|
|
color: white;
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: #2563eb;
|
|
color: white;
|
|
}
|
|
|
|
.sidebar .spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Main */
|
|
.main {
|
|
flex: 1;
|
|
padding: 25px 30px;
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.topbar h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.main {
|
|
flex: 1;
|
|
padding: 24px;
|
|
background: #f4f6f9;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.waiting-monitor {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.waiting-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
grid-template-rows: repeat(3, 80px);
|
|
gap: 12px;
|
|
width: 100%;
|
|
}
|
|
|
|
.waiting-slot {
|
|
border: 2px dashed #cbd5e1;
|
|
border-radius: 10px;
|
|
background: #f8fafc;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
overflow: hidden; /* 🔥 DAS fehlt */
|
|
}
|
|
|
|
.waiting-slot.occupied {
|
|
border-style: solid;
|
|
background: #eefdf5;
|
|
}
|
|
|
|
.waiting-grid {
|
|
grid-auto-flow: row dense;
|
|
}
|
|
|
|
.chair-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
object-fit: contain;
|
|
opacity: 0.25;
|
|
}
|
|
|
|
.patient-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px; /* 🔥 Abstand zwischen Name und Datum */
|
|
}
|
|
|
|
.waiting-slot.clickable {
|
|
cursor: pointer;
|
|
transition: 0.15s ease;
|
|
}
|
|
|
|
.waiting-slot.clickable:hover {
|
|
transform: scale(1.03);
|
|
box-shadow: 0 0 0 2px #2563eb;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="layout">
|
|
<!-- SIDEBAR -->
|
|
<div class="sidebar">
|
|
<div class="logo">🩺 Praxis System</div>
|
|
|
|
<a href="/patients" class="nav-item active">
|
|
<i class="bi bi-people"></i> Patienten
|
|
</a>
|
|
|
|
<a href="/medications" class="nav-item">
|
|
<i class="bi bi-capsule"></i> Medikamente
|
|
</a>
|
|
|
|
<a href="/services/open" class="nav-item">
|
|
<i class="bi bi-receipt"></i> Offene Leistungen
|
|
</a>
|
|
|
|
<% if (user.role === 'arzt') { %>
|
|
<a href="/admin/invoices" class="nav-item">
|
|
<i class="bi bi-cash-coin"></i> Abrechnung
|
|
</a>
|
|
|
|
<a href="/admin/users" class="nav-item">
|
|
<i class="bi bi-gear"></i> Verwaltung
|
|
</a>
|
|
<% } %>
|
|
|
|
<div class="spacer"></div>
|
|
|
|
<a href="/logout" class="nav-item">
|
|
<i class="bi bi-box-arrow-right"></i> Logout
|
|
</a>
|
|
</div>
|
|
|
|
<!-- MAIN CONTENT -->
|
|
<div class="main">
|
|
<div class="topbar">
|
|
<h3>Willkommen, <%= user.username %></h3>
|
|
</div>
|
|
|
|
<!-- Flash Messages -->
|
|
<%- include("partials/flash") %>
|
|
|
|
<!-- =========================
|
|
WARTEZIMMER MONITOR (dein Original)
|
|
========================== -->
|
|
<div class="waiting-monitor">
|
|
<h5 class="mb-3">🪑 Wartezimmer-Monitor</h5>
|
|
|
|
<div class="waiting-grid">
|
|
<% const maxSlots = 21;
|
|
for (let i = 0; i < maxSlots; i++) {
|
|
const p = waitingPatients && waitingPatients[i];
|
|
%>
|
|
|
|
<% if (p) { %>
|
|
<% if (user.role === 'arzt') { %>
|
|
<a href="/patients/<%= p.id %>/overview" class="waiting-slot occupied clickable">
|
|
<div class="patient-text">
|
|
<div class="name"><%= p.firstname %> <%= p.lastname %></div>
|
|
<div class="birthdate">
|
|
<%= new Date(p.birthdate).toLocaleDateString("de-DE") %>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<% } else { %>
|
|
<div class="waiting-slot occupied">
|
|
<div class="patient-text">
|
|
<div class="name"><%= p.firstname %> <%= p.lastname %></div>
|
|
<div class="birthdate">
|
|
<%= new Date(p.birthdate).toLocaleDateString("de-DE") %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% } %>
|
|
<% } %>
|
|
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|