yadavaa81855
/
vue_pwa
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Added Einkaufszettel

master
dspwithaheart 4 years ago
parent
a79f453051
commit
da80f5598f
5 changed files with 270 additions and 52 deletions
Split View Show Diff Stats
  1. 54
    39
      src/App.vue
  2. 108
    0
      src/components/Dialog.vue
  3. 20
    0
      src/store/index.js
  4. 1
    3
      src/views/About.vue
  5. 87
    10
      src/views/Home.vue

+ 54
- 39
src/App.vue View File

@@ -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
- 0
src/components/Dialog.vue View 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>

+ 20
- 0
src/store/index.js View File

@@ -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
- 3
src/views/About.vue View File

@@ -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>

+ 87
- 10
src/views/Home.vue View File

@@ -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>

Write Preview
Loading…
Cancel
Save