Aktivitaeten: eigene Seite mit Pagination, kaputte Eintragslinks repariert
Der Link unter "Letzte Aktivitaeten" heisst jetzt "Alle" und fuehrt auf /aktivitaeten - den vollstaendigen Verlauf ueber alle Bewerbungen, 25 Eintraege je Seite. Die Blaetterleiste sind echte Links (kein JS), damit Zurueck-Taste, Lesezeichen und Neuer-Tab funktionieren; eine Seitenzahl ausserhalb des Bereichs wird auf den gueltigen Rand geklemmt statt eine leere Seite zu zeigen. Dabei ein Fehler von mir aus dem letzten Commit behoben: Ich hatte den Tag-Namen samt href per <%= %> zusammengesetzt, was die Anfuehrungszeichen escaped - heraus kam href=""/bewerbung/121"" und damit die URL /%22/bewerbung/121%22. Jetzt zwei ausgeschriebene Zweige (Link bzw. Block). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<%- include('partials/head') %>
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col transition-colors duration-300 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100" id="body">
|
||||
<%- include('partials/header') %>
|
||||
|
||||
<main class="flex-1 container mx-auto px-4 py-8 max-w-4xl">
|
||||
<%
|
||||
// Farben synchron zur Startseite (views/index.ejs) halten.
|
||||
const statusDot = {
|
||||
'Entwurf': 'bg-purple-500',
|
||||
'Gesendet': 'bg-indigo-500',
|
||||
'Eingangsbestätigung': 'bg-blue-500',
|
||||
'In Bearbeitung': 'bg-teal-500',
|
||||
'Interessiert': 'bg-pink-500',
|
||||
'Warten auf Rückmeldung': 'bg-orange-500',
|
||||
'Warten auf meine Antwort': 'bg-fuchsia-500',
|
||||
'Vorstellungsgespräch': 'bg-yellow-500',
|
||||
'Vertragsverhandlung': 'bg-lime-500',
|
||||
'Einstellung': 'bg-green-500',
|
||||
'Absage': 'bg-red-500',
|
||||
'Absage von meiner Seite': 'bg-rose-500',
|
||||
'Keine Rückmeldung': 'bg-gray-400'
|
||||
};
|
||||
|
||||
// Welche Seitenzahlen die Blätterleiste zeigt: erste, letzte, die aktuelle
|
||||
// und je eine daneben — dazwischen Auslassungen (null). Bei wenigen Seiten
|
||||
// stehen ohnehin alle da.
|
||||
const zahlen = [];
|
||||
for (let i = 1; i <= seiten; i++) {
|
||||
const nah = Math.abs(i - seite) <= 1;
|
||||
const rand = (i === 1 || i === seiten);
|
||||
if (nah || rand) {
|
||||
if (zahlen.length && zahlen[zahlen.length - 1] !== null && i - zahlen[zahlen.length - 1] > 1) zahlen.push(null);
|
||||
zahlen.push(i);
|
||||
}
|
||||
}
|
||||
const von = gesamt === 0 ? 0 : (seite - 1) * proSeite + 1;
|
||||
const bis = Math.min(seite * proSeite, gesamt);
|
||||
%>
|
||||
|
||||
<div class="mb-6 flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">Aktivitäten</h1>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
Jede Statusänderung, über alle Bewerbungen hinweg – die jüngste zuerst.
|
||||
</p>
|
||||
</div>
|
||||
<a href="/" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">Zurück zu den Bewerbungen</a>
|
||||
</div>
|
||||
|
||||
<section class="bg-white dark:bg-gray-800 rounded-lg shadow-md">
|
||||
<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
<% if (gesamt) { %>
|
||||
<span class="font-semibold text-gray-800 dark:text-gray-100"><%= von %>–<%= bis %></span>
|
||||
von <span class="font-semibold text-gray-800 dark:text-gray-100"><%= gesamt %></span>
|
||||
<%= gesamt === 1 ? 'Eintrag' : 'Einträgen' %>
|
||||
<% } else { %>
|
||||
Keine Einträge
|
||||
<% } %>
|
||||
</p>
|
||||
<% if (seiten > 1) { %>
|
||||
<p class="text-sm text-gray-400 dark:text-gray-500">Seite <%= seite %> von <%= seiten %></p>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
<% if (aktivitaet.length) { %>
|
||||
<ul class="divide-y divide-gray-100 dark:divide-gray-700/60">
|
||||
<% aktivitaet.forEach(function (a) { %>
|
||||
<li>
|
||||
<% if (a.bewerbung_id) { %>
|
||||
<a href="/bewerbung/<%= a.bewerbung_id %>" class="flex items-start gap-3 px-6 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
|
||||
<% } else { %>
|
||||
<div class="flex items-start gap-3 px-6 py-3">
|
||||
<% } %>
|
||||
<span class="mt-1.5 inline-block w-2.5 h-2.5 rounded-full shrink-0 <%= statusDot[a.status] || 'bg-gray-300' %>"></span>
|
||||
<span class="min-w-0 flex-1">
|
||||
<span class="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
|
||||
<% if (a.bewerbung_id) { %>
|
||||
<span class="text-sm font-medium text-gray-900 dark:text-white break-words"><%= a.firma || '(ohne Firma)' %></span>
|
||||
<% if (a.stelle) { %>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400 break-words">· <%= a.stelle %></span>
|
||||
<% } %>
|
||||
<% } else { %>
|
||||
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">Gelöschte Bewerbung</span>
|
||||
<% } %>
|
||||
</span>
|
||||
<span class="mt-0.5 flex flex-wrap items-baseline gap-x-2 text-sm">
|
||||
<span class="font-medium text-gray-700 dark:text-gray-200"><%= a.status %></span>
|
||||
<span class="text-gray-400 dark:text-gray-500 whitespace-nowrap">· <%= new Date(a.datum).toLocaleDateString('de-DE') %></span>
|
||||
<% if (a.kommentar && a.kommentar.trim()) { %>
|
||||
<span class="text-gray-500 dark:text-gray-400 break-words">· <%= a.kommentar %></span>
|
||||
<% } %>
|
||||
</span>
|
||||
</span>
|
||||
<% if (a.bewerbung_id) { %></a><% } else { %></div><% } %>
|
||||
</li>
|
||||
<% }); %>
|
||||
</ul>
|
||||
<% } else { %>
|
||||
<div class="px-6 py-16 text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
Noch keine Statusänderungen protokolliert.
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<% if (seiten > 1) { %>
|
||||
<!-- Blätterleiste: echte Links (kein JS), damit Zurück-Taste, Lesezeichen
|
||||
und das Öffnen in einem neuen Tab funktionieren. -->
|
||||
<nav class="flex flex-wrap items-center justify-center gap-1 px-6 py-4 border-t border-gray-200 dark:border-gray-700" aria-label="Seiten">
|
||||
<% if (seite > 1) { %>
|
||||
<a href="/aktivitaeten?seite=<%= seite - 1 %>" rel="prev"
|
||||
class="inline-flex items-center gap-1 px-3 py-1.5 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
|
||||
Zurück
|
||||
</a>
|
||||
<% } else { %>
|
||||
<span class="inline-flex items-center gap-1 px-3 py-1.5 text-sm rounded-md border border-gray-200 dark:border-gray-700 text-gray-300 dark:text-gray-600 cursor-not-allowed">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
|
||||
Zurück
|
||||
</span>
|
||||
<% } %>
|
||||
|
||||
<% zahlen.forEach(function (n) { %>
|
||||
<% if (n === null) { %>
|
||||
<span class="px-2 text-sm text-gray-400 dark:text-gray-600">…</span>
|
||||
<% } else if (n === seite) { %>
|
||||
<span aria-current="page"
|
||||
class="min-w-[2.25rem] text-center px-2 py-1.5 text-sm font-medium rounded-md bg-blue-600 text-white"><%= n %></span>
|
||||
<% } else { %>
|
||||
<a href="/aktivitaeten?seite=<%= n %>"
|
||||
class="min-w-[2.25rem] text-center px-2 py-1.5 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"><%= n %></a>
|
||||
<% } %>
|
||||
<% }); %>
|
||||
|
||||
<% if (seite < seiten) { %>
|
||||
<a href="/aktivitaeten?seite=<%= seite + 1 %>" rel="next"
|
||||
class="inline-flex items-center gap-1 px-3 py-1.5 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
|
||||
Weiter
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
||||
</a>
|
||||
<% } else { %>
|
||||
<span class="inline-flex items-center gap-1 px-3 py-1.5 text-sm rounded-md border border-gray-200 dark:border-gray-700 text-gray-300 dark:text-gray-600 cursor-not-allowed">
|
||||
Weiter
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
||||
</span>
|
||||
<% } %>
|
||||
</nav>
|
||||
<% } %>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<%- include('partials/footer') %>
|
||||
</body>
|
||||
</html>
|
||||
+11
-4
@@ -333,15 +333,22 @@
|
||||
<section id="aktivitaetCard" class="bg-white dark:bg-gray-800 rounded-lg shadow-md mt-8">
|
||||
<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Letzte Aktivitäten</h2>
|
||||
<a href="/statistik#aktivitaet" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">Alle in der Statistik</a>
|
||||
<a href="/aktivitaeten" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">Alle</a>
|
||||
</div>
|
||||
|
||||
<% if (aktivitaet && aktivitaet.length) { %>
|
||||
<ul class="divide-y divide-gray-100 dark:divide-gray-700/60">
|
||||
<% aktivitaet.forEach(function (a) { %>
|
||||
<li>
|
||||
<% var ziel = a.bewerbung_id ? ('/bewerbung/' + a.bewerbung_id) : null; %>
|
||||
<<%= ziel ? 'a href="' + ziel + '"' : 'div' %> class="flex items-start gap-3 px-6 py-3 <%= ziel ? 'hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors' : '' %>">
|
||||
<!-- Eintrag zu einer noch existierenden Bewerbung ist ein Link, einer zu
|
||||
einer gelöschten bleibt ein Block. Bewusst zwei ausgeschriebene Zweige:
|
||||
den Tag-Namen samt href per <%%= %> zusammenzusetzen escaped die
|
||||
Anführungszeichen und erzeugt Links wie /%22/bewerbung/121%22. -->
|
||||
<% if (a.bewerbung_id) { %>
|
||||
<a href="/bewerbung/<%= a.bewerbung_id %>" class="flex items-start gap-3 px-6 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
|
||||
<% } else { %>
|
||||
<div class="flex items-start gap-3 px-6 py-3">
|
||||
<% } %>
|
||||
<span class="mt-1.5 inline-block w-2.5 h-2.5 rounded-full shrink-0 <%= statusDot[a.status] || 'bg-gray-300' %>"></span>
|
||||
<span class="min-w-0 flex-1">
|
||||
<span class="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
|
||||
@@ -365,7 +372,7 @@
|
||||
<% } %>
|
||||
</span>
|
||||
</span>
|
||||
</<%= ziel ? 'a' : 'div' %>>
|
||||
<% if (a.bewerbung_id) { %></a><% } else { %></div><% } %>
|
||||
</li>
|
||||
<% }); %>
|
||||
</ul>
|
||||
|
||||
+4
-1
@@ -308,7 +308,10 @@
|
||||
<!-- Recent activity -->
|
||||
<div class="stat-card">
|
||||
<h2 id="aktivitaet" class="text-gray-900 dark:text-white">Letzte Aktivität</h2>
|
||||
<p class="sub mb-5">Die jüngsten Statusänderungen deiner Bewerbungen.</p>
|
||||
<p class="sub mb-5">
|
||||
Die jüngsten Statusänderungen deiner Bewerbungen.
|
||||
<a href="/aktivitaeten" class="text-blue-600 dark:text-sky-400 hover:underline">Alle</a>
|
||||
</p>
|
||||
<% if (aktivitaet.length) {
|
||||
const statusColor = (s) => ({
|
||||
'Entwurf':'#94a3b8','Gesendet':'#3b82f6','Eingangsbestätigung':'#0ea5e9','In Bearbeitung':'#6366f1',
|
||||
|
||||
Reference in New Issue
Block a user