added poll selection retrieval #93

This commit is contained in:
Nicolas Constant 2019-06-04 19:14:16 -04:00
parent 131054514c
commit 55684d5ada
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 55 additions and 8 deletions

View File

@ -1,16 +1,17 @@
<div class="poll"> <div class="poll">
<div *ngFor="let o of poll.options"> <div *ngFor="let o of options">
<!-- <input class="poll__input" id="{{o.title}}" type="{{choiceType}}" name="poll" value="{{o.title}}"> <!-- <input class="poll__input" id="{{o.title}}" type="{{choiceType}}" name="poll" value="{{o.title}}">
<label class="noselect poll__label" for="{{o.title}}">{{o.title}}</label> <label class="noselect poll__label" for="{{o.title}}">{{o.title}}</label>
<br /> --> <br /> -->
<label class="poll__container">{{o.title}} <label class="poll__container">{{o.title}}
<input class="poll__container__input" type="{{choiceType}}" name="{{pollName}}"> <input class="poll__container__input" type="{{choiceType}}" name="{{pollName}}"
value="{{o.title}}" (change)="onSelectionChange(o)">
<span class="poll__container__checkmark" [ngClass]="{'poll__container__checkmark--box' : choiceType=='checkbox', 'poll__container__checkmark--round': choiceType=='radio'}"></span> <span class="poll__container__checkmark" [ngClass]="{'poll__container__checkmark--box' : choiceType=='checkbox', 'poll__container__checkmark--round': choiceType=='radio'}"></span>
</label> </label>
</div> </div>
<div class="poll__voting"> <div class="poll__voting">
<button href class="btn btn-sm btn-custom-primary poll__btn-vote" title="don't boo, vote!">Vote</button> <button href class="btn btn-sm btn-custom-primary poll__btn-vote" title="don't boo, vote!" (click)="vote()">Vote</button>
<div class="poll__statistics">{{poll.votes_count}} votes - X days left</div> <div class="poll__statistics">{{poll.votes_count}} votes - X days left</div>
</div> </div>
</div> </div>

View File

@ -1,6 +1,7 @@
import { Component, OnInit, Input } from '@angular/core'; import { Component, OnInit, Input } from '@angular/core';
import { Poll } from '../../../../services/models/mastodon.interfaces'; import { Poll, PollOption } from '../../../../services/models/mastodon.interfaces';
import { AccountInfo } from '../../../../states/accounts.state';
@Component({ @Component({
selector: 'app-poll', selector: 'app-poll',
@ -8,22 +9,66 @@ import { Poll } from '../../../../services/models/mastodon.interfaces';
styleUrls: ['./poll.component.scss'] styleUrls: ['./poll.component.scss']
}) })
export class PollComponent implements OnInit { export class PollComponent implements OnInit {
pollName: string; pollName: string;
choiceType: string;
choiceType: string;// = 'radio'; private pollSelection: number[] = [];
//choiceType: string = 'checkbox'; options: PollOptionWrapper[] = [];
@Input() poll: Poll; @Input() poll: Poll;
@Input() provider: AccountInfo;
constructor() { } constructor() { }
ngOnInit() { ngOnInit() {
this.pollName = this.poll.id; this.pollName = this.poll.id;
// this.poll.multiple = true;
if(this.poll.multiple){ if(this.poll.multiple){
this.choiceType = 'checkbox'; this.choiceType = 'checkbox';
} else { } else {
this.choiceType = 'radio'; this.choiceType = 'radio';
} }
let i = 0;
for(let opt of this.poll.options){
let optWrapper = new PollOptionWrapper(i, opt);
this.options.push(optWrapper);
i++;
}
}
vote(): boolean {
console.log(this.pollSelection);
return false;
}
onSelectionChange(entry: PollOptionWrapper){
let index = entry.id;
if(this.poll.multiple){
if(this.pollSelection.includes(index)){
this.pollSelection = this.pollSelection.filter(x => x !== index);
} else {
this.pollSelection.push(index);
}
} else {
this.pollSelection.length = 0;
this.pollSelection.push(index);
}
} }
} }
class PollOptionWrapper implements PollOption {
constructor(index: number, option: PollOption){
this.id = index;
this.title = option.title;
this.votes_count = option.votes_count;
}
id: number;
title: string;
votes_count: number;
}

View File

@ -67,7 +67,8 @@
(accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)" (accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"
(textSelected)="textSelected()"></app-databinded-text> (textSelected)="textSelected()"></app-databinded-text>
<app-poll class="status__poll" *ngIf="!isContentWarned && displayedStatus.poll" [poll]="displayedStatus.poll"></app-poll> <app-poll class="status__poll" *ngIf="!isContentWarned && displayedStatus.poll"
[poll]="displayedStatus.poll" [provider]="statusWrapper.provider"></app-poll>
<app-card class="status__card" *ngIf="!isContentWarned && displayedStatus.card && !hasAttachments" [card]="displayedStatus.card"></app-card> <app-card class="status__card" *ngIf="!isContentWarned && displayedStatus.card && !hasAttachments" [card]="displayedStatus.card"></app-card>