134 lines
3.6 KiB
TypeScript
134 lines
3.6 KiB
TypeScript
import { HttpErrorResponse } from '@angular/common/http';
|
|
import { Component, EventEmitter, OnDestroy, OnInit, ViewChild } from '@angular/core';
|
|
import { ThemePalette } from '@angular/material/core';
|
|
import { MatTable, MatTableDataSource } from '@angular/material/table';
|
|
import { Subscription } from 'rxjs';
|
|
import { takeUntil } from 'rxjs/operators';
|
|
import { environment } from '../../environments/environment';
|
|
import { Protocol } from '../enums/protocol.enum';
|
|
import { Theme } from '../enums/theme.enum';
|
|
import { GatewayService } from '../services/gateway.service';
|
|
import { ThemeService } from '../services/theme.service';
|
|
|
|
@Component({
|
|
selector: 'app-pages',
|
|
templateUrl: './pages.component.html',
|
|
styleUrls: ['./pages.component.scss']
|
|
})
|
|
export class PagesComponent implements OnInit, OnDestroy {
|
|
|
|
@ViewChild(MatTable) matTable!: MatTable<Result>;
|
|
|
|
gateways!: string[];
|
|
inputColour: ThemePalette = 'primary';
|
|
ipfs = '';
|
|
ipns = '';
|
|
|
|
readonly dataSource = new MatTableDataSource<Result>([]);
|
|
readonly displayedColumns: ['icon', 'gateway'] = ['icon', 'gateway'];
|
|
readonly subscriptions: Subscription[] = [];
|
|
|
|
private readonly destroy$ = new EventEmitter<void>();
|
|
|
|
constructor(
|
|
private readonly gatewayService: GatewayService,
|
|
private readonly themeService: ThemeService
|
|
) { }
|
|
|
|
ngOnInit(): void {
|
|
this.gatewayService.list().subscribe((gateways): void => { this.gateways = gateways; });
|
|
|
|
// Theme
|
|
this.setColours(this.themeService.current);
|
|
this.themeService.valueChanges.pipe(
|
|
takeUntil(this.destroy$)
|
|
).subscribe((theme): void => {
|
|
this.setColours(theme);
|
|
});
|
|
}
|
|
|
|
ngOnDestroy(): void {
|
|
this.destroy$.complete();
|
|
}
|
|
|
|
cacheIPFS(): void {
|
|
this.ipfs = this.ipfs.trim();
|
|
this.cache(Protocol.IPFS, this.ipfs);
|
|
}
|
|
|
|
cacheIPNS(): void {
|
|
this.ipns = this.ipns.trim();
|
|
this.cache(Protocol.IPNS, this.ipns);
|
|
}
|
|
|
|
cache(protocol: Protocol, hashpath: string): void {
|
|
|
|
// Clear subscriptions
|
|
while (this.subscriptions.length) {
|
|
const sub = this.subscriptions.pop();
|
|
if (sub && !sub.closed) {
|
|
sub.unsubscribe();
|
|
}
|
|
}
|
|
|
|
// Clear table
|
|
this.dataSource.data = [];
|
|
this.matTable.renderRows();
|
|
console.clear();
|
|
|
|
this.gateways.forEach((gateway): void => {
|
|
this.subscriptions.push(
|
|
this.gatewayService.get(gateway, protocol, hashpath).subscribe((resp): void => {
|
|
this.dataSource.data.push({
|
|
gateway: this.gatewayService.url(gateway, protocol, hashpath),
|
|
message: resp.statusText,
|
|
icon: this.getIcon(resp.status),
|
|
ok: resp.ok,
|
|
});
|
|
this.matTable.renderRows();
|
|
}, (error: HttpErrorResponse): void => {
|
|
this.dataSource.data.push({
|
|
gateway: this.gatewayService.url(gateway, protocol, hashpath),
|
|
message: error.statusText,
|
|
icon: this.getIcon(error.status),
|
|
ok: error.ok,
|
|
});
|
|
this.matTable.renderRows();
|
|
})
|
|
);
|
|
});
|
|
}
|
|
|
|
private setColours(theme: Theme): void {
|
|
switch (theme) {
|
|
case Theme.Light:
|
|
this.inputColour = 'primary';
|
|
break;
|
|
case Theme.Dark:
|
|
this.inputColour = 'accent';
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
private getIcon(status: number): string {
|
|
if (status >= 200 && status < 300) return '✅';
|
|
switch (status) {
|
|
case 0: return '❌';
|
|
case 403: return '⛔';
|
|
case 404: return '❓';
|
|
case 500: return '❗';
|
|
default: return environment.production ? '❌' : '❔';
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
interface Result {
|
|
gateway: string;
|
|
message: string;
|
|
icon: string;
|
|
ok: boolean;
|
|
}
|