@@ -72,7 +72,7 @@ | |||
:to="item.href" | |||
> | |||
<v-list-item-action> | |||
<v-icon @click.stop="fuckOff">{{ item.icon }}</v-icon> | |||
<v-icon >{{ item.icon }}</v-icon> | |||
</v-list-item-action> | |||
<v-list-item-content> | |||
<v-list-item-title> | |||
@@ -91,12 +91,12 @@ | |||
dark | |||
> | |||
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon> | |||
<!-- <v-toolbar-title | |||
<v-toolbar-title | |||
style="width: 300px" | |||
class="ml-0 pl-4" | |||
> | |||
<span class="hidden-sm-and-down">Google Contacts</span> | |||
</v-toolbar-title> --> | |||
<span >Bio Einkauszettel</span> | |||
</v-toolbar-title> | |||
<!-- <v-spacer></v-spacer> | |||
<v-btn icon> | |||
@@ -130,14 +130,29 @@ | |||
</v-row> | |||
</v-container> | |||
</v-content> | |||
<v-btn | |||
bottom | |||
color="pink" | |||
dark | |||
fab | |||
fixed | |||
right | |||
@click="addItems" | |||
> | |||
<v-icon>mdi-plus</v-icon> | |||
</v-btn> | |||
<Dialog/> | |||
</v-app> | |||
</template> | |||
<script> | |||
// import HelloWorld from './components/HelloWorld.vue' | |||
import Dialog from './components/Dialog.vue' | |||
export default { | |||
components: { | |||
// HelloWorld | |||
Dialog | |||
}, | |||
props: { | |||
source: String, | |||
@@ -145,7 +160,7 @@ | |||
data: () => ({ | |||
// App Drawer properties | |||
dialog: false, | |||
drawer: null, | |||
drawer: false, | |||
right: false, | |||
permanent: false, | |||
miniVariant: false, | |||
@@ -154,36 +169,36 @@ | |||
absolute: false, | |||
// Items in the App Drawer | |||
items: [ | |||
{ icon: 'mdi-contacts', text: 'Contacts', href: '/contacts' }, | |||
{ icon: 'mdi-history', text: 'Frequently contacted' }, | |||
{ icon: 'mdi-content-copy', text: 'Duplicates' }, | |||
{ | |||
icon: 'mdi-chevron-up', | |||
'icon-alt': 'mdi-chevron-down', | |||
text: 'Labels', | |||
model: true, | |||
children: [ | |||
{ icon: 'mdi-plus', text: 'Create label' }, | |||
], | |||
}, | |||
{ | |||
icon: 'mdi-chevron-up', | |||
'icon-alt': 'mdi-chevron-down', | |||
text: 'More', | |||
model: false, | |||
children: [ | |||
{ text: 'Import' }, | |||
{ text: 'Export' }, | |||
{ text: 'Print' }, | |||
{ text: 'Undo changes' }, | |||
{ text: 'Other contacts' }, | |||
], | |||
}, | |||
{ icon: 'mdi-settings', text: 'Settings' }, | |||
{ icon: 'mdi-message', text: 'Send feedback' }, | |||
{ icon: 'mdi-help-circle', text: 'Help' }, | |||
{ icon: 'mdi-cellphone-link', text: 'App downloads' }, | |||
{ icon: 'mdi-keyboard', text: 'Go to the old version' }, | |||
// { icon: 'mdi-contacts', text: 'Contacts', href: '/contacts' }, | |||
// { icon: 'mdi-history', text: 'Frequently contacted' }, | |||
// { icon: 'mdi-content-copy', text: 'Duplicates' }, | |||
// { | |||
// icon: 'mdi-chevron-up', | |||
// 'icon-alt': 'mdi-chevron-down', | |||
// text: 'Labels', | |||
// model: true, | |||
// children: [ | |||
// { icon: 'mdi-plus', text: 'Create label' }, | |||
// ], | |||
// }, | |||
// { | |||
// icon: 'mdi-chevron-up', | |||
// 'icon-alt': 'mdi-chevron-down', | |||
// text: 'More', | |||
// model: false, | |||
// children: [ | |||
// { text: 'Import' }, | |||
// { text: 'Export' }, | |||
// { text: 'Print' }, | |||
// { text: 'Undo changes' }, | |||
// { text: 'Other contacts' }, | |||
// ], | |||
// }, | |||
// { icon: 'mdi-settings', text: 'Settings' }, | |||
// { icon: 'mdi-message', text: 'Send feedback' }, | |||
// { icon: 'mdi-help-circle', text: 'Help' }, | |||
// { icon: 'mdi-cellphone-link', text: 'App downloads' }, | |||
// { icon: 'mdi-keyboard', text: 'Go to the old version' }, | |||
], | |||
}), | |||
computed: { | |||
@@ -192,8 +207,8 @@ | |||
}, | |||
}, | |||
methods: { | |||
fuckOff() { | |||
alert('fuckOff') | |||
addItems() { | |||
this.$store.state.dialog = !this.$store.state.dialog | |||
}, | |||
toggleTheme() { | |||
this.$vuetify.theme.dark = !this.$vuetify.theme.dark; |
@@ -0,0 +1,108 @@ | |||
<template> | |||
<v-dialog | |||
v-model="dialog" | |||
width="400px" | |||
> | |||
<v-card> | |||
<v-card-title class="grey darken-2"> | |||
Add Item | |||
</v-card-title> | |||
<v-container> | |||
<v-row class="mx-2"> | |||
<v-col | |||
class="align-center justify-space-between" | |||
cols="12" | |||
> | |||
<v-row | |||
align="center" | |||
class="mr-0" | |||
> | |||
</v-row> | |||
</v-col> | |||
<v-col cols="12"> | |||
<v-text-field | |||
v-model="title" | |||
prepend-icon="mdi-pizza" | |||
placeholder="Item" | |||
></v-text-field> | |||
</v-col> | |||
<v-col cols="12"> | |||
<v-text-field | |||
v-model="amount" | |||
prepend-icon="mdi-hamburger" | |||
placeholder="Amount" | |||
></v-text-field> | |||
</v-col> | |||
<v-col cols="12"> | |||
<v-text-field | |||
v-model="src" | |||
prepend-icon="mdi-image" | |||
placeholder="Image" | |||
></v-text-field> | |||
</v-col> | |||
</v-row> | |||
</v-container> | |||
<v-card-actions align="center"> | |||
<v-spacer></v-spacer> | |||
<v-btn | |||
x-large | |||
color="error" | |||
@click="cancel" | |||
>Cancel</v-btn> | |||
<v-btn | |||
x-large | |||
color="primary" | |||
@click="addItem" | |||
>Add</v-btn> | |||
</v-card-actions> | |||
</v-card> | |||
</v-dialog> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'Dialog', | |||
computed: { | |||
dialog () { | |||
return this.$store.state.dialog | |||
} | |||
}, | |||
data: () => ({ | |||
src: '', | |||
title: '', | |||
amount: '', | |||
// count: this.$store.state.count, | |||
// items: store.state.items, | |||
// items: [ | |||
// { | |||
// color: '#1F7087', | |||
// src: 'https://cdn.vuetifyjs.com/images/cards/foster.jpg', | |||
// title: 'Supermodel', | |||
// artist: 'Foster the People', | |||
// }, | |||
// { | |||
// color: '#952175', | |||
// src: 'https://cdn.vuetifyjs.com/images/cards/halcyon.png', | |||
// title: 'Halcyon Days', | |||
// artist: 'Ellie Goulding', | |||
// }, | |||
// ], | |||
}), | |||
methods: { | |||
addItem() { | |||
var item = { | |||
src: this.src, | |||
title: this.title, | |||
amount: this.amount, | |||
} | |||
this.$store.commit('appendItem', item) | |||
}, | |||
cancel() { | |||
this.$store.state.dialog = false | |||
} | |||
} | |||
} | |||
</script> |
@@ -5,8 +5,28 @@ Vue.use(Vuex) | |||
export default new Vuex.Store({ | |||
state: { | |||
dialog: false, | |||
items: [ | |||
{ | |||
src: 'https://images-na.ssl-images-amazon.com/images/I/81Dl5GdAVkL.png', | |||
title: 'Apple', | |||
amount: '1', | |||
}, | |||
{ | |||
src: 'https://5.imimg.com/data5/PW/ND/MY-46595757/fresh-pineapple-281kg-29-500x500.png', | |||
title: 'Pineapple', | |||
amount: '2', | |||
}, | |||
{ "src": "https://www.thermofisher.com/blog/food/wp-content/uploads/sites/5/2015/08/single_strawberry__isolated_on_a_white_background.jpg", | |||
"title": "Strawberry", | |||
"amount": "5" | |||
} | |||
] | |||
}, | |||
mutations: { | |||
appendItem(store, item) { | |||
store.items.push(item) | |||
} | |||
}, | |||
actions: { | |||
}, |
@@ -1,5 +1,3 @@ | |||
<template> | |||
<div class="about"> | |||
<h1>This is an about page</h1> | |||
</div> | |||
<iframe frameborder="0" style="width:100%;height:100%" src="https://vuetifyjs.com"></iframe> | |||
</template> |
@@ -1,17 +1,94 @@ | |||
<template> | |||
<div class="home"> | |||
<img alt="Vue logo" src="../assets/logo.png"> | |||
</div> | |||
<v-container> | |||
<v-row dense> | |||
<v-col v-for="(item, i) in items" :key="i" cols="12"> | |||
<v-card class="mx-auto my-12" max-width="500"> | |||
<div class="d-flex flex-no-wrap justify-space-between"> | |||
<div> | |||
<v-card-title class="headline" v-text="item.title"></v-card-title> | |||
<v-card-subtitle v-text="item.amount"></v-card-subtitle> | |||
<v-btn class="mx-2" fab dark small color="pink" @click="increment"> | |||
<v-icon>mdi-plus</v-icon> | |||
</v-btn> | |||
<v-btn class="mx-2" fab dark small color="pink" @click="decreament"> | |||
<v-icon>mdi-minus</v-icon> | |||
</v-btn> | |||
</div> | |||
<v-avatar class="ma-3" size="125" tile> | |||
<v-img :src="item.src"></v-img> | |||
</v-avatar> | |||
</div> | |||
<!-- Nutrion Distribution | |||
<v-sparkline | |||
:labels="labels" | |||
:fill="fill" | |||
:gradient="gradient" | |||
:line-width="width" | |||
:padding="padding" | |||
:smooth="radius || false" | |||
:value="value" | |||
auto-draw | |||
style="top: -10px; position:relative" | |||
></v-sparkline>--> | |||
<v-divider class="mx-4"></v-divider> | |||
<v-card-actions> | |||
<v-btn color="deep-purple lighten-2" text @click="reserve">Edit</v-btn> | |||
<v-btn color="deep-purple lighten-2" text @click="reserve">Remove</v-btn> | |||
</v-card-actions> | |||
</v-card> | |||
</v-col> | |||
</v-row> | |||
<!-- //###################################################################################################### --> | |||
</v-container> | |||
</template> | |||
<script> | |||
// @ is an alias to /src | |||
// import HelloWorld from '@/components/HelloWorld.vue' | |||
export default { | |||
name: 'Home', | |||
components: { | |||
// HelloWorld | |||
name: "Home", | |||
computed: { | |||
items() { | |||
return this.$store.state.items; | |||
} | |||
}, | |||
data: () => ({ | |||
gradients: [ | |||
["#222"], | |||
["#42b3f4"], | |||
["red", "orange", "yellow"], | |||
["purple", "violet"], | |||
["#00c6ff", "#F0F", "#FF0"], | |||
["#f72047", "#ffd200", "#1feaea"] | |||
], | |||
fill: false, | |||
gradient: ["#00c6ff", "#F0F", "#FF0"], | |||
radius: 5, | |||
labels: [" ", "Protein", "Fat", "Carbohydrate", "Water", "Vitamins"], | |||
value: [200, 675, 410, 390, 310, 460] | |||
// count: this.$store.state.count, | |||
// items: store.state.items, | |||
// items: [ | |||
// { | |||
// color: '#1F7087', | |||
// src: 'https://cdn.vuetifyjs.com/images/cards/foster.jpg', | |||
// title: 'Supermodel', | |||
// artist: 'Foster the People', | |||
// }, | |||
// { | |||
// color: '#952175', | |||
// src: 'https://cdn.vuetifyjs.com/images/cards/halcyon.png', | |||
// title: 'Halcyon Days', | |||
// artist: 'Ellie Goulding', | |||
// }, | |||
// ], | |||
}), | |||
methods: { | |||
increament() { | |||
this.$store.commit('increament') | |||
}, | |||
decreament() { | |||
this.$store.commit('decreament') | |||
} | |||
} | |||
} | |||
}; | |||
</script> |