Create geolocation component to format geolocation data

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;
+    }
+  }
+}