https://www.starwoodhotels.com/themes/custom/starwood/assets/js/global_stats.js?tlrzgr

1/**
2 * Function that 
3 * - populates the <select> elements of the CSV Global Stats Component with the Brands and Locations in an uploaded CSV.
4 * - Shows the correct stats in the DOM based on the selected Location and Brand
5 */
6
7(function (Drupal, once) {
8    'use strict';
9    Drupal.behaviors.csvGlobalStats = {
10        attach: function(context, settings) {
11            once('csvglobalStats', '.csv-global-stats', context).forEach( globalStats => {
12                let brandsList = globalStats.querySelectorAll('table .col_0');
13                let brandsElemArray = Array.from(brandsList);
14                brandsElemArray.shift();
15                let brandsTextArray = this.extractTextFromElems(brandsElemArray);
16                let uniqueBrandsArray = [...new Set(brandsTextArray)];
17                this.buildOptionElems(uniqueBrandsArray, '#brand-select');
18
19                let locationsList = globalStats.querySelectorAll('table .col_1');
20                let locationsElemArray = Array.from(locationsList);
21                locationsElemArray.shift();
22                let locationsTextArray = this.extractTextFromElems(locationsElemArray);
23                let uniqueLocationsArray = [...new Set(locationsTextArray)];
24                this.buildOptionElems(uniqueLocationsArray, '#location-select');
25
26                let locationSelect = document.querySelector('#location-select');
27                locationSelect.addEventListener('change', function() {
28                    filterAndPopulateData();
29                })
30
31                let brandSelect = document.querySelector('#brand-select');
32                brandSelect.addEventListener('change', function() {
33                    filterAndPopulateData();
34                })
35
36                initLoadAllStats();
37
38
39                // HELPER FUNCTIONS that must access variables in this scope
40
41                function initLoadAllStats() {
42                    brandSelect.value = "All Brands";
43                    locationSelect.value = "All Regions";
44                    filterAndPopulateData();
45                }
46
47                function filterAndPopulateData() {
48                    let selectedIndexLocation = locationSelect.selectedIndex;
49                    let selectedLocation = locationSelect.options[selectedIndexLocation].value;
50
51                    let selectedIndexBrand = brandSelect.selectedIndex;
52                    let selectedBrand = brandSelect.options[selectedIndexBrand].value;
53                    let filteredRow = getCorrespondingRowOfData(selectedBrand, selectedLocation);
54                    
55                    let statContainerArray = Array.from ( document.querySelectorAll('.stat-container') );
56                    if ( !filteredRow ) {
57                        populateElemsWithZero(statContainerArray);
58                    }
59                    if ( filteredRow ) {
60                        populateDataElems(filteredRow, statContainerArray);
61                    }
62                }
63
64                function getCorrespondingRowOfData(inSelectedBrand, inSelectedLocation) {
65                    let allRowElems = Array.from( globalStats.querySelectorAll('tbody tr') );
66                    let filteredRow = null;
67                    for(let i = 0; i <= allRowElems.length; i++) {
68                        let rowBrand = allRowElems[i] ? allRowElems[i].querySelector('.col_0').textContent : null;
69                        let rowLocation = allRowElems[i] ? allRowElems[i].querySelector('.col_1').textContent : null;
70                        
71                        if ( rowBrand === inSelectedBrand && rowLocation === inSelectedLocation ) {
72                            filteredRow = allRowElems[i];
73                            break;
74                        }
75                        
76                    }
77                    return filteredRow;
78                }
79
80                function populateDataElems (inSelectedRow, elemArrayToPopulate) {
81                    let columns = Array.from( inSelectedRow.querySelectorAll('td') );
82                    columns.shift();
83                    columns.shift();
84                    columns.forEach ( (cell, index) => {
85                        let cellContent = cell.textContent;
86                        elemArrayToPopulate[index].querySelector('.stat').textContent = cell

86Content;
87                    })
88                }
89
90                function populateElemsWithZero (elemArrayToPopulate) {
91                    elemArrayToPopulate.forEach( elem => {
92                        elem.querySelector('.stat').textContent = 0;
93                    }) 
94                }
95            });
96  
97        },
98
99        extractTextFromElems: function(inElemsArr) {
100            let textsArray = inElemsArr
101                .map(element => element.textContent.trim())
102                .filter( text => text.trim() !== "");
103            return textsArray;
104        },
105
106        buildOptionElems: function (inArray, inSelectElemSelector) {
107            inArray.forEach( elem => {
108                let optionElem = document.createElement('option');
109                let selectElem = document.querySelector(inSelectElemSelector);
110                optionElem.setAttribute('value', elem);
111                optionElem.textContent = elem;
112                selectElem.appendChild(optionElem);
113            })
114        },
115    }
116})(Drupal, once);;