feat(phase-2): Complete social media API integration
- Add ImageUploadService for public URL generation (Meta APIs) - Create PublisherManager for unified multi-platform publishing - Add /api/publish endpoints (single, multiple, thread, test) - Add compose page in dashboard for creating posts - Add connection test script (scripts/test_connections.py) - Update navigation with compose link and logout New endpoints: - POST /api/publish/single - Publish to one platform - POST /api/publish/multiple - Publish to multiple platforms - POST /api/publish/thread - Publish thread (X/Threads) - GET /api/publish/test - Test all API connections - GET /api/publish/platforms - List available platforms Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
443
dashboard/templates/compose.html
Normal file
443
dashboard/templates/compose.html
Normal file
@@ -0,0 +1,443 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Crear Post - Social Media Automation</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body { background-color: #1a1a2e; color: #eee; }
|
||||
.card { background-color: #16213e; border-radius: 12px; }
|
||||
.accent { color: #d4a574; }
|
||||
.btn-primary { background-color: #d4a574; color: #1a1a2e; }
|
||||
.btn-primary:hover { background-color: #c49564; }
|
||||
.btn-secondary { background-color: #374151; color: #fff; }
|
||||
.btn-secondary:hover { background-color: #4b5563; }
|
||||
textarea { background-color: #0f172a; border-color: #334155; }
|
||||
textarea:focus { border-color: #d4a574; outline: none; }
|
||||
.platform-btn { transition: all 0.2s; }
|
||||
.platform-btn.selected { ring: 2px; ring-color: #d4a574; }
|
||||
.char-warning { color: #fbbf24; }
|
||||
.char-error { color: #ef4444; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen">
|
||||
<!-- Header -->
|
||||
<header class="bg-gray-900 border-b border-gray-800 px-6 py-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<h1 class="text-2xl font-bold">
|
||||
<span class="accent">Consultoría AS</span> - Social Media
|
||||
</h1>
|
||||
<nav class="flex gap-4">
|
||||
<a href="/dashboard" class="px-4 py-2 rounded hover:bg-gray-800">Home</a>
|
||||
<a href="/dashboard/compose" class="px-4 py-2 rounded bg-gray-800 accent">Crear Post</a>
|
||||
<a href="/dashboard/posts" class="px-4 py-2 rounded hover:bg-gray-800">Posts</a>
|
||||
<a href="/dashboard/calendar" class="px-4 py-2 rounded hover:bg-gray-800">Calendario</a>
|
||||
<a href="/logout" class="px-4 py-2 rounded hover:bg-gray-800 text-red-400">Salir</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container mx-auto px-6 py-8 max-w-4xl">
|
||||
<h2 class="text-2xl font-bold mb-6">Crear Nueva Publicación</h2>
|
||||
|
||||
<form id="compose-form" class="space-y-6">
|
||||
<!-- Platform Selection -->
|
||||
<div class="card p-6">
|
||||
<h3 class="font-semibold mb-4">Plataformas</h3>
|
||||
<div class="flex gap-4">
|
||||
<button type="button" onclick="togglePlatform('x')"
|
||||
class="platform-btn px-6 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex items-center gap-2"
|
||||
id="btn-x">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
||||
</svg>
|
||||
<span>X</span>
|
||||
</button>
|
||||
<button type="button" onclick="togglePlatform('threads')"
|
||||
class="platform-btn px-6 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex items-center gap-2"
|
||||
id="btn-threads">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.96-.065-1.17.408-2.168 1.332-2.81.88-.612 2.104-.9 3.64-.857 1.016.028 1.96.132 2.828.31-.055-.792-.283-1.392-.683-1.786-.468-.46-1.166-.682-2.135-.682h-.07c-.834.019-1.548.26-2.063.7-.472.4-.768.945-.859 1.576l-2.028-.283c.142-.981.58-1.838 1.265-2.477.891-.829 2.092-1.27 3.474-1.274h.096c1.492.013 2.706.46 3.607 1.328.857.825 1.348 2.007 1.461 3.517.636.174 1.227.398 1.768.67 1.327.666 2.358 1.634 2.982 2.8.818 1.524.876 3.916-.935 5.686-1.818 1.779-4.16 2.606-7.378 2.606zm-.39-5.086c1.075-.055 1.834-.467 2.254-1.22.396-.71.583-1.745.558-3.078-.842-.156-1.73-.242-2.66-.258-1.927-.048-3.085.484-3.181 1.461-.064.648.222 1.27.806 1.753.618.512 1.42.785 2.223.785z"/>
|
||||
</svg>
|
||||
<span>Threads</span>
|
||||
</button>
|
||||
<button type="button" onclick="togglePlatform('facebook')"
|
||||
class="platform-btn px-6 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex items-center gap-2"
|
||||
id="btn-facebook">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||
</svg>
|
||||
<span>Facebook</span>
|
||||
</button>
|
||||
<button type="button" onclick="togglePlatform('instagram')"
|
||||
class="platform-btn px-6 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 flex items-center gap-2"
|
||||
id="btn-instagram">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
|
||||
</svg>
|
||||
<span>Instagram</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-gray-500 text-sm mt-2">Selecciona una o más plataformas</p>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="card p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="font-semibold">Contenido</h3>
|
||||
<div id="char-counter" class="text-sm">
|
||||
<span id="char-count">0</span> caracteres
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
id="content"
|
||||
name="content"
|
||||
rows="6"
|
||||
class="w-full px-4 py-3 rounded-lg border resize-none"
|
||||
placeholder="Escribe tu publicación aquí..."
|
||||
oninput="updateCharCount()"
|
||||
></textarea>
|
||||
|
||||
<!-- Platform limits -->
|
||||
<div id="platform-limits" class="mt-3 space-y-1 text-sm">
|
||||
<!-- Se llena dinámicamente -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI Assist -->
|
||||
<div class="card p-6">
|
||||
<h3 class="font-semibold mb-4">Asistente IA</h3>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<button type="button" onclick="generateTip()"
|
||||
class="btn-secondary px-4 py-2 rounded-lg text-sm">
|
||||
Generar Tip Tech
|
||||
</button>
|
||||
<button type="button" onclick="improveContent()"
|
||||
class="btn-secondary px-4 py-2 rounded-lg text-sm">
|
||||
Mejorar Texto
|
||||
</button>
|
||||
<button type="button" onclick="adaptContent()"
|
||||
class="btn-secondary px-4 py-2 rounded-lg text-sm">
|
||||
Adaptar por Plataforma
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-gray-500 text-sm mt-2">
|
||||
Usa IA para generar o mejorar el contenido
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Schedule -->
|
||||
<div class="card p-6">
|
||||
<h3 class="font-semibold mb-4">Programación</h3>
|
||||
<div class="flex gap-4 items-center">
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="radio" name="schedule" value="now" checked
|
||||
class="text-amber-500" onchange="toggleSchedule()">
|
||||
<span>Publicar ahora</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="radio" name="schedule" value="later"
|
||||
class="text-amber-500" onchange="toggleSchedule()">
|
||||
<span>Programar</span>
|
||||
</label>
|
||||
</div>
|
||||
<div id="schedule-picker" class="mt-4 hidden">
|
||||
<input type="datetime-local" id="scheduled_at" name="scheduled_at"
|
||||
class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-4 justify-end">
|
||||
<button type="button" onclick="saveDraft()"
|
||||
class="btn-secondary px-6 py-3 rounded-lg">
|
||||
Guardar Borrador
|
||||
</button>
|
||||
<button type="button" onclick="previewPost()"
|
||||
class="btn-secondary px-6 py-3 rounded-lg">
|
||||
Vista Previa
|
||||
</button>
|
||||
<button type="submit" class="btn-primary px-8 py-3 rounded-lg font-semibold">
|
||||
Publicar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Preview Modal -->
|
||||
<div id="preview-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
|
||||
<div class="card p-6 max-w-2xl w-full mx-4 max-h-screen overflow-y-auto">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="font-semibold text-lg">Vista Previa</h3>
|
||||
<button onclick="closePreview()" class="text-gray-400 hover:text-white">
|
||||
<svg class="w-6 h-6" 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>
|
||||
<div id="preview-content" class="space-y-4">
|
||||
<!-- Se llena dinámicamente -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Result Modal -->
|
||||
<div id="result-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
|
||||
<div class="card p-6 max-w-md w-full mx-4">
|
||||
<div id="result-content">
|
||||
<!-- Se llena dinámicamente -->
|
||||
</div>
|
||||
<button onclick="closeResult()" class="btn-primary w-full mt-4 py-2 rounded-lg">
|
||||
Cerrar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// State
|
||||
let selectedPlatforms = [];
|
||||
const charLimits = {
|
||||
x: 280,
|
||||
threads: 500,
|
||||
instagram: 2200,
|
||||
facebook: 63206
|
||||
};
|
||||
|
||||
// Platform selection
|
||||
function togglePlatform(platform) {
|
||||
const btn = document.getElementById(`btn-${platform}`);
|
||||
const index = selectedPlatforms.indexOf(platform);
|
||||
|
||||
if (index > -1) {
|
||||
selectedPlatforms.splice(index, 1);
|
||||
btn.classList.remove('ring-2', 'ring-amber-500');
|
||||
} else {
|
||||
selectedPlatforms.push(platform);
|
||||
btn.classList.add('ring-2', 'ring-amber-500');
|
||||
}
|
||||
|
||||
updateCharCount();
|
||||
}
|
||||
|
||||
// Character counter
|
||||
function updateCharCount() {
|
||||
const content = document.getElementById('content').value;
|
||||
const count = content.length;
|
||||
const counter = document.getElementById('char-count');
|
||||
const limitsDiv = document.getElementById('platform-limits');
|
||||
|
||||
counter.textContent = count;
|
||||
|
||||
// Update limits display
|
||||
let limitsHtml = '';
|
||||
selectedPlatforms.forEach(platform => {
|
||||
const limit = charLimits[platform];
|
||||
const remaining = limit - count;
|
||||
let statusClass = '';
|
||||
let icon = '✓';
|
||||
|
||||
if (remaining < 0) {
|
||||
statusClass = 'char-error';
|
||||
icon = '✗';
|
||||
} else if (remaining < 50) {
|
||||
statusClass = 'char-warning';
|
||||
icon = '⚠';
|
||||
}
|
||||
|
||||
limitsHtml += `
|
||||
<div class="${statusClass}">
|
||||
${icon} ${platform.charAt(0).toUpperCase() + platform.slice(1)}:
|
||||
${remaining >= 0 ? remaining + ' restantes' : Math.abs(remaining) + ' excedidos'}
|
||||
(máx ${limit})
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
limitsDiv.innerHTML = limitsHtml;
|
||||
}
|
||||
|
||||
// Schedule toggle
|
||||
function toggleSchedule() {
|
||||
const scheduleValue = document.querySelector('input[name="schedule"]:checked').value;
|
||||
const picker = document.getElementById('schedule-picker');
|
||||
picker.classList.toggle('hidden', scheduleValue === 'now');
|
||||
}
|
||||
|
||||
// Preview
|
||||
function previewPost() {
|
||||
if (selectedPlatforms.length === 0) {
|
||||
alert('Selecciona al menos una plataforma');
|
||||
return;
|
||||
}
|
||||
|
||||
const content = document.getElementById('content').value;
|
||||
if (!content.trim()) {
|
||||
alert('Escribe el contenido del post');
|
||||
return;
|
||||
}
|
||||
|
||||
const previewDiv = document.getElementById('preview-content');
|
||||
let html = '';
|
||||
|
||||
selectedPlatforms.forEach(platform => {
|
||||
const limit = charLimits[platform];
|
||||
const truncated = content.length > limit;
|
||||
const displayContent = truncated ? content.substring(0, limit) + '...' : content;
|
||||
|
||||
html += `
|
||||
<div class="bg-gray-800 rounded-lg p-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="font-semibold">${platform.charAt(0).toUpperCase() + platform.slice(1)}</span>
|
||||
${truncated ? '<span class="text-red-400 text-xs">(truncado)</span>' : ''}
|
||||
</div>
|
||||
<p class="text-gray-300 whitespace-pre-wrap">${displayContent}</p>
|
||||
<div class="text-gray-500 text-xs mt-2">
|
||||
${content.length}/${limit} caracteres
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
previewDiv.innerHTML = html;
|
||||
document.getElementById('preview-modal').classList.remove('hidden');
|
||||
document.getElementById('preview-modal').classList.add('flex');
|
||||
}
|
||||
|
||||
function closePreview() {
|
||||
document.getElementById('preview-modal').classList.add('hidden');
|
||||
document.getElementById('preview-modal').classList.remove('flex');
|
||||
}
|
||||
|
||||
// Result modal
|
||||
function showResult(success, message, details = null) {
|
||||
const resultDiv = document.getElementById('result-content');
|
||||
const icon = success ? '✅' : '❌';
|
||||
|
||||
let html = `
|
||||
<div class="text-center">
|
||||
<div class="text-4xl mb-4">${icon}</div>
|
||||
<h3 class="text-xl font-semibold mb-2">${success ? 'Publicado' : 'Error'}</h3>
|
||||
<p class="text-gray-400">${message}</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (details) {
|
||||
html += `
|
||||
<div class="mt-4 space-y-2">
|
||||
${Object.entries(details).map(([platform, result]) => `
|
||||
<div class="flex justify-between items-center bg-gray-800 rounded p-2">
|
||||
<span>${platform}</span>
|
||||
<span class="${result.success ? 'text-green-400' : 'text-red-400'}">
|
||||
${result.success ? '✓ OK' : '✗ ' + (result.error || 'Error')}
|
||||
</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
resultDiv.innerHTML = html;
|
||||
document.getElementById('result-modal').classList.remove('hidden');
|
||||
document.getElementById('result-modal').classList.add('flex');
|
||||
}
|
||||
|
||||
function closeResult() {
|
||||
document.getElementById('result-modal').classList.add('hidden');
|
||||
document.getElementById('result-modal').classList.remove('flex');
|
||||
}
|
||||
|
||||
// Form submission
|
||||
document.getElementById('compose-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (selectedPlatforms.length === 0) {
|
||||
alert('Selecciona al menos una plataforma');
|
||||
return;
|
||||
}
|
||||
|
||||
const content = document.getElementById('content').value;
|
||||
if (!content.trim()) {
|
||||
alert('Escribe el contenido del post');
|
||||
return;
|
||||
}
|
||||
|
||||
// Prepare content per platform
|
||||
const platformContent = {};
|
||||
selectedPlatforms.forEach(p => {
|
||||
platformContent[p] = content;
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/publish/multiple', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
platforms: selectedPlatforms,
|
||||
content: platformContent
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showResult(true,
|
||||
`Publicado en ${data.successful_platforms.length} plataforma(s)`,
|
||||
data.results
|
||||
);
|
||||
// Clear form
|
||||
document.getElementById('content').value = '';
|
||||
selectedPlatforms.forEach(p => togglePlatform(p));
|
||||
selectedPlatforms = [];
|
||||
} else {
|
||||
showResult(false,
|
||||
'Algunas publicaciones fallaron',
|
||||
data.results
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
showResult(false, error.message);
|
||||
}
|
||||
});
|
||||
|
||||
// AI functions (placeholder - will connect to backend)
|
||||
async function generateTip() {
|
||||
alert('Función de generación con IA - Requiere configurar DEEPSEEK_API_KEY');
|
||||
}
|
||||
|
||||
async function improveContent() {
|
||||
alert('Función de mejora con IA - Requiere configurar DEEPSEEK_API_KEY');
|
||||
}
|
||||
|
||||
async function adaptContent() {
|
||||
alert('Función de adaptación con IA - Requiere configurar DEEPSEEK_API_KEY');
|
||||
}
|
||||
|
||||
function saveDraft() {
|
||||
const content = document.getElementById('content').value;
|
||||
localStorage.setItem('draft_content', content);
|
||||
localStorage.setItem('draft_platforms', JSON.stringify(selectedPlatforms));
|
||||
alert('Borrador guardado localmente');
|
||||
}
|
||||
|
||||
// Load draft on page load
|
||||
window.addEventListener('load', () => {
|
||||
const draftContent = localStorage.getItem('draft_content');
|
||||
const draftPlatforms = localStorage.getItem('draft_platforms');
|
||||
|
||||
if (draftContent) {
|
||||
document.getElementById('content').value = draftContent;
|
||||
}
|
||||
|
||||
if (draftPlatforms) {
|
||||
const platforms = JSON.parse(draftPlatforms);
|
||||
platforms.forEach(p => togglePlatform(p));
|
||||
}
|
||||
|
||||
updateCharCount();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user