├── .babelrc
├── .gitignore
├── Components
    ├── MenuPlan.vue
    ├── RecipeData.vue
    └── Recipes.vue
├── Dockerfile
├── README.md
├── docker-compose.yml
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── App.vue
    └── main.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["env", { "modules": false }]
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | npm-debug.log
 5 | yarn-error.log
 6 | 
 7 | # Editor directories and files
 8 | .idea
 9 | *.suo
10 | *.ntvs*
11 | *.njsproj
12 | *.sln
13 | 


--------------------------------------------------------------------------------
/Components/MenuPlan.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h4>Menu Plan</h4>
 4 |         <v-container grid-list-md>
 5 |             <v-layout row wrap>
 6 |                 <v-flex md6 v-for="(value, key) in days">
 7 |                     <v-card class="ma-2 pa-2">
 8 |                         <draggable :id="key" v-model="recipes" :options="{group:'recipes'}" @start="drag=true" 
 9 |                             @end="drag=false" @add="newRecipe">
10 |                             <v-card-title class="headline"> 
11 |                                 {{ capLetter(key) }}
12 |                             </v-card-title>
13 |                         </draggable>
14 |                         <v-card v-for="recipe in value">
15 |                             <v-card-title class="headline"> 
16 |                                 {{ recipe[0].title }}
17 |                             </v-card-title>
18 |                         </v-card>
19 |                     </v-card>
20 |                 </v-flex>
21 |             </v-layout>
22 |         </v-container>
23 |         
24 |     </div>
25 | </template>
26 | 
27 | <script>
28 |     import { eventBus } from '../src/main.js';
29 |     import draggable from 'vuedraggable';
30 | 
31 |     export default {
32 |         data: () => {
33 |             return {
34 |                 recipes: [],
35 |                 days: {
36 |                     sunday: [],
37 |                     monday: [],
38 |                     tuesday: [],
39 |                     wednesday: [],
40 |                     thursday: [],
41 |                     friday: [],
42 |                     saturday: []
43 |                 }
44 |             }
45 |         },
46 |         components: {
47 |             draggable
48 |         },
49 |         created () {
50 |             eventBus.$on('sendingRecipe', recipeData => {
51 |                 // Ex: {"day":"thursday","recipe":{"id":4,"title":"Sesame Pork Noodle"}}
52 |                 this.days[recipeData.day].push(recipeData.recipe)
53 |             });
54 |         },
55 |         methods: {
56 |             removeRecipe: function (id) {
57 |                 this.recipes = this.recipes.filter (function (recipe) {
58 |                     return recipe.id != id;
59 |                 });
60 |             },
61 |             capLetter: function (input) {
62 |                 return input.charAt(0).toUpperCase() + input.slice(1);
63 |             },
64 |             // this is called when a new recipe is dropped into a day
65 |             newRecipe: function (event) {
66 |                 // console.log('newRecipe ' + event.to.id);
67 |                 eventBus.$emit('daySelected', event.to.id);
68 |             }
69 |         }
70 |     }
71 | </script>
72 | 
73 | 


--------------------------------------------------------------------------------
/Components/RecipeData.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |     data () {
 8 |         return {
 9 |             1: 'Chicken Tacos',
10 |             2: ' Thai Larb',
11 |             3: 'Texas Spaghetti',
12 |             4: 'Sesame Pork Noodle',
13 |             5: 'Rosemary Orange Chicken'
14 |         }
15 |     }
16 | }
17 | 
18 | </script>
19 | 


--------------------------------------------------------------------------------
/Components/Recipes.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <v-card>
  4 |             <v-btn absolute dark fab top right color="pink"
  5 |                 @click=toggleNewRecipeCard()>
  6 |                 <v-icon>add</v-icon>
  7 |             </v-btn>
  8 |             <v-card-text v-show="newRecipeCard">
  9 |                 <h4>New Recipe</h4>
 10 |                 <v-text-field
 11 |                     id="recipe-input"
 12 |                     name="recipe-input"
 13 |                     label="Recipe name"
 14 |                 ></v-text-field>
 15 |                 <v-btn color="primary" @click=inputRecipe()>Add Recipe</v-btn>
 16 |             </v-card-text>
 17 |         </v-card>
 18 |         <h4>Recipes</h4>
 19 |         <v-container grid-list-md>
 20 |             <v-layout row wrap>
 21 |                 <v-flex md6 v-for="(recipe, key) in recipes">
 22 |                     <draggable :id="key" v-model="recipes" :options="{group: { name:'recipes', pull:'clone', put:'false'}}" @start="drag=true" 
 23 |                         @end="drag=false" :move="chooseRecipe">
 24 |                         <v-card class="ma-2 pa-2">
 25 |                         <v-card-title>
 26 |                             <div class="headline">{{ recipe.title }}</div>
 27 |                         </v-card-title>
 28 |                         </v-card>
 29 |                     </draggable>
 30 |                 </v-flex>
 31 |             </v-layout>
 32 |         </v-container>
 33 |     </div>
 34 | </template>
 35 | 
 36 | <script>
 37 |     import { eventBus } from '../src/main.js';
 38 |     import draggable from 'vuedraggable';
 39 | 
 40 |     export default {
 41 |         data: () => {
 42 |             return {
 43 |                 recipes: [
 44 |                     { id: 0, title: 'Chicken Tacos' },
 45 |                     { id: 1, title: 'Thai Larb' },
 46 |                     { id: 2, title: 'Texas Spaghetti' },
 47 |                     { id: 3, title: 'Sesame Pork Noodle' },
 48 |                     { id: 4, title: 'Rosemary Chicken' },
 49 |                     { id: 5, title: 'Asian Fish Dish' },
 50 |                     { id: 6, title: 'Spaghetti and Meatballs' },
 51 |                     { id: 7, title: 'Nachos' },
 52 |                     { id: 8, title: 'Chicken Enchiladas' },
 53 |                     { id: 9, title: 'Asian Beef Stir-fry' }
 54 |                 ],
 55 |                 targetRecipe: '',
 56 |                 targetDay: '',
 57 |                 newRecipeCard: false
 58 |             }
 59 |         },
 60 |         components: {
 61 |             draggable
 62 |         },
 63 |         created () {
 64 |             eventBus.$on('daySelected', day => {
 65 |                 this.targetDay = day
 66 |                 // console.log('daySelected ' + this.targetRecipe)
 67 |                 this.sendRecipeData(this.targetRecipe);
 68 |             });
 69 |         },
 70 |         methods: {
 71 |             // this starts the recipe drag and drop process
 72 |             chooseRecipe: function (event) {
 73 |                 // console.log('chooseRecipe ' + event.from.id);
 74 |                 this.targetRecipe = event.from.id;
 75 |             },
 76 |             sendRecipeData: function (id) {
 77 |                 // console.log('id ' + id)
 78 |                 var myRecipe = this.recipes.filter(function (recipe) {
 79 |                     return recipe.id == id;
 80 |                 });
 81 |                 var recipeData = {
 82 |                     day: this.targetDay,
 83 |                     recipe: myRecipe
 84 |                 }
 85 |                 eventBus.$emit('sendingRecipe', recipeData);
 86 |             },
 87 |             inputRecipe: function () {
 88 |                 var elem = document.getElementById('recipe-input');
 89 |                 var recipeId = this.recipes.length;
 90 |                 console.log("id: " + recipeId)
 91 |                 console.log("value: " + elem.value);
 92 |                 this.recipes.push({ id:recipeId, title: elem.value });
 93 |                 
 94 |             },
 95 |             toggleNewRecipeCard: function () {
 96 |                 console.log('click')
 97 |                 this.newRecipeCard = !this.newRecipeCard;
 98 |             }
 99 |         }
100 |     }
101 | </script>
102 | 
103 | <style>
104 |  
105 | </style>
106 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM node:9
2 | 
3 | WORKDIR /usr/app
4 | 
5 | COPY ./package.json .
6 | RUN npm install --quiet
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-recipes
 2 | 
 3 | > A Vue.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ##### With docker
 8 | 
 9 | ```bash
10 | docker-compose up
11 | 
12 | docker-compose down
13 | ```
14 | 
15 | ##### With npm
16 | 
17 | ``` bash
18 | # install dependencies
19 | npm install
20 | 
21 | # serve with hot reload at localhost:8080
22 | npm run dev
23 | 
24 | # build for production with minification
25 | npm run build
26 | ```
27 | 
28 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
29 | 


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | version: "2"
 2 | services:
 3 |   node:
 4 |     build: ./
 5 |     command: npm run docker
 6 |     volumes:
 7 |       - .:/usr/app/
 8 |       - ./node_modules:/usr/app/node_modules
 9 |     ports:
10 |       - "80:80"
11 |     environment:
12 |       - NODE_ENV=production
13 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>vue-recipes</title>
 6 |     <link rel='stylesheet' href='../node_modules/vuetify/dist/vuetify.min.css'>
 7 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
 8 |     rel="stylesheet">
 9 |   </head>
10 |   <body>
11 |     <div id="app"></div>
12 |     <script src="/dist/build.js"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-recipes",
 3 |   "description": "A Vue.js project",
 4 |   "version": "1.0.0",
 5 |   "author": "John P <john.pickett@gmail.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
 9 |     "docker": "cross-env NODE_ENV=development webpack-dev-server --hot --host 0.0.0.0 --port 80",
10 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
11 |   },
12 |   "dependencies": {
13 |     "vue": "^2.4.4",
14 |     "vuedraggable": "^2.14.1",
15 |     "vuetify": "^1.1.4"
16 |   },
17 |   "devDependencies": {
18 |     "babel-core": "^6.26.0",
19 |     "babel-loader": "^7.1.2",
20 |     "babel-preset-env": "^1.6.0",
21 |     "cross-env": "^5.2.0",
22 |     "css-loader": "^0.28.7",
23 |     "file-loader": "^1.1.4",
24 |     "vue-loader": "^13.0.5",
25 |     "vue-template-compiler": "^2.4.4",
26 |     "webpack": "^3.6.0",
27 |     "webpack-dev-server": "^2.9.1"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app id="inspire">
 3 |     <v-navigation-drawer
 4 |       persistent
 5 |       v-model="drawer"
 6 |       app
 7 |     >
 8 |       <v-list dense>
 9 |         <v-list-tile @click="">
10 |           <v-list-tile-action>
11 |             <v-icon>home</v-icon>
12 |           </v-list-tile-action>
13 |           <v-list-tile-content>
14 |             <v-list-tile-title>Home</v-list-tile-title>
15 |           </v-list-tile-content>
16 |         </v-list-tile>
17 |         <v-list-tile @click="">
18 |           <v-list-tile-action>
19 |             <v-icon>contact_mail</v-icon>
20 |           </v-list-tile-action>
21 |           <v-list-tile-content>
22 |             <v-list-tile-title>Contact</v-list-tile-title>
23 |           </v-list-tile-content>
24 |         </v-list-tile>
25 |       </v-list>
26 |     </v-navigation-drawer>
27 |     <v-toolbar color="indigo" dark fixed app>
28 |       <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
29 |       <v-toolbar-title>Recipes</v-toolbar-title>
30 |     </v-toolbar>
31 |     <main>
32 |       <v-content>
33 |         <v-container fluid fill-height>
34 |           <v-layout>
35 |             <v-card id="recipes-card" class="ma-2 pa-2" height="100%">
36 |               <recipecomp></recipecomp>
37 |             </v-card>
38 |             <v-card id="menu-plan-card" class="ma-2 pa-2" height="100%">
39 |               <menuplan></menuplan>
40 |             </v-card>
41 |           </v-layout>
42 |         </v-container>
43 |       </v-content>
44 |     </main>
45 |     <v-footer color="indigo" app>
46 |       <span class="white--text">&copy; 2017</span>
47 |     </v-footer>
48 |   </v-app>
49 | </template>
50 | 
51 | <script>
52 |   import draggable from 'vuedraggable'
53 |   import Recipes from '../Components/Recipes.vue'
54 |   import MenuPlan from '../Components/MenuPlan.vue'
55 | 
56 |   export default {
57 |     data: () => ({
58 |       drawer: false
59 |     }),
60 |     props: {
61 |       source: String
62 |     },
63 |     components: {
64 |       draggable,
65 |       recipecomp: Recipes,
66 |       menuplan: MenuPlan
67 |   },
68 |   }
69 | </script>
70 | 
71 | <style>
72 |   #recipes-card {
73 |     min-height: 600px;
74 |     width: 50%;
75 |   }
76 | 
77 |    #menu-plan-card {
78 |      min-height: 600px;
79 |      width: 50%;
80 |    }
81 | </style>
82 | 
83 | 
84 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuetify from 'vuetify'
 3 | import draggable from 'vuedraggable'
 4 | 
 5 | Vue.use(Vuetify)
 6 | import App from './App.vue'
 7 | 
 8 | export const eventBus = new Vue();
 9 | 
10 | new Vue({
11 |   el: '#app',
12 |   render: h => h(App)
13 | })
14 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/main.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, './dist'),
 8 |     publicPath: '/dist/',
 9 |     filename: 'build.js'
10 |   },
11 |   module: {
12 |     rules: [
13 |       {
14 |         test: /\.vue$/,
15 |         loader: 'vue-loader',
16 |         options: {
17 |           loaders: {
18 |           }
19 |           // other vue-loader options go here
20 |         }
21 |       },
22 |       {
23 |         test: /\.js$/,
24 |         loader: 'babel-loader',
25 |         exclude: /node_modules/
26 |       },
27 |       {
28 |         test: /\.(png|jpg|gif|svg)$/,
29 |         loader: 'file-loader',
30 |         options: {
31 |           name: '[name].[ext]?[hash]'
32 |         }
33 |       }
34 |     ]
35 |   },
36 |   resolve: {
37 |     alias: {
38 |       'vue$': 'vue/dist/vue.esm.js'
39 |     }
40 |   },
41 |   devServer: {
42 |     historyApiFallback: true,
43 |     noInfo: true,
44 |     overlay: true
45 |   },
46 |   performance: {
47 |     hints: false
48 |   },
49 |   devtool: '#eval-source-map'
50 | }
51 | 
52 | if (process.env.NODE_ENV === 'production') {
53 |   module.exports.devtool = '#source-map'
54 |   // http://vue-loader.vuejs.org/en/workflow/production.html
55 |   module.exports.plugins = (module.exports.plugins || []).concat([
56 |     new webpack.DefinePlugin({
57 |       'process.env': {
58 |         NODE_ENV: '"production"'
59 |       }
60 |     }),
61 |     new webpack.optimize.UglifyJsPlugin({
62 |       sourceMap: true,
63 |       compress: {
64 |         warnings: false
65 |       }
66 |     }),
67 |     new webpack.LoaderOptionsPlugin({
68 |       minimize: true
69 |     })
70 |   ])
71 | }
72 | 


--------------------------------------------------------------------------------