698 lines
36 KiB
HTML
698 lines
36 KiB
HTML
{% extends "company_base.html" %}
|
|
{% block title %}{{ post.topic_title }} - {{ employee_name }} - {{ session.company_name }}{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
.section-card {
|
|
background: rgba(61, 72, 72, 0.3);
|
|
border: 1px solid rgba(61, 72, 72, 0.6);
|
|
}
|
|
.linkedin-preview {
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
color: rgba(0, 0, 0, 0.9);
|
|
overflow: hidden;
|
|
}
|
|
.linkedin-header {
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
}
|
|
.linkedin-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #0a66c2 0%, #004182 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
.linkedin-user-info { flex: 1; min-width: 0; }
|
|
.linkedin-name { font-weight: 600; font-size: 14px; color: rgba(0, 0, 0, 0.9); }
|
|
.linkedin-headline { font-size: 12px; color: rgba(0, 0, 0, 0.6); margin-top: 2px; }
|
|
.linkedin-timestamp { font-size: 12px; color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
|
|
.linkedin-content { padding: 0 16px 12px; font-size: 14px; line-height: 1.5; color: rgba(0, 0, 0, 0.9); white-space: pre-wrap; }
|
|
.linkedin-engagement { padding: 8px 16px; border-top: 1px solid rgba(0, 0, 0, 0.08); display: flex; align-items: center; gap: 4px; font-size: 12px; color: rgba(0, 0, 0, 0.6); }
|
|
.linkedin-actions { display: flex; border-top: 1px solid rgba(0, 0, 0, 0.08); }
|
|
.linkedin-action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; font-size: 14px; font-weight: 600; color: rgba(0, 0, 0, 0.6); }
|
|
.linkedin-action-btn svg { width: 20px; height: 20px; }
|
|
.linkedin-post-image { width: 100%; max-height: 400px; object-fit: cover; }
|
|
.image-upload-zone { border: 2px dashed rgba(61, 72, 72, 0.8); border-radius: 0.75rem; padding: 1.5rem; text-align: center; cursor: pointer; transition: all 0.2s; }
|
|
.image-upload-zone:hover, .image-upload-zone.dragover { border-color: #ffc700; background: rgba(255, 199, 0, 0.05); }
|
|
.image-upload-zone input[type="file"] { display: none; }
|
|
.image-preview-container { position: relative; border-radius: 0.75rem; overflow: hidden; }
|
|
.image-preview-container img { width: 100%; border-radius: 0.75rem; }
|
|
.image-upload-progress { height: 4px; background: rgba(61, 72, 72, 0.8); border-radius: 2px; overflow: hidden; margin-top: 0.5rem; }
|
|
.image-upload-progress-bar { height: 100%; background: #ffc700; border-radius: 2px; transition: width 0.3s; }
|
|
.loading-spinner { border: 2px solid rgba(255, 199, 0, 0.2); border-top-color: #ffc700; border-radius: 50%; width: 20px; height: 20px; animation: spin 0.8s linear infinite; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
/* Preview Mode Toggle */
|
|
.preview-mode-btn { padding: 6px 12px; font-size: 12px; font-weight: 500; border-radius: 6px; color: #9ca3af; background: transparent; border: none; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
|
|
.preview-mode-btn.active { background: rgba(255, 199, 0, 0.2); color: #ffc700; }
|
|
.preview-mode-btn:hover:not(.active) { color: #d1d5db; }
|
|
/* Desktop View */
|
|
.linkedin-preview.desktop-view { max-width: 100%; margin: 0; }
|
|
/* Mobile View - smartphone mockup */
|
|
.linkedin-preview.mobile-view { max-width: 375px; margin: 0 auto; border: 12px solid #1f1f1f; border-radius: 36px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1); position: relative; }
|
|
.linkedin-preview.mobile-view::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background: #2a2a2a; border-radius: 2px; }
|
|
.linkedin-preview.mobile-view .linkedin-header { padding: 16px; }
|
|
.linkedin-preview.mobile-view .linkedin-avatar { width: 40px; height: 40px; font-size: 16px; }
|
|
.linkedin-preview.mobile-view .linkedin-name { font-size: 13px; }
|
|
.linkedin-preview.mobile-view .linkedin-headline { font-size: 11px; }
|
|
.linkedin-preview.mobile-view .linkedin-timestamp { font-size: 11px; }
|
|
.linkedin-preview.mobile-view .linkedin-content { padding: 0 16px 16px; font-size: 13px; line-height: 1.4; }
|
|
.linkedin-preview.mobile-view .linkedin-engagement { padding: 12px 16px; font-size: 11px; }
|
|
.linkedin-preview.mobile-view .linkedin-action-btn { font-size: 13px; padding: 14px 8px; gap: 4px; }
|
|
.linkedin-preview.mobile-view .linkedin-action-btn svg { width: 18px; height: 18px; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Breadcrumb -->
|
|
<div class="mb-6">
|
|
<nav class="flex items-center gap-2 text-sm">
|
|
<a href="/company/manage" class="text-gray-400 hover:text-white transition-colors">Inhalte verwalten</a>
|
|
<svg class="w-4 h-4 text-gray-600" 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"/></svg>
|
|
<a href="/company/manage?employee_id={{ employee_id }}" class="text-gray-400 hover:text-white transition-colors">{{ employee_name }}</a>
|
|
<svg class="w-4 h-4 text-gray-600" 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"/></svg>
|
|
<a href="/company/manage/posts?employee_id={{ employee_id }}" class="text-gray-400 hover:text-white transition-colors">Posts</a>
|
|
<svg class="w-4 h-4 text-gray-600" 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"/></svg>
|
|
<span class="text-white truncate max-w-xs">{{ post.topic_title or 'Post' }}</span>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<div class="mb-6">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div class="flex-1 min-w-0">
|
|
<h1 class="text-2xl font-bold text-white mb-2">{{ post.topic_title or 'Untitled Post' }}</h1>
|
|
<div class="flex items-center gap-3 text-sm text-gray-400 flex-wrap">
|
|
<span>{{ post.created_at.strftime('%d.%m.%Y um %H:%M Uhr') if post.created_at else 'N/A' }}</span>
|
|
<span class="text-gray-600">|</span>
|
|
<span>{{ post.iterations }} Iteration{{ 's' if post.iterations != 1 else '' }}</span>
|
|
<span class="text-gray-600">|</span>
|
|
<span>{{ employee_name }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3 flex-shrink-0">
|
|
<span class="px-3 py-1.5 rounded-lg text-sm font-medium {{ 'bg-green-600/30 text-green-300 border border-green-600/50' if post.status == 'approved' else 'bg-yellow-600/30 text-yellow-300 border border-yellow-600/50' if post.status == 'draft' else 'bg-blue-600/30 text-blue-300 border border-blue-600/50' }}">
|
|
{% if post.status == 'draft' %}Vorschlag{% elif post.status == 'approved' %}Bearbeitet{% elif post.status == 'published' %}Veröffentlicht{% else %}{{ post.status | capitalize }}{% endif %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
|
|
<!-- Post Content -->
|
|
<div class="xl:col-span-2">
|
|
<div class="section-card rounded-xl p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-lg font-semibold text-white flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-brand-highlight" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
LinkedIn Post
|
|
</h2>
|
|
<button onclick="copyToClipboard()" class="px-3 py-1.5 bg-brand-bg hover:bg-brand-bg-light rounded-lg text-sm text-gray-300 transition-colors flex items-center gap-2">
|
|
<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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
|
|
Kopieren
|
|
</button>
|
|
</div>
|
|
|
|
<!-- LinkedIn Preview -->
|
|
<div class="mb-4 flex items-center justify-between">
|
|
<div class="flex items-center gap-2 text-sm text-gray-400">
|
|
<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 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
|
|
LinkedIn Vorschau
|
|
</div>
|
|
<div class="flex items-center gap-1 bg-brand-bg rounded-lg p-1">
|
|
<button onclick="setPreviewMode('desktop')" id="desktopPreviewBtn" class="preview-mode-btn active">
|
|
<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.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
|
|
Desktop
|
|
</button>
|
|
<button onclick="setPreviewMode('mobile')" id="mobilePreviewBtn" class="preview-mode-btn">
|
|
<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="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
|
|
Smartphone
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="linkedin-preview shadow-lg desktop-view">
|
|
<div class="linkedin-header">
|
|
<div class="linkedin-avatar">{{ employee_name[:2] | upper if employee_name else 'UN' }}</div>
|
|
<div class="linkedin-user-info">
|
|
<div class="linkedin-name">{{ employee_name }}</div>
|
|
<div class="linkedin-headline">{{ session.company_name }}</div>
|
|
<div class="linkedin-timestamp">
|
|
<span>{{ post.created_at.strftime('%d.%m.%Y') if post.created_at else 'Jetzt' }}</span>
|
|
<span>•</span>
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M8 1a7 7 0 107 7 7 7 0 00-7-7zM3 8a5 5 0 011-3l.55.55A1.5 1.5 0 015 6.62v1.07a.75.75 0 00.22.53l.56.56a.75.75 0 00.53.22H7v.69a.75.75 0 00.22.53l.56.56a.75.75 0 01.22.53V13a5 5 0 01-5-5zm6.24 4.83l2-2.46a.75.75 0 00.09-.8l-.58-1.16A.76.76 0 0010 8H7v-.19a.51.51 0 01.28-.45l.38-.19a.74.74 0 00.3-1L7.4 5.19a.75.75 0 00-.67-.41H5.67a.75.75 0 01-.44-.14l-.34-.26a5 5 0 017.35 8.44z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="linkedin-content">{{ post.post_content }}</div>
|
|
|
|
<!-- LinkedIn Media Display -->
|
|
<div id="linkedinMediaSection" class="{% if not post.media_items or post.media_items | length == 0 %}{% if not post.image_url %}hidden{% endif %}{% endif %}">
|
|
{% if post.media_items and post.media_items | length > 0 %}
|
|
<div class="grid gap-1" style="grid-template-columns: repeat({{ post.media_items | length if post.media_items | length <= 3 else 3 }}, 1fr);">
|
|
{% for item in post.media_items %}
|
|
{% if item.type == 'image' %}
|
|
<img src="{{ item.url }}" alt="Post media" class="w-full h-48 object-cover">
|
|
{% elif item.type == 'video' %}
|
|
<video src="{{ item.url }}" class="w-full h-48 object-cover" controls></video>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% elif post.image_url %}
|
|
<!-- Backward compatibility: single image -->
|
|
<img src="{{ post.image_url }}" alt="Post image" class="linkedin-post-image">
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="linkedin-engagement">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="#0a66c2">
|
|
<path d="M19.46 11l-3.91-3.91a7 7 0 01-1.69-2.74l-.49-1.47A2.76 2.76 0 0010.76 1 2.75 2.75 0 008 3.74v1.12a9.19 9.19 0 00.46 2.85L8.89 9H4.12A2.12 2.12 0 002 11.12a2.16 2.16 0 00.92 1.76A2.11 2.11 0 002 14.62a2.14 2.14 0 001.28 2 2 2 0 00-.28 1 2.12 2.12 0 002 2.12v.14A2.12 2.12 0 007.12 22h7.49a8.08 8.08 0 003.58-.84l.31-.16H21V11z"/>
|
|
</svg>
|
|
<span style="margin-left: 4px;">42</span>
|
|
<span style="margin-left: auto;">12 Kommentare • 3 Reposts</span>
|
|
</div>
|
|
<div class="linkedin-actions">
|
|
<button class="linkedin-action-btn">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.46 11l-3.91-3.91a7 7 0 01-1.69-2.74l-.49-1.47A2.76 2.76 0 0010.76 1 2.75 2.75 0 008 3.74v1.12a9.19 9.19 0 00.46 2.85L8.89 9H4.12A2.12 2.12 0 002 11.12a2.16 2.16 0 00.92 1.76A2.11 2.11 0 002 14.62a2.14 2.14 0 001.28 2 2 2 0 00-.28 1 2.12 2.12 0 002 2.12v.14A2.12 2.12 0 007.12 22h7.49a8.08 8.08 0 003.58-.84l.31-.16H21V11z"/></svg>
|
|
Gefällt mir
|
|
</button>
|
|
<button class="linkedin-action-btn">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 9h10v1H7zm0 4h7v-1H7zm16-2a6.78 6.78 0 01-2.84 5.61L12 22v-4H8A7 7 0 018 4h8a7 7 0 017 7z"/></svg>
|
|
Kommentieren
|
|
</button>
|
|
<button class="linkedin-action-btn">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M13.96 5H6c-.55 0-1 .45-1 1v11H3V6c0-1.66 1.34-3 3-3h7.96L12 0l1.96 5zM17 7h-7c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2z"/></svg>
|
|
Reposten
|
|
</button>
|
|
<button class="linkedin-action-btn">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 3L0 10l7.66 4.26L16 8l-6.26 8.34L14 24l7-21z"/></svg>
|
|
Senden
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="space-y-6">
|
|
<!-- Actions -->
|
|
<div class="section-card rounded-xl p-6">
|
|
<h3 class="font-semibold text-white mb-4">Aktionen</h3>
|
|
<div class="space-y-3">
|
|
<button onclick="updateStatus('approved')" class="w-full px-4 py-3 bg-blue-600/20 hover:bg-blue-600/30 text-blue-300 rounded-lg transition-colors flex items-center justify-center gap-2 {% if post.status == 'approved' %}ring-2 ring-blue-500{% endif %}">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
|
|
Als bearbeitet markieren
|
|
</button>
|
|
<button onclick="updateStatus('published')" class="w-full px-4 py-3 bg-green-600/20 hover:bg-green-600/30 text-green-300 rounded-lg transition-colors flex items-center justify-center gap-2 {% if post.status == 'published' %}ring-2 ring-green-500{% endif %}">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
Als veröffentlicht markieren
|
|
</button>
|
|
<button onclick="updateStatus('draft')" class="w-full px-4 py-3 bg-yellow-600/20 hover:bg-yellow-600/30 text-yellow-300 rounded-lg transition-colors flex items-center justify-center gap-2 {% if post.status == 'draft' %}ring-2 ring-yellow-500{% endif %}">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
|
|
Zurück zu Vorschlag
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media Upload Section (Multi-Media Support) -->
|
|
<div class="section-card rounded-xl p-6">
|
|
<h3 class="font-semibold text-white mb-4 flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-brand-highlight" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
|
Medien (<span id="mediaCount">{{ post.media_items | length if post.media_items else 0 }}</span>/3)
|
|
</h3>
|
|
|
|
<!-- Media Grid (shown when media exists) -->
|
|
<div id="mediaGrid" class="grid gap-3 mb-3 {% if not post.media_items or post.media_items | length == 0 %}hidden{% endif %}" style="grid-template-columns: repeat({{ post.media_items | length if post.media_items and post.media_items | length <= 3 else 1 }}, 1fr);">
|
|
{% if post.media_items %}
|
|
{% for item in post.media_items %}
|
|
<div class="media-item relative group rounded-lg overflow-hidden" data-index="{{ item.order if item.order is defined else loop.index0 }}" draggable="true" style="cursor: grab;">
|
|
{% if item.type == 'image' %}
|
|
<img src="{{ item.url }}" alt="Media {{ loop.index }}" class="w-full h-48 object-cover">
|
|
{% elif item.type == 'video' %}
|
|
<video src="{{ item.url }}" class="w-full h-48 object-cover" controls></video>
|
|
{% endif %}
|
|
|
|
<!-- Delete button -->
|
|
<button onclick="deleteMedia({{ item.order if item.order is defined else loop.index0 }})" class="absolute top-2 right-2 p-2 bg-red-600 rounded-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-700">
|
|
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Order badge -->
|
|
<div class="absolute bottom-2 left-2 px-2 py-1 bg-black/50 rounded text-xs text-white">
|
|
{{ loop.index }}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Upload Zone (shown when < 3 media items) -->
|
|
<div id="mediaUploadZone" class="{% if post.media_items and post.media_items | length >= 3 %}hidden{% endif %} border-2 border-dashed border-brand-bg-light rounded-xl p-6 text-center cursor-pointer hover:border-brand-highlight transition-colors">
|
|
<input type="file" id="mediaFileInput" accept="image/jpeg,image/png,image/gif,image/webp,video/mp4,video/webm,video/quicktime" class="hidden">
|
|
<svg class="w-8 h-8 mx-auto mb-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
|
|
<p class="text-sm text-gray-400">Bild oder Video hierher ziehen oder <span class="text-brand-highlight">durchsuchen</span></p>
|
|
<p class="text-xs text-gray-500 mt-1">Bilder: max. 5 MB | Videos: max. 50 MB</p>
|
|
<p id="mediaTypeWarning" class="text-xs text-yellow-400 mt-2 hidden">⚠️ Kann nicht Bilder und Videos mischen</p>
|
|
</div>
|
|
|
|
<!-- Upload Progress -->
|
|
<div id="mediaUploadProgress" class="hidden">
|
|
<div class="image-upload-progress">
|
|
<div id="mediaProgressBar" class="image-upload-progress-bar" style="width: 0%"></div>
|
|
</div>
|
|
<p class="text-xs text-gray-400 mt-1 text-center">Wird hochgeladen...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Post Info -->
|
|
<div class="section-card rounded-xl p-6">
|
|
<h3 class="font-semibold text-white mb-4">Details</h3>
|
|
<div class="space-y-3 text-sm">
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-400">Erstellt</span>
|
|
<span class="text-white">{{ post.created_at.strftime('%d.%m.%Y') if post.created_at else 'N/A' }}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-400">Iterationen</span>
|
|
<span class="text-white">{{ post.iterations }}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-400">Zeichen</span>
|
|
<span class="text-white">{{ post.post_content | length }}</span>
|
|
</div>
|
|
{% if post.topic_title %}
|
|
<div class="pt-3 border-t border-brand-bg-light">
|
|
<span class="text-gray-400 block mb-1">Topic</span>
|
|
<span class="text-white">{{ post.topic_title }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
const POST_ID = '{{ post.id }}';
|
|
const EMPLOYEE_ID = '{{ employee_id }}';
|
|
|
|
function copyToClipboard() {
|
|
const content = document.querySelector('.linkedin-content').textContent;
|
|
navigator.clipboard.writeText(content).then(() => {
|
|
const btn = document.querySelector('[onclick="copyToClipboard()"]');
|
|
const original = btn.innerHTML;
|
|
btn.innerHTML = '<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="M5 13l4 4L19 7"/></svg> Kopiert!';
|
|
setTimeout(() => { btn.innerHTML = original; }, 2000);
|
|
});
|
|
}
|
|
|
|
// Preview Mode Toggle (Desktop/Mobile)
|
|
function setPreviewMode(mode) {
|
|
const preview = document.querySelector('.linkedin-preview');
|
|
const desktopBtn = document.getElementById('desktopPreviewBtn');
|
|
const mobileBtn = document.getElementById('mobilePreviewBtn');
|
|
|
|
if (mode === 'desktop') {
|
|
preview.classList.remove('mobile-view');
|
|
preview.classList.add('desktop-view');
|
|
desktopBtn.classList.add('active');
|
|
mobileBtn.classList.remove('active');
|
|
} else if (mode === 'mobile') {
|
|
preview.classList.remove('desktop-view');
|
|
preview.classList.add('mobile-view');
|
|
mobileBtn.classList.add('active');
|
|
desktopBtn.classList.remove('active');
|
|
}
|
|
}
|
|
|
|
async function updateStatus(newStatus) {
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('status', newStatus);
|
|
|
|
const response = await fetch(`/api/posts/${POST_ID}/status`, {
|
|
method: 'PATCH',
|
|
body: formData
|
|
});
|
|
|
|
if (response.ok) {
|
|
location.reload();
|
|
} else {
|
|
alert('Fehler beim Aktualisieren des Status');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert('Fehler beim Aktualisieren des Status');
|
|
}
|
|
}
|
|
|
|
// ==================== IMAGE UPLOAD ====================
|
|
|
|
function showToast(message, type = 'info') {
|
|
const toast = document.createElement('div');
|
|
toast.className = `fixed bottom-4 right-4 px-4 py-3 rounded-lg shadow-lg z-50 transition-all transform translate-y-0 opacity-100 ${
|
|
type === 'success' ? 'bg-green-600 text-white' :
|
|
type === 'error' ? 'bg-red-600 text-white' :
|
|
'bg-brand-bg-light text-white'
|
|
}`;
|
|
toast.textContent = message;
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => {
|
|
toast.classList.add('opacity-0', 'translate-y-2');
|
|
setTimeout(() => toast.remove(), 300);
|
|
}, 3000);
|
|
}
|
|
|
|
// ==================== MULTI-MEDIA UPLOAD ====================
|
|
|
|
let currentMediaItems = {{ media_items_dict | tojson | safe }};
|
|
|
|
async function handleMediaUpload(file) {
|
|
if (!file) return;
|
|
|
|
const uploadZone = document.getElementById('mediaUploadZone');
|
|
const progressEl = document.getElementById('mediaUploadProgress');
|
|
const progressBar = document.getElementById('mediaProgressBar');
|
|
const warningEl = document.getElementById('mediaTypeWarning');
|
|
|
|
if (currentMediaItems.length >= 3) {
|
|
showToast('Maximal 3 Medien erlaubt', 'error');
|
|
return;
|
|
}
|
|
|
|
const isVideo = file.type.startsWith('video/');
|
|
const hasImages = currentMediaItems.some(item => item.type === 'image');
|
|
const hasVideos = currentMediaItems.some(item => item.type === 'video');
|
|
|
|
if ((isVideo && hasImages) || (!isVideo && hasVideos)) {
|
|
warningEl.classList.remove('hidden');
|
|
showToast('Kann nicht Bilder und Videos mischen', 'error');
|
|
setTimeout(() => warningEl.classList.add('hidden'), 3000);
|
|
return;
|
|
}
|
|
|
|
if (isVideo && currentMediaItems.length > 0) {
|
|
showToast('Nur 1 Video pro Post erlaubt', 'error');
|
|
return;
|
|
}
|
|
|
|
uploadZone.classList.add('hidden');
|
|
progressEl.classList.remove('hidden');
|
|
progressBar.style.width = '30%';
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
progressBar.style.width = '60%';
|
|
|
|
const response = await fetch(`/api/posts/${POST_ID}/media`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
progressBar.style.width = '90%';
|
|
|
|
if (!response.ok) {
|
|
const err = await response.json();
|
|
throw new Error(err.detail || 'Upload fehlgeschlagen');
|
|
}
|
|
|
|
const result = await response.json();
|
|
progressBar.style.width = '100%';
|
|
currentMediaItems = result.media_items || [];
|
|
|
|
setTimeout(() => {
|
|
progressEl.classList.add('hidden');
|
|
refreshMediaGrid();
|
|
refreshLinkedInPreview();
|
|
}, 300);
|
|
|
|
const mediaType = isVideo ? 'Video' : 'Bild';
|
|
showToast(`${mediaType} erfolgreich hochgeladen!`, 'success');
|
|
|
|
} catch (error) {
|
|
console.error('Media upload error:', error);
|
|
showToast('Fehler: ' + error.message, 'error');
|
|
progressEl.classList.add('hidden');
|
|
uploadZone.classList.remove('hidden');
|
|
}
|
|
}
|
|
|
|
async function deleteMedia(index) {
|
|
if (!confirm('Media wirklich löschen?')) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/posts/${POST_ID}/media/${index}`, { method: 'DELETE' });
|
|
|
|
if (!response.ok) {
|
|
const err = await response.json();
|
|
throw new Error(err.detail || 'Löschen fehlgeschlagen');
|
|
}
|
|
|
|
const result = await response.json();
|
|
currentMediaItems = result.media_items || [];
|
|
|
|
refreshMediaGrid();
|
|
refreshLinkedInPreview();
|
|
showToast('Media entfernt', 'success');
|
|
|
|
} catch (error) {
|
|
console.error('Media delete error:', error);
|
|
showToast('Fehler: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
function refreshMediaGrid() {
|
|
const grid = document.getElementById('mediaGrid');
|
|
const count = document.getElementById('mediaCount');
|
|
const uploadZone = document.getElementById('mediaUploadZone');
|
|
|
|
count.textContent = currentMediaItems.length;
|
|
|
|
if (currentMediaItems.length === 0) {
|
|
grid.classList.add('hidden');
|
|
uploadZone.classList.remove('hidden');
|
|
return;
|
|
}
|
|
|
|
grid.classList.remove('hidden');
|
|
grid.style.gridTemplateColumns = `repeat(${currentMediaItems.length}, 1fr)`;
|
|
|
|
grid.innerHTML = currentMediaItems.map((item, i) => {
|
|
const isDragged = draggedItemData && item.url === draggedItemData.url;
|
|
const ghostClass = isDragged ? 'is-ghost' : '';
|
|
const ghostStyle = isDragged ? 'opacity: 0.3;' : '';
|
|
|
|
return `
|
|
<div class="media-item relative group rounded-lg overflow-hidden border-2 border-transparent hover:border-brand-highlight ${ghostClass}"
|
|
data-array-index="${i}"
|
|
draggable="true"
|
|
style="cursor: grab; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); ${ghostStyle}">
|
|
<div class="media-content">
|
|
${item.type === 'image'
|
|
? `<img src="${item.url}" alt="Media ${i+1}" class="w-full h-48 object-cover pointer-events-none">`
|
|
: `<video src="${item.url}" class="w-full h-48 object-cover pointer-events-none" controls></video>`
|
|
}
|
|
</div>
|
|
<button onclick="deleteMedia(${item.order})"
|
|
class="absolute top-2 right-2 p-2 bg-red-600 rounded-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-700 z-10">
|
|
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
<div class="absolute bottom-2 left-2 px-2 py-1 bg-black/50 rounded text-xs text-white pointer-events-none">${i+1}</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
initDragAndDrop();
|
|
|
|
if (currentMediaItems.length >= 3) {
|
|
uploadZone.classList.add('hidden');
|
|
} else {
|
|
uploadZone.classList.remove('hidden');
|
|
}
|
|
}
|
|
|
|
function refreshLinkedInPreview() {
|
|
const linkedinMediaSection = document.getElementById('linkedinMediaSection');
|
|
if (!linkedinMediaSection) return;
|
|
|
|
if (currentMediaItems.length === 0) {
|
|
linkedinMediaSection.classList.add('hidden');
|
|
return;
|
|
}
|
|
|
|
linkedinMediaSection.classList.remove('hidden');
|
|
const gridClass = currentMediaItems.length === 1 ? 'grid-cols-1' :
|
|
currentMediaItems.length === 2 ? 'grid-cols-2' : 'grid-cols-3';
|
|
|
|
linkedinMediaSection.innerHTML = `
|
|
<div class="grid ${gridClass} gap-1">
|
|
${currentMediaItems.map(item =>
|
|
item.type === 'image'
|
|
? `<img src="${item.url}" class="w-full h-48 object-cover">`
|
|
: `<video src="${item.url}" class="w-full h-48 object-cover" controls></video>`
|
|
).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Drag-and-Drop Reorder (Ultra Smooth with Ghost)
|
|
let draggedArrayIndex = null;
|
|
let originalDraggedIndex = null; // Track the original starting position
|
|
let draggedElement = null;
|
|
let lastTargetIndex = null;
|
|
let isSaving = false;
|
|
let draggedItemData = null;
|
|
|
|
function initDragAndDrop() {
|
|
const mediaGrid = document.getElementById('mediaGrid');
|
|
if (!mediaGrid) return;
|
|
|
|
const mediaItems = mediaGrid.querySelectorAll('.media-item');
|
|
|
|
mediaItems.forEach((item, idx) => {
|
|
item.addEventListener('dragstart', (e) => {
|
|
draggedArrayIndex = parseInt(e.currentTarget.dataset.arrayIndex);
|
|
originalDraggedIndex = draggedArrayIndex; // Save the original position
|
|
draggedElement = e.currentTarget;
|
|
lastTargetIndex = draggedArrayIndex;
|
|
draggedItemData = currentMediaItems[draggedArrayIndex];
|
|
|
|
setTimeout(() => {
|
|
e.currentTarget.style.opacity = '0.3';
|
|
}, 0);
|
|
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
e.dataTransfer.setDragImage(e.currentTarget, e.currentTarget.offsetWidth / 2, e.currentTarget.offsetHeight / 2);
|
|
});
|
|
|
|
item.addEventListener('dragend', (e) => {
|
|
const allItems = mediaGrid.querySelectorAll('.media-item');
|
|
allItems.forEach(i => {
|
|
i.style.opacity = '1';
|
|
i.classList.remove('is-ghost');
|
|
});
|
|
|
|
console.log('🎯 Dragend:', {originalDraggedIndex, lastTargetIndex});
|
|
|
|
if (lastTargetIndex !== null && lastTargetIndex !== originalDraggedIndex && !isSaving) {
|
|
console.log('💾 Triggering save...');
|
|
saveReorderInBackground();
|
|
} else {
|
|
console.log('⏭️ Skip save');
|
|
}
|
|
|
|
draggedArrayIndex = null;
|
|
originalDraggedIndex = null;
|
|
draggedElement = null;
|
|
lastTargetIndex = null;
|
|
draggedItemData = null;
|
|
});
|
|
|
|
item.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = 'move';
|
|
|
|
if (draggedArrayIndex === null) return;
|
|
|
|
const targetArrayIndex = parseInt(e.currentTarget.dataset.arrayIndex);
|
|
|
|
if (targetArrayIndex !== lastTargetIndex && draggedArrayIndex !== targetArrayIndex) {
|
|
lastTargetIndex = targetArrayIndex;
|
|
|
|
const newMediaItems = [...currentMediaItems];
|
|
const [movedItem] = newMediaItems.splice(draggedArrayIndex, 1);
|
|
newMediaItems.splice(targetArrayIndex, 0, movedItem);
|
|
|
|
currentMediaItems = newMediaItems;
|
|
draggedArrayIndex = targetArrayIndex;
|
|
|
|
refreshMediaGrid();
|
|
refreshLinkedInPreview();
|
|
}
|
|
});
|
|
|
|
item.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
});
|
|
});
|
|
}
|
|
|
|
async function saveReorderInBackground() {
|
|
if (isSaving) return;
|
|
isSaving = true;
|
|
|
|
const orderArray = currentMediaItems.map((item, i) => item.order);
|
|
|
|
try {
|
|
const response = await fetch(`/api/posts/${POST_ID}/media/reorder`, {
|
|
method: 'PUT',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({order: orderArray})
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Speichern fehlgeschlagen');
|
|
|
|
const result = await response.json();
|
|
currentMediaItems = result.media_items || [];
|
|
|
|
console.log('✓ Reihenfolge im Hintergrund gespeichert');
|
|
|
|
} catch (error) {
|
|
console.error('Background save error:', error);
|
|
showToast('Fehler beim Speichern - bitte Seite neu laden', 'error');
|
|
} finally {
|
|
isSaving = false;
|
|
}
|
|
}
|
|
|
|
function initMediaUpload() {
|
|
const uploadZone = document.getElementById('mediaUploadZone');
|
|
const fileInput = document.getElementById('mediaFileInput');
|
|
|
|
if (!uploadZone) return;
|
|
|
|
uploadZone.addEventListener('click', () => fileInput.click());
|
|
fileInput.addEventListener('change', (e) => {
|
|
if (e.target.files[0]) handleMediaUpload(e.target.files[0]);
|
|
e.target.value = '';
|
|
});
|
|
|
|
uploadZone.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
uploadZone.classList.add('dragover');
|
|
});
|
|
uploadZone.addEventListener('dragleave', () => {
|
|
uploadZone.classList.remove('dragover');
|
|
});
|
|
uploadZone.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
uploadZone.classList.remove('dragover');
|
|
if (e.dataTransfer.files[0]) handleMediaUpload(e.dataTransfer.files[0]);
|
|
});
|
|
|
|
initDragAndDrop();
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initMediaUpload();
|
|
});
|
|
</script>
|
|
{% endblock %}
|