display list of date choices in participation
This commit is contained in:
tykayn
parent
422cf9f19e
commit
c3bdc1a015
|
|
@ -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>>([
|
||||
|
|
|
|||
|
|
@ -90,12 +90,35 @@
|
|||
</section>
|
||||
|
||||
<section class="poll-answers">
|
||||
<h2 class="title is-3">
|
||||
{{ 'participation.poll' | translate }}
|
||||
</h2>
|
||||
<div class="rounded-block">
|
||||
<app-poll-results-dinum [poll]="poll"></app-poll-results-dinum>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h2 class="title is-3">
|
||||
{{ 'participation.poll' | translate }}
|
||||
</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>
|
||||
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,79 @@
|
|||
<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">
|
||||
{{ choice.name }}
|
||||
</h4>
|
||||
<div class="columns is-vcentered is-mobile">
|
||||
<div class="column"></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>
|
||||
</span>
|
||||
</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 }}
|
||||
</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>
|
||||
</span>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<div class="buttons"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<div class="buttons"></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>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,32 @@
|
|||
.max_score {
|
||||
color: green;
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue