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

View File

@ -90,12 +90,35 @@
</section> </section>
<section class="poll-answers"> <section class="poll-answers">
<h2 class="title is-3"> <div class="columns">
{{ 'participation.poll' | translate }} <div class="column">
</h2> <h2 class="title is-3">
<div class="rounded-block"> {{ 'participation.poll' | translate }}
<app-poll-results-dinum [poll]="poll"></app-poll-results-dinum> </h2>
</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> </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>
<section class="poll-comments"> <section class="poll-comments">
<h2 class="title is-3"> <h2 class="title is-3">

View File

@ -26,6 +26,7 @@ export class ConsultationComponent implements OnInit, OnDestroy {
private pollSlug: string; private pollSlug: string;
private pass_hash: string; private pass_hash: string;
maxYesCount: any = 1; maxYesCount: any = 1;
detailledDisplay: boolean = false;
constructor( constructor(
private router: Router, private router: Router,
@ -84,4 +85,40 @@ export class ConsultationComponent implements OnInit, OnDestroy {
displayOptions() { displayOptions() {
alert('TODO'); 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,21 +1,79 @@
<div class="date-choices" *ngIf="poll.kind == 'date'"> <div class="date-choices" *ngIf="poll.kind == 'date'">
<div class="box" *ngFor="let group of poll.choices_grouped"> <div class="rounded-block" *ngFor="let group of poll.choices_grouped">
<h3 class="title is-3"> <div class="date-label">
{{ showAsDate(group.date_string) | date: 'fullDate':'Europe/Paris' }} {{ showAsDate(group.date_string) | date: 'fullDate':'Europe/Paris' }}
</h3> </div>
<div class="time-slice-choice" *ngFor="let choice of group.choices"> <div class="list-of-choices">
<h4 class="title is-4 choice-label"> <div class="time-slice-choice white-block" *ngFor="let choice of group.choices; index as ii">
{{ choice.name }} <div class="columns is-vcentered time-span-display">
</h4> <div class="column">
<div class="columns is-vcentered is-mobile"> <div class="choice-label">
<div class="column"></div> {{ choice.name }}
<div class="column is-narrow"> </div>
<span class="max_score" *ngIf="poll.max_score > 0 && choice.score == poll.max_score"> </div>
<i class="fa fa-star fa-2x"></i> <div class="column is-narrow">
</span> <span class="max_score" *ngIf="poll.max_score > 0 && choice.score == poll.max_score">
<i class="fa fa-star fa-2x"></i>
</span>
</div>
<div class="column is-narrow">
<div class="buttons"></div>
</div>
</div> </div>
<div class="column is-narrow"> <div class="choice-header" *ngIf="poll.max_score > 0"></div>
<div class="buttons"></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> </div>

View File

@ -1,3 +1,32 @@
.max_score { .white-block {
color: green; 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 { export class PollResultsDinumComponent implements OnInit {
@Input() public poll: Poll; @Input() public poll: Poll;
@Input() public detailledDisplay: boolean = false;
public answerEnum = Answer; public answerEnum = Answer;
constructor(private modalService: ModalService, private storageService: StorageService) {} constructor(private modalService: ModalService, private storageService: StorageService) {}

View File

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