31

Anthony Gore · Anthony Gore · commit af2b136a38bb · 2017-02-18T10:56:43.000+07:00
diff --git a/src/components/CalendarDay.vue b/src/components/CalendarDay.vue
@@ -1,10 +1,23 @@
 <template>
-    <div :class="classObject">{{ day.format('D') }}</div>
+    <div :class="classObject" @click="captureClick">
+        {{ day.format('D') }}
+        <ul class="event-list">
+            <li v-for="event in events">{{ event.description }}</li>
+        </ul>
+    </div>
 </template>
 <script>
     export default {
         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'));
+            },
             classObject() {
                 let today = this.day.isSame(this.$moment(), 'day');
                 return {
@@ -13,6 +26,12 @@
                     past: this.day.isSameOrBefore(this.$moment(), 'day') && !today
                 };
             }
+        },
+        methods: {
+            captureClick(event) {
+                this.$store.commit('eventFormPos', { x: event.clientX, y: event.clientY });
+                this.$store.commit('eventFormActive', true);
+            }
         }
     }
 </script>
diff --git a/src/components/EventForm.vue b/src/components/EventForm.vue
@@ -1,6 +1,26 @@
 <template>
-    <div id="event-form" :class="{ active: true }" :style="{ top: '500px', left: '500px' }"></div>
+    <div id="event-form" :class="{ active: active }" :style="{ top: top, left: left }">
+        <h4>Add an event</h4>
+        <button id="close-button" @click="close">&#10005</button>
+    </div>
 </template>
 <script>
-
+    export default {
+        methods: {
+           close() {
+               this.$store.commit('eventFormActive', false);
+           }
+        },
+        computed: {
+            active() {
+                return this.$store.state.eventFormActive;
+            },
+            top() {
+                return `${this.$store.state.eventFormPosY}px`;
+            },
+            left() {
+                return `${this.$store.state.eventFormPosX}px`;
+            }
+        }
+    }
 </script>
diff --git a/src/store/index.js b/src/store/index.js
@@ -5,14 +5,24 @@ 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) {
       state.currentMonth = payload;
     },
     setCurrentYear(state, payload) {
       state.currentYear = payload;
+    },
+    eventFormPos(state, payload) {
+      state.eventFormPosX = payload.x;
+      state.eventFormPosY = payload.y;
+    },
+    eventFormActive(state, payload) {
+      state.eventFormActive = payload;
     }
   }
 });
