funky-framadate-front/src/app/features/consultation/consultation.component.html

157 lines
4.7 KiB
HTML

<section class="poll_loaded padded consultation" *ngIf="!fetching && poll">
<!-- messages-->
<div class="message is-warning" *ngIf="isArchived">
<div class="message-body">
⚰️ Ce sondage a expiré, il n'est plus possible d'y ajouter de votes ou de commentaires
</div>
</div>
<div class="message is-warning" *ngIf="poll && poll.admin_key">
<div class="message-body">
vous êtes admin de ce sondage et pouvez le modifier
</div>
</div>
<div class="message is-info" *ngIf="poll.modification_policy == 'self'">
<div class="message-body">
Vous ne pouvez modifier que votre propre vote à ce sondage
</div>
</div>
<router-outlet></router-outlet>
<!-- actions-->
<!-- affichage des possibilités de réponse -->
<div class="columns">
<div class="column">
<div class="card">
<header class="card-header padded">
<div class="columns">
<div class="column">
<p class="card-header-title is-1 title">{{ poll.title }}</p>
<p class="descr">{{ poll.description }}</p>
<div class="voters-count padded">
<i class="fa fa-users"></i> {{ poll.stacks.length }} votants
</div>
<p class="card-header-icon" *ngIf="poll.owner">author : {{ poll.owner?.pseudo }}</p>
</div>
<div class="column">
<app-actions-menu></app-actions-menu>
</div>
</div>
</header>
<div class="card-content">
<div class="content">
<div class="columns">
<div class="column">
<button
class="btn is-info"
(click)="isCompactMode = !isCompactMode"
[ngClass]="{ 'is-primary': isCompactMode, 'is-default': !isCompactMode }"
>
changer d'affichage
</button>
</div>
<div class="column">
<div class="buttons has-addons is-small is-right">
<button
class="button"
[class.is-active]="isCompactMode"
(click)="isCompactMode = true"
>
Compact
</button>
<button
class="button"
[class.is-active]="!isCompactMode"
(click)="isCompactMode = false"
>
Detailed
</button>
</div>
</div>
</div>
<div class="pseudo-land" *ngIf="isCompactMode && !isArchived">
<label for="vote_pseudo_vote_stack">
Votre pseudo:
</label>
<input
class="is-block"
type="text"
id="vote_pseudo_vote_stack"
placeholder="votre pseudo"
[(ngModel)]="storageService.vote_stack.pseudo"
/>
</div>
<app-poll-results-compact *ngIf="isCompactMode" [poll]="poll"></app-poll-results-compact>
<app-poll-results-detailed *ngIf="!isCompactMode" [poll]="poll"></app-poll-results-detailed>
</div>
</div>
<!-- static buttons-->
<div class="padded">
<div class="message is-info" *ngIf="poll.stacks.length == 0">
<div class="message-body">
aucun vote pour le moment
</div>
</div>
<section class="loading_poll" *ngIf="fetching">
<i class="fa fa-spinner fa-4x"></i>
</section>
<button
class="button is-block submit-votestack is-primary"
(click)="addVoteStack()"
*ngIf="(!isArchived && !storageService.vote_stack) || !storageService.vote_stack.id"
>
<i class="fa fa-paper-plane" aria-hidden="true"></i> Envoyer
</button>
<button
class="btn btn--primary btn-block submit-votestack update"
(click)="updateVoteStack()"
*ngIf="storageService.vote_stack && storageService.vote_stack.id"
>
<i class="fa fa-edit" aria-hidden="true"></i> Mettre à jour
</button>
</div>
<div class="columns">
<div class="column">
<app-comments
*ngIf="poll.allow_comments"
[poll]="poll"
[vote_stack]="storageService.vote_stack"
></app-comments>
<div class="alert has-background-info" *ngIf="!poll.allow_comments">
Ce sondage ne permet pas d'ajouter de commentaires
</div>
</div>
</div>
<!-- fixed bottom buttons-->
<div class="bar-votestack" *ngIf="!isArchived">
<button
class="btn btn-block submit-votestack"
(click)="addVoteStack()"
*ngIf="!storageService.vote_stack || !storageService.vote_stack.id"
>
<i class="fa fa-paper-plane" aria-hidden="true"></i> Envoyer
</button>
<button
class="btn btn--primary btn-block submit-votestack update"
(click)="updateVoteStack()"
*ngIf="storageService.vote_stack && storageService.vote_stack.id"
>
<i class="fa fa-edit" aria-hidden="true"></i> Mettre à jour
</button>
</div>
<div class="alert has-background-info" *ngIf="isArchived">
Ce sondage est archivé
</div>
</div>
</div>
</div>
</section>