'TOW'

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": ["es2015", "stage-2"],
+  "plugins": ["transform-runtime"],
+  "comments": false
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log

README.md

@@ -0,0 +1,18 @@
+# talk-amanha
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+```
+
+For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

build/build.js

@@ -0,0 +1,35 @@
+// https://github.com/shelljs/shelljs
+require('shelljs/global')
+env.NODE_ENV = 'production'
+
+var path = require('path')
+var config = require('../config')
+var ora = require('ora')
+var webpack = require('webpack')
+var webpackConfig = require('./webpack.prod.conf')
+
+console.log(
+  '  Tip:\n' +
+  '  Built files are meant to be served over an HTTP server.\n' +
+  '  Opening index.html over file:// won\'t work.\n'
+)
+
+var spinner = ora('building for production...')
+spinner.start()
+
+var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
+rm('-rf', assetsPath)
+mkdir('-p', assetsPath)
+cp('-R', 'static/*', assetsPath)
+
+webpack(webpackConfig, function (err, stats) {
+  spinner.stop()
+  if (err) throw err
+  process.stdout.write(stats.toString({
+    colors: true,
+    modules: false,
+    children: false,
+    chunks: false,
+    chunkModules: false
+  }) + '\n')
+})

build/dev-client.js

@@ -0,0 +1,9 @@
+/* eslint-disable */
+require('eventsource-polyfill')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+  if (event.action === 'reload') {
+    window.location.reload()
+  }
+})

build/dev-server.js

@@ -0,0 +1,66 @@
+var path = require('path')
+var express = require('express')
+var webpack = require('webpack')
+var config = require('../config')
+var opn = require('opn')
+var proxyMiddleware = require('http-proxy-middleware')
+var webpackConfig = require('./webpack.dev.conf')
+
+// default port where dev server listens for incoming traffic
+var port = process.env.PORT || config.dev.port
+// Define HTTP proxies to your custom API backend
+// https://github.com/chimurai/http-proxy-middleware
+var proxyTable = config.dev.proxyTable
+
+var app = express()
+var compiler = webpack(webpackConfig)
+
+var devMiddleware = require('webpack-dev-middleware')(compiler, {
+  publicPath: webpackConfig.output.publicPath,
+  stats: {
+    colors: true,
+    chunks: false
+  }
+})
+
+var hotMiddleware = require('webpack-hot-middleware')(compiler)
+// force page reload when html-webpack-plugin template changes
+compiler.plugin('compilation', function (compilation) {
+  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+    hotMiddleware.publish({ action: 'reload' })
+    cb()
+  })
+})
+
+// proxy api requests
+Object.keys(proxyTable).forEach(function (context) {
+  var options = proxyTable[context]
+  if (typeof options === 'string') {
+    options = { target: options }
+  }
+  app.use(proxyMiddleware(context, options))
+})
+
+// handle fallback for HTML5 history API
+app.use(require('connect-history-api-fallback')())
+
+// serve webpack bundle output
+app.use(devMiddleware)
+
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(hotMiddleware)
+
+// serve pure static assets
+var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
+app.use(staticPath, express.static('./static'))
+
+module.exports = app.listen(port, function (err) {
+  if (err) {
+    console.log(err)
+    return
+  }
+  var uri = 'http://localhost:' + port
+  console.log('Listening at ' + uri + '\n')
+  opn(uri)
+})

build/utils.js

@@ -0,0 +1,59 @@
+var path = require('path')
+var config = require('../config')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+exports.assetsPath = function (_path) {
+  var assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loaders) {
+    var sourceLoader = loaders.map(function (loader) {
+      var extraParamChar
+      if (/\?/.test(loader)) {
+        loader = loader.replace(/\?/, '-loader?')
+        extraParamChar = '&'
+      } else {
+        loader = loader + '-loader'
+        extraParamChar = '?'
+      }
+      return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
+    }).join('!')
+
+    if (options.extract) {
+      return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
+    } else {
+      return ['vue-style-loader', sourceLoader].join('!')
+    }
+  }
+
+  // http://vuejs.github.io/vue-loader/configurations/extract-css.html
+  return {
+    css: generateLoaders(['css']),
+    postcss: generateLoaders(['css']),
+    less: generateLoaders(['css', 'less']),
+    sass: generateLoaders(['css', 'sass?indentedSyntax']),
+    scss: generateLoaders(['css', 'sass']),
+    stylus: generateLoaders(['css', 'stylus']),
+    styl: generateLoaders(['css', 'stylus'])
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  var output = []
+  var loaders = exports.cssLoaders(options)
+  for (var extension in loaders) {
+    var loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      loader: loader
+    })
+  }
+  return output
+}

build/webpack.base.conf.js

@@ -0,0 +1,70 @@
+var path = require('path')
+var config = require('../config')
+var utils = require('./utils')
+var projectRoot = path.resolve(__dirname, '../')
+
+module.exports = {
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
+    filename: '[name].js'
+  },
+  resolve: {
+    extensions: ['', '.js', '.vue'],
+    fallback: [path.join(__dirname, '../node_modules')],
+    alias: {
+      'vue': 'vue/dist/vue.common.js',
+      'src': path.resolve(__dirname, '../src'),
+      'assets': path.resolve(__dirname, '../src/assets'),
+      'components': path.resolve(__dirname, '../src/components')
+    }
+  },
+  resolveLoader: {
+    fallback: [path.join(__dirname, '../node_modules')]
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel',
+        include: projectRoot,
+        exclude: /node_modules/
+      },
+      {
+        test: /\.json$/,
+        loader: 'json'
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  vue: {
+    loaders: utils.cssLoaders(),
+    postcss: [
+      require('autoprefixer')({
+        browsers: ['last 2 versions']
+      })
+    ]
+  }
+}

build/webpack.dev.conf.js

@@ -0,0 +1,34 @@
+var config = require('../config')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var utils = require('./utils')
+var baseWebpackConfig = require('./webpack.base.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+// add hot-reload related code to entry chunks
+Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
+})
+
+module.exports = merge(baseWebpackConfig, {
+  module: {
+    loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
+  },
+  // eval-source-map is faster for development
+  devtool: '#eval-source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': config.dev.env
+    }),
+    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    })
+  ]
+})

build/webpack.prod.conf.js

@@ -0,0 +1,98 @@
+var path = require('path')
+var config = require('../config')
+var utils = require('./utils')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var env = config.build.env
+
+var webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
+  },
+  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  vue: {
+    loaders: utils.cssLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true
+    })
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    // extract css into its own file
+    new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: function (module, count) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor']
+    })
+  ]
+})
+
+if (config.build.productionGzip) {
+  var CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+module.exports = webpackConfig

config/dev.env.js

@@ -0,0 +1,6 @@
+var merge = require('webpack-merge')
+var prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

config/index.js

@@ -0,0 +1,32 @@
+// see http://vuejs-templates.github.io/webpack for documentation.
+var path = require('path')
+
+module.exports = {
+  build: {
+    env: require('./prod.env'),
+    index: path.resolve(__dirname, '../dist/index.html'),
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    productionSourceMap: true,
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css']
+  },
+  dev: {
+    env: require('./dev.env'),
+    port: 8080,
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+    // CSS Sourcemaps off by default because relative paths are "buggy"
+    // with this option, according to the CSS-Loader README
+    // (https://github.com/webpack/css-loader#sourcemaps)
+    // In our experience, they generally work as expected,
+    // just be aware of this issue when enabling this option.
+    cssSourceMap: false
+  }
+}

config/prod.env.js

@@ -0,0 +1,3 @@
+module.exports = {
+  NODE_ENV: '"production"'
+}

index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>talk-amanha</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "talk-amanha",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "Silvio Greuel <silviogreuel@gmail.com>",
+  "private": true,
+  "scripts": {
+    "dev": "node build/dev-server.js",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "pouchdb": "^6.0.6",
+    "vue": "^2.0.1",
+    "vuex": "^2.0.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.4.0",
+    "babel-core": "^6.0.0",
+    "babel-loader": "^6.0.0",
+    "babel-plugin-transform-runtime": "^6.0.0",
+    "babel-preset-es2015": "^6.0.0",
+    "babel-preset-stage-2": "^6.0.0",
+    "babel-register": "^6.0.0",
+    "connect-history-api-fallback": "^1.1.0",
+    "css-loader": "^0.25.0",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.13.3",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.9.0",
+    "function-bind": "^1.0.2",
+    "html-webpack-plugin": "^2.8.1",
+    "http-proxy-middleware": "^0.17.2",
+    "json-loader": "^0.5.4",
+    "opn": "^4.0.2",
+    "ora": "^0.3.0",
+    "shelljs": "^0.7.4",
+    "url-loader": "^0.5.7",
+    "vue-loader": "^9.4.0",
+    "vue-style-loader": "^1.0.0",
+    "webpack": "^1.13.2",
+    "webpack-dev-middleware": "^1.8.3",
+    "webpack-hot-middleware": "^2.12.2",
+    "webpack-merge": "^0.14.1"
+  }
+}

src/App.vue

@@ -0,0 +1,51 @@
+<template lang="html">
+  <div class="todo">
+    <h1>{{appName}}</h1>
+    <ul>
+      <todo-list></todo-list>
+      <todo-input></todo-input>
+      <todo-actions></todo-actions>
+      <todo-sync></todo-sync>
+    </ul>
+  </div>
+</template>
+
+<script>
+import TodoList from './components/TodoList';
+import TodoInput from './components/TodoInput';
+import TodoActions from './components/TodoActions';
+import TodoSync from './components/TodoSync';
+
+export default {
+  props: {},
+  data() {
+    return {
+      appName: 'Todo'
+    };
+  },
+  computed: {
+  },
+  created() {},
+  methods: {
+
+  },
+  components: {
+    TodoList,
+    TodoInput,
+    TodoActions,
+    TodoSync
+  }
+};
+</script>
+
+<style lang="css">
+.todo {
+  text-align: center;
+}
+
+ul {
+  list-style-position: inside;
+  list-style-type: none;
+}
+
+</style>

src/components/TodoActions.vue

@@ -0,0 +1,27 @@
+<template lang="html">
+  <div>
+    <input v-on:click='removeDones' type="button" name="name" value="Clear Dones">
+  </div>
+</template>
+
+<script>
+import store from '../stores/TodoStore';
+
+export default {
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  created() {},
+  methods: {
+    removeDones () {
+      store.dispatch('removeDones');
+    }
+  },
+  components: {}
+};
+</script>
+
+<style lang="css">
+</style>

src/components/TodoInput.vue

@@ -0,0 +1,38 @@
+<template lang="html">
+  <div>
+    <li class='none-style'>
+      <input v-on:keyup.enter='addTodo' v-model='newTodo' type="text" placeholder="new todo">
+    </li>
+  </div>
+</template>
+
+<script>
+import store from '../stores/TodoStore';
+
+export default {
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {
+    newTodo: {
+      get () {
+        return store.state.newTodo;
+      },
+      set (newTodo) {
+        store.state.newTodo = newTodo;
+      }
+    }
+  },
+  created() {},
+  methods: {
+    addTodo () {
+      store.dispatch('addTodo');
+    }
+  },
+  components: {}
+};
+</script>
+
+<style lang="css">
+</style>

src/components/TodoList.vue

@@ -0,0 +1,37 @@
+<template lang="html">
+  <div>
+    <li v-for="todo in todos">
+      <input v-model='todo.done' v-on:change='editTodo(todo)' type="checkbox">
+      {{todo.text}}
+      <input v-on:click='removeTodo(todo)' type="button" value="x">
+    </li>
+  </div>
+</template>
+
+<script>
+import store from '../stores/TodoStore';
+export default {
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {
+    todos () {
+      return store.state.todos;
+    }
+  },
+  created() {},
+  methods: {
+    removeTodo (todo) {
+      store.dispatch('removeTodo', todo);
+    },
+    editTodo (todo) {
+      store.dispatch('editTodo', todo);
+    }
+  },
+  components: {}
+};
+</script>
+
+<style lang="css">
+</style>

src/components/TodoSync.vue

@@ -0,0 +1,31 @@
+<template lang="html">
+
+</template>
+
+<script>
+import store from '../stores/TodoStore';
+import PouchDB from 'pouchdb';
+
+
+export default {
+  data() {
+    return {
+    };
+  },
+  computed: {},
+  created() {
+    store.dispatch('syncAll');
+    
+    let db = PouchDB('todos');
+    db.changes({since:'now', live:true})
+    .on('change', () => {
+      store.dispatch('syncAll');
+    })
+  },
+  methods: {},
+  components: {}
+};
+</script>
+
+<style lang="css">
+</style>

src/main.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import App from './App'
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})

src/stores/TodoStore.js

@@ -0,0 +1,85 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import PouchDB from 'pouchdb';
+const db = new PouchDB('todos');
+PouchDB.sync('todos', 'http://104.236.45.201:5984/todos', {live:true});
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    todos: [],
+    newTodo: ''
+  },
+  mutations: {
+    addTodo (state, todo) {
+      state.todos.push(todo);
+    },
+    editTodo (state, editTodo) {
+      let todo = state.todos.find(todo => editTodo._id === todo._id);
+      let index = state.todos.indexOf(todo);
+      state.todos.splice(index, 1, editTodo);
+    },
+    removeTodo (state, todo) {
+      let index = state.todos.indexOf(todo);
+      state.todos.splice(index, 1);
+    },
+    cleanNewTodo (state) {
+      state.newTodo = '';
+    },
+    setTodos (state, todos) {
+      state.todos = todos;
+    }
+  },
+  actions: {
+    addTodo (ctx) {
+      let todo = {
+        _id: new Date().toISOString(),
+        text: ctx.state.newTodo,
+        done: false
+      }
+      db.put(todo).then((res) => {
+          todo._rev = res.rev;
+          ctx.commit('addTodo', todo);
+          ctx.commit('cleanNewTodo');
+        }).catch(() => {
+          console.log('error');
+        });
+    },
+    editTodo (ctx, todo) {
+      db.put(todo).then((res) => {
+        todo._rev = res.rev;
+        ctx.commit('editTodo', todo)
+      }).catch(() => {
+        console.log('oh gosh');
+      })
+    },
+    removeTodo (ctx, todo) {
+      db.remove(todo)
+        .then((res) => {
+          ctx.commit('removeTodo', todo);
+        })
+        .catch(() => {
+          console.log('noooo!');
+        });
+    },
+    removeDones (ctx) {
+      let dones = ctx.getters.dones;
+      dones.forEach(todo => ctx.dispatch('removeTodo', todo));
+    },
+    syncAll (ctx) {
+      db.allDocs({include_docs: true})
+        .then((res) => {
+          ctx.commit('setTodos', res.rows.map(row => row.doc));
+        })
+        .catch(() => {
+          console.log('mamma');
+        })
+    }
+  },
+  getters: {
+    dones (ctx) {
+      return ctx.todos.filter(todo => todo.done);
+    }
+  }
+})