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"
|
:to="item.href"
|
||||||
>
|
>
|
||||||
<v-list-item-action>
|
<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-action>
|
||||||
<v-list-item-content>
|
<v-list-item-content>
|
||||||
<v-list-item-title>
|
<v-list-item-title>
|
||||||
@ -91,12 +91,12 @@
|
|||||||
dark
|
dark
|
||||||
>
|
>
|
||||||
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||||||
<!-- <v-toolbar-title
|
<v-toolbar-title
|
||||||
style="width: 300px"
|
style="width: 300px"
|
||||||
class="ml-0 pl-4"
|
class="ml-0 pl-4"
|
||||||
>
|
>
|
||||||
<span class="hidden-sm-and-down">Google Contacts</span>
|
<span >Bio Einkauszettel</span>
|
||||||
</v-toolbar-title> -->
|
</v-toolbar-title>
|
||||||
|
|
||||||
<!-- <v-spacer></v-spacer>
|
<!-- <v-spacer></v-spacer>
|
||||||
<v-btn icon>
|
<v-btn icon>
|
||||||
@ -130,14 +130,29 @@
|
|||||||
</v-row>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
</v-content>
|
</v-content>
|
||||||
|
<v-btn
|
||||||
|
bottom
|
||||||
|
color="pink"
|
||||||
|
dark
|
||||||
|
fab
|
||||||
|
fixed
|
||||||
|
right
|
||||||
|
@click="addItems"
|
||||||
|
>
|
||||||
|
<v-icon>mdi-plus</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
|
||||||
|
<Dialog/>
|
||||||
|
|
||||||
|
|
||||||
</v-app>
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import HelloWorld from './components/HelloWorld.vue'
|
import Dialog from './components/Dialog.vue'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
// HelloWorld
|
Dialog
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
source: String,
|
source: String,
|
||||||
@ -145,7 +160,7 @@
|
|||||||
data: () => ({
|
data: () => ({
|
||||||
// App Drawer properties
|
// App Drawer properties
|
||||||
dialog: false,
|
dialog: false,
|
||||||
drawer: null,
|
drawer: false,
|
||||||
right: false,
|
right: false,
|
||||||
permanent: false,
|
permanent: false,
|
||||||
miniVariant: false,
|
miniVariant: false,
|
||||||
@ -154,36 +169,36 @@
|
|||||||
absolute: false,
|
absolute: false,
|
||||||
// Items in the App Drawer
|
// Items in the App Drawer
|
||||||
items: [
|
items: [
|
||||||
{ icon: 'mdi-contacts', text: 'Contacts', href: '/contacts' },
|
// { icon: 'mdi-contacts', text: 'Contacts', href: '/contacts' },
|
||||||
{ icon: 'mdi-history', text: 'Frequently contacted' },
|
// { icon: 'mdi-history', text: 'Frequently contacted' },
|
||||||
{ icon: 'mdi-content-copy', text: 'Duplicates' },
|
// { icon: 'mdi-content-copy', text: 'Duplicates' },
|
||||||
{
|
// {
|
||||||
icon: 'mdi-chevron-up',
|
// icon: 'mdi-chevron-up',
|
||||||
'icon-alt': 'mdi-chevron-down',
|
// 'icon-alt': 'mdi-chevron-down',
|
||||||
text: 'Labels',
|
// text: 'Labels',
|
||||||
model: true,
|
// model: true,
|
||||||
children: [
|
// children: [
|
||||||
{ icon: 'mdi-plus', text: 'Create label' },
|
// { icon: 'mdi-plus', text: 'Create label' },
|
||||||
],
|
// ],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
icon: 'mdi-chevron-up',
|
// icon: 'mdi-chevron-up',
|
||||||
'icon-alt': 'mdi-chevron-down',
|
// 'icon-alt': 'mdi-chevron-down',
|
||||||
text: 'More',
|
// text: 'More',
|
||||||
model: false,
|
// model: false,
|
||||||
children: [
|
// children: [
|
||||||
{ text: 'Import' },
|
// { text: 'Import' },
|
||||||
{ text: 'Export' },
|
// { text: 'Export' },
|
||||||
{ text: 'Print' },
|
// { text: 'Print' },
|
||||||
{ text: 'Undo changes' },
|
// { text: 'Undo changes' },
|
||||||
{ text: 'Other contacts' },
|
// { text: 'Other contacts' },
|
||||||
],
|
// ],
|
||||||
},
|
// },
|
||||||
{ icon: 'mdi-settings', text: 'Settings' },
|
// { icon: 'mdi-settings', text: 'Settings' },
|
||||||
{ icon: 'mdi-message', text: 'Send feedback' },
|
// { icon: 'mdi-message', text: 'Send feedback' },
|
||||||
{ icon: 'mdi-help-circle', text: 'Help' },
|
// { icon: 'mdi-help-circle', text: 'Help' },
|
||||||
{ icon: 'mdi-cellphone-link', text: 'App downloads' },
|
// { icon: 'mdi-cellphone-link', text: 'App downloads' },
|
||||||
{ icon: 'mdi-keyboard', text: 'Go to the old version' },
|
// { icon: 'mdi-keyboard', text: 'Go to the old version' },
|
||||||
],
|
],
|
||||||
}),
|
}),
|
||||||
computed: {
|
computed: {
|
||||||
@ -192,8 +207,8 @@
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
fuckOff() {
|
addItems() {
|
||||||
alert('fuckOff')
|
this.$store.state.dialog = !this.$store.state.dialog
|
||||||
},
|
},
|
||||||
toggleTheme() {
|
toggleTheme() {
|
||||||
this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
|
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({
|
export default new Vuex.Store({
|
||||||
state: {
|
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: {
|
mutations: {
|
||||||
|
appendItem(store, item) {
|
||||||
|
store.items.push(item)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,5 +1,3 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="about">
|
<iframe frameborder="0" style="width:100%;height:100%" src="https://vuetifyjs.com"></iframe>
|
||||||
<h1>This is an about page</h1>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,17 +1,94 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home">
|
<v-container>
|
||||||
<img alt="Vue logo" src="../assets/logo.png">
|
<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>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// @ is an alias to /src
|
|
||||||
// import HelloWorld from '@/components/HelloWorld.vue'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Home',
|
name: "Home",
|
||||||
components: {
|
computed: {
|
||||||
// HelloWorld
|
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>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user