Added Einkaufszettel
This commit is contained in:
dspwithaheart
parent
a79f453051
commit
da80f5598f
93
src/App.vue
93
src/App.vue
@ -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;
|
||||
|
||||
108
src/components/Dialog.vue
Normal file
108
src/components/Dialog.vue
Normal file
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user