⚡ disabled button when nothing is selected, detect counts

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

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
-};
+}

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": [{
+    "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_count": 0
 };

src/app/pages/poll-display/poll-display.component.html

@@ -73,18 +73,22 @@
 
         <framadate-vote-choice
             [choice]="choice"
+            [choices_count]="config.currentPoll.choices_count"
             [pollIsSpecialDate]="config.currentPoll.poll.kind == 'date'"
             [poll]='config.currentPoll' ></framadate-vote-choice >
     </div >
 </div >
 <button
-    class='btn btn--primary btn-block'
+    class='btn  btn-block submit-votestack'
     (click)='config.addVote()'
+    [disabled]='!config.myTempVoteStack'
+    [ngClass]='{"btn--primary" : config.myTempVoteStack } '
     *ngIf='!config.myVoteStack || !config.myVoteStack.id' >
     <i class='fa fa-paper-plane' ></i > Envoyer
+                                        <!--                                        ( {{config.myTempVoteStack}} )-->
 </button >
 <button
-    class='btn btn--primary btn-block'
+    class='btn btn--primary btn-block submit-votestack update'
     (click)='config.updateVote(config.myVoteStack)'
     *ngIf='config.myVoteStack && config.myVoteStack.id' >
     <i class='fa fa-pencil' ></i > Mettre à jour

src/app/pages/poll-display/poll-display.component.scss

@@ -1 +1,7 @@
 @import "../../../assets/scss/variables";
+
+.submit-votestack {
+    position: fixed;
+    bottom: 5px;
+    right: 5px;
+}

src/app/pages/poll-display/poll-display.component.ts

@@ -3,6 +3,8 @@ import {BaseComponent} from "../base-page/base.component";
 import {ConfigService} from "../../services/config.service";
 import {mockComments} from "../../config/mocks/mock-comments";
 import {ActivatedRoute, Router} from "@angular/router";
+import {environment} from "../../../environments/environment";
+import {mockPoll3} from "../../config/mocks/mock-poll3";
 
 @Component({
     selector: 'framadate-poll-display',
@@ -38,6 +40,11 @@ export class PollDisplayComponent extends BaseComponent implements OnInit {
         const id = this.activeRoute.snapshot.params.poll;
         const pollSlug = this.activeRoute.snapshot.params.pollSlug;
 
+        if (!environment.production) {
+            console.log('mockPoll3', mockPoll3)
+            this.config.currentPoll = mockPoll3;
+            return;
+        }
         if (id) {
             this.config.loading = true;
             this.config.pollId = id;
@@ -46,6 +53,7 @@ export class PollDisplayComponent extends BaseComponent implements OnInit {
                 (res: any) => {
                     console.log('res', res);
 
+
                     this.config.currentPoll = res;
                     this.config.loading = false;
                 }, (e) => {

src/app/services/config.service.ts

@@ -6,7 +6,7 @@ import {ConfirmationService, MessageService} from 'primeng/api';
 import {Router} from "@angular/router";
 import {mockMyPolls} from "../config/mocks/mockmypolls";
 import {defaultAnswers, defaultDates, defaultTimeOfDay} from "../config/defaultConfigs";
-import {mockPoll1} from "../config/mocks/mock1";
+import {mockPoll3} from "../config/mocks/mock-poll3";
 
 /**
  * le service transverse à chaque page qui permet de syncroniser la configuration de sondage souhaitée
@@ -29,7 +29,7 @@ export class ConfigService extends PollConfig {
         // fill in mock values if we are not in production environment
         if (!environment.production) {
             console.info(' ######### framadate ######### we are not in production env, filling with mock values');
-            this.currentPoll = mockPoll1;
+            this.currentPoll = mockPoll3;
             this.myPolls = mockMyPolls;
             this.dateList = defaultDates;
             this.timeList = defaultTimeOfDay;
@@ -279,8 +279,8 @@ export class ConfigService extends PollConfig {
     }
 
     updateCurrentPollFromResponse(res: any) {
-        this.currentPoll = res.poll;
+        console.log('update res', res);
-        this.currentPoll.admin_key = res.admin_key;
+        this.currentPoll = res;
         this.pollId = res.poll.id;
         this.urlPublic = this.baseHref + '#/vote/poll/id/' + res.poll.id;
         this.urlSlugPublic = this.baseHref + '#/vote/poll/slug/' + res.poll.id;
@@ -520,6 +520,7 @@ export class ConfigService extends PollConfig {
      * UPDATE
      * /api/v1/poll/{id}/vote
      * @param voteStack
+     * TODO
      */
     updatePoll(voteStack: any) {
         this.http.put(
@@ -540,11 +541,12 @@ export class ConfigService extends PollConfig {
     }
 
     /**
+     *  TODO
      * export all the poll data available to the public as a CSV single file
      */
     exportCSV() {
 
-        // TODO
+
         const rows = [
             ["name1", "city1", "some other info"],
             ["name2", "city2", "more info"]

src/app/ui/vote-choice/vote-choice.component.html

@@ -6,14 +6,14 @@
         (click)=' choice.simpleAnswer = !choice.simpleAnswer' >
         <i class='fa fa-gears' ></i >
     </button >
-    <div
-        class="text title clickable"
-        (click)="setAnswserTo('yes')" >
-        {{choice.text}}
-    </div >
 
     <div class="choicebox__subject" >
-
+        <div
+            class="text title clickable"
+            (click)="setAnswserTo('yes')" >
+            <!--        {{choice.id}} )-->
+            {{choice.text}}
+        </div >
         <!-- TEXT CASE --><!--
         <p class="choicebox__txt">
             Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla nobis nam culpa !
@@ -82,13 +82,19 @@
     </div >
 
     <div class="choicebox__count" >
+
+        <div
+            class='no-votes'
+            *ngIf='! poll.choices_count.counts[choice.id] ' >
+            aucun vote
+        </div >
         <button
             type="button"
             aria-describedby="choicebox-tooltip"
             class="choicebox__votes"
-            *ngIf="choice.votes" >
+            *ngIf="poll.choices_count && choice && poll.choices_count.counts[choice.id]" >
             <div class="choicebox__vote" >
-                {{choice.votes.count.yes}}
+                {{poll.choices_count.counts[choice.id].yes.count}}
                 <img
                     width="20px"
                     height="21px"
@@ -96,7 +102,7 @@
                     alt="" >
             </div >
             <div class="choicebox__vote" >
-                {{choice.votes.count.maybe}}
+                {{poll.choices_count.counts[choice.id].maybe.count}}
                 <img
                     width="22px"
                     height="24px"
@@ -113,33 +119,37 @@
                             height="21px"
                             src="../../../assets/img/votant-sur.svg"
                             alt="" >
-                        {{choice.votes.count.yes}} "Oui"
+                        {{poll.choices_count.counts[choice.id].yes.count}} "Oui"
                     </div >
+                    <!--                    liste des gens qui ont répondu oui-->
                     <ul >
-                        <li >Lorem</li >
+                        <li *ngFor='let pseudo of choices_count.counts[choice.id].yes.people ' >{{pseudo}}</li >
-                        <li >Ipsum dolor</li >
-                        <li >Sit amet</li >
-                        <li >Consectetur</li >
                     </ul >
                 </div >
-                <div class="choicebox__tooltiplist" >
+                <div
+                    class="choicebox__tooltiplist"
+                    *ngIf='!simpleAnswer' >
                     <div class="choicebox__tooltipttl" >
                         <img
                             width="22px"
                             height="24px"
                             src="../../../assets/img/votant-pas-sur.svg"
                             alt="" >
-                        {{choice.votes.count.maybe}} "Peut-être"
+                        {{poll.choices_count.counts[choice.id].maybe.count}} "Peut-être"
                     </div >
                     <ul >
-                        <li >Lorem</li >
+                        <li *ngFor='let pseudo of choices_count.counts[choice.id].maybe.people ' >{{pseudo}}</li >
-                        <li >Ipsum dolor</li >
+                    </ul >
-                        <li >Sit amet</li >
+                </div >
-                        <li >Consectetur</li >
+                <div
-                        <li >Lorem</li >
+                    class="choicebox__tooltiplist"
-                        <li >Ipsum dolor</li >
+                    *ngIf='!simpleAnswer' >
-                        <li >Sit amet</li >
+                    <div class="choicebox__tooltipttl" >
-                        <li >Consectetur</li >
+                        <i class='fa fa-times' ></i >
+                        {{poll.choices_count.counts[choice.id].no.count}} "Non"
+                    </div >
+                    <ul >
+                        <li *ngFor='let pseudo of choices_count.counts[choice.id].no.people ' >{{pseudo}}</li >
                     </ul >
                 </div >
             </div >

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;
-            }
-        }
     }
 }
 

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();
     }