feat(stats): super basic stats page (#54)

Super basic /stats page

src/components/Footer.vue

@@ -6,6 +6,7 @@
       </v-col>
       <v-col cols="12" md="6" align="center">
         <v-btn class="mx-2" variant="text" href="https://prices.openfoodfacts.org" target="_blank">About</v-btn>
+        <v-btn class="mx-2" variant="text" to="/stats">Stats</v-btn>
         <v-btn class="mx-2" variant="text" href="https://github.com/openfoodfacts/open-prices-frontend" target="_blank">Github</v-btn>
       </v-col>
     </v-row>

src/routes.js

@@ -3,6 +3,7 @@ import SignIn from './views/SignIn.vue'
 import AddPriceHome from './views/AddPriceHome.vue'
 import AddPriceSingle from './views/AddPriceSingle.vue'
 import PriceList from './views/PriceList.vue'
+import Stats from './views/Stats.vue'
 import NotFound from './views/NotFound.vue'
 
 /** @type {import('vue-router').RouterOptions['routes']} */
@@ -12,5 +13,6 @@ export let routes = [
   { path: '/add', name: 'add-price', component: AddPriceHome, meta: { title: 'Add a price', icon: 'mdi-plus', drawerMenu: true, requiresAuth: true }},
   { path: '/add/single', name: 'add-price-single', component: AddPriceSingle, meta: { title: 'Add a single price', requiresAuth: true }},
   { path: '/prices', name: 'prices', component: PriceList, meta: { title: 'Last prices', icon: 'mdi-tag-multiple-outline', drawerMenu: true }},
+  { path: '/stats', name: 'stats', component: Stats, meta: { title: 'Stats' }},
   { path: '/:path(.*)', component: NotFound },
 ]

src/views/Stats.vue

@@ -0,0 +1,38 @@
+<template>
+  <h1 class="mb-1">
+    Stats
+    <v-progress-circular v-if="loading" indeterminate :size="30"></v-progress-circular>
+  </h1>
+
+  <v-row>
+    <v-col cols="12" md="6" lg="4">
+      <v-card title="Price count" :text="priceCount"></v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import api from '../services/api'
+
+export default {
+  data() {
+    return {
+      priceCount: null,
+      loading: false,
+    }
+  },
+  mounted() {
+    this.getPrices()
+  },
+  methods: {
+    getPrices() {
+      this.loading = true
+      return api.getPrices()
+        .then((data) => {
+          this.priceCount = data.total
+          this.loading = false
+        })
+    }
+  }
+}
+</script>