Member klickbar gemacht
This commit is contained in:
parent
ea584a57a1
commit
9dffaf1ffb
@ -817,3 +817,192 @@ body {
|
||||
font-size: 0.88rem;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
/* ================================================
|
||||
MITGLIED DETAIL – KARTEIKARTE
|
||||
================================================ */
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.detail-header-title {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.detail-header-title h1 {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
.member-id-badge {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
background: var(--bg);
|
||||
border: 1.5px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.status-badge {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.status-badge.active { background: #dcfce7; color: var(--success); }
|
||||
.status-badge.inactive { background: #fee2e2; color: var(--error); }
|
||||
.status-badge.warning { background: #fffbeb; color: var(--warning); }
|
||||
.detail-header-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Grid der Karten */
|
||||
.karteikarte-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.karteikarte-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* Einzelne Karte */
|
||||
.karte {
|
||||
background: white;
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.karte.edit-mode {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(45,45,204,0.08);
|
||||
}
|
||||
.karte-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.karte-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 20px;
|
||||
background: var(--bg);
|
||||
border-bottom: 1.5px solid var(--border);
|
||||
}
|
||||
.karte-header h3 {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
.karte-icon { font-size: 1.1rem; }
|
||||
.karte-body { padding: 20px; }
|
||||
|
||||
/* Zeilen & Felder */
|
||||
.karte-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.karte-row:last-child { margin-bottom: 0; }
|
||||
.karte-field {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
.karte-field-full { flex: 1 1 100%; }
|
||||
.karte-field label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.karte-field label small {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* Input Felder im Readonly-Modus */
|
||||
.karte-input {
|
||||
padding: 9px 12px;
|
||||
border: 1.5px solid transparent;
|
||||
border-radius: 8px;
|
||||
background: var(--bg);
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-size: 0.92rem;
|
||||
color: var(--text);
|
||||
width: 100%;
|
||||
transition: all 0.2s;
|
||||
outline: none;
|
||||
}
|
||||
.karte-input:disabled {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
cursor: default;
|
||||
-webkit-text-fill-color: var(--text);
|
||||
opacity: 1;
|
||||
}
|
||||
/* Im Edit-Modus */
|
||||
.karte-input:not(:disabled) {
|
||||
background: white;
|
||||
border-color: var(--border);
|
||||
}
|
||||
.karte-input:not(:disabled):focus {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
/* Immer readonly (nie editierbar) */
|
||||
.karte-readonly {
|
||||
background: #f8f8ff !important;
|
||||
color: var(--text-muted) !important;
|
||||
font-style: italic;
|
||||
}
|
||||
.karte-iban {
|
||||
font-family: monospace;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.karte-empty {
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/* Auszeit Tabelle */
|
||||
.pause-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
.pause-table th {
|
||||
text-align: left;
|
||||
padding: 8px 12px;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--text-muted);
|
||||
border-bottom: 1.5px solid var(--border);
|
||||
background: var(--bg);
|
||||
}
|
||||
.pause-table td {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.pause-table tr:last-child td { border-bottom: none; }
|
||||
.pause-table tr:hover td { background: var(--bg); }
|
||||
|
||||
/* Hover auf Mitglieder-Tabellenzeilen */
|
||||
.member-row:hover td { background: #f0f0ff !important; }
|
||||
|
||||
@ -156,4 +156,66 @@ router.post('/change-password', requireAdmin, async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
// ===== MITGLIED DETAIL =====
|
||||
router.get('/members/:id', requireAdmin, async (req, res) => {
|
||||
try {
|
||||
const [rows] = await db.query(`
|
||||
SELECT m.*,
|
||||
t.name as tariff_name, t.price_monthly, t.duration_months,
|
||||
c.name as category_name
|
||||
FROM memberships m
|
||||
LEFT JOIN tariffs t ON m.tariff_id = t.id
|
||||
LEFT JOIN categories c ON t.category_id = c.id
|
||||
WHERE m.id = ?
|
||||
`, [req.params.id]);
|
||||
|
||||
if (rows.length === 0) return res.redirect('/admin?error=Mitglied+nicht+gefunden');
|
||||
|
||||
const [pauses] = await db.query(
|
||||
'SELECT * FROM membership_pauses WHERE membership_id = ? ORDER BY pause_start DESC',
|
||||
[req.params.id]
|
||||
);
|
||||
const [tariffs] = await db.query(
|
||||
'SELECT * FROM tariffs WHERE active = 1 ORDER BY name ASC'
|
||||
);
|
||||
|
||||
res.render('admin/member-detail', {
|
||||
member: rows[0],
|
||||
pauses,
|
||||
tariffs,
|
||||
admin: req.session.adminUser,
|
||||
success: req.query.success || null,
|
||||
error: req.query.error || null
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
res.redirect('/admin?error=Fehler+beim+Laden+des+Mitglieds');
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/members/:id/update', requireAdmin, async (req, res) => {
|
||||
const {
|
||||
salutation, title, first_name, last_name, birth_date,
|
||||
email, phone, street, address_addition, zip, city,
|
||||
bank_name, account_holder, iban, tariff_id, status
|
||||
} = req.body;
|
||||
try {
|
||||
await db.query(`
|
||||
UPDATE memberships SET
|
||||
salutation=?, title=?, first_name=?, last_name=?, birth_date=?,
|
||||
email=?, phone=?, street=?, address_addition=?, zip=?, city=?,
|
||||
bank_name=?, account_holder=?, iban=?, tariff_id=?, status=?
|
||||
WHERE id=?
|
||||
`, [
|
||||
salutation, title || '', first_name, last_name, birth_date,
|
||||
email, phone || '', street, address_addition || '', zip, city,
|
||||
bank_name || '', account_holder || '', iban || '',
|
||||
tariff_id, status, req.params.id
|
||||
]);
|
||||
res.redirect(`/admin/members/${req.params.id}?success=Daten+gespeichert`);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
res.redirect(`/admin/members/${req.params.id}?error=Fehler+beim+Speichern`);
|
||||
}
|
||||
});
|
||||
module.exports = router;
|
||||
|
||||
@ -150,7 +150,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<% memberships.forEach(m => { %>
|
||||
<tr class="member-row">
|
||||
<tr class="member-row" onclick="window.location='/admin/members/<%= m.id %>'" style="cursor:pointer">
|
||||
<td><strong><%= m.salutation %> <%= m.first_name %> <%= m.last_name %></strong></td>
|
||||
<td><%= m.email %></td>
|
||||
<td><%= m.tariff_name || '–' %></td>
|
||||
|
||||
311
views/admin/member-detail.ejs
Normal file
311
views/admin/member-detail.ejs
Normal file
@ -0,0 +1,311 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PlusFit24 – Mitglied #<%= member.id %></title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body class="admin-body">
|
||||
<div class="admin-layout">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="admin-sidebar">
|
||||
<div class="logo admin-logo">Plusfit<span>24</span></div>
|
||||
<nav class="admin-nav">
|
||||
<a href="/admin" class="nav-link">📋 Tarife</a>
|
||||
<a href="/admin#kategorien" class="nav-link">🏷️ Kategorien</a>
|
||||
<a href="/admin#mitglieder" class="nav-link active">👥 Mitglieder</a>
|
||||
<a href="/admin#einstellungen" class="nav-link">⚙️ Einstellungen</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<span>👤 <%= admin %></span>
|
||||
<a href="/admin/logout" class="logout-link">Abmelden</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Hauptinhalt -->
|
||||
<main class="admin-main">
|
||||
|
||||
<!-- Kopfzeile -->
|
||||
<div class="detail-header">
|
||||
<a href="/admin#mitglieder" class="btn btn-outline btn-sm">← Zurück</a>
|
||||
<div class="detail-header-title">
|
||||
<h1><%= member.first_name %> <%= member.last_name %></h1>
|
||||
<span class="member-id-badge">Mitglied #<%= member.id %></span>
|
||||
<span class="status-badge <%= member.status === 'active' ? 'active' : 'inactive' %>">
|
||||
<%= member.status === 'active' ? '✅ Aktiv' : '❌ Inaktiv' %>
|
||||
</span>
|
||||
<% if (member.is_minor) { %>
|
||||
<span class="status-badge warning">⚠️ Minderjährig</span>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="detail-header-actions">
|
||||
<button class="btn btn-primary" id="editBtn" onclick="enableEdit()">✏️ Bearbeiten</button>
|
||||
<button class="btn btn-success hidden" id="saveBtn" form="memberForm">💾 Speichern</button>
|
||||
<button class="btn btn-outline hidden" id="cancelBtn" onclick="cancelEdit()">✕ Abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% if (success) { %><div class="alert alert-success"><%= success %></div><% } %>
|
||||
<% if (error) { %><div class="alert alert-error"><%= error %></div><% } %>
|
||||
|
||||
<form method="POST" action="/admin/members/<%= member.id %>/update" id="memberForm">
|
||||
|
||||
<div class="karteikarte-grid">
|
||||
|
||||
<!-- ===== KARTE 1: Persönliche Daten ===== -->
|
||||
<div class="karte">
|
||||
<div class="karte-header">
|
||||
<span class="karte-icon">👤</span>
|
||||
<h3>Persönliche Daten</h3>
|
||||
</div>
|
||||
<div class="karte-body">
|
||||
<div class="karte-row">
|
||||
<div class="karte-field">
|
||||
<label>Anrede</label>
|
||||
<select name="salutation" disabled class="karte-input">
|
||||
<option value="Herr" <%= member.salutation === 'Herr' ? 'selected' : '' %>>Herr</option>
|
||||
<option value="Frau" <%= member.salutation === 'Frau' ? 'selected' : '' %>>Frau</option>
|
||||
<option value="Keine Angabe" <%= member.salutation === 'Keine Angabe' ? 'selected' : '' %>>Keine Angabe</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="karte-field">
|
||||
<label>Titel</label>
|
||||
<input type="text" name="title" value="<%= member.title || '' %>" disabled class="karte-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="karte-row">
|
||||
<div class="karte-field">
|
||||
<label>Vorname</label>
|
||||
<input type="text" name="first_name" value="<%= member.first_name %>" disabled class="karte-input">
|
||||
</div>
|
||||
<div class="karte-field">
|
||||
<label>Nachname</label>
|
||||
<input type="text" name="last_name" value="<%= member.last_name %>" disabled class="karte-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="karte-row">
|
||||
<div class="karte-field">
|
||||
<label>Geburtsdatum</label>
|
||||
<input type="date" name="birth_date" value="<%= member.birth_date ? new Date(member.birth_date).toISOString().split('T')[0] : '' %>" disabled class="karte-input">
|
||||
</div>
|
||||
<div class="karte-field">
|
||||
<label>Telefon</label>
|
||||
<input type="tel" name="phone" value="<%= member.phone || '' %>" disabled class="karte-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="karte-row">
|
||||
<div class="karte-field karte-field-full">
|
||||
<label>E-Mail</label>
|
||||
<input type="email" name="email" value="<%= member.email %>" disabled class="karte-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== KARTE 2: Adresse ===== -->
|
||||
<div class="karte">
|
||||
<div class="karte-header">
|
||||
<span class="karte-icon">📍</span>
|
||||
<h3>Adresse</h3>
|
||||
</div>
|
||||
<div class="karte-body">
|
||||
<div class="karte-row">
|
||||
<div class="karte-field karte-field-full">
|
||||
<label>Straße, Hausnummer</label>
|
||||
<input type="text" name="street" value="<%= member.street %>" disabled class="karte-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="karte-row">
|
||||
<div class="karte-field karte-field-full">
|
||||
<label>Adresszusatz</label>
|
||||
<input type="text" name="address_addition" value="<%= member.address_addition || '' %>" disabled class="karte-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="karte-row">
|
||||
<div class="karte-field" style="max-width:140px">
|
||||
<label>PLZ</label>
|
||||
<input type="text" name="zip" value="<%= member.zip %>" disabled class="karte-input">
|
||||
</div>
|
||||
<div class="karte-field">
|
||||
<label>Ort</label>
|
||||
<input type="text" name="city" value="<%= member.city %>" disabled class="karte-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== KARTE 3: Vertrag ===== -->
|
||||
<div class="karte">
|
||||
<div class="karte-header">
|
||||
<span class="karte-icon">📄</span>
|
||||
<h3>Vertrag</h3>
|
||||
</div>
|
||||
<div class="karte-body">
|
||||
<div class="karte-row">
|
||||
<div class="karte-field karte-field-full">
|
||||
<label>Tarif</label>
|
||||
<select name="tariff_id" disabled class="karte-input">
|
||||
<% tariffs.forEach(t => { %>
|
||||
<option value="<%= t.id %>" <%= member.tariff_id === t.id ? 'selected' : '' %>>
|
||||
<%= t.name %> – <%= Number(t.price_monthly).toFixed(2) %>€/Monat
|
||||
</option>
|
||||
<% }) %>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="karte-row">
|
||||
<div class="karte-field">
|
||||
<label>Abschlussdatum</label>
|
||||
<input type="text" value="<%= member.signup_date ? new Date(member.signup_date).toLocaleDateString('de-DE') : '–' %>" disabled class="karte-input karte-readonly">
|
||||
</div>
|
||||
<div class="karte-field">
|
||||
<label>Vertragsbeginn</label>
|
||||
<input type="text" value="<%= member.contract_start ? new Date(member.contract_start).toLocaleDateString('de-DE') : '–' %>" disabled class="karte-input karte-readonly">
|
||||
</div>
|
||||
</div>
|
||||
<div class="karte-row">
|
||||
<div class="karte-field">
|
||||
<label>Vertragsende</label>
|
||||
<input type="text" value="<%= member.contract_end ? new Date(member.contract_end).toLocaleDateString('de-DE') : '–' %>" disabled class="karte-input karte-readonly">
|
||||
</div>
|
||||
<div class="karte-field">
|
||||
<label>Eff. Vertragsende <small>(inkl. Auszeit)</small></label>
|
||||
<input type="text" value="<%= member.effective_end ? new Date(member.effective_end).toLocaleDateString('de-DE') : '–' %>" disabled class="karte-input karte-readonly">
|
||||
</div>
|
||||
</div>
|
||||
<div class="karte-row">
|
||||
<div class="karte-field">
|
||||
<label>Erste Zahlung am</label>
|
||||
<input type="text" value="<%= member.first_payment_date ? new Date(member.first_payment_date).toLocaleDateString('de-DE') : '–' %>" disabled class="karte-input karte-readonly">
|
||||
</div>
|
||||
<div class="karte-field">
|
||||
<label>Erster Betrag</label>
|
||||
<input type="text" value="<%= member.first_payment_amt ? Number(member.first_payment_amt).toFixed(2) + ' €' : '–' %>" disabled class="karte-input karte-readonly">
|
||||
</div>
|
||||
</div>
|
||||
<div class="karte-row">
|
||||
<div class="karte-field">
|
||||
<label>Status</label>
|
||||
<select name="status" disabled class="karte-input">
|
||||
<option value="active" <%= member.status === 'active' ? 'selected' : '' %>>✅ Aktiv</option>
|
||||
<option value="inactive" <%= member.status === 'inactive' ? 'selected' : '' %>>❌ Inaktiv</option>
|
||||
<option value="paused" <%= member.status === 'paused' ? 'selected' : '' %>>⏸ Pausiert</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="karte-field">
|
||||
<label>Auszeit gesamt</label>
|
||||
<input type="text" value="<%= member.pause_months_total || 0 %> Monat(e)" disabled class="karte-input karte-readonly">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== KARTE 4: Bankdaten ===== -->
|
||||
<div class="karte">
|
||||
<div class="karte-header">
|
||||
<span class="karte-icon">🏦</span>
|
||||
<h3>Bankdaten / SEPA</h3>
|
||||
</div>
|
||||
<div class="karte-body">
|
||||
<div class="karte-row">
|
||||
<div class="karte-field karte-field-full">
|
||||
<label>Geldinstitut</label>
|
||||
<input type="text" name="bank_name" value="<%= member.bank_name || '' %>" disabled class="karte-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="karte-row">
|
||||
<div class="karte-field karte-field-full">
|
||||
<label>Kontoinhaber</label>
|
||||
<input type="text" name="account_holder" value="<%= member.account_holder || '' %>" disabled class="karte-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="karte-row">
|
||||
<div class="karte-field karte-field-full">
|
||||
<label>IBAN</label>
|
||||
<input type="text" name="iban" value="<%= member.iban ? member.iban.replace(/(.{4})/g, '$1 ').trim() : '' %>" disabled class="karte-input karte-iban">
|
||||
</div>
|
||||
</div>
|
||||
<div class="karte-row">
|
||||
<div class="karte-field">
|
||||
<label>SEPA akzeptiert</label>
|
||||
<input type="text" value="<%= member.sepa_accepted ? '✅ Ja' : '❌ Nein' %>" disabled class="karte-input karte-readonly">
|
||||
</div>
|
||||
<div class="karte-field">
|
||||
<label>AGB akzeptiert</label>
|
||||
<input type="text" value="<%= member.agb_accepted ? '✅ Ja' : '❌ Nein' %>" disabled class="karte-input karte-readonly">
|
||||
</div>
|
||||
</div>
|
||||
<% if (member.is_minor) { %>
|
||||
<div class="karte-row">
|
||||
<div class="karte-field karte-field-full">
|
||||
<label>Einverständniserklärung (Erziehungsberechtigte)</label>
|
||||
<input type="text" value="<%= member.guardian_consent ? '✅ Vorhanden' : '❌ Fehlt' %>" disabled class="karte-input karte-readonly">
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== KARTE 5: Auszeiten ===== -->
|
||||
<div class="karte karte-full">
|
||||
<div class="karte-header">
|
||||
<span class="karte-icon">⏸</span>
|
||||
<h3>Auszeiten</h3>
|
||||
</div>
|
||||
<div class="karte-body">
|
||||
<% if (pauses.length === 0) { %>
|
||||
<p class="karte-empty">Keine Auszeiten eingetragen.</p>
|
||||
<% } else { %>
|
||||
<table class="pause-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Von</th>
|
||||
<th>Bis</th>
|
||||
<th>Monate</th>
|
||||
<th>Grund</th>
|
||||
<th>Eingetragen am</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% pauses.forEach(p => { %>
|
||||
<tr>
|
||||
<td><%= new Date(p.pause_start).toLocaleDateString('de-DE') %></td>
|
||||
<td><%= new Date(p.pause_end).toLocaleDateString('de-DE') %></td>
|
||||
<td><strong><%= p.pause_months %></strong></td>
|
||||
<td><%= p.reason || '–' %></td>
|
||||
<td><%= new Date(p.created_at).toLocaleDateString('de-DE') %></td>
|
||||
</tr>
|
||||
<% }) %>
|
||||
</tbody>
|
||||
</table>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- end karteikarte-grid -->
|
||||
</form>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const editableFields = document.querySelectorAll('.karte-input:not(.karte-readonly)');
|
||||
|
||||
function enableEdit() {
|
||||
editableFields.forEach(f => f.removeAttribute('disabled'));
|
||||
document.getElementById('editBtn').classList.add('hidden');
|
||||
document.getElementById('saveBtn').classList.remove('hidden');
|
||||
document.getElementById('cancelBtn').classList.remove('hidden');
|
||||
document.querySelectorAll('.karte').forEach(k => k.classList.add('edit-mode'));
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
// Seite neu laden = alle Änderungen verwerfen
|
||||
window.location.reload();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user