mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
display list of date choices in participation
This commit is contained in:
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
|
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>>([
|
||||||
|
@ -90,12 +90,35 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="poll-answers">
|
<section class="poll-answers">
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
<h2 class="title is-3">
|
<h2 class="title is-3">
|
||||||
{{ 'participation.poll' | translate }}
|
{{ 'participation.poll' | translate }}
|
||||||
</h2>
|
</h2>
|
||||||
<div class="rounded-block">
|
|
||||||
<app-poll-results-dinum [poll]="poll"></app-poll-results-dinum>
|
|
||||||
</div>
|
</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>
|
||||||
<section class="poll-comments">
|
<section class="poll-comments">
|
||||||
<h2 class="title is-3">
|
<h2 class="title is-3">
|
||||||
|
@ -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');
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,14 +1,16 @@
|
|||||||
<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">
|
||||||
|
<div class="columns is-vcentered time-span-display">
|
||||||
|
<div class="column">
|
||||||
|
<div class="choice-label">
|
||||||
{{ choice.name }}
|
{{ choice.name }}
|
||||||
</h4>
|
</div>
|
||||||
<div class="columns is-vcentered is-mobile">
|
</div>
|
||||||
<div class="column"></div>
|
|
||||||
<div class="column is-narrow">
|
<div class="column is-narrow">
|
||||||
<span class="max_score" *ngIf="poll.max_score > 0 && choice.score == poll.max_score">
|
<span class="max_score" *ngIf="poll.max_score > 0 && choice.score == poll.max_score">
|
||||||
<i class="fa fa-star fa-2x"></i>
|
<i class="fa fa-star fa-2x"></i>
|
||||||
@ -18,6 +20,62 @@
|
|||||||
<div class="buttons"></div>
|
<div class="buttons"></div>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -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 {
|
.max_score {
|
||||||
color: green;
|
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 {
|
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) {}
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user