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 {VotingChoiceComponent} from './pages/voting/voting-choice/voting-choice.component';
import {PasswordComponent} from './pages/password/password.component'; import {PasswordComponent} from './pages/password/password.component';
import {HomeComponent} from './pages/home/home.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 {HttpClient, HttpClientModule} from '@angular/common/http';
import {MarkdownModule} from 'ngx-markdown'; import {MarkdownModule} from 'ngx-markdown';
import { import {
@ -90,7 +89,6 @@ export function HttpLoaderFactory(http: HttpClient) {
PasswordComponent, PasswordComponent,
HomeComponent, HomeComponent,
PollGraphicComponent, PollGraphicComponent,
VoteChoiceComponent,
AdminComponent, AdminComponent,
SelectorComponent, SelectorComponent,
PollDisplayComponent, 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 {BaseComponent} from '../pages/base-page/base.component';
import {HomeComponent} from "../pages/home/home.component"; import {HomeComponent} from "../pages/home/home.component";
import {PollGraphicComponent} from '../poll-graphic/poll-graphic.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 {PollDisplayComponent} from "../pages/poll-display/poll-display.component";
import {VotingComponent} from "../pages/voting/voting.component"; import {VotingComponent} from "../pages/voting/voting.component";
import {PasswordComponent} from "../pages/password/password.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 * each step in the form is a component
@ -37,7 +37,7 @@ export const Routes =
{path: 'graphic/:poll', component: PollGraphicComponent}, {path: 'graphic/:poll', component: PollGraphicComponent},
{path: 'vote/poll/id/:poll', component: PollDisplayComponent}, {path: 'vote/poll/id/:poll', component: PollDisplayComponent},
{path: 'vote/poll/slug/:pollSlug', component: PollDisplayComponent}, {path: 'vote/poll/slug/:pollSlug', component: PollDisplayComponent},
{path: 'votechoice', component: VoteChoiceComponent}, {path: 'votingchoice', component: VotingChoiceComponent},
{path: 'voting', component: VotingComponent}, {path: 'voting', component: VotingComponent},
{path: 'step/password', component: PasswordComponent}, {path: 'step/password', component: PasswordComponent},
{path: '**', redirectTo: '/home', pathMatch: 'full'}, {path: '**', redirectTo: '/home', pathMatch: 'full'},

View File

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

View File

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

View File

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

View File

@ -56,11 +56,11 @@
class="list-of-choices" > class="list-of-choices" >
<div *ngFor="let choice of config.currentPoll.choices" > <div *ngFor="let choice of config.currentPoll.choices" >
<framadate-vote-choice <framadate-voting-choice
[choice]="choice" [choice]="choice"
[choices_count]="config.currentPoll.choices_count" [choices_count]="config.currentPoll.choices_count"
[pollIsSpecialDate]="config.currentPoll.poll.kind == 'date'" [pollIsSpecialDate]="config.currentPoll.poll.kind == 'date'"
[poll]='config.currentPoll' ></framadate-vote-choice > [poll]='config.currentPoll' ></framadate-voting-choice >
</div > </div >
</div > </div >
<button <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 {Component, ElementRef, Input} from '@angular/core';
import {BaseComponent} from "../../base-page/base.component";
import {ConfigService} from "../../../services/config.service"; 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({ @Component({
selector: 'framadate-voting-choice', selector: 'framadate-voting-choice',
templateUrl: './voting-choice.component.html', templateUrl: './voting-choice.component.html',
styleUrls: ['./voting-choice.component.scss'] 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();
} }
} }

View File

@ -95,6 +95,7 @@
> >
<td > <td >
<!-- // TODO show modify if this is our own vote--> <!-- // TODO show modify if this is our own vote-->
<button <button
(click)='config.loadVoteStack(voteStack)' (click)='config.loadVoteStack(voteStack)'
*ngIf="config.currentPoll.poll.modificationPolicy === 'everybody'" *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; this.urlAdmin = this.baseHref + '#/admin/' + res.admin_key;
} }
resetCurrentChoicesAnswers() {
this.currentPoll.choices.map(choice => {
choice.answer = null;
})
}
/** /**
* update current answers with a previous vote * update current answers with a previous vote
* @param voteStack * @param voteStack
@ -309,6 +315,7 @@ export class ConfigService extends PollConfig {
this.myVoteStack = voteStack; this.myVoteStack = voteStack;
let keys = Object.keys(voteStack.votes) let keys = Object.keys(voteStack.votes)
console.log('voteStack', voteStack); console.log('voteStack', voteStack);
this.resetCurrentChoicesAnswers();
keys.forEach((id: any) => { keys.forEach((id: any) => {
let voteItem = voteStack.votes[id]; 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;
}
}
&--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,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();
});
});

View File

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