166 lines
4.6 KiB
Plaintext
166 lines
4.6 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Medikamentenübersicht</title>
|
||
<link rel="stylesheet" href="/css/bootstrap.min.css" />
|
||
<script src="/js/services-lock.js"></script>
|
||
|
||
<style>
|
||
input.form-control { box-shadow: none !important; }
|
||
|
||
input.form-control:disabled {
|
||
background-color: #fff !important;
|
||
color: #212529 !important;
|
||
opacity: 1 !important;
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
input.form-control:disabled:focus {
|
||
box-shadow: none !important;
|
||
outline: none !important;
|
||
}
|
||
/* Inaktive Medikamente ROT */
|
||
tr.table-secondary > td {
|
||
background-color: #f8d7da !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="bg-light">
|
||
|
||
<nav class="navbar navbar-dark bg-dark position-relative px-3">
|
||
<div class="position-absolute top-50 start-50 translate-middle d-flex align-items-center gap-2 text-white">
|
||
<span style="font-size:1.3rem">💊</span>
|
||
<span class="fw-semibold fs-5">Medikamentenübersicht</span>
|
||
</div>
|
||
<div class="ms-auto">
|
||
<a href="/dashboard" class="btn btn-outline-light btn-sm">⬅️ Dashboard</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container mt-4">
|
||
<%- include("partials/flash") %>
|
||
|
||
<div class="card shadow">
|
||
<div class="card-body">
|
||
|
||
<!-- 🔍 Suche -->
|
||
<form method="GET" action="/medications" class="row g-2 mb-3">
|
||
|
||
<div class="col-md-6">
|
||
<input type="text"
|
||
name="q"
|
||
class="form-control"
|
||
placeholder="🔍 Suche nach Medikament, Form, Dosierung"
|
||
value="<%= query?.q || '' %>">
|
||
</div>
|
||
|
||
<div class="col-md-3 d-flex gap-2">
|
||
<button class="btn btn-primary w-100">Suchen</button>
|
||
<a href="/medications" class="btn btn-secondary w-100">Reset</a>
|
||
</div>
|
||
|
||
<div class="col-md-3 d-flex align-items-center">
|
||
<div class="form-check">
|
||
<input class="form-check-input"
|
||
type="checkbox"
|
||
name="onlyActive"
|
||
value="1"
|
||
<%= query?.onlyActive === "1" ? "checked" : "" %>>
|
||
<label class="form-check-label">
|
||
Nur aktive Medikamente
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
</form>
|
||
|
||
<!-- ➕ Neu -->
|
||
<a href="/medications/create" class="btn btn-success mb-3">
|
||
➕ Neues Medikament
|
||
</a>
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-hover table-sm align-middle">
|
||
|
||
<thead class="table-dark">
|
||
<tr>
|
||
<th>Medikament</th>
|
||
<th>Darreichungsform</th>
|
||
<th>Dosierung</th>
|
||
<th>Packung</th>
|
||
<th>Status</th>
|
||
<th>Aktionen</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<% rows.forEach(r => { %>
|
||
|
||
<tr class="<%= r.active ? '' : 'table-secondary' %>">
|
||
|
||
<!-- UPDATE-FORM -->
|
||
<form method="POST" action="/medications/update/<%= r.id %>">
|
||
|
||
<td><%= r.medication %></td>
|
||
<td><%= r.form %></td>
|
||
|
||
<td>
|
||
<input type="text"
|
||
name="dosage"
|
||
value="<%= r.dosage %>"
|
||
class="form-control form-control-sm"
|
||
disabled>
|
||
</td>
|
||
|
||
<td>
|
||
<input type="text"
|
||
name="package"
|
||
value="<%= r.package %>"
|
||
class="form-control form-control-sm"
|
||
disabled>
|
||
</td>
|
||
|
||
<td class="text-center">
|
||
<%= r.active ? "Aktiv" : "Inaktiv" %>
|
||
</td>
|
||
|
||
<td class="d-flex gap-2">
|
||
|
||
<button class="btn btn-sm btn-outline-success save-btn" disabled>
|
||
💾
|
||
</button>
|
||
|
||
<button type="button"
|
||
class="btn btn-sm btn-outline-warning lock-btn">
|
||
🔓
|
||
</button>
|
||
|
||
</form>
|
||
|
||
<!-- TOGGLE-FORM (separat!) -->
|
||
<form method="POST" action="/medications/toggle/<%= r.medication_id %>">
|
||
<button class="btn btn-sm <%= r.active ? 'btn-outline-danger' : 'btn-outline-success' %>">
|
||
<%= r.active ? "⛔" : "✅" %>
|
||
</button>
|
||
</form>
|
||
|
||
</td>
|
||
</tr>
|
||
|
||
<% }) %>
|
||
</tbody>
|
||
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|