stash

package.json

@@ -16,10 +16,12 @@
   "dependencies": {
     "es6-promise": "^4.1.1",
     "isomorphic-fetch": "^2.2.1",
+    "quagga": "^0.12.1",
     "vue": "^2.4.4",
     "vue-router": "^2.7.0",
     "vuetify": "^0.15.7",
-    "vuex": "^2.4.0"
+    "vuex": "^2.4.0",
+    "webrtc-adapter": "^5.0.4"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/components/ProductOverviewItem.vue

@@ -0,0 +1,20 @@
+<template>
+    <v-layout row>
+        <v-flex xs7>
+            <v-list-tile-title>{{ name }}</v-list-tile-title>
+        </v-flex>
+        <v-flex xs5 class="text-xs-right">
+            <v-icon v-if="icon">{{ icon }}</v-icon>
+            <slot v-else />
+        </v-flex>
+    </v-layout>
+</template>
+
+<script>
+export default {
+    props: {
+        name: String,
+        icon: String,
+    },
+};
+</script>

src/i18n/en/index.js

@@ -3,8 +3,9 @@ export default {
         appDescription: 'InFood is your grocery companion app, to help you scan quickly facts about products you are about to buy.',
         licenseDescription: 'It is available under a {MITLicense} and source code is hosted by {Github}. Please report any bugs {there}.',
         MITLicense: 'MIT license',
-        OpenFoodFactsDescription: 'Products data is provided by {OpenFoodFacts} under {OpenDatabaseLicense}.',
+        OpenFoodFactsDescription: '{OpenFoodFacts} provides products data under {OpenDatabaseLicense} and illustrations under {CreativeCommonsBYSALicense}.',
         OpenDatabaseLicense: 'Open Database License',
+        CreativeCommonsBYSALicense: 'CC BY SA',
     },
     misc: {
         loading: 'Loading…',

src/router/index.js

@@ -6,7 +6,7 @@ import Home from '@/views/Home';
 import ManualBarcode from '@/views/ManualBarcode';
 import Product from '@/views/Product';
 import Preferences from '@/views/Preferences';
-import Scan from '@/views/Scan';
+import Scan from '@/views/ScanQuagga';
 
 Vue.use(Router);
 

src/views/About.vue

@@ -11,8 +11,11 @@
         <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>
+            <a href="https://creativecommons.org/licenses/by-sa/3.0/deed.en" place="CreativeCommonsBYSALicense">{{ $t('about.CreativeCommonsBYSALicense') }}</a>
         </i18n>
-        <p class="text-xs-center"><img src="/static/openfoodfacts.svg"/></p>
+        <p class="text-xs-center">
+            <a href="http://openfoodfacts.org/"><img src="/static/openfoodfacts.svg"/></a>
+        </p>
     </v-container>
 </template>
 

src/views/Product.vue

@@ -1,46 +1,42 @@
 <template>
     <div>
         <Loading v-if="isLoading"/>
-        <v-container fluid v-else>
+        <v-container fluid grid-list-lg v-else>
-            <v-layout row align-baseline>
+            <v-layout row wrap align-baseline>
-                <v-flex xs3 class="text-xs-center">
+                <v-flex xs12>
-                    <v-avatar size="100%">
+                    <v-card>
-                      <img :src="this.product.icon" :alt="product.name">
+                        <v-container fluid grid-list-lg>
-                    </v-avatar>
+                            <v-layout row mb-3>
+                                <v-flex xs5>
+                                    <v-avatar size="100%">
+                                        <img class="icon" :src="this.product.icon" />
+                                    </v-avatar>
+                                </v-flex>
+                                <v-flex xs7 class="text-xs-center">
+                                    <div>
+                                        <div class="headline">Herta</div>
+                                        <h2 class="title">{{ product.name }}</h2>
+                                    </div>
+                                </v-flex>
+                            </v-layout>
+
+                            <ProductOverviewItem name="Diet" icon="check_circle" />
+                            <ProductOverviewItem name="Allergens" icon="clear" />
+                            <ProductOverviewItem name="Nutriscore">
+                                <span>A</span>
+                            </ProductOverviewItem>
+                            <ProductOverviewItem name="Labels">
+                                <span>A</span>
+                            </ProductOverviewItem>
+                            <ProductOverviewItem name="Made">
+                                <span>300km away</span>
+                            </ProductOverviewItem>
+                        </v-container>
+                    </v-card>
                 </v-flex>
             </v-layout>
-            <v-layout row>
-                <v-tabs centered>
-                    <v-tabs-items>
-                        <v-tabs-content id="tab-overview">
-                            <v-card flat>
-                                <v-card-text>
-                                </v-card-text>
-                            </v-card>
-                        </v-tabs-content>
-                        <v-tabs-content id="tab-nutrition">
-                            <v-card flat>
-                                <v-card-text>
-                                    <v-data-table
-                                        hide-actions
-                                        >
-                                        <template slot="items" scope="props">
-                                            <td>{{ props.item.name }}</td>
-                                        </template>
-                                    </v-data-table>
-                                </v-card-text>
-                            </v-card>
-                        </v-tabs-content>
-                        <v-tabs-content id="tab-labels">
-                            <v-card flat>
-                                <v-card-text>Bidule</v-card-text>
-                            </v-card>
-                        </v-tabs-content>
-                    </v-tabs-items>
-                </v-tabs>
-            </v-layout>
         </v-container>
-        <v-bottom-nav v-if="!isLoading" absolute :value="true" class="transparent">
+        <v-bottom-nav v-if="!isLoading" :value="true" class="white">
             <v-btn flat class="teal--text" value="recent">
                 <span>Overview</span>
                 <v-icon>view_list</v-icon>
@@ -50,8 +46,8 @@
                 <v-icon>info_outline</v-icon>
             </v-btn>
             <v-btn flat class="teal--text" value="recent">
-                <span>Labels</span>
+                <span>Alerts</span>
-                <v-icon>info_outline</v-icon>
+                <v-icon>warning</v-icon>
             </v-btn>
         </v-bottom-nav>
     </div>
@@ -59,10 +55,12 @@
 
 <script>
 import Loading from '@/views/Loading';
+import ProductOverviewItem from '@/components/ProductOverviewItem';
 
 export default {
     components: {
         Loading,
+        ProductOverviewItem,
     },
     created() {
         this.$store.dispatch('setTitle', { title: '' });
@@ -90,11 +88,10 @@ export default {
 </script>
 
 <style scoped>
-.product-icon {
+.icon {
-    background-color: white;
+    height: auto;
-    border-radius: 100%;
+    width: auto;
-}
+    max-width: 100%;
-.product-icon >>> img {
+    max-height: 100%;
-    vertical-align: middle;
 }
 </style>

src/views/ScanQuagga.vue

@@ -3,7 +3,7 @@
         <h2>Let's scan something!</h2>
         <h2>Found: {{ barcode }}</h2>
 
-        <div ref="video"></div>
+        <div id="interactive" class="viewport"></div>
         <p v-if="!playing && error">{{ error }}</p>
     </div>
 </template>
@@ -26,48 +26,42 @@ export default {
         },
     },
     mounted() {
-        const videoElement = this.$refs.video;
-        const barcodeHandler = this.handleBarcode;
-
         Quagga.init({
             inputStream: {
-                name: 'Scan',
                 type: 'LiveStream',
                 constraints: {
+                    width: { min: 640 },
+                    height: { min: 480 },
                     facingMode: 'environment',
+                    aspectRatio: { min: 1, max: 2 },
                 },
-                target: videoElement,
             },
+            /* locator: {
+                patchSize: 'medium',
+                halfSample: true,
+            },
+            frequency: 10,
             decoder: {
                 readers: [
                     'ean_reader',
                 ],
-                debug: {
-                    drawBoundingBox: true,
-                    showFrequency: true,
-                    drawScanline: true,
-                    showPattern: true,
-                },
             },
+            locate: true, */
         }, (err) => {
             if (err) {
                 this.error = err.toString();
-                return;
+                // return;
             }
 
-            Quagga.start();
+            // Quagga.start();
-            Quagga.onDetected(barcodeHandler);
         });
+        /* Quagga.onProcessed((result) => {
+            console.log(result);
+        }); */
     },
     beforeDestroy() {
-        Quagga.offDetected(this.handleBarcode);
+        // Quagga.offDetected(this.handleBarcode);
-        Quagga.stop();
+        // Quagga.stop();
     },
 };
 </script>
-
-<style>
-/*canvas.drawingBuffer {
-    display: none;
-}*/
-</style>