Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-31 04:23:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

spinner working

Browse Source
This commit is contained in:
Drew Ansbacher
2021-12-01 10:36:42 -07:00
committed by Aiden McClelland
parent 1614e88738
commit 1a3d0f8e95
1 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
ui/src/app/pages/apps-routes/app-list/app-list-rec/app-list-rec.component.ts
View File

@@ -4,29 +4,29 @@ import {
EventEmitter, EventEmitter,
Input, Input,
Output, Output,
} from "@angular/core"; } from '@angular/core'
import { AlertController } from "@ionic/angular"; import { AlertController } from '@ionic/angular'
import { ApiService } from "src/app/services/api/embassy-api.service"; import { ApiService } from 'src/app/services/api/embassy-api.service'
import { ErrorToastService } from "src/app/services/error-toast.service"; import { ErrorToastService } from 'src/app/services/error-toast.service'
import { from, merge, OperatorFunction, pipe, Subject } from "rxjs"; import { from, merge, OperatorFunction, pipe, Subject } from 'rxjs'
import { catchError, mapTo, startWith, switchMap, tap } from "rxjs/operators"; import { catchError, mapTo, startWith, switchMap, tap } from 'rxjs/operators'
import { RecoveredInfo } from "src/app/util/parse-data-model"; import { RecoveredInfo } from 'src/app/util/parse-data-model'
@Component({ @Component({
selector: "app-list-rec", selector: 'app-list-rec',
templateUrl: "app-list-rec.component.html", templateUrl: 'app-list-rec.component.html',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class AppListRecComponent { export class AppListRecComponent {
// Asynchronous actions initiators // Asynchronous actions initiators
readonly install$ = new Subject<RecoveredInfo>(); readonly install$ = new Subject<RecoveredInfo>()
readonly delete$ = new Subject<RecoveredInfo>(); readonly delete$ = new Subject<RecoveredInfo>()
@Input() @Input()
rec: RecoveredInfo; rec: RecoveredInfo
@Output() @Output()
readonly deleted = new EventEmitter<void>(); readonly deleted = new EventEmitter<void>()
// Installing package // Installing package
readonly installing$ = this.install$.pipe( readonly installing$ = this.install$.pipe(
@@ -34,10 +34,10 @@ export class AppListRecComponent {
// Mapping each installation to API request // Mapping each installation to API request
from(this.api.installPackage({ id })).pipe( from(this.api.installPackage({ id })).pipe(
// Mapping operation to true/false loading indication // Mapping operation to true/false loading indication
loading(this.errToast) loading(this.errToast),
) ),
) ),
); )
// Deleting package // Deleting package
readonly deleting$ = this.delete$.pipe( readonly deleting$ = this.delete$.pipe(
@@ -47,52 +47,52 @@ export class AppListRecComponent {
// Notifying parent component that package is removed from recovered items // Notifying parent component that package is removed from recovered items
tap(() => this.deleted.emit()), tap(() => this.deleted.emit()),
// Mapping operation to true/false loading indication // Mapping operation to true/false loading indication
loading(this.errToast)) loading(this.errToast)),
) ),
); )
// Merging both true/false loading indicators to a single stream // Merging both true/false loading indicators to a single stream
readonly loading$ = merge(this.installing$, this.deleting$); readonly loading$ = merge(this.installing$, this.deleting$)
constructor( constructor (
private readonly api: ApiService, private readonly api: ApiService,
private readonly errToast: ErrorToastService, private readonly errToast: ErrorToastService,
private readonly alertCtrl: AlertController private readonly alertCtrl: AlertController,
) {} ) { }
async deleteRecovered(pkg: RecoveredInfo): Promise<void> { async deleteRecovered (pkg: RecoveredInfo): Promise<void> {
const alert = await this.alertCtrl.create({ const alert = await this.alertCtrl.create({
header: "Delete Data", header: 'Delete Data',
message: `This action will permanently delete all data associated with ${pkg.title}.`, message: `This action will permanently delete all data associated with ${pkg.title}.`,
buttons: [ buttons: [
{ {
text: "Cancel", text: 'Cancel',
role: "cancel", role: 'cancel',
}, },
{ {
text: "Delete", text: 'Delete',
handler: () => { handler: () => {
// Initiate deleting of 'pkg' // Initiate deleting of 'pkg'
this.delete$.next(pkg); this.delete$.next(pkg)
}, },
cssClass: "enter-click", cssClass: 'enter-click',
}, },
], ],
}); })
await alert.present(); await alert.present()
} }
} }
// Custom RxJS operator to turn asynchronous operation into a true/false loading indicator // Custom RxJS operator to turn asynchronous operation into a true/false loading indicator
function loading( function loading (
errToast: ErrorToastService errToast: ErrorToastService,
): OperatorFunction<unknown, boolean> { ): OperatorFunction<unknown, boolean> {
return pipe( return pipe(
// Start operation with true
startWith(true),
// Show notification on error // Show notification on error
catchError((e) => from(errToast.present(e))), catchError((e) => from(errToast.present(e))),
// Map any result to false to stop loading inidicator // Map any result to false to stop loading inidicator
mapTo(false) mapTo(false),
); // Start operation with true
startWith(true),
)
} }