change language to language tag to be usable for Intl.NumberFormat

ZoeBijl#64 and other purposes

extension/content_dashboard.js

@@ -1102,6 +1102,8 @@ function displayCompetitorMonitoring() {
 }
 
 function displayCompetitorMonitoringAirlinesTable(div) {
+
+    const languageTag = AES.getASLanguageTag();
     let compAirlines = [];
     let compAirlinesSchedule = [];
     chrome.storage.local.get(null, function(items) {
@@ -1326,9 +1328,15 @@ function displayCompetitorMonitoringAirlinesTable(div) {
 
                 //Populate collumns
                 let td = [];
+                const numberFormat = new Intl.NumberFormat(languageTag);
+
                 settings.competitorMonitoring.tableColumns.forEach(function(col) {
                     if (col.visible) {
-                        td.push($('<td class="aes-' + col.field + '"></td>').html(data[col.field]));
+                        if ((col.field !== 'airlineId') && (isFinite(data[col.field]))) {
+                            td.push($('<td class="aes-' + col.field + '"></td>').html(numberFormat.format(data[col.field])));
+                        } else {
+                            td.push($('<td class="aes-' + col.field + '"></td>').html(data[col.field]));
+                        }
                     }
                 });
                 rows.push($('<tr></tr>').append(td));

extension/helpers.js

@@ -8,24 +8,24 @@ class AES {
         const factsTable = document.querySelector(".facts table")
         const nameElement = factsTable.querySelector("tr:nth-child(1) td:last-child")
         const codeElement = factsTable.querySelector("tr:nth-child(2) td:last-child")
-        
+
         return {
             name: nameElement.innerText,
             code: codeElement.innerText
         }
     }
-    
+
     /**
      * Returns the server name
      * @returns {string} server name
      */
     static getServerName() {
         const hostname = window.location.hostname
         const servername = hostname.split(".")[0]
-        
+
         return servername
     }
-    
+
     /**
      * Formats a currency value local standards
      * @param {integer} currency value
@@ -39,33 +39,33 @@ class AES {
         let valueEl = document.createElement("span")
         let currencyEl = document.createElement("span")
         let containerClasses = "aes-no-text-wrap"
-        
+
         if (alignment === "right") {
             containerClasses = "aes-text-right aes-no-text-wrap"
         }
-        
+
         if (value >= 0) {
             valueEl.classList.add("good")
             indicatorEl.classList.add("good")
             indicatorEl.innerText = "+"
         }
-        
+
         if (value < 0) {
             valueEl.classList.add("bad")
             indicatorEl.classList.add("bad")
             indicatorEl.innerText = "-"
             formattedValue = formattedValue.replace("-", "")
         }
-        
+
         valueEl.innerText = formattedValue
         currencyEl.innerText = " AS$"
-        
+
         container.className = containerClasses
         container.append(indicatorEl, valueEl, currencyEl)
-        
+
         return container
     }
-    
+
     /**
      * Formats a date string to human readable format
      * @param {string} "20240524"
@@ -75,18 +75,18 @@ class AES {
         if (!date) {
             return
         }
-        
+
         const correctLength = date.length === 8
         const isInteger = Number.isInteger(parseInt(date))
         let result = "error: invalid format for AES.formatDateString"
-        
+
         if (correctLength && isInteger) {
             const year = date.substring(0, 4)
             const month = date.substring(4, 6)
             const day = date.substring(6, 8)
             result = `${year}-${month}-${day}`
         }
-        
+
         return result
     }
     /**
@@ -98,33 +98,44 @@ class AES {
         const correctLength = date.toString().length === 6
         const isInteger = Number.isInteger(parseInt(date))
         let result = "error: invalid format for AES.formatDateStringWeek"
-        
+
         if (correctLength && isInteger) {
             const DateAsString = date.toString()
             const week = DateAsString.substring(0, 2)
             const year = DateAsString.substring(2, 6)
-            
+
             result = `${week}/${year}`
         }
-        
+
         return result
     }
-    
+
     /**
-     * Retrieves the current language selected in footer.
+     * Retrieves the current language selected in AS footer as BCP 47 language tag.
+     * If the language cannot be determined, it defaults to a 'en'.
      *
-     * @returns {string} The current language.
+     * @returns {string} The language tag.
      */
-    static getASLanguage() {
-        var languages = ['Deutsch', 'English', 'español', 'français', 'Nederlands', 'polski', '中文'];
-
+    static getASLanguageTag() {
         const language = document.querySelector(".as-footer-line-element.dropup a").innerText.trim();
 
-        if (languages.includes(language)) {
-            return language;
+        const languages = [
+            { language: 'Deutsch', tag: 'de' },
+            { language: 'English', tag: 'en' },
+            { language: 'español', tag: 'es' },
+            { language: 'français', tag: 'fr' },
+            { language: 'Nederlands', tag: 'nl' },
+            { language: 'polski', tag: 'pl' },
+            { language: '中文', tag: 'zh' }
+        ];
+
+        let languageObject = languages.find(entry => entry.language === language);
+
+        if (languageObject) {
+            return languageObject.tag;
         } else {
-            console.error(`Invalid language "${language}". There might’ve been a UI update or additional languages. Check AES.getASLanguage()`);
-            return "English";
+            console.error(`Invalid language "${language}". There might’ve been a UI update or additional languages. Check AES.getASLanguageTag()`);
+            return "en";
         }
     }
 
@@ -135,33 +146,33 @@ class AES {
     static getServerDate() {
         const source = document.querySelector(".as-navbar-bottom span:has(.fa-clock-o)").innerText.trim()
         const sourceAsNumbers = source.toString().replace(/\D/g, "")
-        
+
         // The source always consists of 12 numbers
         const expectedLength = 12
         if (sourceAsNumbers.length != expectedLength) {
             throw new Error(`Unexpected length for source (${sourceAsNumbers.length}). There might’ve been a UI update. Check AES.getServerDate()`)
         }
-        
+
         // Splits the date component from the data,
         // then splits that into an array for the year, month, and day
         let dateArray = source.split(" ")[0].split(/\D+/)
         if (dateArray[0].length === 2) {
             dateArray.reverse()
         }
         let date = dateArray[0]+dateArray[1]+dateArray[2]
-        
+
         // Strip the date component from the data
         // leaving only the time
         let time = source.replace(/.{10}\s/, "")
-        
+
         const datetime = {
             date: date,
             time: time
         }
-        
+
         return datetime
     }
-    
+
     /**
      * Returns the difference between dates in days
      * @param {array} ["20240520", "20240524"]
@@ -171,10 +182,10 @@ class AES {
         let dateA = new Date(`${this.formatDateString(dates[0])}T12:00:00Z`)
         let dateB = new Date(`${this.formatDateString(dates[1])}T12:00:00Z`)
         let result = Math.round((dateA - dateB)/(1000 * 60 * 60 * 24))
-        
+
         return result
     }
-    
+
     /**
      * Cleans a string of punctuation to returns an integer
      * @param {string} value - "-2,000 AS$" | "2.000 AS$" | "256"
@@ -184,11 +195,11 @@ class AES {
         // TODO: create separate function for cleaning currency values
         // value = value.trim()
         // const isExpectedFormat = Boolean(value.match(/^-?(\d+[.,]?)+ AS\$$/))
-        // 
+        //
         // if (!isExpectedFormat) {
         //     throw new Error("cleanInteger(): unexpected format for value")
         // }
-        
+
         // Match any character that’s no a digit or a dash
         const result = value.replaceAll(/[^\d-]/g, "")
         return parseInt(result, 10)