252 lines
5.9 KiB
Plaintext
252 lines
5.9 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" />
|
|
<script src="/js/datetime.js"></script>
|
|
|
|
<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 {
|
|
background: #111827; /* schwarz wie sidebar */
|
|
color: white;
|
|
|
|
margin: -24px -24px 24px -24px; /* zieht die Topbar bis an den Rand */
|
|
padding: 16px 24px;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
|
|
.topbar h3 {
|
|
margin: 0;
|
|
color: white;
|
|
}
|
|
|
|
.topbar-left{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:18px; /* Abstand zwischen Name und Datum */
|
|
}
|
|
|
|
.topbar-left{
|
|
display:flex;
|
|
align-items:baseline; /* ✅ Datum sitzt etwas tiefer / schöner */
|
|
gap:18px;
|
|
}
|
|
|
|
.topbar-left h3{
|
|
margin:0;
|
|
font-size:30px; /* Willkommen größer */
|
|
}
|
|
|
|
.topbar-datetime{
|
|
font-size:30px; /* ✅ kleiner als Willkommen */
|
|
opacity:0.85;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.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-auto-rows: 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;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.waiting-slot.occupied {
|
|
border-style: solid;
|
|
background: #eefdf5;
|
|
}
|
|
|
|
.patient-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.waiting-slot.clickable {
|
|
cursor: pointer;
|
|
transition: 0.15s ease;
|
|
}
|
|
|
|
.waiting-slot.clickable:hover {
|
|
transform: scale(1.03);
|
|
box-shadow: 0 0 0 2px #2563eb;
|
|
}
|
|
|
|
.nav-item.locked {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
.nav-item.locked:hover {
|
|
background: transparent;
|
|
color: #cbd5e1;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="layout">
|
|
<!-- ✅ SIDEBAR ausgelagert -->
|
|
<%- include("partials/sidebar", { user, active: "patients" }) %>
|
|
|
|
<!-- MAIN CONTENT -->
|
|
<div class="main">
|
|
<div class="topbar">
|
|
<div class="topbar-left">
|
|
<h3>Willkommen, <%= user.username %> || </h3>
|
|
|
|
<span id="datetime" class="topbar-datetime">
|
|
<!-- wird per JS gefüllt -->
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Flash Messages -->
|
|
<%- include("partials/flash") %>
|
|
|
|
<!-- =========================
|
|
WARTEZIMMER MONITOR
|
|
========================= -->
|
|
<div class="waiting-monitor">
|
|
<h5 class="mb-3">🪑 Wartezimmer-Monitor</h5>
|
|
|
|
<div class="waiting-grid">
|
|
<% if (waitingPatients && waitingPatients.length > 0) { %>
|
|
|
|
<% waitingPatients.forEach(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>
|
|
<% } %>
|
|
|
|
<% }) %>
|
|
|
|
<% } else { %>
|
|
<div class="text-muted">Keine Patienten im Wartezimmer.</div>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|