dspwithaheart
4 years ago
5 changed files with 270 additions and 52 deletions
+ 54
- 39
src/App.vue
View File
| :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> | ||||
| 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> | |||||
| </v-toolbar-title> --> | |||||
| <span >Bio Einkauszettel</span> | |||||
| </v-toolbar-title> | |||||
| <!-- <v-spacer></v-spacer> | <!-- <v-spacer></v-spacer> | ||||
| <v-btn icon> | <v-btn icon> | ||||
| </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, | ||||
| 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, | ||||
| 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-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: { | computed: { | ||||
| }, | }, | ||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| fuckOff() { | |||||
| alert('fuckOff') | |||||
| addItems() { | |||||
| 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
- 0
src/components/Dialog.vue
View File
| <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
| 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
- 3
src/views/About.vue
View File
| <template> | <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> | </template> |
+ 87
- 10
src/views/Home.vue
View File
| <template> | <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> | </template> | ||||
| <script> | <script> | ||||
| // @ is an alias to /src | |||||
| // import HelloWorld from '@/components/HelloWorld.vue' | |||||
| export default { | 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> | </script> |
Loading…