handle no network on creation

2021-11-16 16:16:30 +01:00 · 2021-11-16 16:16:30 +01:00 · 4233a8eb7e
parent 475c420d96
commit 4233a8eb7e
18 changed files with 105 additions and 70 deletions
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { Subscription } from 'rxjs';

@ -15,6 +15,8 @@ import { Poll } from './core/models/poll.model';
 import { PollDTO } from './core/models/poll.DTO.model';
 import { PrimeNGConfig } from 'primeng/api';
 import { Language } from './core/enums/language.enum';
+import { ApiService } from './core/services/api.service';
+import { DOCUMENT } from '@angular/common';

@Component({
 	selector: 'app-root',
@ -39,7 +41,9 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 		private titleService: Title,
 		private themeService: ThemeService,
 		private pollService: PollService,
+		private apiService: ApiService,
 		private config: PrimeNGConfig,
+		@Inject(DOCUMENT) private document: any,
 		private languageService: LanguageService // private mockingService: MockingService
 	) {}

@ -63,7 +67,10 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 			if (!(evt instanceof NavigationEnd)) {
 				return;
 			}
-			window.scrollTo(0, 0);
+
+			let mainelem = this.document.querySelector('#big_container main');
+			console.log('mainelem', mainelem);
+			window.scrollTo(0, mainelem.offsetTop);
 		});

 		if (!environment.production) {
@ -92,10 +99,12 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 					this.themeClass = 'theme-light-watermelon';
 			}
 		});
+
+		// debug cors
+		this.apiService.getAllAvailablePolls();
 	}

 	ngAfterViewInit(): void {
-		console.log('this.shortcuts', this.shortcuts);
 		this.shortcuts.push(
 			{
 				key: '?',
@ -118,7 +127,6 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 				preventDefault: true,
 			}
 		);
-		console.log('this.shortcuts', this.shortcuts);
 	}

 	ngOnDestroy(): void {
@ -127,10 +135,6 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 		}
 	}

-	public toggleSidebar(status: boolean): void {
-		this.isSidebarOpened = status === true;
-	}
-
 	prepareRoute(outlet: RouterOutlet) {
 		return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
 	}
--- a/src/app/core/services/api.service.ts
+++ b/src/app/core/services/api.service.ts
@ -38,16 +38,17 @@ export class ApiService {

 		this.axiosInstance = axios.create({ baseURL: apiBaseHref });
 		this.axiosInstance.defaults.timeout = 2500;
-		this.axiosInstance.defaults.headers.post['Content-Type'] = 'application/json';
-		this.axiosInstance.defaults.headers.post['Accept'] = 'application/json';
-		this.axiosInstance.defaults.headers.post['Charset'] = 'UTF-8';
+		// this.axiosInstance.defaults.headers.post['Content-Type'] = 'application/json';
+		// this.axiosInstance.defaults.headers.post['Accept'] = 'application/json';
+		// this.axiosInstance.defaults.headers.post['Charset'] = 'UTF-8';
 		// this.axiosInstance.defaults.headers.post['Accept-Charset'] = 'UTF-8';
-		this.axiosInstance.defaults.headers.post['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS';
-		this.axiosInstance.defaults.headers.post['Referrer-Policy'] = 'origin-when-cross-origin';
-		this.axiosInstance.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
-		this.axiosInstance.defaults.headers.post['Allow-Origin'] = '*';
-		this.axiosInstance.defaults.headers.post['Access-Control-Allow-Headers'] =
-			'Origin, X-Requested-With, Content-Type, Accept';
+		// this.axiosInstance.defaults.headers.post['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS';
+		// this.axiosInstance.defaults.headers.post['Referrer-Policy'] = 'origin-when-cross-origin';
+		// this.axiosInstance.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
+		// this.axiosInstance.defaults.headers.post['Control-Allow-Origin'] = '*';
+		// this.axiosInstance.defaults.headers.post['Allow-Origin'] = '*';
+		// this.axiosInstance.defaults.headers.post['Access-Control-Allow-Headers'] =
+		// 	'Origin, X-Requested-With, Content-Type, Accept';

 		console.log('this.axiosInstance.defaults.headers', this.axiosInstance.defaults.headers);
 	}
@ -68,16 +69,16 @@ export class ApiService {
 			// Accept: 'application/json',
 			'Access-Control-Allow-Origin': '*',
 			'Content-Type': 'application/json',
-			mode: 'no-cors',
+			// mode: 'no-cors',
 			'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
 			'Access-Control-Allow-Headers': 'Accept,Accept-Language,Content-Language,Content-Type',
-			// 'Access-Control-Allow-Origin': '*',
 		};
-
-		return {
+		const headersAxios = {
 			headers: headerDict,
 			body: bodyContent,
 		};
+		console.log('headersAxios', headersAxios);
+		return headersAxios;
 	}

 	/**
@ -89,8 +90,8 @@ export class ApiService {
 		console.log('apiservice createPoll config', poll);
 		return this.axiosInstance.post(
 			`${this.baseHref}${currentApiRoutes['api_new_poll']}`,
-			poll,
-			ApiService.makeHeaders()
+			poll
+			// ApiService.makeHeaders()
 		);
 	}

@ -146,6 +147,8 @@ export class ApiService {
 	public async getAllAvailablePolls(): Promise<Poll[]> {
 		// TODO: used for facilities in DEV, should be removed in production
 		try {
+			this.axiosInstance.options(this.pollsEndpoint);
+
 			const response: AxiosResponse<Poll[]> = await this.axiosInstance.get<Poll[]>(`${this.pollsEndpoint}`);
 			return response?.data;
 		} catch (error) {
--- a/src/app/core/services/poll.service.ts
+++ b/src/app/core/services/poll.service.ts
@ -85,7 +85,7 @@ export class PollService implements Resolve<Poll> {
 	 */
 	setDemoValues(): void {
 		this.form.patchValue({
-			title: 'mon titre de sondage du ' + this.DateUtilitiesService.formateDateToInputStringNg(new Date()),
+			title: 'Mon titre de sondage du ' + this.DateUtilitiesService.formateDateToInputStringNg(new Date()),
 			description: 'répondez SVP <3 ! *-* ',
 			custom_url: this.uuidService.getUUID(),
 			creatorPseudo: 'Chuck Norris',
@ -390,7 +390,6 @@ export class PollService implements Resolve<Poll> {
 	 */
 	public createPoll(): Promise<any> {
 		this.toastService.display('sending...');
-		console.log('createPoll this.form', this.form);
 		const newpoll = this.newPollFromForm();
 		return this.apiService.createPoll(newpoll).then(
 			(resp: any) => {
@ -689,7 +688,7 @@ export class PollService implements Resolve<Poll> {
 				const field = form.value[pk];
 				newpoll[pk] = field;
 			} else {
-				console.log('manque pollKey', pk);
+				// console.log('manque pollKey', pk);
 			}
 		}

--- a/src/app/core/services/poll.utilities.service.ts
+++ b/src/app/core/services/poll.utilities.service.ts
@ -65,16 +65,16 @@ export class PollUtilitiesService {
 	 * @param bodyContent
 	 */
 	makeHeaders(bodyContent?: any) {
-		const headerDict = {
-			Charset: 'UTF-8',
-			'Content-Type': 'application/json',
-			Accept: 'application/json',
-			'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
-			'Access-Control-Allow-Origin': '*',
-		};
+		// const headerDict = {
+		// 	Charset: 'UTF-8',
+		// 	'Content-Type': 'application/json',
+		// 	Accept: 'application/json',
+		// 	'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+		// 	'Access-Control-Allow-Origin': '*',
+		// };

 		return {
-			headers: headerDict,
+			headers: [],
 			body: bodyContent,
 		};
 	}
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@ -1,10 +1,5 @@
 <div class="admin-form">
-	<header>
-		<h2 classs="title is-2">
-			{{ 'creation.title' | translate }}
-		</h2>
-	</header>
-	<section class="step-container min-height padded">
+	<section class="min-height padded">
 		<router-outlet>
 			<app-step-one [form]="form"></app-step-one>
 		</router-outlet>
--- a/src/app/features/administration/form/steps/step-five/step-five.component.ts
+++ b/src/app/features/administration/form/steps/step-five/step-five.component.ts
@ -12,7 +12,9 @@ export class StepFiveComponent implements OnInit {
 	@Input() step_max: any;
 	@Input() public form: FormGroup;
 	poll: any;
-	constructor(public pollService: PollService) {}
+	constructor(public pollService: PollService) {
+		this.pollService.step_current = 5;
+	}
 	ngOnInit(): void {}

 	askInitFormDefault() {
--- a/src/app/features/administration/form/steps/step-four/step-four.component.ts
+++ b/src/app/features/administration/form/steps/step-four/step-four.component.ts
@ -1,6 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { PollService } from '../../../../../core/services/poll.service';
-import { ApiService } from '../../../../../core/services/api.service';
 import { environment } from '../../../../../../environments/environment';
 import { Router } from '@angular/router';

@ -16,7 +15,10 @@ export class StepFourComponent implements OnInit {
 	step_max: any;
 	@Input()
 	form: any;
-	constructor(private router: Router, public pollService: PollService, private apiService: ApiService) {}
+
+	constructor(private router: Router, public pollService: PollService) {
+		this.pollService.step_current = 4;
+	}

 	ngOnInit(): void {}

--- a/src/app/features/administration/form/steps/step-one/step-one.component.html
+++ b/src/app/features/administration/form/steps/step-one/step-one.component.html
@ -1,4 +1,4 @@
-<div class="step">
+<div class="step step-container">
 	<form class="min-height" [formGroup]="pollService.form">
 		<app-stepper [step_current]="1" [step_max]="5"></app-stepper>
 		<section class="poll-title">
--- a/src/app/features/administration/form/steps/step-one/step-one.component.ts
+++ b/src/app/features/administration/form/steps/step-one/step-one.component.ts
@ -17,6 +17,7 @@ export class StepOneComponent implements OnInit {
 	form: FormGroup;

 	ngOnInit(): void {
+		this.pollService.step_current = 1;
 		const selector = '#title';
 		const firstField = this.document.querySelector(selector);
 		if (firstField) {
--- a/src/app/features/administration/form/steps/step-three/step-three.component.html
+++ b/src/app/features/administration/form/steps/step-three/step-three.component.html
@ -1,4 +1,4 @@
-<div class="min-height">
+<div class="step min-height">
 	<app-stepper [step_current]="3" [step_max]="5"></app-stepper>
 	<app-errors-list [form]="pollService.form"></app-errors-list>
 	<!--			choix spécialement pour les dates-->
--- a/src/app/features/administration/form/steps/step-three/step-three.component.ts
+++ b/src/app/features/administration/form/steps/step-three/step-three.component.ts
@ -13,7 +13,9 @@ export class StepThreeComponent implements OnInit {
 	@Input()
 	form: any;

-	constructor(public pollService: PollService) {}
+	constructor(public pollService: PollService) {
+		this.pollService.step_current = 3;
+	}

 	ngOnInit(): void {}

--- a/src/app/features/administration/form/steps/step-two/step-two.component.html
+++ b/src/app/features/administration/form/steps/step-two/step-two.component.html
@ -1,4 +1,4 @@
-<div class="form-field poll-kind">
+<div class="step step-container form-field poll-kind">
 	<div class="min-height">
 		<app-stepper [step_current]="2" [step_max]="5"></app-stepper>
 		<app-errors-list [form]="pollService.form"></app-errors-list>
--- a/src/app/features/administration/form/steps/step-two/step-two.component.ts
+++ b/src/app/features/administration/form/steps/step-two/step-two.component.ts
@ -39,6 +39,7 @@ export class StepTwoComponent implements OnInit {
 		@Inject(DOCUMENT) private document: any
 	) {
 		this.form = this.pollService.form;
+		this.pollService.step_current = 2;
 	}

 	addIntervalOfDates() {}
--- a/src/app/features/administration/stepper/stepper.component.html
+++ b/src/app/features/administration/stepper/stepper.component.html
@ -1,12 +1,17 @@
 <section class="creation-stepper">
 	<div class="step-info">
-		<h2 class="title is-2">
-			Étape {{ step_current }} /
-			{{ step_max }}
+		<h2 classs="title is-2" *ngIf="pollService.step_current == 1">
+			{{ 'creation.title' | translate }}
+		</h2>
+		<h2 class="title is-3" *ngIf="pollService.step_current > 1">
 			<span class="poll-title">
 				{{ pollService.form.value.title }}
 			</span>
 		</h2>
+		<h3 class="title is-2">
+			Étape {{ step_current }} /
+			{{ step_max }}
+		</h3>
 	</div>
 	<div class="step-bar-container" style="width: 100%;">
 		<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
--- a/src/app/features/administration/success/success.component.html
+++ b/src/app/features/administration/success/success.component.html
@ -1,14 +1,30 @@
-<section class="hero is-medium has-background-success">
+<section
+	class="hero is-medium"
+	[ngClass]="{ 'has-background-success': pollService.admin_key, 'has-background-danger': pollService.admin_key }"
+>
 	<div class="hero-body">
 		<div class="container has-text-centered">
 			<div class="main-block">
-				<h1 class="title is-1">🎉 {{ 'resume.title' | translate }}</h1>
+				<h1 class="title is-1" *ngIf="pollService.admin_key">🎉 {{ 'resume.title' | translate }}</h1>
 				<h2 class="subtitle">
-					Votre sondage «
+					Votre sondage
+					<br />
+					«
 					<strong class="poll-title">
 						{{ pollService.form.value.title }}
 					</strong>
-					» a bien été créé !
+					»
+					<span *ngIf="!pollService.admin_key">
+						n'a pas été créé :(
+
+						<br />
+						<button class="button is-primary" [routerLink]="['/administration/step/4']">
+							Revenir en arrière
+						</button>
+					</span>
+					<span *ngIf="pollService.admin_key">
+						a bien été créé !
+					</span>
 				</h2>
 			</div>
 		</div>
@ -20,19 +36,20 @@
 			<div class="columns">
 				<div class="column">
 					<div class="admin">
-						<h2 class="title is-2">
-							<i class="fa fa-gears"></i>
-							{{ 'resume.admins' | translate }}
-						</h2>
-						<p>
-							Voici les liens d’accès au sondage, conservez-les soigneusement ! (Si vous les perdez vous
-							pourrez toujours les recevoir par email)
-						</p>
-						<div class="no-admin-key" *ngIf="!pollService.admin_key">
+						<div class="no-admin-key padded has-background-danger" *ngIf="!pollService.admin_key">
 							Pas de clé d'administration, l'enregistrement du sondage a échoué. vérifiez vos paramètres
 							réseau.
 						</div>
 						<div class="admin-ok" *ngIf="pollService.admin_key">
+							<h2 class="title is-2">
+								<i class="fa fa-gears"></i>
+								{{ 'resume.admins' | translate }}
+							</h2>
+
+							<p>
+								Voici les liens d’accès au sondage, conservez-les soigneusement ! (Si vous les perdez
+								vous pourrez toujours les recevoir par email)
+							</p>
 							<div>
 								Pour accéder au sondage et à tous ses paramètres :
 								<br />
@ -68,7 +85,7 @@
 					</div>
 				</div>
 				<div class="column">
-					<div class="public">
+					<div class="public" *ngIf="pollService.admin_key">
 						<h2 class="title is-2">
 							<i class="fa fa-ellipsis-v"></i>
 							{{ 'resume.users' | translate }}
@ -86,8 +103,6 @@
 					</div>
 				</div>
 			</div>
-
-			<!--	<img src="assets/img/undraw_group_selfie_ijc6.svg" alt="image succès" />-->
 		</div>
 	</div>
 </div>
--- a/src/app/features/consultation/consultation.module.ts
+++ b/src/app/features/consultation/consultation.module.ts
@ -9,6 +9,8 @@ import { PollResultsCompactComponent } from './poll-results-compact/poll-results
 import { PollResultsDetailedComponent } from './poll-results-detailed/poll-results-detailed.component';
 import { ChoiceButtonComponent } from '../../shared/components/choice-item/choice-button.component';
 import { PasswordPromptComponent } from './password/password-prompt/password-prompt.component';
+import { ChoiceDetailsComponent } from '../../shared/components/choice-details/choice-details.component';
+import { CoreModule } from '../../core/core.module';

@NgModule({
 	declarations: [
--- a/src/environments/endpoints.ts
+++ b/src/environments/endpoints.ts
@ -1,15 +1,15 @@
 export const backendApiUrlsInDev = {
 	// local: 'http://tktest.lan/api/v1',
 	// remote: 'http://tktest.lan/api/v1',
-	local: 'https://localhost:8000/api/v1',
+	local: 'http://localhost:8000/api/v1',
 	// local: 'https://framadate-api.cipherbliss.com/api/v1',
-	remote: 'https://localhost:8000/api/v1',
+	remote: 'http://localhost:8000/api/v1',
 	// remote: 'https://framadate-api.cipherbliss.com/api/v1',
 };
 export const apiV1 = {
-	// baseHref: 'https://localhost:8000/api/v1',
+	baseHref: 'http://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',
--- a/src/styles/partials/_forms.scss
+++ b/src/styles/partials/_forms.scss
@ -320,3 +320,7 @@ mat-checkbox {
 		color: $light;
 	}
 }
+
+.step-container {
+	@extend .container, .is-widescreen;
+}