⚡ reset all answers before loading a stack

src/app/app.module.ts

@@ -25,7 +25,6 @@ import {VotingGraphComponent} from './pages/voting/voting-graph/voting-graph.com
 import {VotingChoiceComponent} from './pages/voting/voting-choice/voting-choice.component';
 import {PasswordComponent} from './pages/password/password.component';
 import {HomeComponent} from './pages/home/home.component';
-import {VoteChoiceComponent} from './ui/vote-choice/vote-choice.component';
 import {HttpClient, HttpClientModule} from '@angular/common/http';
 import {MarkdownModule} from 'ngx-markdown';
 import {
@@ -90,7 +89,6 @@ export function HttpLoaderFactory(http: HttpClient) {
         PasswordComponent,
         HomeComponent,
         PollGraphicComponent,
-        VoteChoiceComponent,
         AdminComponent,
         SelectorComponent,
         PollDisplayComponent,

src/app/config/Routes.ts

@@ -10,11 +10,11 @@ import {CreateOrRetrieveComponent} from '../pages/create-or-retrieve/create-or-r
 import {BaseComponent} from '../pages/base-page/base.component';
 import {HomeComponent} from "../pages/home/home.component";
 import {PollGraphicComponent} from '../poll-graphic/poll-graphic.component';
-import {VoteChoiceComponent} from "../ui/vote-choice/vote-choice.component";
 import {PollDisplayComponent} from "../pages/poll-display/poll-display.component";
 
 import {VotingComponent} from "../pages/voting/voting.component";
 import {PasswordComponent} from "../pages/password/password.component";
+import {VotingChoiceComponent} from "../pages/voting/voting-choice/voting-choice.component";
 
 /**
  * each step in the form is a component
@@ -37,7 +37,7 @@ export const Routes =
         {path: 'graphic/:poll', component: PollGraphicComponent},
         {path: 'vote/poll/id/:poll', component: PollDisplayComponent},
         {path: 'vote/poll/slug/:pollSlug', component: PollDisplayComponent},
-        {path: 'votechoice', component: VoteChoiceComponent},
+        {path: 'votingchoice', component: VotingChoiceComponent},
         {path: 'voting', component: VotingComponent},
         {path: 'step/password', component: PasswordComponent},
         {path: '**', redirectTo: '/home', pathMatch: 'full'},

src/app/config/mocks/mock-poll3.ts

@@ -24,9 +24,9 @@ export const mockPoll3 = {
         },
         "kind": "text",
         "allowedAnswers": [
-            "yes"
+            "yes","maybe","no"
         ],
-        "modificationPolicy": "self",
+        "modificationPolicy": "everybody",
         "mailOnComment": null,
         "mailOnVote": null,
         "hideResults": null,

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

@@ -26,7 +26,7 @@ export const mockSuccessVote = {
         "allowedAnswers": [
             "yes"
         ],
-        "modificationPolicy": "self",
+        "modificationPolicy": "everybody",
         "mailOnComment": null,
         "mailOnVote": null,
         "hideResults": null,

src/app/pages/kind/kind.component.html

@@ -1,7 +1,10 @@
 <h1 >page de démo</h1 >
 <p >cette étape est en cours de développement. <br > S'inspirer de la page de Home pour réaliser d'autres pages
 </p >
-<a [routerLink]="'/step/end'" class="btn btn--primary" i18n="@@confirm">C'est parfait!</a>
+<a
+    [routerLink]="'/step/end'"
+    class="btn btn--primary"
+    i18n="@@confirm" >C'est parfait!</a >
 <h1 >Atoms</h1 >
 <section >
     <article >
@@ -15,15 +18,23 @@
     <article >
         <h2 >Links</h2 >
         <div >
-            <a [routerLink]="'/home'" class="next">
+            <a
-                <span class="text" i18n>
+                [routerLink]="'/home'"
+                class="next" >
+                <span
+                    class="text"
+                    i18n >
                     C'est parti !
                 </span >
             </a >
         </div >
         <div >
-            <a [routerLink]="'/home'" class="prev">
+            <a
-                <span class="text" i18n>
+                [routerLink]="'/home'"
+                class="prev" >
+                <span
+                    class="text"
+                    i18n >
                     C'est parti !
                 </span >
             </a >
@@ -33,65 +44,90 @@
     <article >
         <h2 >Buttons</h2 >
 
-        <button type="submit" class="btn btn--primary">
+        <button
+            type="submit"
+            class="btn btn--primary" >
             primary - default
         </button >
 
         <br >
 
-        <button type="submit" class="btn btn--primary btn--small">
+        <button
+            type="submit"
+            class="btn btn--primary btn--small" >
             primary - small
         </button >
 
         <br >
 
-        <a href="#" class="btn btn--primary btn--outline">
+        <a
+            href="#"
+            class="btn btn--primary btn--outline" >
             primary - outline - default
         </a >
 
         <br >
 
-        <button type="submit" class="btn btn--primary btn--outline btn--small">
+        <button
+            type="submit"
+            class="btn btn--primary btn--outline btn--small" >
             primary - outline - small
         </button >
 
         <br >
 
-        <input type="submit" class="btn btn--alert" value="alert - default">
+        <input
+            type="submit"
+            class="btn btn--alert"
+            value="alert - default" >
 
         <br >
 
-        <button type="submit" class="btn btn--alert btn--small">
+        <button
+            type="submit"
+            class="btn btn--alert btn--small" >
             alert - small
         </button >
 
         <br >
 
-        <button type="submit" class="btn btn--alert btn--outline">
+        <button
+            type="submit"
+            class="btn btn--alert btn--outline" >
             alert - outline - default
         </button >
 
         <br >
 
-        <button type="submit" class="btn btn--alert btn--outline btn--small">
+        <button
+            type="submit"
+            class="btn btn--alert btn--outline btn--small" >
             alert - outline - small
         </button >
 
         <br ><br >
 
-        <button type="submit" class="btn btn--primary btn--full">
+        <button
+            type="submit"
+            class="btn btn--primary btn--full" >
             primary - full
         </button >
 
-        <button type="submit" class="btn btn--primary btn--outline btn--full">
+        <button
+            type="submit"
+            class="btn btn--primary btn--outline btn--full" >
             primary - outline - full
         </button >
 
-        <button type="submit" class="btn btn--alert btn--full">
+        <button
+            type="submit"
+            class="btn btn--alert btn--full" >
             alert - full
         </button >
 
-        <button type="submit" class="btn btn--alert btn--outline btn--full">
+        <button
+            type="submit"
+            class="btn btn--alert btn--outline btn--full" >
             alert - outline - full
         </button >
 
@@ -105,23 +141,53 @@
         <label for="" >Un label pour les labelliser tous</label >
 
         <h3 >Input name</h3 >
-        <input type="name" name="" id=""><br>
+        <input
-        <input type="name" name="" id="" value="texte">
+            type="name"
+            name=""
+            id="" ><br >
+        <input
+            type="name"
+            name=""
+            id=""
+            value="texte" >
 
         <h3 >Input email</h3 >
-        <input type="email" name="" id=""><br>
+        <input
-        <input type="email" name="" id="" value="adresse@email.com">
+            type="email"
+            name=""
+            id="" ><br >
+        <input
+            type="email"
+            name=""
+            id=""
+            value="adresse@email.com" >
 
         <h3 >Input password</h3 >
-        <input type="password" name="" id=""><br>
+        <input
-        <input type="password" name="" id="" value="password">
+            type="password"
+            name=""
+            id="" ><br >
+        <input
+            type="password"
+            name=""
+            id=""
+            value="password" >
 
         <h3 >Input date</h3 >
-        <input type="date" name="" id=""><br>
+        <input
-        <input type="date" name="" id="" value="1985-11-23">
+            type="date"
+            name=""
+            id="" ><br >
+        <input
+            type="date"
+            name=""
+            id=""
+            value="1985-11-23" >
 
         <h3 >Select</h3 >
-        <select name="" id="">
+        <select
+            name=""
+            id="" >
             <option value="" >
                 1
             </option >
@@ -134,7 +200,11 @@
         </select >
 
         <h3 >Textarea</h3 >
-        <textarea name="" id="" cols="30" rows="10"></textarea>
+        <textarea
+            name=""
+            id=""
+            cols="30"
+            rows="10" ></textarea >
     </article >
 
     <article >
@@ -177,20 +247,26 @@
 
     <article >
         <h2 >Images</h2 >
-        <img src="http://placekitten.com/200/300" alt="">
+        <img
+            src="http://placekitten.com/200/300"
+            alt="" >
     </article >
 </section >
 
 <section >
     <h1 >Molecules</h1 >
-<framadate-vote-choice></framadate-vote-choice>
+    <framadate-voting-choice ></framadate-voting-choice >
     <article >
         <h2 >Useful classes</h2 >
 
         <h3 >Align right</h3 >
         <div class="align-right" >
-            <a [routerLink]="'/home'" class="next">
+            <a
-                <span class="text" i18n>
+                [routerLink]="'/home'"
+                class="next" >
+                <span
+                    class="text"
+                    i18n >
                     C'est parti !
                 </span >
             </a >
@@ -200,13 +276,18 @@
     <article >
         <h2 >Label + input name</h2 >
         <label for="test-text" >Ceci est un label un peu long mais pas trop</label >
-        <input type="name" name="test-text" id="test-text">
+        <input
+            type="name"
+            name="test-text"
+            id="test-text" >
     </article >
 
     <article >
         <h2 >Label + select</h2 >
         <label for="test-select" >Ceci est un label un peu long mais pas trop</label >
-        <select name="test-select" id="test-select">
+        <select
+            name="test-select"
+            id="test-select" >
             <option value="" >
                 1
             </option >

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

@@ -56,11 +56,11 @@
     class="list-of-choices" >
     <div *ngFor="let choice of config.currentPoll.choices" >
 
-        <framadate-vote-choice
+        <framadate-voting-choice
             [choice]="choice"
             [choices_count]="config.currentPoll.choices_count"
             [pollIsSpecialDate]="config.currentPoll.poll.kind == 'date'"
-            [poll]='config.currentPoll' ></framadate-vote-choice >
+            [poll]='config.currentPoll' ></framadate-voting-choice >
     </div >
 </div >
 <button

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

@@ -1 +1,171 @@
-<p>voting-choice works!</p>
+<div class="choicebox selection-{{choice.answer}}" >
+    <!-- add .choicebox--active to most voted -->
+    <button
+        *ngIf='showChangeChoicebutton'
+        class='btn btn--primary'
+        (click)=' choice.simpleAnswer = !choice.simpleAnswer' >
+        <i class='fa fa-gears' ></i >
+    </button >
+
+    <div class="choicebox__subject" >
+        <div class='columns' >
+            <div class='column' >
+                <div
+                    class="text title clickable"
+                    (click)="setAnswserTo('yes')" >
+                    {{choice.text}}
+                </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
+                    *ngIf='choice.url'
+                    class="choicebox__img"
+                    [src]="choice.url"
+                    alt="{{choice.url}}"
+                >
+                        <!-- IMG CASE -->
+
+                        <!-- DATE CASE  -->
+                <div
+                    class="dates"
+                    *ngIf="pollIsSpecialDate" >
+                    <div class="choicebox__date" >
+                        {{choice.date.date | date:'EEE'}} <span
+                        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='column' >
+                <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"
+            type="button"
+            [ngClass]="{'choicebox__btn--active': choice.answer === 'yes'}"
+            (click)="setAnswserTo('yes')" >
+            <img
+                src="../../../assets/img/check.svg"
+                alt="" >
+        </button >
+        </span >
+                    <span
+                        class="complex-answers"
+                        *ngIf="!simpleAnswer" >
+            <button
+                class="choicebox__btn choicebox__btn--maybe"
+                type="button"
+                [ngClass]="{'choicebox__btn--active': choice.answer === 'maybe'}"
+                (click)="setAnswserTo('maybe')" >
+            <img
+                src="../../../assets/img/check-2.svg"
+                alt="" >
+        </button >
+        <button
+            class="choicebox__btn choicebox__btn--no"
+            type="button"
+            [ngClass]="{'choicebox__btn--active': choice.answer === 'no'}"
+            (click)="setAnswserTo('no')"
+        >
+            <img
+                src="../../../assets/img/croix.svg"
+                alt="" >
+        </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 >

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

@@ -0,0 +1,276 @@
+// ---------------------------------------------------------
+// -- VOTE CHOICE COMPONENT
+// ---------------------------------------------------------
+
+// -- IMPORTS
+// ----------------------------
+
+@import "../../../../assets/scss/variables";
+
+
+// -- VARIABLES
+// ----------------------------
+
+$box-padding: 2rem;
+$box-border-width: .6rem;
+$btn-size: 5rem;
+$btn-margin-x: 1rem;
+$btn-margin-y: 1.5rem;
+$btn-wrap-size: calc(2 * #{$btn-size} + 4 * #{$btn-margin-x});
+$img-maxheight: 12rem;
+$breakpoint-responsive: 640px; // à définir
+
+
+// -- GLOBAL
+// ----------------------------
+
+.choicebox {
+    position: relative;
+    min-width: 32rem;
+    min-height: 16rem;
+    display: block;
+    padding: $box-padding $box-padding $box-padding calc(#{$box-padding} - #{$box-border-width});
+    border-left: $box-border-width solid transparent;
+    background-color: $white;
+    box-shadow: 0 0 .6rem 0 rgba($black, .2);
+
+    &--active {
+        padding-left: $box-padding;
+        border-left-color: $primary_color;
+    }
+
+    &.selection-yes {
+        font-weight: 700;
+        background: #e9bdeb;
+    }
+
+    @media (min-width: $breakpoint-responsive) {
+        align-items: center;
+        justify-content: space-between;
+        min-height: auto;
+    }
+
+    .title {
+        max-width: 25%;
+    }
+}
+
+.choicebox__subject {
+    margin-bottom: 3rem;
+    padding-right: $btn-wrap-size;
+    @media (min-width: $breakpoint-responsive) {
+        margin-bottom: 0;
+        padding-right: 0;
+    }
+}
+
+
+// -- DATE
+// ----------------------------
+
+.choicebox__date {
+    font-size: 1.8rem;
+    margin-bottom: .5rem;
+    white-space: nowrap;
+    text-transform: capitalize;
+
+    @media (min-width: $breakpoint-responsive) {
+        margin-bottom: 0;
+    }
+}
+
+.choicebox__day {
+    font-size: 2.4rem;
+    font-weight: bold;
+}
+
+
+// -- IMG
+// ----------------------------
+
+.choicebox__img {
+    max-width: 100%;
+    max-height: $img-maxheight;
+}
+
+
+// -- TXT
+// ----------------------------
+
+.choicebox__txt {
+    margin: 0;
+    font-size: 1.8rem;
+    min-width: 10em;
+}
+
+
+// -- VOTE BTNS
+// ----------------------------
+
+.choicebox__actions {
+    position: absolute;
+    z-index: 1;
+
+    max-width: $btn-wrap-size;
+    top: 50%;
+    right: $box-padding;
+
+    @media (min-width: $breakpoint-responsive) {
+        position: static;
+        max-width: none;
+        transform: none;
+        margin: 0 1.5rem;
+    }
+}
+
+.choicebox__btn {
+    width: $btn-size;
+    height: $btn-size;
+    align-items: center;
+    justify-content: center;
+    margin: $btn-margin-y $btn-margin-x;
+    border: .3rem solid #ccc9c9;
+    background-color: transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    float: left;
+
+    &--maybe {
+        position: relative;
+        top: calc((#{$btn-size} + 2 * #{$btn-margin-y}) / 2);
+        @media (min-width: $breakpoint-responsive) {
+            top: auto;
+            left: auto;
+        }
+    }
+
+    &--active {
+        border-color: #bf83c2;
+    }
+
+    @media (min-width: $breakpoint-responsive) {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+}
+
+
+// -- VOTE COUNT
+// ----------------------------
+
+.choicebox__count {
+    position: relative;
+    padding-right: $btn-wrap-size;
+    @media (min-width: $breakpoint-responsive) {
+        text-align: right;
+        padding-right: 0;
+    }
+}
+
+.choicebox__votes {
+    border: 0;
+    padding: 0;
+    line-height: normal;
+    background-color: transparent;
+    @media (min-width: $breakpoint-responsive) {
+        padding: 1.5rem;
+    }
+}
+
+.choicebox__vote {
+    display: inline-block;
+    vertical-align: middle;
+
+    & + .choicebox__vote {
+        margin-left: 1.5rem;
+    }
+}
+
+.choicebox__countxt {
+    display: none;
+    margin-top: .5rem;
+
+    .choicebox--active & {
+        display: block;
+        @media (min-width: $breakpoint-responsive) {
+            display: none;
+        }
+    }
+}
+
+
+// -- TOOLTIP
+// ----------------------------
+
+.choicebox__tooltip {
+    display: none;
+    @media (min-width: $breakpoint-responsive) {
+        position: absolute;
+        min-width: 18rem;
+        font-weight: normal;
+        top: 5rem;
+        left: 50%;
+        z-index: 1;
+        padding: 2rem;
+        border: .1rem solid rgba($black, .1);
+        background-color: $white;
+        text-align: left;
+        transform: translateX(-50%);
+        &::after,
+        &::before {
+            position: absolute;
+            width: 0;
+            height: 0;
+            bottom: 100%;
+            left: 50%;
+            content: " ";
+            pointer-events: none;
+            border: solid transparent;
+        }
+        &::after {
+            margin-left: -1.5rem;
+            border-width: 1.5rem;
+            border-color: rgba($white, 0);
+            border-bottom-color: #fff;
+        }
+        &::before {
+            margin-left: -1.6rem;
+            border-width: 1.6rem;
+            border-color: rgba($black, 0);
+            border-bottom-color: rgba($black, .1);
+        }
+        ul {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+    }
+}
+
+.choicebox__tooltiplist {
+    & + .choicebox__tooltiplist {
+        padding-left: 3rem;
+    }
+
+    ul {
+        max-height: 11rem;
+        overflow: auto;
+    }
+}
+
+.choicebox__tooltipttl {
+    @media (min-width: $breakpoint-responsive) {
+        margin-bottom: 1rem;
+        font-size: 1.6rem;
+        font-weight: bold;
+        white-space: nowrap;
+        img {
+            margin-right: .5rem;
+            vertical-align: sub;
+        }
+        & ~ .choicebox__tooltipttl {
+            margin-top: 3rem;
+        }
+    }
+}

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

@@ -1,20 +1,70 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, ElementRef, Input} from '@angular/core';
-import {BaseComponent} from "../../base-page/base.component";
 import {ConfigService} from "../../../services/config.service";
 
+interface VoteChoice {
+    votes?: {
+        yes: number
+        no: number
+        maybe: number
+        notAnswered: number
+    };
+    name?: string;
+    date?: Date;
+    answer: 'yes' | 'no' | 'maybe' | null;
+    simpleAnswer?: boolean
+    false; // enable if we display only a togglable "yes"
+}
+
+/**
+ * each vote choice takes a configuration from the container of all choices.
+ * this component is used to select a date choice, or a name answer
+ */
 @Component({
     selector: 'framadate-voting-choice',
     templateUrl: './voting-choice.component.html',
     styleUrls: ['./voting-choice.component.scss']
 })
-export class VotingChoiceComponent extends BaseComponent implements OnInit {
+export class VotingChoiceComponent {
 
-    constructor(public config: ConfigService) {
+    public showChangeChoicebutton = false;
-        super(config);
+    @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,
+                private config: ConfigService) {
+
+        if (this.poll && this.poll.data && this.poll.data.allowedAnswers) {
+            this.simpleAnswer = this.poll.data.allowedAnswers.length == 1
+        }
     }
 
+    setAnswserTo(newAnswer: 'yes' | 'no' | 'maybe' | null) {
+        if (this.simpleAnswer) {
+            // 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++;
+            }
 
-    ngOnInit() {
+        } 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();
     }
 
 }

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

@@ -95,6 +95,7 @@
     >
         <td >
             <!--            // TODO show modify if this is our own vote-->
+
             <button
                 (click)='config.loadVoteStack(voteStack)'
                 *ngIf="config.currentPoll.poll.modificationPolicy === 'everybody'"

src/app/services/config.service.ts

@@ -296,6 +296,12 @@ export class ConfigService extends PollConfig {
         this.urlAdmin = this.baseHref + '#/admin/' + res.admin_key;
     }
 
+    resetCurrentChoicesAnswers() {
+        this.currentPoll.choices.map(choice => {
+            choice.answer = null;
+        })
+    }
+
     /**
      * update current answers with a previous vote
      * @param voteStack
@@ -309,6 +315,7 @@ export class ConfigService extends PollConfig {
         this.myVoteStack = voteStack;
         let keys = Object.keys(voteStack.votes)
         console.log('voteStack', voteStack);
+        this.resetCurrentChoicesAnswers();
         keys.forEach((id: any) => {
             let voteItem = voteStack.votes[id];
 

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

@@ -1,171 +0,0 @@
-<div class="choicebox selection-{{choice.answer}}" >
-    <!-- add .choicebox--active to most voted -->
-    <button
-        *ngIf='showChangeChoicebutton'
-        class='btn btn--primary'
-        (click)=' choice.simpleAnswer = !choice.simpleAnswer' >
-        <i class='fa fa-gears' ></i >
-    </button >
-
-    <div class="choicebox__subject" >
-        <div class='columns' >
-            <div class='column' >
-                <div
-                    class="text title clickable"
-                    (click)="setAnswserTo('yes')" >
-                    {{choice.text}}
-                </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
-                    *ngIf='choice.url'
-                    class="choicebox__img"
-                    [src]="choice.url"
-                    alt="{{choice.url}}"
-                >
-                        <!-- IMG CASE -->
-
-                        <!-- DATE CASE  -->
-                <div
-                    class="dates"
-                    *ngIf="pollIsSpecialDate" >
-                    <div class="choicebox__date" >
-                        {{choice.date.date | date:'EEE'}} <span
-                        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='column' >
-                <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"
-            type="button"
-            [ngClass]="{'choicebox__btn--active': choice.answer === 'yes'}"
-            (click)="setAnswserTo('yes')" >
-            <img
-                src="../../../assets/img/check.svg"
-                alt="" >
-        </button >
-        </span >
-                    <span
-                        class="complex-answers"
-                        *ngIf="!simpleAnswer" >
-            <button
-                class="choicebox__btn choicebox__btn--maybe"
-                type="button"
-                [ngClass]="{'choicebox__btn--active': choice.answer === 'maybe'}"
-                (click)="setAnswserTo('maybe')" >
-            <img
-                src="../../../assets/img/check-2.svg"
-                alt="" >
-        </button >
-        <button
-            class="choicebox__btn choicebox__btn--no"
-            type="button"
-            [ngClass]="{'choicebox__btn--active': choice.answer === 'no'}"
-            (click)="setAnswserTo('no')"
-        >
-            <img
-                src="../../../assets/img/croix.svg"
-                alt="" >
-        </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 >

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

@@ -1,276 +0,0 @@
-// ---------------------------------------------------------
-// -- VOTE CHOICE COMPONENT
-// ---------------------------------------------------------
-
-// -- IMPORTS
-// ----------------------------
-
-@import "../../../assets/scss/variables";
-
-
-// -- VARIABLES
-// ----------------------------
-
-$box-padding: 2rem;
-$box-border-width: .6rem;
-$btn-size: 5rem;
-$btn-margin-x: 1rem;
-$btn-margin-y: 1.5rem;
-$btn-wrap-size: calc(2 * #{$btn-size} + 4 * #{$btn-margin-x});
-$img-maxheight: 12rem;
-$breakpoint-responsive: 640px; // à définir
-
-
-// -- GLOBAL
-// ----------------------------
-
-.choicebox {
-    position: relative;
-    min-width: 32rem;
-    min-height: 16rem;
-    display: block;
-    padding: $box-padding $box-padding $box-padding calc(#{$box-padding} - #{$box-border-width});
-    border-left: $box-border-width solid transparent;
-    background-color: $white;
-    box-shadow: 0 0 .6rem 0 rgba($black, .2);
-
-    &--active {
-        padding-left: $box-padding;
-        border-left-color: $primary_color;
-    }
-
-    &.selection-yes {
-        font-weight: 700;
-        background: #e9bdeb;
-    }
-
-    @media (min-width: $breakpoint-responsive) {
-        align-items: center;
-        justify-content: space-between;
-        min-height: auto;
-    }
-
-    .title {
-        max-width: 25%;
-    }
-}
-
-.choicebox__subject {
-    margin-bottom: 3rem;
-    padding-right: $btn-wrap-size;
-    @media (min-width: $breakpoint-responsive) {
-        margin-bottom: 0;
-        padding-right: 0;
-    }
-}
-
-
-// -- DATE
-// ----------------------------
-
-.choicebox__date {
-    font-size: 1.8rem;
-    margin-bottom: .5rem;
-    white-space: nowrap;
-    text-transform: capitalize;
-
-    @media (min-width: $breakpoint-responsive) {
-        margin-bottom: 0;
-    }
-}
-
-.choicebox__day {
-    font-size: 2.4rem;
-    font-weight: bold;
-}
-
-
-// -- IMG
-// ----------------------------
-
-.choicebox__img {
-    max-width: 100%;
-    max-height: $img-maxheight;
-}
-
-
-// -- TXT
-// ----------------------------
-
-.choicebox__txt {
-    margin: 0;
-    font-size: 1.8rem;
-    min-width: 10em;
-}
-
-
-// -- VOTE BTNS
-// ----------------------------
-
-.choicebox__actions {
-    position: absolute;
-    z-index: 1;
-
-    max-width: $btn-wrap-size;
-    top: 50%;
-    right: $box-padding;
-
-    @media (min-width: $breakpoint-responsive) {
-        position: static;
-        max-width: none;
-        transform: none;
-        margin: 0 1.5rem;
-    }
-}
-
-.choicebox__btn {
-    width: $btn-size;
-    height: $btn-size;
-    align-items: center;
-    justify-content: center;
-    margin: $btn-margin-y $btn-margin-x;
-    border: .3rem solid #ccc9c9;
-    background-color: transparent;
-    border-radius: 50%;
-    cursor: pointer;
-    float: left;
-
-    &--maybe {
-        position: relative;
-        top: calc((#{$btn-size} + 2 * #{$btn-margin-y}) / 2);
-        @media (min-width: $breakpoint-responsive) {
-            top: auto;
-            left: auto;
-        }
-    }
-
-    &--active {
-        border-color: #bf83c2;
-    }
-
-    @media (min-width: $breakpoint-responsive) {
-        margin-top: 0;
-        margin-bottom: 0;
-    }
-
-}
-
-
-// -- VOTE COUNT
-// ----------------------------
-
-.choicebox__count {
-    position: relative;
-    padding-right: $btn-wrap-size;
-    @media (min-width: $breakpoint-responsive) {
-        text-align: right;
-        padding-right: 0;
-    }
-}
-
-.choicebox__votes {
-    border: 0;
-    padding: 0;
-    line-height: normal;
-    background-color: transparent;
-    @media (min-width: $breakpoint-responsive) {
-        padding: 1.5rem;
-    }
-}
-
-.choicebox__vote {
-    display: inline-block;
-    vertical-align: middle;
-
-    & + .choicebox__vote {
-        margin-left: 1.5rem;
-    }
-}
-
-.choicebox__countxt {
-    display: none;
-    margin-top: .5rem;
-
-    .choicebox--active & {
-        display: block;
-        @media (min-width: $breakpoint-responsive) {
-            display: none;
-        }
-    }
-}
-
-
-// -- TOOLTIP
-// ----------------------------
-
-.choicebox__tooltip {
-    display: none;
-    @media (min-width: $breakpoint-responsive) {
-        position: absolute;
-        min-width: 18rem;
-        font-weight: normal;
-        top: 5rem;
-        left: 50%;
-        z-index: 1;
-        padding: 2rem;
-        border: .1rem solid rgba($black, .1);
-        background-color: $white;
-        text-align: left;
-        transform: translateX(-50%);
-        &::after,
-        &::before {
-            position: absolute;
-            width: 0;
-            height: 0;
-            bottom: 100%;
-            left: 50%;
-            content: " ";
-            pointer-events: none;
-            border: solid transparent;
-        }
-        &::after {
-            margin-left: -1.5rem;
-            border-width: 1.5rem;
-            border-color: rgba($white, 0);
-            border-bottom-color: #fff;
-        }
-        &::before {
-            margin-left: -1.6rem;
-            border-width: 1.6rem;
-            border-color: rgba($black, 0);
-            border-bottom-color: rgba($black, .1);
-        }
-        ul {
-            margin: 0;
-            padding: 0;
-            list-style: none;
-        }
-    }
-}
-
-.choicebox__tooltiplist {
-    & + .choicebox__tooltiplist {
-        padding-left: 3rem;
-    }
-
-    ul {
-        max-height: 11rem;
-        overflow: auto;
-    }
-}
-
-.choicebox__tooltipttl {
-    @media (min-width: $breakpoint-responsive) {
-        margin-bottom: 1rem;
-        font-size: 1.6rem;
-        font-weight: bold;
-        white-space: nowrap;
-        img {
-            margin-right: .5rem;
-            vertical-align: sub;
-        }
-        & ~ .choicebox__tooltipttl {
-            margin-top: 3rem;
-        }
-    }
-}

src/app/ui/vote-choice/vote-choice.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { VoteChoiceComponent } from './vote-choice.component';
-
-describe('VoteChoiceComponent', () => {
-  let component: VoteChoiceComponent;
-  let fixture: ComponentFixture<VoteChoiceComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ VoteChoiceComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(VoteChoiceComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,70 +0,0 @@
-import {Component, ElementRef, Input} from '@angular/core';
-import {ConfigService} from "../../services/config.service";
-
-interface VoteChoice {
-    votes?: {
-        yes: number
-        no: number
-        maybe: number
-        notAnswered: number
-    };
-    name?: string;
-    date?: Date;
-    answer: 'yes' | 'no' | 'maybe' | null;
-    simpleAnswer?: boolean
-    false; // enable if we display only a togglable "yes"
-}
-
-/**
- * each vote choice takes a configuration from the container of all choices.
- * this component is used to select a date choice, or a name answer
- */
-@Component({
-    selector: 'framadate-vote-choice',
-    templateUrl: './vote-choice.component.html',
-    styleUrls: ['./vote-choice.component.scss']
-})
-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,
-                private config: ConfigService) {
-
-        if (this.poll && this.poll.data && this.poll.data.allowedAnswers) {
-            this.simpleAnswer = this.poll.data.allowedAnswers.length == 1
-        }
-    }
-
-    setAnswserTo(newAnswer: 'yes' | 'no' | 'maybe' | null) {
-        if (this.simpleAnswer) {
-            // 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();
-    }
-
-}