funky-framadate-front/mocks/old-stuff/pages/voting/voting-choice/voting-choice.component.html
2021-04-29 10:41:47 +02:00

148 lines
4.8 KiB
HTML

<div class="choicebox selection-{{ choice.answer }}">
<!-- add .choicebox--active to most voted -->
<button
*ngIf="showChangeChoicebutton"
class="btn btn--primary manage"
(click)="choice.simpleAnswer = !choice.simpleAnswer"
>
<i class="fa fa-cogs" aria-hidden="true"></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/icon_voter_YES.svg" alt="" />
</div>
<div class="choicebox__vote">
{{ poll.choices_count.counts[choice.id].maybe.count }}
<img width="22px" height="24px" src="../../../assets/img/icon_voter_MAYBE.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/icon_voter_YES.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/icon_voter_MAYBE.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" aria-hidden="true"></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>