display details too

src/app/core/models/choice.model.ts

@@ -2,12 +2,14 @@ import { Answer } from '../enums/answer.enum';
 import { User } from './user.model';
 
 export class Choice {
+	public id: number;
+	public name: string;
+	public created_at: string;
+	public score: number;
+	public enabled: boolean;
+	public url?: string;
+
 	constructor(
-		public id: number,
-		public name: string,
-		public created_at: string,
-		public enabled: boolean,
-		public url?: string,
 		public participants: Map<Answer, Set<User>> = new Map<Answer, Set<User>>([
 			[Answer.YES, new Set<User>()],
 			[Answer.NO, new Set<User>()],

src/app/features/consultation/consultation.component.ts

@@ -14,7 +14,7 @@ import { Comment } from '../../core/models/comment.model';
 	styleUrls: ['./consultation.component.scss'],
 })
 export class ConsultationComponent implements OnInit, OnDestroy {
-	public isCompactMode = true;
+	public isCompactMode = false;
 	public poll: Poll;
 	public pollSlug: string;
 	public passHash: string;

src/app/features/consultation/poll-results-compact/poll-results-compact.component.html

@@ -1,16 +1,19 @@
-{{ poll.choices_stats.length }} choix
+{{ poll.choices.length }} choix
 <div
 	class="box"
-	*ngFor="let choice of poll.choices_stats"
+	*ngFor="let choice of poll.choices"
 	[ngClass]="{ 'active has-background-success': choice.enabled }"
 	(click)="choice.enabled = !choice.enabled"
 >
 	<div class="columns is-vcentered is-mobile">
 		<div class="column">
-			<label class="label">{{ choice.name }} </label>
+			<label class="label" *ngIf="poll.kind == 'text'">{{ choice.name }} </label>
+			<label class="label" *ngIf="poll.kind == 'date'">
+				{{ choice.name }} : {{ choice.name | date: 'short':'Europe/Paris':'fr_FR' }}
+			</label>
 		</div>
 		<div class="column is-narrow">
-			<span class="max_score" *ngIf="choice.score == poll.max_score">
+			<span class="max_score" *ngIf="poll.max_score > 0 && choice.score == poll.max_score">
 				<i class="fa fa-star fa-2x"></i>
 			</span>
 		</div>
@@ -24,19 +27,19 @@
 				<button class="button is-white">
 					<img class="image is-24x24" src="../../../assets/img/icon_voter_YES.svg" />
 
-					<span class="counter">
+					<span class="counter" *ngIf="choice[answerEnum.YES].count * 1 > 0">
 						{{ choice[answerEnum.YES].count }}
 					</span>
 				</button>
 				<button class="button is-white" *ngIf="poll.allowed_answers.indexOf('maybe') !== -1">
 					<img class="image is-24x24" src="../../../assets/img/icon_voter_MAYBE.svg" />
-					<span class="counter">
+					<span class="counter" *ngIf="choice[answerEnum.YES].count * 1 > 0">
 						{{ choice[answerEnum.MAYBE].count }}
 					</span>
 				</button>
 				<button class="button is-white" *ngIf="poll.allowed_answers.indexOf('no') !== -1">
 					<img class="image is-24x24" src="../../../assets/img/croix.svg" />
-					<span class="counter">
+					<span class="counter" *ngIf="choice[answerEnum.YES].count * 1 > 0">
 						{{ choice[answerEnum.NO].count }}
 					</span>
 				</button>

src/app/features/consultation/poll-results-detailed/poll-results-detailed.component.html

@@ -1,18 +1,62 @@
 <table>
 	<thead>
 		<tr>
-			<th></th>
+			<th>
+				Choix
+			</th>
 			<th *ngFor="let choice of poll.choices">
-				{{ choice.name }}
+				<!--			{{choice.id}}-->
+				<span class="label" *ngIf="poll.kind == 'text'">{{ choice.name }} </span>
+				<span class="label" *ngIf="poll.kind == 'date'">
+					{{ choice.name | date: 'short':'Europe/Paris':'fr_FR' }}
+				</span>
 			</th>
 		</tr>
 	</thead>
 	<tbody>
-		<!--		<ng-container *ngFor="let item of buildAnswersByChoiceLabelByPseudo() | keyvalue">-->
-		<!--			<tr>-->
-		<!--				<td>{{ item.key }}</td>-->
-		<!--				<td *ngFor="let subItem of item.name | keyvalue">{{ subItem.name }}</td>-->
-		<!--			</tr>-->
-		<!--		</ng-container>-->
+		<tr class="stats">
+			<td>
+				Score
+			</td>
+			<td *ngFor="let choice of poll.choices">
+				<!--			{{choice.id}} )-->
+				{{ choice.score }}
+			</td>
+		</tr>
+		<tr class="stats">
+			<td>
+				Favori
+			</td>
+			<td *ngFor="let choice of poll.choices">
+				<span class="max_score" *ngIf="poll.max_score > 0 && choice.score == poll.max_score">
+					<i class="fa fa-star fa-2x"></i>
+				</span>
+			</td>
+		</tr>
+		<tr class="people">
+			<td>
+				Personnes
+			</td>
+			<td *ngFor="let choice of poll.choices"></td>
+		</tr>
+		<tr class="stacks" *ngFor="let stack of poll.stacks">
+			<td>
+				<div class="pseudo">
+					{{ stack.pseudo }}
+				</div>
+				<div class="date">
+					<sub> le {{ stack.created_at | date: 'short':'Europe/Paris':'fr_FR' }} </sub>
+				</div>
+			</td>
+			<ng-container *ngFor="let item of poll.choices">
+				<td *ngIf="!stackHasVotesForChoice(stack, item.id)"></td>
+				<td
+					*ngIf="stackHasVotesForChoice(stack, item.id)"
+					class="stack-vote background-{{ getValue(stack, item.id) }}"
+				>
+					{{ getValue(stack, item.id) }}
+				</td>
+			</ng-container>
+		</tr>
 	</tbody>
 </table>

src/app/features/consultation/poll-results-detailed/poll-results-detailed.component.scss

@@ -0,0 +1,22 @@
+.background-yes {
+	background: #c1ffc0;
+}
+
+.background-maybe {
+	background: #ffe4ca;
+}
+
+.background-no {
+	background: #ffd7d7;
+}
+
+table {
+	th,
+	th * {
+		background: #222;
+		color: white;
+	}
+	tr td:not(:first-of-type) {
+		text-align: center;
+	}
+}

src/app/features/consultation/poll-results-detailed/poll-results-detailed.component.ts

@@ -19,4 +19,16 @@ export class PollResultsDetailedComponent implements OnInit {
 	public buildAnswersByChoiceLabelByPseudo(): Map<string, Map<string, Answer>> {
 		return this.pollService.buildAnswersByChoiceLabelByPseudo(this.poll);
 	}
+
+	stackHasVotesForChoice(stack, choice: any) {
+		return undefined !== stack.votes[choice];
+	}
+
+	getValue(stack, choice: any) {
+		if (this.stackHasVotesForChoice(stack, choice)) {
+			console.log('stack.votes[choice.id]', stack.votes[choice]);
+			return stack.votes[choice].value;
+		}
+		return null;
+	}
 }