diff --git a/src/app/config/graph-canevas-options.ts b/src/app/config/graph-canevas-options.ts new file mode 100644 index 00000000..3297b6c4 --- /dev/null +++ b/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 + } + ] + } +}; diff --git a/src/app/config/mock-comments.ts b/src/app/config/mock-comments.ts index 1cbf58e5..293c1f92 100644 --- a/src/app/config/mock-comments.ts +++ b/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", + }, ]; diff --git a/src/app/config/mock-poll3.ts b/src/app/config/mock-poll3.ts index 779b2e69..f0ab2b26 100644 --- a/src/app/config/mock-poll3.ts +++ b/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 } diff --git a/src/app/pages/voting/voting-summary/voting-summary.component.html b/src/app/pages/voting/voting-summary/voting-summary.component.html index f17eacb3..b7eb966c 100644 --- a/src/app/pages/voting/voting-summary/voting-summary.component.html +++ b/src/app/pages/voting/voting-summary/voting-summary.component.html @@ -1 +1,28 @@ -

voting-summary works!

+

Résumé

+
+ + Pour l'instant, le choix ayant reçu le plus grand nombre de votes est : + + {{preferred}} + +
+
+ +
+
+ {{voteStack.pseudo}} +
+
+
+
+ {{v.id}} + {{v.answer}} +
+
+
+
+
diff --git a/src/app/pages/voting/voting-summary/voting-summary.component.scss b/src/app/pages/voting/voting-summary/voting-summary.component.scss index e69de29b..bd79cf58 100644 --- a/src/app/pages/voting/voting-summary/voting-summary.component.scss +++ b/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; +} diff --git a/src/app/pages/voting/voting-summary/voting-summary.component.ts b/src/app/pages/voting/voting-summary/voting-summary.component.ts index 8c2c3f5e..4721a633 100644 --- a/src/app/pages/voting/voting-summary/voting-summary.component.ts +++ b/src/app/pages/voting/voting-summary/voting-summary.component.ts @@ -1,19 +1,64 @@ -import { Component, OnInit } from '@angular/core'; -import {BaseComponent} from "../../base-page/base.component"; +import {Component, Input, OnInit} from '@angular/core'; 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'] + 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) + + } + } diff --git a/src/app/poll-graphic/poll-graphic.component.html b/src/app/poll-graphic/poll-graphic.component.html index 9c1e08e7..ca6c13e6 100644 --- a/src/app/poll-graphic/poll-graphic.component.html +++ b/src/app/poll-graphic/poll-graphic.component.html @@ -6,21 +6,24 @@ (change)="toggleColorblind()" class="input" > - - + - - + + + {{ "pollGraphic.colorblindText" | translate }} - -
- -
+ +
+ work in progress to link data with poll config +
+
+ +
+ -
- Pour l'instant, le choix ayant reçu le plus grand nombre de votes est : - {{preferred}} -
diff --git a/src/app/poll-graphic/poll-graphic.component.scss b/src/app/poll-graphic/poll-graphic.component.scss index 5eb2a3bb..9c981a73 100644 --- a/src/app/poll-graphic/poll-graphic.component.scss +++ b/src/app/poll-graphic/poll-graphic.component.scss @@ -1,4 +1,3 @@ #selectColorblind { direction: rtl; - padding:0; } diff --git a/src/app/poll-graphic/poll-graphic.component.ts b/src/app/poll-graphic/poll-graphic.component.ts index 77360876..d3161f83 100644 --- a/src/app/poll-graphic/poll-graphic.component.ts +++ b/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(toto); - + this.formatDataAnswers(this.graphicConfig); 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: { - 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 - } - ] - } - } + options: graphOptions }); } @@ -84,22 +63,22 @@ export class PollGraphicComponent implements OnInit { } formatDataAnswers(poll) { - if (poll && poll.pollType === "special dates") { - this.initPollCounter(); - poll.answers.forEach(response => { - switch (response.text) { - case "yes": - this.yesList[this.nbPoll - 1]++; - break; - case "maybe": - this.maybeList[this.nbPoll - 1]++; - break; - case "no": - this.noList[this.nbPoll - 1]++; - break; - } - }); - } + // if (poll && poll.pollType === "date") { + this.initPollCounter(); + poll.answers.forEach(response => { + switch (response.text) { + case "yes": + this.yesList[this.nbPoll - 1]++; + break; + case "maybe": + this.maybeList[this.nbPoll - 1]++; + break; + case "no": + this.noList[this.nbPoll - 1]++; + break; + } + }); + // } } initPollCounter() {