Create shared toggle component to re-use

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

@@ -140,14 +140,7 @@
 
   <div class="d-flex justify-content-between" *ngIf="!error">
     <h2>Channels ({{ channelsListStatus === 'open' ? node.channel_active_count : node.channel_closed_count }})</h2>
-    <div class="d-flex align-items-center justify-content-end">
+    <app-toggle [textLeft]="'List'" [textRight]="'Map'" (toggleStatusChanged)="channelsListModeChange($event)"></app-toggle>
-      <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' && !error" [style]="'nodepage'" [publicKey]="node.public_key">

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

@@ -56,67 +56,4 @@ app-fiat {
     display: inline-block;
     margin-left: 10px;
   }
-}
+}
-
- /* 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

@@ -75,8 +75,8 @@ export class NodeComponent implements OnInit {
     this.selectedSocketIndex = index;
   }
 
-  channelsListModeChange(e) {
+  channelsListModeChange(toggle) {
-    if (e.target.checked === true) {
+    if (toggle === true) {
       this.channelsListMode = 'map';
     } else {
       this.channelsListMode = 'list';

frontend/src/app/shared/components/toggle/toggle.component.html

@@ -0,0 +1,8 @@
+<div class="d-flex align-items-center justify-content-end">
+  <span style="margin-bottom: 0.5rem">{{ textLeft }}</span>&nbsp;
+  <label class="switch">
+    <input type="checkbox" (change)="onToggleStatusChanged($event)">
+    <span class="slider round"></span>
+  </label>
+  &nbsp;<span style="margin-bottom: 0.5rem">{{ textRight }}</span>
+</div>

frontend/src/app/shared/components/toggle/toggle.component.scss

@@ -0,0 +1,62 @@
+/* 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/shared/components/toggle/toggle.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, Output, ChangeDetectionStrategy, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-toggle',
+  templateUrl: './toggle.component.html',
+  styleUrls: ['./toggle.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ToggleComponent {
+  @Output() toggleStatusChanged = new EventEmitter<boolean>();
+  @Input() textLeft: string;
+  @Input() textRight: string;
+
+  onToggleStatusChanged(e): void {
+    this.toggleStatusChanged.emit(e.target.checked);
+  }
+}

frontend/src/app/shared/shared.module.ts

@@ -80,6 +80,7 @@ import { ChangeComponent } from '../components/change/change.component';
 import { SatsComponent } from './components/sats/sats.component';
 import { SearchResultsComponent } from '../components/search-form/search-results/search-results.component';
 import { TimestampComponent } from './components/timestamp/timestamp.component';
+import { ToggleComponent } from './components/toggle/toggle.component';
 
 @NgModule({
   declarations: [
@@ -154,6 +155,7 @@ import { TimestampComponent } from './components/timestamp/timestamp.component';
     SatsComponent,
     SearchResultsComponent,
     TimestampComponent,
+    ToggleComponent,
   ],
   imports: [
     CommonModule,
@@ -255,6 +257,7 @@ import { TimestampComponent } from './components/timestamp/timestamp.component';
     SatsComponent,
     SearchResultsComponent,
     TimestampComponent,
+    ToggleComponent,
   ]
 })
 export class SharedModule {