124 lines
4.2 KiB
TypeScript
124 lines
4.2 KiB
TypeScript
/*
|
|
* https://github.com/morethanwords/tweb
|
|
* Copyright (C) 2019-2021 Eduard Kuzmenko
|
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
|
*/
|
|
|
|
import {SliderSuperTab} from '../../slider';
|
|
import appSidebarRight from '..';
|
|
import {roundPercents} from '../../poll';
|
|
import appDialogsManager from '../../../lib/appManagers/appDialogsManager';
|
|
import {i18n} from '../../../lib/langPack';
|
|
import setInnerHTML from '../../../helpers/dom/setInnerHTML';
|
|
import wrapEmojiText from '../../../lib/richTextProcessor/wrapEmojiText';
|
|
import Button from '../../button';
|
|
import {Message, MessageMedia} from '../../../layer';
|
|
|
|
export default class AppPollResultsTab extends SliderSuperTab {
|
|
private resultsDiv: HTMLElement;
|
|
|
|
public async init(message: Message.message) {
|
|
this.container.id = 'poll-results-container';
|
|
this.container.classList.add('chatlist-container');
|
|
|
|
this.resultsDiv = document.createElement('div');
|
|
this.resultsDiv.classList.add('poll-results');
|
|
this.scrollable.append(this.resultsDiv);
|
|
|
|
const poll = await this.managers.appPollsManager.getPoll((message.media as MessageMedia.messageMediaPoll).poll.id);
|
|
|
|
this.setTitle(poll.poll.pFlags.quiz ? 'PollResults.Title.Quiz' : 'PollResults.Title.Poll');
|
|
|
|
const title = document.createElement('h3');
|
|
setInnerHTML(title, wrapEmojiText(poll.poll.question));
|
|
|
|
const percents = poll.results.results.map((v) => v.voters / poll.results.total_voters * 100);
|
|
roundPercents(percents);
|
|
|
|
const fragment = document.createDocumentFragment();
|
|
poll.results.results.forEach((result, idx) => {
|
|
if(!result.voters) return;
|
|
|
|
const hr = document.createElement('hr');
|
|
|
|
const answer = poll.poll.answers[idx];
|
|
|
|
// Head
|
|
const answerEl = document.createElement('div');
|
|
answerEl.classList.add('poll-results-answer');
|
|
|
|
const answerTitle = document.createElement('div');
|
|
setInnerHTML(answerTitle, wrapEmojiText(answer.text));
|
|
|
|
const answerPercents = document.createElement('div');
|
|
answerPercents.innerText = Math.round(percents[idx]) + '%';
|
|
|
|
answerEl.append(answerTitle, answerPercents);
|
|
|
|
// Humans
|
|
const list = appDialogsManager.createChatList();
|
|
list.classList.add('poll-results-voters');
|
|
|
|
appDialogsManager.setListClickListener(list, () => {
|
|
appSidebarRight.onCloseBtnClick();
|
|
}, undefined, true);
|
|
|
|
list.style.minHeight = Math.min(result.voters, 4) * 48 + 'px';
|
|
|
|
fragment.append(hr, answerEl, list);
|
|
|
|
let offset: string, limit = 4, loading = false, left = Math.max(0, result.voters - 4);
|
|
const load = () => {
|
|
if(loading) return;
|
|
loading = true;
|
|
|
|
this.managers.appPollsManager.getVotes(message, answer.option, offset, limit).then((votesList) => {
|
|
votesList.votes.forEach((vote) => {
|
|
const {dom} = appDialogsManager.addDialogNew({
|
|
peerId: vote.user_id.toPeerId(false),
|
|
container: list,
|
|
rippleEnabled: false,
|
|
meAsSaved: false,
|
|
avatarSize: 'small'
|
|
});
|
|
dom.lastMessageSpan.parentElement.remove();
|
|
});
|
|
|
|
if(offset) {
|
|
left = Math.max(0, left - votesList.votes.length);
|
|
|
|
if(left) {
|
|
(showMore.lastElementChild as HTMLElement).replaceWith(i18n('PollResults.LoadMore', [Math.min(20, left)]));
|
|
}
|
|
}
|
|
|
|
offset = votesList.next_offset;
|
|
limit = 20;
|
|
|
|
if(!left || !votesList.votes.length) {
|
|
showMore.remove();
|
|
}
|
|
}).finally(() => {
|
|
loading = false;
|
|
});
|
|
};
|
|
|
|
const showMore = Button('poll-results-more btn btn-primary btn-transparent', {icon: 'down'});
|
|
showMore.addEventListener('click', load);
|
|
showMore.append(i18n('PollResults.LoadMore', [Math.min(20, left)]));
|
|
|
|
fragment.append(showMore);
|
|
|
|
load();
|
|
});
|
|
|
|
this.resultsDiv.append(title, fragment);
|
|
|
|
appSidebarRight.toggleSidebar(true).then(() => {
|
|
/* appPollsManager.getVotes(mid).then((votes) => {
|
|
console.log('gOt VotEs', votes);
|
|
}); */
|
|
});
|
|
}
|
|
}
|