:fix: load vote of someone else ok

src/app/config/PollConfig.ts

@@ -52,11 +52,12 @@ export class PollConfig {
     customUrl = ''; // custom slug in the url, must be unique
     customUrlIsUnique = null; // given by the backend
     urlSlugPublic = null;
-    urlPublic = environment.baseHref + '/#/poll/id/3';
+    urlPublic = environment.baseHref + '/#/poll/id/4';
     urlAdmin = environment.baseHref + '/#/admin/d65es45fd45sdf45sd345f312sdf31sgfd345';
-    adminKey = '';
+    adminKey = ''; // key to change config of the poll
+    owner_modifier_token = ''; // key to change a vote stack
     canModifyAnswers = 1;// everybody, self, nobody (= just admin)
-    whoModifiesAnswers = "self";// everybody, self, nobody (= just admin)
+    whoModifiesAnswers = "everybody";// everybody, self, nobody (= just admin)
     whoCanChangeAnswers = 'everybody';// everybody, self, nobody (= just admin)
     dateList: any = defaultDates; // sets of days as strings, config to set identical time for days in a special days poll
     timeList: any = defaultTimeOfDay; // ranges of time expressed as strings

src/app/config/mocks/mock-success-vote.ts

@@ -1,17 +1,17 @@
 export const mockSuccessVote = {
     "message": "you created a vote stack from an existing owner : tktest@tktest.com",
     "poll": {
-        "id": 3,
+        "id": 4,
-        "title": "c'est pour aujourdhui ou pour demain",
+        "title": "dessin animé préféré",
         "customUrl": null,
-        "description": "Vous avez le choix dans la date",
+        "description": "choisissez votre animé préféré",
         "creationDate": {
-            "date": "2020-01-30 12:25:13.000000",
+            "date": "2020-02-04 12:35:37.000000",
             "timezone_type": 3,
             "timezone": "Europe/Berlin"
         },
         "expiracyDate": {
-            "date": "2020-01-30 12:25:13.000000",
+            "date": "2020-02-04 12:35:37.000000",
             "timezone_type": 3,
             "timezone": "Europe/Berlin"
         },
@@ -22,7 +22,7 @@ export const mockSuccessVote = {
             "pseudo": "tk_TEST",
             "email": "tktest@tktest.com"
         },
-        "kind": "date",
+        "kind": "text",
         "allowedAnswers": [
             "yes"
         ],
@@ -39,122 +39,536 @@ export const mockSuccessVote = {
     },
     "vote_stack": {
         "id": 10,
+        "modifier_token": "V46C6b58c456B39kTI19KSfp1y8Zz7Wyg500xMdjNB823st221Gb509VX1AOsnhV93fhol1f8P30OblKFoI76u54T94rH92x5c95TdW1W2eH0hb55q8",
         "pseudo": "tk_TEST",
         "creation_date": {
-            "date": "2020-02-03 15:37:29.609059",
+            "date": "2020-02-04 12:36:07.530846",
             "timezone_type": 3,
             "timezone": "Europe/Berlin"
         },
         "votes": {
-            "5": {
-                "id": 10,
-                "vote_id": 19,
-                "value": "yes",
-                "choice_id": 5,
-                "text": "2020-01-30 12:25:13"
-            },
-            "6": {
-                "id": 10,
-                "vote_id": 20,
-                "value": "yes",
-                "choice_id": 6,
-                "text": "2020-01-30 12:25:13"
-            },
-            "7": {
-                "id": 10,
-                "vote_id": 21,
-                "value": "yes",
-                "choice_id": 7,
-                "text": "2020-01-30 12:25:13"
-            },
             "8": {
-                "id": 10,
+                "id": 22,
-                "vote_id": 22,
                 "value": "yes",
                 "choice_id": 8,
-                "text": "Vic le viking"
+                "text": "Vic le viking",
+                "stack_id": 10
+            },
+            "9": {
+                "choice_id": 9
+            },
+            "10": {
+                "choice_id": 10
+            },
+            "11": {
+                "choice_id": 11
+            },
+            "12": {
+                "choice_id": 12
+            },
+            "13": {
+                "choice_id": 13
+            },
+            "14": {
+                "choice_id": 14
+            },
+            "5": {
+                "id": 19,
+                "value": "yes",
+                "choice_id": 5,
+                "text": "2020-02-04 12:35:37",
+                "stack_id": 10
+            },
+            "6": {
+                "id": 20,
+                "value": "yes",
+                "choice_id": 6,
+                "text": "2020-02-04 12:35:37",
+                "stack_id": 10
+            },
+            "7": {
+                "id": 21,
+                "value": "yes",
+                "choice_id": 7,
+                "text": "2020-02-04 12:35:37",
+                "stack_id": 10
             }
         }
     },
     "stacks": [
         {
-            "id": 10,
+            "id": 3,
-            "pseudo": "tk_TEST",
+            "modifier_token": "5e39570956e5d",
+            "pseudo": "voting_people_TEST",
             "creation_date": {
-                "date": "2020-02-03 15:37:29.609059",
+                "date": "2020-02-04 12:35:37.000000",
                 "timezone_type": 3,
                 "timezone": "Europe/Berlin"
             },
             "votes": {
-                "5": {
-                    "id": 10,
-                    "vote_id": 19,
-                    "value": "yes",
-                    "choice_id": 5,
-                    "text": "2020-01-30 12:25:13"
-                },
-                "6": {
-                    "id": 10,
-                    "vote_id": 20,
-                    "value": "yes",
-                    "choice_id": 6,
-                    "text": "2020-01-30 12:25:13"
-                },
-                "7": {
-                    "id": 10,
-                    "vote_id": 21,
-                    "value": "yes",
-                    "choice_id": 7,
-                    "text": "2020-01-30 12:25:13"
-                },
                 "8": {
-                    "id": 10,
+                    "choice_id": 8
-                    "vote_id": 22,
+                },
+                "9": {
+                    "id": 5,
+                    "value": "maybe",
+                    "choice_id": 9,
+                    "text": "Boumbo petite automobile",
+                    "stack_id": 3
+                },
+                "10": {
+                    "id": 4,
+                    "value": "yes",
+                    "choice_id": 10,
+                    "text": "Les mystérieuses cités d'or",
+                    "stack_id": 3
+                },
+                "11": {
+                    "choice_id": 11
+                },
+                "12": {
+                    "choice_id": 12
+                },
+                "13": {
+                    "choice_id": 13
+                },
+                "14": {
+                    "choice_id": 14
+                }
+            }
+        },
+        {
+            "id": 4,
+            "modifier_token": "5e39570956e5d",
+            "pseudo": "voting_people_TEST",
+            "creation_date": {
+                "date": "2020-02-04 12:35:37.000000",
+                "timezone_type": 3,
+                "timezone": "Europe/Berlin"
+            },
+            "votes": {
+                "8": {
+                    "choice_id": 8
+                },
+                "9": {
+                    "id": 6,
+                    "value": "yes",
+                    "choice_id": 9,
+                    "text": "Boumbo petite automobile",
+                    "stack_id": 4
+                },
+                "10": {
+                    "id": 8,
+                    "value": "no",
+                    "choice_id": 10,
+                    "text": "Les mystérieuses cités d'or",
+                    "stack_id": 4
+                },
+                "11": {
+                    "choice_id": 11
+                },
+                "12": {
+                    "choice_id": 12
+                },
+                "13": {
+                    "choice_id": 13
+                },
+                "14": {
+                    "choice_id": 14
+                }
+            }
+        },
+        {
+            "id": 7,
+            "modifier_token": "5e3957095ca23",
+            "pseudo": "Nikolas Edison",
+            "creation_date": {
+                "date": "2020-02-04 12:35:37.000000",
+                "timezone_type": 3,
+                "timezone": "Europe/Berlin"
+            },
+            "votes": {
+                "8": {
+                    "choice_id": 8
+                },
+                "9": {
+                    "choice_id": 9
+                },
+                "10": {
+                    "id": 13,
+                    "value": "maybe",
+                    "choice_id": 10,
+                    "text": "Les mystérieuses cités d'or",
+                    "stack_id": 7
+                },
+                "11": {
+                    "choice_id": 11
+                },
+                "12": {
+                    "id": 14,
+                    "value": "maybe",
+                    "choice_id": 12,
+                    "text": "Foot 2 rue",
+                    "stack_id": 7
+                },
+                "13": {
+                    "choice_id": 13
+                },
+                "14": {
+                    "choice_id": 14
+                }
+            }
+        },
+        {
+            "id": 8,
+            "modifier_token": "5e3957095ca2d",
+            "pseudo": "Wulfila",
+            "creation_date": {
+                "date": "2020-02-04 12:35:37.000000",
+                "timezone_type": 3,
+                "timezone": "Europe/Berlin"
+            },
+            "votes": {
+                "8": {
+                    "choice_id": 8
+                },
+                "9": {
+                    "choice_id": 9
+                },
+                "10": {
+                    "choice_id": 10
+                },
+                "11": {
+                    "id": 15,
+                    "value": "maybe",
+                    "choice_id": 11,
+                    "text": "Les mondes engloutis",
+                    "stack_id": 8
+                },
+                "12": {
+                    "choice_id": 12
+                },
+                "13": {
+                    "id": 16,
+                    "value": "yes",
+                    "choice_id": 13,
+                    "text": "Le chat, la vache, et l'océan",
+                    "stack_id": 8
+                },
+                "14": {
+                    "choice_id": 14
+                }
+            }
+        },
+        {
+            "id": 9,
+            "modifier_token": "5e3957095ca34",
+            "pseudo": "Billie Jean",
+            "creation_date": {
+                "date": "2020-02-04 12:35:37.000000",
+                "timezone_type": 3,
+                "timezone": "Europe/Berlin"
+            },
+            "votes": {
+                "8": {
+                    "choice_id": 8
+                },
+                "9": {
+                    "id": 17,
+                    "value": "yes",
+                    "choice_id": 9,
+                    "text": "Boumbo petite automobile",
+                    "stack_id": 9
+                },
+                "10": {
+                    "choice_id": 10
+                },
+                "11": {
+                    "id": 18,
+                    "value": "yes",
+                    "choice_id": 11,
+                    "text": "Les mondes engloutis",
+                    "stack_id": 9
+                },
+                "12": {
+                    "choice_id": 12
+                },
+                "13": {
+                    "choice_id": 13
+                },
+                "14": {
+                    "choice_id": 14
+                }
+            }
+        },
+        {
+            "id": 10,
+            "modifier_token": "V46C6b58c456B39kTI19KSfp1y8Zz7Wyg500xMdjNB823st221Gb509VX1AOsnhV93fhol1f8P30OblKFoI76u54T94rH92x5c95TdW1W2eH0hb55q8",
+            "pseudo": "tk_TEST",
+            "creation_date": {
+                "date": "2020-02-04 12:36:07.530846",
+                "timezone_type": 3,
+                "timezone": "Europe/Berlin"
+            },
+            "votes": {
+                "8": {
+                    "id": 22,
                     "value": "yes",
                     "choice_id": 8,
-                    "text": "Vic le viking"
+                    "text": "Vic le viking",
+                    "stack_id": 10
+                },
+                "9": {
+                    "choice_id": 9
+                },
+                "10": {
+                    "choice_id": 10
+                },
+                "11": {
+                    "choice_id": 11
+                },
+                "12": {
+                    "choice_id": 12
+                },
+                "13": {
+                    "choice_id": 13
+                },
+                "14": {
+                    "choice_id": 14
+                },
+                "5": {
+                    "id": 19,
+                    "value": "yes",
+                    "choice_id": 5,
+                    "text": "2020-02-04 12:35:37",
+                    "stack_id": 10
+                },
+                "6": {
+                    "id": 20,
+                    "value": "yes",
+                    "choice_id": 6,
+                    "text": "2020-02-04 12:35:37",
+                    "stack_id": 10
+                },
+                "7": {
+                    "id": 21,
+                    "value": "yes",
+                    "choice_id": 7,
+                    "text": "2020-02-04 12:35:37",
+                    "stack_id": 10
                 }
             }
         }
     ],
-    "comments": [],
+    "comments": [
+        {
+            "id": 3,
+            "text": "allez boumbo!",
+            "pseudo": "tk_TEST_commentateur",
+            "date": {
+                "date": "2020-02-04 12:35:37.000000",
+                "timezone_type": 3,
+                "timezone": "Europe/Berlin"
+            }
+        },
+        {
+            "id": 4,
+            "text": "je suis pour la team rocket de digimon",
+            "pseudo": "tk_TEST",
+            "date": {
+                "date": "2020-02-04 12:35:37.000000",
+                "timezone_type": 3,
+                "timezone": "Europe/Berlin"
+            }
+        }
+    ],
     "choices": [
         {
-            "id": 5,
+            "id": 8,
             "date": {
-                "date": "2020-01-30 12:25:13.000000",
+                "date": "2020-02-04 12:35:37.000000",
                 "timezone_type": 3,
                 "timezone": "Europe/Berlin"
             },
-            "text": "2020-01-30 12:25:13",
+            "text": "Vic le viking",
             "url": null
         },
         {
-            "id": 6,
+            "id": 9,
             "date": {
-                "date": "2020-01-30 12:25:13.000000",
+                "date": "2020-02-04 12:35:37.000000",
                 "timezone_type": 3,
                 "timezone": "Europe/Berlin"
             },
-            "text": "2020-01-30 12:25:13",
+            "text": "Boumbo petite automobile",
             "url": null
         },
         {
-            "id": 7,
+            "id": 10,
             "date": {
-                "date": "2020-01-30 12:25:13.000000",
+                "date": "2020-02-04 12:35:37.000000",
                 "timezone_type": 3,
                 "timezone": "Europe/Berlin"
             },
-            "text": "2020-01-30 12:25:13",
+            "text": "Les mystérieuses cités d'or",
+            "url": null
+        },
+        {
+            "id": 11,
+            "date": {
+                "date": "2020-02-04 12:35:37.000000",
+                "timezone_type": 3,
+                "timezone": "Europe/Berlin"
+            },
+            "text": "Les mondes engloutis",
+            "url": null
+        },
+        {
+            "id": 12,
+            "date": {
+                "date": "2020-02-04 12:35:37.000000",
+                "timezone_type": 3,
+                "timezone": "Europe/Berlin"
+            },
+            "text": "Foot 2 rue",
+            "url": null
+        },
+        {
+            "id": 13,
+            "date": {
+                "date": "2020-02-04 12:35:37.000000",
+                "timezone_type": 3,
+                "timezone": "Europe/Berlin"
+            },
+            "text": "Le chat, la vache, et l'océan",
+            "url": null
+        },
+        {
+            "id": 14,
+            "date": {
+                "date": "2020-02-04 12:35:37.000000",
+                "timezone_type": 3,
+                "timezone": "Europe/Berlin"
+            },
+            "text": "Digimon",
             "url": null
         }
     ],
     "choices_count": {
         "counts": {
+            "10": {
+                "choice_id": 10,
+                "choice_text": "Les mystérieuses cités d'or",
+                "id": 4,
+                "score": 2.5,
+                "yes": {
+                    "count": 2,
+                    "people": [
+                        "voting_people_TEST",
+                        "voting_people_TEST"
+                    ]
+                },
+                "maybe": {
+                    "count": 1,
+                    "people": [
+                        "Nikolas Edison"
+                    ]
+                },
+                "no": {
+                    "count": 1,
+                    "people": [
+                        "voting_people_TEST"
+                    ]
+                }
+            },
+            "9": {
+                "choice_id": 9,
+                "choice_text": "Boumbo petite automobile",
+                "id": 5,
+                "score": 2.5,
+                "yes": {
+                    "count": 2,
+                    "people": [
+                        "voting_people_TEST",
+                        "Billie Jean"
+                    ]
+                },
+                "maybe": {
+                    "count": 1,
+                    "people": [
+                        "voting_people_TEST"
+                    ]
+                },
+                "no": {
+                    "count": 0,
+                    "people": []
+                }
+            },
+            "12": {
+                "choice_id": 12,
+                "choice_text": "Foot 2 rue",
+                "id": 14,
+                "score": 0.5,
+                "yes": {
+                    "count": 0,
+                    "people": []
+                },
+                "maybe": {
+                    "count": 1,
+                    "people": [
+                        "Nikolas Edison"
+                    ]
+                },
+                "no": {
+                    "count": 0,
+                    "people": []
+                }
+            },
+            "11": {
+                "choice_id": 11,
+                "choice_text": "Les mondes engloutis",
+                "id": 15,
+                "score": 1.5,
+                "yes": {
+                    "count": 1,
+                    "people": [
+                        "Billie Jean"
+                    ]
+                },
+                "maybe": {
+                    "count": 1,
+                    "people": [
+                        "Wulfila"
+                    ]
+                },
+                "no": {
+                    "count": 0,
+                    "people": []
+                }
+            },
+            "13": {
+                "choice_id": 13,
+                "choice_text": "Le chat, la vache, et l'océan",
+                "id": 16,
+                "score": 1,
+                "yes": {
+                    "count": 1,
+                    "people": [
+                        "Wulfila"
+                    ]
+                },
+                "maybe": {
+                    "count": 0,
+                    "people": []
+                },
+                "no": {
+                    "count": 0,
+                    "people": []
+                }
+            },
             "5": {
                 "choice_id": 5,
-                "choice_text": "2020-01-30 12:25:13",
+                "choice_text": "2020-02-04 12:35:37",
                 "id": 19,
                 "score": 1,
                 "yes": {
@@ -174,7 +588,7 @@ export const mockSuccessVote = {
             },
             "6": {
                 "choice_id": 6,
-                "choice_text": "2020-01-30 12:25:13",
+                "choice_text": "2020-02-04 12:35:37",
                 "id": 20,
                 "score": 1,
                 "yes": {
@@ -194,7 +608,7 @@ export const mockSuccessVote = {
             },
             "7": {
                 "choice_id": 7,
-                "choice_text": "2020-01-30 12:25:13",
+                "choice_text": "2020-02-04 12:35:37",
                 "id": 21,
                 "score": 1,
                 "yes": {
@@ -233,11 +647,18 @@ export const mockSuccessVote = {
                 }
             }
         },
-        "maxScore": 1
+        "maxScore": 2.5
     },
-    "vote_count": 1,
+    "vote_count": 6,
-    "owner_modifier_token": "akcrfpaa7YfaeJ859632HdJe05-3a8FHOfVrC45Xdfg80C36yYD460KZIqx1146e99z23e86oK7caw1VCED47zR69Nc8cl9SXYv6P0NR34a19cgr1sfD",
+    "owner": {
-    "admin_key": "b2o0355a6YCdy5r72u4aWFNw55a18d766f4OnV5448CV8ex3j3p9mRdlRPPje8Fbj6FC61df7tje7dQK6f8G0HKE1d50d4Xf4p53af81vc6P2Codg0s",
+        "__initializer__": null,
+        "__cloner__": null,
+        "__isInitialized__": true,
+        "pseudo": "tk_TEST",
+        "email": "tktest@tktest.com"
+    },
+    "owner_modifier_token": "V46C6b58c456B39kTI19KSfp1y8Zz7Wyg500xMdjNB823st221Gb509VX1AOsnhV93fhol1f8P30OblKFoI76u54T94rH92x5c95TdW1W2eH0hb55q8",
+    "admin_key": "9uE27daM8dG1P9z74B89z299W0JF0ne15eER37g2v3d86mk123318v516UUbey4z3C87Wbo65V3c7cHsBTELvhl8b82d61WBMR2U66USNc7idS8810f",
     "json_you_sent": {
         "pseudo": "mon pseudo",
         "email": "tktest@tktest.com",

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

@@ -94,7 +94,7 @@
         *ngFor='let voteStack of config.currentPoll.stacks'
     >
         <td >
-
+            <!--            // TODO show modify if this is our own vote-->
             <button
                 (click)='config.loadVoteStack(voteStack)'
                 *ngIf="config.currentPoll.poll.modificationPolicy === 'everybody'"
@@ -102,6 +102,7 @@
             >
                 <i class='fa fa-pencil' ></i >
             </button >
+
             {{voteStack.pseudo}}
         </td >
         <td *ngFor='let v of getKeys(voteStack.votes)' >

src/app/services/config.service.ts

@@ -283,11 +283,15 @@ export class ConfigService extends PollConfig {
         console.log('update res', res);
         this.currentPoll = res;
         this.pollId = res.poll.id;
+        this.owner_modifier_token = res.owner_modifier_token;
         this.urlPublic = this.baseHref + '#/vote/poll/id/' + res.poll.id;
         this.urlSlugPublic = this.baseHref + '#/vote/poll/slug/' + res.poll.id;
         if (res.poll.customUrl) {
             this.urlSlugPublic = this.baseHref + '#/vote/poll/id/' + res.poll.customUrl;
         }
+        if (res.voteStack) {
+            this.loadVoteStack(res.voteStack);
+        }
         this.adminKey = res.admin_key;
         this.urlAdmin = this.baseHref + '#/admin/' + res.admin_key;
     }
@@ -300,17 +304,22 @@ export class ConfigService extends PollConfig {
 
         // load the pseudo and email
         this.myName = voteStack.pseudo;
-        this.myEmail = voteStack.pseudo;
+        this.myEmail = voteStack.email;
         this.voteStackId = voteStack.id;
         this.myVoteStack = voteStack;
-        let votesId = Object.keys(voteStack.votes);
+        let keys = Object.keys(voteStack.votes)
-        votesId.map((id) => {
+        console.log('voteStack', voteStack);
+        keys.forEach((id: any) => {
             let voteItem = voteStack.votes[id];
 
+            /**
+             * the display of the poll uses the choices data, so we update the choices answers of the current poll to reflect the vote stack we have taken
+             */
             if (voteItem.choice_id && voteItem.value) {
                 let foundChoiceToModify = this.currentPoll.choices.find(choicesItem => {
                     return voteItem.choice_id == choicesItem.id
                 });
+                console.log('foundChoiceToModify', foundChoiceToModify)
                 if (foundChoiceToModify) {
                     foundChoiceToModify.answer = voteItem.value;
                 }
@@ -420,8 +429,8 @@ export class ConfigService extends PollConfig {
         } else {
             voteStack = this.myVoteStack;
         }
-        this.http.put(
+        this.http.patch(
-            `${this.baseHref}/vote-stack/${voteStack.id}/token/${voteStack.modifierToken}`,
+            `${this.baseHref}/vote-stack/${voteStack.id}/token/${this.owner_modifier_token}`,
             voteStack,
             this.makeHeaders())
             .subscribe((res: any) => {

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

@@ -8,42 +8,46 @@
     </button >
 
     <div class="choicebox__subject" >
-        <div
+        <div class='columns' >
-            class="text title clickable"
+            <div class='column' >
-            (click)="setAnswserTo('yes')" >
+                <div
-            <!--        {{choice.id}} )-->
+                    class="text title clickable"
-            {{choice.text}}
+                    (click)="setAnswserTo('yes')" >
-        </div >
+                    {{choice.text}}
-        <!-- TEXT CASE --><!--
+                </div > <!-- TEXT CASE --><!--
         <p class="choicebox__txt">
             Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla nobis nam culpa !
         </p>
         --><!-- TEXT CASE -->
 
-        <!-- IMG CASE --><!--
+                        <!-- IMG CASE -->
-        <img class="choicebox__img" src="https://picsum.photos/200" alt="">
+                <img
-        --><!-- IMG CASE -->
+                    *ngIf='choice.url'
+                    class="choicebox__img"
+                    [src]="choice.url"
+                    alt="{{choice.url}}"
+                >
+                        <!-- IMG CASE -->
 
-        <!-- DATE CASE  -->
+                        <!-- DATE CASE  -->
-        <div
+                <div
-            class="dates"
+                    class="dates"
-            *ngIf="pollIsSpecialDate" >
+                    *ngIf="pollIsSpecialDate" >
-            <div class="choicebox__date" >
+                    <div class="choicebox__date" >
-                {{choice.date.date | date:'EEE'}} <span
+                        {{choice.date.date | date:'EEE'}} <span
-                class="choicebox__day" >{{choice.date.date | date:'dd'}}</span > {{choice.date.date | date:'LLL'}}
+                        class="choicebox__day" >{{choice.date.date | date:'dd'}}</span > {{choice.date.date | date:'LLL'}}
+                    </div >
+                    <div class="choicebox__hour" >
+                        {{choice.date.date | date:'H:m'}}
+                    </div >
+                </div >
+                        <!-- DATE CASE -->
             </div >
-            <div class="choicebox__hour" >
+            <div class='column' >
-                {{choice.date.date | date:'H:m'}}
+                <div class="choicebox__actions" >
-            </div >
+                    <!-- show only the yes check if the config is set to simpleAnswer -->
-        </div >
+                    <!-- add .choicebox__btn--active to selected <button> -->
-        <!-- DATE CASE -->
+                    <span class="simple-answer" >
-
-    </div >
-
-    <div class="choicebox__actions" >
-        <!-- show only the yes check if the config is set to simpleAnswer -->
-        <!-- add .choicebox__btn--active to selected <button> -->
-        <span class="simple-answer" >
 
         <button
             class="choicebox__btn choicebox__btn--yes"
@@ -55,9 +59,9 @@
                 alt="" >
         </button >
         </span >
-        <span
+                    <span
-            class="complex-answers"
+                        class="complex-answers"
-            *ngIf="!simpleAnswer" >
+                        *ngIf="!simpleAnswer" >
             <button
                 class="choicebox__btn choicebox__btn--maybe"
                 type="button"
@@ -79,83 +83,89 @@
         </button >
         </span >
 
+                </div >
+            </div >
+            <div class='column' >
+                <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="poll.choices_count && choice && poll.choices_count.counts[choice.id]" >
+                        <div class="choicebox__vote" >
+                            {{poll.choices_count.counts[choice.id].yes.count}}
+                            <img
+                                width="20px"
+                                height="21px"
+                                src="../../../assets/img/votant-sur.svg"
+                                alt="" >
+                        </div >
+                        <div class="choicebox__vote" >
+                            {{poll.choices_count.counts[choice.id].maybe.count}}
+                            <img
+                                width="22px"
+                                height="24px"
+                                src="../../../assets/img/votant-pas-sur.svg"
+                                alt="" >
+                        </div >
+                        <div
+                            class="choicebox__tooltip"
+                            id="choicebox-tooltip" >
+                            <div class="choicebox__tooltiplist" >
+                                <div class="choicebox__tooltipttl" >
+                                    <img
+                                        width="20px"
+                                        height="21px"
+                                        src="../../../assets/img/votant-sur.svg"
+                                        alt="" >
+                                    {{poll.choices_count.counts[choice.id].yes.count}} "Oui"
+                                </div >
+                                <!--                    liste des gens qui ont répondu oui-->
+                                <ul >
+                                    <li *ngFor='let pseudo of choices_count.counts[choice.id].yes.people ' >{{pseudo}}</li >
+                                </ul >
+                            </div >
+                            <div
+                                class="choicebox__tooltiplist"
+                                *ngIf='!simpleAnswer' >
+                                <div class="choicebox__tooltipttl" >
+                                    <img
+                                        width="22px"
+                                        height="24px"
+                                        src="../../../assets/img/votant-pas-sur.svg"
+                                        alt="" >
+                                    {{poll.choices_count.counts[choice.id].maybe.count}} "Peut-être"
+                                </div >
+                                <ul >
+                                    <li *ngFor='let pseudo of choices_count.counts[choice.id].maybe.people ' >{{pseudo}}</li >
+                                </ul >
+                            </div >
+                            <div
+                                class="choicebox__tooltiplist"
+                                *ngIf='!simpleAnswer' >
+                                <div class="choicebox__tooltipttl" >
+                                    <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 >
+                    </button >
+                    <div class="choicebox__countxt" >
+                        Choix ayant reçu le plus de votes
+                    </div >
+                </div >
+            </div >
+        </div >
+
     </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="poll.choices_count && choice && poll.choices_count.counts[choice.id]" >
-            <div class="choicebox__vote" >
-                {{poll.choices_count.counts[choice.id].yes.count}}
-                <img
-                    width="20px"
-                    height="21px"
-                    src="../../../assets/img/votant-sur.svg"
-                    alt="" >
-            </div >
-            <div class="choicebox__vote" >
-                {{poll.choices_count.counts[choice.id].maybe.count}}
-                <img
-                    width="22px"
-                    height="24px"
-                    src="../../../assets/img/votant-pas-sur.svg"
-                    alt="" >
-            </div >
-            <div
-                class="choicebox__tooltip"
-                id="choicebox-tooltip" >
-                <div class="choicebox__tooltiplist" >
-                    <div class="choicebox__tooltipttl" >
-                        <img
-                            width="20px"
-                            height="21px"
-                            src="../../../assets/img/votant-sur.svg"
-                            alt="" >
-                        {{poll.choices_count.counts[choice.id].yes.count}} "Oui"
-                    </div >
-                    <!--                    liste des gens qui ont répondu oui-->
-                    <ul >
-                        <li *ngFor='let pseudo of choices_count.counts[choice.id].yes.people ' >{{pseudo}}</li >
-                    </ul >
-                </div >
-                <div
-                    class="choicebox__tooltiplist"
-                    *ngIf='!simpleAnswer' >
-                    <div class="choicebox__tooltipttl" >
-                        <img
-                            width="22px"
-                            height="24px"
-                            src="../../../assets/img/votant-pas-sur.svg"
-                            alt="" >
-                        {{poll.choices_count.counts[choice.id].maybe.count}} "Peut-être"
-                    </div >
-                    <ul >
-                        <li *ngFor='let pseudo of choices_count.counts[choice.id].maybe.people ' >{{pseudo}}</li >
-                    </ul >
-                </div >
-                <div
-                    class="choicebox__tooltiplist"
-                    *ngIf='!simpleAnswer' >
-                    <div class="choicebox__tooltipttl" >
-                        <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 >
-        </button >
-        <div class="choicebox__countxt" >
-            Choix ayant reçu le plus de votes
-        </div >
-    </div >
 </div >