From 0369d934bddc852e71d7a671ec41765b1a80990c Mon Sep 17 00:00:00 2001 From: Baptiste Lemoine Date: Wed, 29 Jan 2020 16:30:07 +0100 Subject: [PATCH] :zap: disabled button when nothing is selected, detect counts --- src/app/config/PollConfig.ts | 1 + src/app/config/mocks/mock-poll3.ts | 226 +++++++++++++++++- src/app/config/mocks/mock1.ts | 55 +++-- .../poll-display/poll-display.component.html | 8 +- .../poll-display/poll-display.component.scss | 6 + .../poll-display/poll-display.component.ts | 8 + src/app/services/config.service.ts | 12 +- .../ui/vote-choice/vote-choice.component.html | 58 +++-- .../ui/vote-choice/vote-choice.component.scss | 26 +- .../ui/vote-choice/vote-choice.component.ts | 16 +- 10 files changed, 324 insertions(+), 92 deletions(-) diff --git a/src/app/config/PollConfig.ts b/src/app/config/PollConfig.ts index a21725ab..8a6c7ffd 100644 --- a/src/app/config/PollConfig.ts +++ b/src/app/config/PollConfig.ts @@ -33,6 +33,7 @@ export class PollConfig { myComment: string = 'wouah trop bien framadate!'; isAdmin: boolean = true; myVoteStack: any; + myTempVoteStack =0; myEmail: string = "tktest@tktest.com"; myPolls: any = [];// list of retrieved polls from the backend api // date specific poll, we have the choice to setup different hours (timeList) for all possible dates (dateList), or use the same hours for all dates diff --git a/src/app/config/mocks/mock-poll3.ts b/src/app/config/mocks/mock-poll3.ts index 4e3dee84..bd17c8e1 100644 --- a/src/app/config/mocks/mock-poll3.ts +++ b/src/app/config/mocks/mock-poll3.ts @@ -1,6 +1,6 @@ export const mockPoll3 = { "message": "your poll config", - "data": { + "poll": { "id": 3, "title": "dessin animé préféré", "customUrl": null, @@ -37,7 +37,7 @@ export const mockPoll3 = { "comments": {}, "defaultExpiracyDaysFromNow": 60 }, - "stacks_count": 10, + "stacks_count": 14, "stacks": [ { "id": 3, @@ -351,9 +351,206 @@ export const mockPoll3 = { "text": "Les mystérieuses cités d'or" } ] + }, + { + "id": 13, + "pseudo": "tk_TEST", + "creation_date": { + "date": "2020-01-23 14:31:07.000000", + "timezone_type": 3, + "timezone": "Europe/Berlin" + }, + "votes": [ + { + "id": 13, + "vote_id": 33, + "value": "yes", + "choice_id": 2, + "text": null + } + ] + }, + { + "id": 14, + "pseudo": "tk_TEST", + "creation_date": { + "date": "2020-01-23 14:33:07.000000", + "timezone_type": 3, + "timezone": "Europe/Berlin" + }, + "votes": [ + { + "id": 14, + "vote_id": 34, + "value": "yes", + "choice_id": 2, + "text": null + } + ] + }, + { + "id": 15, + "pseudo": "tk_TEST", + "creation_date": { + "date": "2020-01-23 14:33:11.000000", + "timezone_type": 3, + "timezone": "Europe/Berlin" + }, + "votes": [ + { + "id": 15, + "vote_id": 35, + "value": "yes", + "choice_id": 2, + "text": null + } + ] + }, + { + "id": 16, + "pseudo": "tk_TEST", + "creation_date": { + "date": "2020-01-23 14:34:11.000000", + "timezone_type": 3, + "timezone": "Europe/Berlin" + }, + "votes": [ + { + "id": 16, + "vote_id": 36, + "value": "no", + "choice_id": 1, + "text": "orange" + }, + { + "id": 16, + "vote_id": 37, + "value": "yes", + "choice_id": 2, + "text": null + } + ] } ], - "choices_count": 7, + "choices_count": { + "counts": { + "7": { + "yes": { + "count": 10, + "people": [ + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST" + ] + }, + "maybe": { + "count": 0, + "people": [] + }, + "no": { + "count": 1, + "people": [ + "voting_people_TEST" + ] + } + }, + "6": { + "yes": { + "count": 1, + "people": [ + "voting_people_TEST" + ] + }, + "maybe": { + "count": 9, + "people": [ + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST" + ] + }, + "no": { + "count": 0, + "people": [] + } + }, + "5": { + "yes": { + "count": 0, + "people": [] + }, + "maybe": { + "count": 0, + "people": [] + }, + "no": { + "count": 8, + "people": [ + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST", + "voting_people_TEST" + ] + } + }, + "2": { + "yes": { + "count": 4, + "people": [ + "tk_TEST", + "tk_TEST", + "tk_TEST", + "tk_TEST" + ] + }, + "maybe": { + "count": 0, + "people": [] + }, + "no": { + "count": 0, + "people": [] + } + }, + "1": { + "yes": { + "count": 0, + "people": [] + }, + "maybe": { + "count": 0, + "people": [] + }, + "no": { + "count": 1, + "people": [ + "tk_TEST" + ] + } + } + }, + "people": { + "voting_people_TEST": "yes", + "tk_TEST": "yes" + } + }, "choices": [ { "id": 5, @@ -362,7 +559,8 @@ export const mockPoll3 = { "timezone_type": 3, "timezone": "Europe/Berlin" }, - "text": "Vic le viking" + "text": "Vic le viking", + "url": null }, { "id": 6, @@ -371,7 +569,8 @@ export const mockPoll3 = { "timezone_type": 3, "timezone": "Europe/Berlin" }, - "text": "Boumbo petite automobile" + "text": "Boumbo petite automobile", + "url": null }, { "id": 7, @@ -380,7 +579,8 @@ export const mockPoll3 = { "timezone_type": 3, "timezone": "Europe/Berlin" }, - "text": "Les mystérieuses cités d'or" + "text": "Les mystérieuses cités d'or", + "url": null }, { "id": 8, @@ -389,7 +589,8 @@ export const mockPoll3 = { "timezone_type": 3, "timezone": "Europe/Berlin" }, - "text": "Les mondes engloutis" + "text": "Les mondes engloutis", + "url": null }, { "id": 9, @@ -398,7 +599,8 @@ export const mockPoll3 = { "timezone_type": 3, "timezone": "Europe/Berlin" }, - "text": "Foot 2 rue" + "text": "Foot 2 rue", + "url": null }, { "id": 10, @@ -407,7 +609,8 @@ export const mockPoll3 = { "timezone_type": 3, "timezone": "Europe/Berlin" }, - "text": "Le chat, la vache, et l'océan" + "text": "Le chat, la vache, et l'océan", + "url": null }, { "id": 11, @@ -416,7 +619,8 @@ export const mockPoll3 = { "timezone_type": 3, "timezone": "Europe/Berlin" }, - "text": "Digimon" + "text": "Digimon", + "url": null } ], "comments": [ @@ -562,4 +766,4 @@ export const mockPoll3 = { } ], "comments_count": 14 -}; +} diff --git a/src/app/config/mocks/mock1.ts b/src/app/config/mocks/mock1.ts index 10786af9..93cc4a2d 100644 --- a/src/app/config/mocks/mock1.ts +++ b/src/app/config/mocks/mock1.ts @@ -1,19 +1,19 @@ export const mockPoll1 = { "message": "your poll config", - "data": { + "poll": { "id": 1, "title": "citron ou orange", "customUrl": null, "description": "votre sorbert préféré", "creationDate": { - "date": "2020-01-22 14:28:19.000000", + "date": "2020-01-20 16:45:48.000000", "timezone_type": 3, - "timezone": "Europe/Paris" + "timezone": "Europe/Berlin" }, "expiracyDate": { - "date": "2020-01-22 14:28:19.000000", + "date": "2020-01-20 16:45:48.000000", "timezone_type": 3, - "timezone": "Europe/Paris" + "timezone": "Europe/Berlin" }, "owner": { "__initializer__": {}, @@ -41,9 +41,9 @@ export const mockPoll1 = { "id": 1, "pseudo": "voting_people_TEST", "creation_date": { - "date": "2020-01-22 14:28:19.000000", + "date": "2020-01-20 16:45:48.000000", "timezone_type": 3, - "timezone": "Europe/Paris" + "timezone": "Europe/Berlin" }, "votes": [ { @@ -66,9 +66,9 @@ export const mockPoll1 = { "id": 2, "pseudo": "voting_people_TEST", "creation_date": { - "date": "2020-01-22 14:28:19.000000", + "date": "2020-01-20 16:45:48.000000", "timezone_type": 3, - "timezone": "Europe/Paris" + "timezone": "Europe/Berlin" }, "votes": [ { @@ -81,14 +81,30 @@ export const mockPoll1 = { ] } ], - "choices_count": 2, + "choices_count": { + "counts": { + "1": { + "yes": 1, + "maybe": 1, + "no": 0 + }, + "2": { + "yes": 1, + "maybe": 0, + "no": 0 + } + }, + "people": { + "voting_people_TEST": "maybe" + } + }, "choices": [ { "id": 1, "date": { - "date": "2020-01-22 14:28:19.000000", + "date": "2020-01-20 16:45:48.000000", "timezone_type": 3, - "timezone": "Europe/Paris" + "timezone": "Europe/Berlin" }, "text": "orange", "url": null @@ -96,23 +112,14 @@ export const mockPoll1 = { { "id": 2, "date": { - "date": "2020-01-22 14:28:19.000000", + "date": "2020-01-20 16:45:48.000000", "timezone_type": 3, - "timezone": "Europe/Paris" + "timezone": "Europe/Berlin" }, "text": "citron", "url": null } ], - "comments": [{ - "id": 4, - "text": "wouah trop bien framadate HOUHOUUUU!", - "pseudo": "tk_TEST", - "date": { - "date": "2020-01-22 16:00:22.000000", - "timezone_type": 3, - "timezone": "Europe/Paris" - } - },], + "comments": [], "comments_count": 0 }; diff --git a/src/app/pages/poll-display/poll-display.component.html b/src/app/pages/poll-display/poll-display.component.html index 61ee6952..58d4a591 100644 --- a/src/app/pages/poll-display/poll-display.component.html +++ b/src/app/pages/poll-display/poll-display.component.html @@ -73,18 +73,22 @@ -
- {{choice.text}} -
- +
+ + {{choice.text}} +
-
+
- {{choice.votes.count.maybe}} "Peut-être" + {{poll.choices_count.counts[choice.id].maybe.count}} "Peut-être"
    -
  • Lorem
    • -
  • Ipsum dolor
    • -
  • Sit amet
    • -
  • Consectetur
    • -
  • Lorem
    • -
  • Ipsum dolor
    • -
  • Sit amet
    • -
  • Consectetur
    • +
  • {{pseudo}}
    • +
+
+
+
+ + {{poll.choices_count.counts[choice.id].no.count}} "Non" +
+
    +
  • {{pseudo}}
diff --git a/src/app/ui/vote-choice/vote-choice.component.scss b/src/app/ui/vote-choice/vote-choice.component.scss index 160a9c17..31c4c73b 100644 --- a/src/app/ui/vote-choice/vote-choice.component.scss +++ b/src/app/ui/vote-choice/vote-choice.component.scss @@ -44,7 +44,6 @@ $breakpoint-responsive: 640px; // à définir } @media (min-width: $breakpoint-responsive) { - display: flex; align-items: center; justify-content: space-between; min-height: auto; @@ -109,24 +108,20 @@ $breakpoint-responsive: 640px; // à définir .choicebox__actions { position: absolute; z-index: 1; - display: flex; + max-width: $btn-wrap-size; top: 50%; right: $box-padding; - flex-flow: row-reverse wrap; - transform: translateY(-50%); @media (min-width: $breakpoint-responsive) { position: static; max-width: none; - flex-flow: row nowrap; transform: none; margin: 0 1.5rem; } } .choicebox__btn { - display: flex; width: $btn-size; height: $btn-size; align-items: center; @@ -136,17 +131,6 @@ $breakpoint-responsive: 640px; // à définir background-color: transparent; border-radius: 50%; cursor: pointer; - //&:focus, - //&:hover, - //&:active { - // - // border-color: #ccc9c9; - // background-color: #f7f7f7; - // - // &--active { - // border-color: #bf83c2 !important; - // } - //} &--maybe { position: relative; @@ -176,7 +160,6 @@ $breakpoint-responsive: 640px; // à définir position: relative; padding-right: $btn-wrap-size; @media (min-width: $breakpoint-responsive) { - flex-shrink: 0; text-align: right; padding-right: 0; } @@ -189,13 +172,6 @@ $breakpoint-responsive: 640px; // à définir background-color: transparent; @media (min-width: $breakpoint-responsive) { padding: 1.5rem; - &:focus, - &:hover, - &:active { - & .choicebox__tooltip { - display: flex; - } - } } } diff --git a/src/app/ui/vote-choice/vote-choice.component.ts b/src/app/ui/vote-choice/vote-choice.component.ts index cc24bfc1..a54656b2 100644 --- a/src/app/ui/vote-choice/vote-choice.component.ts +++ b/src/app/ui/vote-choice/vote-choice.component.ts @@ -1,4 +1,5 @@ import {Component, ElementRef, Input} from '@angular/core'; +import {ConfigService} from "../../services/config.service"; interface VoteChoice { votes?: { @@ -27,11 +28,14 @@ export class VoteChoiceComponent { public showChangeChoicebutton = false; @Input() public choice: any; + @Input() public choices_count: any; + @Input() public choice_id: any; @Input() public poll: any; @Input() public simpleAnswer: boolean = true; @Input() public pollIsSpecialDate: boolean = false; - constructor(private el: ElementRef) { + constructor(private el: ElementRef, + private config: ConfigService) { if (this.poll && this.poll.data && this.poll.data.allowedAnswers) { this.simpleAnswer = this.poll.data.allowedAnswers.length == 1 @@ -43,12 +47,22 @@ export class VoteChoiceComponent { // only toggle yes to no if (this.choice.answer && this.choice.answer === 'yes') { this.choice.answer = 'no'; + this.config.myTempVoteStack--; } else { this.choice.answer = 'yes'; + this.config.myTempVoteStack++; } } else { this.choice.answer = newAnswer; + if (this.choice.answer !== newAnswer) { + if (newAnswer == 'maybe' || newAnswer == 'yes') { + this.config.myTempVoteStack++; + } + } else { + console.info('same answer as before') + } + } this.el.nativeElement.blur(); }