275 lines
14 KiB
HTML
275 lines
14 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Neuer Kunde - LinkedIn Posts{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-white mb-2">Neuer Kunde</h1>
|
|
<p class="text-gray-400">Richte einen neuen Kunden ein und starte das initiale Setup</p>
|
|
</div>
|
|
|
|
<div class="max-w-2xl">
|
|
<form id="customerForm" class="card-bg rounded-xl border p-6 space-y-6">
|
|
<!-- Basic Info -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-white mb-4">Basis-Informationen</h3>
|
|
<div class="grid gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Name *</label>
|
|
<input type="text" name="name" required class="w-full input-bg border rounded-lg px-4 py-2 text-white">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">LinkedIn URL *</label>
|
|
<input type="url" name="linkedin_url" required placeholder="https://www.linkedin.com/in/username" class="w-full input-bg border rounded-lg px-4 py-2 text-white">
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Firma</label>
|
|
<input type="text" name="company_name" class="w-full input-bg border rounded-lg px-4 py-2 text-white">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">E-Mail</label>
|
|
<input type="email" name="email" class="w-full input-bg border rounded-lg px-4 py-2 text-white">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Persona -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-white mb-4">Persona & Stil</h3>
|
|
<div class="grid gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Persona</label>
|
|
<textarea name="persona" rows="3" placeholder="Beschreibe die Expertise, Positionierung und den Charakter der Person..." class="w-full input-bg border rounded-lg px-4 py-2 text-white"></textarea>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Ansprache</label>
|
|
<input type="text" name="form_of_address" placeholder="z.B. Duzen (Du/Euch) oder Siezen (Sie)" class="w-full input-bg border rounded-lg px-4 py-2 text-white">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Style Guide</label>
|
|
<textarea name="style_guide" rows="3" placeholder="Beschreibe den Schreibstil, Tonalität und Richtlinien..." class="w-full input-bg border rounded-lg px-4 py-2 text-white"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Post Types -->
|
|
<div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-semibold text-white">Post-Typen</h3>
|
|
<button type="button" id="addPostTypeBtn" class="text-sm text-brand-highlight hover:underline">+ Post-Typ hinzufügen</button>
|
|
</div>
|
|
<p class="text-sm text-gray-400 mb-4">Definiere verschiedene Arten von Posts (z.B. "Thought Leader", "Case Study", "How-To"). Diese werden zur Kategorisierung und typ-spezifischen Analyse verwendet.</p>
|
|
|
|
<div id="postTypesContainer" class="space-y-4">
|
|
<!-- Post type entries will be added here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Area -->
|
|
<div id="progressArea" class="hidden">
|
|
<div class="bg-brand-bg rounded-lg p-4">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span id="progressMessage" class="text-gray-300">Starte Setup...</span>
|
|
<span id="progressPercent" class="text-gray-400">0%</span>
|
|
</div>
|
|
<div class="w-full bg-brand-bg-dark rounded-full h-2">
|
|
<div id="progressBar" class="bg-brand-highlight h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Result Area -->
|
|
<div id="resultArea" class="hidden">
|
|
<div id="successResult" class="hidden bg-green-900/30 border border-green-500 rounded-lg p-4">
|
|
<div class="flex items-center gap-3">
|
|
<svg class="w-6 h-6 text-green-500" 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>
|
|
<span class="text-green-300">Setup erfolgreich abgeschlossen!</span>
|
|
</div>
|
|
</div>
|
|
<div id="errorResult" class="hidden bg-red-900/30 border border-red-500 rounded-lg p-4">
|
|
<div class="flex items-center gap-3">
|
|
<svg class="w-6 h-6 text-red-500" 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>
|
|
<span id="errorMessage" class="text-red-300">Fehler beim Setup</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit -->
|
|
<div class="flex gap-4">
|
|
<button type="submit" id="submitBtn" class="flex-1 btn-primary font-medium py-3 rounded-lg transition-colors">
|
|
Setup starten
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
const form = document.getElementById('customerForm');
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
const progressArea = document.getElementById('progressArea');
|
|
const resultArea = document.getElementById('resultArea');
|
|
const progressBar = document.getElementById('progressBar');
|
|
const progressMessage = document.getElementById('progressMessage');
|
|
const progressPercent = document.getElementById('progressPercent');
|
|
const postTypesContainer = document.getElementById('postTypesContainer');
|
|
const addPostTypeBtn = document.getElementById('addPostTypeBtn');
|
|
|
|
let postTypeIndex = 0;
|
|
|
|
function createPostTypeEntry() {
|
|
const index = postTypeIndex++;
|
|
const entry = document.createElement('div');
|
|
entry.className = 'bg-brand-bg rounded-lg p-4 border border-brand-bg-light';
|
|
entry.id = `postType_${index}`;
|
|
entry.innerHTML = `
|
|
<div class="flex justify-between items-start mb-3">
|
|
<span class="text-sm font-medium text-gray-300">Post-Typ ${index + 1}</span>
|
|
<button type="button" onclick="removePostType(${index})" class="text-red-400 hover:text-red-300 text-sm">Entfernen</button>
|
|
</div>
|
|
<div class="grid gap-3">
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label class="block text-xs text-gray-400 mb-1">Name *</label>
|
|
<input type="text" data-pt-field="name" data-pt-index="${index}" required placeholder="z.B. Thought Leader" class="w-full input-bg border rounded-lg px-3 py-2 text-white text-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-400 mb-1">Beschreibung</label>
|
|
<input type="text" data-pt-field="description" data-pt-index="${index}" placeholder="Kurze Beschreibung" class="w-full input-bg border rounded-lg px-3 py-2 text-white text-sm">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-400 mb-1">Identifizierende Hashtags (kommagetrennt)</label>
|
|
<input type="text" data-pt-field="hashtags" data-pt-index="${index}" placeholder="#ThoughtLeader, #Insight, #Leadership" class="w-full input-bg border rounded-lg px-3 py-2 text-white text-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-400 mb-1">Keywords (kommagetrennt)</label>
|
|
<input type="text" data-pt-field="keywords" data-pt-index="${index}" placeholder="Erfahrung, Learnings, Meinung" class="w-full input-bg border rounded-lg px-3 py-2 text-white text-sm">
|
|
</div>
|
|
<details class="mt-2">
|
|
<summary class="text-xs text-gray-400 cursor-pointer hover:text-gray-300">Erweiterte Eigenschaften</summary>
|
|
<div class="mt-3 grid gap-3">
|
|
<div>
|
|
<label class="block text-xs text-gray-400 mb-1">Zweck</label>
|
|
<input type="text" data-pt-field="purpose" data-pt-index="${index}" placeholder="z.B. Expertise zeigen, Meinungsführerschaft etablieren" class="w-full input-bg border rounded-lg px-3 py-2 text-white text-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-400 mb-1">Typische Tonalität</label>
|
|
<input type="text" data-pt-field="tone" data-pt-index="${index}" placeholder="z.B. reflektiert, provokativ, inspirierend" class="w-full input-bg border rounded-lg px-3 py-2 text-white text-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-400 mb-1">Zielgruppe</label>
|
|
<input type="text" data-pt-field="target_audience" data-pt-index="${index}" placeholder="z.B. Führungskräfte, Entscheider" class="w-full input-bg border rounded-lg px-3 py-2 text-white text-sm">
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
`;
|
|
postTypesContainer.appendChild(entry);
|
|
}
|
|
|
|
function removePostType(index) {
|
|
const entry = document.getElementById(`postType_${index}`);
|
|
if (entry) {
|
|
entry.remove();
|
|
}
|
|
}
|
|
|
|
function collectPostTypes() {
|
|
const postTypes = [];
|
|
const entries = postTypesContainer.querySelectorAll('[id^="postType_"]');
|
|
|
|
entries.forEach(entry => {
|
|
const index = entry.id.split('_')[1];
|
|
const name = entry.querySelector(`[data-pt-field="name"][data-pt-index="${index}"]`)?.value?.trim();
|
|
|
|
if (name) {
|
|
const hashtagsRaw = entry.querySelector(`[data-pt-field="hashtags"][data-pt-index="${index}"]`)?.value || '';
|
|
const keywordsRaw = entry.querySelector(`[data-pt-field="keywords"][data-pt-index="${index}"]`)?.value || '';
|
|
|
|
postTypes.push({
|
|
name: name,
|
|
description: entry.querySelector(`[data-pt-field="description"][data-pt-index="${index}"]`)?.value?.trim() || null,
|
|
identifying_hashtags: hashtagsRaw.split(',').map(h => h.trim()).filter(h => h),
|
|
identifying_keywords: keywordsRaw.split(',').map(k => k.trim()).filter(k => k),
|
|
semantic_properties: {
|
|
purpose: entry.querySelector(`[data-pt-field="purpose"][data-pt-index="${index}"]`)?.value?.trim() || null,
|
|
typical_tone: entry.querySelector(`[data-pt-field="tone"][data-pt-index="${index}"]`)?.value?.trim() || null,
|
|
target_audience: entry.querySelector(`[data-pt-field="target_audience"][data-pt-index="${index}"]`)?.value?.trim() || null
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
return postTypes;
|
|
}
|
|
|
|
addPostTypeBtn.addEventListener('click', createPostTypeEntry);
|
|
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = 'Wird gestartet...';
|
|
progressArea.classList.remove('hidden');
|
|
resultArea.classList.add('hidden');
|
|
|
|
const formData = new FormData(form);
|
|
|
|
// Add post types as JSON
|
|
const postTypes = collectPostTypes();
|
|
if (postTypes.length > 0) {
|
|
formData.append('post_types_json', JSON.stringify(postTypes));
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/admin/api/customers', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
const data = await response.json();
|
|
|
|
// Poll for progress
|
|
const taskId = data.task_id;
|
|
const pollInterval = setInterval(async () => {
|
|
const statusResponse = await fetch(`/admin/api/tasks/${taskId}`);
|
|
const status = await statusResponse.json();
|
|
|
|
progressBar.style.width = `${status.progress}%`;
|
|
progressPercent.textContent = `${status.progress}%`;
|
|
progressMessage.textContent = status.message;
|
|
|
|
if (status.status === 'completed') {
|
|
clearInterval(pollInterval);
|
|
progressArea.classList.add('hidden');
|
|
resultArea.classList.remove('hidden');
|
|
document.getElementById('successResult').classList.remove('hidden');
|
|
submitBtn.textContent = 'Setup starten';
|
|
submitBtn.disabled = false;
|
|
form.reset();
|
|
postTypesContainer.innerHTML = '';
|
|
postTypeIndex = 0;
|
|
} else if (status.status === 'error') {
|
|
clearInterval(pollInterval);
|
|
progressArea.classList.add('hidden');
|
|
resultArea.classList.remove('hidden');
|
|
document.getElementById('errorResult').classList.remove('hidden');
|
|
document.getElementById('errorMessage').textContent = status.message;
|
|
submitBtn.textContent = 'Setup starten';
|
|
submitBtn.disabled = false;
|
|
}
|
|
}, 1000);
|
|
} catch (error) {
|
|
progressArea.classList.add('hidden');
|
|
resultArea.classList.remove('hidden');
|
|
document.getElementById('errorResult').classList.remove('hidden');
|
|
document.getElementById('errorMessage').textContent = error.message;
|
|
submitBtn.textContent = 'Setup starten';
|
|
submitBtn.disabled = false;
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|