scouting: Fix sorting in the Match List view

Before this patch the Match List tab displayed matches like this:
- Quals 1
- Quals 10
- Quals 11
- Quals 12
- ...
- Quals 19
- Quals 2
- Quals 20
- Quals 21
- ...

That is sub-optimal. This patch makes it so the matches are sorted
numerically rather than lexicographically.

Signed-off-by: Philipp Schrader <philipp.schrader@gmail.com>
Change-Id: Ide73bd1e85184a19f707e2a933f478b358a94f48
diff --git a/scouting/scouting_test.ts b/scouting/scouting_test.ts
index 6fab5fc..6dce529 100644
--- a/scouting/scouting_test.ts
+++ b/scouting/scouting_test.ts
@@ -77,6 +77,10 @@
   }
 }
 
+function getNthMatchLabel(n: number) {
+  return element.all(by.css('.badge')).get(n).getText();
+}
+
 describe('The scouting web page', () => {
   beforeAll(async () => {
     await browser.get(browser.baseUrl);
@@ -98,6 +102,19 @@
         'Successfully imported match list.'));
   });
 
+  it('should: show matches in chronological order.', async () => {
+    await loadPage();
+
+    expect(await getNthMatchLabel(0)).toEqual("Quals 1");
+    expect(await getNthMatchLabel(1)).toEqual("Quals 2");
+    expect(await getNthMatchLabel(2)).toEqual("Quals 3");
+    expect(await getNthMatchLabel(9)).toEqual("Quals 10");
+    // TODO(phil): Validate quarter finals and friends. Right now we don't
+    // distinguish between "sets". I.e. we display 4 "Quarter Final 1" matches
+    // without being able to distinguish between them.
+    expect(await getNthMatchLabel(87)).toEqual("Final 1");
+  });
+
   it('should: error on unknown match.', async () => {
     await loadPage();
 
diff --git a/scouting/www/match_list/match_list.component.ts b/scouting/www/match_list/match_list.component.ts
index 220631e..148f71c 100644
--- a/scouting/www/match_list/match_list.component.ts
+++ b/scouting/www/match_list/match_list.component.ts
@@ -10,6 +10,8 @@
   compLevel: string
 };
 
+const MATCH_TYPE_ORDERING = ['qm', 'ef', 'qf', 'sf', 'f'];
+
 @Component({
   selector: 'app-match-list',
   templateUrl: './match_list.ng.html',
@@ -83,17 +85,28 @@
           RequestAllMatchesResponse.getRootAsRequestAllMatchesResponse(
               fbBuffer);
 
+      // Convert the flatbuffer list into an array. That's more useful.
       this.matchList = [];
       for (let i = 0; i < parsedResponse.matchListLength(); i++) {
         this.matchList.push(parsedResponse.matchList(i));
       }
+
+      // Sort the list so it is in chronological order.
       this.matchList.sort((a, b) => {
-        let aString = this.displayMatchNumber(a);
-        let bString = this.displayMatchNumber(b);
-        if (aString < bString) {
+        const aMatchTypeIndex = MATCH_TYPE_ORDERING.indexOf(a.compLevel());
+        const bMatchTypeIndex = MATCH_TYPE_ORDERING.indexOf(b.compLevel());
+        if (aMatchTypeIndex < bMatchTypeIndex) {
           return -1;
         }
-        if (aString > bString) {
+        if (aMatchTypeIndex > bMatchTypeIndex) {
+          return 1;
+        }
+        const aMatchNumber = a.matchNumber();
+        const bMatchNumber = b.matchNumber();
+        if (aMatchNumber < bMatchNumber) {
+          return -1;
+        }
+        if (aMatchNumber > bMatchNumber) {
           return 1;
         }
         return 0;