Merge remote-tracking branch 'origin/master' into mononaut/seo-ssr

frontend/src/app/lightning/node/node-preview.component.html

@@ -12,7 +12,7 @@
     </div>
   </div>
   <div class="row">
-    <div class="col-md">
+    <div class="col-md table-col">
       <a class="subtitle" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">{{ node.public_key }}</a>
       <table class="table table-borderless table-striped">
         <tbody>

frontend/src/app/lightning/node/node-preview.component.scss

@@ -1,3 +1,8 @@
+.table-col {
+  max-width: calc(100% - 470px);
+  overflow: hidden;
+}
+
 .table {
   margin-top: 6px;
   font-size: 32px;

frontend/src/app/lightning/node/node.component.html

@@ -3,13 +3,17 @@
   <ng-container *ngIf="!error">
     <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
     <div class="title-container mb-2">
-      <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
-      <span class="tx-link">
+      <div class="d-flex justify-content-between align-items-center">
+        <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
+        <!-- <app-node-owner [nodeOwner$]="nodeOwner$" [publicKey]="node.public_key" [alias]="node.alias" class="claim-btn"></app-node-owner> -->
+      </div>
+      <span class="tx-link justify-content-between align-items-center">
         <span class="node-id">
           <app-truncate [text]="node.public_key" [lastChars]="8" [link]="['/lightning/node' | relativeUrl, node.public_key]">
             <app-clipboard [text]="node.public_key"></app-clipboard>
           </app-truncate>
         </span>
+        <!-- <app-node-owner [nodeOwner$]="nodeOwner$" [publicKey]="node.public_key" [alias]="node.alias" class="claim-btn-mobile"></app-node-owner> -->
       </span>
     </div>
   </ng-container>
@@ -21,7 +25,6 @@
   </div>
 
   <div class="box" *ngIf="!error">
-
     <div class="row">
       <div class="col-md">
         <table class="table table-borderless table-striped table-fixed">
@@ -57,7 +60,10 @@
             </tr>
             <tr *ngIf="(avgChannelDistance$ | async) as avgDistance;">
               <td i18n="lightning.avg-distance" class="text-truncate">Avg channel distance</td>
-              <td class="direction-ltr">{{ avgDistance | number : '1.0-0' }} <span class="symbol">km</span> <span class="separator">/</span> {{ kmToMiles(avgDistance) | number : '1.0-0' }} <span class="symbol">mi</span></td>
+              <td class="direction-ltr">{{ avgDistance | amountShortener: 1 }} <span class="symbol">km</span> <span class="separator">·</span>{{ kmToMiles(avgDistance) | amountShortener: 1 }} <span class="symbol">mi</span></td>
+            </tr>
+            <tr *ngIf="!node.geolocation" class="d-none d-md-table-row">
+              <ng-container *ngTemplateOutlet="featurebits;context:{bits: node.featuresBits}"></ng-container>
             </tr>
           </tbody>
         </table>
@@ -100,11 +106,50 @@
                 </td>
               </ng-template>
             </tr>
+            <tr *ngIf="node.geolocation && node.featuresBits">
+              <ng-container *ngTemplateOutlet="featurebits;context:{bits: node.featuresBits}"></ng-container>
+            </tr>
+            <tr *ngIf="!node.geolocation && node.featuresBits" class="d-table-row d-md-none">
+              <ng-container *ngTemplateOutlet="featurebits;context:{bits: node.featuresBits}"></ng-container>
+            </tr>
           </tbody>
         </table>
       </div>
     </div>
+  </div>
 
+  <ng-template #featurebits let-bits="bits">
+    <td i18n="lightning.features" class="text-truncate label">Features</td>
+    <td class="d-flex justify-content-between">
+      <span class="text-truncate w-90">{{ bits }}</span>
+      <button type="button" class="btn btn-outline-info btn-xs" (click)="toggleFeatures()" i18n="transaction.details|Transaction Details">Details</button>
+    </td>
+  </ng-template>
+
+  <div class="box mt-2" *ngIf="!error && showFeatures">
+    <div class="row">
+      <div class="col-md">
+        <div class="mb-3">
+          <h5>Raw bits</h5>
+          <span class="text-wrap w-100"><small>{{ node.featuresBits }}</small></span>
+        </div>
+        <h5>Decoded</h5>
+        <table class="table table-borderless table-striped table-fixed">
+          <thead>
+            <th style="width: 13%">Bit</th>
+            <th>Name</th>
+            <th style="width: 25%; text-align: right">Required</th>
+          </thead>
+          <tbody>
+            <tr *ngFor="let feature of node.features">
+              <td style="width: 13%">{{ feature.bit }}</td>
+              <td>{{ feature.name }}</td>
+              <td style="width: 25%; text-align: right">{{ feature.is_required }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
   </div>
 
   <div class="input-group mt-3" *ngIf="!error && node.socketsObject.length">
@@ -352,5 +397,3 @@
 
   </div>
 </ng-template>
-
-<br>

frontend/src/app/lightning/node/node.component.scss

@@ -108,5 +108,20 @@ app-fiat {
 }
 
 .separator {
-  margin: 0 1em;
+  margin: 0 0.25em;
+  color: slategrey;
 }
+
+.claim-btn {
+  max-height: 32px;
+  @media (min-width: 850px) {
+    display: none;
+  }
+}
+
+.claim-btn-mobile {
+  max-height: 32px;
+  @media (max-width: 850px) {
+    display: none;
+  }
+}

frontend/src/app/lightning/node/node.component.ts

@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { Observable } from 'rxjs';
-import { catchError, map, switchMap, tap } from 'rxjs/operators';
+import { Observable, of, EMPTY } from 'rxjs';
+import { catchError, map, switchMap, tap, share } from 'rxjs/operators';
 import { SeoService } from '../../services/seo.service';
 import { ApiService } from '../../services/api.service';
 import { LightningApiService } from '../lightning-api.service';
@@ -37,7 +37,8 @@ export class NodeComponent implements OnInit {
   liquidityAd: ILiquidityAd;
   tlvRecords: CustomRecord[];
   avgChannelDistance$: Observable<number | null>;
-
+  showFeatures = false;
+  nodeOwner$: Observable<any>;
   kmToMiles = kmToMiles;
 
   constructor(
@@ -45,6 +46,7 @@ export class NodeComponent implements OnInit {
     private lightningApiService: LightningApiService,
     private activatedRoute: ActivatedRoute,
     private seoService: SeoService,
+    private cd: ChangeDetectorRef,
   ) { }
 
   ngOnInit(): void {
@@ -148,6 +150,24 @@ export class NodeComponent implements OnInit {
         return null;
       })
     ) as Observable<number | null>;
+
+    this.nodeOwner$ = this.activatedRoute.paramMap
+      .pipe(
+        switchMap((params: ParamMap) => {
+          return this.apiService.getNodeOwner$(params.get('public_key')).pipe(
+            switchMap((response) =>  {
+              if (response.status === 204) {
+                return of(false);
+              }
+              return of(response.body);
+            }),
+            catchError(() => {
+              return of(false);
+            })
+          )
+        }),
+        share(),
+      );
   }
 
   toggleShowDetails(): void {
@@ -165,4 +185,9 @@ export class NodeComponent implements OnInit {
   onLoadingEvent(e) {
     this.channelListLoading = e;
   }
+
+  toggleFeatures() {
+    this.showFeatures = !this.showFeatures;
+    return false;
+  }
 }