Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

added poll progress bars #93

This commit is contained in:
Nicolas Constant 2019-06-06 01:38:32 -04:00
parent c122d66fb6
commit f72141a794
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/components/stream/status/poll/poll.component.html
View File

@ -11,15 +11,18 @@
</div>
<div *ngIf="poll.voted || poll.expired">
<div *ngFor="let o of options">
<div class="poll__result">
<span class="poll__result--percentage">{{ o.percentage }}%</span> {{o.title}}
<div class="poll__result" title="{{ o.votes_count }} votes">
<div class="poll__result--progress-bar" [style.width]="o.percentage + '%'" [ngClass]="{ 'poll__result--progress-bar--most-votes': o.isMax }"></div>
<div class="poll__result--data"> <span class="poll__result--percentage">{{ o.percentage }}%</span>
{{o.title}}</div>
</div>
</div>
</div>
<div class="poll__voting">
<button href *ngIf="!poll.voted && !poll.expired" class="btn btn-sm btn-custom-primary poll__btn-vote" title="don't boo, vote!"
(click)="vote()">Vote</button>
<a href class="poll__refresh" *ngIf="poll.voted && !poll.expired">refresh </a>
<button href *ngIf="!poll.voted && !poll.expired" class="btn btn-sm btn-custom-primary poll__btn-vote"
title="don't boo, vote!" (click)="vote()">Vote</button>
<a href class="poll__refresh" *ngIf="poll.voted && !poll.expired">refresh </a>
<div class="poll__statistics"><span *ngIf="poll.voted"> · </span>{{poll.votes_count}} votes · X days left</div>
</div>
</div>

29
src/app/components/stream/status/poll/poll.component.scss
View File

@ -118,15 +118,38 @@
&__result {
margin: 0 0 5px 5px;
padding: 0 5px 0 5px;
position: relative;
height: 26px;
&--data {
position: absolute;
z-index: 10;
}
&--percentage {
// font-weight: bold;
// font-weight: 600;
// font-style: italic;
color: rgb(228, 228, 228);
color: white;
display: inline;
margin-right: 10px;
}
&--progress-bar {
position: absolute;
background-color: rgb(47, 68, 100);
// background-color: rgb(43, 62, 92);
top:0;
left:0;
width: calc(100%);
height: 21px;
z-index: 1;
float: left;
border-radius: 2px;
&--most-votes {
background-color: rgb(18, 118, 158);
}
}
}
}

14
src/app/components/stream/status/poll/poll.component.ts
View File

@ -35,17 +35,16 @@ export class PollComponent implements OnInit {
this.choiceType = 'radio';
}
const maxVotes = Math.max(...this.poll.options.map(x => x.votes_count));
let i = 0;
for (let opt of this.poll.options) {
let optWrapper = new PollOptionWrapper(i, opt, this.poll.votes_count);
let optWrapper = new PollOptionWrapper(i, opt, this.poll.votes_count, opt.votes_count === maxVotes);
this.options.push(optWrapper);
i++;
}
}
vote(): boolean {
console.log(this.pollSelection);
this.mastodonService.voteOnPoll(this.provider, this.poll.id, this.pollSelection)
.then((poll: Poll) => {
this.poll = poll;
@ -73,23 +72,22 @@ export class PollComponent implements OnInit {
}
class PollOptionWrapper implements PollOption {
constructor(index: number, option: PollOption, totalVotes: number) {
constructor(index: number, option: PollOption, totalVotes: number, isMax: boolean) {
this.id = index;
this.title = option.title;
this.votes_count = option.votes_count;
console.log(this.votes_count);
console.log(totalVotes);
console.log(this.votes_count / totalVotes);
console.log( (this.votes_count / totalVotes) * 100);
if (totalVotes === 0) {
this.percentage = '0';
} else {
this.percentage = ((this.votes_count / totalVotes) * 100).toFixed(0);
}
this.isMax = isMax;
console.warn(this.isMax);
}
id: number;
title: string;
votes_count: number;
percentage: string;
isMax: boolean;
}