From 940d6a9d3a0243066ff83b4248b43497c26a924d Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Fri, 17 Feb 2017 13:48:54 +0700 Subject: [PATCH 01/24] 06 --- index.html | 4 +++- src/components/App.vue | 12 ++++++++++++ src/web.entry.js | 9 ++++++--- 3 files changed, 21 insertions(+), 4 deletions(-) create mode 100644 src/components/App.vue diff --git a/index.html b/index.html index bd15748..cd6ec02 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,9 @@ -

+ +

diff --git a/src/components/App.vue b/src/components/App.vue new file mode 100644 index 0000000..00a29eb --- /dev/null +++ b/src/components/App.vue @@ -0,0 +1,12 @@ + + diff --git a/src/web.entry.js b/src/web.entry.js index bb38317..1139c23 100644 --- a/src/web.entry.js +++ b/src/web.entry.js @@ -1,8 +1,11 @@ -import Vue from 'vue' +import Vue from 'vue'; +import './style.scss'; + +import App from './components/App.vue'; new Vue({ el: '#app', - data: { - msg: 'Hello World' + components: { + App } }); From f23889db3d8d575f673b6479b0540e77bcd19597 Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Fri, 17 Feb 2017 13:54:36 +0700 Subject: [PATCH 02/24] 07 --- src/web.entry.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/web.entry.js b/src/web.entry.js index 1139c23..2c897fc 100644 --- a/src/web.entry.js +++ b/src/web.entry.js @@ -1,10 +1,17 @@ import Vue from 'vue'; import './style.scss'; +import moment from 'moment-timezone'; +moment.tz.setDefault('UTC'); +Object.defineProperty(Vue.prototype, '$moment', { get() { return this.$root.moment } }); + import App from './components/App.vue'; new Vue({ el: '#app', + data: { + moment + }, components: { App } From a3a4a020ef07bf1f894141c5ac24ede88519faa1 Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Fri, 17 Feb 2017 14:54:20 +0700 Subject: [PATCH 03/24] 09 --- src/components/App.vue | 44 ++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 42 insertions(+), 2 deletions(-) diff --git a/src/components/App.vue b/src/components/App.vue index 00a29eb..dd92ce6 100644 --- a/src/components/App.vue +++ b/src/components/App.vue @@ -1,12 +1,52 @@ From 6b95141eccbdcccc9cc32b54c1883c6e0a402c54 Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Fri, 17 Feb 2017 15:03:35 +0700 Subject: [PATCH 04/24] 10 --- src/components/App.vue | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/components/App.vue b/src/components/App.vue index dd92ce6..4549495 100644 --- a/src/components/App.vue +++ b/src/components/App.vue @@ -1,13 +1,16 @@ diff --git a/src/components/CalendarDay.vue b/src/components/CalendarDay.vue new file mode 100644 index 0000000..22cb441 --- /dev/null +++ b/src/components/CalendarDay.vue @@ -0,0 +1,18 @@ + + From 5b5f7bfd976eea738d2126cf45593c7715e6ba28 Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Fri, 17 Feb 2017 17:28:17 +0700 Subject: [PATCH 06/24] 18 --- src/components/App.vue | 12 ++++++------ src/web.entry.js | 9 +++++++++ 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/App.vue b/src/components/App.vue index 60b89c4..bc41286 100644 --- a/src/components/App.vue +++ b/src/components/App.vue @@ -20,13 +20,13 @@ import CalendarDay from './CalendarDay.vue'; export default { - data() { - return { - month: 2, - year: 2017 - }; - }, computed: { + month() { + return this.$store.state.currentMonth; + }, + year() { + return this.$store.state.currentYear; + }, days() { // Generating all days in current month diff --git a/src/web.entry.js b/src/web.entry.js index 2c897fc..db671fa 100644 --- a/src/web.entry.js +++ b/src/web.entry.js @@ -1,6 +1,9 @@ import Vue from 'vue'; import './style.scss'; +import Vuex from 'vuex'; +Vue.use(Vuex); + import moment from 'moment-timezone'; moment.tz.setDefault('UTC'); Object.defineProperty(Vue.prototype, '$moment', { get() { return this.$root.moment } }); @@ -14,5 +17,11 @@ new Vue({ }, components: { App + }, + store : { + state: { + currentYear: 2017, + currentMonth: 1 + } } }); From 86e4973bda7b225281009afb03ce44fc0bba3804 Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Fri, 17 Feb 2017 17:36:17 +0700 Subject: [PATCH 07/24] 19 --- src/components/App.vue | 12 +++++++++++- src/components/CurrentMonth.vue | 8 ++++++++ src/web.entry.js | 2 +- 3 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 src/components/CurrentMonth.vue diff --git a/src/components/App.vue b/src/components/App.vue index bc41286..13f6a54 100644 --- a/src/components/App.vue +++ b/src/components/App.vue @@ -1,5 +1,13 @@ diff --git a/src/components/CurrentMonth.vue b/src/components/CurrentMonth.vue new file mode 100644 index 0000000..73c68b3 --- /dev/null +++ b/src/components/CurrentMonth.vue @@ -0,0 +1,8 @@ + + diff --git a/src/web.entry.js b/src/web.entry.js index db671fa..7dc7e07 100644 --- a/src/web.entry.js +++ b/src/web.entry.js @@ -21,7 +21,7 @@ new Vue({ store : { state: { currentYear: 2017, - currentMonth: 1 + currentMonth: 2 } } }); From ede67f96b2fc9e3f9ef54b48d1d84d7e21ee9d6e Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Fri, 17 Feb 2017 17:40:01 +0700 Subject: [PATCH 08/24] 20 --- src/components/CurrentMonth.vue | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/CurrentMonth.vue b/src/components/CurrentMonth.vue index 73c68b3..4fa487e 100644 --- a/src/components/CurrentMonth.vue +++ b/src/components/CurrentMonth.vue @@ -1,8 +1,18 @@ From 5bc4a0f18f9a8824e227893948dcdb1c8f9f7fae Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Fri, 17 Feb 2017 17:57:55 +0700 Subject: [PATCH 09/24] 23 --- src/components/CurrentMonth.vue | 14 +++++++++++++- src/store/index.js | 10 ++++++++++ src/web.entry.js | 10 ++-------- 3 files changed, 25 insertions(+), 9 deletions(-) create mode 100644 src/store/index.js diff --git a/src/components/CurrentMonth.vue b/src/components/CurrentMonth.vue index 4fa487e..664d584 100644 --- a/src/components/CurrentMonth.vue +++ b/src/components/CurrentMonth.vue @@ -1,8 +1,20 @@ diff --git a/src/components/EventForm.vue b/src/components/EventForm.vue new file mode 100644 index 0000000..4d8ee69 --- /dev/null +++ b/src/components/EventForm.vue @@ -0,0 +1,6 @@ + + From af2b136a38bb9992e5a58feecd776a775a959738 Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Sat, 18 Feb 2017 10:56:43 +0700 Subject: [PATCH 13/24] 31 --- src/components/CalendarDay.vue | 21 ++++++++++++++++++++- src/components/EventForm.vue | 24 ++++++++++++++++++++++-- src/store/index.js | 12 +++++++++++- 3 files changed, 53 insertions(+), 4 deletions(-) diff --git a/src/components/CalendarDay.vue b/src/components/CalendarDay.vue index 22cb441..0c24ad1 100644 --- a/src/components/CalendarDay.vue +++ b/src/components/CalendarDay.vue @@ -1,10 +1,23 @@ diff --git a/src/components/EventForm.vue b/src/components/EventForm.vue index 4d8ee69..77c6085 100644 --- a/src/components/EventForm.vue +++ b/src/components/EventForm.vue @@ -1,6 +1,26 @@ diff --git a/src/store/index.js b/src/store/index.js index 1ee7df6..15997aa 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -5,7 +5,10 @@ Vue.use(Vuex); export default new Vuex.Store({ state: { currentYear: 2017, - currentMonth: 2 + currentMonth: 2, + eventFormPosX: 0, + eventFormPosY: 0, + eventFormActive: false }, mutations: { setCurrentMonth(state, payload) { @@ -13,6 +16,13 @@ export default new Vuex.Store({ }, setCurrentYear(state, payload) { state.currentYear = payload; + }, + eventFormPos(state, payload) { + state.eventFormPosX = payload.x; + state.eventFormPosY = payload.y; + }, + eventFormActive(state, payload) { + state.eventFormActive = payload; } } }); From d6f9ebeafab0f1ab46db269081cf0e8093344c0f Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Sat, 18 Feb 2017 11:02:53 +0700 Subject: [PATCH 14/24] 32 --- src/components/CalendarDay.vue | 7 +------ src/store/index.js | 10 +++++++++- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/CalendarDay.vue b/src/components/CalendarDay.vue index 0c24ad1..c32d747 100644 --- a/src/components/CalendarDay.vue +++ b/src/components/CalendarDay.vue @@ -11,12 +11,7 @@ props: [ 'day' ], computed: { events() { - let mockData = [ - { description: 'Random event 1', date: this.$moment('2017-02-06', 'YYYY-MM-DD') }, - { description: 'Random event 2', date: this.$moment('2017-02-15', 'YYYY-MM-DD') }, - { description: 'Random event 3', date: this.$moment('2017-03-14', 'YYYY-MM-DD') } - ]; - return mockData.filter(event => event.date.isSame(this.day, 'day')); + return this.$store.state.events.filter(event => event.date.isSame(this.day, 'day')); }, classObject() { let today = this.day.isSame(this.$moment(), 'day'); diff --git a/src/store/index.js b/src/store/index.js index 15997aa..6a5b54b 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -2,13 +2,21 @@ import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); +import moment from 'moment-timezone'; +moment.tz.setDefault('UTC'); + export default new Vuex.Store({ state: { currentYear: 2017, currentMonth: 2, eventFormPosX: 0, eventFormPosY: 0, - eventFormActive: false + eventFormActive: false, + events: [ + { description: 'Random event 1', date: moment('2017-02-06', 'YYYY-MM-DD') }, + { description: 'Random event 2', date: moment('2017-02-15', 'YYYY-MM-DD') }, + { description: 'Random event 3', date: moment('2017-03-14', 'YYYY-MM-DD') } + ] }, mutations: { setCurrentMonth(state, payload) { From 7670ac3ffed2048720c004a9def6cfaf89119e96 Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Sat, 18 Feb 2017 11:06:13 +0700 Subject: [PATCH 15/24] 33 --- src/components/EventForm.vue | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/EventForm.vue b/src/components/EventForm.vue index 77c6085..a9b1eb2 100644 --- a/src/components/EventForm.vue +++ b/src/components/EventForm.vue @@ -1,11 +1,19 @@ diff --git a/src/store/index.js b/src/store/index.js index 92177c0..c153654 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -17,7 +17,7 @@ export default new Vuex.Store({ { description: 'Random event 2', date: moment('2017-02-15', 'YYYY-MM-DD') }, { description: 'Random event 3', date: moment('2017-03-14', 'YYYY-MM-DD') } ], - eventFormDate: null + eventFormDate: moment() }, mutations: { setCurrentMonth(state, payload) { From f6fed1b7df291902f16ceafb948caca66a6555d9 Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Sun, 19 Feb 2017 09:38:49 +0700 Subject: [PATCH 19/24] 39 --- src/components/CalendarDay.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/CalendarDay.vue b/src/components/CalendarDay.vue index 379117d..c27521b 100644 --- a/src/components/CalendarDay.vue +++ b/src/components/CalendarDay.vue @@ -14,11 +14,14 @@ return this.$store.state.events.filter(event => event.date.isSame(this.day, 'day')); }, classObject() { + let eventFormDate = this.$store.state.eventFormDate; + let eventFormActive = this.$store.state.eventFormActive; let today = this.day.isSame(this.$moment(), 'day'); return { day: true, today, - past: this.day.isSameOrBefore(this.$moment(), 'day') && !today + past: this.day.isSameOrBefore(this.$moment(), 'day') && !today, + active: eventFormDate.isSame(this.day, 'day') && eventFormActive }; } }, From 120765fec44a714815d8bb6012bebbc64af07777 Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Sun, 19 Feb 2017 10:48:13 +0700 Subject: [PATCH 20/24] 40 --- server.js | 8 ++++++++ src/store/index.js | 8 ++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/server.js b/server.js index 97831d1..e4a95cb 100644 --- a/server.js +++ b/server.js @@ -14,6 +14,14 @@ app.get('/', (req, res) => { }); +let events = []; + +app.use(require('body-parser').json()); +app.post('/add_event', (req, res) => { + events.push(req.body); + res.sendStatus(200); +}); + const server = http.createServer(app); if (process.env.NODE_ENV === 'development') { diff --git a/src/store/index.js b/src/store/index.js index c153654..fc9b684 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -5,6 +5,8 @@ Vue.use(Vuex); import moment from 'moment-timezone'; moment.tz.setDefault('UTC'); +import Axios from 'axios'; + export default new Vuex.Store({ state: { currentYear: 2017, @@ -34,10 +36,12 @@ export default new Vuex.Store({ state.eventFormActive = payload; }, addEvent(state, payload) { - state.events.push({ + let obj = { description: payload, date: state.eventFormDate - }); + }; + state.events.push(obj); + Axios.post('/add_event', obj); }, eventFormDate(state, payload) { state.eventFormDate = payload From 7ea8332d5373bd189758e893207bfb1f912f7c3e Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Sun, 19 Feb 2017 12:58:48 +0700 Subject: [PATCH 21/24] 44 --- src/components/EventForm.vue | 7 ++++--- src/store/index.js | 31 ++++++++++++++++++++----------- src/web.entry.js | 8 ++++++++ 3 files changed, 32 insertions(+), 14 deletions(-) diff --git a/src/components/EventForm.vue b/src/components/EventForm.vue index 9532c5c..2721a95 100644 --- a/src/components/EventForm.vue +++ b/src/components/EventForm.vue @@ -24,9 +24,10 @@ }, create() { if (this.description.length > 0) { - this.$store.commit('addEvent', this.description); - this.description = ''; - this.$store.commit('eventFormActive', false); + this.$store.dispatch('addEvent', this.description).then(_ => { + this.description = ''; + this.$store.commit('eventFormActive', false); + }); } } }, diff --git a/src/store/index.js b/src/store/index.js index fc9b684..b811d2c 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -14,11 +14,7 @@ export default new Vuex.Store({ eventFormPosX: 0, eventFormPosY: 0, eventFormActive: false, - events: [ - { description: 'Random event 1', date: moment('2017-02-06', 'YYYY-MM-DD') }, - { description: 'Random event 2', date: moment('2017-02-15', 'YYYY-MM-DD') }, - { description: 'Random event 3', date: moment('2017-03-14', 'YYYY-MM-DD') } - ], + events: [], eventFormDate: moment() }, mutations: { @@ -36,15 +32,28 @@ export default new Vuex.Store({ state.eventFormActive = payload; }, addEvent(state, payload) { - let obj = { - description: payload, - date: state.eventFormDate - }; - state.events.push(obj); - Axios.post('/add_event', obj); + state.events.push(payload); }, eventFormDate(state, payload) { state.eventFormDate = payload } + }, + actions: { + addEvent(context, payload) { + return new Promise((resolve, reject) => { + let obj = { + description: payload, + date: context.state.eventFormDate + }; + Axios.post('/add_event', obj).then(response => { + if (response.status === 200) { + context.commit('addEvent', obj); + resolve(); + } else { + reject(); + } + }); + }); + } } }); diff --git a/src/web.entry.js b/src/web.entry.js index 61efbd8..8792b8d 100644 --- a/src/web.entry.js +++ b/src/web.entry.js @@ -9,6 +9,14 @@ Object.defineProperty(Vue.prototype, '$moment', { get() { return this.$root.mome import App from './components/App.vue'; +let events = [ + { description: 'Random event 1', date: moment('2017-02-06', 'YYYY-MM-DD') }, + { description: 'Random event 2', date: moment('2017-02-15', 'YYYY-MM-DD') }, + { description: 'Random event 3', date: moment('2017-03-14', 'YYYY-MM-DD') } +]; +let initialState = Object.assign({}, store.state, { events }); +store.replaceState(initialState); + new Vue({ el: '#app', data: { From c1a1f9c6f28efe11aceacdc37411f2e01c3ccf6b Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Sun, 19 Feb 2017 13:35:33 +0700 Subject: [PATCH 22/24] 46 --- index.html | 1 + server.js | 15 +++++++++++---- src/web.entry.js | 12 +++++++----- 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index cd6ec02..b239bb4 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@

+ diff --git a/server.js b/server.js index e4a95cb..d2775b8 100644 --- a/server.js +++ b/server.js @@ -5,17 +5,24 @@ const app = express(); const path = require('path'); const fs = require('fs'); const http = require('http'); +const moment = require('moment-timezone'); +moment.tz.setDefault('UTC'); +const serialize = require('serialize-javascript'); app.use('/public', express.static(path.join(__dirname, 'public'))); +let events = [ + { description: 'Random event 1', date: moment('2017-02-06', 'YYYY-MM-DD') }, + { description: 'Random event 2', date: moment('2017-02-15', 'YYYY-MM-DD') }, + { description: 'Random event 3', date: moment('2017-03-14', 'YYYY-MM-DD') } +]; + app.get('/', (req, res) => { let template = fs.readFileSync(path.resolve('./index.html'), 'utf-8'); - res.send(template); - + let contentMarker = ''; + res.send(template.replace(contentMarker, ``)); }); -let events = []; - app.use(require('body-parser').json()); app.post('/add_event', (req, res) => { events.push(req.body); diff --git a/src/web.entry.js b/src/web.entry.js index 8792b8d..1d36b18 100644 --- a/src/web.entry.js +++ b/src/web.entry.js @@ -9,11 +9,13 @@ Object.defineProperty(Vue.prototype, '$moment', { get() { return this.$root.mome import App from './components/App.vue'; -let events = [ - { description: 'Random event 1', date: moment('2017-02-06', 'YYYY-MM-DD') }, - { description: 'Random event 2', date: moment('2017-02-15', 'YYYY-MM-DD') }, - { description: 'Random event 3', date: moment('2017-03-14', 'YYYY-MM-DD') } -]; +let events = window.__INITIAL_STATE__.map(event => { + return { + description: event.description, + date: moment(event.date) + } +}); + let initialState = Object.assign({}, store.state, { events }); store.replaceState(initialState); From 83b5354abb24a3c552c2a2dd473ab2e3923a3fdf Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Sun, 19 Feb 2017 14:22:56 +0700 Subject: [PATCH 23/24] 50 --- index.html | 4 +--- src/web.entry.js | 11 ++++++++++- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index b239bb4..293c82d 100644 --- a/index.html +++ b/index.html @@ -8,9 +8,7 @@ -

- -

diff --git a/src/web.entry.js b/src/web.entry.js index 1d36b18..b01064c 100644 --- a/src/web.entry.js +++ b/src/web.entry.js @@ -27,5 +27,14 @@ new Vue({ components: { App }, - store + store, + render(createElement) { + return createElement( + 'div', + { attrs: { id: 'app'} }, + [ + createElement('app') + ] + ); + } }); From face60d4a9e85b318ec3d25568af825c2dcdddca Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Sun, 19 Feb 2017 16:43:13 +0700 Subject: [PATCH 24/24] 53 --- src/entry.js | 34 ++++++++++++++++++++++++++++++++++ src/web.entry.js | 29 ++--------------------------- 2 files changed, 36 insertions(+), 27 deletions(-) create mode 100644 src/entry.js diff --git a/src/entry.js b/src/entry.js new file mode 100644 index 0000000..17721df --- /dev/null +++ b/src/entry.js @@ -0,0 +1,34 @@ +import Vue from 'vue'; + +import store from './store'; + +import moment from 'moment-timezone'; +moment.tz.setDefault('UTC'); +Object.defineProperty(Vue.prototype, '$moment', { get() { return this.$root.moment } }); + +import App from './components/App.vue'; + +export default function(events) { + + let initialState = Object.assign({}, store.state, { events }); + store.replaceState(initialState); + + return new Vue({ + data: { + moment + }, + components: { + App + }, + store, + render(createElement) { + return createElement( + 'div', + { attrs: { id: 'app'} }, + [ + createElement('app') + ] + ); + } + }); +} diff --git a/src/web.entry.js b/src/web.entry.js index b01064c..383b4d4 100644 --- a/src/web.entry.js +++ b/src/web.entry.js @@ -1,13 +1,7 @@ -import Vue from 'vue'; import './style.scss'; -import store from './store'; - import moment from 'moment-timezone'; moment.tz.setDefault('UTC'); -Object.defineProperty(Vue.prototype, '$moment', { get() { return this.$root.moment } }); - -import App from './components/App.vue'; let events = window.__INITIAL_STATE__.map(event => { return { @@ -16,25 +10,6 @@ let events = window.__INITIAL_STATE__.map(event => { } }); -let initialState = Object.assign({}, store.state, { events }); -store.replaceState(initialState); +import VueCalendar from './entry'; -new Vue({ - el: '#app', - data: { - moment - }, - components: { - App - }, - store, - render(createElement) { - return createElement( - 'div', - { attrs: { id: 'app'} }, - [ - createElement('app') - ] - ); - } -}); +VueCalendar(events).$mount('#app');

Vue.js Calendar

Add an event

Add an event