added poll selection retrieval #93
This commit is contained in:
parent
131054514c
commit
55684d5ada
|
@ -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>
|
|
@ -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;
|
||||||
|
}
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue