✨ The sort order icon is back, resolves #74

eigenein · Jul 17, 2021 · f452131 · f452131
1 parent 808671c
commit f452131
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 26 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "blitz-dashboard"
-version = "0.8.2"
+version = "0.8.3"
 authors = ["Pavel Perestoronin <[email protected]>"]
 edition = "2018"
 resolver = "2"

diff --git a/src/web/routes/player.rs b/src/web/routes/player.rs
@@ -320,19 +320,63 @@ pub async fn get(
                                             @let period = format_duration(period);
                                             tr {
                                                 th { "Техника" }
-                                                th#by-tier { a href=(format!("?period={}#by-tier", period)) { "Уровень" } }
+                                                th#by-tier {
+                                                    span.icon-text.is-flex-wrap-nowrap {
+                                                        span { a href=(format!("?period={}#by-tier", period)) { "Уровень" } }
+                                                    }
+                                                }
                                                 th { "Нация" }
                                                 th { "Тип" }
-                                                th#by-battles { a href=(format!("?period={}#by-battles", period)) { "Бои" } }
-                                                th#by-wins { a href=(format!("?period={}#by-wins", period)) { "Победы" } }
-                                                th#by-win-rate { a href=(format!("?period={}#by-win-rate", period)) { "Текущий процент побед" } }
-                                                th#by-true-win-rate { a href=(format!("?period={}#by-true-win-rate", period)) { "Ожидаемый процент побед" } }
-                                                th#by-gold { a href=(format!("?period={}#by-gold", period)) { abbr title="Текущий доход от золотых бустеров за бой, если они были установлены" { "Заработанное золото" } } }
-                                                th#by-true-gold { a href=(format!("?period={}#by-true-gold", period)) { abbr title="Средняя ожидаемая доходность золотого бустера за бой" { "Ожидаемое золото" } } }
-                                                th#by-damage-dealt { a href=(format!("?period={}#by-damage-dealt", period)) { "Ущерб" } }
-                                                th#by-damage-per-battle { a href=(format!("?period={}#by-damage-per-battle", period)) { "Ущерб за бой" } }
-                                                th#by-survived-battles { a href=(format!("?period={}#by-survived-battles", period)) { "Выжил" } }
-                                                th#by-survival-rate { a href=(format!("?period={}#by-survival-rate", period)) { "Выживаемость" } }
+                                                th#by-battles {
+                                                    span.icon-text.is-flex-wrap-nowrap {
+                                                        span { a href=(format!("?period={}#by-battles", period)) { "Бои" } }
+                                                    }
+                                                }
+                                                th#by-wins {
+                                                    span.icon-text.is-flex-wrap-nowrap {
+                                                        span { a href=(format!("?period={}#by-wins", period)) { "Победы" } }
+                                                    }
+                                                }
+                                                th#by-win-rate {
+                                                    span.icon-text.is-flex-wrap-nowrap {
+                                                        span { a href=(format!("?period={}#by-win-rate", period)) { "Текущий процент побед" } }
+                                                    }
+                                                }
+                                                th#by-true-win-rate {
+                                                    span.icon-text.is-flex-wrap-nowrap {
+                                                        span { a href=(format!("?period={}#by-true-win-rate", period)) { "Ожидаемый процент побед" } }
+                                                    }
+                                                }
+                                                th#by-gold {
+                                                    span.icon-text.is-flex-wrap-nowrap {
+                                                        span { a href=(format!("?period={}#by-gold", period)) { abbr title="Текущий доход от золотых бустеров за бой, если они были установлены" { "Заработанное золото" } } }
+                                                    }
+                                                }
+                                                th#by-true-gold {
+                                                    span.icon-text.is-flex-wrap-nowrap {
+                                                        span { a href=(format!("?period={}#by-true-gold", period)) { abbr title="Средняя ожидаемая доходность золотого бустера за бой" { "Ожидаемое золото" } } }
+                                                    }
+                                                }
+                                                th#by-damage-dealt {
+                                                    span.icon-text.is-flex-wrap-nowrap {
+                                                        span { a href=(format!("?period={}#by-damage-dealt", period)) { "Ущерб" } }
+                                                    }
+                                                }
+                                                th#by-damage-per-battle {
+                                                    span.icon-text.is-flex-wrap-nowrap {
+                                                        span { a href=(format!("?period={}#by-damage-per-battle", period)) { "Ущерб за бой" } }
+                                                    }
+                                                }
+                                                th#by-survived-battles {
+                                                    span.icon-text.is-flex-wrap-nowrap {
+                                                        span { a href=(format!("?period={}#by-survived-battles", period)) { "Выжил" } }
+                                                    }
+                                                }
+                                                th#by-survival-rate {
+                                                    span.icon-text.is-flex-wrap-nowrap {
+                                                        span { a href=(format!("?period={}#by-survival-rate", period)) { "Выживаемость" } }
+                                                    }
+                                                }
                                             }
                                         }
                                         tbody {

diff --git a/src/web/routes/static/player.js b/src/web/routes/static/player.js
@@ -1,24 +1,37 @@
 (function () {
-    function sortVehicles(by) {
-        if (!location.hash.startsWith("#by-")) {
+    function sortVehicles(thSelector) {
+        if ((vehicles == null) || (!location.hash.startsWith("#by-"))) {
             return;
         }
-        let qs = `[data-sort="${by}"]`;
-        rows.sort((row_1, row_2) => {
-            return parseFloat(row_2.querySelector(qs).dataset.value) - parseFloat(row_1.querySelector(qs).dataset.value);
-        });
-        rows.forEach(row => vehicles.appendChild(row));
-        // TODO: set the sort icon.
+
+        const tbody = vehicles.querySelector("tbody");
+        let rows = Array.from(tbody.querySelectorAll("tr"));
+        let qs = `[data-sort="${thSelector}"]`;
+        rows
+            .sort((row_1, row_2) => {
+                return parseFloat(row_2.querySelector(qs).dataset.value) - parseFloat(row_1.querySelector(qs).dataset.value);
+            })
+            .forEach(row => tbody.appendChild(row));
+
+        const iconText = vehicles.querySelector(`${thSelector} span.icon-text`);
+        iconText.insertBefore(sortIcon, iconText.firstChild);
+    }
+
+    function createSortIcon() {
+        const inner = document.createElement("i");
+        inner.classList.add("fas", "fa-angle-down");
+        const outer = document.createElement("span");
+        outer.classList.add("icon");
+        outer.appendChild(inner);
+        return outer;
     }
 
     window.onhashchange = function () {
         sortVehicles(location.hash);
     };
 
     const vehicles = document.getElementById("vehicles");
-    let rows = null;
-    if (vehicles != null) {
-        rows = Array.from(vehicles.querySelectorAll("tbody tr"));
-        sortVehicles(!!location.hash ? location.hash : "#by-battles");
-    }
+    const sortIcon = createSortIcon();
+
+    sortVehicles(!!location.hash ? location.hash : "#by-battles");
 })();