show detailed display at first, fix range date values in table

src/app/app.component.ts

@@ -10,6 +10,7 @@ import { NavigationEnd, Route, Router, RouterOutlet } from '@angular/router';
 import { slideInAnimation } from './shared/animations/main';
 import { FramaKeyboardShortcuts } from './shared/shortcuts/main';
 import { ShortcutEventOutput, ShortcutInput } from 'ng-keyboard-shortcuts';
+import { PollService } from './core/services/poll.service';
 
 @Component({
 	selector: 'app-root',
@@ -33,6 +34,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 		private router: Router,
 		private titleService: Title,
 		private themeService: ThemeService,
+		private pollService: PollService,
 		private languageService: LanguageService // private mockingService: MockingService
 	) {}
 
@@ -50,6 +52,8 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 	ngOnInit(): void {
 		this.printpath('', this.router.config);
 		this.router.events.subscribe((evt) => {
+			console.log('route changed', evt);
+
 			if (!(evt instanceof NavigationEnd)) {
 				return;
 			}
@@ -59,7 +63,10 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 		if (!environment.production) {
 			this.appTitle += ' [DEV]';
 		}
-		this.titleService.setTitle(this.appTitle);
+
+		const loadedPoll = this.pollService._poll.getValue();
+
+		this.titleService.setTitle(this.appTitle + ' - ' + loadedPoll.title);
 		this.languageService.configureAndInitTranslations();
 		this.themeSubscription = this.themeService.theme.subscribe((theme: Theme) => {
 			switch (theme) {

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

@@ -92,11 +92,12 @@
 								Detailed
 							</button>
 						</div>
-						<div class="pseudo-land">
+						<div class="pseudo-land" *ngIf="isCompactMode">
 							<label for="vote_pseudo_vote_stack">
 								Votre pseudo:
 							</label>
 							<input
+								class="is-block"
 								type="text"
 								id="vote_pseudo_vote_stack"
 								placeholder="votre pseudo"

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

@@ -15,8 +15,8 @@ import { ToastService } from '../../core/services/toast.service';
 	styleUrls: ['./consultation.component.scss'],
 })
 export class ConsultationComponent implements OnInit, OnDestroy {
-	// public isCompactMode = false;
-	public isCompactMode = true;
+	public isCompactMode = false;
+	// public isCompactMode = true;
 	public poll: Poll;
 	public pollSlug: string;
 	public pass_hash: string;

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

@@ -9,13 +9,49 @@
 				<span class="label" *ngIf="poll.kind == 'text'">
 					{{ choice.name }}
 				</span>
-				<span class="label" *ngIf="poll.kind == 'date'">
+				<span class="label" *ngIf="poll.kind == 'date' && choice.name.indexOf('>>>') === -1">
 					{{ make_date(choice.name) | date: 'fullDate':'Europe/Paris':'fr_FR' }}
 				</span>
+				<span class="label" *ngIf="poll.kind == 'date' && choice.name.indexOf('>>>') !== -1">
+					{{ make_display_range_time(choice.name) }}
+				</span>
 			</th>
 		</tr>
 	</thead>
 	<tbody>
+		<tr class="stats">
+			<td>
+				Ajouter votre vote
+				<div>
+					<input
+						class="is-block"
+						type="text"
+						id="vote_pseudo_vote_stack_detailed"
+						placeholder="votre pseudo"
+						[(ngModel)]="storageService.vote_stack.pseudo"
+					/>
+					<button
+						class="btn btn-block submit-votestack is-primary"
+						(click)="addVoteStack()"
+						*ngIf="!storageService.vote_stack || !storageService.vote_stack.id"
+					>
+						<i class="fa fa-paper-plane" aria-hidden="true"></i> Envoyer
+
+						<!--						{{ storageService.vote_stack.votes.length }} réponses-->
+					</button>
+					<button
+						class="btn btn--primary btn-block submit-votestack update"
+						(click)="updateVoteStack()"
+						*ngIf="storageService.vote_stack && storageService.vote_stack.id"
+					>
+						<i class="fa fa-edit" aria-hidden="true"></i> Mettre à jour
+					</button>
+				</div>
+			</td>
+			<td *ngFor="let choice of poll.choices">
+				<app-choice-button [poll]="poll" [choice]="choice" [answerKind]="'YES'"></app-choice-button>
+			</td>
+		</tr>
 		<tr class="stats">
 			<td>
 				Score
@@ -49,7 +85,7 @@
 					{{ stack.pseudo }}
 				</div>
 				<div class="date">
-					<sub> le {{ stack.created_at | date: 'short':'Europe/Paris':'fr_FR' }} </sub>
+					<sub> le {{ make_date(stack.created_at) | date: 'short':'Europe/Paris':'fr_FR' }} </sub>
 				</div>
 			</td>
 			<ng-container *ngFor="let vote of stack.votes">

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

@@ -1,7 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 import { Poll } from '../../../core/models/poll.model';
 import { PollService } from '../../../core/services/poll.service';
+import { StorageService } from '../../../core/services/storage.service';
+import { ToastService } from '../../../core/services/toast.service';
+import { ApiService } from '../../../core/services/api.service';
 
 @Component({
 	selector: 'app-poll-results-detailed',
@@ -11,7 +14,12 @@ import { PollService } from '../../../core/services/poll.service';
 export class PollResultsDetailedComponent {
 	@Input() public poll: Poll;
 
-	constructor(private pollService: PollService) {}
+	constructor(
+		private pollService: PollService,
+		private storageService: StorageService,
+		private api: ApiService,
+		private toastService: ToastService
+	) {}
 
 	stackHasVotesForChoice(stack, choice: any) {
 		return undefined !== stack.votes[choice];
@@ -24,9 +32,67 @@ export class PollResultsDetailedComponent {
 		return null;
 	}
 
+	/**
+	 * create a	new vote stack
+	 */
+	addVoteStack(): void {
+		this.storageService.vote_stack.poll_custom_url = this.poll.custom_url;
+		this.toastService.display('envoi du vote ....');
+		this.api
+			.sendNewVoteStackOfPoll(this.storageService.vote_stack)
+			.then((resp: any) => {
+				console.log('sendNewVoteStackOfPoll resp', resp);
+				this.toastService.display('bien enregistré');
+				// reload stack
+			})
+			// eslint-disable-next-line @typescript-eslint/unbound-method
+			.catch(this.api.ousideHandleError);
+	}
+
+	/**
+	 * update existing vote stack
+	 * @param Stack
+	 */
+	updateVoteStack(): void {
+		const vote_stack = this.storageService.vote_stack;
+		vote_stack.poll_custom_url = this.poll.custom_url;
+
+		console.log('updateVoteStack vote_stack.votes', vote_stack.votes.length, vote_stack.votes);
+		const handlingError = this.api.ousideHandleError;
+
+		this.api
+			.sendUpdateVoteStack(vote_stack)
+			.then((resp) => {
+				console.log('sendUpdateVoteStack updated resp', resp);
+				this.storeVoteStackAndReloadPoll(resp);
+				this.toastService.display('vote bien mis à jour', 'success');
+			})
+			.catch(handlingError);
+	}
+	/**
+	 * 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.loadPollBycustom_urlWithPasswordHash(this.poll.custom_url, this.pass_hash);
+			// } else {
+			this.pollService.loadPollBycustom_url(this.poll.custom_url);
+			// }
+		} else {
+			this.toastService.display('erreur à l enregistrement');
+		}
+	}
+
 	make_date(name: string) {
-		name = name.substr(0, 24);
-		console.log('name.length', name.length, name);
+		name = name.substr(0, 30);
 		return new Date(name);
 	}
+
+	make_display_range_time(name: string) {
+		return name.replace('>>>', 'de ');
+	}
 }

src/environments/endpoints.ts

@@ -1,14 +1,15 @@
 export const backendApiUrlsInDev = {
 	// local: 'http://tktest.lan/api/v1',
 	// remote: 'http://tktest.lan/api/v1',
-	local: 'https://localhost:8000/api/v1',
-	remote: 'https://localhost:8000/api/v1',
-	// remote: 'https://framadate-api.cipherbliss.com/api/v1',
+	// local: 'https://localhost:8000/api/v1',
+	local: 'https://framadate-api.cipherbliss.com/api/v1',
+	// remote: 'https://localhost:8000/api/v1',
+	remote: 'https://framadate-api.cipherbliss.com/api/v1',
 };
 export const apiV1 = {
-	baseHref: 'https://localhost:8000/api/v1',
+	// baseHref: 'https://localhost:8000/api/v1',
 	// baseHref: 'http://tktest.lan/api/v1',
-	// baseHref: 'https://framadate-api.cipherbliss.com/api/v1',
+	baseHref: 'https://framadate-api.cipherbliss.com/api/v1',
 	api_new_poll: '/poll/',
 	api_get_poll: '/poll/{id}',
 	api_new_vote_stack: '/vote-stack',

src/environments/environment.ts

@@ -18,7 +18,7 @@ export const environment = {
 	interval_days_default: 7,
 	expiresDaysDelay: 60,
 	maxCountOfAnswers: 150,
-	appTitle: 'funky',
+	appTitle: 'Framadate Funky',
 	appVersion: '0.6.0',
 	appLogo: 'assets/img/logo.png',
 	api: endpoints,

src/styles/partials/_responsive.scss

@@ -1,10 +1,10 @@
 @media (min-width: $widescreen) {
-	select,
-	input,
-	label + select,
-	label {
-		width: 45%;
-	}
+	//select,
+	//input,
+	//label + select,
+	//label {
+	//	width: 45%;
+	//}
 	.date-choice > input:first-of-type {
 		width: 75%;
 	}

yarn.lock

@@ -2150,11 +2150,6 @@ amdefine@>=0.0.4:
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
   integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
 
-angular-date-value-accessor@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/angular-date-value-accessor/-/angular-date-value-accessor-1.0.2.tgz#96277a794fe0ab5760ceba3e7aeb3a05a63388a1"
-  integrity sha512-Jkx6xQI0jDux45RnVQUcncxSPOvnQUwKfC48E4D4YTfzibEEDC5zebW1tkpwmDMpAVVloxcUv7Yh6rak2Rn7ww==
-
 ansi-align@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"