Finalized auto-update system

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bridge",
   "version": "0.0.0",
-  "description": "A handy Clone Hero library management tool with built in chart searching and downloading.",
+  "description": "A Clone Hero library management tool with built in chart searching and downloading.",
   "homepage": "https://github.com/Geomitron/Bridge",
   "license": "GPL-3.0",
   "author": {

src/app/components/settings/settings.component.html

@@ -49,8 +49,8 @@
 <div class="bottom">
   <div class="ui buttons">
     <button *ngIf="updateAvailable" class="ui labeled icon positive button" (click)="downloadUpdate()">
-      <i class="left cloud download alternate icon"></i>Update available</button>
+      <i class="left alternate icon" [ngClass]="(updateDownloaded ? 'sync' : 'cloud download')"></i>{{downloadUpdateText}}</button>
-    <button id="versionNumberButton" class="ui basic disabled button">v0.0.0</button>
+    <button id="versionNumberButton" class="ui basic disabled button">{{currentVersion}}</button>
   </div>
   
   <button class="ui basic icon button" data-tooltip="Toggle developer tools" data-position="top right"

src/app/components/settings/settings.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core'
+import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef } from '@angular/core'
 import { ElectronService } from 'src/app/core/services/electron.service'
 import { SettingsService } from 'src/app/core/services/settings.service'
 
@@ -12,18 +12,29 @@ export class SettingsComponent implements OnInit, AfterViewInit {
 
   cacheSize = 'Calculating...'
   updateAvailable = false
-  updateVersion: string = null
+  downloadUpdateText = 'Update available'
+  updateDownloading = false
+  updateDownloaded = false
+  currentVersion = ''
 
-  constructor(public settingsService: SettingsService, private electronService: ElectronService) { }
+  constructor(public settingsService: SettingsService, private electronService: ElectronService, private ref: ChangeDetectorRef) { }
 
   async ngOnInit() {
     const cacheSize = await this.settingsService.getCacheSize()
     this.cacheSize = Math.round(cacheSize / 1000000) + ' MB'
     this.electronService.receiveIPC('update-available', (result) => {
-      this.updateVersion = result.version
       this.updateAvailable = true
+      this.downloadUpdateText = `Update available (${result.version})`
+      this.ref.detectChanges()
+    })
+    this.electronService.invoke('get-current-version', undefined).then(version => {
+      this.currentVersion = `v${version}`
+      this.ref.detectChanges()
+    })
+    this.electronService.invoke('get-update-available', undefined).then(isAvailable => {
+      this.updateAvailable = isAvailable
+      this.ref.detectChanges()
     })
-    this.updateAvailable = await this.electronService.invoke('get-update-available', undefined)
   }
 
   ngAfterViewInit() {
@@ -63,15 +74,22 @@ export class SettingsComponent implements OnInit, AfterViewInit {
   }
 
   downloadUpdate() {
-    this.electronService.sendIPC('download-update', undefined)
+    if (this.updateDownloaded) {
-    this.electronService.receiveIPC('update-progress', (result) => console.log(result.percent))
-    this.electronService.receiveIPC('update-downloaded', (result) => {
-      console.log(result)
-      setTimeout(() => {
-        console.log('quit and install...')
       this.electronService.sendIPC('quit-and-install', undefined)
-      }, 30000)
+    } else if (!this.updateDownloading) {
+      this.updateDownloading = true
+      this.electronService.sendIPC('download-update', undefined)
+      this.downloadUpdateText = 'Downloading... (0%)'
+      this.electronService.receiveIPC('update-progress', (result) => {
+        this.downloadUpdateText = `Downloading... (${result.percent.toFixed(0)}%)`
+        this.ref.detectChanges()
       })
+      this.electronService.receiveIPC('update-downloaded', () => {
+        this.downloadUpdateText = 'Quit and install update'
+        this.updateDownloaded = true
+        this.ref.detectChanges()
+      })
+    }
   }
 
   toggleDevTools() {

src/app/components/toolbar/toolbar.component.ts

@@ -26,8 +26,10 @@ export class ToolbarComponent implements OnInit {
 
     this.electronService.receiveIPC('update-available', () => {
       this.updateAvailable = true
+      this.ref.detectChanges()
     })
     this.updateAvailable = await this.electronService.invoke('get-update-available', undefined)
+    this.ref.detectChanges()
   }
 
   minimize() {