display list of date choices in participation

This commit is contained in:
Tykayn 2022-02-07 15:33:39 +01:00 committed by tykayn
parent 422cf9f19e
commit c3bdc1a015
7 changed files with 178 additions and 26 deletions

View File

@ -6,6 +6,10 @@ export class ChoiceGroup {
subSetToYes = false; // to know if all the choices are set to YES, to toggle them all at once without checking them individually
choices: Choice[];
}
export class AnswerStats {
count: number;
people: Array<string>;
}
export class Choice {
public id: number;
@ -14,9 +18,9 @@ export class Choice {
public score: number;
public enabled: boolean;
public url?: string;
public yes?: any;
public no?: any;
public maybe?: any;
public yes?: AnswerStats;
public no?: AnswerStats;
public maybe?: AnswerStats;
constructor(
public participants: Map<Answer, Set<Owner>> = new Map<Answer, Set<Owner>>([

View File

@ -90,12 +90,35 @@
</section>
<section class="poll-answers">
<div class="columns">
<div class="column">
<h2 class="title is-3">
{{ 'participation.poll' | translate }}
</h2>
<div class="rounded-block">
<app-poll-results-dinum [poll]="poll"></app-poll-results-dinum>
</div>
<div class="column">
<button class="no-outline button" (click)="detailledDisplay = !detailledDisplay">
<span *ngIf="detailledDisplay">
<!-- <img class="icon" src="assets/icons/flag.svg" alt="icone magnifying" />-->
{{ 'participation.mode_comptact' | translate }}
</span>
<span *ngIf="!detailledDisplay">
<!-- <img class="icon" src="assets/icons/settings.svg" alt="icone magnifying" />-->
{{ 'participation.mode_detailed' | translate }}
</span>
</button>
</div>
</div>
<app-poll-results-dinum [poll]="poll" [detailledDisplay]="detailledDisplay"></app-poll-results-dinum>
<!--<app-poll-results-compact [poll]="poll"></app-poll-results-compact>-->
<!-- <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>-->
</section>
<section class="poll-comments">
<h2 class="title is-3">

View File

@ -26,6 +26,7 @@ export class ConsultationComponent implements OnInit, OnDestroy {
private pollSlug: string;
private pass_hash: string;
maxYesCount: any = 1;
detailledDisplay: boolean = false;
constructor(
private router: Router,
@ -84,4 +85,40 @@ export class ConsultationComponent implements OnInit, OnDestroy {
displayOptions() {
alert('TODO');
}
/**
* create a new vote stack
*/
addVoteStack(): void {
this.storageService.vote_stack.poll_custom_url = this.poll.custom_url;
this.pollService.pass_hash = this.pass_hash;
this.toastService.display('envoi du vote ....');
this.api
.sendNewVoteStackOfPoll(this.storageService.vote_stack)
.then((resp: any) => {
console.log('sendNewVoteStackOfPoll resp', resp);
this.storeVoteStackAndReloadPoll(resp);
})
// eslint-disable-next-line @typescript-eslint/unbound-method
.catch(this.api.ousideHandleError);
}
/**
* store the updated vote stack
* @param voteStack
*/
storeVoteStackAndReloadPoll(voteStack: any) {
if (voteStack.status == 200) {
this.storageService.mapVotes(voteStack.data);
this.pollService.enrichVoteStackWithCurrentPollChoicesDefaultVotes(this.storageService.vote_stack);
if (this.pass_hash) {
this.pollService.loadPollByCustomUrlWithPasswordHash(this.poll.custom_url, this.pass_hash);
} else {
this.pollService.loadPollByCustomUrl(this.poll.custom_url);
}
} else {
this.toastService.display('erreur à l enregistrement');
}
}
}

View File

@ -1,14 +1,16 @@
<div class="date-choices" *ngIf="poll.kind == 'date'">
<div class="box" *ngFor="let group of poll.choices_grouped">
<h3 class="title is-3">
<div class="rounded-block" *ngFor="let group of poll.choices_grouped">
<div class="date-label">
{{ showAsDate(group.date_string) | date: 'fullDate':'Europe/Paris' }}
</h3>
<div class="time-slice-choice" *ngFor="let choice of group.choices">
<h4 class="title is-4 choice-label">
</div>
<div class="list-of-choices">
<div class="time-slice-choice white-block" *ngFor="let choice of group.choices; index as ii">
<div class="columns is-vcentered time-span-display">
<div class="column">
<div class="choice-label">
{{ choice.name }}
</h4>
<div class="columns is-vcentered is-mobile">
<div class="column"></div>
</div>
</div>
<div class="column is-narrow">
<span class="max_score" *ngIf="poll.max_score > 0 && choice.score == poll.max_score">
<i class="fa fa-star fa-2x"></i>
@ -18,6 +20,62 @@
<div class="buttons"></div>
</div>
</div>
<div class="choice-header" *ngIf="poll.max_score > 0"></div>
<div class="choice-bars-display" *ngIf="!detailledDisplay">
<div class="columns" *ngIf="choice.yes.count > 0">
<div class="column is-narrow">
{{ 'participation.yes' | translate }}
</div>
<div class="column">
<div class="bar has-text-centered has-background-yes">
{{ choice.yes.count }}
</div>
</div>
</div>
<div class="columns" *ngIf="choice.maybe.count > 0">
<div class="column is-narrow">
{{ 'participation.maybe' | translate }}
</div>
<div class="column">
<div class="bar has-text-centered has-background-maybe">
{{ choice.maybe.count }}
</div>
</div>
</div>
<div class="columns" *ngIf="choice.no.count > 0">
<div class="column is-narrow">
{{ 'participation.no' | translate }}
</div>
<div class="column">
<div class="bar has-text-centered has-background-no">
{{ choice.no.count }}
</div>
</div>
</div>
</div>
<div class="choice-details-display" *ngIf="detailledDisplay">
<p class="description-details">
{{ 'participation.details' | translate }}
<!-- display each name for each kind of answer-->
</p>
<div class="choice-display-yes">
<div class="people has-background-yes" *ngFor="let peopleName of choice.yes.people">
<img class="icon" src="assets/icons/check-square.svg" alt="icone ok" /> {{ peopleName }}
</div>
</div>
<div class="choice-display-maybe">
<div class="people has-background-maybe" *ngFor="let peopleName of choice.maybe.people">
<img class="icon" src="assets/icons/box.svg" alt="icone ok" /> {{ peopleName }}
</div>
</div>
<div class="choice-display-no">
<div class="people has-background-no" *ngFor="let peopleName of choice.no.people">
<img class="icon" src="assets/icons/x-square.svg" alt="icone ok" /> {{ peopleName }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -1,3 +1,32 @@
.white-block {
background: white;
margin-bottom: 1rem;
padding: 0.75rem;
border-radius: 0.5rem;
}
.list-of-choices {
.button {
.icon {
margin-right: 1ch !important;
display: inline-block;
}
}
.choice-label {
font-size: 1rem;
color: #383838;
}
.choice-header {
margin-left: -0.75rem;
margin-right: -0.75rem;
border-bottom: 1px solid #e2e0fa;
}
.max_score {
color: green;
}
}
.date-label {
font-size: 1rem;
color: #383838;
font-weight: bold;
margin-bottom: 1.25rem;
}

View File

@ -11,6 +11,7 @@ import { StorageService } from '../../../core/services/storage.service';
})
export class PollResultsDinumComponent implements OnInit {
@Input() public poll: Poll;
@Input() public detailledDisplay: boolean = false;
public answerEnum = Answer;
constructor(private modalService: ModalService, private storageService: StorageService) {}

View File

@ -86,7 +86,7 @@
type="submit"
name="add-comment"
class="button is-primary is-fullwidth"
value="Ajouter mon commentaire ✉️"
value="{{ 'participation.send_button' | translate }}"
(click)="addComment()"
/>
</div>