Add more icons

CHANGELOG.md

@@ -9,7 +9,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/), and this
 ### Added
 
 - Support for subdomain gateways
-- Strict Mode
+- Strict mode
+- More icons
 
 ### Changed
 

src/app/pages/pages.component.html

@@ -36,13 +36,10 @@
   <table class="mat-elevation-z8" [dataSource]="dataSource" mat-table>
 
     <!-- Result Column -->
-    <ng-container matColumnDef="error">
+    <ng-container matColumnDef="icon">
       <th mat-header-cell *matHeaderCellDef> Status </th>
       <td mat-cell *matCellDef="let element">
-        <div [ngSwitch]="element.error">
+        <span [matTooltip]="element.message"> {{ element.icon }} </span>
-          <div *ngSwitchCase="null">✅</div>
-          <div [matTooltip]="element.error.statusText" *ngSwitchDefault>❌</div>
-        </div>
       </td>
     </ng-container>
 

src/app/pages/pages.component.ts

@@ -2,6 +2,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatTable, MatTableDataSource } from '@angular/material/table';
 import { Subscription } from 'rxjs';
+import { environment } from '../../environments/environment';
 import { Protocol } from '../enums/protocol.enum';
 import { GatewayService } from '../services/gateway.service';
 
@@ -19,7 +20,7 @@ export class PagesComponent implements OnInit {
   ipns = '';
 
   readonly dataSource = new MatTableDataSource<Result>([]);
-  readonly displayedColumns: ['error', 'gateway'] = ['error', 'gateway'];
+  readonly displayedColumns: ['icon', 'gateway'] = ['icon', 'gateway'];
   readonly subscriptions: Subscription[] = [];
 
   constructor(
@@ -31,10 +32,12 @@ export class PagesComponent implements OnInit {
   }
 
   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);
   }
 
@@ -55,20 +58,40 @@ export class PagesComponent implements OnInit {
 
     this.gateways.forEach((gateway): void => {
       this.subscriptions.push(
-        this.gatewayService.get(gateway, protocol, hashpath).subscribe((): void => {
+        this.gatewayService.get(gateway, protocol, hashpath).subscribe((resp): void => {
-          this.dataSource.data.push({ gateway: this.gatewayService.url(gateway, protocol, hashpath), error: null });
+          this.dataSource.data.push({
+            gateway: this.gatewayService.url(gateway, protocol, hashpath),
+            message: resp.statusText,
+            icon: this.icon(resp.status)
+          });
           this.matTable.renderRows();
         }, (error: HttpErrorResponse): void => {
-          this.dataSource.data.push({ gateway: this.gatewayService.url(gateway, protocol, hashpath), error });
+          this.dataSource.data.push({
+            gateway: this.gatewayService.url(gateway, protocol, hashpath),
+            message: error.statusText,
+            icon: this.icon(error.status)
+          });
           this.matTable.renderRows();
         })
       );
     });
   }
 
+  private icon(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;
-  error: HttpErrorResponse | null;
+  message: string;
+  icon: string;
 }

src/app/services/gateway.service.ts

@@ -1,4 +1,4 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpResponseBase } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { environment } from '../../environments/environment';
@@ -26,9 +26,9 @@ export class GatewayService {
     throw new Error('Couldn\'t find environment nor base.')
   }
 
-  get(gateway: string, protocol: Protocol, hashpath: string): Observable<Blob> {
+  get(gateway: string, protocol: Protocol, hashpath: string): Observable<HttpResponseBase> {
-    return this.http.get<Blob>(`${this.url(gateway, protocol, hashpath)}#x-ipfs-companion-no-redirect`, {
+    return this.http.get<HttpResponseBase>(`${this.url(gateway, protocol, hashpath)}#x-ipfs-companion-no-redirect`, {
-      responseType: 'blob' as 'json'
+      observe: 'response'
     });
   }