new-is-app-angular2 #12
|
@ -1,3 +1,7 @@
|
||||||
|
<div *ngIf="spinnerService.visibility | async" class="spinner">
|
||||||
|
<mat-progress-spinner mode="indeterminate" [strokeWidth]="8" [diameter]="80" color="primary"></mat-progress-spinner>
|
||||||
|
</div>
|
||||||
|
|
||||||
<mat-sidenav-container class="sidenav-container">
|
<mat-sidenav-container class="sidenav-container">
|
||||||
<mat-sidenav #drawer class="sidenav mat-elevation-z8" fixedInViewport
|
<mat-sidenav #drawer class="sidenav mat-elevation-z8" fixedInViewport
|
||||||
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
|
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
|
||||||
|
@ -17,3 +21,4 @@
|
||||||
</div>
|
</div>
|
||||||
</mat-sidenav-content>
|
</mat-sidenav-content>
|
||||||
</mat-sidenav-container>
|
</mat-sidenav-container>
|
||||||
|
|
||||||
|
|
|
@ -2,6 +2,7 @@ import { Component, inject } from '@angular/core';
|
||||||
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import { map, shareReplay } from 'rxjs/operators';
|
import { map, shareReplay } from 'rxjs/operators';
|
||||||
|
import { SpinnerService } from './common/spinner.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
|
@ -17,7 +18,7 @@ export class AppComponent {
|
||||||
shareReplay()
|
shareReplay()
|
||||||
);
|
);
|
||||||
|
|
||||||
constructor(private breakpointObserver: BreakpointObserver) {}
|
constructor(private breakpointObserver: BreakpointObserver, public spinnerService: SpinnerService) {}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -4,9 +4,9 @@ import { FilterPipe } from './common/filter.pipe';
|
||||||
import { AppRoutingModule } from './app-routing.module';
|
import { AppRoutingModule } from './app-routing.module';
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||||
import { HttpClientModule } from '@angular/common/http';
|
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||||
import { InfoComponent } from './info/info.component';
|
import { InfoComponent } from './info/info.component';
|
||||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
import { LayoutModule } from '@angular/cdk/layout';
|
import { LayoutModule } from '@angular/cdk/layout';
|
||||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||||
import { MatButtonModule } from '@angular/material/button';
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
@ -32,6 +32,8 @@ import { ContextsComponent, ContextViewerComponent, ContextParamsDialog } from '
|
||||||
import { VocabulariesComponent, VocabularyEditorComponent, VocDialog, VocTermDialog } from './vocabularies/vocabularies.component';
|
import { VocabulariesComponent, VocabularyEditorComponent, VocDialog, VocTermDialog } from './vocabularies/vocabularies.component';
|
||||||
import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmAddApiDialog, DsmBrowseDialog } from './dsm/dsm.component';
|
import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmAddApiDialog, DsmBrowseDialog } from './dsm/dsm.component';
|
||||||
import { MatPaginatorModule } from '@angular/material/paginator';
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||||
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||||
|
import { SpinnerHttpInterceptor } from './common/spinner.service';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
|
@ -60,11 +62,13 @@ import { MatPaginatorModule } from '@angular/material/paginator';
|
||||||
DsmBrowseDialog
|
DsmBrowseDialog
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
|
BrowserModule,
|
||||||
|
BrowserAnimationsModule,
|
||||||
|
HttpClientModule,
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
AppRoutingModule,
|
AppRoutingModule,
|
||||||
FormsModule,
|
FormsModule,
|
||||||
HttpClientModule,
|
HttpClientModule,
|
||||||
NoopAnimationsModule,
|
|
||||||
LayoutModule,
|
LayoutModule,
|
||||||
MatToolbarModule,
|
MatToolbarModule,
|
||||||
MatButtonModule,
|
MatButtonModule,
|
||||||
|
@ -83,9 +87,14 @@ import { MatPaginatorModule } from '@angular/material/paginator';
|
||||||
MatSortModule,
|
MatSortModule,
|
||||||
ReactiveFormsModule,
|
ReactiveFormsModule,
|
||||||
MatSnackBarModule,
|
MatSnackBarModule,
|
||||||
MatPaginatorModule
|
MatPaginatorModule,
|
||||||
|
MatProgressSpinnerModule
|
||||||
],
|
],
|
||||||
providers: [],
|
providers: [{
|
||||||
bootstrap: [AppComponent]
|
provide: HTTP_INTERCEPTORS,
|
||||||
|
useClass: SpinnerHttpInterceptor,
|
||||||
|
multi: true
|
||||||
|
}],
|
||||||
|
bootstrap: [ AppComponent ]
|
||||||
})
|
})
|
||||||
export class AppModule { }
|
export class AppModule { }
|
||||||
|
|
|
@ -0,0 +1,38 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { BehaviorSubject } from 'rxjs';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import { HttpInterceptor, HttpResponse } from '@angular/common/http';
|
||||||
|
import { HttpRequest } from '@angular/common/http';
|
||||||
|
import { HttpHandler } from '@angular/common/http';
|
||||||
|
import { HttpEvent } from '@angular/common/http';
|
||||||
|
import { tap } from 'rxjs/operators';
|
||||||
|
|
||||||
|
@Injectable({ providedIn: 'root' })
|
||||||
|
export class SpinnerService {
|
||||||
|
visibility: BehaviorSubject<boolean>;
|
||||||
|
|
||||||
|
constructor() { this.visibility = new BehaviorSubject(false); }
|
||||||
|
|
||||||
|
show() { this.visibility.next(true); }
|
||||||
|
hide() { this.visibility.next(false);}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class SpinnerHttpInterceptor implements HttpInterceptor {
|
||||||
|
|
||||||
|
constructor(private spinnerService: SpinnerService) { }
|
||||||
|
|
||||||
|
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
|
||||||
|
|
||||||
|
this.spinnerService.show();
|
||||||
|
|
||||||
|
return next.handle(req)
|
||||||
|
.pipe(tap((event: HttpEvent<any>) => {
|
||||||
|
if (event instanceof HttpResponse) {
|
||||||
|
this.spinnerService.hide();
|
||||||
|
}
|
||||||
|
}, (error) => {
|
||||||
|
this.spinnerService.hide();
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
|
@ -95,3 +95,16 @@ th, td {
|
||||||
margin-right: 2em !important;
|
margin-right: 2em !important;
|
||||||
font-size: 0.75em !important;
|
font-size: 0.75em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
position: absolute;
|
||||||
|
width: 300px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 40%;
|
||||||
|
margin: auto;
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner * { margin: auto; }
|
||||||
|
|
Loading…
Reference in New Issue