Add channels map to the node page

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

@@ -107,7 +107,20 @@
     
     <br>
 
-    <app-channels-list [publicKey]="node.public_key"></app-channels-list>
+    <div class="d-flex justify-content-between">
+      <h2>Channels ({{ node.channel_count }})</h2>
+      <div class="d-flex align-items-center justify-content-end">
+        <span style="margin-bottom: 0.5rem">List</span>&nbsp;
+        <label class="switch">
+          <input type="checkbox" (change)="channelsListModeChange($event)">
+          <span class="slider round"></span>
+        </label>
+        &nbsp;<span style="margin-bottom: 0.5rem">Map</span>
+      </div>
+    </div>
+
+    <app-nodes-channels-map *ngIf="channelsListMode === 'map'" [style]="'nodepage'" [publicKey]="node.public_key"></app-nodes-channels-map>
+    <app-channels-list *ngIf="channelsListMode === 'list'" [publicKey]="node.public_key"></app-channels-list>
 
 </div>
 

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

@@ -58,3 +58,65 @@ app-fiat {
   }
 }
 
+ /* The switch - the box around the slider */
+ .switch {
+  position: relative;
+  display: inline-block;
+  width: 30px;
+  height: 17px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 13px;
+  width: 13px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(13px);
+  -ms-transform: translateX(13px);
+  transform: translateX(13px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 17px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+} 

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

@@ -17,6 +17,7 @@ export class NodeComponent implements OnInit {
   publicKey$: Observable<string>;
   selectedSocketIndex = 0;
   qrCodeVisible = false;
+  channelsListMode = 'list';
 
   constructor(
     private lightningApiService: LightningApiService,
@@ -61,4 +62,11 @@ export class NodeComponent implements OnInit {
     this.selectedSocketIndex = index;
   }
 
+  channelsListModeChange(e) {
+    if (e.target.checked === true) {
+      this.channelsListMode = 'map';
+    } else {
+      this.channelsListMode = 'list';
+    }
+  }
 }