source: Klonkt/src/views/pages/admin-push.ejs@ 053bf51

<div class="container" style="max-width:640px;margin:1.5rem auto 3rem;padding:0 1rem">
  <h1 style="margin:0 0 .3rem">Notificaties</h1>
  <p style="color:var(--ink-soft,#888);margin:0 0 1.2rem">
    Krijg een melding op dit apparaat bij nieuwe volgers, reacties en berichten,
    ook als de site niet open staat. Versleuteld tot in je browser; wij sturen zo
    min mogelijk inhoud mee.
  </p>

  <% if (!vapidKey) { %>
    <p style="color:#c0392b">Push is op deze server niet beschikbaar (sleutel kon niet worden aangemaakt of de dependency ontbreekt).</p>
  <% } else { %>

  <div id="np-unsupported" hidden style="color:#c0392b;margin:0 0 1rem">
    Deze browser ondersteunt geen push-notificaties.
  </div>
  <div id="np-ios-hint" hidden style="border:1px solid var(--border,#333);border-radius:10px;padding:.8rem 1rem;margin:0 0 1rem;font-size:.92rem;color:var(--ink-soft,#888)">
    Op iPhone/iPad werkt dit alleen als de site op je beginscherm staat:
    deel-knop → <em>Zet op beginscherm</em>, en open 'm daarna vanaf daar.
  </div>

  <section style="border:1px solid var(--border,#333);border-radius:12px;padding:1rem 1.1rem;margin:0 0 1.2rem">
    <p style="margin:0 0 .6rem"><strong>Dit apparaat:</strong> <span id="np-state">controleren…</span></p>
    <div style="display:flex;gap:.6rem;flex-wrap:wrap">
      <button type="button" id="np-on" class="btn btn-primary" hidden>Zet aan op dit apparaat</button>
      <button type="button" id="np-off" class="btn" hidden>Zet uit</button>
      <button type="button" id="np-test" class="btn" hidden>Stuur testmelding</button>
    </div>
    <fieldset id="np-alerts" hidden style="border:none;padding:0;margin:1rem 0 0">
      <legend style="font-weight:600;margin-bottom:.4rem">Waarvoor wil je een melding?</legend>
      <label style="display:block"><input type="checkbox" data-alert="follow"> Nieuwe volger</label>
      <label style="display:block"><input type="checkbox" data-alert="reply"> Reactie of vermelding</label>
      <label style="display:block"><input type="checkbox" data-alert="like"> Waardering (ster)</label>
      <label style="display:block"><input type="checkbox" data-alert="boost"> Boost</label>
      <label style="display:block"><input type="checkbox" data-alert="dm"> Priv&eacute;bericht</label>
      <p id="np-saved" hidden style="color:var(--accent);margin:.4rem 0 0">Opgeslagen.</p>
    </fieldset>
  </section>

  <% if (subscriptions.length) { %>
    <h2 style="font-size:1.05rem;margin:0 0 .5rem">Gekoppelde apparaten</h2>
    <ul style="list-style:none;padding:0;margin:0 0 1.2rem">
      <% subscriptions.forEach(function (s) { %>
        <li data-endpoint="<%= s.endpoint %>" style="display:flex;justify-content:space-between;gap:.8rem;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--border,#2a2a2a)">
          <span style="min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><%= s.ua_label || 'Apparaat' %> <small style="color:var(--ink-soft,#888)">sinds <%= String(s.created_at || '').slice(0, 10) %></small></span>
          <button type="button" class="btn np-remove" data-endpoint="<%= s.endpoint %>">Verwijder</button>
        </li>
      <% }); %>
    </ul>
  <% } %>

  <% } %>

  <p style="margin-top:1.5rem"><a href="/admin">&larr; Terug naar Beheer</a></p>
</div>

<% if (vapidKey) { %>
<script id="np-data" type="application/json"><%- JSON.stringify({
  vapid: vapidKey,
  alerts: defaultAlerts,
  saved: subscriptions.reduce(function (m, s) { try { m[s.endpoint] = JSON.parse(s.alert_types || '{}'); } catch (e) { m[s.endpoint] = {}; } return m; }, {}),
}).replace(/</g, '\\u003c') %></script>
<script>
(function () {
  var cfg = JSON.parse(document.getElementById('np-data').textContent);
  var elState = document.getElementById('np-state');
  var btnOn = document.getElementById('np-on'), btnOff = document.getElementById('np-off'), btnTest = document.getElementById('np-test');
  var alertsBox = document.getElementById('np-alerts'), savedMsg = document.getElementById('np-saved');
  var currentEndpoint = null;

  var isIos = /iPad|iPhone|iPod/.test(navigator.userAgent);
  var standalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true;
  if (isIos && !standalone) document.getElementById('np-ios-hint').hidden = false;

  if (!('serviceWorker' in navigator) || !('PushManager' in window) || !('Notification' in window)) {
    document.getElementById('np-unsupported').hidden = false;
    elState.textContent = 'niet ondersteund';
    return;
  }

  function b64ToU8(s) {
    var pad = '='.repeat((4 - (s.length % 4)) % 4);
    var raw = atob((s + pad).replace(/-/g, '+').replace(/_/g, '/'));
    var out = new Uint8Array(raw.length);
    for (var i = 0; i < raw.length; i++) out[i] = raw.charCodeAt(i);
    return out;
  }
  function post(url, body) {
    return fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body || {}) });
  }
  function deviceLabel() {
    var ua = navigator.userAgent;
    var browser = /Firefox\//.test(ua) ? 'Firefox' : /Edg\//.test(ua) ? 'Edge' : /Chrome\//.test(ua) ? 'Chrome' : /Safari\//.test(ua) ? 'Safari' : 'Browser';
    var os = /Android/.test(ua) ? 'Android' : /iPad|iPhone|iPod/.test(ua) ? 'iOS' : /Mac/.test(ua) ? 'macOS' : /Win/.test(ua) ? 'Windows' : /Linux/.test(ua) ? 'Linux' : '';
    return (browser + (os ? ' op ' + os : ''));
  }
  function readAlertBoxes() {
    var out = {};
    alertsBox.querySelectorAll('input[data-alert]').forEach(function (cb) { out[cb.getAttribute('data-alert')] = cb.checked ? 1 : 0; });
    return out;
  }
  function setAlertBoxes(alerts) {
    alertsBox.querySelectorAll('input[data-alert]').forEach(function (cb) {
      cb.checked = !!alerts[cb.getAttribute('data-alert')];
    });
  }

  function render(sub) {
    currentEndpoint = sub ? sub.endpoint : null;
    elState.textContent = sub ? 'meldingen staan aan' : (Notification.permission === 'denied' ? 'geblokkeerd in de browserinstellingen' : 'meldingen staan uit');
    btnOn.hidden = !!sub || Notification.permission === 'denied';
    btnOff.hidden = !sub;
    btnTest.hidden = !sub;
    alertsBox.hidden = !sub;
  }

  navigator.serviceWorker.ready.then(function (reg) {
    return reg.pushManager.getSubscription();
  }).then(function (sub) {
    // Show this device's SAVED prefs when we know them, defaults otherwise.
    setAlertBoxes((sub && cfg.saved[sub.endpoint]) ? Object.assign({}, cfg.alerts, cfg.saved[sub.endpoint]) : cfg.alerts);
    render(sub);
  }).catch(function () { elState.textContent = 'status onbekend'; });

  btnOn.addEventListener('click', function () {
    btnOn.disabled = true;
    Notification.requestPermission().then(function (perm) {
      if (perm !== 'granted') { btnOn.disabled = false; render(null); return; }
      navigator.serviceWorker.ready.then(function (reg) {
        return reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: b64ToU8(cfg.vapid) });
      }).then(function (sub) {
        return post('/push/subscribe', { subscription: sub.toJSON(), alerts: readAlertBoxes(), uaLabel: deviceLabel() })
          .then(function (r) { if (!r.ok) throw new Error('subscribe failed'); render(sub); location.reload(); });
      }).catch(function () { btnOn.disabled = false; elState.textContent = 'aanzetten mislukt'; });
    });
  });

  btnOff.addEventListener('click', function () {
    navigator.serviceWorker.ready.then(function (reg) { return reg.pushManager.getSubscription(); }).then(function (sub) {
      if (!sub) { render(null); return; }
      var ep = sub.endpoint;
      sub.unsubscribe().then(function () { return post('/push/unsubscribe', { endpoint: ep }); })
        .then(function () { location.reload(); });
    });
  });

  btnTest.addEventListener('click', function () {
    btnTest.disabled = true;
    post('/push/test').then(function () { setTimeout(function () { btnTest.disabled = false; }, 2000); });
  });

  alertsBox.addEventListener('change', function () {
    if (!currentEndpoint) return;
    post('/push/alerts', { endpoint: currentEndpoint, alerts: readAlertBoxes() }).then(function (r) {
      if (r.ok) { savedMsg.hidden = false; setTimeout(function () { savedMsg.hidden = true; }, 1500); }
    });
  });

  document.querySelectorAll('.np-remove').forEach(function (btn) {
    btn.addEventListener('click', function () {
      post('/push/unsubscribe', { endpoint: btn.getAttribute('data-endpoint') }).then(function () { location.reload(); });
    });
  });
})();
</script>
<% } %>