Create geolocation component to format geolocation data

frontend/src/app/shared/common.utils.ts

@@ -1,3 +1,120 @@
-export function isMobile() {
+export function isMobile(): boolean {
   return (window.innerWidth <= 767.98);
 }
+
+export function getFlagEmoji(countryCode): string {
+  if (!countryCode) {
+    return '';
+  }
+  const codePoints = countryCode
+    .toUpperCase()
+    .split('')
+    .map(char => 127397 + char.charCodeAt());
+  return String.fromCodePoint(...codePoints);
+}
+
+// https://gist.github.com/calebgrove/c285a9510948b633aa47
+export function convertRegion(input, to: 'name' | 'abbreviated'): string {
+  if (!input) {
+    return '';
+  }
+
+  const states = [
+    ['Alabama', 'AL'],
+    ['Alaska', 'AK'],
+    ['American Samoa', 'AS'],
+    ['Arizona', 'AZ'],
+    ['Arkansas', 'AR'],
+    ['Armed Forces Americas', 'AA'],
+    ['Armed Forces Europe', 'AE'],
+    ['Armed Forces Pacific', 'AP'],
+    ['California', 'CA'],
+    ['Colorado', 'CO'],
+    ['Connecticut', 'CT'],
+    ['Delaware', 'DE'],
+    ['District Of Columbia', 'DC'],
+    ['Florida', 'FL'],
+    ['Georgia', 'GA'],
+    ['Guam', 'GU'],
+    ['Hawaii', 'HI'],
+    ['Idaho', 'ID'],
+    ['Illinois', 'IL'],
+    ['Indiana', 'IN'],
+    ['Iowa', 'IA'],
+    ['Kansas', 'KS'],
+    ['Kentucky', 'KY'],
+    ['Louisiana', 'LA'],
+    ['Maine', 'ME'],
+    ['Marshall Islands', 'MH'],
+    ['Maryland', 'MD'],
+    ['Massachusetts', 'MA'],
+    ['Michigan', 'MI'],
+    ['Minnesota', 'MN'],
+    ['Mississippi', 'MS'],
+    ['Missouri', 'MO'],
+    ['Montana', 'MT'],
+    ['Nebraska', 'NE'],
+    ['Nevada', 'NV'],
+    ['New Hampshire', 'NH'],
+    ['New Jersey', 'NJ'],
+    ['New Mexico', 'NM'],
+    ['New York', 'NY'],
+    ['North Carolina', 'NC'],
+    ['North Dakota', 'ND'],
+    ['Northern Mariana Islands', 'NP'],
+    ['Ohio', 'OH'],
+    ['Oklahoma', 'OK'],
+    ['Oregon', 'OR'],
+    ['Pennsylvania', 'PA'],
+    ['Puerto Rico', 'PR'],
+    ['Rhode Island', 'RI'],
+    ['South Carolina', 'SC'],
+    ['South Dakota', 'SD'],
+    ['Tennessee', 'TN'],
+    ['Texas', 'TX'],
+    ['US Virgin Islands', 'VI'],
+    ['Utah', 'UT'],
+    ['Vermont', 'VT'],
+    ['Virginia', 'VA'],
+    ['Washington', 'WA'],
+    ['West Virginia', 'WV'],
+    ['Wisconsin', 'WI'],
+    ['Wyoming', 'WY'],
+  ];
+
+  // So happy that Canada and the US have distinct abbreviations
+  const provinces = [
+    ['Alberta', 'AB'],
+    ['British Columbia', 'BC'],
+    ['Manitoba', 'MB'],
+    ['New Brunswick', 'NB'],
+    ['Newfoundland', 'NF'],
+    ['Northwest Territory', 'NT'],
+    ['Nova Scotia', 'NS'],
+    ['Nunavut', 'NU'],
+    ['Ontario', 'ON'],
+    ['Prince Edward Island', 'PE'],
+    ['Quebec', 'QC'],
+    ['Saskatchewan', 'SK'],
+    ['Yukon', 'YT'],
+  ];
+
+  const regions = states.concat(provinces);
+
+  let i; // Reusable loop variable
+  if (to == 'abbreviated') {
+    input = input.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });
+    for (i = 0; i < regions.length; i++) {
+      if (regions[i][0] == input) {
+        return (regions[i][1]);
+      }
+    }
+  } else if (to == 'name') {
+    input = input.toUpperCase();
+    for (i = 0; i < regions.length; i++) {
+      if (regions[i][1] == input) {
+        return (regions[i][0]);
+      }
+    }
+  }
+}

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

@@ -0,0 +1 @@
+<span [innerHTML]="formattedLocation"></span>

frontend/src/app/shared/components/geolocation/geolocation.component.ts

@@ -0,0 +1,83 @@
+import { Component, Input, OnChanges } from '@angular/core';
+import { convertRegion, getFlagEmoji } from '../../common.utils';
+
+export interface GeolocationData {
+  country: string;
+  city: string;
+  subdivision: string;
+  iso: string;
+}
+
+@Component({
+  selector: 'app-geolocation',
+  templateUrl: './geolocation.component.html',
+  styleUrls: ['./geolocation.component.scss']
+})
+export class GeolocationComponent implements OnChanges {
+  @Input() data: GeolocationData;
+  @Input() type: 'node' | 'list-isp' | 'list-country';
+
+  formattedLocation: string = '';
+
+  ngOnChanges(): void {
+    const city = this.data.city ? this.data.city : '';
+    const subdivisionLikeCity = this.data.city === this.data.subdivision;
+    let subdivision = this.data.subdivision;
+
+    if (['US', 'CA'].includes(this.data.iso) === false || (this.type === 'node' && subdivisionLikeCity)) {
+      this.data.subdivision = undefined;
+    } else if (['list-isp', 'list-country'].includes(this.type) === true) {
+      subdivision = convertRegion(this.data.subdivision, 'abbreviated');
+    }
+
+    if (this.type === 'list-country') {
+      if (this.data.city) {
+        this.formattedLocation += ' ' + city;
+        if (this.data.subdivision) {
+          this.formattedLocation += ', ' + subdivision;
+        }
+      } else {
+        this.formattedLocation += '-';
+      }
+    }
+
+    if (this.type === 'list-isp') {
+      this.formattedLocation = getFlagEmoji(this.data.iso);
+      if (this.data.city) {
+        this.formattedLocation += ' ' + city;
+        if (this.data.subdivision) {
+          this.formattedLocation += ', ' + subdivision;
+        }
+      } else {
+        this.formattedLocation += ' ' + this.data.country;
+      }
+    }
+    
+    if (this.type === 'node') {
+      const city = this.data.city ? this.data.city : '';
+
+      // City
+      this.formattedLocation = `${city}`;
+
+      // ,Subdivision
+      if (this.formattedLocation.length > 0 && !subdivisionLikeCity) {
+        this.formattedLocation += ', ';
+      }
+      if (!subdivisionLikeCity) {
+        this.formattedLocation += `${subdivision}`;
+      }
+
+      // <br>[flag] County
+      if (this.data?.country.length ?? 0 > 0) {
+        if ((this.formattedLocation?.length ?? 0 > 0) && !subdivisionLikeCity) {
+          this.formattedLocation += '<br>';
+        } else if (this.data.city) {
+          this.formattedLocation += ', ';
+        }
+        this.formattedLocation += `${this.data.country} ${getFlagEmoji(this.data.iso)}`;
+      }
+
+      return;
+    }
+  }
+}

frontend/src/app/shared/graphs.utils.ts

@@ -91,13 +91,3 @@ export function detectWebGL() {
   return (gl && gl instanceof WebGLRenderingContext);
 }
 
-export function getFlagEmoji(countryCode) {
-  if (!countryCode) {
-    return '';
-  }
-  const codePoints = countryCode
-    .toUpperCase()
-    .split('')
-    .map(char =>  127397 + char.charCodeAt());
-  return String.fromCodePoint(...codePoints);
-}

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

@@ -82,6 +82,7 @@ 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';
+import { GeolocationComponent } from '../shared/components/geolocation/geolocation.component';
 
 @NgModule({
   declarations: [
@@ -158,6 +159,7 @@ import { ToggleComponent } from './components/toggle/toggle.component';
     SearchResultsComponent,
     TimestampComponent,
     ToggleComponent,
+    GeolocationComponent,
   ],
   imports: [
     CommonModule,
@@ -261,6 +263,7 @@ import { ToggleComponent } from './components/toggle/toggle.component';
     SearchResultsComponent,
     TimestampComponent,
     ToggleComponent,
+    GeolocationComponent,
   ]
 })
 export class SharedModule {