handle no network on creation

This commit is contained in:
Tykayn 2021-11-16 16:16:30 +01:00 committed by tykayn
parent 475c420d96
commit 4233a8eb7e
18 changed files with 105 additions and 70 deletions

View File

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

View File

@ -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) {

View File

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

View File

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

View File

@ -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>

View File

@ -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() {

View File

@ -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 {}

View File

@ -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">

View File

@ -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) {

View File

@ -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-->

View File

@ -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 {}

View File

@ -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>

View File

@ -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() {}

View File

@ -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>

View File

@ -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 daccè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 daccè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>

View File

@ -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: [

View File

@ -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',

View File

@ -320,3 +320,7 @@ mat-checkbox {
color: $light;
}
}
.step-container {
@extend .container, .is-widescreen;
}