Socket selector and copy

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

@@ -45,6 +45,24 @@
       </div>
 
     </div>
+
+    <br>
+
+    <div class="input-group mb-3">
+      <div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown" *ngIf="node.socketsObject > 1; else noDropdown">
+        <button class="btn btn-secondary dropdown-toggle" type="button" aria-expanded="false" ngbDropdownAnchor (focus)="myDrop.open()">{{ node.socketsObject[selectedSocketIndex].label }}</button>
+        <div ngbDropdownMenu aria-labelledby="dropdownManual">
+          <button *ngFor="let socket of node.socketsObject; let i = index;" ngbDropdownItem (click)="changeSocket(i)">{{ socket.label }}</button>
+        </div>
+      </div>
+      <ng-template #noDropdown>
+        <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">
+        <app-clipboard [text]="node.socketsObject[selectedSocketIndex].socket"></app-clipboard>
+      </button>
+    </div>
     
     <br>
     <h2>Channels</h2>

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { Observable } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
+import { map, switchMap } from 'rxjs/operators';
 import { LightningApiService } from '../lightning-api.service';
 
 @Component({
@@ -14,6 +14,7 @@ export class NodeComponent implements OnInit {
   node$: Observable<any>;
   statistics$: Observable<any>;
   publicKey$: Observable<string>;
+  selectedSocketIndex = 0;
 
   constructor(
     private lightningApiService: LightningApiService,
@@ -25,7 +26,27 @@ export class NodeComponent implements OnInit {
       .pipe(
         switchMap((params: ParamMap) => {
           return this.lightningApiService.getNode$(params.get('public_key'));
-        })
+        }),
+        map((node) => {
+          const socketsObject = [];
+          for (const socket of node.sockets.split(',')) {
+            let label = '';
+            if (socket.match(/(?:[0-9]{1,3}\.){3}[0-9]{1,3}/)) {
+              label = 'IPv4';
+            } else if (socket.indexOf('[') > -1) {
+              label = 'IPv6';
+            } else if (socket.indexOf('onion') > -1) {
+              label = 'Tor';
+            }
+            socketsObject.push({
+              label: label,
+              socket: node.public_key + '@' + socket,
+            });
+          }
+          console.log(socketsObject);
+          node.socketsObject = socketsObject;
+          return node;
+        }),
       );
 
     this.statistics$ = this.activatedRoute.paramMap
@@ -36,4 +57,8 @@ export class NodeComponent implements OnInit {
       );
   }
 
+  changeSocket(index: number) {
+    this.selectedSocketIndex = index;
+  }
+
 }

lightning-backend/src/tasks/node-sync.service.ts

@@ -240,7 +240,7 @@ class NodeSyncService {
   private async $saveNode(node: ILightningApi.Node): Promise<void> {
     try {
       const updatedAt = this.utcDateToMysql(node.updated_at);
-      const sockets = node.sockets.join(', ');
+      const sockets = node.sockets.join(',');
       const query = `INSERT INTO nodes(
           public_key,
           first_seen,