Poll WIP (#231):

* front end poll WIP * backend fix
2024-07-01 17:45:11 +02:00
parent 3ef0541886
commit 4591633400
10 changed files with 281 additions and 5 deletions
--- a/conversejs/custom/plugins/poll/templates/poll.js
+++ b/conversejs/custom/plugins/poll/templates/poll.js
@ -0,0 +1,79 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { html } from 'lit'
+import { repeat } from 'lit/directives/repeat.js'
+import { __ } from 'i18n'
+
+function _tplPollEnd (el, currentPoll) {
+  if (!currentPoll.endDate) {
+    return html``
+  }
+
+  // eslint-disable-next-line no-undef
+  const i18nPollEnd = __(LOC_poll_end)
+  return html`<p class="livechat-poll-end">
+      ${i18nPollEnd}
+      ${currentPoll.endDate.toLocaleString()}
+    </p>`
+}
+
+function _tplChoice (el, currentPoll, choice) {
+  // eslint-disable-next-line no-undef
+  const i18nChoiceN = __(LOC_poll_choice_n).replace('{{N}}', choice.choice)
+
+  const votes = choice.votes
+  const totalVotes = currentPoll.votes
+  const percent = totalVotes ? (100 * votes / totalVotes).toFixed(2) : '0.00'
+  return html`
+    <tr>
+      <td>
+        ${
+          currentPoll.over
+            ? html`${i18nChoiceN}`
+            : html`
+              <button type="button" class="btn btn-primary btn-sm"
+                @click=${ev => {
+                  ev.preventDefault()
+                  if (currentPoll.over) { return }
+                  // TODO
+                  console.info('User has voted for choice: ', choice)
+                }}
+              >
+                ${i18nChoiceN}
+              </button>`
+        }
+      </td>
+      <td class="livechat-poll-choice-label">
+        ${choice.label}
+      </td>
+      <td>
+        <div class="livechat-progress-bar">
+          <div
+            role="progressbar"
+            style="width: ${percent}%;"
+            aria-valuenow="${percent}" aria-valuemin="0" aria-valuemax="100"
+          ></div>
+          <p>
+            ${votes}/${totalVotes}
+            (${percent}%)
+          </p>
+        </div>
+      </td>
+    </tr>`
+}
+
+export function tplPoll (el, currentPoll) {
+  if (!currentPoll) {
+    return html``
+  }
+
+  return html`<div>
+    <p class="livechat-poll-question">${currentPoll.question}</p>
+    <table><tbody>
+      ${repeat(currentPoll.choices ?? [], (c) => c.choice, (c) => _tplChoice(el, currentPoll, c))}
+    </tbody></table>
+    ${_tplPollEnd(el, currentPoll)}
+  </div>`
+}