Create geolocation component to format geolocation data

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

@@ -4,7 +4,7 @@ import { Observable } from 'rxjs';
 import { catchError, map, switchMap } from 'rxjs/operators';
 import { SeoService } from 'src/app/services/seo.service';
 import { OpenGraphService } from 'src/app/services/opengraph.service';
-import { getFlagEmoji } from 'src/app/shared/graphs.utils';
+import { getFlagEmoji } from 'src/app/shared/common.utils';
 import { LightningApiService } from '../lightning-api.service';
 import { isMobile } from '../../shared/common.utils';
 

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

@@ -42,24 +42,10 @@
                 <app-fiat [value]="node.avgCapacity" digitsInfo="1.0-0"></app-fiat>
               </td>
             </tr>
-            <tr *ngIf="node.country && node.city && node.subdivision">
+            <tr *ngIf="node.geolocation">
               <td i18n="location">Location</td>
               <td>
-                <span>{{ node.city.en }}, {{ node.subdivision.en }}</span>
-                <br>
-                <a class="d-flex align-items-center" [routerLink]="['/lightning/nodes/country' | relativeUrl, node.iso_code]">
-                  <span class="link">{{ node.country.en }}</span>
-                  &nbsp;
-                  <span class="flag">{{ node.flag }}</span>
-                </a>
-              </td>
-            </tr>
-            <tr *ngIf="node.country && !node.city">
-              <td i18n="location">Location</td>
-              <td>
-                <a [routerLink]="['/lightning/nodes/country' | relativeUrl, node.iso_code]">
-                  {{ node.country.en }} {{ node.flag }}
-                </a>
+                <app-geolocation [data]="node.geolocation" [type]="'node'"></app-geolocation>
               </td>
             </tr>
           </tbody>

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

@@ -3,9 +3,9 @@ import { ActivatedRoute, ParamMap } from '@angular/router';
 import { Observable } from 'rxjs';
 import { catchError, map, switchMap } from 'rxjs/operators';
 import { SeoService } from 'src/app/services/seo.service';
-import { getFlagEmoji } from 'src/app/shared/graphs.utils';
 import { LightningApiService } from '../lightning-api.service';
 import { isMobile } from '../../shared/common.utils';
+import { GeolocationData } from 'src/app/shared/components/geolocation/geolocation.component';
 
 @Component({
   selector: 'app-node',
@@ -58,7 +58,6 @@ export class NodeComponent implements OnInit {
             } else if (socket.indexOf('onion') > -1) {
               label = 'Tor';
             }
-            node.flag = getFlagEmoji(node.iso_code);
             socketsObject.push({
               label: label,
               socket: node.public_key + '@' + socket,
@@ -66,6 +65,19 @@ export class NodeComponent implements OnInit {
           }
           node.socketsObject = socketsObject;
           node.avgCapacity = node.capacity / Math.max(1, node.active_channel_count);
+
+          if (!node?.country && !node?.city &&
+            !node?.subdivision && !node?.iso) {
+              node.geolocation = null;
+          } else {
+            node.geolocation = <GeolocationData>{
+              country: node.country?.en,
+              city: node.city?.en,
+              subdivision: node.subdivision?.en,
+              iso: node.iso_code,
+            };
+          }
+
           return node;
         }),
         catchError(err => {

frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts

@@ -9,7 +9,7 @@ import { StateService } from 'src/app/services/state.service';
 import { download } from 'src/app/shared/graphs.utils';
 import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
 import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
-import { getFlagEmoji } from 'src/app/shared/graphs.utils';
+import { getFlagEmoji } from 'src/app/shared/common.utils';
 
 @Component({
   selector: 'app-nodes-per-country-chart',

frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html

@@ -36,7 +36,7 @@
             {{ node.channels }}
           </td>
           <td class="city text-right text-truncate">
-            {{ node?.city?.en ?? '-' }}
+            <app-geolocation [data]="node.geolocation" [type]="'list-country'"></app-geolocation>
           </td>
       </tbody>
     </table>

frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts

@@ -3,7 +3,8 @@ import { ActivatedRoute } from '@angular/router';
 import { map, Observable } from 'rxjs';
 import { ApiService } from 'src/app/services/api.service';
 import { SeoService } from 'src/app/services/seo.service';
-import { getFlagEmoji } from 'src/app/shared/graphs.utils';
+import { getFlagEmoji } from 'src/app/shared/common.utils';
+import { GeolocationData } from 'src/app/shared/components/geolocation/geolocation.component';
 
 @Component({
   selector: 'app-nodes-per-country',
@@ -29,6 +30,16 @@ export class NodesPerCountry implements OnInit {
             name: response.country.en,
             flag: getFlagEmoji(this.route.snapshot.params.country)
           };
+
+          for (const i in response.nodes) {
+            response.nodes[i].geolocation = <GeolocationData>{
+              country: response.nodes[i].country?.en,
+              city: response.nodes[i].city?.en,
+              subdivision: response.nodes[i].subdivision?.en,
+              iso: response.nodes[i].iso_code,
+            };
+          }
+
           this.seoService.setTitle($localize`Lightning nodes in ${this.country.name}`);
           return response.nodes;
         })

frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html

@@ -33,7 +33,7 @@
             {{ node.channels }}
           </td>
           <td class="city text-right text-truncate">
-            {{ node?.city?.en ?? '-' }}
+            <app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>
           </td>
       </tbody>
     </table>

frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.ts

@@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { map, Observable } from 'rxjs';
 import { ApiService } from 'src/app/services/api.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { GeolocationData } from 'src/app/shared/components/geolocation/geolocation.component';
 
 @Component({
   selector: 'app-nodes-per-isp',
@@ -29,6 +30,16 @@ export class NodesPerISP implements OnInit {
             id: this.route.snapshot.params.isp
           };
           this.seoService.setTitle($localize`Lightning nodes on ISP: ${response.isp} [AS${this.route.snapshot.params.isp}]`);
+
+          for (const i in response.nodes) {
+            response.nodes[i].geolocation = <GeolocationData>{
+              country: response.nodes[i].country?.en,
+              city: response.nodes[i].city?.en,
+              subdivision: response.nodes[i].subdivision?.en,
+              iso: response.nodes[i].iso_code,
+            };
+          }
+
           return response.nodes;
         })
       );