color on voting step

src/app/features/consultation/consultation-user/consultation-user.component.html

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

src/app/features/consultation/consultation-user/consultation-user.component.ts

@@ -5,6 +5,7 @@ import { Router } from '@angular/router';
 import { ToastService } from '../../../core/services/toast.service';
 import { DOCUMENT } from '@angular/common';
 import { StorageService } from '../../../core/services/storage.service';
+import { ApiService } from '../../../core/services/api.service';
 
 @Component({
 	selector: 'app-consultation-user',
@@ -13,9 +14,11 @@ import { StorageService } from '../../../core/services/storage.service';
 })
 export class ConsultationUserComponent implements OnInit {
 	pollName: string;
+	private pass_hash: any;
 	constructor(
 		private dateUtilitiesService: DateUtilitiesService,
 		private router: Router,
+		private api: ApiService,
 		private toastService: ToastService,
 		private cd: ChangeDetectorRef,
 		@Inject(DOCUMENT) private document: any,
@@ -28,6 +31,43 @@ export class ConsultationUserComponent implements OnInit {
 	ngOnInit(): void {}
 
 	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');
+		}
 	}
 }

src/app/features/consultation/edit/edit.component.html

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

src/app/features/consultation/edit/edit.component.scss

@@ -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;
+	}
+}

src/app/features/consultation/edit/edit.component.ts

@@ -1,8 +1,6 @@
-import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
-import { DateUtilitiesService } from '../../../core/services/date.utilities.service';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ToastService } from '../../../core/services/toast.service';
-import { DOCUMENT } from '@angular/common';
 import { StorageService } from '../../../core/services/storage.service';
 import { PollService } from '../../../core/services/poll.service';
 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',
+			})
+		);
+	}
 }

src/app/features/shared/components/choice-button-dinum/choice-button-dinum.component.html

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

src/app/features/shared/components/choice-button-dinum/choice-button-dinum.component.scss

@@ -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;
+		}
+	}
+}