knso/Webklar-Kundenbereich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(portal): Live-Vorschaufenster pro Projektkarte im Kundenbereich

Browse Source 
Statt nur Name + Link zeigt jede Projektkarte jetzt ein kleines,
skaliertes Live-Fenster der echten Webseite (iframe der previewUrl,
responsiv per ResizeObserver auf 1280px-Basisbreite herunterskaliert).
Klick aufs Fenster oeffnet die Seite im neuen Tab. Nicht-fertige
Projekte zeigen einen Platzhalter statt iframe.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude
2026-07-12 12:42:35 +00:00
parent a874e51773
commit 07ebcc7e62
2 changed files with 56 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
public/app.js
View File

@@ -83,6 +83,22 @@ function featuresForProject(features, projectId) {
return features.filter((f) => !f.projectId || f.projectId === projectId)
}
const PREVIEW_BASE_WIDTH = 1280
function setupPreviewFrame(frame) {
const view = frame.querySelector('.preview-frame__view')
if (!view) return
const apply = () => {
const w = frame.clientWidth
if (w) view.style.transform = `scale(${w / PREVIEW_BASE_WIDTH})`
}
if (typeof ResizeObserver !== 'undefined') {
new ResizeObserver(apply).observe(frame)
} else {
window.addEventListener('resize', apply)
}
apply()
}
function renderProjectCard(project, features) {
const li = document.createElement('li')
li.className = 'project-card'
@@ -91,14 +107,25 @@ function renderProjectCard(project, features) {
? `<div class="feature-tags">${projectFeatures.map((f) => `<span class="feature-tag">${escapeHtml(f.featureKey)}</span>`).join('')}</div>`
: ''
const ready = isProjectPreviewReady(project)
const url = project.previewUrl ? escapeAttr(project.previewUrl) : ''
const previewHtml = ready && url
? `
<a class="preview-frame" href="${url}" target="_blank" rel="noreferrer" data-preview-frame aria-label="Projekt-Webseite in neuem Tab öffnen">
<iframe class="preview-frame__view" src="${url}" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe>
<span class="preview-frame__hint">Webseite öffnen ↗</span>
</a>`
: `<div class="preview-frame preview-frame--empty"><span>${project.previewUrl ? 'Vorschau wird vorbereitet …' : 'Noch keine Webseite veröffentlicht'}</span></div>`
li.innerHTML = `
${previewHtml}
<h2>${escapeHtml(project.projectName || project.subdomain || 'Projekt')}</h2>
<dl>
<dt>Subdomain</dt><dd>${escapeHtml(project.subdomain || '–')}</dd>
<dt>Vorschau</dt><dd>${project.previewUrl ? `<a class="btn btn-green" href="${escapeAttr(project.previewUrl)}">Projekt-Webseite öffnen</a>` : '–'}</dd>
<dt>Live-Domain</dt><dd>${project.liveDomain ? escapeHtml(project.liveDomain) : '–'}</dd>
<dt>Status</dt><dd>${escapeHtml(project.status || '–')}</dd>
</dl>
${ready && url ? `<p class="preview-open"><a class="btn btn-green" href="${url}" target="_blank" rel="noreferrer">Projekt-Webseite öffnen ↗</a></p>` : ''}
${featureHtml}
<div class="project-details-toggle">
<button type="button" class="portal-btn-outline" data-details-btn>Details anzeigen</button>
@@ -106,6 +133,9 @@ function renderProjectCard(project, features) {
<div class="project-details hidden" data-details-box></div>
`
const frame = li.querySelector('[data-preview-frame]')
if (frame) setupPreviewFrame(frame)
const btn = li.querySelector('[data-details-btn]')
const box = li.querySelector('[data-details-box]')
let loaded = false