From 1d3847ec8e47c1fec1e1e110f024278a711129fa Mon Sep 17 00:00:00 2001
From: Michael Lu <38804680+Yamazaki93@users.noreply.github.com>
Date: Sun, 20 Oct 2019 17:07:24 -0700
Subject: [PATCH] Add functional update checking, change header text color

---
 app/frontend/src/app/app.module.ts            |  6 +++-
 .../requests-list.component.html              |  2 +-
 .../server-list/server-list.component.html    |  2 +-
 .../settings-page.component.html              | 21 +++++++++++--
 .../settings-page/settings-page.component.ts  | 30 +++++++++++++++++--
 .../src/app/settings/settings.module.ts       |  6 +++-
 .../src/app/updater/updater.module.ts         | 27 +++++++++++++++--
 .../src/app/updater/updater.service.ts        |  2 +-
 .../connection/connection.component.html      |  4 +--
 9 files changed, 87 insertions(+), 13 deletions(-)

diff --git a/app/frontend/src/app/app.module.ts b/app/frontend/src/app/app.module.ts
index 75b1149..d649446 100644
--- a/app/frontend/src/app/app.module.ts
+++ b/app/frontend/src/app/app.module.ts
@@ -9,6 +9,8 @@ import { ServersModule } from './servers/servers.module';
 import { WorkspaceModule } from './workspace/workspace.module';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
 import { RequestsModule } from './requests/requests.module';
+import { UpdaterModule } from './updater/updater.module';
+import { SettingsModule } from './settings/settings.module';
 
 
 @NgModule({
@@ -20,11 +22,13 @@ import { RequestsModule } from './requests/requests.module';
     CommonModule,
     BrowserAnimationsModule,
     MonacoEditorModule,
+    UpdaterModule,
     MessagingModule,
     ControlsModule,
     ServersModule,
     WorkspaceModule,
-    RequestsModule
+    RequestsModule,
+    SettingsModule
   ],
   providers: [
   ],
diff --git a/app/frontend/src/app/requests/requests-list/requests-list.component.html b/app/frontend/src/app/requests/requests-list/requests-list.component.html
index 5481390..3109d4d 100644
--- a/app/frontend/src/app/requests/requests-list/requests-list.component.html
+++ b/app/frontend/src/app/requests/requests-list/requests-list.component.html
@@ -1,7 +1,7 @@
 <div class="w-full text-white flex flex-col">
   <div class="flex-shrink-0 raised-4 px-3 py-1 rounded rounded-b-none w-full flex">
     <div class="min-w-0 flex-shrink w-full">
-      <h1 class="text-xl">Requests</h1>
+      <h1 class="text-xl text-gray-500">Requests</h1>
     </div>
     <div class="cursor-pointer hover:text-primary p-1" title="Toggle show/hide incompatible requests" (click)="toggleHideIncompatible()">
       <h1 class="text-2xl flex align-center"><i class="flex" [class.ion-md-eye-off]="hideIncompatible" [class.ion-md-eye]="!hideIncompatible"></i></h1>
diff --git a/app/frontend/src/app/servers/server-list/server-list.component.html b/app/frontend/src/app/servers/server-list/server-list.component.html
index 0ee6a98..69d384e 100644
--- a/app/frontend/src/app/servers/server-list/server-list.component.html
+++ b/app/frontend/src/app/servers/server-list/server-list.component.html
@@ -1,7 +1,7 @@
 <div class="w-full text-white flex flex-col">
   <div class="flex-shrink-0 raised-4 px-3 py-1 rounded rounded-b-none w-full flex">
     <div class="min-w-0 flex-shrink w-full">
-      <h1 class="text-xl">Servers</h1>
+      <h1 class="text-xl text-gray-500">Servers</h1>
     </div>
     <div class="cursor-pointer hover:text-primary p-1 mr-2" (click)="adding = true;" title="Add new server">
       <h1 class="text-2xl flex align-center"><i class="ion-md-add flex"></i></h1>
diff --git a/app/frontend/src/app/settings/settings-page/settings-page.component.html b/app/frontend/src/app/settings/settings-page/settings-page.component.html
index c8f92f5..4123d6e 100644
--- a/app/frontend/src/app/settings/settings-page/settings-page.component.html
+++ b/app/frontend/src/app/settings/settings-page/settings-page.component.html
@@ -1,9 +1,26 @@
 <div class="text-white flex flex-col">
   <div class="p-2">
-    <h3 class="text-xl">Updates</h3>
+    <h3 class="text-xl text-gray-500">Updates</h3>
+    <div class="mt-1" *ngIf="status === UpdaterStatus.DownloadingUpdate">
+      <!-- <div class="progress smooth-1" [style.width.%]="downloadProgress"></div> -->
+      <app-spinner [size]="25"></app-spinner>
+    </div>
+    <div class="mt-1">
+      <h3 *ngIf="status === UpdaterStatus.NoUpdateAvailable">No update available</h3>
+      <h3 *ngIf="status === UpdaterStatus.UpdateAvailable">New version available: {{newVersion}}</h3>
+      <h3 *ngIf="status === UpdaterStatus.DownloadingUpdate">Downloading...</h3>
+      <h3 *ngIf="status === UpdaterStatus.CheckingUpdate">Checking for update...</h3>
+      <h3 *ngIf="status === UpdaterStatus.InstallingUpdate">Installing update...</h3>
+    </div>
+    <div class="mt-1">
+      <button class="btn btn-primary btn-outline mr-1" *ngIf="status === UpdaterStatus.NoUpdateAvailable || status === UpdaterStatus.UpdateAvailable"
+        (click)="checkUpdate()"><i class="ion-ios-refresh"></i> Check For Update</button>
+      <button class="btn btn-success btn-outline" *ngIf="status === UpdaterStatus.UpdateAvailable" (click)="install()"><i
+          class="ion-ios-cloud-download"></i> Download And Install Update</button>
+    </div>
   </div>
   <div class="p-2 flex flex-col">
-    <h3 class="text-xl">About</h3>
+    <h3 class="text-xl text-gray-500">About</h3>
     <p>Version 0.1.0</p>
     <p>License MIT</p>
   </div>
diff --git a/app/frontend/src/app/settings/settings-page/settings-page.component.ts b/app/frontend/src/app/settings/settings-page/settings-page.component.ts
index e7b9cbc..96c4379 100644
--- a/app/frontend/src/app/settings/settings-page/settings-page.component.ts
+++ b/app/frontend/src/app/settings/settings-page/settings-page.component.ts
@@ -1,15 +1,41 @@
 import { Component, OnInit } from '@angular/core';
+import { UpdaterStatus, UpdaterService } from 'src/app/updater/updater.service';
+import { SubscriptionComponent } from 'src/app/helpers/subscription-component';
 
 @Component({
   selector: 'app-settings-page',
   templateUrl: './settings-page.component.html',
   styleUrls: ['./settings-page.component.scss']
 })
-export class SettingsPageComponent implements OnInit {
+export class SettingsPageComponent extends SubscriptionComponent implements OnInit {
+
+  private status = UpdaterStatus.NoUpdateAvailable;
+  private UpdaterStatus = UpdaterStatus;
+  private downloadProgress = 0;
+  private newVersion = '';
+  constructor(
+    private updater: UpdaterService
+  ) {
+    super();
+  }
 
-  constructor() { }
 
   ngOnInit() {
+    this.recordSubscription(this.updater.updaterStatus.subscribe(ua => {
+      this.status = ua;
+    }));
+    this.recordSubscription(this.updater.updateVersion.subscribe(version => {
+      this.newVersion = version;
+    }));
+    this.recordSubscription(this.updater.updateDownloadProgress.subscribe(pgs => {
+      this.downloadProgress = pgs;
+    }));
+  }
+  checkUpdate() {
+    this.updater.checkUpdate();
+  }
+  install() {
+    this.updater.installUpdate();
   }
 
 }
diff --git a/app/frontend/src/app/settings/settings.module.ts b/app/frontend/src/app/settings/settings.module.ts
index 0a49fe4..542cd91 100644
--- a/app/frontend/src/app/settings/settings.module.ts
+++ b/app/frontend/src/app/settings/settings.module.ts
@@ -3,6 +3,8 @@ import { CommonModule } from '@angular/common';
 import { SettingsPageComponent } from './settings-page/settings-page.component';
 import { FormsModule } from '@angular/forms';
 import { WorkspaceModule } from '../workspace/workspace.module';
+import { ControlsModule } from '../controls/controls.module';
+import { UpdaterModule } from '../updater/updater.module';
 
 @NgModule({
   declarations: [SettingsPageComponent],
@@ -11,7 +13,9 @@ import { WorkspaceModule } from '../workspace/workspace.module';
   imports: [
     CommonModule,
     FormsModule,
-    WorkspaceModule
+    WorkspaceModule,
+    UpdaterModule,
+    ControlsModule
   ]
 })
 export class SettingsModule { }
diff --git a/app/frontend/src/app/updater/updater.module.ts b/app/frontend/src/app/updater/updater.module.ts
index 3333810..f6c117c 100644
--- a/app/frontend/src/app/updater/updater.module.ts
+++ b/app/frontend/src/app/updater/updater.module.ts
@@ -1,10 +1,33 @@
-import { NgModule } from '@angular/core';
+import { NgModule, APP_INITIALIZER } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { UpdaterService } from './updater.service';
+import { MessagingModule } from '../messaging/messaging.module';
 
 @NgModule({
   declarations: [],
   imports: [
-    CommonModule
+    CommonModule,
+    MessagingModule
+  ],
+  providers: [
+    UpdaterService,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initModule,
+      multi: true,
+      deps: [
+        UpdaterService,
+      ]
+    },
   ]
 })
 export class UpdaterModule { }
+
+function initModule(
+  us: UpdaterService,
+): () => Promise<any> {
+  return (): Promise<any> => {
+    us.init();
+    return Promise.resolve();
+  };
+}
diff --git a/app/frontend/src/app/updater/updater.service.ts b/app/frontend/src/app/updater/updater.service.ts
index 0108c57..e3446f0 100644
--- a/app/frontend/src/app/updater/updater.service.ts
+++ b/app/frontend/src/app/updater/updater.service.ts
@@ -40,7 +40,7 @@ export class UpdaterService {
           that.electron.Send(new UpdaterCommand('commence-install-update'));
         }, 7 * 1000);
       } else if (evt.Event === 'checking') {
-        if (evt.Arg.inProgress) {
+        if (evt.Arg) {
           this.statusSubject.next(UpdaterStatus.CheckingUpdate);
         }
       }
diff --git a/app/frontend/src/app/websocket-servers/connection/connection.component.html b/app/frontend/src/app/websocket-servers/connection/connection.component.html
index dba3637..ef4b6a6 100644
--- a/app/frontend/src/app/websocket-servers/connection/connection.component.html
+++ b/app/frontend/src/app/websocket-servers/connection/connection.component.html
@@ -1,5 +1,5 @@
 <div class="flex flex-col w-full h-full min-h-0 relative text-white">
-  <h3 class="text-lg p-2">Request</h3>
+  <h3 class="text-lg p-2 text-gray-500">Request</h3>
   <div class="w-full px-2 flex flex-shrink-0 items-center">
     <div class="min-w-0 w-full">
       <input [(ngModel)]="requestName" name="requestName"
@@ -22,7 +22,7 @@ <h3 class="text-lg p-2">Request</h3>
     <p class="text-sm text-gray-400">Ctrl + Enter</p>
   </div>
   <div class="w-full p-2 flex flex-row flex-shrink-0">
-    <h3 class="text-lg mr-2">Response</h3>
+    <h3 class="text-lg mr-2 text-gray-500">Response</h3>
     <h3 class="text-lg text-danger" *ngIf="err">{{err}}</h3>
   </div>
   <div class="h-full min-h-0 flex-shrink relative">