Changeset 0403187 in Klonkt for src/views/pages

Timestamp:

07/01/2026 12:53:32 PM (2 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

bb3f67c

Parents:

731e431

Message:

feat(fediverse): host your own polls (federate as AS2 Question)

A post can carry a poll that federates as an AS2 Question so remote (Mastodon)
followers vote from their own app; votes are tallied server-side and the fresh
counts are pushed back as Update(Question). Voting is fediverse-only; the site
shows live, read-only results. Complements the existing inbound poll support.

• src/config/database.js — posts.poll_json (our poll definition) + poll_votes table (post_id, actor_uri, choice; UNIQUE) backing the tally + per-actor dedupe.
• src/services/ActivityPubService.js — parseOwnPoll/pollTally/ownPollView helpers; buildNote emits a Question (oneOf/anyOf + replies.totalItems + endTime/closed + votersCount) for a poll post; handleInbox records a ballot (Note with name + inReplyTo our poll) before the reply path, deduped per actor; a debounced Update(Question) pushes fresh counts to followers; votersCount added to AP_CONTEXT.
• src/services/Scheduler.js — closeExpiredPolls() marks a poll closed once its endTime passes and pushes the final tally; runs on the existing 60s tick.
• src/routes/posts.js — parsePollForm() turns the editor fields into poll_json on create/save (a poll with votes is frozen), passes poll_json to the federation hooks, and hands the post page a render-ready ownPollView.
• src/views/pages/post-edit.ejs — poll section (options, multiple-choice, duration); disabled once the poll has votes.
• src/views/pages/post.ejs — display-only poll with result bars + voter/close meta.
• src/services/i18n.js — poll.* + pedit.poll_* strings (nl/en/de).
• test/polls.test.js — Question shape, tally, percentages, closed state, AS2 term.
• CHANGELOG(.nl/.de).md — "Create your own polls" under Unreleased.

Co-Authored-By: Claude <noreply@…>

Location:

src/views/pages

Files:

• post-edit.ejs (modified) (1 diff)
• post.ejs (modified) (2 diffs)

src/views/pages/post-edit.ejs

@@ -257 +257 @@
           if (cw && nsfw && !cw.__nsfwWired) { cw.__nsfwWired = true;
             cw.addEventListener('input', function () { if (cw.value.trim()) nsfw.checked = true; });
+          }
+        })();
+        </script>
+        <% // Poll (federates as an AS2 Question). Free feature. A poll with votes is frozen.
+           var _poll = null; try { _poll = post.poll_json ? JSON.parse(post.poll_json) : null; } catch (e) { _poll = null; }
+           var _pollLocked = (typeof pollLocked !== 'undefined' && pollLocked);
+           var _pollOpts = (_poll && Array.isArray(_poll.options) && _poll.options.length) ? _poll.options : [{ name: '' }, { name: '' }]; %>
+        <label class="pe-checkbox" style="margin-top:8px">
+          <input type="checkbox" name="poll_enabled" value="1" id="pe-poll-toggle" <%= _poll ? 'checked' : '' %> <%= _pollLocked ? 'disabled' : '' %>>
+          <span>📊 <%= t('pedit.poll_label') %></span>
+        </label>
+        <div id="pe-poll-fields" style="margin-top:6px<%= _poll ? '' : ';display:none' %>">
+          <% if (_pollLocked) { %><p style="font-size:12px;opacity:.7;margin:0 0 6px"><%= t('pedit.poll_locked') %></p><% } %>
+          <div id="pe-poll-opts">
+            <% _pollOpts.forEach(function (o) { %>
+              <input type="text" name="poll_option" class="pe-poll-opt" maxlength="100" value="<%= (o && o.name) || '' %>" placeholder="<%= t('pedit.poll_option_ph') %>" <%= _pollLocked ? 'disabled' : '' %>
+                     style="display:block;width:100%;box-sizing:border-box;margin-bottom:5px;font-size:13px;padding:7px 9px;border-radius:7px;border:1px solid var(--rule,rgba(128,128,128,.35));background:transparent;color:inherit">
+            <% }); %>
+          </div>
+          <button type="button" id="pe-poll-add" class="btn" data-ph="<%= t('pedit.poll_option_ph') %>" <%= _pollLocked ? 'disabled' : '' %> style="font-size:12.5px;padding:5px 10px">+ <%= t('pedit.poll_add') %></button>
+          <label class="pe-checkbox" style="margin-top:8px">
+            <input type="checkbox" name="poll_multiple" value="1" <%= (_poll && _poll.multiple) ? 'checked' : '' %> <%= _pollLocked ? 'disabled' : '' %>>
+            <span><%= t('pedit.poll_multiple') %></span>
+          </label>
+          <label style="display:block;font-size:12.5px;opacity:.8;margin:6px 0 4px"><%= t('pedit.poll_duration') %></label>
+          <select name="poll_duration" <%= _pollLocked ? 'disabled' : '' %> style="padding:7px 9px;border-radius:7px;border:1px solid var(--rule,rgba(128,128,128,.35));background:transparent;color:inherit;font-size:13px">
+            <% [['300','5m'],['1800','30m'],['3600','1h'],['21600','6h'],['43200','12h'],['86400','1d'],['259200','3d'],['604800','7d']].forEach(function (d) { %>
+              <option value="<%= d[0] %>" <%= d[0] === '86400' ? 'selected' : '' %>><%= t('pedit.poll_dur_' + d[1]) %></option>
+            <% }); %>
+          </select>
+        </div>
+        <script>
+        (function () {
+          var tog = document.getElementById('pe-poll-toggle'), box = document.getElementById('pe-poll-fields');
+          if (tog && box && !tog.__wired) { tog.__wired = true; tog.addEventListener('change', function () { box.style.display = tog.checked ? '' : 'none'; }); }
+          var add = document.getElementById('pe-poll-add'), opts = document.getElementById('pe-poll-opts');
+          if (add && opts && !add.__wired) { add.__wired = true;
+            add.addEventListener('click', function () {
+              if (opts.querySelectorAll('.pe-poll-opt').length >= 8) return;
+              var i = document.createElement('input');
+              i.type = 'text'; i.name = 'poll_option'; i.className = 'pe-poll-opt'; i.maxLength = 100;
+              i.placeholder = add.getAttribute('data-ph') || '';
+              i.setAttribute('style', 'display:block;width:100%;box-sizing:border-box;margin-bottom:5px;font-size:13px;padding:7px 9px;border-radius:7px;border:1px solid var(--rule,rgba(128,128,128,.35));background:transparent;color:inherit');
+              opts.appendChild(i);
+            });
           }
         })();

src/views/pages/post.ejs

@@ -44 +44 @@
     <%- post.content_html %>
   </div>
+
+  <% if (typeof poll !== 'undefined' && poll) { %>
+    <section class="poll" aria-label="<%= t('poll.aria') %>">
+      <% poll.options.forEach(function(o){ var _lead = poll.total > 0 && o.count === Math.max.apply(null, poll.options.map(function(x){return x.count;})); %>
+        <div class="poll-opt<%= _lead ? ' is-lead' : '' %>">
+          <div class="poll-bar" style="width:<%= o.pct %>%"></div>
+          <span class="poll-name"><%= o.name %></span>
+          <span class="poll-pct"><%= o.pct %>%</span>
+        </div>
+      <% }); %>
+      <div class="poll-meta">
+        <span><%= poll.voters %> <%= poll.voters === 1 ? t('poll.voter_one') : t('poll.voter_many') %></span>
+        <span aria-hidden="true">·</span>
+        <% if (poll.closed) { %>
+          <span><%= t('poll.closed') %></span>
+        <% } else if (poll.endTime) { %>
+          <span><%= t('poll.closes') %> <%= new Date(poll.endTime).toLocaleString() %></span>
+        <% } %>
+        <% if (poll.multiple) { %><span aria-hidden="true">·</span><span><%= t('poll.multiple') %></span><% } %>
+      </div>
+      <p class="poll-note"><%= t('poll.fedi_only') %></p>
+    </section>
+  <% } %>
 
   <% if (post.tags && post.tags.length > 0) { %>
@@ -210 +233 @@
 .post-content { font-family: var(--font-body, serif); font-size: 1.1rem; line-height: 1.7; color: var(--ink); }
 .post-content p { margin: 1.2em 0; }
+/* Poll (a hosted AS2 Question) — display-only; voting happens from the fediverse. */
+.poll { margin: 1.75rem 0; display: flex; flex-direction: column; gap: .5rem; }
+.poll-opt { position: relative; display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border: 1px solid var(--line, rgba(128,128,128,.25)); border-radius: 8px; overflow: hidden; font-size: .98rem; }
+.poll-bar { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 18%, transparent); z-index: 0; transition: width .3s ease; }
+.poll-opt.is-lead .poll-bar { background: color-mix(in srgb, var(--accent) 30%, transparent); }
+.poll-name { position: relative; z-index: 1; flex: 1; color: var(--ink); }
+.poll-opt.is-lead .poll-name { font-weight: 600; }
+.poll-pct { position: relative; z-index: 1; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
+.poll-meta { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .85rem; color: var(--ink-muted); }
+.poll-note { font-size: .8rem; color: var(--ink-muted); margin: .1rem 0 0; }
 .like-btn {
   display: inline-flex; align-items: center; gap: 0.45rem;