Resolve #15.

Front page is now a more presentable format.

Show most recent 3 matches with provided info.

Include leaderboards to flex on others.

Author: PhlexPlexico

public/img/maps/_unknown.jpg

@@ -0,0 +1,94 @@
+<template>
+  <v-container>
+    <v-row v-for="(mtch, idx) in matches" :key="mtch.id">
+      <v-col
+        lg="8"
+        md="12"
+        sm="12"
+        xs="12"
+        offset-lg="2"
+        class="align-self-center"
+      >
+        <v-img
+          :src="'/img/maps/' + mtch.map_name + '.jpg'"
+          max-height="225px"
+          :gradient="gradientCalc"
+          @error="imageError(idx)"
+        >
+          <v-card
+            color="rgb(128, 128, 128, 0.4)"
+            :to="'/match/' + mtch.id"
+            max-height="225px"
+          >
+            <v-card-title class="text-uppercase justify-center text-center">
+              {{ mtch.team1_string }}<br />
+              VS<br />
+              {{ mtch.team2_string }}
+            </v-card-title>
+            <v-card-subtitle class="text-center">
+              BO{{ mtch.max_maps }}
+            </v-card-subtitle>
+            <v-card-text class="text-center text-h2">
+              {{ mtch.team1_score }} : {{ mtch.team1_score }}
+            </v-card-text>
+          </v-card>
+        </v-img>
+        <v-spacer />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      matches: [],
+      isLoading: true,
+      deletePending: false,
+      isThereCancelledMatches: false
+    };
+  },
+  async mounted() {
+    await this.GetLimitedMatches();
+  },
+  methods: {
+    async GetLimitedMatches() {
+      try {
+        let res;
+        res = await this.GetLimitMatches(3);
+        if (typeof res == "string") res = [];
+        else {
+          res.forEach(async match => {
+            let mapStats = await this.GetSingleMapStat(match.id, 0);
+            if (match.max_maps == 1) {
+              match.team1_score = mapStats.team1_score;
+              match.team2_score = mapStats.team2_score;
+            }
+            match.map_name = mapStats.map_name;
+            match.img_error = false;
+            this.matches.push(match);
+          });
+        }
+      } catch (error) {
+        console.log(error);
+      } finally {
+        this.isLoading = false;
+      }
+      return;
+    },
+    imageError(matchIdx) {
+      console.log(this.matches[matchIdx].map_name);
+      this.matches[matchIdx].map_name = '_unknown';
+      return;
+    }
+  },
+  computed: {
+    gradientCalc() {
+      if (!this.$vuetify.theme.dark)
+        return "to bottom, rgba(255,255,255,.4), rgba(255,255,255,1)";
+      else return "to bottom, rgba(0,0,0,.4), rgba(0,0,0,1)";
+    }
+  }
+};
+</script>

public/img/maps/de_cache.jpg

@@ -35,6 +35,10 @@
           active-class="primary--text text--accent-4"
         >
           <v-list-item index="Home" :to="'/'">
+            <v-list-item-title>{{ $t("Navbar.Home") }}</v-list-item-title>
+          </v-list-item>
+
+          <v-list-item index="Matches" :to="'/matches'">
             <v-list-item-title>{{ $t("Navbar.AllMatches") }}</v-list-item-title>
           </v-list-item>
 

public/img/maps/de_dust2.jpg

@@ -8,7 +8,7 @@
       :headers="headers"
       :items="teams"
       :sort-by="'wins'"
-      :sort-desc="'wins'"
+      :sort-desc="['wins']"
       ref="TeamLeaderboardTable"
     >
       <template v-slot:top>

public/img/maps/de_inferno.jpg

@@ -8,6 +8,11 @@ const routes = [
     name: "Home",
     component: () => import(/* webpackChunkName: "Home" */ "../views/Home.vue")
   },
+  {
+    path: "/matches",
+    name: "Matches",
+    component: () => import(/* webpackChunkName: "Home" */ "../views/Matches.vue")
+  },
   {
     path: "/teams",
     name: "Teams",

public/img/maps/de_mirage.jpg

@@ -14,7 +14,8 @@
       "MySeasons": "My Seasons",
       "Logout": "Logout",
       "DarkMode": "Toggle Dark Mode",
-      "PlayerLeader": "Player Leaderboard"
+      "PlayerLeader": "Player Leaderboard",
+      "Home": "Home"
     },
     "MatchAdmin": {
       "AdminTools": "Admin Actions",
@@ -338,7 +339,8 @@
       "MySeasons": "私の季節",
       "Logout": "ログアウト",
       "DarkMode": "ダークモードを切り替えます",
-      "PlayerLeader": "プレイヤーリーダーボード"
+      "PlayerLeader": "プレイヤーリーダーボード",
+      "Home": "ホーム"
     },
     "MatchAdmin": {
       "AdminTools": "管理者ツール",

public/img/maps/de_nuke.jpg

@@ -339,6 +339,17 @@ export default {
       }
       return message;
     },
+    async GetLimitMatches(limit) {
+      let res;
+      let message;
+      try {
+        res = await this.axioCall.get(`/api/matches/limit/${limit}`);
+        message = res.data.matches;
+      } catch (error) {
+        message = error.response.data.message;
+      }
+      return message;
+    },
     async GetMyMatches() {
       let res;
       let message;
@@ -650,11 +661,11 @@ export default {
       }
       return message;
     },
-    async GetSingleMapStat(matchid, mapid) {
+    async GetSingleMapStat(matchid, mapnumber) {
       let res;
       let message;
       try {
-        res = await this.axioCall.get(`/api/mapstats/${matchid}/${mapid}`);
+        res = await this.axioCall.get(`/api/mapstats/${matchid}/${mapnumber}`);
         message = res.data.mapstat;
       } catch (error) {
         message = error.response.data.message;

public/img/maps/de_overpass.jpg

@@ -1,16 +1,28 @@
 <template>
   <v-container class="home" fluid>
-    <MatchesTable :user="user" />
+    <MatchCards />
+    <v-row>
+      <v-col cols="6">
+        <TeamLeaderBoard />
+      </v-col>
+      <v-col cols="6">
+        <PlayerLeaderBoard />
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
 <script>
 // @ is an alias to /src
-import MatchesTable from "@/components/MatchesTable";
+import TeamLeaderBoard from "@/components/TeamLeaderboardTable";
+import PlayerLeaderBoard from "@/components/PlayerLeaderboardTable";
+import MatchCards from "@/components/MatchCard";
 export default {
   name: "Home",
   components: {
-    MatchesTable
+    TeamLeaderBoard,
+    MatchCards,
+    PlayerLeaderBoard
   },
   data() {
     return {

public/img/maps/de_train.jpg

@@ -0,0 +1,33 @@
+<template>
+  <v-container class="home" fluid>
+    <MatchesTable :user="user" />
+  </v-container>
+</template>
+
+<script>
+// @ is an alias to /src
+import MatchesTable from "@/components/MatchesTable";
+export default {
+  name: "Home",
+  components: {
+    MatchesTable
+  },
+  data() {
+    return {
+      user: {
+        admin: false,
+        steam_id: "",
+        id: -1,
+        super_admin: false,
+        name: "",
+        small_image: "",
+        medium_image: "",
+        large_image: ""
+      } // should be object from JSON response
+    };
+  },
+  async mounted() {
+    this.user = await this.IsLoggedIn();
+  }
+};
+</script>