From edd4913ed822d3579fe7d6c2bc9f5258e3466e18 Mon Sep 17 00:00:00 2001 From: Henrique Okomura Date: Sat, 25 Nov 2017 10:57:47 -0200 Subject: [PATCH 01/11] Big Bang --- .gitignore | 1 + index.html | 56 ++++++++++++++++++++ js/app.js | 127 ++++++++++++++++++++++++++++++++++++++++++++++ js/routes.js | 24 +++++++++ js/store.js | 18 +++++++ package-lock.json | 26 ++++++++++ package.json | 9 ++++ readme.md | 29 +++++++++++ 8 files changed, 290 insertions(+) create mode 100644 .gitignore create mode 100644 index.html create mode 100644 js/app.js create mode 100644 js/routes.js create mode 100644 js/store.js create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 readme.md diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/index.html b/index.html new file mode 100644 index 0000000..ba5b2c2 --- /dev/null +++ b/index.html @@ -0,0 +1,56 @@ + + + + + Vue.js • TodoMVC + + + + + +
+
+

todos

+ +
+
+ +
    +
  • +
    + + + +
    + +
    • +
+
+
+ + {{pluralize('item', remaining)}} left + + + +
+
+ + + + + + + + + diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..fd5f0c0 --- /dev/null +++ b/js/app.js @@ -0,0 +1,127 @@ +/*global Vue, todoStorage */ + +(function (exports) { + + 'use strict'; + + var filters = { + all: function (todos) { + return todos; + }, + active: function (todos) { + return todos.filter(function (todo) { + return !todo.completed; + }); + }, + completed: function (todos) { + return todos.filter(function (todo) { + return todo.completed; + }); + } + }; + + Vue.use(VueResource); + + exports.app = new Vue({ + + // the root element that will be compiled + el: '.todoapp', + + // app initial state + data: { + todos: todoStorage.fetch(), + newTodo: '', + editedTodo: null, + visibility: 'all' + }, + + // watch todos change for localStorage persistence + watch: { + todos: { + deep: true, + handler: todoStorage.save + } + }, + + // computed properties + // http://vuejs.org/guide/computed.html + computed: { + filteredTodos: function () { + return filters[this.visibility](this.todos); + }, + remaining: function () { + return filters.active(this.todos).length; + }, + allDone: { + get: function () { + return this.remaining === 0; + }, + set: function (value) { + this.todos.forEach(function (todo) { + todo.completed = value; + }); + } + } + }, + + // methods that implement data logic. + // note there's no DOM manipulation here at all. + methods: { + + pluralize: function (word, count) { + return word + (count === 1 ? '' : 's'); + }, + + addTodo: function () { + var value = this.newTodo && this.newTodo.trim(); + if (!value) { + return; + } + this.todos.push({ id: this.todos.length + 1, title: value, completed: false }); + this.newTodo = ''; + }, + + removeTodo: function (todo) { + var index = this.todos.indexOf(todo); + this.todos.splice(index, 1); + }, + + editTodo: function (todo) { + this.beforeEditCache = todo.title; + this.editedTodo = todo; + }, + + doneEdit: function (todo) { + if (!this.editedTodo) { + return; + } + this.editedTodo = null; + todo.title = todo.title.trim(); + if (!todo.title) { + this.removeTodo(todo); + } + }, + + cancelEdit: function (todo) { + this.editedTodo = null; + todo.title = this.beforeEditCache; + }, + + removeCompleted: function () { + this.todos = filters.active(this.todos); + } + }, + + // a custom directive to wait for the DOM to be updated + // before focusing on the input field. + // http://vuejs.org/guide/custom-directive.html + directives: { + 'todo-focus': function (el, binding) { + if (binding.value) { + el.focus(); + } + } + } + }); + +})(window); diff --git a/js/routes.js b/js/routes.js new file mode 100644 index 0000000..b555605 --- /dev/null +++ b/js/routes.js @@ -0,0 +1,24 @@ +/*global app, Router */ + +(function (app, Router) { + + 'use strict'; + + var router = new Router(); + + ['all', 'active', 'completed'].forEach(function (visibility) { + router.on(visibility, function () { + app.visibility = visibility; + }); + }); + + router.configure({ + notfound: function () { + window.location.hash = ''; + app.visibility = 'all'; + } + }); + + router.init(); + +})(app, Router); diff --git a/js/store.js b/js/store.js new file mode 100644 index 0000000..4a4b12b --- /dev/null +++ b/js/store.js @@ -0,0 +1,18 @@ +/*jshint unused:false */ + +(function (exports) { + + 'use strict'; + + var STORAGE_KEY = 'todos-vuejs'; + + exports.todoStorage = { + fetch: function () { + return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); + }, + save: function (todos) { + localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)); + } + }; + +})(window); diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..d305083 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,26 @@ +{ + "requires": true, + "lockfileVersion": 1, + "dependencies": { + "director": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/director/-/director-1.2.8.tgz", + "integrity": "sha1-xtm03YkOmv9TZRg/6cyOc5lM8tU=" + }, + "todomvc-app-css": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/todomvc-app-css/-/todomvc-app-css-2.1.0.tgz", + "integrity": "sha1-tvJxbTOa+i5feZNH0qSLBTliQqU=" + }, + "todomvc-common": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/todomvc-common/-/todomvc-common-1.0.4.tgz", + "integrity": "sha512-AA0Z4exovEqubhbZCrzzn9roVT4zvOncS319p2zIc4CsNe5B9TLL7Sei1NIV6d+WrgR5rOi+y0I9Y6GE7xgNOw==" + }, + "vue": { + "version": "2.5.8", + "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.8.tgz", + "integrity": "sha512-aY26SGDHJTCKM+mndzuiQ0dozPpNeWO5Mtq760OrHO0AOiqVHMhzvU5h0LdCkVF9A+vE+DMTm74xSi+sxnMEDg==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..4961942 --- /dev/null +++ b/package.json @@ -0,0 +1,9 @@ +{ + "private": true, + "dependencies": { + "director": "^1.2.0", + "vue": "^2.1.8", + "todomvc-common": "^1.0.1", + "todomvc-app-css": "^2.0.0" + } +} diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..de50031 --- /dev/null +++ b/readme.md @@ -0,0 +1,29 @@ +# Vue.js TodoMVC Example + +> Vue.js is a library for building interactive web interfaces. +It provides data-driven, nestable view components with a simple and flexible API. + +> _[Vue.js - vuejs.org](http://vuejs.org)_ + +## Learning Vue.js + +The [Vue.js website](http://vuejs.org/) is a great resource to get started. + +Here are some links you may find helpful: + +* [Official Guide](http://vuejs.org/guide/) +* [API Reference](http://vuejs.org/api/) +* [Examples](http://vuejs.org/examples/) +* [Building Larger Apps with Vue.js](http://v1.vuejs.org/guide/application.html) + +Get help from other Vue.js users: + +* [Vue.js on Twitter](https://twitter.com/vuejs) +* [Vue.js on Gitter](https://gitter.im/vuejs/vue) +* [Vue.js Forum](http://forum.vuejs.org) + +_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._ + +## Credit + +This TodoMVC application was created by [Evan You](http://evanyou.me). From 772d624e08addbf1db8618a12a1727bfe7d8e617 Mon Sep 17 00:00:00 2001 From: Henrique Okomura Date: Sat, 25 Nov 2017 11:14:30 -0200 Subject: [PATCH 02/11] Added Axios dependency --- index.html | 2 +- js/app.js | 2 -- package-lock.json | 35 +++++++++++++++++++++++++++++++++++ package.json | 5 +++-- 4 files changed, 39 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index ba5b2c2..343d29b 100644 --- a/index.html +++ b/index.html @@ -45,10 +45,10 @@

todos

Written by Evan You

Part of TodoMVC

- + diff --git a/js/app.js b/js/app.js index fd5f0c0..7bf58bf 100644 --- a/js/app.js +++ b/js/app.js @@ -20,8 +20,6 @@ } }; - Vue.use(VueResource); - exports.app = new Vue({ // the root element that will be compiled diff --git a/package-lock.json b/package-lock.json index d305083..fdaf407 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2,11 +2,46 @@ "requires": true, "lockfileVersion": 1, "dependencies": { + "axios": { + "version": "0.17.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.17.1.tgz", + "integrity": "sha1-LY4+XQvb1zJ/kbyBT1xXZg+Bgk0=", + "requires": { + "follow-redirects": "1.2.6", + "is-buffer": "1.1.6" + } + }, + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, "director": { "version": "1.2.8", "resolved": "https://registry.npmjs.org/director/-/director-1.2.8.tgz", "integrity": "sha1-xtm03YkOmv9TZRg/6cyOc5lM8tU=" }, + "follow-redirects": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.2.6.tgz", + "integrity": "sha512-FrMqZ/FONtHnbqO651UPpfRUVukIEwJhXMfdr/JWAmrDbeYBu773b1J6gdWDyRIj4hvvzQEHoEOTrdR8o6KLYA==", + "requires": { + "debug": "3.1.0" + } + }, + "is-buffer": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", + "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==" + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, "todomvc-app-css": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/todomvc-app-css/-/todomvc-app-css-2.1.0.tgz", diff --git a/package.json b/package.json index 4961942..8aafc00 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,10 @@ { "private": true, "dependencies": { + "axios": "^0.17.1", "director": "^1.2.0", - "vue": "^2.1.8", + "todomvc-app-css": "^2.0.0", "todomvc-common": "^1.0.1", - "todomvc-app-css": "^2.0.0" + "vue": "^2.1.8" } } From c47b5d92c5eda0b62015bdc98ea89ad2ffbcf737 Mon Sep 17 00:00:00 2001 From: Henrique Okomura Date: Sat, 25 Nov 2017 11:15:37 -0200 Subject: [PATCH 03/11] Requesting todos from server on mounted --- js/app.js | 9 +++++++-- js/store.js | 4 +++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/js/app.js b/js/app.js index 7bf58bf..182847b 100644 --- a/js/app.js +++ b/js/app.js @@ -27,12 +27,17 @@ // app initial state data: { - todos: todoStorage.fetch(), + todos: [], newTodo: '', editedTodo: null, visibility: 'all' }, - + mounted: function() { + todoStorage.fetch().then((todos) => { + this.todos = todos; + console.log(this.todos); + }) + }, // watch todos change for localStorage persistence watch: { todos: { diff --git a/js/store.js b/js/store.js index 4a4b12b..9ad2546 100644 --- a/js/store.js +++ b/js/store.js @@ -8,7 +8,9 @@ exports.todoStorage = { fetch: function () { - return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); + return axios.get('https://4b6aadd7.ngrok.io/todos').then((response) => { + return response.data; + }); }, save: function (todos) { localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)); From b1819eb793d5943bb5c586031339b3595c8b5434 Mon Sep 17 00:00:00 2001 From: Henrique Okomura Date: Sat, 25 Nov 2017 13:18:04 -0200 Subject: [PATCH 04/11] Added Viewport meta tag --- index.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 343d29b..d013bf2 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + Vue.js • TodoMVC @@ -35,9 +36,10 @@

todos

  • Active
  • Completed
    • - +