Fix sorting of next card due time

The times were sorted alphabetically, not numerically...

Author: g3force

src/TimestampFormatter.js

@@ -17,7 +17,7 @@ const isNumeric = function (n) {
     return !isNaN(parseFloat(n)) && isFinite(n);
 };
 
-const convertDurationToTimestamp = function (duration) {
+export const convertDurationToTimestamp = function (duration) {
     let parts = duration.substring(0, duration.length - 1).split('.');
     if (parts.length === 1) {
         return parseInt(parts[0]) * 1000000000;
@@ -58,4 +58,4 @@ const TimestampFormatter = {
         });
     }
 };
-export default TimestampFormatter;
+export default TimestampFormatter;

src/components/team/TeamYellowCardNextDue.vue

@@ -6,39 +6,42 @@
 </template>
 
 <script>
-    import {TEAM_BLUE, TEAM_YELLOW} from "../../refereeState";
+import {TEAM_BLUE, TEAM_YELLOW} from "@/refereeState";
+import {convertDurationToTimestamp} from "@/TimestampFormatter";
 
-    export default {
-        name: "TeamYellowCardNextDue",
-        props: {
-            teamColor: String,
-        },
-        data() {
-            return {
-                TEAM_YELLOW: TEAM_YELLOW,
-                TEAM_BLUE: TEAM_BLUE
-            }
+export default {
+    name: "TeamYellowCardNextDue",
+    props: {
+        teamColor: String,
+    },
+    data() {
+        return {
+            TEAM_YELLOW: TEAM_YELLOW,
+            TEAM_BLUE: TEAM_BLUE
+        }
+    },
+    computed: {
+        team() {
+            return this.$store.state.matchState.teamState[this.teamColor]
         },
-        computed: {
-            team() {
-                return this.$store.state.matchState.teamState[this.teamColor]
-            },
-            latestCardTime() {
-                if (this.activeYellowCards.length > 0) {
-                    let cards = [];
-                    for (let card of this.activeYellowCards) {
-                        cards.push(card.timeRemaining)
-                    }
-                    cards.sort()
-                    return cards[0];
+        latestCardTime() {
+            if (this.activeYellowCards.length > 0) {
+                let cards = [];
+                for (let card of this.activeYellowCards) {
+                    cards.push(convertDurationToTimestamp(card.timeRemaining))
                 }
-                return 0;
-            },
-            activeYellowCards() {
-                return this.team.yellowCards.filter(e => e.timeRemaining !== '0s');
+                cards.sort(function (a, b) {
+                    return a - b;
+                });
+                return cards[0];
             }
+            return 0;
+        },
+        activeYellowCards() {
+            return this.team.yellowCards.filter(e => e.timeRemaining !== '0s');
         }
     }
+}
 </script>
 
 <style scoped>