tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

⚡ 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.module.ts
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,

4
src/app/config/Routes.ts
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'},

4
src/app/config/mocks/mock-poll3.ts
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,

2
src/app/config/mocks/mock-success-vote.ts
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,

449
src/app/pages/kind/kind.component.html
View File

@ -1,262 +1,343 @@
<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
<h1>Atoms</h1> [routerLink]="'/step/end'"
<section> class="btn btn--primary"
<article> i18n="@@confirm" >C'est parfait!</a >
<h2>Headings</h2> <h1 >Atoms</h1 >
<section >
<article >
<h2 >Headings</h2 >
<h1>Ceci est un h1</h1> <h1 >Ceci est un h1</h1 >
<h2>Ceci est un h2</h2> <h2 >Ceci est un h2</h2 >
<h3>Ceci est un h3</h3> <h3 >Ceci est un h3</h3 >
</article> </article >
<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 >
</div> </div >
</article> </article >
<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
alert - outline - full type="submit"
</button> class="btn btn--alert btn--outline btn--full" >
alert - outline - full
</button >
</article> </article >
<article> <article >
<h2>Forms element</h2> <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> <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
<option value=""> name=""
id="" >
<option value="" >
1 1
</option> </option >
<option value=""> <option value="" >
2 2
</option> </option >
<option value=""> <option value="" >
3 3
</option> </option >
</select> </select >
<h3>Textarea</h3> <h3 >Textarea</h3 >
<textarea name="" id="" cols="30" rows="10"></textarea> <textarea
</article> name=""
id=""
cols="30"
rows="10" ></textarea >
</article >
<article> <article >
<h2>Paragraphs</h2> <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 Corrupti repellat vero repellendus reiciendis assumenda minus. Nobis, quaerat ut nihil minima sed animi
delectus beatae!</p> delectus beatae!</p >
</article> </article >
<article> <article >
<h2>Lists</h2> <h2 >Lists</h2 >
<h3>Unordered list</h3> <h3 >Unordered list</h3 >
<ul> <ul >
<li> <li >
plop plop
</li> </li >
<li> <li >
plop plop
</li> </li >
<li> <li >
plop plop
</li> </li >
</ul> </ul >
<h3>Ordered list</h3> <h3 >Ordered list</h3 >
<ol> <ol >
<li> <li >
plop plop
</li> </li >
<li> <li >
plop plop
</li> </li >
<li> <li >
plop plop
</li> </li >
</ol> </ol >
</article> </article >
<article> <article >
<h2>Images</h2> <h2 >Images</h2 >
<img src="http://placekitten.com/200/300" alt=""> <img
</article> src="http://placekitten.com/200/300"
</section> alt="" >
</article >
</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 >
</div> </div >
</article> </article >
<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
</article> type="name"
name="test-text"
id="test-text" >
</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
<option value=""> name="test-select"
id="test-select" >
<option value="" >
1 1
</option> </option >
<option value=""> <option value="" >
2 2
</option> </option >
<option value=""> <option value="" >
3 3
</option> </option >
</select> </select >
</article> </article >
<article> <article >
<h2>Input name with info</h2> <h2 >Input name with info</h2 >
<a href="https://sketch.cloud/s/00A80/a/MAl5q7">like here</a> <a href="https://sketch.cloud/s/00A80/a/MAl5q7" >like here</a >
</article> </article >
<article> <article >
<h2>Commentaries</h2> <h2 >Commentaries</h2 >
</article> </article >
</section> </section >
<section> <section >
<h1>Components</h1> <h1 >Components</h1 >
<article> <article >
<h2>Images list</h2> <h2 >Images list</h2 >
<a href="https://sketch.cloud/s/00A80/a/bQA9wj">that</a> <a href="https://sketch.cloud/s/00A80/a/bQA9wj" >that</a >
</article> </article >
<article> <article >
<h2>Calendar</h2> <h2 >Calendar</h2 >
</article> </article >
<article> <article >
<h2>Modale</h2> <h2 >Modale</h2 >
</article> </article >
<article> <article >
<h2>Way to vote</h2> <h2 >Way to vote</h2 >
<a href="https://sketch.cloud/s/00A80/a/Ol0598">that</a> <a href="https://sketch.cloud/s/00A80/a/Ol0598" >that</a >
</article> </article >
<article> <article >
<h2>Voted</h2> <h2 >Voted</h2 >
<a href="https://sketch.cloud/s/00A80/a/OlJZo2">that</a> <a href="https://sketch.cloud/s/00A80/a/OlJZo2" >that</a >
</article> </article >
<article> <article >
<h2>Graphics</h2> <h2 >Graphics</h2 >
<a href="https://sketch.cloud/s/00A80/a/megprw">that</a> <a href="https://sketch.cloud/s/00A80/a/megprw" >that</a >
</article> </article >
</section> </section >

4
src/app/pages/poll-display/poll-display.component.html
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

172
src/app/pages/voting/voting-choice/voting-choice.component.html
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 >

276
src/app/pages/voting/voting-choice/voting-choice.component.scss
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;
}
}
}

74
src/app/pages/voting/voting-choice/voting-choice.component.ts
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";
@Component({ interface VoteChoice {
selector: 'framadate-voting-choice', votes?: {
templateUrl: './voting-choice.component.html', yes: number
styleUrls: ['./voting-choice.component.scss'] no: number
}) maybe: number
export class VotingChoiceComponent extends BaseComponent implements OnInit { 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();
}
} }

1
src/app/pages/voting/voting-summary/voting-summary.component.html
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'"

7
src/app/services/config.service.ts
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];

171
src/app/ui/vote-choice/vote-choice.component.html
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 >

276
src/app/ui/vote-choice/vote-choice.component.scss
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;
}
}
}

25
src/app/ui/vote-choice/vote-choice.component.spec.ts
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();
});
});

70
src/app/ui/vote-choice/vote-choice.component.ts
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();
}
}