' + b.key + '

' + b.title + '

' + b.note + '

'; b.fields.forEach(function (f) { html += '

'; html += '' + f.q + (f.req ? 'Pflicht' : '') + ''; if (f.hint) html += '

' + f.hint + '

'; if (f.type === 'area') { html += ''; } else if (f.type === 'select') { html += ''; } else if (f.type === 'radio') { html += '

' + f.opts.map(function (o, i) { return '' + o + ''; }).join('') + '

'; } else { html += ''; } html += '

'; }); html += '

'; }); form.innerHTML = html; var reqFields = []; BLOCKS.forEach(function (b) { b.fields.forEach(function (f) { if (f.req) reqFields.push(f.id); }); }); R.querySelector('#tot').textContent = reqFields.length; R.querySelector('#tot2').textContent = reqFields.length; function val(f) { if (f.type === 'radio') { var c = R.querySelector('input[name="' + f.id + '"]:checked'); return c ? c.value : ''; } var el = R.querySelector('#' + f.id); return el ? el.value.trim() : ''; } function each(fn) { BLOCKS.forEach(function (b) { b.fields.forEach(function (f) { fn(f, b); }); }); } function paint() { var done = 0; each(function (f) { var v = val(f); var box = R.querySelector('.field[data-fid="' + f.id + '"]'); if (box) box.classList.toggle('filled', v !== ''); if (f.req && v !== '') done++; }); R.querySelector('#cnt').textContent = done; var bar = R.querySelector('#bar'); bar.style.width = (done / reqFields.length * 100) + '%'; bar.style.background = done === reqFields.length ? 'var(--done)' : 'var(--signal)'; } function save() { var s = {}; each(function (f) { s[f.id] = val(f); }); try { localStorage.setItem(KEY, JSON.stringify(s)); } catch (e) { } flash('Automatisch gespeichert'); } var t; function flash(msg) { var el = R.querySelector('#saved'); el.textContent = msg; clearTimeout(t); t = setTimeout(function () { el.textContent = ''; }, 2200); } form.addEventListener('input', function () { paint(); save(); }); form.addEventListener('change', function () { paint(); save(); }); try { var raw = localStorage.getItem(KEY); if (raw) { var s = JSON.parse(raw); each(function (f) { var v = s[f.id]; if (!v) return; if (f.type === 'radio') { var el = R.querySelector('input[name="' + f.id + '"][value="' + v + '"]'); if (el) el.checked = true; } else { var e2 = R.querySelector('#' + f.id); if (e2) e2.value = v; } }); } } catch (e) { } paint(); /* ---------- PDF ---------- */ var ORANGE = [255, 107, 26]; function fname() { var f = (R.querySelector('#firma').value || '').trim(); var j = (R.querySelector('#jobtitel').value || '').trim(); var n = ('Kampagnen-Briefing ' + f + ' ' + j).replace(/[\\/:*?"<>|]/g, '').replace(/\s+/g, ' ').trim(); return n + '.pdf'; } function doneCount() { var d = 0; each(function (f) { if (f.req && val(f) !== '') d++; }); return d; } function loadLib(cb) { if (window.jspdf && window.jspdf.jsPDF) { cb(window.jspdf.jsPDF); return; } var sc = document.createElement('script'); sc.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js'; sc.onload = function () { cb(window.jspdf && window.jspdf.jsPDF ? window.jspdf.jsPDF : null); }; sc.onerror = function () { cb(null); }; document.head.appendChild(sc); } function buildPDF(JsPDF) { var doc = new JsPDF({ unit: 'mm', format: 'a4' }); var W = 210, H = 297, L = 20, RM = 20, maxW = W - L - RM, y = 0, page = 1; function footer() { doc.setFont('helvetica', 'normal'); doc.setFontSize(8); doc.setTextColor(155); doc.text('Kampagnen-Briefing \u00b7 Einstellen mit System', L, H - 12); doc.text('Seite ' + page, W - RM, H - 12, { align: 'right' }); } function nextPage() { footer(); doc.addPage(); page++; y = 24; } function need(h) { if (y + h > H - 24) nextPage(); } y = 24; doc.setFillColor(ORANGE[0], ORANGE[1], ORANGE[2]); doc.rect(L, y - 7, 20, 1.8, 'F'); y += 4; doc.setFont('helvetica', 'bold'); doc.setFontSize(21); doc.setTextColor(20); doc.text('Kampagnen-Briefing', L, y); y += 9; var kopf = (R.querySelector('#firma').value || '').trim(); var job = (R.querySelector('#jobtitel').value || '').trim(); doc.setFont('helvetica', 'normal'); doc.setFontSize(12); doc.setTextColor(70); doc.text(doc.splitTextToSize(kopf + (job ? ' \u00b7 ' + job : ''), maxW), L, y); y += 7; doc.setFontSize(9); doc.setTextColor(150); doc.text('Ausgef\u00fcllt am ' + new Date().toLocaleDateString('de-DE') + ' \u00b7 ' + doneCount() + ' von ' + reqFields.length + ' Pflichtfeldern beantwortet', L, y); y += 8; doc.setDrawColor(225); doc.setLineWidth(.3); doc.line(L, y, W - RM, y); y += 11; BLOCKS.forEach(function (b) { need(26); doc.setFillColor(ORANGE[0], ORANGE[1], ORANGE[2]); doc.rect(L, y - 3.8, 1.4, 5, 'F'); doc.setFont('helvetica', 'bold'); doc.setFontSize(12.5); doc.setTextColor(20); doc.text(b.key + ' \u00b7 ' + b.title, L + 4.5, y); y += 8; b.fields.forEach(function (f) { var v = val(f); doc.setFont('helvetica', 'bold'); doc.setFontSize(9); var q = doc.splitTextToSize(f.q, maxW); doc.setFont('helvetica', 'normal'); doc.setFontSize(10.5); var a = doc.splitTextToSize(v ? v : '\u2014 offen \u2014', maxW); need(q.length * 4.1 + a.length * 4.9 + 9); doc.setFont('helvetica', 'bold'); doc.setFontSize(9); doc.setTextColor(120); doc.text(q, L, y); y += q.length * 4.1 + 1.8; doc.setFont('helvetica', 'normal'); doc.setFontSize(10.5); if (v) { doc.setTextColor(25); } else { doc.setTextColor(190); } doc.text(a, L, y); y += a.length * 4.9 + 6; }); y += 5; }); footer(); doc.save(fname()); } function printFallback() { var w = window.open('', '_blank'); if (!w) { flash('Bitte Pop-up-Blocker deaktivieren'); return; } var h = '' + fname().replace('.pdf', '') + ''; h += ''; h += '

Kampagnen-Briefing

' + esc((R.querySelector('#firma').value || '')) + ' · ' + esc((R.querySelector('#jobtitel').value || '')) + '

'; h += '

Ausgefüllt am ' + new Date().toLocaleDateString('de-DE') + ' · ' + doneCount() + ' von ' + reqFields.length + ' Pflichtfeldern beantwortet

'; BLOCKS.forEach(function (b) { h += '

' + b.key + ' · ' + esc(b.title) + '

'; b.fields.forEach(function (f) { var v = val(f); h += '

' + esc(f.q) + '

' + (v ? esc(v) : '— offen —') + '

'; }); }); w.document.write(h); w.document.close(); setTimeout(function () { w.print(); }, 400); } function esc(t) { return String(t).replace(/&/g, '&').replace(//g, '>'); } function makeFile() { flash('PDF wird erzeugt …'); loadLib(function (JsPDF) { if (JsPDF) { try { buildPDF(JsPDF); flash('PDF gespeichert – bitte an uns senden'); return; } catch (e) { } } printFallback(); flash('Druckfenster geöffnet – dort „Als PDF speichern“ wählen'); }); } R.querySelector('#pdf').addEventListener('click', makeFile); R.querySelector('#topsend').addEventListener('click', makeFile); function doReset() { if (!confirm('Alle Antworten löschen? Das lässt sich nicht rückgängig machen.')) return; each(function (f) { if (f.type === 'radio') { var c = R.querySelector('input[name="' + f.id + '"]:checked'); if (c) c.checked = false; } else { var e2 = R.querySelector('#' + f.id); if (e2) e2.value = ''; } }); try { localStorage.removeItem(KEY); } catch (e) { } paint(); flash('Alles zurückgesetzt – Formular ist wieder leer'); window.scrollTo({ top: 0, behavior: 'smooth' }); } R.querySelector('#reset').addEventListener('click', doReset); R.querySelector('#resettop').addEventListener('click', doReset); })();

Fertig?