Skip to content
Snippets Groups Projects
Commit c616a490 authored by Etxaniz Errazkin, Iñaki's avatar Etxaniz Errazkin, Iñaki
Browse files

Merge branch 'loader-urbanite' into 'master'

Loader urbanite

See merge request urbanite/private/wp5-integration-and-devops/urbanite-ui-template!20
parents 09522c8f 5b5db024
No related branches found
No related tags found
No related merge requests found
Showing with 155 additions and 9 deletions
...@@ -9,7 +9,7 @@ import { Component } from '@angular/core'; ...@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
<ngx-header></ngx-header> <ngx-header></ngx-header>
</nb-layout-header> </nb-layout-header>
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive> <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive style="z-index:999">
<ng-content select="nb-menu"></ng-content> <ng-content select="nb-menu"></ng-content>
</nb-sidebar> </nb-sidebar>
......
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
import { AuthGuard } from './auth/services/auth.guard'; import { AuthGuard } from './auth/services/auth.guard';
import { AuthLogoutComponent } from './auth/logout/auth-logout.component'; import { AuthLogoutComponent } from './auth/logout/auth-logout.component';
import { MarkdownModule } from 'ngx-markdown'; import { MarkdownModule } from 'ngx-markdown';
import { UiFeaturesModule } from './pages/ui-features/ui-features.module';
import { ChartModule } from 'angular2-chartjs'; import { ChartModule } from 'angular2-chartjs';
import 'chartjs-plugin-zoom'; import 'chartjs-plugin-zoom';
...@@ -53,6 +54,7 @@ import { DatastorageService } from './pages/dashboard-management/services/datast ...@@ -53,6 +54,7 @@ import { DatastorageService } from './pages/dashboard-management/services/datast
BrowserAnimationsModule, BrowserAnimationsModule,
HttpClientModule, HttpClientModule,
AppRoutingModule, AppRoutingModule,
UiFeaturesModule,
NbSidebarModule.forRoot(), NbSidebarModule.forRoot(),
NbMenuModule.forRoot(), NbMenuModule.forRoot(),
NbDatepickerModule.forRoot(), NbDatepickerModule.forRoot(),
......
...@@ -8,25 +8,30 @@ import { ...@@ -8,25 +8,30 @@ import {
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { NbAuthOAuth2JWTToken, NbAuthOAuth2Token, NbAuthService } from '@nebular/auth'; import { NbAuthOAuth2JWTToken, NbAuthOAuth2Token, NbAuthService } from '@nebular/auth';
import { ConfigService } from '@ngx-config/core'; import { ConfigService } from '@ngx-config/core';
import { switchMap, tap } from 'rxjs/operators'; import { finalize, switchMap, tap } from 'rxjs/operators';
import { LoaderService } from '../../services/loader.service';
@Injectable() @Injectable()
export class TokenInterceptor implements HttpInterceptor { export class TokenInterceptor implements HttpInterceptor {
token; token;
constructor(public auth: NbAuthService, public config:ConfigService) {} constructor(public auth: NbAuthService, public config:ConfigService, public loaderService:LoaderService) {}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.loaderService.show();
if (req.url.indexOf('/assets/') > -1) { if (req.url.indexOf('/assets/') > -1) {
return next.handle(req); return next.handle(req).pipe(
finalize(() => this.loaderService.hide()));
} }
if (req.url.indexOf('/oauth2/token') > -1 || req.url.indexOf('/openid-connect/token') > -1 || req.url.indexOf('/api/menu-blocks') > -1|| req.url.indexOf('/public/dashboards') > -1) { if (req.url.indexOf('/oauth2/token') > -1 || req.url.indexOf('/openid-connect/token') > -1 || req.url.indexOf('/api/menu-blocks') > -1|| req.url.indexOf('/public/dashboards') > -1) {
return next.handle(req); return next.handle(req).pipe(
finalize(() => this.loaderService.hide()));
} }
if (req.url.indexOf(this.config.getSettings('idra_base_url')+'/Idra') > -1) { if (req.url.indexOf(this.config.getSettings('idra_base_url')+'/Idra') > -1) {
return next.handle(req); return next.handle(req).pipe(
finalize(() => this.loaderService.hide()));
} }
...@@ -45,12 +50,14 @@ export class TokenInterceptor implements HttpInterceptor { ...@@ -45,12 +50,14 @@ export class TokenInterceptor implements HttpInterceptor {
newHeaders = newHeaders.append('Authorization', 'Bearer ' + this.token.getPayload().access_token); newHeaders = newHeaders.append('Authorization', 'Bearer ' + this.token.getPayload().access_token);
} }
const authReq = req.clone({ headers: newHeaders }); const authReq = req.clone({ headers: newHeaders });
return next.handle(authReq); return next.handle(authReq).pipe(
finalize(() => this.loaderService.hide()));
}) })
) )
} else { } else {
const authReq = req.clone({ headers: newHeaders }); const authReq = req.clone({ headers: newHeaders });
return next.handle(authReq); return next.handle(authReq).pipe(
finalize(() => this.loaderService.hide()));
} }
} }
......
...@@ -12,6 +12,7 @@ import { MENU_ITEMS } from './pages-menu'; ...@@ -12,6 +12,7 @@ import { MENU_ITEMS } from './pages-menu';
selector: 'ngx-pages', selector: 'ngx-pages',
styleUrls: ['pages.component.scss'], styleUrls: ['pages.component.scss'],
template: ` template: `
<ngx-loader></ngx-loader>
<ngx-one-column-layout> <ngx-one-column-layout>
<nb-menu [items]="menu"></nb-menu> <nb-menu [items]="menu"></nb-menu>
<router-outlet></router-outlet> <router-outlet></router-outlet>
......
...@@ -9,6 +9,7 @@ import { TranslateModule } from '@ngx-translate/core'; ...@@ -9,6 +9,7 @@ import { TranslateModule } from '@ngx-translate/core';
import { UtilitiesComponent } from './utilities/utilities.component'; import { UtilitiesComponent } from './utilities/utilities.component';
import { MapLayersComponent } from './map-layers/map-layers.component'; import { MapLayersComponent } from './map-layers/map-layers.component';
import { GuideComponent } from './guide/guide.component'; import { GuideComponent } from './guide/guide.component';
import { UiFeaturesModule } from './ui-features/ui-features.module';
@NgModule({ @NgModule({
...@@ -20,6 +21,7 @@ import { GuideComponent } from './guide/guide.component'; ...@@ -20,6 +21,7 @@ import { GuideComponent } from './guide/guide.component';
MiscellaneousModule, MiscellaneousModule,
TranslateModule, TranslateModule,
NbStepperModule, NbStepperModule,
UiFeaturesModule
], ],
declarations: [ declarations: [
PagesComponent, PagesComponent,
......
<!--<div class="overlay" *ngIf="isLoadingValue" [nbSpinner]="true" nbSpinnerSize="giant" nbSpinnerStatus="primary">
</div>-->
<style>@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@-moz-keyframes spin{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.spinner{position:fixed;top:0;left:0;width:100%;height:100%;z-index:3;background: rgba(254, 253, 253, 0.8);overflow:hidden} .spinner div:first-child{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;box-shadow:0 3px 3px 0 rgba(19,153,114,1);transform:translate3d(0,0,0);animation:spin 2s linear infinite} .spinner div:first-child:after,.spinner div:first-child:before{content:'';position:absolute;border-radius:50%} .spinner div:first-child:before{top:5px;left:5px;right:5px;bottom:5px;box-shadow:0 3px 3px 0 rgb(234,206,0);-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite} .spinner div:first-child:after{top:15px;left:15px;right:15px;bottom:15px;box-shadow:0 3px 3px 0 rgba(244,230,127,1);animation:spin 1.5s linear infinite}</style>
<div id="nb-global-spinner" class="spinner" *ngIf="isLoadingValue">
<div class="blob blob-0"></div>
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="blob blob-4"></div>
<div class="blob blob-5"></div>
</div>
.overlay {
position: fixed;
// display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(202, 202, 202, 0.8);
//background-color: red;
z-index: 3;
// z-index: 99999;
}
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LoaderComponent } from './loader.component';
describe('LoaderComponent', () => {
let component: LoaderComponent;
let fixture: ComponentFixture<LoaderComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ LoaderComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(LoaderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit,ChangeDetectionStrategy, SimpleChanges, ChangeDetectorRef } from '@angular/core';
import { LoaderService } from '../../../services/loader.service';
import { BehaviorSubject, Subject } from 'rxjs';
import { threadId } from 'worker_threads';
@Component({
selector: 'ngx-loader',
templateUrl: './loader.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
styleUrls: ['./loader.component.scss']
})
export class LoaderComponent implements OnInit {
isLoading;
noLoader;
constructor(private loaderService: LoaderService, private changeDetectorRef: ChangeDetectorRef) {
changeDetectorRef.detach();
setInterval(() => { this.changeDetectorRef.detectChanges(); }, 500);
}
get isLoadingValue(){
return this.isLoading;
}
ngOnInit(): void {
this.loaderService.loader.subscribe(color => {console.log(color);
this.isLoading = color;
//
});
this.changeDetectorRef.detectChanges();
//this.isLoading = this.loaderService.isLoading$.getValue();
}
}
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { NbAlertModule, NbCardModule, NbIconModule, NbPopoverModule, NbSearchModule } from '@nebular/theme'; import { NbAlertModule, NbCardModule, NbIconModule, NbPopoverModule, NbSearchModule, NbSpinnerModule } from '@nebular/theme';
import { ThemeModule } from '../../@theme/theme.module'; import { ThemeModule } from '../../@theme/theme.module';
import { UiFeaturesRoutingModule } from './ui-features-routing.module'; import { UiFeaturesRoutingModule } from './ui-features-routing.module';
...@@ -7,12 +7,16 @@ import { UiFeaturesComponent } from './ui-features.component'; ...@@ -7,12 +7,16 @@ import { UiFeaturesComponent } from './ui-features.component';
import { GridComponent } from './grid/grid.component'; import { GridComponent } from './grid/grid.component';
import { IconsComponent } from './icons/icons.component'; import { IconsComponent } from './icons/icons.component';
import { TypographyComponent } from './typography/typography.component'; import { TypographyComponent } from './typography/typography.component';
import { LoaderComponent } from './loader/loader.component';
const components = [ const components = [
UiFeaturesComponent, UiFeaturesComponent,
GridComponent, GridComponent,
IconsComponent, IconsComponent,
TypographyComponent, TypographyComponent,
LoaderComponent
]; ];
@NgModule({ @NgModule({
...@@ -24,9 +28,13 @@ const components = [ ...@@ -24,9 +28,13 @@ const components = [
NbAlertModule, NbAlertModule,
ThemeModule, ThemeModule,
UiFeaturesRoutingModule, UiFeaturesRoutingModule,
NbSpinnerModule
], ],
declarations: [ declarations: [
...components, ...components,
],
exports: [ ...components,
], ],
}) })
export class UiFeaturesModule { } export class UiFeaturesModule { }
import { TestBed } from '@angular/core/testing';
import { LoaderService } from './loader.service';
describe('LoaderService', () => {
let service: LoaderService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(LoaderService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
import { Injectable } from '@angular/core';
import { BehaviorSubject, Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class LoaderService {
isLoading$ = new BehaviorSubject<boolean>(false);
loader = this.isLoading$.asObservable();
constructor() { }
show() {
this.isLoading$.next(true);
}
hide() {
this.isLoading$.next(false);
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment