Node qr code

frontend/src/app/components/clipboard/clipboard.component.scss

@@ -1,3 +1,8 @@
 .btn-link {
   padding: 0.25rem 0 0.1rem 0.5rem;
 }
+
+img {
+  position: relative;
+  left: -3px;
+}

frontend/src/app/components/qrcode/qrcode.component.ts

@@ -1,11 +1,12 @@
-import { Component, Input, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
+import { Component, Input, AfterViewInit, ViewChild, ElementRef, ChangeDetectionStrategy } from '@angular/core';
 import * as QRCode from 'qrcode';
 import { StateService } from 'src/app/services/state.service';
 
 @Component({
   selector: 'app-qrcode',
   templateUrl: './qrcode.component.html',
-  styleUrls: ['./qrcode.component.scss']
+  styleUrls: ['./qrcode.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class QrcodeComponent implements AfterViewInit {
   @Input() data: string;
@@ -19,7 +20,18 @@ export class QrcodeComponent implements AfterViewInit {
     private stateService: StateService,
   ) { }
 
+  ngOnChanges() {
+    if (!this.canvas.nativeElement) {
+      return;
+    }
+    this.render();
+  }
+
   ngAfterViewInit() {
+    this.render();
+  }
+
+  render() {
     if (!this.stateService.isBrowser) {
       return;
     }

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

@@ -38,9 +38,7 @@
         </div>
         <div class="w-100 d-block d-md-none"></div>
         <div class="col-md qrcode-col">
-          <div class="qr-wrapper">
+          
-            <app-qrcode [data]="node.public_key"></app-qrcode>
-          </div>
         </div>
       </div>
 
@@ -48,9 +46,9 @@
 
     <br>
 
-    <div class="input-group mb-3">
+    <div class="input-group mb-3" *ngIf="node.socketsObject.length">
-      <div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown" *ngIf="node.socketsObject > 1; else noDropdown">
+      <div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown" *ngIf="node.socketsObject.length > 1; else noDropdown">
-        <button class="btn btn-secondary dropdown-toggle" type="button" aria-expanded="false" ngbDropdownAnchor (focus)="myDrop.open()">{{ node.socketsObject[selectedSocketIndex].label }}</button>
+        <button class="btn btn-secondary dropdown-toggle" type="button" aria-expanded="false" ngbDropdownAnchor (focus)="myDrop.open()"><div class="dropdownLabel">{{ node.socketsObject[selectedSocketIndex].label }}</div></button>
         <div ngbDropdownMenu aria-labelledby="dropdownManual">
           <button *ngFor="let socket of node.socketsObject; let i = index;" ngbDropdownItem (click)="changeSocket(i)">{{ socket.label }}</button>
         </div>
@@ -59,7 +57,13 @@
         <span class="input-group-text" id="basic-addon3">{{ node.socketsObject[selectedSocketIndex].label }}</span>
       </ng-template>
       <input type="text" class="form-control" aria-label="Text input with dropdown button" [value]="node.socketsObject[selectedSocketIndex].socket">
-      <button class="btn btn-secondary" type="button" id="inputGroupFileAddon04">
+      <button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04" (mouseover)="qrCodeVisible = true" (mouseout)="qrCodeVisible = false">
+        <fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true"></fa-icon>
+        <div class="qr-wrapper" [hidden]="!qrCodeVisible">
+          <app-qrcode [size]="200" [data]="node.socketsObject[selectedSocketIndex].socket"></app-qrcode>
+        </div>
+      </button>
+      <button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04">
         <app-clipboard [text]="node.socketsObject[selectedSocketIndex].socket"></app-clipboard>
       </button>
     </div>

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

@@ -3,6 +3,21 @@
   padding: 10px;
   padding-bottom: 5px;
   display: inline-block;
+
+  
+  position: absolute;
+  bottom: 50px;
+  left: -175px;
+  z-index: 100;
+}
+
+.dropdownLabel {
+  min-width: 50px;
+  display: inline-block;
+}
+
+#inputGroupFileAddon04 {
+  position: relative;
 }
 
 .qrcode-col {

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

@@ -15,6 +15,7 @@ export class NodeComponent implements OnInit {
   statistics$: Observable<any>;
   publicKey$: Observable<string>;
   selectedSocketIndex = 0;
+  qrCodeVisible = false;
 
   constructor(
     private lightningApiService: LightningApiService,
@@ -30,6 +31,9 @@ export class NodeComponent implements OnInit {
         map((node) => {
           const socketsObject = [];
           for (const socket of node.sockets.split(',')) {
+            if (socket === '') {
+              continue;
+            }
             let label = '';
             if (socket.match(/(?:[0-9]{1,3}\.){3}[0-9]{1,3}/)) {
               label = 'IPv4';