Clean Home view, beginning of ManualBarcode design
This commit is contained in:
parent
1cf5ca992a
commit
bba29e5cda
|
|
@ -16,7 +16,7 @@
|
|||
"dependencies": {
|
||||
"es6-promise": "^4.1.1",
|
||||
"isomorphic-fetch": "^2.2.1",
|
||||
"vue": "^2.4.2",
|
||||
"vue": "^2.4.4",
|
||||
"vue-router": "^2.7.0",
|
||||
"vuetify": "^0.15.7",
|
||||
"vuex": "^2.4.0"
|
||||
|
|
@ -84,7 +84,8 @@
|
|||
"webpack": "^2.6.1",
|
||||
"webpack-dev-middleware": "^1.10.0",
|
||||
"webpack-hot-middleware": "^2.18.0",
|
||||
"webpack-merge": "^4.1.0"
|
||||
"webpack-merge": "^4.1.0",
|
||||
"svg-inline-loader": "^0.8.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.0.0",
|
||||
|
|
|
|||
18
src/App.vue
18
src/App.vue
|
|
@ -1,14 +1,12 @@
|
|||
<template>
|
||||
<v-app toolbar>
|
||||
<NavigationDrawer :isDrawerVisible="isDrawerVisible"/>
|
||||
<v-toolbar class="indigo" dark>
|
||||
<v-app toolbar :style="{ backgroundColor: backgroundColor }">
|
||||
<NavigationDrawer v-model="isDrawerVisible"/>
|
||||
<v-toolbar dark>
|
||||
<v-toolbar-side-icon @click.stop="showHideDrawer"></v-toolbar-side-icon>
|
||||
<v-toolbar-title>{{ title }}</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<main>
|
||||
<v-container fluid>
|
||||
<router-view></router-view>
|
||||
</v-container>
|
||||
<router-view></router-view>
|
||||
</main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
|
@ -22,7 +20,10 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
title() {
|
||||
return this.$store.getters.title;
|
||||
return this.$store.getters.layout.title;
|
||||
},
|
||||
backgroundColor() {
|
||||
return this.$store.getters.layout.backgroundColor;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
|
@ -37,6 +38,3 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
<svg enable-background="new 0 0 231.488 163.551" version="1.1" viewBox="0 0 231.488 163.551" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
|
||||
<path d="M21,144v-144m4,144v-144m6,133.2v-133.2" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.7"/>
|
||||
<line fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3.7" x1="38" x2="38" y1="133.2" y2="0"/>
|
||||
<line fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="7.7" x1="46" x2="46" y1="133.2" y2="0"/>
|
||||
<line fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.7" x1="53" x2="53" y1="133.2" y2="0"/>
|
||||
<line fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="5.7" x1="61" x2="61" y1="133.2" y2="0"/>
|
||||
<line fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.7" x1="67" x2="67" y1="133.2" y2="0"/>
|
||||
<line fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3.7" x1="72" x2="72" y1="133.2" y2="0"/>
|
||||
<path d="M81,133.2v-133.2m10,133.2v-133.2m4,133.2v-133.2m6,133.2v-133.2m8,133.2v-133.2m4,144v-144m4,144v-144m4,133.2v-133.2m6,133.2v-133.2" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.7"/>
|
||||
<line fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="5.7" x1="137" x2="137" y1="133.2" y2="0"/>
|
||||
<line fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.7" x1="143" x2="143" y1="133.2" y2="0"/>
|
||||
<line fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="5.7" x1="151" x2="151" y1="133.2" y2="0"/>
|
||||
<line fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.7" x1="159" x2="159" y1="133.2" y2="0"/>
|
||||
<path d="M164,133.2v-133.2m8,133.2v-133.2m6,133.2v-133.2m6,133.2v-133.2" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3.7"/>
|
||||
<path d="M191,133.2v-133.2m6,133.2v-133.2m8,144v-144m4,144v-144" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.7"/>
|
||||
<path d="M2.297,140.12v-1.617c1.523-0.148,2.586-0.396,3.188-0.744s1.051-1.17,1.348-2.467h1.664v16.711h-2.25v-11.883h-3.950z" fill="#1F1E21"/>
|
||||
<path d="M29.646,148.23c0.52-1.07,1.533-2.043,3.041-2.918l2.25-1.301c1.008-0.586,1.715-1.086,2.121-1.501,0.641-0.65,0.961-1.394,0.961-2.231,0-0.979-0.293-1.755-0.879-2.33s-1.367-0.863-2.344-0.863c-1.445,0-2.445,0.549-3,1.646-0.297,0.588-0.461,1.402-0.492,2.444h-2.144c0.023-1.461,0.293-2.652,0.809-3.574,0.914-1.625,2.527-2.438,4.84-2.438,1.922,0,3.326,0.52,4.213,1.559s1.33,2.195,1.33,3.469c0,1.344-0.473,2.492-1.418,3.445-0.547,0.555-1.527,1.227-2.941,2.016l-1.605,0.891c-0.766,0.422-1.367,0.824-1.805,1.207-0.781,0.68-1.273,1.434-1.477,2.262h9.164v1.992h-11.520c0.078-1.45,0.377-2.71,0.896-3.78z" fill="#1F1E21"/>
|
||||
<path d="M43.912,150.83c-0.895-1.09-1.342-2.416-1.342-3.979h2.203c0.094,1.086,0.297,1.875,0.609,2.367,0.547,0.883,1.535,1.324,2.965,1.324,1.109,0,2-0.297,2.672-0.891s1.008-1.359,1.008-2.297c0-1.156-0.354-1.965-1.061-2.426s-1.689-0.691-2.947-0.691c-0.141,0-0.283,0.002-0.428,0.006s-0.291,0.01-0.439,0.018v-1.863c0.219,0.023,0.402,0.039,0.551,0.047s0.309,0.012,0.48,0.012c0.789,0,1.438-0.125,1.945-0.375,0.891-0.438,1.336-1.219,1.336-2.344,0-0.836-0.297-1.48-0.891-1.934s-1.285-0.68-2.074-0.68c-1.406,0-2.379,0.469-2.918,1.406-0.297,0.516-0.465,1.25-0.504,2.203h-2.086c0-1.25,0.25-2.312,0.75-3.188,0.859-1.562,2.371-2.344,4.535-2.344,1.711,0,3.035,0.381,3.973,1.143s1.406,1.865,1.406,3.311c0,1.031-0.277,1.867-0.832,2.508-0.344,0.398-0.789,0.711-1.336,0.938,0.883,0.242,1.572,0.709,2.068,1.4s0.744,1.537,0.744,2.537c0,1.602-0.527,2.906-1.582,3.914s-2.551,1.512-4.488,1.512c-1.983-0.01-3.423-0.55-4.317-1.64z" fill="#1F1E21"/>
|
||||
<path d="M63.96,152.01v-4.102h-7.359v-2.062l7.688-10.664h1.781v10.887h2.473v1.84h-2.473v4.102h-2.110zm-0.035-5.94v-7.622l-5.379,7.622h5.379z" fill="#1F1E21"/>
|
||||
<path d="M72.952,147.73c0.141,1.203,0.699,2.035,1.676,2.496,0.5,0.234,1.078,0.352,1.734,0.352,1.25,0,2.176-0.398,2.777-1.195s0.902-1.68,0.902-2.648c0-1.172-0.357-2.078-1.072-2.719s-1.572-0.961-2.572-0.961c-0.727,0-1.35,0.141-1.869,0.422s-0.963,0.672-1.33,1.172l-1.828-0.105,1.278-9.035h8.718v2.039h-7.137l-0.715,4.664c0.391-0.297,0.762-0.52,1.113-0.668,0.625-0.258,1.348-0.387,2.168-0.387,1.539,0,2.844,0.496,3.914,1.488s1.605,2.25,1.605,3.773c0,1.586-0.49,2.984-1.471,4.195s-2.545,1.816-4.693,1.816c-1.367,0-2.576-0.385-3.627-1.154s-1.639-1.951-1.764-3.545h2.193z" fill="#1F1E21"/>
|
||||
<path d="M94.922,136.62c0.738,0.973,1.107,1.975,1.107,3.006h-2.086c-0.125-0.664-0.324-1.184-0.598-1.559-0.508-0.703-1.277-1.055-2.309-1.055-1.18,0-2.117,0.545-2.812,1.635s-1.082,2.65-1.16,4.682c0.484-0.711,1.094-1.242,1.828-1.594,0.672-0.312,1.422-0.469,2.25-0.469,1.406,0,2.633,0.449,3.68,1.348s1.57,2.238,1.57,4.02c0,1.523-0.496,2.873-1.488,4.049s-2.406,1.764-4.242,1.764c-1.57,0-2.926-0.596-4.066-1.787s-1.711-3.197-1.711-6.018c0-2.086,0.254-3.855,0.762-5.309,0.977-2.781,2.762-4.172,5.355-4.172,1.875-0.01,3.182,0.47,3.920,1.45zm-1.582,12.83c0.551-0.746,0.826-1.627,0.826-2.643,0-0.859-0.246-1.678-0.738-2.455s-1.387-1.166-2.684-1.166c-0.906,0-1.701,0.301-2.385,0.902s-1.025,1.508-1.025,2.719c0,1.062,0.311,1.955,0.932,2.678s1.482,1.084,2.584,1.084c1.109,0,1.939-0.38,2.490-1.12z" fill="#1F1E21"/>
|
||||
<path d="M110.53,135.51v1.84c-0.539,0.523-1.256,1.434-2.15,2.73s-1.686,2.695-2.373,4.195c-0.68,1.461-1.195,2.793-1.547,3.996-0.227,0.773-0.52,2.02-0.879,3.738h-2.332c0.531-3.203,1.703-6.391,3.516-9.562,1.07-1.859,2.195-3.465,3.375-4.816h-9.281v-2.121h11.670z" fill="#1F1E21"/>
|
||||
<path d="M122.28,142.19c-0.617-0.625-0.926-1.438-0.926-2.438,0-1.25,0.452-2.324,1.357-3.223s2.189-1.348,3.852-1.348c1.607,0,2.868,0.424,3.781,1.271,0.912,0.848,1.369,1.838,1.369,2.971,0,1.047-0.266,1.895-0.796,2.543-0.297,0.367-0.758,0.727-1.383,1.078,0.698,0.32,1.247,0.688,1.647,1.102,0.744,0.781,1.117,1.797,1.117,3.047,0,1.477-0.496,2.729-1.488,3.756s-2.395,1.541-4.207,1.541c-1.633,0-3.014-0.443-4.143-1.33s-1.693-2.174-1.693-3.861c0-0.992,0.242-1.85,0.727-2.572s1.203-1.275,2.156-1.658c-0.59-0.25-1.05-0.55-1.38-0.88zm6.81,7.59c0.645-0.527,0.967-1.314,0.967-2.361,0-1.086-0.332-1.91-0.996-2.473s-1.516-0.844-2.555-0.844c-1.008,0-1.83,0.287-2.467,0.861s-0.955,1.369-0.955,2.385c0,0.875,0.291,1.631,0.873,2.268s1.482,0.955,2.701,0.955c0.98-0.01,1.79-0.28,2.44-0.80zm-0.39-8.30c0.521-0.521,0.783-1.141,0.783-1.861,0-0.626-0.25-1.202-0.748-1.727-0.5-0.524-1.26-0.787-2.281-0.787-1.014,0-1.746,0.263-2.199,0.787-0.452,0.524-0.678,1.14-0.678,1.844,0,0.791,0.292,1.409,0.877,1.855,0.585,0.447,1.275,0.67,2.07,0.67,0.93,0.01,1.66-0.25,2.18-0.77z" fill="#1F1E21"/>
|
||||
<path d="M137.18,147.94c0.062,1.164,0.512,1.969,1.348,2.414,0.43,0.234,0.914,0.352,1.453,0.352,1.008,0,1.867-0.42,2.578-1.26s1.215-2.545,1.512-5.115c-0.469,0.742-1.049,1.264-1.74,1.564s-1.436,0.451-2.232,0.451c-1.617,0-2.896-0.503-3.838-1.51s-1.412-2.303-1.412-3.887c0-1.521,0.465-2.86,1.395-4.016s2.301-1.732,4.113-1.732c2.445,0,4.133,1.101,5.062,3.303,0.516,1.21,0.773,2.725,0.773,4.544,0,2.053-0.309,3.872-0.926,5.457-1.023,2.639-2.758,3.958-5.203,3.958-1.641,0-2.887-0.43-3.738-1.289s-1.277-1.938-1.277-3.234h2.154zm5.49-4.27c0.691-0.55,1.037-1.511,1.037-2.884,0-1.232-0.311-2.15-0.932-2.756-0.621-0.604-1.412-0.906-2.373-0.906-1.031,0-1.85,0.345-2.455,1.035s-0.908,1.613-0.908,2.768c0,1.092,0.266,1.96,0.797,2.604s1.379,0.965,2.543,0.965c0.83,0,1.59-0.28,2.28-0.83z" fill="#1F1E21"/>
|
||||
<path d="M159.19,137.91c0.75,1.383,1.125,3.277,1.125,5.684,0,2.281-0.34,4.168-1.02,5.66-0.984,2.141-2.594,3.211-4.828,3.211-2.016,0-3.516-0.875-4.5-2.625-0.82-1.461-1.23-3.422-1.23-5.883,0-1.906,0.246-3.543,0.738-4.91,0.922-2.547,2.59-3.82,5.004-3.82,2.18,0,3.75,0.89,4.71,2.68zm-2.12,11.18c0.649-0.969,0.975-2.773,0.975-5.414,0-1.906-0.235-3.475-0.704-4.705-0.47-1.23-1.382-1.846-2.735-1.846-1.244,0-2.154,0.584-2.729,1.752-0.576,1.168-0.863,2.889-0.863,5.162,0,1.711,0.184,3.086,0.552,4.125,0.563,1.586,1.526,2.379,2.888,2.379,1.10,0,1.97-0.48,2.62-1.45z" fill="#1F1E21"/>
|
||||
<path d="M164.28,140.12v-1.617c1.523-0.148,2.586-0.396,3.188-0.744s1.051-1.17,1.348-2.467h1.664v16.711h-2.25v-11.883h-3.946z" fill="#1F1E21"/>
|
||||
<path d="M177.63,148.23c0.52-1.07,1.533-2.043,3.041-2.918l2.25-1.301c1.008-0.586,1.715-1.086,2.121-1.501,0.641-0.65,0.961-1.394,0.961-2.231,0-0.979-0.293-1.755-0.879-2.33s-1.367-0.863-2.344-0.863c-1.445,0-2.445,0.549-3,1.646-0.297,0.588-0.461,1.402-0.492,2.444h-2.145c0.023-1.461,0.293-2.652,0.809-3.574,0.914-1.625,2.527-2.438,4.84-2.438,1.922,0,3.326,0.52,4.213,1.559s1.33,2.195,1.33,3.469c0,1.344-0.473,2.492-1.418,3.445-0.547,0.555-1.527,1.227-2.941,2.016l-1.605,0.891c-0.766,0.422-1.367,0.824-1.805,1.207-0.781,0.68-1.273,1.434-1.477,2.262h9.164v1.992h-11.52c0.09-1.45,0.39-2.71,0.91-3.78z" fill="#1F1E21"/>
|
||||
<path d="M192.26,142.19c-0.617-0.625-0.926-1.438-0.926-2.438,0-1.25,0.452-2.324,1.357-3.223s2.189-1.348,3.852-1.348c1.607,0,2.868,0.424,3.781,1.271,0.912,0.848,1.369,1.838,1.369,2.971,0,1.047-0.266,1.895-0.796,2.543-0.297,0.367-0.758,0.727-1.383,1.078,0.698,0.32,1.247,0.688,1.647,1.102,0.744,0.781,1.117,1.797,1.117,3.047,0,1.477-0.496,2.729-1.488,3.756s-2.395,1.541-4.207,1.541c-1.633,0-3.014-0.443-4.143-1.33s-1.693-2.174-1.693-3.861c0-0.992,0.242-1.85,0.727-2.572s1.203-1.275,2.156-1.658c-0.59-0.25-1.05-0.55-1.38-0.88zm6.81,7.59c0.645-0.527,0.967-1.314,0.967-2.361,0-1.086-0.332-1.91-0.996-2.473s-1.516-0.844-2.555-0.844c-1.008,0-1.83,0.287-2.467,0.861s-0.955,1.369-0.955,2.385c0,0.875,0.291,1.631,0.873,2.268s1.482,0.955,2.701,0.955c0.98-0.01,1.79-0.28,2.44-0.80zm-0.39-8.30c0.521-0.521,0.783-1.141,0.783-1.861,0-0.626-0.25-1.202-0.748-1.727-0.5-0.524-1.26-0.787-2.281-0.787-1.014,0-1.746,0.263-2.199,0.787-0.452,0.524-0.678,1.14-0.678,1.844,0,0.791,0.292,1.409,0.877,1.855,0.585,0.447,1.275,0.67,2.07,0.67,0.93,0.01,1.65-0.25,2.18-0.77z" fill="#1F1E21"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.5 KiB |
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<div class="barcode-icon" v-html="BarcodeSVG"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BarcodeSVG from '@/assets/barcode.svg';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
BarcodeSVG,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.barcode-icon >>> line, .barcode-icon >>> path, .barcode-icon >>> polyline {
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
.barcode-icon >>> path {
|
||||
fill: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
persistent
|
||||
clipped
|
||||
enable-resize-watcher
|
||||
v-model="isDrawerVisible"
|
||||
v-model="isActive"
|
||||
>
|
||||
<v-list>
|
||||
<v-list-tile :to="{ name: 'Home' }" exact>
|
||||
|
|
@ -43,9 +43,23 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* TODO: Do not open drawer on route change.
|
||||
* TODO: Should stick to the toolbar on xs screens. Should be fixed by Vuetify 0.16.
|
||||
*/
|
||||
export default {
|
||||
props: {
|
||||
isDrawerVisible: Boolean,
|
||||
value: Boolean,
|
||||
},
|
||||
computed: {
|
||||
isActive: {
|
||||
get() {
|
||||
return this.value;
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
export default {
|
||||
APP_NAME: 'InFood',
|
||||
APP_DEFAULT_BACKGROUND_COLOR: '#FFCA28',
|
||||
};
|
||||
|
|
@ -14,4 +14,7 @@ export default {
|
|||
setTitle({ commit }, { title }) {
|
||||
commit(types.SET_TITLE, { title });
|
||||
},
|
||||
setBackgroundColor({ commit }, { backgroundColor }) {
|
||||
commit(types.SET_BACKGROUND_COLOR, { backgroundColor });
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
export default {
|
||||
product: state => state.product,
|
||||
isLoading: state => state.isLoading,
|
||||
title: state => state.title,
|
||||
layout: state => state.layout,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
export const IS_LOADING = 'IS_LOADING';
|
||||
export const STORE_PRODUCT = 'STORE_PRODUCT';
|
||||
export const SET_TITLE = 'SET_TITLE';
|
||||
export const SET_BACKGROUND_COLOR = 'SET_BACKGROUND_COLOR';
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
import constants from '@/constants';
|
||||
import * as types from './mutations-types';
|
||||
|
||||
export const initialState = {
|
||||
product: null,
|
||||
isLoading: false,
|
||||
title: 'Food scanning',
|
||||
layout: {
|
||||
title: constants.APP_NAME,
|
||||
backgroundColor: constants.APP_DEFAULT_BACKGROUND_COLOR,
|
||||
},
|
||||
};
|
||||
|
||||
export const mutations = {
|
||||
|
|
@ -15,6 +19,9 @@ export const mutations = {
|
|||
state.isLoading = true;
|
||||
},
|
||||
[types.SET_TITLE](state, { title }) {
|
||||
state.title = title;
|
||||
state.layout.title = title;
|
||||
},
|
||||
[types.SET_BACKGROUND_COLOR](state, { backgroundColor }) {
|
||||
state.layout.backgroundColor = backgroundColor;
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,23 +1,71 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2>Let's start scanning!</h2>
|
||||
<v-btn
|
||||
dark
|
||||
fab
|
||||
fixed
|
||||
bottom
|
||||
right
|
||||
class="pink"
|
||||
>
|
||||
<v-icon>search</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<v-container fluid layout wrap grid-list-lg class="home-panel">
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12>
|
||||
<v-layout row>
|
||||
<v-flex xs12>
|
||||
<h2 class="text-xs-center display-3 home-title">
|
||||
What's in<br/>
|
||||
<strong>my</strong></br/>
|
||||
food?
|
||||
</h2>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-layout row align-baseline> <!-- Should be pushed to bottom -->
|
||||
<v-flex xs4 class="text-xs-center">
|
||||
<v-btn
|
||||
fab
|
||||
large
|
||||
class="white"
|
||||
:to="{ name: 'Scan' }"
|
||||
>
|
||||
<v-icon>camera_alt</v-icon>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs4 class="text-xs-center">
|
||||
<p class="body-2 home-or">or</p>
|
||||
</v-flex>
|
||||
<v-flex xs4 class="text-xs-center">
|
||||
<v-btn
|
||||
fab
|
||||
large
|
||||
class="white"
|
||||
:to="{ name: 'ManualBarcode' }"
|
||||
>
|
||||
<v-icon>keyboard</v-icon>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import constants from '@/constants';
|
||||
|
||||
export default {
|
||||
created() {
|
||||
this.$store.dispatch('setTitle', { title: 'Food scanning' });
|
||||
this.$store.dispatch('setTitle', { title: constants.APP_NAME });
|
||||
this.$store.dispatch('setBackgroundColor', { backgroundColor: constants.APP_DEFAULT_BACKGROUND_COLOR });
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-panel {
|
||||
color: white;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
|
||||
}
|
||||
|
||||
.home-title {
|
||||
font-size: 64px !important;
|
||||
}
|
||||
|
||||
.home-or {
|
||||
font-size: 24px !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,61 @@
|
|||
<template>
|
||||
<v-form v-model="valid" ref="form">
|
||||
<v-text-field
|
||||
label="EAN13 barcode"
|
||||
v-model="ean13"
|
||||
:rules="ean13Rules"
|
||||
:counter="13"
|
||||
type="number"
|
||||
required
|
||||
></v-text-field>
|
||||
<p class="text-xs-right">
|
||||
<v-btn @click="submit" :disabled="!valid" :class="{ green: valid }">Find</v-btn>
|
||||
</p>
|
||||
</v-form>
|
||||
<v-container fluid layout wrap class="manualbarcode-panel">
|
||||
<v-layout row>
|
||||
<h2 class="headline text-xs-center">Which barcode are you looking for?</h2>
|
||||
</v-layout>
|
||||
|
||||
<v-layout row class="mt-4">
|
||||
<v-flex xs12>
|
||||
<BarcodeIcon />
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
<v-layout row>
|
||||
<v-form class="form" v-model="valid" ref="form">
|
||||
<v-container fluid grid-list-xs>
|
||||
<v-layout row wrap align-baseline>
|
||||
<v-flex xs9>
|
||||
<v-text-field
|
||||
label="EAN13 barcode"
|
||||
placeholder="1234567890128"
|
||||
v-model="ean13"
|
||||
:rules="ean13Rules"
|
||||
:counter="13"
|
||||
type="number"
|
||||
required
|
||||
dark
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs3>
|
||||
<p class="text-xs-right">
|
||||
<v-btn
|
||||
@click="submit"
|
||||
:disabled="!valid"
|
||||
:class="{ green: valid }"
|
||||
class="no-min-width"
|
||||
dark
|
||||
>
|
||||
Go!
|
||||
</v-btn>
|
||||
</p>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BarcodeIcon from '@/components/BarcodeIcon';
|
||||
|
||||
export default {
|
||||
created() {
|
||||
this.$store.dispatch('setTitle', { title: 'Manual barcode' });
|
||||
this.$store.dispatch('setBackgroundColor', { backgroundColor: '#42A5F5' });
|
||||
},
|
||||
components: {
|
||||
BarcodeIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -38,3 +76,18 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.manualbarcode-panel {
|
||||
color: white;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.no-min-width {
|
||||
min-width: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<p>TODO</p>
|
||||
<v-container fluid>
|
||||
<p>TODO</p>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,52 +1,64 @@
|
|||
<template>
|
||||
<v-flex class="text-xs-center">
|
||||
<template v-if="isLoading">
|
||||
<p>Loading…</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p><img :src="this.product.image_front_small_url"></p>
|
||||
<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-bar class="cyan">
|
||||
<v-tabs-slider class="yellow"></v-tabs-slider>
|
||||
<v-tabs-item href="#tab-overview">Overview</v-tabs-item>
|
||||
<v-tabs-item href="#tab-nutrition">Nutrition</v-tabs-item>
|
||||
<v-tabs-item href="#tab-labels">Labels</v-tabs-item>
|
||||
</v-tabs-bar>
|
||||
</v-tabs>
|
||||
</template>
|
||||
</v-flex>
|
||||
<v-container fluid class="product-panel">
|
||||
<v-flex class="text-xs-center">
|
||||
<template v-if="isLoading">
|
||||
<p>Loading…</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p><img :src="this.product.image_front_small_url"></p>
|
||||
<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>
|
||||
</template>
|
||||
</v-flex>
|
||||
<!-- TODO: Should be pushed to left -->
|
||||
<v-bottom-nav absolute :value="true" class="transparent">
|
||||
<v-btn flat class="teal--text" value="recent">
|
||||
<span>Overview</span>
|
||||
<v-icon>view_list</v-icon>
|
||||
</v-btn>
|
||||
<v-btn flat class="teal--text" value="recent">
|
||||
<span>Nutrition</span>
|
||||
<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>
|
||||
</v-btn>
|
||||
</v-bottom-nav>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
created() {
|
||||
this.$store.dispatch('setTitle', { title: 'Loading' });
|
||||
this.$store.dispatch('setBackgroundColor', { backgroundColor: '#00d400' });
|
||||
this.fetchData();
|
||||
},
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-container fluid>
|
||||
<h2>Let's scan something!</h2>
|
||||
|
||||
<p>Loading scanning app…</p>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue