├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── server.js
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── Calendar.vue
    │   ├── ColorPicker.vue
    │   ├── EventForm.vue
    │   └── HelloWorld.vue
    └── main.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | .env
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Realtime event scheduling application
 2 | 
 3 | Realtime event scheduling using Pusher and VueJS
 4 | 
 5 | ## Prerequisites
 6 | 
 7 | - [Vue](https://vuejs.org/)
 8 | - [Express](https://expressjs.com/)
 9 | - [Pusher](https://pusher.com)
10 | - A [Pusher account](https://pusher.com/signup) and [Pusher app credentials](http://dashboard.pusher.com/)
11 | 
12 | ## Getting started
13 | 
14 | - Clone the project and install dependencies:
15 | - Create a file named `.env`. Update the `.env` file with the content below:
16 | 
17 | ```
18 | PUSHER_ID=app-id
19 | PUSHER_KEY=app-key
20 | PUSHER_SECRET=app-secret
21 | PUSHER_CLUSTER=cluster
22 | ```
23 | 
24 | > **Note**: ensure to replace the placeholder values with your pusher `appId`, `key`, `cluster` and `secret`.
25 | 
26 | - Clone the repo
27 | - Enter the project folder
28 | - Run `yarn` or `npm i`
29 | - Start server by running `node server`
30 | - Run `yarn serve` to start the application
31 | 
32 | 
33 | ## Built With
34 | 
35 | - [Vue](https://vuejs.org/)
36 | - [Pusher](https://pusher.com)
37 | - [Express](https://expressjs.com/)
38 | - [Vue-FullCalendar](https://github.com/Wanderxx/vue-fullcalendar)
39 | - [DotEnv](https://www.npmjs.com/package/dotenv)
40 | - [VueJs-Datepicker](https://github.com/charliekassel/vuejs-datepicker)
41 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "realtime-events",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "body-parser": "^1.18.3",
12 |     "date-fns": "^1.29.0",
13 |     "dotenv": "^6.0.0",
14 |     "express": "^4.16.3",
15 |     "pusher": "^2.0.1",
16 |     "pusher-js": "^4.2.2",
17 |     "vue": "^2.5.16",
18 |     "vue-fullcalendar": "^1.0.9",
19 |     "vuejs-datepicker": "^1.5.2"
20 |   },
21 |   "devDependencies": {
22 |     "@vue/cli-plugin-babel": "^3.0.0-rc.3",
23 |     "@vue/cli-plugin-eslint": "^3.0.0-rc.3",
24 |     "@vue/cli-service": "^3.0.0-rc.3",
25 |     "vue-template-compiler": "^2.5.16"
26 |   },
27 |   "eslintConfig": {
28 |     "root": true,
29 |     "env": {
30 |       "node": true
31 |     },
32 |     "extends": [
33 |       "plugin:vue/essential",
34 |       "eslint:recommended"
35 |     ],
36 |     "rules": {},
37 |     "parserOptions": {
38 |       "parser": "babel-eslint"
39 |     }
40 |   },
41 |   "postcss": {
42 |     "plugins": {
43 |       "autoprefixer": {}
44 |     }
45 |   },
46 |   "browserslist": [
47 |     "> 1%",
48 |     "last 2 versions",
49 |     "not ie <= 8"
50 |   ]
51 | }
52 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HackAfro/vue-event-scheduler/9d081ced84af736be1e53e0307c0bf307c45eea5/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>realtime-events</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but realtime-events doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | require('dotenv').config();
 2 | const express = require('express');
 3 | const bodyParser = require('body-parser');
 4 | const Pusher = require('pusher');
 5 | 
 6 | const app = express();
 7 | const port = process.env.PORT || 4001;
 8 | const pusher = new Pusher({
 9 |   appId: process.env.PUSHER_APP_ID,
10 |   key: process.env.PUSHER_KEY,
11 |   secret: process.env.PUSHER_SECRET,
12 |   cluster: process.env.PUSHER_CLUSTER,
13 | });
14 | 
15 | app.use(bodyParser.json());
16 | app.use(bodyParser.urlencoded({ extended: false }));
17 | app.use((req, res, next) => {
18 |   res.header('Access-Control-Allow-Origin', '*');
19 |   res.header(
20 |     'Access-Control-Allow-Headers',
21 |     'Origin, X-Requested-With, Content-Type, Accept'
22 |   );
23 |   next();
24 | });
25 | 
26 | 
27 | app.post('/schedule', (req, res) => {
28 |   const {body} = req;
29 |   const data = {
30 |     ...body,
31 |     // set the selected property of the body to true
32 |   };
33 |   // trigger a new-entry event on the vote-channel
34 |   pusher.trigger('schedule', 'new-event', data);
35 |   res.json(data);
36 | });
37 | 
38 | app.listen(port, () => {
39 |   console.log(`Server started on port ${port}`);
40 | });
41 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div class="main">
 4 |       <div class="calendar-holder">
 5 |         <calendar :events="events" />
 6 |       </div>
 7 |       <div class="form-holder">
 8 |         <h3>Schedule an event</h3>
 9 |         <event-form />
10 |       </div>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import Calendar from './components/Calendar.vue'
17 | import EventForm from './components/EventForm.vue'
18 | import Pusher from 'pusher-js';
19 | 
20 | export default {
21 |   name: 'app',
22 |   components: {
23 |     Calendar,
24 |     EventForm
25 |   },
26 |   data(){
27 |     return {
28 |       events: [{
29 |         title     :  'event1',
30 |         start     : '2018-07-09',
31 |         cssClass  : 'blue',
32 |         YOUR_DATA : {}
33 |       },
34 |       {
35 |         title     : 'event2',
36 |         start     : '2018-07-10',
37 |         end       : '2018-07-13',
38 |         cssClass  : ['orange']
39 |       }] 
40 |     }
41 |   },
42 |   created(){
43 |     // Add your pusher credentials
44 |     const pusher = new Pusher('PUSHER_KEY', {
45 |       cluster: 'PUSHER_CLUSTER',
46 |       encrypted: true,
47 |     });
48 |     const channel = pusher.subscribe('schedule');
49 |     channel.bind('new-event', (data) => {
50 |       this.events = [
51 |         ...this.events,
52 |         data
53 |       ]
54 |     })
55 |   }
56 | }
57 | </script>
58 | 
59 | <style>
60 | #app {
61 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
62 |   -webkit-font-smoothing: antialiased;
63 |   -moz-osx-font-smoothing: grayscale;
64 |   text-align: center;
65 |   color: #2c3e50;
66 |   margin-top: 60px;
67 | }
68 | .main {
69 |   display: flex;
70 |   align-items: center;
71 | }
72 | .calendar-holder {
73 |   width: 65%;
74 | }
75 | .form-holder {
76 |   width: 35%;
77 | }
78 | 
79 | .form-holder > h3 {
80 |   color: orangered;
81 |   text-transform: uppercase;
82 |   font-size: 16px;
83 |   text-align: left;
84 |   margin-left: 30px;
85 |   margin-bottom: 10px;
86 | }
87 | </style>
88 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HackAfro/vue-event-scheduler/9d081ced84af736be1e53e0307c0bf307c45eea5/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Calendar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <full-calendar :events="events" />
 3 | </template>
 4 | 
 5 | <script>
 6 | import FullCalendar from 'vue-fullcalendar';
 7 | 
 8 | export default {
 9 |   name: 'Calendar',
10 |   props: ['events'],
11 |   components: {
12 |     FullCalendar
13 |   }
14 | }
15 | </script>
16 | 
17 | <!-- Add "scoped" attribute to limit CSS to this component only -->
18 | <style>
19 | .red {
20 |   background: rgb(235, 77, 77) !important;
21 |   color: whitesmoke !important;
22 | }
23 | .blue {
24 |   background: rgb(59, 59, 163) !important;
25 |   color: whitesmoke !important;
26 | }
27 | .orange {
28 |   background: orange !important;
29 |   color: white !important;
30 | }
31 | .green {
32 |   background: rgb(49, 155, 49) !important;
33 |   color: white !important;
34 | }
35 | .blue,
36 | .orange,
37 | .red,
38 | .green {
39 |   font-size: 13px;
40 |   font-weight: 500;
41 |   text-transform: capitalize;
42 | }
43 | .event-item {
44 |   padding: 2px 0 2px 4px !important;
45 | }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/components/ColorPicker.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="picker-main"> 
 3 |     <h4 class="header">Select event theme</h4>
 4 |     <div class="color-picker">
 5 |       <div class="color" v-for="(theme, index) in colors" :key="index" @click="selectColor(theme)" :class="{selected: color === theme, [theme]: theme}"></div>
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   name: 'ColorPicker',
13 |   props: ['color'],
14 |   data(){
15 |     return {
16 |       colors: ['red', 'green', 'blue', 'orange']
17 |     }
18 |   },
19 |   methods: {
20 |     selectColor(color){
21 |       this.$emit('colorPicked', color);
22 |     }
23 |   }
24 | }
25 | </script>
26 | 
27 | <style scoped>
28 | .picker-main {
29 |   width: 55%;
30 | }
31 | .header {
32 |   font-size: 14px;
33 |   text-transform: uppercase;
34 |   color: orangered;
35 |   letter-spacing: 0.5px;
36 |   margin: 0 0 6px;
37 |   text-align: left;
38 | }
39 | .color-picker {
40 |   display: flex;
41 |   justify-content: space-around;
42 | }
43 | .color-picker > .color {
44 |   width: 40px;
45 |   height: 40px;
46 |   border-radius: 50%;
47 |   border: 1.5px solid whitesmoke;
48 |   cursor: pointer;
49 | }
50 | .color.selected{
51 |   box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.2);
52 |   border: 3px solid rgba(0, 0, 0, 0.4);
53 | }
54 | .color.red {
55 |   background: rgb(235, 77, 77);
56 | }
57 | .color.blue {
58 |   background: rgb(59, 59, 163);
59 | }
60 | .color.orange {
61 |   background: orange;
62 | }
63 | .color.green {
64 |   background: rgb(49, 155, 49);
65 | }
66 | </style>
67 | 


--------------------------------------------------------------------------------
/src/components/EventForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <form @submit.prevent="handleSubmit">
  3 |     <div class="input-holder">
  4 |       <input type="text" placeholder="Event title" v-model="event.title"/>
  5 |     </div>
  6 |     <div class="input-holder">
  7 |       <date-picker :placeholder="'Start date'" v-model="event.start" /> 
  8 |     </div>
  9 |     <div class="input-holder">
 10 |       <date-picker :placeholder="'End date'" v-model="event.end"/> 
 11 |     </div>
 12 |     <div class="input-holder">
 13 |       <textarea placeholder="Event description" rows="4" v-model="event.data.description" ></textarea>
 14 |     </div>
 15 |     <div class="input-holder">
 16 |       <color-picker @colorPicked="selectColor" :color="event.cssClass" />
 17 |     </div>
 18 |     <div class="input-holder">
 19 |       <button type="submit">Schedule</button>
 20 |     </div>
 21 |   </form>
 22 | </template>
 23 | 
 24 | 
 25 | <script>
 26 | import DatePicker from 'vuejs-datepicker';
 27 | import format from 'date-fns/format';
 28 | import ColorPicker from './ColorPicker';
 29 | 
 30 | export default {
 31 |   name: 'EventForm',
 32 |   data(){
 33 |     return {
 34 |       event: {
 35 |         title: '',
 36 |         start: '',
 37 |         end: '',
 38 |         cssClass: '',
 39 |         data: {
 40 |           description: ''
 41 |         }
 42 |       }
 43 |     }
 44 |   },
 45 |   methods: {
 46 |     async handleSubmit(){
 47 |       const start = format(this.event.start, 'YYYY-MM-DD');
 48 |       const end = format(this.event.end, 'YYYY-MM-DD');
 49 |       const event = {
 50 |         ...this.event,
 51 |         start,
 52 |         end
 53 |       }
 54 |       const req = await fetch('http://localhost:4001/schedule', {
 55 |         method: 'POST',
 56 |         body: JSON.stringify(event),
 57 |         headers: {
 58 |           'content-type': 'application/json'
 59 |         }
 60 |       });
 61 |       await req.json();
 62 |       this.resetValues();
 63 |     },
 64 |     selectColor(color){
 65 |       this.event = {
 66 |         ...this.event,
 67 |         cssClass: color
 68 |       }
 69 |     },
 70 |     resetValues(){
 71 |       this.event = {
 72 |         title: '',
 73 |         start: '',
 74 |         end: '',
 75 |         cssClass: '',
 76 |         data: {
 77 |           description: ''
 78 |         }
 79 |       }
 80 |     }
 81 | 
 82 |   },
 83 |   components: {
 84 |     DatePicker,
 85 |     ColorPicker
 86 |   }
 87 | }
 88 | </script>
 89 | 
 90 | 
 91 | <style>
 92 | form {
 93 |   display: flex;
 94 |   flex-direction: column;
 95 |   margin-left: 30px;
 96 | }
 97 | .input-holder {
 98 |   margin: 10px 0;
 99 |   display: flex;
100 |   justify-content: flex-start;
101 | }
102 | .vdp-datepicker {
103 |   width: 100%;
104 | }
105 | 
106 | .vdp-datepicker > div > input {
107 |   width: 77%;
108 | }
109 | 
110 | .input-holder > button {
111 |   justify-self: center;
112 |   padding: 12px 25px;
113 |   border-radius: 0;
114 |   text-transform: uppercase;
115 |   font-weight: 600;
116 |   background: orangered;
117 |   color: white;
118 |   border: none;
119 |   font-size: 14px;
120 |   letter-spacing: -0.1px;
121 |   cursor: pointer;
122 | }
123 | 
124 | input,
125 | textarea {
126 |   padding: 12px 15px;
127 |   border: 2px solid rgba(0, 0, 0, 0.2);
128 |   border-radius: 0;
129 |   width: 70%;
130 |   opacity: 0.8;
131 |   font-size: 15px;
132 |   font-weight: normal;
133 | }
134 | 
135 | input:focus,
136 | textarea:focus,
137 | button:focus {
138 |   border: 2px solid orangered;
139 |   outline: none;
140 |   box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.2);
141 | }
142 | </style>
143 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank">eslint</a></li>
13 |     </ul>
14 |     <h3>Essential Links</h3>
15 |     <ul>
16 |       <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
17 |       <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
18 |       <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
19 |       <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
20 |     </ul>
21 |     <h3>Ecosystem</h3>
22 |     <ul>
23 |       <li><a href="https://router.vuejs.org" target="_blank">vue-router</a></li>
24 |       <li><a href="https://vuex.vuejs.org" target="_blank">vuex</a></li>
25 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank">vue-devtools</a></li>
26 |       <li><a href="https://vue-loader.vuejs.org" target="_blank">vue-loader</a></li>
27 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
28 |     </ul>
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 | export default {
34 |   name: 'HelloWorld',
35 |   props: {
36 |     msg: String
37 |   }
38 | }
39 | </script>
40 | 
41 | <!-- Add "scoped" attribute to limit CSS to this component only -->
42 | <style scoped>
43 | h3 {
44 |   margin: 40px 0 0;
45 | }
46 | ul {
47 |   list-style-type: none;
48 |   padding: 0;
49 | }
50 | li {
51 |   display: inline-block;
52 |   margin: 0 10px;
53 | }
54 | a {
55 |   color: #42b983;
56 | }
57 | </style>
58 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount('#app')
9 | 


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