From 4bd070b06b3ffe905b0f8dcd9a9bdaaaed4dd939 Mon Sep 17 00:00:00 2001 From: Jason Leeraert Date: Sun, 4 Oct 2020 11:54:43 +0100 Subject: [PATCH] Added package for progress buttonAdded component for re-usable install button --- wowup-electron/package.json | 1 + wowup-electron/src/app/app.module.ts | 2 + .../addon-detail/addon-detail.component.html | 15 ++- .../addon-install-button.component.html | 1 + .../addon-install-button.component.scss | 0 .../addon-install-button.component.spec.ts | 25 +++++ .../addon-install-button.component.ts | 101 ++++++++++++++++++ .../app/models/wowup/addon-detail.model.ts | 2 + .../src/app/models/wowup/potential-addon.ts | 1 + .../get-addons/get-addons.component.html | 3 +- .../src/app/pages/home/home.module.ts | 58 +++++----- wowup-electron/src/styles.scss | 4 + 12 files changed, 176 insertions(+), 37 deletions(-) create mode 100644 wowup-electron/src/app/components/addon-install-button/addon-install-button.component.html create mode 100644 wowup-electron/src/app/components/addon-install-button/addon-install-button.component.scss create mode 100644 wowup-electron/src/app/components/addon-install-button/addon-install-button.component.spec.ts create mode 100644 wowup-electron/src/app/components/addon-install-button/addon-install-button.component.ts diff --git a/wowup-electron/package.json b/wowup-electron/package.json index b0a475aa..c19aecc6 100644 --- a/wowup-electron/package.json +++ b/wowup-electron/package.json @@ -119,6 +119,7 @@ "electron-updater": "4.3.5", "globrex": "0.1.2", "lodash": "4.17.19", + "mat-progress-buttons": "9.1.1", "ncp": "2.0.0", "node-cache": "5.1.2", "node-disk-info": "1.1.0", diff --git a/wowup-electron/src/app/app.module.ts b/wowup-electron/src/app/app.module.ts index 05b264ff..5ada908e 100644 --- a/wowup-electron/src/app/app.module.ts +++ b/wowup-electron/src/app/app.module.ts @@ -22,6 +22,7 @@ import { FooterComponent } from './components/footer/footer.component'; import { DefaultHeadersInterceptor } from './interceptors/default-headers.interceptor'; import { AnalyticsService } from './services/analytics/analytics.service'; import { DirectiveModule } from './directive.module'; +import { MatProgressButtonsModule } from 'mat-progress-buttons'; // AoT requires an exported function for factories export function httpLoaderFactory(http: HttpClient): TranslateHttpLoader { @@ -42,6 +43,7 @@ export function httpLoaderFactory(http: HttpClient): TranslateHttpLoader { HomeModule, AppRoutingModule, DirectiveModule, + MatProgressButtonsModule.forRoot(), TranslateModule.forRoot({ loader: { provide: TranslateLoader, diff --git a/wowup-electron/src/app/components/addon-detail/addon-detail.component.html b/wowup-electron/src/app/components/addon-detail/addon-detail.component.html index 6a4a6481..b6fcfc1f 100644 --- a/wowup-electron/src/app/components/addon-detail/addon-detail.component.html +++ b/wowup-electron/src/app/components/addon-detail/addon-detail.component.html @@ -27,17 +27,14 @@
- VIEW IN BROWSER - +
diff --git a/wowup-electron/src/app/components/addon-install-button/addon-install-button.component.html b/wowup-electron/src/app/components/addon-install-button/addon-install-button.component.html new file mode 100644 index 00000000..3e87f0b3 --- /dev/null +++ b/wowup-electron/src/app/components/addon-install-button/addon-install-button.component.html @@ -0,0 +1 @@ + diff --git a/wowup-electron/src/app/components/addon-install-button/addon-install-button.component.scss b/wowup-electron/src/app/components/addon-install-button/addon-install-button.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/wowup-electron/src/app/components/addon-install-button/addon-install-button.component.spec.ts b/wowup-electron/src/app/components/addon-install-button/addon-install-button.component.spec.ts new file mode 100644 index 00000000..3d5157d9 --- /dev/null +++ b/wowup-electron/src/app/components/addon-install-button/addon-install-button.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddonInstallButtonComponent } from './addon-install-button.component'; + +describe('AddonInstallButtonComponent', () => { + let component: AddonInstallButtonComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddonInstallButtonComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AddonInstallButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/wowup-electron/src/app/components/addon-install-button/addon-install-button.component.ts b/wowup-electron/src/app/components/addon-install-button/addon-install-button.component.ts new file mode 100644 index 00000000..04b41603 --- /dev/null +++ b/wowup-electron/src/app/components/addon-install-button/addon-install-button.component.ts @@ -0,0 +1,101 @@ +import { Component, Input, OnInit } from "@angular/core"; +import { AddonDetailModel } from "app/models/wowup/addon-detail.model"; +import { AddonInstallState } from "app/models/wowup/addon-install-state"; +import { PotentialAddon } from "app/models/wowup/potential-addon"; +import { AddonService } from "app/services/addons/addon.service"; +import { SessionService } from "app/services/session/session.service"; +import { MatProgressButtonOptions } from "mat-progress-buttons"; + +@Component({ + selector: "app-addon-install-button", + templateUrl: "./addon-install-button.component.html", + styleUrls: ["./addon-install-button.component.scss"], +}) +export class AddonInstallButtonComponent implements OnInit { + @Input("addon") addon: PotentialAddon | AddonDetailModel; + + isInstalled: boolean; + canUninstall: boolean; + hasUpdate: boolean; + buttonOptions: MatProgressButtonOptions; + + constructor( + private _addonService: AddonService, + private _sessionService: SessionService + ) {} + + ngOnInit(): void { + this.isInstalled = this._addonService.isInstalled( + this.addon.externalId, + this._sessionService.selectedClientType + ); + this.setButtonOptions(); + } + + setButtonOptions(): void { + if (!this.isInstalled) { + this.buttonOptions = this.getBaseBtnOptions(); + } else if (this.isInstalled && !this.canUninstall) { + this.buttonOptions = this.getInstalledBtnOptions(); + } else if (this.isInstalled && this.canUninstall) { + this.buttonOptions = this.getUninstallBtnOptions(); + } else if (this.isInstalled && this.hasUpdate) { + this.buttonOptions = this.getUpdateBtnOptions(); + } + } + + onButtonClick(): void { + this.buttonOptions.active = true; + this.buttonOptions.text = "Installing..."; + this._addonService.installPotentialAddon( + this.addon as PotentialAddon, + this._sessionService.selectedClientType, + (state, progress) => { + if (state === AddonInstallState.Complete) { + this.isInstalled = true; + this.setButtonOptions(); + } + this.buttonOptions.value = progress; + } + ); + } + + private getBaseBtnOptions(): MatProgressButtonOptions { + return { + active: false, + text: "Install", + buttonColor: "primary", + barColor: "accent", + customClass: 'install-button', + raised: true, + stroked: false, + mode: "determinate", + value: 0, + disabled: false, + fullWidth: false, + }; + } + + private getInstalledBtnOptions(): MatProgressButtonOptions { + return { + ...this.getBaseBtnOptions(), + disabled: true, + active: false, + text: "Installed", + }; + } + + private getUninstallBtnOptions(): MatProgressButtonOptions { + return { + ...this.getBaseBtnOptions(), + text: "Uninstall", + }; + } + + private getUpdateBtnOptions(): MatProgressButtonOptions { + return { + ...this.getBaseBtnOptions(), + text: "Update", + }; + } +} diff --git a/wowup-electron/src/app/models/wowup/addon-detail.model.ts b/wowup-electron/src/app/models/wowup/addon-detail.model.ts index 4a0dba3d..db9fe866 100644 --- a/wowup-electron/src/app/models/wowup/addon-detail.model.ts +++ b/wowup-electron/src/app/models/wowup/addon-detail.model.ts @@ -3,6 +3,7 @@ import { AddonProviderType } from "app/addon-providers/addon-provider"; export class AddonDetailModel { id: number; categoryId: number; + externalId: string; version: string; name: string; author: string; @@ -33,5 +34,6 @@ export class AddonDetailModel { this.latestVersion = json.latestVersion; this.updatedAt = json.updatedAt; this.externalUrl = json.externalUrl; + this.externalId = json.externalId; } } diff --git a/wowup-electron/src/app/models/wowup/potential-addon.ts b/wowup-electron/src/app/models/wowup/potential-addon.ts index dedc9b6f..fa4f67a6 100644 --- a/wowup-electron/src/app/models/wowup/potential-addon.ts +++ b/wowup-electron/src/app/models/wowup/potential-addon.ts @@ -8,4 +8,5 @@ export interface PotentialAddon { author: string; downloadCount: number; summary?: string; + screenshotUrls?: string[]; } diff --git a/wowup-electron/src/app/pages/get-addons/get-addons.component.html b/wowup-electron/src/app/pages/get-addons/get-addons.component.html index 89b24538..c9e50a8b 100644 --- a/wowup-electron/src/app/pages/get-addons/get-addons.component.html +++ b/wowup-electron/src/app/pages/get-addons/get-addons.component.html @@ -52,7 +52,8 @@ Status - + + diff --git a/wowup-electron/src/app/pages/home/home.module.ts b/wowup-electron/src/app/pages/home/home.module.ts index a8b85fcd..dc22fbe3 100644 --- a/wowup-electron/src/app/pages/home/home.module.ts +++ b/wowup-electron/src/app/pages/home/home.module.ts @@ -1,28 +1,30 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import { NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; -import { HomeRoutingModule } from './home-routing.module'; +import { HomeRoutingModule } from "./home-routing.module"; -import { HomeComponent } from './home.component'; -import { SharedModule } from '../../shared/shared.module'; -import { MatModule } from '../../mat-module'; -import { MyAddonsComponent } from '../my-addons/my-addons.component'; -import { OptionsComponent } from '../options/options.component'; -import { GetAddonsComponent } from '../get-addons/get-addons.component'; -import { AboutComponent } from '../about/about.component'; -import { PotentialAddonTableColumnComponent } from 'app/components/potential-addon-table-column/potential-addon-table-column.component'; -import { PotentialAddonStatusColumnComponent } from 'app/components/potential-addon-status-column/potential-addon-status-column.component'; -import { MyAddonsAddonCellComponent } from 'app/components/my-addons-addon-cell/my-addons-addon-cell.component'; -import { ProgressSpinnerComponent } from 'app/components/progress-spinner/progress-spinner.component'; -import { DownloadCountPipe } from 'app/pipes/download-count.pipe'; -import { TelemetryDialogComponent } from 'app/components/telemetry-dialog/telemetry-dialog.component'; -import { ConfirmDialogComponent } from 'app/components/confirm-dialog/confirm-dialog.component'; -import { AlertDialogComponent } from 'app/components/alert-dialog/alert-dialog.component'; -import { WowClientOptionsComponent } from 'app/components/wow-client-options/wow-client-options.component'; -import { DirectiveModule } from 'app/directive.module'; -import { InstallFromUrlDialogComponent } from 'app/components/install-from-url-dialog/install-from-url-dialog.component'; -import { AddonDetailComponent } from 'app/components/addon-detail/addon-detail.component'; -import { AddonProviderBadgeComponent } from 'app/components/addon-provider-badge/addon-provider-badge.component'; +import { HomeComponent } from "./home.component"; +import { SharedModule } from "../../shared/shared.module"; +import { MatModule } from "../../mat-module"; +import { MyAddonsComponent } from "../my-addons/my-addons.component"; +import { OptionsComponent } from "../options/options.component"; +import { GetAddonsComponent } from "../get-addons/get-addons.component"; +import { AboutComponent } from "../about/about.component"; +import { PotentialAddonTableColumnComponent } from "app/components/potential-addon-table-column/potential-addon-table-column.component"; +import { PotentialAddonStatusColumnComponent } from "app/components/potential-addon-status-column/potential-addon-status-column.component"; +import { MyAddonsAddonCellComponent } from "app/components/my-addons-addon-cell/my-addons-addon-cell.component"; +import { ProgressSpinnerComponent } from "app/components/progress-spinner/progress-spinner.component"; +import { DownloadCountPipe } from "app/pipes/download-count.pipe"; +import { TelemetryDialogComponent } from "app/components/telemetry-dialog/telemetry-dialog.component"; +import { ConfirmDialogComponent } from "app/components/confirm-dialog/confirm-dialog.component"; +import { AlertDialogComponent } from "app/components/alert-dialog/alert-dialog.component"; +import { WowClientOptionsComponent } from "app/components/wow-client-options/wow-client-options.component"; +import { DirectiveModule } from "app/directive.module"; +import { InstallFromUrlDialogComponent } from "app/components/install-from-url-dialog/install-from-url-dialog.component"; +import { AddonDetailComponent } from "app/components/addon-detail/addon-detail.component"; +import { AddonProviderBadgeComponent } from "app/components/addon-provider-badge/addon-provider-badge.component"; +import { MatProgressButtonsModule } from "mat-progress-buttons"; +import { AddonInstallButtonComponent } from "app/components/addon-install-button/addon-install-button.component"; @NgModule({ declarations: [ @@ -42,14 +44,16 @@ import { AddonProviderBadgeComponent } from 'app/components/addon-provider-badge WowClientOptionsComponent, InstallFromUrlDialogComponent, AddonDetailComponent, - AddonProviderBadgeComponent + AddonProviderBadgeComponent, + AddonInstallButtonComponent ], imports: [ CommonModule, SharedModule, HomeRoutingModule, MatModule, - DirectiveModule - ] + DirectiveModule, + MatProgressButtonsModule, + ], }) -export class HomeModule { } +export class HomeModule {} diff --git a/wowup-electron/src/styles.scss b/wowup-electron/src/styles.scss index 570d69c4..5a6937a3 100644 --- a/wowup-electron/src/styles.scss +++ b/wowup-electron/src/styles.scss @@ -270,3 +270,7 @@ img { background: rgb(107, 105, 214); background: linear-gradient(146deg, rgba(107, 105, 214, 1) 0%, rgba(80, 79, 161, 1) 100%); } + +.install-button { + min-width: 110px !important; +}