展示投票

static/index.html

@@ -153,6 +153,7 @@
       width: 22px;
       vertical-align: text-bottom;
     }
+
     #statuses-list .invisible {
       font-size: 0;
       line-height: 0;
@@ -215,6 +216,8 @@
   var loading_statues;
   var base_api_url = "https://thu.closed.social/";
 
+  jQuery.timeago.settings.allowFuture = true;
+
   function get_token() {
     (document.cookie || "").split("; ").forEach( (c) => {
       let cc = c.split("=");
@@ -245,6 +248,43 @@
     });
   }
 
+  function render_poll(poll) {
+    if (!poll)
+      return '';
+    let show_result = poll.expired || poll.voted;
+    return `
+      <div class="status-poll-box">
+        ${poll.options.map((option, idx) => `
+          <small>
+            ${option.title}
+            ${show_result ? ` - ${option.votes_count} / ${poll.votes_count}` : ''}
+            ${poll.own_votes.includes(idx) ? ' ✔️ ' : ''}
+          </small>
+          <div class="progress mb-2">
+            <div class="progress-bar progress-bar-striped" role="progressbar"
+              style="width: ${show_result ? option.votes_count / poll.votes_count * 100 : 0}%"
+            ></div>
+          </div>
+        `).join('\n')}
+        <small>${poll.votes_count}人参与，${poll.expired ? '已结束' : `将结束于<time class="timeago" datetime="${poll.expires_at}"></timeago>`}</small>
+      </div>
+    `;
+  }
+
+  function render_media(media_attachments) {
+    return media_attachments.map((media) => {
+      switch (media.type) {
+        case 'image':
+          return `<image class="status-media" src=${media.url}>`;
+        case 'video':
+          return `<video class="status-media" src=${media.url} controls></video>`;
+        case 'gifv':
+          return `<video class="status-media" src=${media.url} autoplay loop></video>`;
+        default:
+          return '';
+      }
+    }).join('\n');
+  }
 
   function render_content(text, is_mask_bot, emojis) {
     if (is_mask_bot) {
@@ -270,18 +310,8 @@
         <div class="content">
           ${render_content(status.content, status.account.acct === "mask_bot", status.emojis)}
         </div>
-        ${status.media_attachments.map((media) => {
-          switch (media.type) {
-            case 'image':
-              return `<image class="status-media" src=${media.url}>`;
-            case 'video':
-              return `<video class="status-media" src=${media.url} controls></video>`;
-            case 'gifv':
-              return `<video class="status-media" src=${media.url} autoplay loop></video>`;
-            default:
-              return '';
-          }
-        }).join('\n')}
+        ${render_poll(status.poll)}
+        ${render_media(status.media_attachments)}
         <div style="text-align:right;margin: 0px 0 -5px">
           <time class="timeago mr-1 super-small" datetime="${status.created_at}"
             title="${status.created_at}"></time>