tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

display fav choices

This commit is contained in:
Tykayn 2022-02-11 10:02:05 +01:00 committed by tykayn
parent e3b2e685f1
commit 0fde16e14f
7 changed files with 89 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/features/consultation/choice-table/choice-table.component.html
View File

@ -1,6 +1,6 @@
<div class="choice-bars-display" *ngIf="!detailledDisplay"> <div class="choice-bars-display" *ngIf="!detailledDisplay">
<div class="columns" *ngIf="choice.yes && choice.yes.count > 0"> <div class="columns" *ngIf="choice.yes && choice.yes.count > 0">
<div class="column is-narrow"> <div class="column is-narrow choice-label">
{{ 'participation.yes' | translate }} {{ 'participation.yes' | translate }}
</div> </div>
<div class="column"> <div class="column">
@ -15,7 +15,7 @@
</div> </div>
</div> </div>
<div class="columns" *ngIf="choice.maybe && choice.maybe.count > 0"> <div class="columns" *ngIf="choice.maybe && choice.maybe.count > 0">
<div class="column is-narrow"> <div class="column is-narrow choice-label">
{{ 'participation.maybe' | translate }} {{ 'participation.maybe' | translate }}
</div> </div>
<div class="column"> <div class="column">
@ -28,7 +28,7 @@
</div> </div>
</div> </div>
<div class="columns" *ngIf="choice.no && choice.no.count > 0"> <div class="columns" *ngIf="choice.no && choice.no.count > 0">
<div class="column is-narrow"> <div class="column is-narrow choice-label">
{{ 'participation.no' | translate }} {{ 'participation.no' | translate }}
</div> </div>
<div class="column"> <div class="column">

48
src/app/features/consultation/consultation.component.html
View File

@ -1,7 +1,7 @@
<app-header [linkToHome]="false"></app-header> <app-header [linkToHome]="false"></app-header>
<section class="poll_loaded padded consultation step" *ngIf="!fetching && poll"> <section class="poll_loaded padded consultation" *ngIf="!fetching && poll">
<div class="contained-in-large-column"> <div class="step contained-in-large-column">
<div class="rounded-block admin-share-link" *ngIf="poll.admin_key || show_admin_stuff"> <div class="rounded-block admin-share-link" *ngIf="poll.admin_key || show_admin_stuff">
<h2 class="title is-2"> <h2 class="title is-2">
{{ 'participation.share_title' | translate }} {{ 'participation.share_title' | translate }}
@ -72,9 +72,23 @@
</div> </div>
</div> </div>
</div> </div>
<div class="has-votes" *ngIf="poll.stacks.length !== 0"> <div class="has-votes" *ngIf="poll.stacks.length !== 0 && favChoicesList.length">
{{ 'participation.fav_description_one' | translate: { maxYesCount: maxYesCount } }} <div class="one-fav" *ngIf="favChoicesList.length == 1">
{{ 'participation.fav_description_several' | translate }} {{ 'participation.fav_description_one' | translate: { maxYesCount: maxYesCount } }}
</div>
<div class="several-fav" *ngIf="favChoicesList.length > 1">
{{ 'participation.fav_description_several' | translate }}
</div>
<div class="fav block has-background-yes">
<div class="fav-choice" *ngFor="let c of favChoicesList">
<div class="date-choice" *ngIf="poll.kind == 'date'">
{{ c.name | date }}
</div>
<div class="date-choice" *ngIf="poll.kind == 'text'">
{{ c.name }}
</div>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>
@ -106,18 +120,18 @@
<app-poll-results-dinum [poll]="poll" [detailledDisplay]="detailledDisplay"></app-poll-results-dinum> <app-poll-results-dinum [poll]="poll" [detailledDisplay]="detailledDisplay"></app-poll-results-dinum>
</section> </section>
<!-- <section class="poll-comments">--> <section class="poll-comments">
<!-- <h2 class="title is-3">--> <h2 class="title is-3">
<!-- {{ 'participation.comments' | translate }}--> {{ 'participation.comments' | translate }}
<!-- </h2>--> </h2>
<!-- <div class="rounded-block">--> <div class="rounded-block">
<!-- &lt;!&ndash; *ngIf="poll.allow_comments"&ndash;&gt;--> <!-- *ngIf="poll.allow_comments"-->
<!-- <app-comments [poll]="poll" [vote_stack]="storageService.vote_stack"></app-comments>--> <app-comments [poll]="poll" [vote_stack]="storageService.vote_stack"></app-comments>
<!-- <div class="alert has-background-info" *ngIf="!poll.allow_comments">--> <div class="alert has-background-info" *ngIf="!poll.allow_comments">
<!-- Ce sondage ne permet pas d'ajouter de commentaires--> Ce sondage ne permet pas d'ajouter de commentaires
<!-- </div>--> </div>
<!-- </div>--> </div>
<!-- </section>--> </section>
</div> </div>
</section> </section>
<section class="loadin_poll" *ngIf="fetching"> <section class="loadin_poll" *ngIf="fetching">

14
src/app/features/consultation/consultation.component.ts
View File

@ -9,6 +9,7 @@ import { StorageService } from '../../core/services/storage.service';
import { ApiService } from '../../core/services/api.service'; import { ApiService } from '../../core/services/api.service';
import { ToastService } from '../../core/services/toast.service'; import { ToastService } from '../../core/services/toast.service';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
import { Choice } from '../../core/models/choice.model';
@Component({ @Component({
selector: 'app-consultation', selector: 'app-consultation',
@ -28,6 +29,7 @@ export class ConsultationComponent implements OnInit, OnDestroy {
public detailledDisplay: boolean = false; public detailledDisplay: boolean = false;
public display_options_menu: boolean = false; public display_options_menu: boolean = false;
public show_admin_stuff: boolean = true; public show_admin_stuff: boolean = true;
public favChoicesList: Array<Choice> = [];
constructor( constructor(
private router: Router, private router: Router,
@ -50,6 +52,7 @@ export class ConsultationComponent implements OnInit, OnDestroy {
if (newpoll) { if (newpoll) {
this.isArchived = new Date(newpoll.expiracy_date) < new Date(); this.isArchived = new Date(newpoll.expiracy_date) < new Date();
this.poll.choices_grouped.map((elem) => (elem.subSetToYes = false)); this.poll.choices_grouped.map((elem) => (elem.subSetToYes = false));
this.findFavouriteChoices(newpoll);
} }
}); });
@ -122,4 +125,15 @@ export class ConsultationComponent implements OnInit, OnDestroy {
this.toastService.display('erreur à l enregistrement'); this.toastService.display('erreur à l enregistrement');
} }
} }
private findFavouriteChoices(newpoll: Poll) {
let tempFavChoiceList = [];
newpoll.choices.map((choice: Choice) => {
console.log('choice.score', choice.score, newpoll.max_score);
if (choice.score === newpoll.max_score) {
tempFavChoiceList.push(choice);
}
});
this.favChoicesList = tempFavChoiceList;
}
} }

1
src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.html
View File

@ -23,6 +23,7 @@
<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>
{{ choice.score }}
</span> </span>
</div> </div>
<div class="column is-narrow"> <div class="column is-narrow">

13
src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.scss
View File

@ -4,6 +4,15 @@
padding: 0.75rem; padding: 0.75rem;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.favourite {
max-width: 20em;
}
.poll-anwsers {
.rounded-block {
max-width: 20em;
}
}
.list-of-choices { .list-of-choices {
.button { .button {
.icon { .icon {
@ -11,19 +20,23 @@
display: inline-block; display: inline-block;
} }
} }
.choice-label { .choice-label {
font-size: 1rem; font-size: 1rem;
color: #383838; color: #383838;
} }
.choice-header { .choice-header {
margin-left: -0.75rem; margin-left: -0.75rem;
margin-right: -0.75rem; margin-right: -0.75rem;
border-bottom: 1px solid #e2e0fa; border-bottom: 1px solid #e2e0fa;
} }
.max_score { .max_score {
color: #128149; color: #128149;
} }
} }
.date-label { .date-label {
font-size: 1rem; font-size: 1rem;
color: #383838; color: #383838;

5
src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.ts
View File

@ -25,6 +25,11 @@ export class PollResultsDinumComponent implements OnInit {
return new Date(date_string); return new Date(date_string);
} }
/**
* calculer localement le nombre max de réponses pour un choix parmi ses oui peut-être et non.
* c'est différent que de calculer ce maximum par rapport à tous les choix possibles
* @param c
*/
getMax(c: Choice) { getMax(c: Choice) {
return Math.max(c[Answer.YES].count, c[Answer.MAYBE].count, c[Answer.NO].count); return Math.max(c[Answer.YES].count, c[Answer.MAYBE].count, c[Answer.NO].count);
} }

35
src/styles/partials/_forms.scss
View File

@ -12,7 +12,7 @@ input.is-hovered,
select.is-hovered, select.is-hovered,
.is-hovered.textarea, .is-hovered.textarea,
.select select.is-hovered { .select select.is-hovered {
border-color: $font-color !important ; border-color: $font-color !important;
} }
app-step-one, app-step-one,
@ -38,12 +38,14 @@ textarea {
margin-bottom: 1em; margin-bottom: 1em;
} }
} }
button, button,
.button { .button {
&:focus { &:focus {
@extend .outlined; @extend .outlined;
} }
} }
textarea, textarea,
input, input,
.input, .input,
@ -55,6 +57,7 @@ select,
border: solid 1px $font-color !important; border: solid 1px $font-color !important;
border-radius: 4px; border-radius: 4px;
@extend .clickable; @extend .clickable;
&:focus { &:focus {
@extend .outlined; @extend .outlined;
} }
@ -88,11 +91,13 @@ textarea {
overflow-x: auto; overflow-x: auto;
@extend .clickable; @extend .clickable;
} }
.button { .button {
display: inline-block; display: inline-block;
padding: 10px 30px; padding: 10px 30px;
height: auto; height: auto;
} }
.button { .button {
label { label {
margin-bottom: 0; margin-bottom: 0;
@ -101,6 +106,7 @@ textarea {
text-align: left; text-align: left;
} }
} }
input[type='radio'] { input[type='radio'] {
padding: 1em; padding: 1em;
margin-bottom: 0; margin-bottom: 0;
@ -299,11 +305,21 @@ mat-checkbox {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
margin-top: 0; margin-top: 0;
.column { .column {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
&.is-narrow { }
padding-right: 1rem; }
.choice-bars-display {
.columns {
.column {
&.choice-label {
width: 5em;
text-align: right;
padding-right: 1em;
}
} }
} }
} }
@ -350,19 +366,10 @@ label {
} }
} }
.choice-bars-display {
.is-narrow {
width: 5em;
text-align: right;
padding-right: 1em;
}
.bar {
}
}
.people { .people {
max-width: $main-column-width/2; max-width: $main-column-width/2;
} }
.bar-div { .bar-div {
padding: 0.25rem 0.025rem; padding: 0.25rem 0.025rem;
text-align: center; text-align: center;
@ -377,12 +384,14 @@ div {
color: #128149; color: #128149;
@extend .bar-div; @extend .bar-div;
} }
&.has-background-maybe { &.has-background-maybe {
border: solid 1px #86671b; border: solid 1px #86671b;
background: #fffaec; background: #fffaec;
color: #86671b; color: #86671b;
@extend .bar-div; @extend .bar-div;
} }
&.has-background-no { &.has-background-no {
border: solid 1px #d51b38; border: solid 1px #d51b38;
background: #ffecee; background: #ffecee;