Add an About view

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Phyks (Lucas Verney)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/components/NavigationDrawer.vue

@@ -38,6 +38,14 @@
                     <v-list-tile-title>{{ $t('navigation.preferences') }}</v-list-tile-title>
                 </v-list-tile-content>
             </v-list-tile>
+            <v-list-tile :to="{ name: 'About' }">
+                <v-list-tile-action>
+                    <v-icon>info</v-icon>
+                </v-list-tile-action>
+                <v-list-tile-content>
+                    <v-list-tile-title>{{ $t('navigation.about') }}</v-list-tile-title>
+                </v-list-tile-content>
+            </v-list-tile>
         </v-list>
     </v-navigation-drawer>
 </template>

src/i18n/en/index.js

@@ -1,16 +1,25 @@
 export default {
-    navigation: {
+    about: {
-        home: 'Home',
+        appDescription: 'InFood is your grocery companion app, to help you scan quickly facts about products you are about to buy.',
-        scan: 'Scan',
+        licenseDescription: 'It is available under a {MITLicense} and source code is hosted by {Github}. Please report any bugs {there}.',
-        manualBarcode: 'Manual barcode',
+        MITLicense: 'MIT license',
-        preferences: 'Preferences',
+        OpenFoodFactsDescription: 'Products data is provided by {OpenFoodFacts} under {OpenDatabaseLicense}.',
+        OpenDatabaseLicense: 'Open Database License',
     },
     misc: {
         or: 'or',
+        there: 'there',
     },
     manualBarcode: {
         heading: 'Which barcode are you looking for?',
         EAN13Barcode: 'EAN13 barcode',
         go: 'Go!',
     },
+    navigation: {
+        home: 'Home',
+        scan: 'Scan',
+        manualBarcode: 'Manual barcode',
+        preferences: 'Preferences',
+        about: 'About',
+    },
 };

src/router/index.js

@@ -1,26 +1,27 @@
 import Vue from 'vue';
 import Router from 'vue-router';
 
+import About from '@/views/About';
 import Home from '@/views/Home';
 import ManualBarcode from '@/views/ManualBarcode';
-import Scan from '@/views/Scan';
 import Product from '@/views/Product';
 import Preferences from '@/views/Preferences';
+import Scan from '@/views/Scan';
 
 Vue.use(Router);
 
 export default new Router({
     routes: [
+        {
+            path: '/about',
+            name: 'About',
+            component: About,
+        },
         {
             path: '/',
             name: 'Home',
             component: Home,
         },
-        {
-            path: '/scan',
-            name: 'Scan',
-            component: Scan,
-        },
         {
             path: '/barcode',
             name: 'ManualBarcode',
@@ -36,5 +37,10 @@ export default new Router({
             name: 'Preferences',
             component: Preferences,
         },
+        {
+            path: '/scan',
+            name: 'Scan',
+            component: Scan,
+        },
     ],
 });

src/views/About.vue

@@ -0,0 +1,26 @@
+<template>
+    <v-container fluid>
+        <p>
+            {{ $t('about.appDescription') }}
+        </p>
+        <i18n path="about.licenseDescription" tag="p">
+            <a href="https://github.com/Phyks/Food/blob/master/LICENSE.md" place="MITLicense">{{ $t('about.MITLicense') }}</a>
+            <a href="https://github.com/phyks/food" place="Github">Github</a>
+            <a href="https://github.com/phyks/food/issues" place="there">{{ $t('misc.there') }}</a>
+        </i18n>
+        <i18n path="about.OpenFoodFactsDescription" tag="p">
+            <a href="https://world.openfoodfacts.org/" place="OpenFoodFacts">OpenFoodFacts</a>
+            <a href="http://opendatacommons.org/licenses/odbl/1.0/" place="OpenDatabaseLicense">{{ $t('about.OpenDatabaseLicense') }}</a>
+        </i18n>
+        <p class="text-xs-center"><img src="/static/openfoodfacts.svg"/></p>
+    </v-container>
+</template>
+
+<script>
+export default {
+    created() {
+        this.$store.dispatch('setTitle', { title: this.$t('navigation.about') });
+        this.$store.dispatch('setBackgroundColor', { backgroundColor: '#F5F5F5' });
+    },
+};
+</script>

src/views/Preferences.vue

@@ -7,7 +7,7 @@
 <script>
 export default {
     created() {
-        this.$store.dispatch('setTitle', { title: 'Preferences' });
+        this.$store.dispatch('setTitle', { title: this.$t('navigation.preferences') });
     },
 };
 </script>