funky-framadate-front/src/app/ui/vote-choice/vote-choice.component.html

162 lines
5.8 KiB
HTML

<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="text title clickable"
(click)="setAnswserTo('yes')" >
<!-- {{choice.id}} )-->
{{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 class="choicebox__img" src="https://picsum.photos/200" alt="">
--><!-- 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="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 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 >