From ccdeb108eef3e3154c6e3382b491e5f5c5fe8b09 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Mon, 18 Jul 2022 00:55:47 +0200
Subject: [PATCH] Show country flag emoji

---
 .../nodes-per-country-chart.component.html             |  6 +++++-
 .../nodes-per-country-chart.component.ts               |  2 ++
 .../nodes-per-country/nodes-per-country.component.html |  5 ++++-
 .../nodes-per-country/nodes-per-country.component.ts   | 10 +++++++---
 frontend/src/app/shared/graphs.utils.ts                |  8 ++++++++
 5 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
index f327a7147..abc0e306c 100644
--- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
+++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
@@ -35,7 +35,11 @@
         <tr *ngFor="let country of countries">
           <td class="text-left rank">{{ country.rank }}</td>
           <td class="text-left text-truncate name">
-            <a [routerLink]="['/lightning/nodes/country' | relativeUrl, country.iso]">{{ country.name.en }}</a>
+            <div class="d-flex">
+              <span style="font-size: 20px">{{ country.flag }}</span>
+              &nbsp;
+              <a class="mt-auto mb-auto" [routerLink]="['/lightning/nodes/country' | relativeUrl, country.iso]">{{ country.name.en }}</a>
+            </div>
           </td>
           <td class="text-right share">{{ country.share }}%</td>
           <td class="text-right nodes">{{ country.count }}</td>
diff --git a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
index cee350a34..c6a640015 100644
--- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
@@ -9,6 +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';
 
 @Component({
   selector: 'app-nodes-per-country-chart',
@@ -50,6 +51,7 @@ export class NodesPerCountryChartComponent implements OnInit {
           for (let i = 0; i < data.length; ++i) {
             data[i].rank = i + 1;
             data[i].iso = data[i].iso.toLowerCase();
+            data[i].flag = getFlagEmoji(data[i].iso);
           }
           return data.slice(0, 100);
         }),
diff --git a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
index 82280bdab..2896b4544 100644
--- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
+++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
@@ -1,5 +1,8 @@
 <div class="container-xl full-height" style="min-height: 335px">
-  <h1 class="float-left" i18n="lightning.nodes-in-country">Lightning nodes in {{ country }}</h1>
+  <h1 class="float-left" i18n="lightning.nodes-in-country">
+    <span>Lightning nodes in {{ country?.name }}</span>
+    <span style="font-size: 50px; vertical-align:sub;"> {{ country?.flag }}</span>
+  </h1>
 
   <div style="min-height: 295px">
     <table class="table table-borderless">
diff --git a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts
index e353d1361..a247baadf 100644
--- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts
+++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.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 { getFlagEmoji } from 'src/app/shared/graphs.utils';
 
 @Component({
   selector: 'app-nodes-per-country',
@@ -12,7 +13,7 @@ import { SeoService } from 'src/app/services/seo.service';
 })
 export class NodesPerCountry implements OnInit {
   nodes$: Observable<any>;
-  country: string;
+  country: {name: string, flag: string};
 
   constructor(
     private apiService: ApiService,
@@ -24,8 +25,11 @@ export class NodesPerCountry implements OnInit {
     this.nodes$ = this.apiService.getNodeForCountry$(this.route.snapshot.params.country)
       .pipe(
         map(response => {
-          this.country = response.country.en
-          this.seoService.setTitle($localize`Lightning nodes in ${this.country}`);
+          this.country = {
+            name: response.country.en,
+            flag: getFlagEmoji(this.route.snapshot.params.country)
+          };
+          this.seoService.setTitle($localize`Lightning nodes in ${this.country.name}`);
           return response.nodes;
         })
       );
diff --git a/frontend/src/app/shared/graphs.utils.ts b/frontend/src/app/shared/graphs.utils.ts
index 2e103ecda..6909e6fac 100644
--- a/frontend/src/app/shared/graphs.utils.ts
+++ b/frontend/src/app/shared/graphs.utils.ts
@@ -90,3 +90,11 @@ export function detectWebGL() {
   const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
   return (gl && gl instanceof WebGLRenderingContext);
 }
+
+export function getFlagEmoji(countryCode) {
+  const codePoints = countryCode
+    .toUpperCase()
+    .split('')
+    .map(char =>  127397 + char.charCodeAt());
+  return String.fromCodePoint(...codePoints);
+}