From 159857746165b0618b74af17a8d26d72577027c4 Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Wed, 26 Jul 2023 04:47:21 +0100
Subject: [PATCH] Update match head-to-head history to show scheduled but not
 played maps

---
 .../components/website/match/MatchMapHistory.vue   |  4 ++--
 .../src/components/website/match/TeamMapStats.vue  | 10 +++++++---
 website/src/utils/content-utils.js                 |  9 +++++++--
 website/src/views/sub-views/MatchHistory.vue       | 14 +++++++++-----
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/website/src/components/website/match/MatchMapHistory.vue b/website/src/components/website/match/MatchMapHistory.vue
index 0a0aa3d3..440dda58 100644
--- a/website/src/components/website/match/MatchMapHistory.vue
+++ b/website/src/components/website/match/MatchMapHistory.vue
@@ -4,7 +4,7 @@
             {{ map.name }}
             <i class="fa fa-fw fa-check" v-b-tooltip.top="'Scheduled for this match'" v-if="isScheduled"></i>
         </td>
-        <TeamMapStats class="map-team-stats" v-for="(data, ti) in data.stats"
+        <TeamMapStats class="map-team-stats" v-for="(data, ti) in data.stats" :show-unplayed-maps="showUnplayedMaps"
                       :key="ti" :data="data"/>
     </tr>
 </template>
@@ -19,7 +19,7 @@ export default {
         VBTooltip
     },
     components: { TeamMapStats },
-    props: ["data", "map"],
+    props: ["data", "map", "showUnplayedMaps"],
     computed: {
         isScheduled() {
             return this.data?.meta?.scheduledForMatch;
diff --git a/website/src/components/website/match/TeamMapStats.vue b/website/src/components/website/match/TeamMapStats.vue
index 5a00e8f2..3e327c31 100644
--- a/website/src/components/website/match/TeamMapStats.vue
+++ b/website/src/components/website/match/TeamMapStats.vue
@@ -4,9 +4,9 @@
             <!--        <div class="stat team">{{ team.code }}</div>-->
             <ThemeLogo logo-size="w-50" class="team-icon" :theme="team.theme" border-width="4" icon-padding="4" />
             <div class="stat scoreline">{{ scoreline }}</div>
-            <div class="stat recent"><i v-if="stats.played_recently" class="far fa-clock fa-fw" v-b-tooltip.top="'Played in their last match'"></i></div>
+            <div class="stat unplayed" v-if="showUnplayedMaps && stats.unplayed">Unplayed: {{ stats.unplayed }}</div>
+            <div class="stat recent" v-if="stats.played_recently"><i class="far fa-clock fa-fw" v-b-tooltip.top="'Played in their last match'"></i></div>
             <!--        <div class="stat played">{{ stats.played }}</div>-->
-
         </div>
     </td>
 </template>
@@ -17,7 +17,7 @@ import { VBTooltip } from "bootstrap-vue";
 export default {
     name: "TeamMapStats",
     components: { ThemeLogo },
-    props: ["data"],
+    props: ["data", "showUnplayedMaps"],
     directives: {
         VBTooltip
     },
@@ -53,4 +53,8 @@ export default {
     .recent {
         margin: 0 0.2em;
     }
+    .stat.unplayed {
+        min-width: 6em;
+        text-align: center;
+    }
 </style>
diff --git a/website/src/utils/content-utils.js b/website/src/utils/content-utils.js
index 42260f8a..71d903f9 100644
--- a/website/src/utils/content-utils.js
+++ b/website/src/utils/content-utils.js
@@ -253,7 +253,8 @@ export function getTeamsMapStats(teams, requestMatch, requestMap, filters) {
             played: 0,
             wins: 0,
             losses: 0,
-            draws: 0
+            draws: 0,
+            unplayed: 0
         };
 
         const prevMatches = (team.matches || [])
@@ -284,7 +285,11 @@ export function getTeamsMapStats(teams, requestMatch, requestMap, filters) {
                     if (scheduledMap) stat.scheduled_for_match = true;
                 }
 
-                if (!(matchMap.draw || matchMap.winner)) return; // wasn't played fully
+                if (!(matchMap.draw || matchMap.winner || matchMap.banner)) {
+                    // wasn't played fully
+                    if ([match.score_1, match.score_2].includes(match.first_to)) stat.unplayed++;
+                    return;
+                }
 
                 // woo right map
 
diff --git a/website/src/views/sub-views/MatchHistory.vue b/website/src/views/sub-views/MatchHistory.vue
index 1e1d304b..246c7492 100644
--- a/website/src/views/sub-views/MatchHistory.vue
+++ b/website/src/views/sub-views/MatchHistory.vue
@@ -1,12 +1,15 @@
 <template>
     <div class="match-history">
         <h1>Map Head To Head</h1>
-        <div class="settings flex w-100 justify-content-end mb-2" v-if="match.sub_event || match.match_group">
+        <div class="settings flex w-100 justify-content-end mb-2">
             <b-form-checkbox v-if="match.sub_event" v-model="filterSubEvent">
-                Only show maps from sub event <b>{{ match.sub_event}}</b>.
+                Only show maps from sub event <b>{{ match.sub_event}}</b>
             </b-form-checkbox>
             <b-form-checkbox v-if="match.match_group" v-model="filterMatchGroup">
-                Only show maps from group <b>{{ match.match_group}}</b>.
+                Only show maps from group <b>{{ match.match_group}}</b>
+            </b-form-checkbox>
+            <b-form-checkbox v-model="showUnplayedMaps">
+                Show maps that were scheduled but not played
             </b-form-checkbox>
         </div>
         <div class="text-light">
@@ -16,7 +19,7 @@
                 </div>
                 <div>
                     <table class="w-100">
-                        <MatchMapHistory v-for="map in mapType.maps" :key="map.id" :data="_getTeamMapStats(map)" :map="map" />
+                        <MatchMapHistory v-for="map in mapType.maps" :key="map.id" :data="_getTeamMapStats(map)" :map="map" :show-unplayed-maps="showUnplayedMaps" />
                     </table>
                 </div>
             </div>
@@ -44,7 +47,8 @@ export default {
     components: { MapDisplay, MatchMapHistory, BFormCheckbox },
     data: () => ({
         filterSubEvent: false,
-        filterMatchGroup: true
+        filterMatchGroup: true,
+        showUnplayedMaps: false
     }),
     computed: {
         pool() {