' + '

🔍

' + '

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) { return '' + '' + '

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

' + '' + esc(c.phone_number || '\u2013') + '' + '' + esc(c.reason || '\u2013') + '' + '' + esc(c.preferred_date || '\u2013') + '' + '' + esc(c.notes || '\u2013') + '' + '' + statusBadge(c._status) + '' + '' + (c._status === 'calling' ? '' : '') + ''; }).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'; document.getElementById('modalReason').value = c.reason || ''; document.getElementById('modalDate').value = c.preferred_date || ''; document.getElementById('modalNotes').value = c.notes || ''; 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 = { phone_number: c.phone_number, customer_name: c.name, reason: document.getElementById('modalReason').value || c.reason || 'Terminbuchung', preferred_date: document.getElementById('modalDate').value || c.preferred_date || '', notes: document.getElementById('modalNotes').value || c.notes || '' }; 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 url = document.getElementById('webhookBase').value.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; } if (!confirm(pending.length + ' Kunden anrufen?')) return; var i = 0; function next() { if (i >= pending.length) { toast('Fertig', 'Alle Anrufe wurden initiiert.', 'success'); return; } var c = pending[i++]; initiateCall(c._idx, { phone_number: c.phone_number, customer_name: c.name, reason: c.reason || 'Terminbuchung', preferred_date: c.preferred_date || '', notes: c.notes || '' }); setTimeout(next, 1500); } next(); } function testWebhook() { var base = document.getElementById('webhookBase').value.replace(/\/$/, ''); fetch(base, { method: 'HEAD' }) .then(function () { toast('Verbindung', 'Webhook 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', reason: 'Erstgespr\u00e4ch Beratung', preferred_date: '2026-03-10', notes: 'Interessiert an Paket A' }, { name: 'Anna Schmidt', phone_number: '+4917698765432', reason: 'Terminvereinbarung', preferred_date: '2026-03-11', notes: '' }, { name: 'Thomas M\u00fcller', phone_number: '+4916011223344', reason: 'R\u00fcckruf nach Anfrage', preferred_date: '', notes: 'Anfrage vom 20.02.' }, { name: 'Sabine Weber', phone_number: '+4915512345678', reason: 'Angebot besprechen', preferred_date: '2026-03-12', notes: 'VIP-Kunde' }, { name: 'Klaus Fischer', phone_number: '+4917612345678', reason: 'Support-Termin', preferred_date: '', notes: '' } ]; customers = demo.map(function (c, i) { return Object.assign({}, c, { _status: 'idle', _callId: null, _idx: i }); }); filtered = customers.slice(); 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; // Demo-Button in Header einfügen var badge = document.querySelector('.header-badge'); if (badge) { badge.insertAdjacentHTML('beforebegin', ''); } });