⚡ computations for the result graph

src/app/config/graph-canevas-options.ts

@@ -0,0 +1,24 @@
+export var graphOptions = {
+    legend: {display: false},
+    scales: {
+        xAxes: [
+            {
+                gridLines: {drawBorder: false, display: false},
+                display: false,
+                stacked: true,
+                ticks: {
+                    beginAtZero: true,
+                    maxRotation: 0,
+                    minRotation: 0
+                }
+            }
+        ],
+        yAxes: [
+            {
+                gridLines: {drawBorder: true, display: false},
+                display: true,
+                stacked: true
+            }
+        ]
+    }
+};

src/app/config/mock-comments.ts

@@ -4,5 +4,10 @@ export const mockComments = [
         date: "23 décembre 2019",
         text: "Pokem ipsum dolor sit amet Electric Cottonee Scratch Leech Life Ice Berry Ducklett. Leaf Green Durant Zoroark\n" +
             "        Skitty Rock Luxio Surskit. Glacier Badge",
-    }
+    },
+    {
+        name: "Marylin",
+        date: "5 Janvier 2020",
+        text: "j'ai vu de la lumière o_o",
+    },
 ];

src/app/config/mock-poll3.ts

@@ -1,3 +1,5 @@
+import {mockComments} from "./mock-comments";
+
 export const mockPoll3 = {
     "message": "your poll config",
     "data": {
@@ -35,15 +37,67 @@ export const mockPoll3 = {
         "comments": {},
         "defaultExpiracyDaysFromNow": 60
     },
-    "stacks_count": 2,
+    "stacks_count": 4,
     "stacks": [
         {
             "pseudo": "Wulfila",
-            "votes": {}
+            "votes": [
+                {
+                    "id": 5,
+                    "answer": "yes",
+                },
+                {
+                    "id": 6,
+                    "answer": "maybe",
+                },
+                {
+                    "id": 7,
+                    "answer": "no",
+                },
+            ]
         },
         {
             "pseudo": "Tykayn",
-            "votes": {}
+            "votes": [
+                {
+                    "id": 5,
+                    "answer": "yes",
+                },
+                {
+                    "id": 8,
+                    "answer": "maybe",
+                },
+                {
+                    "id": 9,
+                    "answer": "no",
+                },
+            ]
+        },
+        {
+            "pseudo": "CopyCat",
+            "votes": [
+                {
+                    "id": 5,
+                    "answer": "yes",
+                },
+                {
+                    "id": 8,
+                    "answer": "maybe",
+                },
+                {
+                    "id": 9,
+                    "answer": "no",
+                },
+            ]
+        },
+        {
+            "pseudo": "Marylin",
+            "votes": [
+                {
+                    "id": 5,
+                    "answer": "yes",
+                }
+            ]
         }
     ],
     "choices_count": 7,
@@ -182,5 +236,5 @@ export const mockPoll3 = {
             "answer": null
         }
     ],
-    "comments": []
+    "comments": mockComments
 }

src/app/pages/voting/voting-summary/voting-summary.component.html

@@ -1 +1,28 @@
-<p>voting-summary works!</p>
+<h2 >Résumé</h2 >
+<div class="preferred" >
+    <i class='fa fa-star' ></i >
+    Pour l'instant, le choix ayant reçu le plus grand nombre de votes est :
+    <span class='preferred-result' >
+    {{preferred}}
+    </span >
+</div >
+<div
+    class='line vote-stack'
+    *ngFor='let voteStack of pollconfig.stacks' >
+
+    <div class='vs' >
+        <div class='person' >
+            {{voteStack.pseudo}}
+        </div >
+        <div class='votes-of-the-person' >
+            <div
+                class='vote'
+                *ngFor='let v of voteStack.votes' >
+                <div class='id' >
+                    {{v.id}}
+                    {{v.answer}}
+                </div >
+            </div >
+        </div >
+    </div >
+</div >

src/app/pages/voting/voting-summary/voting-summary.component.scss

@@ -0,0 +1,8 @@
+.person {
+    font-weight: 700;
+}
+
+.preferred-result {
+    font-weight: 700;
+    font-size: 1.5em;
+}

src/app/pages/voting/voting-summary/voting-summary.component.ts

@@ -1,19 +1,64 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
-import {BaseComponent} from "../../base-page/base.component";
 import {ConfigService} from "../../../services/config.service";
+import {mockPoll3} from "../../../config/mock-poll3";
 
 @Component({
     selector: 'framadate-voting-summary',
     templateUrl: './voting-summary.component.html',
     styleUrls: ['./voting-summary.component.scss']
 })
-export class VotingSummaryComponent extends BaseComponent implements OnInit {
+export class VotingSummaryComponent implements OnInit {
+
+    private preferred: string = 'rien';
+    private counters: any = {};
+
+    @Input() private pollconfig = mockPoll3;
+
+    constructor(private config: ConfigService) {
 
-    constructor(public config: ConfigService) {
-        super(config);
     }
 
     ngOnInit() {
+        this.computePreferred();
     }
 
+    /**
+     * find the most "yes"
+     */
+    computePreferred() {
+
+        let maximumYesCount = 0;
+        let choice_id_max = 0;
+        let winners_id = [];
+        this.pollconfig.stacks.map(stack => {
+
+            stack.votes.map(vote => {
+                let choice_id = vote.id;
+                let answer = vote.answer;
+                if (!this.counters["choice_" + choice_id]) {
+                    this.counters["choice_" + choice_id] = {
+                        yes: 0,
+                        maybe: 0,
+                        no: 0,
+                    }
+                }
+                this.counters["choice_" + choice_id][answer]++;
+                if (this.counters["choice_" + choice_id]['yes'] > maximumYesCount) {
+                    choice_id_max = choice_id;
+                }
+            })
+
+
+            // find the favourite
+        })
+        console.log('this.counters', this.counters);
+        let choiceTitleFound = this.pollconfig.choices.find(elem => {
+            return elem.id === parseInt(choice_id_max)
+        })
+        this.preferred = choiceTitleFound.name;
+        console.log('choiceTitleFound', choiceTitleFound)
+
+    }
+
+
 }

src/app/poll-graphic/poll-graphic.component.html

@@ -6,21 +6,24 @@
     (change)="toggleColorblind()"
     class="input"
 >
-    <option value="true">
+    <option value="true" >
         {{ "pollGraphic.choiceColorblind" | translate }}
-    </option>
+    </option >
-    <option value="false">
+    <option value="false" >
         {{ "pollGraphic.choiceNotColorblind" | translate }}
-    </option>
+    </option >
-</select>
+</select >
-<span class="colorblind">
+<span class="colorblind" >
 {{ "pollGraphic.colorblindText" | translate }}
-</span>
+</span >
-<div>
+<div class='well' >
-    <canvas id="graph" width="100" height="50"></canvas>
+    work in progress to link data with poll config
-</div>
+</div >
+<div >
+    <canvas
+        id="graph"
+        width="100%"
+        height="15em" ></canvas >
+</div >
+
 
-<div class="preferred">
-    Pour l'instant, le choix ayant reçu le plus grand nombre de votes est :
-    {{preferred}}
-</div>

src/app/poll-graphic/poll-graphic.component.scss

@@ -1,4 +1,3 @@
 #selectColorblind {
     direction: rtl;
-    padding:0;
 }

src/app/poll-graphic/poll-graphic.component.ts

@@ -2,6 +2,9 @@ import {Component, Inject, OnInit} from "@angular/core";
 import {Chart} from "chart.js";
 import {DOCUMENT} from '@angular/common';
 import {mockGraphConfig} from "../config/mock-graph";
+import {graphOptions} from "../config/graph-canevas-options";
+import {ConfigService} from "../services/config.service";
+import {mockPoll3} from "../config/mock-poll3";
 
 @Component({
     selector: "framadate-poll-graphic",
@@ -10,7 +13,8 @@ import {mockGraphConfig} from "../config/mock-graph";
 })
 export class PollGraphicComponent implements OnInit {
     isColorblind: boolean = false;
-    pollData: any;
+    pollConfigRetrieved: any = mockPoll3;
+    graphicConfig: any = mockGraphConfig;
     preferred: any = "rien";
     yesList: number[] = [];
     maybeList: number[] = [];
@@ -18,19 +22,17 @@ export class PollGraphicComponent implements OnInit {
     nbPoll: number = 0;
     dateList: string[] = [];
 
-    constructor(@Inject(DOCUMENT) private document: any,) {
+    constructor(@Inject(DOCUMENT) private document: any,
+                private config: ConfigService) {
     }
 
     ngOnInit() {
-        var toto = mockGraphConfig;
+        this.formatDataAnswers(this.graphicConfig);
-
-        this.formatDataAnswers(toto);
-
         this.isColorblind = false;
-        this.pollData = new Chart(this.document.getElementById("graph"), {
+        this.pollConfigRetrieved = new Chart(this.document.getElementById("graph"), {
             type: "horizontalBar",
             data: {
-                labels: ["jeudi"],
+                labels: this.pollConfigRetrieved.choices.map(choice => choice.name),
                 datasets: [
                     {
                         type: "horizontalBar",
@@ -52,30 +54,7 @@ export class PollGraphicComponent implements OnInit {
                     }
                 ]
             },
-            options: {
+            options: graphOptions
-                legend: {display: false},
-                scales: {
-                    xAxes: [
-                        {
-                            gridLines: {drawBorder: false, display: false},
-                            display: false,
-                            stacked: true,
-                            ticks: {
-                                beginAtZero: true,
-                                maxRotation: 0,
-                                minRotation: 0
-                            }
-                        }
-                    ],
-                    yAxes: [
-                        {
-                            gridLines: {drawBorder: true, display: false},
-                            display: true,
-                            stacked: true
-                        }
-                    ]
-                }
-            }
         });
     }
 
@@ -84,7 +63,7 @@ export class PollGraphicComponent implements OnInit {
     }
 
     formatDataAnswers(poll) {
-        if (poll && poll.pollType === "special dates") {
+        // if (poll && poll.pollType === "date") {
         this.initPollCounter();
         poll.answers.forEach(response => {
             switch (response.text) {
@@ -99,7 +78,7 @@ export class PollGraphicComponent implements OnInit {
                     break;
             }
         });
-        }
+        // }
     }
 
     initPollCounter() {