File
Implements
Metadata
| selector |
framadate-voting-summary |
| styleUrls |
./voting-summary.component.scss |
| templateUrl |
./voting-summary.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
pollconfig
|
Default value : mockPoll3
|
|
|
Methods
|
computePreferred
|
computePreferred()
|
|
|
|
|
|
preferred
|
Type : string
|
Default value : 'rien'
|
|
|
|
severalPreferred
|
Type : boolean
|
Default value : false
|
|
|
import {Component, Input, OnInit} from '@angular/core';
import {ConfigService} from "../../../services/config.service";
import {mockPoll3} from "../../../config/mocks/mock-poll3";
@Component({
selector: 'framadate-voting-summary',
templateUrl: './voting-summary.component.html',
styleUrls: ['./voting-summary.component.scss']
})
export class VotingSummaryComponent implements OnInit {
preferred: string = 'rien';
severalPreferred: boolean = false;
@Input() pollconfig = mockPoll3;
constructor(public config: ConfigService) {
}
ngOnInit() {
this.computePreferred();
console.log(' this.pollconfig.choices', this.pollconfig.choices)
console.log(' this.pollconfig.choices_count', this.pollconfig.choices_count.counts)
console.log('this.pollconfig.choices_count.counts[10]', this.pollconfig.choices_count.counts[10])
console.log('this.pollconfig.choices[2].id', this.pollconfig.choices[2].id)
console.log('this.pollconfig.choices_count.counts[]', this.pollconfig.choices_count.counts[this.pollconfig.choices[2].id].score)
}
getKeys(obj) {
return Object.keys(obj)
}
/**
* find the most "yes"
*/
computePreferred() {
let keys = Object.keys(this.pollconfig.choices_count.counts);
this.preferred = '';
this.severalPreferred = false;
let maxScore = this.pollconfig.choices_count.maxScore;
keys.forEach(item => {
if (maxScore === this.pollconfig.choices_count.counts[item].score) {
if (this.preferred.length) {
this.preferred += ', '
this.severalPreferred = true;
}
// find the favourite
this.preferred += this.pollconfig.choices_count.counts[item].choice_text;
}
});
}
}
<h2 >Résumé</h2 >
<div class='heading' >
<div class='col-xs-6' >
<h1 id='title' >{{config.currentPoll.poll.title}}</h1 >
<p >{{config.currentPoll.poll.description}}</p >
<span class="creationDate" >
Créé le {{config.currentPoll.poll.creationDate.date}}
</span >
<span class="expiracyDate" >
Expire le {{config.currentPoll.poll.expiracyDate.date}}
</span >
<div class="votants" >
<i class='fa fa-users' ></i >
{{config.currentPoll.stacks.length}} votants,
{{config.currentPoll.choices.length}} choix,
</div >
</div >
</div >
<div class="preferred" >
<i class='fa fa-star' ></i >
Pour l'instant,
<span *ngIf='severalPreferred' >
les
</span > <span *ngIf='!severalPreferred' >
le
</span >
choix ayant reçu le plus grand nombre de votes ( {{config.currentPoll.choices_count.maxScore}} points )
<span *ngIf='severalPreferred' >
sont à égalité
</span > <span *ngIf='!severalPreferred' >
est
</span >
:
<span class='preferred-result' >
{{preferred}}
</span >
</div >
<table class='table is-striped is-bordered is-hoverable' >
<thead >
<tr *ngIf='config.currentPoll.choices && config.currentPoll.choices_count' >
<td >
Pseudo
</td >
<td
*ngFor='let choice of config.currentPoll.choices'
>
{{choice.text}}
</td >
</tr >
<!-- somme des points, dont un demi point pour les "peut être" -->
</thead >
<tbody >
<tr
title='somme des points, dont un demi point pour les "peut être"' >
<td >
<i class='fa fa-plus-circle' ></i > points
</td >
<!-- <td-->
<!-- *ngFor='let choice of config.currentPoll.choices'-->
<!-- [ngClass]='{"has-max-score" : config.currentPoll.choices_count.maxScore === config.currentPoll.choices_count.counts[choice.id].score}' >-->
<!-- {{config.currentPoll.choices[choice.id].score}}-->
<!-- </td >-->
<td
*ngFor='let choice of config.currentPoll.choices'
>
{{pollconfig.choices_count.counts[this.pollconfig.choices[2].id].score}}
</td >
</tr >
<tr class='details' >
<td >
<i class='fa fa-eye' ></i >
</td >
<td *ngFor='let choice of config.currentPoll.choices' >
id: {{choice.id}}
<br >
<!-- yes {{config.currentPoll.choices_count.counts[choice.id].yes.count}}-->
<!-- <br >-->
<!-- maybe-->
<!-- {{(config.currentPoll.choices_count.counts[k].yes.maybe ? config.currentPoll.choices_count.counts[k].yes.count * 0.5 : 0)}}-->
<!-- <br >-->
<!-- no {{(config.currentPoll.choices_count.counts[k].yes.maybe ? config.currentPoll.choices_count.counts[k].maybe.count * 0.5 : 0)}}-->
<br >
<!-- score :-->
<!-- {{(config.currentPoll.choices_count.counts[choice.id].score)}}-->
</td >
</tr >
<tr
class='votes-of-the-person'
*ngFor='let voteStack of config.currentPoll.stacks'
>
<td >
<!-- // TODO show modify if this is our own vote-->
<button
(click)='config.loadVoteStack(voteStack)'
*ngIf="config.currentPoll.poll.modificationPolicy === 'everybody'"
class='btn btn--primary pull-left btn--small'
>
<i class='fa fa-pencil' ></i >
</button >
{{voteStack.pseudo}}
</td >
<td *ngFor='let v of getKeys(voteStack.votes)' >
<span *ngIf='voteStack.votes[v].value' >
<img
*ngIf="voteStack.votes[v].value == 'yes'"
src='../../../../assets/img/votant-sur.svg'
alt='yes' >
<img
*ngIf="voteStack.votes[v].value == 'maybe'"
src='../../../../assets/img/votant-pas-sur.svg'
alt='yes' >
</span >
</td >
</tr >
<!-- bottom line shows each answer details-->
</tbody >
</table >
@import "../../../../assets/scss/variables";
.person {
font-weight: 700;
}
.preferred-result {
font-weight: 700;
font-size: 1.5em;
}
thead {
font-size: 1.25em;
font-weight: 700;
}
tbody {
text-align: right;
}
td {
&.has-max-score {
background: $primary_color;
font-weight: 800;
}
}
Legend
Html element with directive