Fixed type errors

frontend/src/components/Map.vue

@@ -159,7 +159,7 @@ export default {
 
   data() {
     return {
-      countries: [] as string[],
+      countries: [] as Country[],
       devices: [] as UserDevice[],
       loading: false,
       map: null as Optional<Map>,
@@ -307,10 +307,11 @@ export default {
       await this.processQueryChange(this.locationQuery, oldQuery)
     },
 
-    async getCountries() {
+    async getCountries(): Promise<Country[]> {
       return (
         await this.getStats(
           new StatsRequest({
+            // @ts-ignore
             userId: this.$root.user.id,
             groupBy: ['country'],
             order: 'desc',

frontend/src/components/stats/MetricsForm.vue

@@ -2,13 +2,13 @@
   <form class="metrics-form" @submit.prevent="$emit('submit', newMetrics)">
     <div class="metrics">
       <div v-for="enabled, metric in newMetrics" :key="metric" class="metric">
-        <label :for="metric">
+        <label :for="metric.toString()">
           <input
             type="checkbox"
-            :id="metric"
-            v-model="newMetrics[metric]"
+            :id="metric.toString()"
+            v-model="newMetrics[metric.toString()]"
           />&nbsp;
-          {{ displayName(metric) }}
+          {{ displayName(metric.toString()) }}
         </label>
       </div>
     </div>

frontend/src/mixins/Dates.vue

@@ -12,7 +12,12 @@ export default {
         return '-'
       }
 
-      let dateStr = this.normalizeDate(date).toString().replace(/GMT.*/, '').trim() as string
+      date = this.normalizeDate(date)
+      if (!date) {
+        return '-'
+      }
+
+      let dateStr = date.toString().replace(/GMT.*/, '').trim() as string
       if (!opts.dayOfWeek) {
         dateStr = dateStr.slice(4)
       }

frontend/src/models/LocationQuery.ts

@@ -15,6 +15,8 @@ class LocationQuery {
   public country: Optional<string> = null;
   public locality: Optional<string> = null;
   public postalCode: Optional<string> = null;
+  public address: Optional<string> = null;
+  public description: Optional<string> = null;
   public order: string = 'desc';
 
   constructor(data: {
@@ -32,6 +34,8 @@ class LocationQuery {
     country?: Optional<string>;
     locality?: Optional<string>;
     postalCode?: Optional<string>;
+    address?: Optional<string>;
+    description?: Optional<string>;
     order?: Optional<string>;
   }) {
     this.limit = data.limit || this.limit;
@@ -48,6 +52,8 @@ class LocationQuery {
     this.country = data.country || this.country;
     this.locality = data.locality || this.locality;
     this.postalCode = data.postalCode || this.postalCode;
+    this.address = data.address || this.address;
+    this.description = data.description || this.description;
     this.order = data.order || this.order;
   }
 }

frontend/src/styles/layout.scss

@@ -27,7 +27,7 @@ $screen-size-to-breakpoint: (
   @each $screen-size, $breakpoint in $screen-size-to-breakpoint {
     .col-#{$screen-size}-#{$i} {
       @media (min-width: map.get($breakpoints, $breakpoint)) {
-        width: (100% / 12) * $i;
+        width: calc((100% / 12) * $i);
       }
     }
   }

frontend/src/views/Stats.vue

@@ -1,10 +1,16 @@
 <template>
   <div class="stats view">
     <div class="wrapper">
-      <h1>
-        <font-awesome-icon icon="chart-line" />&nbsp;
-        Statistics
-      </h1>
+      <div class="header">
+        <h1>
+          <font-awesome-icon icon="chart-line" />&nbsp;
+          Statistics
+        </h1>
+
+        <small v-if="stats.length">
+          Showing <b>{{ stats.length }}</b> records
+        </small>
+      </div>
 
       <div class="loading-container" v-if="loading">
         <Loading />
@@ -23,7 +29,7 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="stat in stats" :key="stat.key">
+            <tr v-for="stat, i in stats" :key="i">
               <td class="key" v-for="value, attr in stat.key" :key="attr">
                 {{ displayValue(attr, value) }}
               </td>
@@ -61,10 +67,8 @@
 </template>
 
 <script lang="ts">
-import { getCountryData, getEmojiFlag } from 'countries-list';
-import type { TCountryCode } from 'countries-list';
-
 import Api from '../mixins/Api.vue';
+import Country from '../models/Country';
 import Dates from '../mixins/Dates.vue';
 import FloatingButton from '../elements/FloatingButton.vue';
 import Loading from '../elements/Loading.vue';
@@ -106,6 +110,7 @@ export default {
   computed: {
     query() {
       return new StatsRequest({
+        // @ts-ignore
         userId: this.$root.user.id,
         groupBy: Object.entries(this.metrics)
           .filter(([_, enabled]) => enabled)
@@ -158,7 +163,13 @@ export default {
         }
       }
 
-      this.metrics = metrics;
+      this.metrics = metrics as {
+        country: boolean,
+        locality: boolean,
+        address: boolean,
+        postalCode: boolean,
+        description: boolean,
+      };
     },
 
     closeForm() {
@@ -166,7 +177,14 @@ export default {
     },
 
     onMetricsSubmit(newMetrics: Record<string, boolean>) {
-      this.metrics = newMetrics;
+      this.metrics = newMetrics as {
+        country: boolean,
+        locality: boolean,
+        address: boolean,
+        postalCode: boolean,
+        description: boolean,
+      };
+
       this.closeForm();
     },
 
@@ -187,13 +205,12 @@ export default {
         return "<missing>";
       }
 
-      const cc = countryCode.toUpperCase() as TCountryCode;
-      const country = getCountryData(cc);
+      const country = Country.fromCode(countryCode);
       if (!country) {
         return countryCode;
       }
 
-      return `${getEmojiFlag(cc)} ${country.name}`;
+      return `${country.flag} ${country.name}`;
     },
 
     displayDate(date: Date | string | number | null | undefined) {
@@ -209,14 +226,6 @@ export default {
       },
       deep: true,
     },
-
-    showSelectForm(newValue: boolean) {
-      if (newValue) {
-        this.$nextTick(() => {
-          this.$refs.metricsForm?.focus();
-        });
-      }
-    },
   },
 
   async created() {
@@ -253,6 +262,26 @@ export default {
     }
   }
 
+  .header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    small {
+      margin: -1em 0 1em 0;
+      opacity: 0.6;
+    }
+  }
+
+  .list {
+    .no-data {
+      font-size: 1.2rem;
+      margin: 1rem;
+      text-align: center;
+    }
+  }
+
   table {
     tbody {
       tr {