stash
This commit is contained in:
parent
6f363a3329
commit
b8936ef6fc
@ -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",
|
||||
|
||||
20
src/components/ProductOverviewItem.vue
Normal file
20
src/components/ProductOverviewItem.vue
Normal file
@ -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>
|
||||
@ -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…',
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -1,46 +1,42 @@
|
||||
<template>
|
||||
<div>
|
||||
<Loading v-if="isLoading"/>
|
||||
<v-container fluid v-else>
|
||||
<v-layout row align-baseline>
|
||||
<v-flex xs3 class="text-xs-center">
|
||||
<v-avatar size="100%">
|
||||
<img :src="this.product.icon" :alt="product.name">
|
||||
</v-avatar>
|
||||
<v-container fluid grid-list-lg v-else>
|
||||
<v-layout row wrap align-baseline>
|
||||
<v-flex xs12>
|
||||
<v-card>
|
||||
<v-container fluid grid-list-lg>
|
||||
<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>
|
||||
<v-icon>info_outline</v-icon>
|
||||
<span>Alerts</span>
|
||||
<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 {
|
||||
background-color: white;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.product-icon >>> img {
|
||||
vertical-align: middle;
|
||||
.icon {
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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.onDetected(barcodeHandler);
|
||||
// Quagga.start();
|
||||
});
|
||||
/* Quagga.onProcessed((result) => {
|
||||
console.log(result);
|
||||
}); */
|
||||
},
|
||||
beforeDestroy() {
|
||||
Quagga.offDetected(this.handleBarcode);
|
||||
Quagga.stop();
|
||||
// Quagga.offDetected(this.handleBarcode);
|
||||
// Quagga.stop();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*canvas.drawingBuffer {
|
||||
display: none;
|
||||
}*/
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user