Noch keine Agenten angelegt.

'; return; } el.innerHTML = agents.map(function (a) { return '

' + '

' + esc(a.name) + '

' + '

' + esc(a.url) + '

' + '

' + '' + '' + '

' + '

'; }).join(''); } function editAgent(id) { var a = loadAgents().find(function (x) { return x.id === id; }); if (!a) return; document.getElementById('agentName').value = a.name; document.getElementById('agentUrl').value = a.url; document.getElementById('agentEditId').value = a.id; document.getElementById('agentFormTitle').textContent = 'Agent bearbeiten'; } function deleteAgent(id) { if (!confirm('Agent l\u00f6schen?')) return; saveAgentsList(loadAgents().filter(function (a) { return a.id !== id; })); if (localStorage.getItem(SELECTED_KEY) === id) localStorage.removeItem(SELECTED_KEY); renderAgentList(); renderAgentSelect(); } function saveAgent() { var name = document.getElementById('agentName').value.trim(); var url = document.getElementById('agentUrl').value.trim(); var editId = document.getElementById('agentEditId').value; if (!name) { toast('Fehler', 'Bitte einen Namen eingeben.', 'error'); return; } if (!url) { toast('Fehler', 'Bitte eine Webhook URL eingeben.', 'error'); return; } var agents = loadAgents(); if (editId) { agents = agents.map(function (a) { return a.id === editId ? { id: a.id, name: name, url: url } : a; }); } else { agents.push({ id: Date.now().toString(), name: name, url: url }); } saveAgentsList(agents); document.getElementById('agentName').value = ''; document.getElementById('agentUrl').value = ''; document.getElementById('agentEditId').value = ''; document.getElementById('agentFormTitle').textContent = 'Neuer Agent'; renderAgentList(); renderAgentSelect(); toast('Gespeichert', '"' + name + '" wurde gespeichert.', 'success'); } document.getElementById('agentModal').addEventListener('click', function (e) { if (e.target === document.getElementById('agentModal')) closeAgentModal(); }); // ── CSV Upload ──────────────────────────────────────────────── var csvInput = document.getElementById('csvInput'); var uploadArea = document.getElementById('uploadArea'); csvInput.addEventListener('change', function (e) { if (e.target.files[0]) parseCSV(e.target.files[0]); }); uploadArea.addEventListener('dragover', function (e) { e.preventDefault(); uploadArea.classList.add('drag-over'); }); uploadArea.addEventListener('dragleave', function () { uploadArea.classList.remove('drag-over'); }); uploadArea.addEventListener('drop', function (e) { e.preventDefault(); uploadArea.classList.remove('drag-over'); var file = e.dataTransfer.files[0]; if (file && file.name.endsWith('.csv')) parseCSV(file); else toast('Fehler', 'Bitte eine .csv-Datei hochladen.', 'error'); }); function parseCSV(file) { var reader = new FileReader(); reader.onload = function (e) { var lines = e.target.result.replace(/\r/g, '').split('\n').filter(function (l) { return l.trim(); }); if (!lines.length) { toast('Fehler', 'CSV ist leer.', 'error'); return; } var headers = lines[0].split(',').map(function (h) { return h.trim().toLowerCase().replace(/[^a-z0-9_]/g, '_'); }); var normalize = function (h) { if (['name', 'kundenname', 'kunde', 'customer_name', 'vorname_nachname'].indexOf(h) >= 0) return 'name'; if (['phone', 'phone_number', 'telefon', 'tel', 'mobile', 'handy', 'rufnummer'].indexOf(h) >= 0) return 'phone_number'; if (['reason', 'grund', 'anrufgrund', 'betreff', 'subject'].indexOf(h) >= 0) return 'reason'; if (['preferred_date', 'datum', 'date', 'wunschdatum', 'termin'].indexOf(h) >= 0) return 'preferred_date'; if (['notes', 'notiz', 'notizen', 'bemerkung', 'anmerkung', 'comment'].indexOf(h) >= 0) return 'notes'; return h; }; var mappedHeaders = headers.map(normalize); var newCustomers = []; for (var i = 1; i < lines.length; i++) { var values = splitCSVLine(lines[i]); if (!values.length || (values.length === 1 && !values[0])) continue; var obj = { _status: 'idle', _callId: null, _idx: customers.length + newCustomers.length }; mappedHeaders.forEach(function (h, j) { obj[h] = (values[j] || '').trim(); }); if (!obj.name && !obj.phone_number) continue; newCustomers.push(obj); } if (!newCustomers.length) { toast('Fehler', 'Keine g\u00fcltigen Zeilen gefunden.', 'error'); return; } csvColumns = mappedHeaders.filter(function (h) { return h.indexOf('_') !== 0; }); customers = customers.concat(newCustomers); filtered = customers.slice(); currentPage = 1; renderTableHeader(); renderTable(); updateStats(); document.getElementById('callAllBtn').disabled = false; toast('Erfolg', newCustomers.length + ' Kunden geladen.', 'success'); }; reader.readAsText(file, 'UTF-8'); } function splitCSVLine(line) { var result = []; var cur = ''; var inQ = false; for (var i = 0; i < line.length; i++) { var c = line[i]; if (c === '"') { inQ = !inQ; } else if (c === ',' && !inQ) { result.push(cur); cur = ''; } else { cur += c; } } result.push(cur); return result; } function renderTableHeader() { var tr = document.getElementById('tableHeadRow'); if (!tr) return; var html = ''; csvColumns.forEach(function (h) { html += '' + (colLabels[h] || h) + ''; }); html += 'StatusAktion'; tr.innerHTML = html; } function renderTable() { var tbody = document.getElementById('tableBody'); var total = filtered.length; var pages = Math.ceil(total / pageSize); if (currentPage > pages && pages > 0) currentPage = pages; document.getElementById('tableCount').textContent = total + ' ' + (total === 1 ? 'Eintrag' : 'Eintr\u00e4ge'); if (!total) { tbody.innerHTML = '

' + '

🔍

' + '

Keine Ergebnisse

' + '

Versuchen Sie einen anderen Suchbegriff

' + '

'; document.getElementById('pagination').style.display = 'none'; return; } var start = (currentPage - 1) * pageSize; var slice = filtered.slice(start, start + pageSize); tbody.innerHTML = slice.map(function (c) { var tds = ''; csvColumns.forEach(function (h) { if (h === 'name') { tds += '

' + esc(c.name || '\u2013') + '

'; } else if (h === 'phone_number') { tds += '' + esc(c.phone_number || '\u2013') + ''; } else { tds += '' + esc(c[h] || '\u2013') + ''; } }); tds += '' + statusBadge(c._status) + ''; tds += '' + (c._status === 'calling' ? '' : '') + ''; return '' + tds + ''; }).join(''); var pag = document.getElementById('pagination'); pag.style.display = 'flex'; document.getElementById('paginationInfo').textContent = (start + 1) + '\u2013' + Math.min(start + pageSize, total) + ' von ' + total + ' Kunden'; var nav = document.getElementById('paginationNav'); var btns = ''; for (var p = 1; p <= Math.min(pages, 7); p++) { btns += ''; } btns += ''; nav.innerHTML = btns; } function goPage(p) { var pages = Math.ceil(filtered.length / pageSize); if (p < 1 || p > pages) return; currentPage = p; renderTable(); } function statusBadge(s) { var map = { idle: ['status-idle', 'Ausstehend'], calling: ['status-calling', 'Wird angerufen'], success: ['status-success', 'Gestartet'], error: ['status-error', 'Fehler'] }; var cls = (map[s] || map.idle)[0]; var label = (map[s] || map.idle)[1]; return '' + label + ''; } function esc(str) { return String(str) .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"'); } function filterTable() { var q = document.getElementById('searchInput').value.toLowerCase(); filtered = q ? customers.filter(function (c) { return (c.name || '').toLowerCase().indexOf(q) >= 0 || (c.phone_number || '').toLowerCase().indexOf(q) >= 0 || (c.reason || '').toLowerCase().indexOf(q) >= 0; }) : customers.slice(); currentPage = 1; renderTable(); } function clearData() { customers = []; filtered = []; currentPage = 1; document.getElementById('searchInput').value = ''; document.getElementById('callAllBtn').disabled = true; renderTable(); updateStats(); toast('Info', 'Kundenliste geleert.', 'info'); } function toggleSelectAll(cb) { document.querySelectorAll('.row-check').forEach(function (c) { c.checked = cb.checked; }); } function updateStats() { document.getElementById('stat-total').textContent = customers.length; document.getElementById('stat-success').textContent = customers.filter(function (c) { return c._status === 'success'; }).length; document.getElementById('stat-error').textContent = customers.filter(function (c) { return c._status === 'error'; }).length; document.getElementById('stat-pending').textContent = customers.filter(function (c) { return c._status === 'idle'; }).length; } function openModal(idx) { var c = customers.find(function (x) { return x._idx === idx; }); if (!c) return; modalCustomerIdx = idx; document.getElementById('modalName').textContent = c.name || '\u2013'; document.getElementById('modalPhone').textContent = c.phone_number || '\u2013'; var extraCols = csvColumns.filter(function (h) { return h !== 'name' && h !== 'phone_number'; }); document.getElementById('modalExtraFields').innerHTML = extraCols.map(function (h) { return ''; }).join(''); document.getElementById('confirmCallBtn').disabled = false; document.getElementById('confirmCallBtn').innerHTML = '📞 Anruf starten'; document.getElementById('callModal').classList.add('open'); } function closeModal() { document.getElementById('callModal').classList.remove('open'); modalCustomerIdx = null; } document.getElementById('callModal').addEventListener('click', function (e) { if (e.target === document.getElementById('callModal')) closeModal(); }); document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeModal(); }); function confirmCall() { if (modalCustomerIdx === null) return; var c = customers.find(function (x) { return x._idx === modalCustomerIdx; }); if (!c) return; var payload = {}; Object.keys(c).forEach(function (k) { if (k.indexOf('_') !== 0) payload[k] = c[k]; }); var btn = document.getElementById('confirmCallBtn'); btn.disabled = true; btn.innerHTML = ' Starte Anruf...'; closeModal(); initiateCall(c._idx, payload); } function initiateCall(idx, payload) { var c = customers.find(function (x) { return x._idx === idx; }); if (!c) return; var agent = getSelectedAgent(); if (!agent) { toast('Fehler', 'Bitte zuerst einen Agenten ausw\u00e4hlen.', 'error'); return; } var url = agent.url.replace(/\/$/, ''); c._status = 'calling'; renderTable(); updateStats(); fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }) .then(function (res) { if (!res.ok) throw new Error('HTTP ' + res.status); return res.json().catch(function () { return {}; }); }) .then(function (data) { c._status = 'success'; c._callId = data.callId || null; renderTable(); updateStats(); toast('Anruf gestartet', c.name + ' wird angerufen.' + (c._callId ? ' ID: ' + c._callId : ''), 'success'); }) .catch(function (err) { c._status = 'error'; renderTable(); updateStats(); toast('Fehler', 'Anruf an ' + c.name + ' fehlgeschlagen: ' + err.message, 'error'); }); } function callAll() { var pending = customers.filter(function (c) { return c._status === 'idle'; }); if (!pending.length) { toast('Info', 'Alle Kunden wurden bereits angerufen.', 'info'); return; } var agent = getSelectedAgent(); if (!agent) { toast('Fehler', 'Bitte zuerst einen Agenten ausw\u00e4hlen.', 'error'); return; } if (!confirm(pending.length + ' Kunden mit Agent "' + agent.name + '" anrufen?')) return; var i = 0; function next() { if (i >= pending.length) { toast('Fertig', 'Alle Anrufe wurden initiiert.', 'success'); return; } var c = pending[i++]; var payload = {}; Object.keys(c).forEach(function (k) { if (k.indexOf('_') !== 0) payload[k] = c[k]; }); initiateCall(c._idx, payload); setTimeout(next, 1500); } next(); } function testWebhook() { var agent = getSelectedAgent(); if (!agent) { toast('Fehler', 'Bitte zuerst einen Agenten ausw\u00e4hlen.', 'error'); return; } fetch(agent.url.replace(/\/$/, ''), { method: 'HEAD' }) .then(function () { toast('Verbindung', '"' + agent.name + '" ist erreichbar.', 'success'); }) .catch(function () { toast('Verbindung', 'Webhook nicht erreichbar. URL pr\u00fcfen.', 'error'); }); } function toast(title, msg, type) { type = type || 'info'; var icons = { success: '✅', error: '❌', info: 'ℹ️' }; var el = document.createElement('div'); el.className = 'toast ' + type; el.innerHTML = '' + (icons[type] || icons.info) + '' + '

' + '

' + esc(title) + '

' + '

' + esc(msg) + '

' + '

'; document.getElementById('toast-container').appendChild(el); setTimeout(function () { el.classList.add('hiding'); setTimeout(function () { el.remove(); }, 200); }, 4000); } function loadDemo() { var demo = [ { name: 'Max Mustermann', phone_number: '+4915112345678', email: 'max.mustermann@example.com', letzter_gespraechstermin: '15. Januar 2026' }, { name: 'Anna Schmidt', phone_number: '+4917698765432', email: 'anna.schmidt@example.com', letzter_gespraechstermin: '3. Februar 2026' }, { name: 'Thomas M\u00fcller', phone_number: '+4916011223344', email: 'thomas.mueller@example.com', letzter_gespraechstermin: '20. November 2025' }, { name: 'Sabine Weber', phone_number: '+4915512345678', email: 'sabine.weber@example.com', letzter_gespraechstermin: '8. Januar 2026' }, { name: 'Klaus Fischer', phone_number: '+4917612345678', email: 'k.fischer@example.com', letzter_gespraechstermin: '12. Dezember 2025' } ]; csvColumns = ['name', 'phone_number', 'email', 'letzter_gespraechstermin']; customers = demo.map(function (c, i) { return Object.assign({}, c, { _status: 'idle', _callId: null, _idx: i }); }); filtered = customers.slice(); renderTableHeader(); renderTable(); updateStats(); document.getElementById('callAllBtn').disabled = false; toast('Demo', '5 Beispielkunden geladen.', 'info'); } // Funktionen global verfügbar machen (für onclick-Attribute im HTML) window.filterTable = filterTable; window.clearData = clearData; window.callAll = callAll; window.toggleSelectAll = toggleSelectAll; window.openModal = openModal; window.closeModal = closeModal; window.confirmCall = confirmCall; window.testWebhook = testWebhook; window.goPage = goPage; window.loadDemo = loadDemo; window.openAgentModal = openAgentModal; window.closeAgentModal = closeAgentModal; window.saveAgent = saveAgent; window.editAgent = editAgent; window.deleteAgent = deleteAgent; renderAgentSelect(); // Demo-Button in Header einfügen var badge = document.querySelector('.header-badge'); if (badge) { badge.insertAdjacentHTML('beforebegin', ''); } });