Create Snapshot dialog

src/app/app.module.ts

@@ -10,7 +10,7 @@ import { AppRoutingModule } from './app-routing.module';
 
 import { AppComponent } from './app.component';
 import { MapComponent } from './cartography/map/map.component';
-import { ProjectMapComponent } from './project-map/project-map.component';
+import {CreateSnapshotDialogComponent, ProjectMapComponent} from './project-map/project-map.component';
 import { ServersComponent, AddServerDialogComponent } from './servers/servers.component';
 import { ProjectsComponent } from './projects/projects.component';
 
@@ -37,6 +37,7 @@ import {
 } from '@angular/material';
 
 import {CdkTableModule} from "@angular/cdk/table";
+import {SnapshotService} from "./shared/services/snapshot.service";
 
 @NgModule({
   declarations: [
@@ -45,6 +46,7 @@ import {CdkTableModule} from "@angular/cdk/table";
     ProjectMapComponent,
     ServersComponent,
     AddServerDialogComponent,
+    CreateSnapshotDialogComponent,
     ProjectsComponent,
     DefaultLayoutComponent,
   ],
@@ -74,9 +76,11 @@ import {CdkTableModule} from "@angular/cdk/table";
     ServerService,
     IndexedDbService,
     HttpServer,
+    SnapshotService
   ],
   entryComponents: [
-    AddServerDialogComponent
+    AddServerDialogComponent,
+    CreateSnapshotDialogComponent
   ],
   bootstrap: [ AppComponent ]
 })

src/app/project-map/create-snapshot-dialog.html

@@ -0,0 +1,10 @@
+<h1 mat-dialog-title>Create snapshot</h1>
+<div mat-dialog-content>
+  <mat-form-field>
+    <input matInput tabindex="1" [(ngModel)]="snapshot.name" placeholder="Name">
+  </mat-form-field>
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">No Thanks</button>
+  <button mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Add</button>
+</div>

src/app/project-map/project-map.component.html

@@ -7,11 +7,11 @@
         <mat-icon svgIcon="gns3"></mat-icon>
       </button>
 
-      <!--<mat-toolbar-row>-->
-        <!--<button mat-icon-button>-->
-          <!--<mat-icon>verified_user</mat-icon>-->
-        <!--</button>-->
-      <!--</mat-toolbar-row>-->
+      <mat-toolbar-row>
+        <button mat-icon-button (click)="createSnapshotModal()">
+          <mat-icon>snooze</mat-icon>
+        </button>
+      </mat-toolbar-row>
 
       <!--<mat-toolbar-row>-->
         <!--<button mat-icon-button>-->

src/app/project-map/project-map.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
+import {Component, Inject, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 
 import { Observable } from 'rxjs/Observable';
@@ -19,6 +19,9 @@ import { MapComponent } from "../cartography/map/map.component";
 import { ServerService } from "../shared/services/server.service";
 import { ProjectService } from '../shared/services/project.service';
 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";
 
 
 @Component({
@@ -42,7 +45,9 @@ export class ProjectMapComponent implements OnInit {
               private route: ActivatedRoute,
               private serverService: ServerService,
               private projectService: ProjectService,
-              private symbolService: SymbolService) {
+              private symbolService: SymbolService,
+              private snapshotService: SnapshotService,
+              private dialog: MatDialog) {
   }
 
   ngOnInit() {
@@ -149,4 +154,49 @@ export class ProjectMapComponent implements OnInit {
       }
     });
   }
+
+  public createSnapshotModal() {
+    const dialogRef = this.dialog.open(CreateSnapshotDialogComponent, {
+      width: '250px',
+    });
+
+    dialogRef.afterClosed().subscribe(snapshot => {
+      if (snapshot) {
+        const creation = this.snapshotService.create(this.server, this.project.project_id, snapshot);
+        const subscription = creation.subscribe((created_snapshot: Snapshot) => {
+          console.log(created_snapshot);
+        });
+
+        // setTimeout(() => {
+        //   subscription.unsubscribe();
+        //   console.log("Unsubscribed");
+        // }, 15000);
+
+      }
+    });
+  }
 }
+
+
+@Component({
+  selector: 'app-create-snapshot-dialog',
+  templateUrl: 'create-snapshot-dialog.html',
+})
+export class CreateSnapshotDialogComponent {
+  snapshot: Snapshot = new Snapshot();
+
+  constructor(
+    public dialogRef: MatDialogRef<CreateSnapshotDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any) {
+  }
+
+  onAddClick(): void {
+    this.dialogRef.close(this.snapshot);
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+}
+

src/app/shared/models/snapshot.ts

@@ -0,0 +1,6 @@
+export class Snapshot {
+  snapshot_id: number;
+  name: string;
+  created_at: string;
+  project_id: number;
+}

src/app/shared/services/snapshot.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { SnapshotService } from './snapshot.service';
+
+describe('SnapshotService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SnapshotService]
+    });
+  });
+
+  // it('should be created', inject([SnapshotService], (service: SnapshotService) => {
+  //   expect(service).toBeTruthy();
+  // }));
+});

src/app/shared/services/snapshot.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import {Server} from "../models/server";
+import {Observable} from "rxjs/Observable";
+import {HttpServer} from "./http-server.service";
+import {Snapshot} from "../models/snapshot";
+
+
+@Injectable()
+export class SnapshotService {
+
+  constructor(private httpServer: HttpServer) { }
+
+  create(server: Server, project_id: string, snapshot: Snapshot): Observable<Snapshot> {
+    return this.httpServer
+                .post(server, `/projects/${project_id}/snapshots`, snapshot)
+                .map(response => response.json() as Snapshot);
+  }
+
+  list(server: Server, project_id: string): Observable<Snapshot[]> {
+    return this.httpServer
+                .get(server, `/projects/${project_id}/snapshots`)
+                .map(response => response.json() as Snapshot[]);
+  }
+
+}