From 8f4a6fd83e8feea0ca76af572514f542065a6ebe Mon Sep 17 00:00:00 2001
From: Gabor PEK <gabor.pek@avatao.com>
Date: Mon, 12 Mar 2018 14:50:44 +0100
Subject: [PATCH] Add notification service for deployment status and blur login
 page when neccesary

---
 src/app/app.module.ts                         | 44 ++++++++++---------
 src/app/login/login.component.html            |  2 +-
 src/app/login/login.component.ts              | 25 +++++++++--
 .../deployment-notification.service.ts        | 11 +++++
 src/app/webide/webide.component.ts            |  7 ++-
 5 files changed, 61 insertions(+), 28 deletions(-)
 create mode 100644 src/app/services/deployment-notification.service.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 19d3923..d5d3e98 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,25 +1,26 @@
-import { HttpClientModule } from '@angular/common/http';
-import { FormsModule } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { AceEditorModule } from 'ng2-ace-editor';
+import {HttpClientModule} from '@angular/common/http';
+import {FormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import {AceEditorModule} from 'ng2-ace-editor';
 
 
-import { AppComponent } from './app.component';
-import { DashboardComponent } from './dashboard/dashboard.component';
-import { HeaderComponent } from './header/header.component';
-import { LoginComponent } from './login/login.component';
-import { MarkdownService } from './services/markdown.service';
-import { TerminadoService } from './services/terminado.service';
-import { WebideComponent } from './webide/webide.component';
-import { MessagesComponent } from './messages/messages.component';
-import { WebSocketService } from './services/websocket.service';
-import { TerminalComponent } from './terminal/terminal.component';
-import { FSMUpdateService } from './services/fsmupdate.service';
-import { ProcessManagerService } from './services/processmanager.service';
-import { AppRoutingModule } from './app-routing.module';
-import { TestmessengerComponent } from './testmessenger/testmessenger.component';
+import {AppComponent} from './app.component';
+import {DashboardComponent} from './dashboard/dashboard.component';
+import {HeaderComponent} from './header/header.component';
+import {LoginComponent} from './login/login.component';
+import {MarkdownService} from './services/markdown.service';
+import {TerminadoService} from './services/terminado.service';
+import {WebideComponent} from './webide/webide.component';
+import {MessagesComponent} from './messages/messages.component';
+import {WebSocketService} from './services/websocket.service';
+import {TerminalComponent} from './terminal/terminal.component';
+import {FSMUpdateService} from './services/fsmupdate.service';
+import {ProcessManagerService} from './services/processmanager.service';
+import {AppRoutingModule} from './app-routing.module';
+import {TestmessengerComponent} from './testmessenger/testmessenger.component';
+import {DeploymentNotificationService} from './services/deployment-notification.service';
 
 
 @NgModule({
@@ -46,7 +47,8 @@ import { TestmessengerComponent } from './testmessenger/testmessenger.component'
     WebSocketService,
     TerminadoService,
     FSMUpdateService,
-    ProcessManagerService
+    ProcessManagerService,
+    DeploymentNotificationService
   ],
   bootstrap: [
     AppComponent
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 73d6cb3..56df332 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,4 +1,4 @@
-<div [class.deploy-blur]="deployButtonState === 'DEPLOYING'">
+<div [ngClass]="{ 'deploy-blur': deploying }">
   <h1>Login page</h1>
   <form #loginForm="ngForm" (submit)="onSubmit()" [hidden]="submitted">
     <div class="form-group">
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index cb75932..0cbc273 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,21 +1,28 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { Login } from './login';
+import {DeploymentNotificationService} from '../services/deployment-notification.service';
+import {Subscription} from 'rxjs/Subscription';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })
-export class LoginComponent implements OnInit {
+export class LoginComponent implements OnInit, OnDestroy {
   model = new Login('', '');
   submitted = false;
   is_admin: boolean;
   logged_in_email: string;
+  deploying = false;
+  deploymentNotificationSubscription: Subscription;
+
   constructor(
-    private http: HttpClient
+    private http: HttpClient,
+    private deploymentNotificationService: DeploymentNotificationService
   ) {}
+
   onSubmit() {
     this.postLogin(this.model).subscribe(
       res => {
@@ -30,5 +37,15 @@ export class LoginComponent implements OnInit {
     return this.http.post<Login>('/login', login);
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.deploymentNotificationSubscription = this.deploymentNotificationService.deploying.subscribe(
+      (deploying) => this.deploying = deploying
+    );
+  }
+
+  ngOnDestroy() {
+    if (this.deploymentNotificationSubscription) {
+      this.deploymentNotificationSubscription.unsubscribe();
+    }
+  }
 }
diff --git a/src/app/services/deployment-notification.service.ts b/src/app/services/deployment-notification.service.ts
new file mode 100644
index 0000000..eb02e2e
--- /dev/null
+++ b/src/app/services/deployment-notification.service.ts
@@ -0,0 +1,11 @@
+import {Injectable} from '@angular/core';
+import {Subject} from 'rxjs/Subject';
+
+@Injectable()
+export class DeploymentNotificationService {
+
+  deploying: Subject<boolean> = new Subject<boolean>();
+
+  constructor() { }
+
+}
diff --git a/src/app/webide/webide.component.ts b/src/app/webide/webide.component.ts
index dcf45fd..724371d 100644
--- a/src/app/webide/webide.component.ts
+++ b/src/app/webide/webide.component.ts
@@ -15,6 +15,7 @@ import 'brace/theme/cobalt';
 import { SourceCode } from './source-code';
 import { WebSocketService } from '../services/websocket.service';
 import { ProcessManagerService } from '../services/processmanager.service';
+import {DeploymentNotificationService} from '../services/deployment-notification.service';
 
 const modelist = brace.acequire('ace/ext/modelist');
 
@@ -43,7 +44,8 @@ export class WebideComponent implements OnInit {
 
   constructor(private webSocketService: WebSocketService,
               private changeDetectorRef: ChangeDetectorRef,
-              private processManagerService: ProcessManagerService) { }
+              private processManagerService: ProcessManagerService,
+              private deploymentNotificationService: DeploymentNotificationService) { }
 
   ngOnInit() {
     this.webSocketService.connect();
@@ -109,11 +111,12 @@ export class WebideComponent implements OnInit {
 
   setDeployButtonState(state: string) {
     this.deployButtonState = state;
+    this.deploymentNotificationService.deploying.next(state === 'DEPLOYING' ? true : false);
   }
 
   deployCode() {
     this.processManagerService.restartProcess('login');
-    this.deployButtonState = 'DEPLOYING';
+    this.setDeployButtonState('DEPLOYING');
   }
 
   sendCodeIfDirty() {