add AR lang 👽 and complete sections of consultation

src/app/core/enums/language.enum.ts

@@ -3,6 +3,7 @@
  * Cette enum est utilisé dans le composant de sélection de langue.
  */
 export enum LanguageEnum {
+	ar = 'ar',
 	br = 'br',
 	ca = 'ca',
 	de = 'de',

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

@@ -1,6 +1,52 @@
+<div class="step-info">
+	<div class="container">
+		<div class="columns">
+			<div class="column">
+				<a
+					class="logo-home-link navbar-item pull-left is-hidden-mobile"
+					[routerLink]="['/']"
+					routerLinkActive="active"
+				>
+					<img
+						class="stepper-app-logo logo"
+						*ngIf="environment.appLogo"
+						src="{{ environment.appLogo }}"
+						alt="accueil {{ environment.appTitle }}"
+					/>
+				</a>
+				<h1>
+					<span class="step-title-poll" *ngIf="pollService.step_current == 1">
+						{{ 'creation.title' | translate }}
+					</span>
+
+					<span *ngIf="pollService.step_current > 1">
+						<span class="step-title-poll poll-title-filled" *ngIf="pollService.form.value.title.length">
+							{{ pollService.form.value.title }}
+						</span>
+						<span class="step-title-poll poll-title-empty" *ngIf="!pollService.form.value.title.length">
+							{{ 'nav.no_title' | translate }}
+						</span>
+					</span>
+				</h1>
+			</div>
+			<div class="column has-text-right">
+				<app-language-selector class="nav-button"></app-language-selector>
+				<button
+					class="has-no-border nav-button cancel-button"
+					[routerLink]="'/'"
+					id="display_cancel_popup_button"
+					aria-haspopup="dialog"
+				>
+					{{ 'nav.leave' | translate }} <i class="fa fa-times"></i>
+				</button>
+			</div>
+		</div>
+	</div>
+</div>
+
 <section class="poll_loaded padded consultation" *ngIf="!fetching && poll">
 	<div class="step">
-		<div class="rounded-box">
+		<section class="main-title-poll rounded-block">
 			<div class="columns">
 				<div class="column">
 					<h2 class="title is-2">
@@ -18,7 +64,51 @@
 			<p class="description">
 				{{ poll.description }}
 			</p>
-		</div>
+			<button class="vote-button is-primary button" [routerLink]="'/poll/' + poll.custom_url + '/vote'">
+				{{ 'participation.fav_title' | translate }}
+			</button>
+		</section>
+		<section class="favourite">
+			<h2 class="title is-3">
+				{{ 'participation.fav_choice' | translate }}
+			</h2>
+			<div class="rounded-block">
+				<div class="section no-votes">
+					<div class="message is-info" *ngIf="poll.stacks.length == 0">
+						<div class="message-body">
+							{{ 'participation.no_votes_yet' | translate }}
+							<br />
+							{{ 'participation.fav_description_not_exist' | translate }}
+						</div>
+					</div>
+				</div>
+				<div class="has-votes" *ngIf="poll.stacks.length !== 0">
+					{{ 'participation.fav_description_one' | translate: { maxYesCount: maxYesCount } }}
+					{{ 'participation.fav_description_several' | translate }}
+				</div>
+			</div>
+		</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>
+		</section>
+		<section class="poll-comments">
+			<h2 class="title is-3">
+				{{ 'participation.comments' | translate }}
+			</h2>
+			<div class="rounded-block">
+				<!--					*ngIf="poll.allow_comments"-->
+				<app-comments [poll]="poll" [vote_stack]="storageService.vote_stack"></app-comments>
+				<!--				<div class="alert has-background-info" *ngIf="!poll.allow_comments">-->
+				<!--					Ce sondage ne permet pas d'ajouter de commentaires-->
+				<!--				</div>-->
+			</div>
+		</section>
 	</div>
 </section>
 <section class="loadin_poll" *ngIf="fetching">

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

@@ -4,3 +4,12 @@
 	left: 1em;
 	z-index: 10;
 }
+
+.poll_loaded {
+	.title {
+		margin-bottom: 0;
+	}
+	.description {
+		min-height: 2rem;
+	}
+}

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

@@ -8,6 +8,7 @@ import { PollUtilitiesService } from '../../core/services/poll.utilities.service
 import { StorageService } from '../../core/services/storage.service';
 import { ApiService } from '../../core/services/api.service';
 import { ToastService } from '../../core/services/toast.service';
+import { environment } from 'src/environments/environment';
 
 @Component({
 	selector: 'app-consultation',
@@ -17,12 +18,14 @@ import { ToastService } from '../../core/services/toast.service';
 export class ConsultationComponent implements OnInit, OnDestroy {
 	public fetching = true;
 
+	public environment = environment;
 	private routeSubscription: Subscription;
 	window: any;
 	private isArchived: boolean;
 	private poll: Poll;
 	private pollSlug: string;
 	private pass_hash: string;
+	maxYesCount: any = 1;
 
 	constructor(
 		private router: Router,

src/app/features/consultation/consultation.module.ts

@@ -17,6 +17,7 @@ import { SuccessComponent } from './success/success.component';
 import { AdministrationModule } from '../administration/administration.module';
 import { EditComponent } from './edit/edit.component';
 import { ResultsRoundedComponent } from './results-rounded/results-rounded.component';
+import { PollResultsDinumComponent } from './poll-results-dinum/poll-results-dinum.component';
 
 @NgModule({
 	declarations: [
@@ -30,6 +31,7 @@ import { ResultsRoundedComponent } from './results-rounded/results-rounded.compo
 		SuccessComponent,
 		EditComponent,
 		ResultsRoundedComponent,
+		PollResultsDinumComponent,
 	],
 	imports: [
 		CommonModule,

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

@@ -6,6 +6,31 @@
 	<div class="date-choices" *ngIf="pollService.poll.kind == 'date'">
 		<div class="box" *ngFor="let group of poll.choices_grouped"></div>
 	</div>
-	<div class="rounded-block"></div>
+	<div class="rounded-block">
+		<div class="time-slice-choice" *ngFor="let choice of group.choices">
+			<h4 class="title is-4 choice-label">
+				{{ choice.name }}
+			</h4>
+
+			<app-choice-button
+				[poll]="poll"
+				[choice]="choice"
+				[answerKind]="'YES'"
+				*ngIf="poll.allowed_answers.indexOf('yes') !== -1"
+			></app-choice-button>
+			<app-choice-button
+				[poll]="poll"
+				[choice]="choice"
+				[answerKind]="'MAYBE'"
+				*ngIf="poll.allowed_answers.indexOf('maybe') !== -1"
+			></app-choice-button>
+			<app-choice-button
+				[poll]="poll"
+				[choice]="choice"
+				[answerKind]="'NO'"
+				*ngIf="poll.allowed_answers.indexOf('no') !== -1"
+			></app-choice-button>
+		</div>
+	</div>
 </div>
 <app-nav-steps [next_step_number]="2" [previous_step_number]="0"></app-nav-steps>

src/app/features/consultation/poll-results-compact/poll-results-compact.component.html

@@ -1,4 +1,3 @@
-{{ poll.choices.length }} choix
 <div class="date-choices" *ngIf="poll.kind == 'date'">
 	<div class="box" *ngFor="let group of poll.choices_grouped">
 		<h3 class="title is-3">
@@ -9,7 +8,7 @@
 			>
 				<i class="fa fa-check-circle-o fa"></i>
 			</button>
-			{{ showAsDate(group.date_string) | date: 'fullDate':'Europe/Paris':'fr' }}
+			{{ showAsDate(group.date_string) | date: 'fullDate':'Europe/Paris' }}
 		</h3>
 		<div class="time-slice-choice" *ngFor="let choice of group.choices">
 			<div class="columns is-vcentered is-mobile">

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

@@ -0,0 +1,23 @@
+<div class="date-choices" *ngIf="poll.kind == 'date'">
+	<div class="box" *ngFor="let group of poll.choices_grouped">
+		<h3 class="title is-3">
+			{{ 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="column is-narrow">
+					<div class="buttons"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,3 @@
+.max_score {
+	color: green;
+}

src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PollResultsDinumComponent } from './poll-results-dinum.component';
+
+describe('PollResultsDinumComponent', () => {
+	let component: PollResultsDinumComponent;
+	let fixture: ComponentFixture<PollResultsDinumComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [PollResultsDinumComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(PollResultsDinumComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

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

@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Poll } from '../../../core/models/poll.model';
+import { Answer } from '../../../core/enums/answer.enum';
+import { ModalService } from '../../../core/services/modal.service';
+import { StorageService } from '../../../core/services/storage.service';
+
+@Component({
+	selector: 'app-poll-results-dinum',
+	templateUrl: './poll-results-dinum.component.html',
+	styleUrls: ['./poll-results-dinum.component.scss'],
+})
+export class PollResultsDinumComponent implements OnInit {
+	@Input() public poll: Poll;
+	public answerEnum = Answer;
+	constructor(private modalService: ModalService, private storageService: StorageService) {}
+
+	ngOnInit(): void {}
+
+	toggleAnswer(choice_id: number, value: string) {
+		this.storageService.toggleAnswer(choice_id, value);
+	}
+
+	showAsDate(date_string: string) {
+		return new Date(date_string);
+	}
+}

src/app/shared/components/comments/comments.component.html

@@ -4,8 +4,8 @@
 	</div>
 	<section class="comments-part" *ngIf="!poll.is_archived && poll.comments">
 		<h2 class="title is-2">
-			<i class="fa fa-comment"></i>
+			<!--			{{ poll.comments.length }}-->
-			{{ poll.comments.length }} Commentaires
+			{{ 'participation.comments_new' | translate }}
 		</h2>
 
 		<article class="message" *ngFor="let comment of poll.comments">
@@ -14,9 +14,17 @@
 					<em class="cname"> {{ comment.pseudo }} </em>,
 
 					<span class="date date-days-ago">
-						il y a
+						{{
-						{{ calculateDaysAgoOfComment(comment.created_at) }} jours, le </span
+							'participation.dipslay_comments_delay'
-					><span class="date is-small">
+								| translate
+									: {
+											counter_delay: calculateDaysAgoOfComment(comment.created_at),
+											time_unit: 'participation.days' | translate
+									  }
+						}}
+						{{ calculateDaysAgoOfComment(comment.created_at) }} ,
+					</span>
+					<span class="date is-small">
 						{{ comment.created_at | date: 'short':'Europe/Paris':'fr_FR' }}
 					</span>
 				</p>
@@ -29,29 +37,31 @@
 		</article>
 	</section>
 	<section class="add-comment" *ngIf="!poll.is_archived && vote_stack.owner">
-		<h2 class="margin-top-x7">Laisser un commentaire</h2>
 		<article class="message">
 			<div class="message-header">
 				<div class="field">
-					<span class="control has-icons-left has-icons-right">
+					<!--					<span class="control has-icons-left has-icons-right">-->
-						<input
+					<!--						<input-->
-							type="email"
+					<!--							type="email"-->
-							name="cremail"
+					<!--							name="cremail"-->
-							id="email_comment"
+					<!--							id="email_comment"-->
-							[(ngModel)]="vote_stack.owner.email"
+					<!--							[(ngModel)]="vote_stack.owner.email"-->
-							required="required"
+					<!--							required="required"-->
-						/>
+					<!--						/>-->
-						<span class="icon is-small is-left">
+					<!--						<span class="icon is-small is-left">-->
-							<i class="fa fa-envelope"></i>
+					<!--							<i class="fa fa-envelope"></i>-->
-						</span>
+					<!--						</span>-->
-					</span>
+					<!--					</span>-->
+					<label for="comment_pseudo">
+						{{ 'participation.name_label' | translate }}
+					</label>
 					<span class="control has-icons-left">
 						<input
 							type="text"
 							class="margin-btm-x3"
 							name="crname"
 							[(ngModel)]="vote_stack.pseudo"
-							id="crname"
+							id="comment_pseudo"
 							required="required"
 						/>
 						<span class="icon is-small is-left">
@@ -65,14 +75,17 @@
 				<!--			<label for="cremail"><i class="fa fa-envelope" aria-hidden="true"></i> Votre email :</label>-->
 			</div>
 			<div class="message-body">
-				<label for="comment">Votre commentaire :</label>
+				<label for="comment">
+					{{ 'participation.content_label' | translate }}
+				</label>
+
 				<br />
 				<textarea name="comment" id="comment" [(ngModel)]="vote_stack.comment"> </textarea>
 
 				<input
 					type="submit"
 					name="add-comment"
-					class="btn btn--primary btn--outline"
+					class="button is-primary is-fullwidth"
 					value="Ajouter mon commentaire ✉️"
 					(click)="addComment()"
 				/>

src/assets/i18n/en.json

@@ -755,6 +755,7 @@
         "your-vote-has-been-saved-but-please-note-you-need-to-keep-this-personalised-link-to-be-able-to-edit-": "Your vote has been saved, but please note: you need to keep this personalized link to be able to edit your vote."
     },
     "LANGUAGES": {
+        "AR": "Arabic",
         "DE": "German",
         "FR": "French",
         "BR": "Breton",
@@ -771,6 +772,22 @@
         "OC": "Occitan",
         "SV": "Swedish"
     },
+		"LANGUAGES_SHORT": {
+			"AR": "Ar",
+			"DE": "De",
+			"FR": "Fr",
+			"BR": "Br",
+			"CA": "Ca",
+			"EL": "el",
+			"ES": "Es",
+			"EN": "En",
+			"GL": "gl",
+			"HU": "hu",
+			"IT": "It",
+			"NL": "Nl",
+			"OC": "oc",
+			"SV": "sv"
+		},
     "calendar_widget": {
         "startsWith": "Starts with",
         "contains": "Contains",

src/assets/i18n/fr.json

@@ -760,6 +760,7 @@
         "your-vote-has-been-saved-but-please-note-you-need-to-keep-this-personalised-link-to-be-able-to-edit-": "Votre vote a bien été pris en compte, mais faites attention : ce sondage n'autorise l'édition de votre vote qu'avec le lien personnalisé suivant ; conservez-le précieusement"
     },
     "LANGUAGES": {
+        "AR": "Arabe",
         "DE": "Allemand",
         "FR": "Français",
         "BR": "Breton",
@@ -777,6 +778,7 @@
         "SV": "Suédois"
     },
     "LANGUAGES_SHORT": {
+        "AR": "Ar",
         "DE": "De",
         "FR": "Fr",
         "BR": "Br",

src/styles/partials/_forms.scss

@@ -310,6 +310,15 @@ mat-checkbox {
 	.icon {
 		width: 1rem;
 	}
+
+	.columns {
+		margin-left: 0;
+		margin-right: 0;
+		margin-top: 0;
+		.column {
+			padding-left: 0;
+		}
+	}
 }
 
 // resume de la création de sondage