Files
jobbi-bewerbung/views/partials/favoriten.ejs
T
thomasandClaude 3a108d3fec Jobangebote: Favoriten (Stern) und Startseiten-Sektion ganz oben
Stellen lassen sich per Stern merken — unabhängig vom Status (offen /
uebernommen / abgelehnt). Neue Spalte jobangebote.favorit (PRAGMA-Migration),
JSON-Toggle-Endpunkt /jobangebote/:id/favorit, Stern-Button auf den Karten
sowie eine "Gemerkte Stellen"-Sektion ganz oben auf der Startseite. Toggle
laeuft per fetch mit optimistischem UI; beim Entfernen auf der Startseite
verschwindet die Zeile sofort.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-07-14 14:49:47 +02:00

72 lines
4.6 KiB
Plaintext

<%
// Gemerkte Stellen — Sektion ganz oben auf der Startseite. Zeigt alle
// favorisierten Jobangebote unabhängig von ihrem Status (offen/uebernommen/…).
// Wird nur gerendert, wenn mindestens ein Favorit vorhanden ist.
function favStatusBadge(status) {
if (status === 'offen') return 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200';
if (status === 'uebernommen') return 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-200';
if (status === 'abgelehnt') return 'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-200';
return 'bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-200';
}
function favStatusLabel(status) {
if (status === 'offen') return 'Offen';
if (status === 'uebernommen') return 'Übernommen';
if (status === 'abgelehnt') return 'Abgelehnt';
return status || '—';
}
%>
<% if (favoriten && favoriten.length) { %>
<%- include('favorit-script') %>
<section id="favoritenCard" class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-8 overflow-hidden">
<div class="flex flex-wrap items-center gap-2 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<svg class="h-5 w-5 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79-5.2-2.73-5.2 2.73.99-5.79-4.21-4.1 5.82-.85 2.6-5.27z"/></svg>
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Gemerkte Stellen</h2>
<span class="ml-auto inline-flex items-center gap-1.5 rounded-full bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-700 dark:bg-amber-500/10 dark:text-amber-300">
<%= favoriten.length %>
</span>
</div>
<ul class="divide-y divide-gray-100 dark:divide-gray-700/60">
<% favoriten.forEach(function(j){ %>
<li data-fav-item class="flex flex-wrap items-start justify-between gap-3 px-6 py-4">
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2 mb-1">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium <%= favStatusBadge(j.status) %>"><%= favStatusLabel(j.status) %></span>
<% if (j.gehalt) { %>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300"><%= j.gehalt %></span>
<% } %>
</div>
<% if (j.quelle_url) { %>
<a href="<%= safeUrl(j.quelle_url) %>" target="_blank" rel="noopener noreferrer"
class="text-base font-semibold text-gray-800 dark:text-gray-100 break-words hover:underline">
<%= j.firma %>
</a>
<% } else { %>
<p class="text-base font-semibold text-gray-800 dark:text-gray-100 break-words"><%= j.firma %></p>
<% } %>
<p class="text-sm text-gray-700 dark:text-gray-200 break-words"><%= j.stelle %></p>
<% if (j.ort) { %>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5"><%= j.ort %></p>
<% } %>
<% if (j.verknuepfte_bewerbung_id) { %>
<p class="mt-1.5">
<a href="/bewerbung/<%= j.verknuepfte_bewerbung_id %>" class="inline-flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400 hover:underline">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
Zur Bewerbung
</a>
</p>
<% } %>
</div>
<div class="shrink-0 flex flex-col gap-2 self-start items-end">
<% if (j.verknuepfte_bewerbung_id) { %>
<a href="/bewerbung/<%= j.verknuepfte_bewerbung_id %>"
class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors">
Bewerbung
</a>
<% } %>
<%- include('favorit-button', { j: j }) %>
</div>
</li>
<% }); %>
</ul>
</section>
<% } %>