80 lines
2.1 KiB
JavaScript
80 lines
2.1 KiB
JavaScript
|
// 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>`
|
||
|
|
}
|