203 lines
11 KiB
HTML
203 lines
11 KiB
HTML
{% extends "company_base.html" %}
|
|
{% block title %}Research - {{ employee_name }} - {{ session.company_name }}{% 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>
|
|
<span class="text-white">Research</span>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-white mb-2">Research Topics</h1>
|
|
<p class="text-gray-400">Recherchiere neue Content-Themen für {{ employee_name }}</p>
|
|
</div>
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<!-- Left: Form -->
|
|
<div>
|
|
<form id="researchForm" class="card-bg rounded-xl border p-6">
|
|
<!-- Post Type Selection -->
|
|
<div id="postTypeArea" class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Post-Typ (optional)</label>
|
|
<div id="postTypeCards" class="grid grid-cols-2 gap-2 mb-2">
|
|
<div class="text-gray-500 text-sm">Lade Post-Typen...</div>
|
|
</div>
|
|
<p class="text-xs text-gray-500">Wähle einen Post-Typ für gezielte Recherche oder lasse leer für allgemeine Recherche.</p>
|
|
<input type="hidden" name="post_type_id" id="selectedPostTypeId" value="">
|
|
</div>
|
|
|
|
<!-- Progress Area -->
|
|
<div id="progressArea" class="hidden mb-6">
|
|
<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 Recherche...</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>
|
|
|
|
<button type="submit" id="submitBtn" {% if limit_reached %}disabled{% endif %}
|
|
class="w-full btn-primary font-medium py-3 rounded-lg transition-colors flex items-center justify-center gap-2 {% if limit_reached %}opacity-50 cursor-not-allowed{% 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
|
{% if limit_reached %}Limit erreicht{% else %}Research starten{% endif %}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Right: Results -->
|
|
<div>
|
|
<div id="resultsArea" class="card-bg rounded-xl border p-6">
|
|
<h3 class="text-lg font-semibold text-white mb-4">Gefundene Topics</h3>
|
|
<div id="topicsList" class="space-y-4">
|
|
<p class="text-gray-400">Starte eine Recherche um Topics zu finden...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
const USER_ID = '{{ user_id }}';
|
|
const EMPLOYEE_ID = '{{ employee_id }}';
|
|
|
|
const form = document.getElementById('researchForm');
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
const progressArea = document.getElementById('progressArea');
|
|
const progressBar = document.getElementById('progressBar');
|
|
const progressMessage = document.getElementById('progressMessage');
|
|
const progressPercent = document.getElementById('progressPercent');
|
|
const topicsList = document.getElementById('topicsList');
|
|
const postTypeCards = document.getElementById('postTypeCards');
|
|
const selectedPostTypeId = document.getElementById('selectedPostTypeId');
|
|
|
|
let currentPostTypes = [];
|
|
|
|
// Load post types on page load
|
|
async function loadPostTypes() {
|
|
try {
|
|
const response = await fetch(`/api/post-types?user_id=${USER_ID}`);
|
|
const data = await response.json();
|
|
|
|
if (data.post_types && data.post_types.length > 0) {
|
|
currentPostTypes = data.post_types;
|
|
|
|
postTypeCards.innerHTML = `
|
|
<button type="button" onclick="selectPostType('')" id="pt_all"
|
|
class="p-3 rounded-lg border text-left transition-colors bg-brand-highlight/20 border-brand-highlight text-white">
|
|
<div class="font-medium text-sm">Alle Typen</div>
|
|
<div class="text-xs text-gray-400 mt-1">Allgemeine Recherche</div>
|
|
</button>
|
|
` + data.post_types.map(pt => `
|
|
<button type="button" onclick="selectPostType('${pt.id}')" id="pt_${pt.id}"
|
|
class="p-3 rounded-lg border text-left transition-colors bg-brand-bg border-brand-bg-light hover:border-brand-highlight/50 text-white">
|
|
<div class="font-medium text-sm">${pt.name}</div>
|
|
<div class="text-xs text-gray-400 mt-1">${pt.analyzed_post_count || 0} Posts analysiert</div>
|
|
${pt.has_analysis ? '<span class="text-xs text-green-400">Analyse</span>' : ''}
|
|
</button>
|
|
`).join('');
|
|
} else {
|
|
postTypeCards.innerHTML = '<p class="text-gray-500 text-sm col-span-2">Keine Post-Typen konfiguriert.</p>';
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load post types:', error);
|
|
postTypeCards.innerHTML = '<p class="text-red-400 text-sm col-span-2">Fehler beim Laden.</p>';
|
|
}
|
|
}
|
|
|
|
function selectPostType(typeId) {
|
|
selectedPostTypeId.value = typeId;
|
|
|
|
document.querySelectorAll('[id^="pt_"]').forEach(card => {
|
|
if (card.id === `pt_${typeId}` || (typeId === '' && card.id === 'pt_all')) {
|
|
card.className = 'p-3 rounded-lg border text-left transition-colors bg-brand-highlight/20 border-brand-highlight text-white';
|
|
} else {
|
|
card.className = 'p-3 rounded-lg border text-left transition-colors bg-brand-bg border-brand-bg-light hover:border-brand-highlight/50 text-white';
|
|
}
|
|
});
|
|
}
|
|
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerHTML = '<svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Recherchiert...';
|
|
progressArea.classList.remove('hidden');
|
|
|
|
const formData = new FormData();
|
|
formData.append('user_id', USER_ID);
|
|
if (selectedPostTypeId.value) {
|
|
formData.append('post_type_id', selectedPostTypeId.value);
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/research', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
const data = await response.json();
|
|
|
|
const taskId = data.task_id;
|
|
const pollInterval = setInterval(async () => {
|
|
const statusResponse = await fetch(`/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');
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = '<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg> Research starten';
|
|
|
|
if (status.topics && status.topics.length > 0) {
|
|
topicsList.innerHTML = status.topics.map((topic, i) => `
|
|
<div class="bg-brand-bg rounded-lg p-4 border border-brand-bg-light">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div class="flex-1">
|
|
<span class="inline-block px-2 py-1 text-xs font-medium bg-brand-highlight/20 text-brand-highlight rounded mb-2">${topic.category || 'Topic'}</span>
|
|
<h4 class="font-semibold text-white">${topic.title}</h4>
|
|
${topic.angle ? `<p class="text-sm text-brand-highlight/80 mt-1">↳ ${topic.angle}</p>` : ''}
|
|
${topic.hook_idea ? `<p class="text-sm text-gray-300 mt-2 italic border-l-2 border-brand-highlight/30 pl-2">"${topic.hook_idea.substring(0, 150)}..."</p>` : ''}
|
|
<p class="text-gray-400 text-sm mt-2">${topic.fact ? topic.fact.substring(0, 200) + '...' : ''}</p>
|
|
${topic.source ? `<p class="text-gray-500 text-xs mt-2">Quelle: ${topic.source}</p>` : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
} else {
|
|
topicsList.innerHTML = '<p class="text-gray-400">Keine Topics gefunden.</p>';
|
|
}
|
|
} else if (status.status === 'error') {
|
|
clearInterval(pollInterval);
|
|
progressArea.classList.add('hidden');
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = '<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg> Research starten';
|
|
topicsList.innerHTML = `<p class="text-red-400">Fehler: ${status.message}</p>`;
|
|
}
|
|
}, 1000);
|
|
} catch (error) {
|
|
progressArea.classList.add('hidden');
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = '<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg> Research starten';
|
|
topicsList.innerHTML = `<p class="text-red-400">Fehler: ${error.message}</p>`;
|
|
}
|
|
});
|
|
|
|
// Load post types on page load
|
|
loadPostTypes();
|
|
</script>
|
|
{% endblock %}
|