diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3a56b9e9..bc2402f6 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -33,11 +33,13 @@ import { MatFormFieldModule, MatInputModule, MatTableModule, - MatDialogModule + MatDialogModule, MatProgressBarModule } from '@angular/material'; import {CdkTableModule} from "@angular/cdk/table"; import {SnapshotService} from "./shared/services/snapshot.service"; +import { ProgressDialogComponent } from './shared/progress-dialog/progress-dialog.component'; +import {ProgressDialogService} from "./shared/progress-dialog/progress-dialog.service"; @NgModule({ declarations: [ @@ -49,6 +51,7 @@ import {SnapshotService} from "./shared/services/snapshot.service"; CreateSnapshotDialogComponent, ProjectsComponent, DefaultLayoutComponent, + ProgressDialogComponent, ], imports: [ NgbModule.forRoot(), @@ -66,6 +69,7 @@ import {SnapshotService} from "./shared/services/snapshot.service"; MatInputModule, MatTableModule, MatDialogModule, + MatProgressBarModule, CdkTableModule ], providers: [ @@ -76,11 +80,13 @@ import {SnapshotService} from "./shared/services/snapshot.service"; ServerService, IndexedDbService, HttpServer, - SnapshotService + SnapshotService, + ProgressDialogService ], entryComponents: [ AddServerDialogComponent, - CreateSnapshotDialogComponent + CreateSnapshotDialogComponent, + ProgressDialogComponent ], bootstrap: [ AppComponent ] }) diff --git a/src/app/project-map/project-map.component.ts b/src/app/project-map/project-map.component.ts index 7b3a626e..6a2fad3d 100644 --- a/src/app/project-map/project-map.component.ts +++ b/src/app/project-map/project-map.component.ts @@ -22,6 +22,8 @@ import { Server } from "../shared/models/server"; import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material"; import {SnapshotService} from "../shared/services/snapshot.service"; import {Snapshot} from "../shared/models/snapshot"; +import {ProgressDialogService} from "../shared/progress-dialog/progress-dialog.service"; +import {ProgressDialogComponent} from "../shared/progress-dialog/progress-dialog.component"; @Component({ @@ -47,7 +49,8 @@ export class ProjectMapComponent implements OnInit { private projectService: ProjectService, private symbolService: SymbolService, private snapshotService: SnapshotService, - private dialog: MatDialog) { + private dialog: MatDialog, + private progressDialogService: ProgressDialogService) { } ngOnInit() { @@ -163,14 +166,21 @@ export class ProjectMapComponent implements OnInit { dialogRef.afterClosed().subscribe(snapshot => { if (snapshot) { const creation = this.snapshotService.create(this.server, this.project.project_id, snapshot); + + const progress = this.progressDialogService.open(); + const subscription = creation.subscribe((created_snapshot: Snapshot) => { console.log(created_snapshot); + progress.close(); + }, () => { + progress.close(); }); - // setTimeout(() => { - // subscription.unsubscribe(); - // console.log("Unsubscribed"); - // }, 15000); + progress.afterClosed().subscribe((result) => { + if (result === ProgressDialogComponent.CANCELLED) { + subscription.unsubscribe(); + } + }); } }); diff --git a/src/app/shared/progress-dialog/progress-dialog.component.html b/src/app/shared/progress-dialog/progress-dialog.component.html new file mode 100644 index 00000000..792da427 --- /dev/null +++ b/src/app/shared/progress-dialog/progress-dialog.component.html @@ -0,0 +1,11 @@ +

Operation in progress

+
+ + +
+
+ +
diff --git a/src/app/shared/progress-dialog/progress-dialog.component.scss b/src/app/shared/progress-dialog/progress-dialog.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/shared/progress-dialog/progress-dialog.component.spec.ts b/src/app/shared/progress-dialog/progress-dialog.component.spec.ts new file mode 100644 index 00000000..acaacb08 --- /dev/null +++ b/src/app/shared/progress-dialog/progress-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProgressDialogComponent } from './progress-dialog.component'; + +describe('ProgressDialogComponent', () => { + let component: ProgressDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ProgressDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ProgressDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + // it('should create', () => { + // expect(component).toBeTruthy(); + // }); +}); diff --git a/src/app/shared/progress-dialog/progress-dialog.component.ts b/src/app/shared/progress-dialog/progress-dialog.component.ts new file mode 100644 index 00000000..6785d938 --- /dev/null +++ b/src/app/shared/progress-dialog/progress-dialog.component.ts @@ -0,0 +1,28 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material"; + + +@Component({ + selector: 'app-progress-dialog', + templateUrl: './progress-dialog.component.html', + styleUrls: ['./progress-dialog.component.scss'] +}) +export class ProgressDialogComponent implements OnInit { + public static CANCELLED: 'canceled'; + + public value: 50; + + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any) { + } + + + onCancelClick(): void { + this.dialogRef.close(ProgressDialogComponent.CANCELLED); + } + + ngOnInit() { + } + +} diff --git a/src/app/shared/progress-dialog/progress-dialog.service.spec.ts b/src/app/shared/progress-dialog/progress-dialog.service.spec.ts new file mode 100644 index 00000000..5de3a47a --- /dev/null +++ b/src/app/shared/progress-dialog/progress-dialog.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { ProgressDialogService } from './progress-dialog.service'; + +describe('ProgressDialogService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [ProgressDialogService] + }); + }); + + it('should be created', inject([ProgressDialogService], (service: ProgressDialogService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/shared/progress-dialog/progress-dialog.service.ts b/src/app/shared/progress-dialog/progress-dialog.service.ts new file mode 100644 index 00000000..3905c108 --- /dev/null +++ b/src/app/shared/progress-dialog/progress-dialog.service.ts @@ -0,0 +1,16 @@ +import { Injectable } from '@angular/core'; +import {MatDialog} from "@angular/material"; +import {ProgressDialogComponent} from "./progress-dialog.component"; + +@Injectable() +export class ProgressDialogService { + + constructor(private dialog: MatDialog) { } + + public open() { + const ref = this.dialog.open(ProgressDialogComponent, { + width: '250px', + }); + return ref; + } +}