Change homecomponent to use properties for display

web/frontend/src/components/Home.vue

@@ -6,7 +6,7 @@
           <h2>Total login attempts</h2>
         </b-col>
         <b-col class="total-count">
-          <h2>{{ getStat('TotalLoginAttempts') }}</h2>
+          <h2>{{ totalLoginAttempts }}</h2>
         </b-col>
       </b-row>
       <b-row>
@@ -14,7 +14,7 @@
           <h2>Unique passwords</h2>
         </b-col>
         <b-col class="total-count">
-          <h2>{{ getStat('UniquePasswords') }}</h2>
+          <h2>{{ uniquePasswords }}</h2>
         </b-col>
       </b-row>
       <b-row>
@@ -22,7 +22,7 @@
           <h2>Unique usernames</h2>
         </b-col>
         <b-col class="total-count">
-          <h2>{{ getStat('UniqueUsernames') }}</h2>
+          <h2>{{ uniqueUsernames }}</h2>
         </b-col>
       </b-row>
       <b-row>
@@ -30,7 +30,7 @@
           <h2>Unique IPs</h2>
         </b-col>
         <b-col class="total-count">
-          <h2>{{ getStat('UniqueIPs') }}</h2>
+          <h2>{{ uniqueIPs }}</h2>
         </b-col>
       </b-row>
     </b-container>
@@ -55,27 +55,38 @@ interface TotalStatsResult {
 
 @Component
 export default class Home extends Vue {
-  totalStats?: TotalStatsResult[];
+  totalLoginAttempts?: number;
+  uniquePasswords?: number;
+  uniqueUsernames?: number;
+  uniqueIPs?: number;
+  uniqueCountries?: number;
 
   ready = false;
 
-  @Watch('totalStats', { immediate: true, deep: true })
-  getStat(key: TotalStatsHeaders): string | undefined {
-    const result = this.totalStats?.find((elem) => elem.name === key);
-    if (result) {
-      return Number(result?.count).toLocaleString();
-    }
-    return undefined;
-  }
-
   updateStats(): void {
     const url = `/api/stats?type=total`;
     axios
       .get<TotalStatsResult[]>(url)
       .then((resp) => {
-        this.totalStats = resp.data;
+        this.totalLoginAttempts = resp.data.find(
+          (e) => e.name == 'TotalLoginAttempts',
+        )?.count;
+
+        this.uniquePasswords = resp.data.find(
+          (e) => e.name == 'UniquePasswords',
+        )?.count;
+
+        this.uniqueUsernames = resp.data.find(
+          (e) => e.name == 'UniqueUsernames',
+        )?.count;
+
+        this.uniqueIPs = resp.data.find((e) => e.name == 'UniqueIPs')?.count;
+
+        this.uniqueCountries = resp.data.find(
+          (e) => e.name == 'UniqueCountries',
+        )?.count;
+
         this.ready = true;
-        console.log(this.totalStats);
       })
       .catch((e) => {
         console.log(e);