184 lines
3.6 KiB
Plaintext
184 lines
3.6 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Plusfit – Mitgliederübersicht</title>
|
||
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
background: #f4f6f8;
|
||
}
|
||
|
||
.container {
|
||
max-width: 98%;
|
||
margin: 15px auto;
|
||
background: #fff;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
h2 {
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* 🔍 Suche */
|
||
.search-box {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.search-box input {
|
||
padding: 6px;
|
||
width: 250px;
|
||
}
|
||
|
||
/* 📊 Tabelle */
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 13px;
|
||
}
|
||
|
||
th, td {
|
||
border: 1px solid #ccc;
|
||
padding: 6px;
|
||
vertical-align: top;
|
||
}
|
||
|
||
th {
|
||
background: #e9ecef;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* 🔶 Leere Felder */
|
||
.empty {
|
||
background-color: #fff8e1;
|
||
color: #8a6d00;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* 🔒 Gesperrte User */
|
||
.locked {
|
||
background-color: #ffe5e5;
|
||
}
|
||
|
||
/* Aktionen */
|
||
.actions a {
|
||
margin-right: 6px;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.actions a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Scrollbar */
|
||
.table-wrapper {
|
||
overflow-x: auto;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
|
||
<h2>Mitgliederübersicht</h2>
|
||
|
||
<div class="search-box">
|
||
<form method="GET">
|
||
<input
|
||
type="text"
|
||
name="q"
|
||
placeholder="Suche Name, Ort, E-Mail"
|
||
value="<%= search || '' %>"
|
||
>
|
||
<button>Suchen</button>
|
||
<a href="/users/create">➕ Neu</a>
|
||
<a href="/users/dashboard">🏠 Dashboard</a>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>Vertragsnr.</th>
|
||
<th>Variante</th>
|
||
<th>Name</th>
|
||
<th>Geburtsdatum</th>
|
||
|
||
<th>Straße</th>
|
||
<th>Nr</th>
|
||
<th>PLZ</th>
|
||
<th>Ort</th>
|
||
<th>Land</th>
|
||
|
||
<th>Mobil</th>
|
||
<th>Telefon</th>
|
||
<th>E-Mail</th>
|
||
|
||
<th>Kontoinhaber</th>
|
||
<th>IBAN</th>
|
||
<th>BIC</th>
|
||
<th>Mandat</th>
|
||
|
||
<th>Status</th>
|
||
<th>Aktion</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<% if (users.length === 0) { %>
|
||
<tr>
|
||
<td colspan="16">Keine Mitglieder gefunden</td>
|
||
</tr>
|
||
<% } %>
|
||
|
||
<% users.forEach(u => { %>
|
||
<tr class="<%= u.gesperrt ? 'locked' : '' %>">
|
||
|
||
<td><%= u.id %></td>
|
||
<td><%= u.vertragsnummer || '—' %></td>
|
||
|
||
<td class="<%= u.vertragsvariante ? '' : 'empty' %>"><%= u.vertragsvariante || 'fehlt' %></td>
|
||
<td><%= u.vorname %> <%= u.nachname %></td>
|
||
<td class="<%= !u.geburtsdatum ? 'empty-field' : '' %>"><%= u.geburtsdatum || '— fehlt —' %></td>
|
||
|
||
|
||
<td class="<%= u.strasse ? '' : 'empty' %>"><%= u.strasse || 'fehlt' %></td>
|
||
<td class="<%= u.hausnummer ? '' : 'empty' %>"><%= u.hausnummer || 'fehlt' %></td>
|
||
<td class="<%= u.plz ? '' : 'empty' %>"><%= u.plz || 'fehlt' %></td>
|
||
<td class="<%= u.ort ? '' : 'empty' %>"><%= u.ort || 'fehlt' %></td>
|
||
<td class="<%= u.land ? '' : 'empty' %>"><%= u.land || 'fehlt' %></td>
|
||
|
||
<td class="<%= u.mobil ? '' : 'empty' %>"><%= u.mobil || 'fehlt' %></td>
|
||
<td class="<%= u.telefon ? '' : 'empty' %>"><%= u.telefon || 'fehlt' %></td>
|
||
<td class="<%= u.email ? '' : 'empty' %>"><%= u.email || 'fehlt' %></td>
|
||
|
||
<td class="<%= u.kontoinhaber ? '' : 'empty' %>"><%= u.kontoinhaber || 'fehlt' %></td>
|
||
<td class="<%= u.iban ? '' : 'empty' %>"><%= u.iban || 'fehlt' %></td>
|
||
<td class="<%= u.bic ? '' : 'empty' %>"><%= u.bic || 'fehlt' %></td>
|
||
<td class="<%= u.mandatsreferenz ? '' : 'empty' %>"><%= u.mandatsreferenz || 'fehlt' %></td>
|
||
|
||
<td>
|
||
<%= u.gesperrt ? '🔒 gesperrt' : '🟢 aktiv' %>
|
||
</td>
|
||
|
||
<td class="actions">
|
||
<a href="/users/edit/<%= u.id %>">✏️</a>
|
||
</td>
|
||
|
||
</tr>
|
||
<% }) %>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|