reset all answers before loading a stack

This commit is contained in:
Baptiste Lemoine 2020-02-04 14:28:43 +01:00
parent b1adfaa8ea
commit 4bcd3e475f
15 changed files with 789 additions and 748 deletions

View File

@ -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,

View File

@ -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'},

View File

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

View File

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

View File

@ -1,262 +1,343 @@
<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>
<h1>Atoms</h1>
<section>
<article>
<h2>Headings</h2>
<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 >
<h1 >Atoms</h1 >
<section >
<article >
<h2 >Headings</h2 >
<h1>Ceci est un h1</h1>
<h2>Ceci est un h2</h2>
<h3>Ceci est un h3</h3>
</article>
<h1 >Ceci est un h1</h1 >
<h2 >Ceci est un h2</h2 >
<h3 >Ceci est un h3</h3 >
</article >
<article>
<h2>Links</h2>
<div>
<a [routerLink]="'/home'" class="next">
<span class="text" i18n>
<article >
<h2 >Links</h2 >
<div >
<a
[routerLink]="'/home'"
class="next" >
<span
class="text"
i18n >
C'est parti !
</span>
</a>
</div>
<div>
<a [routerLink]="'/home'" class="prev">
<span class="text" i18n>
</span >
</a >
</div >
<div >
<a
[routerLink]="'/home'"
class="prev" >
<span
class="text"
i18n >
C'est parti !
</span>
</a>
</div>
</article>
</span >
</a >
</div >
</article >
<article>
<h2>Buttons</h2>
<article >
<h2 >Buttons</h2 >
<button type="submit" class="btn btn--primary">
<button
type="submit"
class="btn btn--primary" >
primary - default
</button>
</button >
<br>
<br >
<button type="submit" class="btn btn--primary btn--small">
<button
type="submit"
class="btn btn--primary btn--small" >
primary - small
</button>
</button >
<br>
<br >
<a href="#" class="btn btn--primary btn--outline">
<a
href="#"
class="btn btn--primary btn--outline" >
primary - outline - default
</a>
</a >
<br>
<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>
</button >
<br>
<br >
<input type="submit" class="btn btn--alert" value="alert - default">
<input
type="submit"
class="btn btn--alert"
value="alert - default" >
<br>
<br >
<button type="submit" class="btn btn--alert btn--small">
<button
type="submit"
class="btn btn--alert btn--small" >
alert - small
</button>
</button >
<br>
<br >
<button type="submit" class="btn btn--alert btn--outline">
<button
type="submit"
class="btn btn--alert btn--outline" >
alert - outline - default
</button>
</button >
<br>
<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>
</button >
<br><br>
<br ><br >
<button type="submit" class="btn btn--primary btn--full">
<button
type="submit"
class="btn btn--primary btn--full" >
primary - full
</button>
</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 >
<button type="submit" class="btn btn--alert btn--full">
<button
type="submit"
class="btn btn--alert btn--full" >
alert - full
</button>
</button >
<button type="submit" class="btn btn--alert btn--outline btn--full">
alert - outline - full
</button>
<button
type="submit"
class="btn btn--alert btn--outline btn--full" >
alert - outline - full
</button >
</article>
</article >
<article>
<h2>Forms element</h2>
<article >
<h2 >Forms element</h2 >
<h3>Labels</h3>
<h3 >Labels</h3 >
<label for="">Un label pour les labelliser tous</label>
<label for="" >Un label pour les labelliser tous</label >
<h3>Input name</h3>
<input type="name" name="" id=""><br>
<input type="name" name="" id="" value="texte">
<h3 >Input name</h3 >
<input
type="name"
name=""
id="" ><br >
<input
type="name"
name=""
id=""
value="texte" >
<h3>Input email</h3>
<input type="email" name="" id=""><br>
<input type="email" name="" id="" value="adresse@email.com">
<h3 >Input email</h3 >
<input
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 type="password" name="" id="" value="password">
<h3 >Input password</h3 >
<input
type="password"
name=""
id="" ><br >
<input
type="password"
name=""
id=""
value="password" >
<h3>Input date</h3>
<input type="date" name="" id=""><br>
<input type="date" name="" id="" value="1985-11-23">
<h3 >Input date</h3 >
<input
type="date"
name=""
id="" ><br >
<input
type="date"
name=""
id=""
value="1985-11-23" >
<h3>Select</h3>
<select name="" id="">
<option value="">
<h3 >Select</h3 >
<select
name=""
id="" >
<option value="" >
1
</option>
<option value="">
</option >
<option value="" >
2
</option>
<option value="">
</option >
<option value="" >
3
</option>
</select>
</option >
</select >
<h3>Textarea</h3>
<textarea name="" id="" cols="30" rows="10"></textarea>
</article>
<h3 >Textarea</h3 >
<textarea
name=""
id=""
cols="30"
rows="10" ></textarea >
</article >
<article>
<h2>Paragraphs</h2>
<article >
<h2 >Paragraphs</h2 >
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam perspiciatis minus libero error dolores.
<p >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam perspiciatis minus libero error dolores.
Corrupti repellat vero repellendus reiciendis assumenda minus. Nobis, quaerat ut nihil minima sed animi
delectus beatae!</p>
</article>
delectus beatae!</p >
</article >
<article>
<h2>Lists</h2>
<article >
<h2 >Lists</h2 >
<h3>Unordered list</h3>
<ul>
<li>
<h3 >Unordered list</h3 >
<ul >
<li >
plop
</li>
<li>
</li >
<li >
plop
</li>
<li>
</li >
<li >
plop
</li>
</ul>
</li >
</ul >
<h3>Ordered list</h3>
<ol>
<li>
<h3 >Ordered list</h3 >
<ol >
<li >
plop
</li>
<li>
</li >
<li >
plop
</li>
<li>
</li >
<li >
plop
</li>
</ol>
</article>
</li >
</ol >
</article >
<article>
<h2>Images</h2>
<img src="http://placekitten.com/200/300" alt="">
</article>
</section>
<article >
<h2 >Images</h2 >
<img
src="http://placekitten.com/200/300"
alt="" >
</article >
</section >
<section>
<h1>Molecules</h1>
<framadate-vote-choice></framadate-vote-choice>
<article>
<h2>Useful classes</h2>
<section >
<h1 >Molecules</h1 >
<framadate-voting-choice ></framadate-voting-choice >
<article >
<h2 >Useful classes</h2 >
<h3>Align right</h3>
<div class="align-right">
<a [routerLink]="'/home'" class="next">
<span class="text" i18n>
<h3 >Align right</h3 >
<div class="align-right" >
<a
[routerLink]="'/home'"
class="next" >
<span
class="text"
i18n >
C'est parti !
</span>
</a>
</div>
</article>
</span >
</a >
</div >
</article >
<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">
</article>
<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" >
</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">
<option value="">
<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" >
<option value="" >
1
</option>
<option value="">
</option >
<option value="" >
2
</option>
<option value="">
</option >
<option value="" >
3
</option>
</select>
</article>
</option >
</select >
</article >
<article>
<h2>Input name with info</h2>
<a href="https://sketch.cloud/s/00A80/a/MAl5q7">like here</a>
</article>
<article >
<h2 >Input name with info</h2 >
<a href="https://sketch.cloud/s/00A80/a/MAl5q7" >like here</a >
</article >
<article>
<h2>Commentaries</h2>
</article>
</section>
<article >
<h2 >Commentaries</h2 >
</article >
</section >
<section>
<h1>Components</h1>
<section >
<h1 >Components</h1 >
<article>
<h2>Images list</h2>
<a href="https://sketch.cloud/s/00A80/a/bQA9wj">that</a>
</article>
<article >
<h2 >Images list</h2 >
<a href="https://sketch.cloud/s/00A80/a/bQA9wj" >that</a >
</article >
<article>
<h2>Calendar</h2>
</article>
<article >
<h2 >Calendar</h2 >
</article >
<article>
<h2>Modale</h2>
</article>
<article >
<h2 >Modale</h2 >
</article >
<article>
<h2>Way to vote</h2>
<a href="https://sketch.cloud/s/00A80/a/Ol0598">that</a>
</article>
<article >
<h2 >Way to vote</h2 >
<a href="https://sketch.cloud/s/00A80/a/Ol0598" >that</a >
</article >
<article>
<h2>Voted</h2>
<a href="https://sketch.cloud/s/00A80/a/OlJZo2">that</a>
</article>
<article >
<h2 >Voted</h2 >
<a href="https://sketch.cloud/s/00A80/a/OlJZo2" >that</a >
</article >
<article>
<h2>Graphics</h2>
<a href="https://sketch.cloud/s/00A80/a/megprw">that</a>
</article>
</section>
<article >
<h2 >Graphics</h2 >
<a href="https://sketch.cloud/s/00A80/a/megprw" >that</a >
</article >
</section >

View File

@ -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

View File

@ -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 >

View File

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

View File

@ -1,20 +1,70 @@
import { Component, OnInit } from '@angular/core';
import {BaseComponent} from "../../base-page/base.component";
import {Component, ElementRef, Input} from '@angular/core';
import {ConfigService} from "../../../services/config.service";
@Component({
selector: 'framadate-voting-choice',
templateUrl: './voting-choice.component.html',
styleUrls: ['./voting-choice.component.scss']
})
export class VotingChoiceComponent extends BaseComponent implements OnInit {
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"
}
constructor(public config: ConfigService) {
super(config);
/**
* 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 {
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++;
}
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();
}
}

View File

@ -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'"

View File

@ -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];

View File

@ -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 >

View File

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