fix: update data centre filter correctly

assets/listings.js

@@ -120,19 +120,30 @@
     function setUpDataCentreFilter() {
         let select = document.getElementById('data-centre-filter');
 
-        let data_centres = [];
+        let dataCentres = {};
         for (let elem of document.querySelectorAll('#listings > .listing')) {
             let centre = elem.dataset['centre'];
-            if (!data_centres.includes(centre)) {
-                data_centres.push(centre);
-            }
+            if (!dataCentres.hasOwnProperty(centre)) {
+                dataCentres[centre] = 0;
             }
 
-        data_centres.sort();
-        for (let centre of data_centres) {
-            let opt = document.createElement('option');
-            opt.innerText = centre;
-            select.appendChild(opt);
+            dataCentres[centre] += 1;
+        }
+
+        for (let opt of select.options) {
+            let centre = opt.value;
+
+            let count = 0;
+
+            if (dataCentres.hasOwnProperty(centre)) {
+                count = dataCentres[centre];
+            }
+
+            if (centre === 'All') {
+                count = Object.values(dataCentres).reduce((a, b) => a + b);
+            }
+
+            opt.innerText += ` (${count})`;
         }
 
         select.addEventListener('change', () => {

templates/listings.html

@@ -15,7 +15,24 @@ Remote Party Finder
     <div class="requires-js">
         <input type="search" class="search" placeholder="Search"/>
         <select id="data-centre-filter">
-            <option>All</option>
+            <option value="All">All</option>
+            <optgroup label="North America">
+                <option value="Aether">Aether</option>
+                <option value="Crystal">Crystal</option>
+                <option value="Primal">Primal</option>
+            </optgroup>
+            <optgroup label="Europe">
+                <option value="Chaos">Chaos</option>
+                <option value="Light">Light</option>
+            </optgroup>
+            <optgroup label="Japan">
+                <option value="Elemental">Elemental</option>
+                <option value="Gaia">Gaia</option>
+                <option value="Mana">Mana</option>
+            </optgroup>
+            <optgroup label="Oceania">
+                <option disabled value="">Not yet lmao</option>
+            </optgroup>
         </select>
         <details class="filter-controls">
             <summary>Advanced</summary>