795 lines
26 KiB
JavaScript
795 lines
26 KiB
JavaScript
const API_URL = 'https://fb.srv.medeba-media.de/api';
|
||
|
||
const PROVIDER_MODELS = {
|
||
gemini: [
|
||
{ value: '', label: 'Standard (gemini-2.0-flash-exp)' },
|
||
{ value: 'gemini-2.0-flash-exp', label: 'Gemini 2.0 Flash' },
|
||
{ value: 'gemini-1.5-flash', label: 'Gemini 1.5 Flash' },
|
||
{ value: 'gemini-1.5-pro', label: 'Gemini 1.5 Pro' }
|
||
],
|
||
claude: [
|
||
{ value: '', label: 'Standard (claude-3-5-haiku)' },
|
||
{ value: 'claude-3-5-haiku-20241022', label: 'Claude 3.5 Haiku (schnell)' },
|
||
{ value: 'claude-3-5-sonnet-20241022', label: 'Claude 3.5 Sonnet (beste Qualität)' },
|
||
{ value: 'claude-3-opus-20240229', label: 'Claude 3 Opus' }
|
||
],
|
||
openai: [
|
||
{ value: '', label: 'Standard (gpt-3.5-turbo)' },
|
||
{ value: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo (günstig)' },
|
||
{ value: 'gpt-4o-mini', label: 'GPT-4o Mini' },
|
||
{ value: 'gpt-4o', label: 'GPT-4o' },
|
||
{ value: 'gpt-4-turbo', label: 'GPT-4 Turbo' }
|
||
]
|
||
};
|
||
|
||
const PROVIDER_INFO = {
|
||
gemini: {
|
||
name: 'Google Gemini',
|
||
apiKeyLink: 'https://aistudio.google.com/app/apikey',
|
||
apiKeyHelp: 'API-Schlüssel erforderlich. Erstelle ihn im Google AI Studio.'
|
||
},
|
||
claude: {
|
||
name: 'Anthropic Claude',
|
||
apiKeyLink: 'https://console.anthropic.com/settings/keys',
|
||
apiKeyHelp: 'API-Schlüssel erforderlich. Erstelle ihn in der Anthropic Console.'
|
||
},
|
||
openai: {
|
||
name: 'OpenAI',
|
||
apiKeyLink: 'https://platform.openai.com/api-keys',
|
||
apiKeyHelp: 'Für lokale OpenAI-kompatible Server (z.B. Ollama) kannst du den Schlüssel leer lassen.'
|
||
}
|
||
};
|
||
|
||
let credentials = [];
|
||
let currentSettings = null;
|
||
|
||
function apiFetch(url, options = {}) {
|
||
return fetch(url, {...options, credentials: 'include'});
|
||
}
|
||
|
||
function showToast(message, type = 'info') {
|
||
const toast = document.createElement('div');
|
||
toast.style.cssText = `
|
||
position: fixed;
|
||
bottom: 24px;
|
||
right: 24px;
|
||
background: ${type === 'error' ? '#e74c3c' : type === 'success' ? '#42b72a' : '#1877f2'};
|
||
color: white;
|
||
padding: 12px 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
font-size: 14px;
|
||
z-index: 999999;
|
||
max-width: 350px;
|
||
animation: slideIn 0.3s ease-out;
|
||
`;
|
||
toast.textContent = message;
|
||
|
||
if (!document.getElementById('settings-toast-styles')) {
|
||
const style = document.createElement('style');
|
||
style.id = 'settings-toast-styles';
|
||
style.textContent = `
|
||
@keyframes slideIn {
|
||
from {
|
||
transform: translateX(400px);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
@keyframes slideOut {
|
||
from {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
to {
|
||
transform: translateX(400px);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
}
|
||
|
||
document.body.appendChild(toast);
|
||
|
||
setTimeout(() => {
|
||
toast.style.animation = 'slideOut 0.3s ease-out';
|
||
setTimeout(() => toast.remove(), 300);
|
||
}, 3000);
|
||
}
|
||
|
||
function showError(msg) { showToast(msg, 'error'); }
|
||
function showSuccess(msg) { showToast(msg, 'success'); }
|
||
|
||
async function loadCredentials() {
|
||
const res = await apiFetch(`${API_URL}/ai-credentials`);
|
||
if (!res.ok) throw new Error('Failed to load credentials');
|
||
credentials = await res.json();
|
||
renderCredentials();
|
||
updateActiveCredentialSelect();
|
||
}
|
||
|
||
async function loadSettings() {
|
||
const res = await apiFetch(`${API_URL}/ai-settings`);
|
||
if (!res.ok) throw new Error('Failed to load settings');
|
||
currentSettings = await res.json();
|
||
document.getElementById('aiEnabled').checked = currentSettings.enabled === 1;
|
||
document.getElementById('activeCredential').value = currentSettings.active_credential_id || '';
|
||
document.getElementById('aiPromptPrefix').value = currentSettings.prompt_prefix ||
|
||
'Schreibe einen freundlichen, authentischen Kommentar auf Deutsch zu folgendem Facebook-Post. Der Kommentar soll natürlich wirken und maximal 2-3 Sätze lang sein:\n\n';
|
||
}
|
||
|
||
function shorten(text, maxLength = 80) {
|
||
if (typeof text !== 'string') {
|
||
return '';
|
||
}
|
||
if (text.length <= maxLength) {
|
||
return text;
|
||
}
|
||
return `${text.slice(0, maxLength - 3)}...`;
|
||
}
|
||
|
||
function escapeHtmlAttr(text) {
|
||
return escapeHtml(text || '').replace(/"/g, '"');
|
||
}
|
||
|
||
function formatTimeLabel(iso) {
|
||
if (!iso) return '';
|
||
const date = new Date(iso);
|
||
if (Number.isNaN(date.getTime())) return '';
|
||
return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
|
||
}
|
||
|
||
function formatRelativePast(iso) {
|
||
if (!iso) return '';
|
||
const date = new Date(iso);
|
||
if (Number.isNaN(date.getTime())) return '';
|
||
const diffMs = Date.now() - date.getTime();
|
||
if (diffMs < 0) return 'gerade eben';
|
||
const diffMinutes = Math.round(diffMs / 60000);
|
||
if (diffMinutes <= 1) return 'gerade eben';
|
||
if (diffMinutes < 60) return `vor ${diffMinutes} Min`;
|
||
const diffHours = Math.round(diffMinutes / 60);
|
||
if (diffHours < 24) return `vor ${diffHours} Std`;
|
||
const diffDays = Math.round(diffHours / 24);
|
||
if (diffDays === 1) return 'gestern';
|
||
if (diffDays < 7) return `vor ${diffDays} Tagen`;
|
||
return date.toLocaleDateString('de-DE');
|
||
}
|
||
|
||
function formatRelativeFuture(iso) {
|
||
if (!iso) return '';
|
||
const date = new Date(iso);
|
||
if (Number.isNaN(date.getTime())) return '';
|
||
const diffMs = date.getTime() - Date.now();
|
||
if (diffMs <= 0) return 'gleich';
|
||
const diffMinutes = Math.round(diffMs / 60000);
|
||
if (diffMinutes < 1) return 'gleich';
|
||
if (diffMinutes < 60) return `in ${diffMinutes} Min`;
|
||
const diffHours = Math.round(diffMinutes / 60);
|
||
if (diffHours < 24) return `in ${diffHours} Std`;
|
||
return date.toLocaleString('de-DE', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' });
|
||
}
|
||
|
||
function buildCredentialBadges(credential) {
|
||
const badges = [];
|
||
if (!credential.is_active) {
|
||
badges.push({
|
||
label: 'Deaktiviert',
|
||
className: 'status-badge--muted',
|
||
title: 'Dieser Login ist derzeit deaktiviert'
|
||
});
|
||
} else if (credential.auto_disabled) {
|
||
const untilText = credential.auto_disabled_until ? formatRelativeFuture(credential.auto_disabled_until) : 'läuft';
|
||
const untilTime = credential.auto_disabled_until ? formatTimeLabel(credential.auto_disabled_until) : '';
|
||
const reason = credential.auto_disabled_reason ? credential.auto_disabled_reason.replace(/^AUTO:/, '').trim() : 'Automatisch deaktiviert';
|
||
badges.push({
|
||
label: `Cooldown ${untilText}${untilTime ? ` (${untilTime})` : ''}`.trim(),
|
||
className: 'status-badge--warning',
|
||
title: reason || 'Automatisch deaktiviert'
|
||
});
|
||
} else {
|
||
badges.push({
|
||
label: 'Aktiv',
|
||
className: 'status-badge--success',
|
||
title: 'Login ist aktiv'
|
||
});
|
||
}
|
||
|
||
if (credential.last_error_message) {
|
||
badges.push({
|
||
label: `Fehler ${formatRelativePast(credential.last_error_at)}`.trim(),
|
||
className: 'status-badge--danger',
|
||
title: credential.last_error_message
|
||
});
|
||
}
|
||
|
||
if (credential.usage_24h_count) {
|
||
const resetHint = credential.usage_24h_reset_at ? `Reset ${formatRelativeFuture(credential.usage_24h_reset_at)}` : '24h Nutzung';
|
||
badges.push({
|
||
label: `24h: ${credential.usage_24h_count}`,
|
||
className: 'status-badge--info',
|
||
title: resetHint
|
||
});
|
||
}
|
||
|
||
if (credential.last_rate_limit_remaining) {
|
||
badges.push({
|
||
label: `Limit: ${credential.last_rate_limit_remaining}`,
|
||
className: 'status-badge--neutral',
|
||
title: 'Letzter „rate limit remaining“-Wert'
|
||
});
|
||
}
|
||
|
||
return badges;
|
||
}
|
||
|
||
function buildCredentialMetaLines(credential) {
|
||
const lines = [];
|
||
if (credential.last_success_at) {
|
||
lines.push(`Zuletzt erfolgreich: ${formatRelativePast(credential.last_success_at)}`);
|
||
}
|
||
if (!credential.last_success_at && credential.last_used_at) {
|
||
lines.push(`Zuletzt genutzt: ${formatRelativePast(credential.last_used_at)}`);
|
||
}
|
||
if (credential.rate_limit_reset_at && !credential.auto_disabled) {
|
||
lines.push(`Limit-Reset ${formatRelativeFuture(credential.rate_limit_reset_at)}`);
|
||
}
|
||
if (credential.latest_event && credential.latest_event.type) {
|
||
const typeLabel = credential.latest_event.type.replace(/_/g, ' ');
|
||
const eventTime = credential.latest_event.created_at ? formatRelativePast(credential.latest_event.created_at) : '';
|
||
const message = credential.latest_event.message ? shorten(credential.latest_event.message, 90) : '';
|
||
const parts = [`Letztes Event (${typeLabel})`];
|
||
if (eventTime) parts.push(eventTime);
|
||
if (message) parts.push(`– ${message}`);
|
||
lines.push(parts.join(' '));
|
||
}
|
||
return lines;
|
||
}
|
||
|
||
function renderCredentials() {
|
||
const list = document.getElementById('credentialsList');
|
||
if (!credentials.length) {
|
||
list.innerHTML = '<p class="empty-state">Noch keine Anmeldedaten gespeichert</p>';
|
||
return;
|
||
}
|
||
list.innerHTML = credentials.map((c, index) => {
|
||
const providerName = escapeHtml(PROVIDER_INFO[c.provider]?.name || c.provider);
|
||
const modelLabel = c.model ? ` · ${escapeHtml(c.model)}` : '';
|
||
const endpointLabel = c.base_url ? ` · ${escapeHtml(c.base_url)}` : '';
|
||
const badges = buildCredentialBadges(c);
|
||
const badgesHtml = badges.length
|
||
? `<div class="credential-item__status">${badges.map(badge => `<span class="credential-status ${badge.className}"${badge.title ? ` title="${escapeHtmlAttr(badge.title)}"` : ''}>${escapeHtml(badge.label)}</span>`).join('')}</div>`
|
||
: '';
|
||
const metaLines = buildCredentialMetaLines(c);
|
||
const metaHtml = metaLines.length
|
||
? `<div class="credential-item__meta">${metaLines.map(line => `<div>${escapeHtml(line)}</div>`).join('')}</div>`
|
||
: '';
|
||
|
||
return `
|
||
<div class="credential-item" draggable="true" data-credential-id="${c.id}" data-index="${index}">
|
||
<div class="credential-item__drag-handle" title="Ziehen zum Sortieren">⋮⋮</div>
|
||
<div class="credential-item__info">
|
||
<label class="form-label" style="display: flex; align-items: center; gap: 8px; margin: 0;">
|
||
<input type="checkbox" class="form-checkbox"
|
||
${c.is_active ? 'checked' : ''}
|
||
onchange="toggleCredentialActive(${c.id}, this.checked)">
|
||
<div>
|
||
<div class="credential-item__name">${escapeHtml(c.name)}</div>
|
||
<div class="credential-item__provider">${providerName}${modelLabel}${endpointLabel}</div>
|
||
${badgesHtml}
|
||
${metaHtml}
|
||
</div>
|
||
</label>
|
||
</div>
|
||
<div class="credential-item__actions">
|
||
<button onclick="editCredential(${c.id})" class="btn-icon" title="Bearbeiten">✏️</button>
|
||
<button onclick="deleteCredential(${c.id})" class="btn-icon" title="Löschen">🗑️</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
|
||
// Add drag and drop event listeners
|
||
setupDragAndDrop();
|
||
}
|
||
|
||
function updateActiveCredentialSelect() {
|
||
const select = document.getElementById('activeCredential');
|
||
select.innerHTML = '<option value="">-- Bitte wählen --</option>' +
|
||
credentials.map(c => `<option value="${c.id}">${escapeHtml(c.name)} (${PROVIDER_INFO[c.provider]?.name})</option>`).join('');
|
||
if (currentSettings?.active_credential_id) {
|
||
select.value = currentSettings.active_credential_id;
|
||
}
|
||
}
|
||
|
||
function updateModelOptions(provider) {
|
||
const modelInput = document.getElementById('credentialModel');
|
||
const modelList = document.getElementById('credentialModelOptions');
|
||
const apiKeyInput = document.getElementById('credentialApiKey');
|
||
const baseUrlGroup = document.getElementById('credentialBaseUrlGroup');
|
||
const baseUrlHelp = document.getElementById('credentialBaseUrlHelp');
|
||
const baseUrlInput = document.getElementById('credentialBaseUrl');
|
||
const info = PROVIDER_INFO[provider];
|
||
|
||
const models = PROVIDER_MODELS[provider] || [];
|
||
if (modelList) {
|
||
modelList.innerHTML = models.map(m => `<option value="${m.value}">${m.label}</option>`).join('');
|
||
}
|
||
|
||
if (modelInput) {
|
||
const firstSuggestion = models.find(m => m.value)?.value;
|
||
modelInput.placeholder = firstSuggestion
|
||
? `z.B. ${firstSuggestion}`
|
||
: 'Modell-ID (z.B. llama3.1)';
|
||
}
|
||
|
||
const help = document.getElementById('credentialApiKeyHelp');
|
||
if (help) {
|
||
if (info) {
|
||
const parts = [];
|
||
if (info.apiKeyHelp) {
|
||
parts.push(info.apiKeyHelp);
|
||
}
|
||
if (info.apiKeyLink) {
|
||
parts.push(`<a href="${info.apiKeyLink}" target="_blank">API-Schlüssel erstellen</a>`);
|
||
}
|
||
help.innerHTML = parts.join(' ');
|
||
} else {
|
||
help.textContent = '';
|
||
}
|
||
}
|
||
|
||
if (apiKeyInput) {
|
||
if (provider === 'openai') {
|
||
apiKeyInput.placeholder = 'sk-... oder leer für lokale Server';
|
||
} else {
|
||
apiKeyInput.placeholder = 'API-Schlüssel';
|
||
}
|
||
}
|
||
|
||
if (baseUrlGroup && baseUrlHelp) {
|
||
if (provider === 'openai') {
|
||
baseUrlGroup.style.display = 'block';
|
||
baseUrlHelp.textContent = 'Leer lassen für die offizielle OpenAI-API. Für lokale OpenAI/Ollama-Server gib die Basis-URL an, z.B. http://localhost:11434/v1';
|
||
if (baseUrlInput) {
|
||
baseUrlInput.placeholder = 'https://api.openai.com/v1 oder http://localhost:11434/v1';
|
||
}
|
||
} else {
|
||
baseUrlGroup.style.display = 'none';
|
||
baseUrlHelp.textContent = '';
|
||
if (baseUrlInput) {
|
||
baseUrlInput.placeholder = '';
|
||
}
|
||
}
|
||
}
|
||
|
||
const modelHelp = document.getElementById('credentialModelHelp');
|
||
if (modelHelp) {
|
||
modelHelp.textContent = 'Trage die Modell-ID ein. Du kannst einen Vorschlag auswählen oder einen eigenen Wert eingeben.';
|
||
}
|
||
}
|
||
|
||
function openCredentialModal(credential = null) {
|
||
const modal = document.getElementById('credentialModal');
|
||
const form = document.getElementById('credentialForm');
|
||
const apiKeyInput = document.getElementById('credentialApiKey');
|
||
const baseUrlInput = document.getElementById('credentialBaseUrl');
|
||
|
||
if (credential) {
|
||
document.getElementById('credentialModalTitle').textContent = 'Anmeldedaten bearbeiten';
|
||
document.getElementById('credentialId').value = credential.id;
|
||
document.getElementById('credentialName').value = credential.name;
|
||
document.getElementById('credentialProvider').value = credential.provider;
|
||
updateModelOptions(credential.provider);
|
||
document.getElementById('credentialModel').value = credential.model || '';
|
||
if (baseUrlInput) {
|
||
baseUrlInput.value = credential.base_url || '';
|
||
}
|
||
if (apiKeyInput) {
|
||
apiKeyInput.value = '';
|
||
apiKeyInput.placeholder = credential.provider === 'openai'
|
||
? 'Leer lassen, um den bestehenden Schlüssel zu behalten'
|
||
: 'Leer lassen, um den bestehenden Schlüssel zu behalten';
|
||
}
|
||
} else {
|
||
document.getElementById('credentialModalTitle').textContent = 'Anmeldedaten hinzufügen';
|
||
form.reset();
|
||
updateModelOptions('gemini');
|
||
document.getElementById('credentialId').value = '';
|
||
if (apiKeyInput) {
|
||
apiKeyInput.value = '';
|
||
apiKeyInput.placeholder = 'API-Schlüssel';
|
||
}
|
||
if (baseUrlInput) {
|
||
baseUrlInput.value = '';
|
||
}
|
||
}
|
||
|
||
modal.removeAttribute('hidden');
|
||
}
|
||
|
||
function closeCredentialModal() {
|
||
document.getElementById('credentialModal').setAttribute('hidden', '');
|
||
}
|
||
|
||
async function saveCredential(e) {
|
||
e.preventDefault();
|
||
|
||
try {
|
||
const id = document.getElementById('credentialId').value;
|
||
const name = document.getElementById('credentialName').value.trim();
|
||
const provider = document.getElementById('credentialProvider').value;
|
||
const apiKey = document.getElementById('credentialApiKey').value.trim();
|
||
const model = document.getElementById('credentialModel').value.trim();
|
||
const baseUrlRaw = document.getElementById('credentialBaseUrl')?.value.trim() || '';
|
||
|
||
if (!name) {
|
||
throw new Error('Bitte einen Namen angeben');
|
||
}
|
||
|
||
const data = {
|
||
name,
|
||
provider,
|
||
model: model || null,
|
||
base_url: provider === 'openai' ? baseUrlRaw : ''
|
||
};
|
||
|
||
if (!id) {
|
||
if (!apiKey && !(provider === 'openai' && baseUrlRaw)) {
|
||
throw new Error('API-Schlüssel ist erforderlich (oder Basis-URL für lokale OpenAI-kompatible Server angeben)');
|
||
}
|
||
data.api_key = apiKey;
|
||
} else if (apiKey) {
|
||
data.api_key = apiKey;
|
||
}
|
||
|
||
const url = id ? `${API_URL}/ai-credentials/${id}` : `${API_URL}/ai-credentials`;
|
||
const method = id ? 'PUT' : 'POST';
|
||
|
||
const res = await apiFetch(url, {
|
||
method,
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify(data)
|
||
});
|
||
|
||
if (!res.ok) {
|
||
const err = await res.json();
|
||
throw new Error(err.error || 'Fehler beim Speichern der Anmeldedaten');
|
||
}
|
||
|
||
await loadCredentials();
|
||
closeCredentialModal();
|
||
showSuccess('✅ Anmeldedaten erfolgreich gespeichert');
|
||
} catch (err) {
|
||
showError('❌ ' + err.message);
|
||
}
|
||
}
|
||
|
||
async function editCredential(id) {
|
||
const cred = credentials.find(c => c.id === id);
|
||
if (!cred) {
|
||
showError('Anmeldedaten nicht gefunden');
|
||
return;
|
||
}
|
||
|
||
openCredentialModal(cred);
|
||
}
|
||
|
||
async function toggleCredentialActive(id, isActive) {
|
||
try {
|
||
const res = await apiFetch(`${API_URL}/ai-credentials/${id}`, {
|
||
method: 'PATCH',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify({ is_active: isActive ? 1 : 0 })
|
||
});
|
||
|
||
if (!res.ok) {
|
||
const err = await res.json();
|
||
throw new Error(err.error || 'Fehler beim Aktualisieren');
|
||
}
|
||
|
||
await loadCredentials();
|
||
showSuccess(`✅ Login ${isActive ? 'aktiviert' : 'deaktiviert'}`);
|
||
} catch (err) {
|
||
showError('❌ ' + err.message);
|
||
await loadCredentials(); // Reload to reset checkbox
|
||
}
|
||
}
|
||
|
||
async function deleteCredential(id) {
|
||
if (!confirm('Wirklich löschen?')) return;
|
||
|
||
const res = await apiFetch(`${API_URL}/ai-credentials/${id}`, {method: 'DELETE'});
|
||
if (!res.ok) {
|
||
const err = await res.json();
|
||
throw new Error(err.error || 'Failed to delete');
|
||
}
|
||
|
||
await loadCredentials();
|
||
showSuccess('Anmeldedaten gelöscht');
|
||
}
|
||
|
||
// Make function globally accessible
|
||
window.toggleCredentialActive = toggleCredentialActive;
|
||
|
||
// ============================================================================
|
||
// DRAG AND DROP
|
||
// ============================================================================
|
||
|
||
let draggedElement = null;
|
||
|
||
function setupDragAndDrop() {
|
||
const items = document.querySelectorAll('.credential-item');
|
||
|
||
items.forEach(item => {
|
||
item.addEventListener('dragstart', handleDragStart);
|
||
item.addEventListener('dragover', handleDragOver);
|
||
item.addEventListener('drop', handleDrop);
|
||
item.addEventListener('dragend', handleDragEnd);
|
||
item.addEventListener('dragenter', handleDragEnter);
|
||
item.addEventListener('dragleave', handleDragLeave);
|
||
});
|
||
}
|
||
|
||
function handleDragStart(e) {
|
||
draggedElement = this;
|
||
this.style.opacity = '0.4';
|
||
e.dataTransfer.effectAllowed = 'move';
|
||
e.dataTransfer.setData('text/html', this.innerHTML);
|
||
}
|
||
|
||
function handleDragOver(e) {
|
||
if (e.preventDefault) {
|
||
e.preventDefault();
|
||
}
|
||
e.dataTransfer.dropEffect = 'move';
|
||
return false;
|
||
}
|
||
|
||
function handleDragEnter(e) {
|
||
if (this !== draggedElement) {
|
||
this.classList.add('drag-over');
|
||
}
|
||
}
|
||
|
||
function handleDragLeave(e) {
|
||
this.classList.remove('drag-over');
|
||
}
|
||
|
||
function handleDrop(e) {
|
||
if (e.stopPropagation) {
|
||
e.stopPropagation();
|
||
}
|
||
|
||
if (draggedElement !== this) {
|
||
// Get the container
|
||
const container = this.parentNode;
|
||
const allItems = [...container.querySelectorAll('.credential-item')];
|
||
|
||
// Get indices
|
||
const draggedIndex = allItems.indexOf(draggedElement);
|
||
const targetIndex = allItems.indexOf(this);
|
||
|
||
// Reorder in DOM
|
||
if (draggedIndex < targetIndex) {
|
||
this.parentNode.insertBefore(draggedElement, this.nextSibling);
|
||
} else {
|
||
this.parentNode.insertBefore(draggedElement, this);
|
||
}
|
||
|
||
// Update backend
|
||
saveCredentialOrder();
|
||
}
|
||
|
||
this.classList.remove('drag-over');
|
||
return false;
|
||
}
|
||
|
||
function handleDragEnd(e) {
|
||
this.style.opacity = '1';
|
||
|
||
// Remove all drag-over classes
|
||
document.querySelectorAll('.credential-item').forEach(item => {
|
||
item.classList.remove('drag-over');
|
||
});
|
||
}
|
||
|
||
async function saveCredentialOrder() {
|
||
try {
|
||
const items = document.querySelectorAll('.credential-item');
|
||
const order = Array.from(items).map(item => parseInt(item.dataset.credentialId));
|
||
|
||
const res = await apiFetch(`${API_URL}/ai-credentials/reorder`, {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify({ order })
|
||
});
|
||
|
||
if (!res.ok) {
|
||
const err = await res.json();
|
||
throw new Error(err.error || 'Fehler beim Speichern der Reihenfolge');
|
||
}
|
||
|
||
credentials = await res.json();
|
||
showSuccess('✅ Reihenfolge gespeichert');
|
||
} catch (err) {
|
||
showError('❌ ' + err.message);
|
||
await loadCredentials(); // Reload to restore original order
|
||
}
|
||
}
|
||
|
||
async function saveSettings(e) {
|
||
e.preventDefault();
|
||
|
||
try {
|
||
const data = {
|
||
enabled: document.getElementById('aiEnabled').checked,
|
||
active_credential_id: parseInt(document.getElementById('activeCredential').value) || null,
|
||
prompt_prefix: document.getElementById('aiPromptPrefix').value
|
||
};
|
||
|
||
const res = await apiFetch(`${API_URL}/ai-settings`, {
|
||
method: 'PUT',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify(data)
|
||
});
|
||
|
||
if (!res.ok) {
|
||
const err = await res.json();
|
||
throw new Error(err.error || 'Fehler beim Speichern der Einstellungen');
|
||
}
|
||
|
||
currentSettings = await res.json();
|
||
showSuccess('✅ Einstellungen erfolgreich gespeichert');
|
||
} catch (err) {
|
||
showError('❌ ' + err.message);
|
||
}
|
||
}
|
||
|
||
async function testComment() {
|
||
const modal = document.getElementById('testModal');
|
||
modal.removeAttribute('hidden');
|
||
document.getElementById('testResult').style.display = 'none';
|
||
document.getElementById('testError').style.display = 'none';
|
||
|
||
// Load last test data from localStorage
|
||
const lastTest = localStorage.getItem('lastTestComment');
|
||
if (lastTest) {
|
||
try {
|
||
const data = JSON.parse(lastTest);
|
||
document.getElementById('testPostText').value = data.postText || '';
|
||
document.getElementById('testProfileNumber').value = data.profileNumber || '1';
|
||
} catch (e) {
|
||
console.error('Failed to load last test comment:', e);
|
||
}
|
||
}
|
||
}
|
||
|
||
async function generateTest() {
|
||
const text = document.getElementById('testPostText').value;
|
||
const profileNumber = parseInt(document.getElementById('testProfileNumber').value);
|
||
|
||
if (!text) return;
|
||
|
||
document.getElementById('testLoading').style.display = 'block';
|
||
document.getElementById('testResult').style.display = 'none';
|
||
document.getElementById('testError').style.display = 'none';
|
||
|
||
try {
|
||
const res = await apiFetch(`${API_URL}/ai/generate-comment`, {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify({postText: text, profileNumber})
|
||
});
|
||
|
||
if (!res.ok) {
|
||
const err = await res.json();
|
||
throw new Error(err.error || 'Failed');
|
||
}
|
||
|
||
const data = await res.json();
|
||
document.getElementById('testComment').textContent = data.comment;
|
||
document.getElementById('testResult').style.display = 'block';
|
||
|
||
// Save test data to localStorage
|
||
localStorage.setItem('lastTestComment', JSON.stringify({
|
||
postText: text,
|
||
profileNumber: profileNumber,
|
||
comment: data.comment,
|
||
timestamp: new Date().toISOString()
|
||
}));
|
||
} catch (err) {
|
||
document.getElementById('testError').textContent = err.message;
|
||
document.getElementById('testError').style.display = 'block';
|
||
} finally {
|
||
document.getElementById('testLoading').style.display = 'none';
|
||
}
|
||
}
|
||
|
||
function escapeHtml(text) {
|
||
const div = document.createElement('div');
|
||
div.textContent = text;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
// ============================================================================
|
||
// PROFILE FRIENDS
|
||
// ============================================================================
|
||
|
||
let profileFriends = {};
|
||
|
||
async function loadProfileFriends() {
|
||
const list = document.getElementById('profileFriendsList');
|
||
list.innerHTML = '';
|
||
|
||
for (let i = 1; i <= 5; i++) {
|
||
const res = await apiFetch(`${API_URL}/profile-friends/${i}`);
|
||
const data = await res.json();
|
||
profileFriends[i] = data.friend_names || '';
|
||
|
||
const div = document.createElement('div');
|
||
div.className = 'form-group';
|
||
div.innerHTML = `
|
||
<label for="friends${i}" class="form-label">Profil ${i}</label>
|
||
<input type="text" id="friends${i}" class="form-input"
|
||
placeholder="z.B. Anna, Max, Lisa"
|
||
value="${escapeHtml(profileFriends[i])}">
|
||
<p class="form-help">Kommagetrennte Liste von Freundesnamen für Profil ${i}</p>
|
||
`;
|
||
list.appendChild(div);
|
||
|
||
document.getElementById(`friends${i}`).addEventListener('blur', async (e) => {
|
||
const newValue = e.target.value.trim();
|
||
if (newValue !== profileFriends[i]) {
|
||
await saveFriends(i, newValue);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
async function saveFriends(profileNumber, friendNames) {
|
||
try {
|
||
const res = await apiFetch(`${API_URL}/profile-friends/${profileNumber}`, {
|
||
method: 'PUT',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify({ friend_names: friendNames })
|
||
});
|
||
|
||
if (!res.ok) {
|
||
const err = await res.json();
|
||
throw new Error(err.error || 'Fehler beim Speichern');
|
||
}
|
||
|
||
profileFriends[profileNumber] = friendNames;
|
||
showSuccess(`✅ Freunde für Profil ${profileNumber} gespeichert`);
|
||
} catch (err) {
|
||
showError('❌ ' + err.message);
|
||
}
|
||
}
|
||
|
||
// Event listeners
|
||
document.getElementById('addCredentialBtn').addEventListener('click', () => openCredentialModal());
|
||
document.getElementById('credentialModalClose').addEventListener('click', closeCredentialModal);
|
||
document.getElementById('credentialCancelBtn').addEventListener('click', closeCredentialModal);
|
||
document.getElementById('credentialForm').addEventListener('submit', saveCredential);
|
||
document.getElementById('credentialProvider').addEventListener('change', e => updateModelOptions(e.target.value));
|
||
document.getElementById('aiSettingsForm').addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
saveSettings(e);
|
||
});
|
||
document.getElementById('saveAllBtn').addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
saveSettings(e);
|
||
});
|
||
document.getElementById('testBtn').addEventListener('click', testComment);
|
||
document.getElementById('testModalClose').addEventListener('click', () => document.getElementById('testModal').setAttribute('hidden', ''));
|
||
document.getElementById('generateTestComment').addEventListener('click', generateTest);
|
||
|
||
// Initialize
|
||
Promise.all([loadCredentials(), loadSettings(), loadProfileFriends()]).catch(err => showError(err.message));
|