mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
⚡ reset all answers before loading a stack
This commit is contained in:
parent
b1adfaa8ea
commit
4bcd3e475f
@ -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,
|
||||
|
||||
@ -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'},
|
||||
|
||||
@ -24,9 +24,9 @@ export const mockPoll3 = {
|
||||
},
|
||||
"kind": "text",
|
||||
"allowedAnswers": [
|
||||
"yes"
|
||||
"yes","maybe","no"
|
||||
],
|
||||
"modificationPolicy": "self",
|
||||
"modificationPolicy": "everybody",
|
||||
"mailOnComment": null,
|
||||
"mailOnVote": null,
|
||||
"hideResults": null,
|
||||
|
||||
@ -26,7 +26,7 @@ export const mockSuccessVote = {
|
||||
"allowedAnswers": [
|
||||
"yes"
|
||||
],
|
||||
"modificationPolicy": "self",
|
||||
"modificationPolicy": "everybody",
|
||||
"mailOnComment": null,
|
||||
"mailOnVote": null,
|
||||
"hideResults": null,
|
||||
|
||||
@ -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">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn--alert btn--outline btn--full" >
|
||||
alert - outline - full
|
||||
</button>
|
||||
</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 >
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 >
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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";
|
||||
|
||||
interface VoteChoice {
|
||||
votes?: {
|
||||
yes: number
|
||||
no: number
|
||||
maybe: number
|
||||
notAnswered: number
|
||||
};
|
||||
name?: string;
|
||||
date?: Date;
|
||||
answer: 'yes' | 'no' | 'maybe' | null;
|
||||
simpleAnswer?: boolean
|
||||
false; // enable if we display only a togglable "yes"
|
||||
}
|
||||
|
||||
/**
|
||||
* each vote choice takes a configuration from the container of all choices.
|
||||
* this component is used to select a date choice, or a name answer
|
||||
*/
|
||||
@Component({
|
||||
selector: 'framadate-voting-choice',
|
||||
templateUrl: './voting-choice.component.html',
|
||||
styleUrls: ['./voting-choice.component.scss']
|
||||
})
|
||||
export class VotingChoiceComponent extends BaseComponent implements OnInit {
|
||||
export class VotingChoiceComponent {
|
||||
|
||||
constructor(public config: ConfigService) {
|
||||
super(config);
|
||||
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();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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'"
|
||||
|
||||
@ -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];
|
||||
|
||||
|
||||
@ -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 >
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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();
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user