color on voting step

This commit is contained in:
Tykayn 2022-02-07 19:05:14 +01:00 committed by tykayn
parent 0012ad3f77
commit ecea75b351
7 changed files with 121 additions and 34 deletions

View File

@ -4,22 +4,19 @@
<h2 class="title is-2"> <h2 class="title is-2">
{{ 'owner.title' | translate }} {{ 'owner.title' | translate }}
</h2> </h2>
<label for="name"> <label for="pseudo">
{{ 'owner.name_label' | translate }} {{ 'owner.name_label' | translate }}
</label> </label>
<input class="input" type="text" id="name" /> <input class="input" type="text" id="pseudo" [(ngModel)]="storageService.vote_stack.pseudo" />
<button class="button is-default pull-left" [routerLink]="['/poll/' + pollName + '/consultation/vote']">
<div class="columns"> {{ 'SENTENCES.Back' | translate }}
<div class="column"> </button>
<button class="button is-default" [routerLink]="['/poll/' + pollName + '/consultation/vote']"> <button
{{ 'SENTENCES.Back' | translate }} class="button is-success pull-right"
</button> (click)="sendVoteStack()"
</div> [disabled]="!storageService.vote_stack.pseudo"
<div class="column"> >
<button class="button is-success" (click)="sendVoteStack()"> {{ 'participation.vote_button' | translate }}
{{ 'participation.vote_button' | translate }} </button>
</button>
</div>
</div>
</div> </div>
</div> </div>

View File

@ -5,6 +5,7 @@ import { Router } from '@angular/router';
import { ToastService } from '../../../core/services/toast.service'; import { ToastService } from '../../../core/services/toast.service';
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { StorageService } from '../../../core/services/storage.service'; import { StorageService } from '../../../core/services/storage.service';
import { ApiService } from '../../../core/services/api.service';
@Component({ @Component({
selector: 'app-consultation-user', selector: 'app-consultation-user',
@ -13,9 +14,11 @@ import { StorageService } from '../../../core/services/storage.service';
}) })
export class ConsultationUserComponent implements OnInit { export class ConsultationUserComponent implements OnInit {
pollName: string; pollName: string;
private pass_hash: any;
constructor( constructor(
private dateUtilitiesService: DateUtilitiesService, private dateUtilitiesService: DateUtilitiesService,
private router: Router, private router: Router,
private api: ApiService,
private toastService: ToastService, private toastService: ToastService,
private cd: ChangeDetectorRef, private cd: ChangeDetectorRef,
@Inject(DOCUMENT) private document: any, @Inject(DOCUMENT) private document: any,
@ -28,6 +31,43 @@ export class ConsultationUserComponent implements OnInit {
ngOnInit(): void {} ngOnInit(): void {}
sendVoteStack() { sendVoteStack() {
alert('TODO'); this.addVoteStack();
}
/**
* create a new vote stack
*/
addVoteStack(): void {
this.storageService.vote_stack.poll_custom_url = this.pollService._poll.getValue().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.pollService._poll.getValue().custom_url,
this.pass_hash
);
} else {
this.pollService.loadPollByCustomUrl(this.pollService._poll.getValue().custom_url);
}
} else {
this.toastService.display('erreur à l enregistrement');
}
} }
} }

View File

@ -8,12 +8,13 @@
<!-- <div class="box" *ngFor="let group of poll.choices"></div>--> <!-- <div class="box" *ngFor="let group of poll.choices"></div>-->
<!-- </div>--> <!-- </div>-->
<div class="rounded-block" *ngIf="poll"> <div class="" *ngIf="poll">
{{ poll.title }} <div class="time-slice-choice rounded-block" *ngFor="let group_choice of poll.choices_grouped">
<div class="time-slice-choice" *ngFor="let group_choice of poll.choices_grouped"> <div class="groupe-label">
<h4 class="title is-4 choice-label"> <!-- {{ (dayStringFromDateString(group_choice.date_string))| translate}}-->
{{ group_choice.name }} <!-- {{"calendar_widget.dayNames.Thursday" | translate}}-->
</h4> {{ dateFromString(group_choice.date_string) | date: 'EEEE dd MMMM':'Europe/Paris' }}
</div>
<div class="choice-subset" *ngFor="let choice of group_choice.choices"> <div class="choice-subset" *ngFor="let choice of group_choice.choices">
<div class="choice-label"> <div class="choice-label">
{{ choice.name }} {{ choice.name }}
@ -26,18 +27,19 @@
[answerKind]="'YES'" [answerKind]="'YES'"
></app-choice-button-dinum> ></app-choice-button-dinum>
<!-- *ngIf="poll.allowed_answers?.indexOf('yes') !== -1"--> <!-- *ngIf="poll.allowed_answers?.indexOf('yes') !== -1"-->
<app-choice-button-dinum
[poll]="poll"
[choice]="choice"
[answerKind]="'MAYBE'"
></app-choice-button-dinum>
<!-- *ngIf="poll.allowed_answers?.indexOf('maybe') !== -1"-->
<app-choice-button-dinum <app-choice-button-dinum
[poll]="poll" [poll]="poll"
[choice]="choice" [choice]="choice"
[answerKind]="'NO'" [answerKind]="'NO'"
></app-choice-button-dinum> ></app-choice-button-dinum>
<!-- *ngIf="poll.allowed_answers?.indexOf('no') !== -1"--> <!-- *ngIf="poll.allowed_answers?.indexOf('no') !== -1"-->
<app-choice-button-dinum
[poll]="poll"
[choice]="choice"
[answerKind]="'MAYBE'"
></app-choice-button-dinum>
<!-- *ngIf="poll.allowed_answers?.indexOf('maybe') !== -1"-->
</div> </div>
</div> </div>
</div> </div>
@ -49,7 +51,7 @@
<div class="bottom-step-buttons" *ngIf="poll"> <div class="bottom-step-buttons" *ngIf="poll">
<div class="contained-in-main-column"> <div class="contained-in-main-column">
<button <button
class="button-next pull-right" class="button-next is-primary pull-right"
[routerLink]="['/poll/' + poll.custom_url + '/consultation/vote/user-infos']" [routerLink]="['/poll/' + poll.custom_url + '/consultation/vote/user-infos']"
> >
<b> <b>

View File

@ -0,0 +1,15 @@
.app-choice-button-dinum {
button {
margin-right: 1rem;
display: inline-block;
}
.groupe-label {
color: #383838;
font-weight: bold;
font-size: 1.85rem;
}
.choice-label {
font-weight: bold;
font-size: 1rem;
}
}

View File

@ -1,8 +1,6 @@
import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { DateUtilitiesService } from '../../../core/services/date.utilities.service';
import { ActivatedRoute, ParamMap, Router } from '@angular/router'; import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { ToastService } from '../../../core/services/toast.service'; import { ToastService } from '../../../core/services/toast.service';
import { DOCUMENT } from '@angular/common';
import { StorageService } from '../../../core/services/storage.service'; import { StorageService } from '../../../core/services/storage.service';
import { PollService } from '../../../core/services/poll.service'; import { PollService } from '../../../core/services/poll.service';
import { Poll } from '../../../core/models/poll.model'; import { Poll } from '../../../core/models/poll.model';
@ -61,4 +59,25 @@ export class EditComponent implements OnInit {
} }
}); });
} }
/**
* make a date from an ISO string
* @param s
*/
dateFromString(s: string) {
return new Date(s);
}
dayStringFromDateString(date_string: string): string {
let date = this.dateFromString(date_string);
return (
'calendar_widget.dayNames.' +
date.toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'short',
day: 'numeric',
})
);
}
} }

View File

@ -1,6 +1,6 @@
<button <button
class="choice-button is-white" class="choice-button has-text-centered {{ 'is-answer-' + answerKind }}"
[ngClass]="{ 'is-primary': storageService.choiceHasAnswerOfValue(choice.id, answerEnum[answerKind]) }" [ngClass]="{ 'is-active': storageService.choiceHasAnswerOfValue(choice.id, answerEnum[answerKind]) }"
(click)="storageService.toggleAnswer(choice.id, answerEnum[answerKind])" (click)="storageService.toggleAnswer(choice.id, answerEnum[answerKind])"
*ngIf="poll.allowed_answers.indexOf(answerEnum[answerKind]) !== -1" *ngIf="poll.allowed_answers.indexOf(answerEnum[answerKind]) !== -1"
> >

View File

@ -0,0 +1,14 @@
.choice-button {
margin-right: 1em;
&.is-active {
&.is-answer-YES {
background: green;
}
&.is-answer-MAYBE {
background: orange;
}
&.is-answer-NO {
background: red;
}
}
}