Create README.md

README.md

@@ -0,0 +1,2 @@
+# MEVN-Attendance-Tracker
+A project from ICS4U course, using the MEVN stack

attendancetracker/API/attendance.route.js

@@ -5,19 +5,22 @@ let Att = require('./attendee.model');
 
   attendanceRoute.route('/add').post(function (req, res) {
     let post = new Att(req.body);
+    //console.log(post);
     post.save()
       .then(() => {
         res.status(200).send("account created");
+        //console.log("success");
       })
       .catch(() => {
         res.status(400).send("unable to save to database");
+        //console.log("fail")
       });
   });
 
 
   attendanceRoute.route('/attendees').post(function (req, res) {
     let username = req.body.user;
-    console.log(username)
+    //console.log(username)
     Att.find({user: username}, function (err, posts){
         if(err) {
           res.json(err);
@@ -29,7 +32,7 @@ let Att = require('./attendee.model');
 
   attendanceRoute.route('/getById').post(function (req, res) {
     let username = req.body.user;
-    console.log(username)
+    //console.log(username)
     Att.find({user: username}, function (err, posts){
         if(err) {
           res.json(err);
@@ -40,7 +43,7 @@ let Att = require('./attendee.model');
 
 
   attendanceRoute.route('/getarr').post(function (req, res) {
-    console.log(req.body.number);
+    //console.log(req.body.number);
     var id = req.body.number;
     //console.log(id)
     Att.findById(id, function (err, arr){
@@ -73,4 +76,13 @@ let Att = require('./attendee.model');
   });
 });
 
+attendanceRoute.route('/delete').post(function (req, res) {
+  //console.log(req.body.id);
+  Att.findByIdAndRemove({_id: req.body.id}, function(err){
+      if(err) res.json(err);
+      else res.json('Successfully removed');
+  });
+});
+
+
 module.exports = attendanceRoute;

attendancetracker/API/club.model.js

@@ -0,0 +1,13 @@
+const mongoose = require('mongoose');
+const Schema  = mongoose.Schema;
+
+let CInfo = new Schema({
+    user: { type: String, required: true },
+    clubname: { type: String, required: true },
+    dates: {type: Array, required: false}
+},{
+    collection: 'cinfo'
+}
+);
+
+module.exports = mongoose.model('Club', CInfo);

attendancetracker/API/club.route.js

@@ -0,0 +1,96 @@
+const express = require('express');
+const clubRoute = express.Router();
+
+let CInfo = require('./club.model');
+
+clubRoute.route('/clubs').post(function (req, res) {
+    let username = req.body.user;
+    //console.log(username)
+    CInfo.find({user: username}, function (err, posts){
+        if(err) {
+          res.json(err);
+        }
+        res.json(posts);
+    });
+  });
+
+  clubRoute.route('/add').post(function (req, res) {
+    let post = new CInfo(req.body);
+    console.log(req.body);
+    post.save()
+      .then(() => {
+        res.status(200).send("account created");
+        
+      })
+      .catch(() => {
+        res.status(400).send("unable to save to database");
+        
+      });
+  });
+
+  clubRoute.route('/delete').post(function (req, res) {
+    //console.log(req.body.id);
+    CInfo.findByIdAndRemove({_id: req.body.id}, function(err){
+        if(err) res.json(err);
+        else res.json('Successfully removed');
+    });
+  });
+
+  clubRoute.route('/getone').post(function (req, res) {
+    let username = req.body.user;
+    console.log(username)
+    CInfo.findOne({user: username}, function (err, posts){
+        if(err) {
+          res.json(err);
+        }
+        console.log(posts);
+        res.json(posts);
+    });
+  });
+
+  clubRoute.route('/getbyID').post(function (req, res) {
+    //console.log(req.body.number);
+    var id = req.body.number;
+    //console.log(id)
+    CInfo.findById(id, function (err, arr){
+        if(err) {
+          res.json(err);
+        }
+        res.json(arr);
+        //console.log(arr);
+    });
+  });
+
+  clubRoute.route('/getdates').post(function (req, res) {
+    var username = req.body.user;
+    console.log(username);
+    CInfo.findOne({_id: username}, function (err, post){
+        if(err) {
+          res.json(err);
+        }
+        res.json(post);
+    });
+  });
+
+  clubRoute.route('/update').post(function (req, res){
+
+    var username = req.body.user;
+    var dates = req.body.dates;
+
+    CInfo.findOne({_id: username}, function(err, post) {
+      if (!post)
+        res.status(404).send("data is not found");
+      else {
+          //console.log(post);
+          post.dates = dates;
+          post.save().then(() => {
+            res.json('Update complete');
+        })
+        .catch(() => {
+              res.status(400).send("unable to update the database");
+        });
+      }
+  });
+});
+
+module.exports = clubRoute;

attendancetracker/API/login.route.js

@@ -4,15 +4,15 @@ const loginRoute = express.Router();
 let LInfo = require('./user.model');
 
 loginRoute.route('/add').post(function (req, res) {
-  console.log(req.body);
+  //console.log(req.body);
   var username = req.body.user;
   LInfo.findOne({user: username},
     function(err, user){
-      console.log(user);
+      //console.log(user);
   if(user == null){
     let post = new LInfo(req.body);  
     post.dates = [];
-    console.log(post);
+    //console.log(post);
     post.save()
     .then(() => {
       res.status(200).send("Account added successfully");
@@ -23,7 +23,7 @@ loginRoute.route('/add').post(function (req, res) {
   }
   else {
     res.json(user);
-    console.log("user");
+    //console.log("user");
   }
 });
 });
@@ -33,18 +33,18 @@ loginRoute.route('/post').post(function (req, res) {
     //console.log(res);
     var username = req.body.user;
     var password = req.body.pass;
-    console.log(username);
-    console.log(password);
+    //console.log(username);
+    //console.log(password);
       LInfo.findOne({user: username, pass: password},
         function(err, user){
-          console.log(user);
+          //console.log(user);
       if(!user){
         res.json(null);
-        console.log("err");
+        //console.log("err");
       }
       else {
         res.json(user);
-        console.log("user");
+        //console.log("user");
       }
     });
   });
@@ -65,7 +65,7 @@ loginRoute.route('/post').post(function (req, res) {
     var username = req.body.user;
     var dates = req.body.dates;
 
-    Att.findOne({user: username}, function(err, post) {
+    LInfo.findOne({user: username}, function(err, post) {
       if (!post)
         res.status(404).send("data is not found");
       else {
@@ -80,4 +80,7 @@ loginRoute.route('/post').post(function (req, res) {
       }
   });
 });
+
+
+
 module.exports = loginRoute;

attendancetracker/API/server.js

@@ -7,7 +7,7 @@ const mongoose = require('mongoose');
 const config = require('./DB.js');
 const attendanceRoute = require('./attendance.route');
 const loginRoute = require('./login.route');
-
+const clubsRoute = require('./club.route');
 
 
 mongoose.Promise = global.Promise;
@@ -22,6 +22,7 @@ app.use(bodyParser.json());
 
 app.use('/login', loginRoute);
 app.use('/attendance', attendanceRoute);
+app.use('/clubs', clubsRoute);
 
 
 app.listen(PORT, function(){

attendancetracker/public/index.html

@@ -4,12 +4,27 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>Attendance Tracker</title>
   </head>
+  <style>
+    #sorry {
+      text-align: center;
+      margin-top: 24%; 
+      font-family: Roboto, Open Sans, sans-serif;
+      color: black; 
+    }
+    #oops {
+      font-size: 40px; 
+      color: #134074; 
+    }
+  </style> 
   <body>
     <noscript>
-      <strong>We're sorry but Attendance Tracker doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <div id="sorry">
+      <strong id="oops">Uh oh, JavaScript seems to have kicked the bucket</strong>
+      <br> <br>
+      <strong>We're sorry, but Attendance Tracker doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      </div> 
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

attendancetracker/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="">
+  <div id="page">
   <transition name="fade">
     <router-view></router-view>
   </transition>
@@ -15,6 +15,18 @@ font-family: 'Avenir', Helvetica, Arial, sans-serif;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
+background-color: #f1f5f2;
+}
+
+#page{
+  background-color: #f1f5f2;
+}
+
+html{
+    background-color: #f1f5f2;
+}
+body{
+  background-color: #f1f5f2;
 }
 </style>
 

attendancetracker/src/components/Attendance.vue

@@ -1,12 +1,89 @@
 <template>
+    <div v-if="attendees.length == 0" id="none">
+    <div>
+  <b-navbar toggleable="lg" type="light" variant="light">
+    <b-navbar-brand href="#" style="margin-top: 8px;">Attendance Tracker</b-navbar-brand>
 
+    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+    <b-collapse id="nav-collapse" is-nav>
+      <b-navbar-nav>
+        <b-nav-item href="/calendar">Calendar</b-nav-item>
+        <b-nav-item-dropdown text="Insights">
+          <b-dropdown-item href="/insights/id">By Join Date</b-dropdown-item>
+          <b-dropdown-item href="/insights/presences">By Presences</b-dropdown-item>
+          <b-dropdown-item href="/insights/absences">By Absences</b-dropdown-item>
+        </b-nav-item-dropdown>
+        <b-nav-item href="/attendees">Manage Club Members</b-nav-item>
+        <b-nav-item href="/clubs">Select Club</b-nav-item>
+      </b-navbar-nav>
+
+      <!-- Right aligned nav items -->
+      <b-navbar-nav class="ml-auto">       
+
+        <b-nav-item-dropdown right>
+          <!-- Using 'button-content' slot -->
+          <template v-slot:button-content>
+            <em>{{user}}</em>
+          </template>
+          <b-dropdown-item @click.prevent="logout">Sign Out</b-dropdown-item>
+        </b-nav-item-dropdown>
+      </b-navbar-nav>
+    </b-collapse>
+  </b-navbar>
+</div>
+
+
+      <h1 id="title">Attendance for {{this.$route.params.id}}</h1>
+      <center>You have no members yet! Create some to take attendance.
+      <br>
+      Chart Loading Please wait...
+      </center>
+
+    </div>
+        <div v-else>
     <div id="whole-page">
-      <h1 id="title">Attendance</h1> 
+
+    <div>
+  <b-navbar toggleable="lg" type="light" variant="light">
+    <b-navbar-brand href="#" style="margin-top: 8px;">Attendance Tracker</b-navbar-brand>
+
+    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+    <b-collapse id="nav-collapse" is-nav>
+      <b-navbar-nav>
+        <b-nav-item href="/calendar">Calendar</b-nav-item>
+        <b-nav-item-dropdown text="Insights">
+          <b-dropdown-item href="/insights/id">By Join Date</b-dropdown-item>
+          <b-dropdown-item href="/insights/presences">By Presences</b-dropdown-item>
+          <b-dropdown-item href="/insights/absences">By Absences</b-dropdown-item>
+        </b-nav-item-dropdown>
+        <b-nav-item href="/attendees">Manage Club Members</b-nav-item>
+      </b-navbar-nav>
+
+      <!-- Right aligned nav items -->
+      <b-navbar-nav class="ml-auto">       
+
+        <b-nav-item-dropdown right>
+          <!-- Using 'button-content' slot -->
+          <template v-slot:button-content>
+            <em>{{user}}</em>
+          </template>
+          <b-dropdown-item @click.prevent="logout">Sign Out</b-dropdown-item>
+        </b-nav-item-dropdown>
+      </b-navbar-nav>
+    </b-collapse>
+  </b-navbar>
+</div>
+
+
+      <h1 id="title">{{club.clubname}} Attendance for {{this.$route.params.id}}</h1> 
+      <center style="padding-bottom: 1vh; ">*Note: changes are denoted by a darker coloured row.
+  </center>
         <div class="attendance">    
          <table id="presences">
          <tr style="border: none">
          <td colspan="3" style="border: none; padding: 5px;">
-         <center>Changes are denoted by a coloured row.</center>
          </td>
          </tr>
           <tr>
@@ -19,34 +96,55 @@
               <input type="hidden" :value="attendee.id"> 
               <td class="name" :id="attendee._id + ':n'">{{ attendee.name }}</td>
               <td class="present presentcheckbox" :id="attendee._id + ':pcheckbox'">
+                  <label class="container">
                   <input type="checkbox" :value="attendee._id" v-model="presentNames" :id="attendee._id + ':p'" @click="test(attendee._id, 'p', $event)">
+                  <span class="checkmark"></span>
+                  </label> 
               </td>
               <td class="absent absentcheckbox" :id="attendee._id + ':acheckbox'" >
+                  <label class="container">
                   <input type="checkbox" :value="attendee._id" v-model="absentNames" :id="attendee._id + ':a'" @click="test(attendee._id, 'a', $event)">
+                  <span class="checkmark"></span>
+                  </label> 
               </td>
             </tr>
           </tbody>
           <tr>
               <td class="buttone" colspan="3">
                 <form @submit.prevent="postAttendance">
-                   <button ><span>Take Attendance</span></button>
+                   <center><button class="button btn btn-success"><span>Take Attendance</span></button> <a href="/calendar" class="button btn btn-danger">Cancel</a></center>
                 </form>
+                
               </td>
           </tr>
         </table>
         </div>
     </div>
+    </div>
 </template>
 
 
 <style scoped>
   #whole-page {
     font-family: Open Sans, 'Source Sans Pro', sans-serif;
-    height: 100vh; 
-    width: 100vw; 
-    padding: 0; 
-    margin: 0; 
+    height: 100vh;
+    width: auto;
+    padding: 0;
+    margin: 0;
     background-color: #f1f5f2;
+    background-attachment: fixed;
+
+  }
+
+  #none {
+    font-family: Open Sans, 'Source Sans Pro', sans-serif;
+    height: 100vh;
+    width: auto;
+    padding: 0;
+    margin: 0;
+    background-color: #f1f5f2;
+    background-attachment: fixed;
+
   }
 
   #title{
@@ -60,7 +158,7 @@
     border-collapse: collapse; 
     width: 50%; 
     position: absolute; 
-    left: 35vw; 
+    left: 25vw; 
     background-color: white; 
     border-radius: 10px; 
   }
@@ -90,65 +188,61 @@
   }
 
   .presentcheckbox {
-    background-color: 
+    background-color: #6CD182; 
   }
 
-  .buttone {
-    text-align: center; 
-    border-bottom: none; 
+  .absentcheckbox {
+    background-color: #FF7F7F; 
   }
-
-  .buttone button {
-    background-color: #98c1d9; 
-    border: 1px #98c1d9; 
-    border-radius: 5px; 
-    padding: 1vh; 
-    padding-left: 2vh; 
-    padding-right: 2vh; 
-    color: #F7FFFB;
-    font-family: Roboto, Open Sans, sans-serif;  
-  }
-
-  .buttone button:hover {
-    background-color: #A4D0EA; 
-  }
-
 </style>
   
   <script>
+  
 
     export default {
         mounted() {
-          this.user = document.cookie.substring(document.cookie.indexOf("=")+1);
+          this.user = document.cookie.substring(document.cookie.indexOf("=")+1, document.cookie.indexOf(";"));
+          this.selected = document.cookie.substring(document.cookie.indexOf(";")+7);
           if(document.cookie == ""){
               this.$router.push({name: 'login'});
           }else{
-          this.post.user = this.user;
-          //alert(this.post.user);
-          let uri = 'http://65.92.152.100:4000/attendance/attendees';
+          
+          let url9 = 'http://192.168.1.11:4000/clubs/getbyID';
+          this.post2.number = this.selected;
+
+          this.axios.post(url9, this.post2).then(res => {
+          this.club = res.data;
+
+          this.post.user = this.club._id;
+          let uri = 'http://192.168.1.11:4000/attendance/attendees';
           this.axios.post(uri, this.post).then(res => {
           this.attendees = res.data;
-          //console.log(this.attendees);
           for(var element of this.attendees){
-            //console.log(element);
             if(element.presences.indexOf(this.$route.params.id) > -1){
               this.presentNames.push(element._id);
-              //document.getElementById(element + ":pcheckbox").style.backgroundColor = "green";
             }else{
               this.absentNames.push(element._id);
-              //document.getElementById(element + ":acheckbox").style.backgroundColor = "red";
             }
-            
           }
-          //console.log(this.presentNames);
         });
+          })
+          
+          
       }
         },
+        updated(){
+          var body = document.body, html = document.documentElement;
+          var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
+          document.getElementById("whole-page").style.height = height + "px";
+        },
       data() {
         return {
           attendees: [],
           att: {},
           absentNames: [],
+          selected: {},
+          club: {},
+          post2: {},
           presentNames: [],
           checked: true,
           post: {},
@@ -156,105 +250,151 @@
         }
       },
       methods: {
+        logout() {
+            document.cookie = "user= ; expires=Sun, 29 Dec 2019 00:00:00 UTC; path=/;";
+            document.cookie = "club= ; expires=Sun, 29 Dec 2019 00:00:00 UTC; path=/;";
+            this.$router.push({name: 'login'});
+        },
         postAttendance(){
           //iterate through all present, then all absent, and get array of that id user, then check for the current day, if it contains delete, and append the date to the correct array
           for(var element of this.presentNames){
             var test = {number: element};
-            let uri = 'http://65.92.152.100:4000/attendance/getarr';
+            let uri = 'http://192.168.1.11:4000/attendance/getarr';
             this.axios.post(uri, test).then(res => {
               var arr = res.data.presences;
               arr = arr.filter(e => e !== this.$route.params.id);
-              //console.log(arr);
               
               var arr2 = res.data.absenses;
               arr2 = arr2.filter(e => e !== this.$route.params.id);
-              //console.log(arr2);
 
               
               arr.push(this.$route.params.id);
               
               this.post.presences = arr;
               this.post.absenses = arr2;
-              //console.log(res.data._id);
-              var test2 = {id: res.data._id, presences: arr, absenses: arr2};
-              //console.log(test2);
-              let url = 'http://65.92.152.100:4000/attendance/post';
-              this.axios.post(url, test2).then(res => {
-                console.log(res);
-                
-                /*
-                var ldata = {user: this.user};
-                let url2 = 'http://65.92.152.100:4000/login/getdates';
-                this.axios.post(url2, ldata).then(res => {
-                  console.log(res.data);
-                  var arrd = res.data.dates;
-                  arrd = arrd.filter(e => e !== this.$route.params.id, this.date);
-                  var ddata = {dates: arrd, user: this.user};
-                  arrd.push(ddata);
-                  console.log(arrd);
 
-                  let url3 = 'http://65.92.152.100:4000/login/update';
-                  this.axios.post(url3, ddata).then(res => {
+              var test2 = {id: res.data._id, presences: arr, absenses: arr2};
+
+              let url = 'http://192.168.1.11:4000/attendance/post';
+              this.axios.post(url, test2).then(res => {
+                console.log("Arr: " + res);
+                
+                // start of user updating
+            
+                var ldata = {user: this.club._id};
+                let url2 = 'http://192.168.1.11:4000/clubs/getdates';
+                this.axios.post(url2, ldata).then(res => {
+                  //console.log(res.data);
+                  var arrd = res.data.dates;
+                  //arrd = arrd.filter(e => e !== this.$route.params.id, this.date);
+                  for(var i = 0; i<arrd.length; i++){
+                    if(arrd[i].date == this.$route.params.id){
+                      arrd[i] = null;
+                    }
+                  }
+
+                  arrd = arrd.filter(function (el) {
+                    return el != null;
+                  });
+                  
+                  var ddata = {date: this.$route.params.id, numPresent: this.presentNames.length};
+                  arrd.push(ddata);
+                  //console.log(arrd);
+
+                  var userPostData = {dates: arrd, user: this.club._id}
+
+                  let url3 = 'http://192.168.1.11:4000/clubs/update';
+                  this.axios.post(url3, userPostData).then(res => {
+                    //console.log("URL 3");
                     console.log(res);
+                    this.$router.push({name: 'calendar'});
                   })
                 })
-                */
 
               })
               
             })
           }
-          //alert("hello");
-
-          for(var element1 of this.absentNames){
+          
+          if(this.absentNames.length != 0){
+            //alert("absences")
+            for(var element1 of this.absentNames){
             var test1 = {number: element1};
-            let uri1 = 'http://65.92.152.100:4000/attendance/getarr';
+            let uri1 = 'http://192.168.1.11:4000/attendance/getarr';
             this.axios.post(uri1, test1).then(res => {
               var arrr = res.data.absenses;
               arrr = arrr.filter(e => e !== this.$route.params.id);
-              //console.log(arrr);
               
-              var arrr2 = res.data.presences;
+              var arrr2 = res.data.presences; 
               arrr2 = arrr2.filter(e => e !== this.$route.params.id);
 
-              
               arrr.push(this.$route.params.id);
               
               this.post.absenses = arrr;
-              //console.log(res.data._id);
+
               var testt2 = {id: res.data._id, presences: arrr2, absenses: arrr};
-              //console.log(test2);
-              let url1 = 'http://65.92.152.100:4000/attendance/post';
+
+              let url1 = 'http://192.168.1.11:4000/attendance/post';
               this.axios.post(url1, testt2).then(res => {
-                console.log(res);
-                this.$router.push({name: 'calendar'});
+                console.log("Arr2: " + res);
+                
               })
               
             })
+          }
+            // start of user updating
+            
+                var ldata = {user: this.club._id};
+                let url2 = 'http://192.168.1.11:4000/clubs/getdates';
+                this.axios.post(url2, ldata).then(res => {
+                  //console.log(res.data);
+                  var arrd = res.data.dates;
+                  //arrd = arrd.filter(e => e !== this.$route.params.id, this.date);
+                  for(var i = 0; i<arrd.length; i++){
+                    if(arrd[i].date == this.$route.params.id){
+                      arrd[i] = null;
+                    }
+                  }
+
+                  arrd = arrd.filter(function (el) {
+                    return el != null;
+                  });
+                  
+                  var ddata = {date: this.$route.params.id, numPresent: this.presentNames.length};
+                  arrd.push(ddata);
+                  console.log(arrd);
+
+                  var userPostData = {dates: arrd, user: this.club._id}
+
+                  let url3 = 'http://192.168.1.11:4000/clubs/update';
+                  this.axios.post(url3, userPostData).then(res => {
+                    console.log("URL 3");
+                    console.log(res);
+                    this.$router.push({name: 'calendar'});
+                  })
+                })
+
+
+
           }
         },
         test(input, type){
           var letter;
           if(type == "a"){
-            //alert(input);
-            //console.log(this.presentNames);
+
             this.presentNames = this.presentNames.filter(e => e !== input);
-            //console.log(this.presentNames);
+
             letter = "p";
             document.getElementById(input + ":acheckbox").style.backgroundColor = "red";
-            document.getElementById(input + ":pcheckbox").style.backgroundColor = "#f2f2f2";
+            document.getElementById(input + ":pcheckbox").style.backgroundColor = "#6CD182";
           }else{
             this.absentNames = this.absentNames.filter(e => e !== input);
             
             document.getElementById(input + ":pcheckbox").style.backgroundColor = "green";
-            document.getElementById(input + ":acheckbox").style.backgroundColor = "#f2f2f2";
-            letter = "a";
+            document.getElementById(input + ":acheckbox").style.backgroundColor = "#FF7F7F";
+            letter = "a"; 
           }
           document.getElementById(input + ":" + letter).checked = false;
-          
-
-          
-          
         }
         }
       } 

attendancetracker/src/components/Attendees.vue

@@ -1,40 +1,144 @@
 <template>
+    <div id="whole-page">
+
     <div>
+  <b-navbar toggleable="lg" type="light" variant="light">
+    <b-navbar-brand href="#" style="margin-top: 8px;">Attendance Tracker</b-navbar-brand>
+
+    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+    <b-collapse id="nav-collapse" is-nav>
+      <b-navbar-nav>
+        <b-nav-item href="/calendar">Calendar</b-nav-item>
+        <b-nav-item-dropdown text="Insights">
+          <b-dropdown-item href="/insights/id">By Join Date</b-dropdown-item>
+          <b-dropdown-item href="/insights/presences">By Presences</b-dropdown-item>
+          <b-dropdown-item href="/insights/absences">By Absences</b-dropdown-item>
+        </b-nav-item-dropdown>
+        <b-nav-item href="/attendees">Manage Club Members</b-nav-item>
+        <b-nav-item href="/clubs">Select Club</b-nav-item>
+      </b-navbar-nav>
+
+      <!-- Right aligned nav items -->
+      <b-navbar-nav class="ml-auto">       
+
+        <b-nav-item-dropdown right>
+          <!-- Using 'button-content' slot -->
+          <template v-slot:button-content>
+            <em>{{user}}</em>
+          </template>
+          <b-dropdown-item @click.prevent="logout">Sign Out</b-dropdown-item>
+        </b-nav-item-dropdown>
+      </b-navbar-nav>
+    </b-collapse>
+  </b-navbar>
+</div>
+
+
+
+
+      <h1 style="margin-top: 10px;"> Manage  {{club.clubname}} Members</h1>
         <table>
 
             <tr>
-                <th>Name </th>
-                <th>Delete</th>
+                <th>Member Name</th>
             </tr>
 
-            <tr v-for="attendee in attendees" :key="attendee._id">
+            <tr  v-for="attendee in attendees" :key="attendee._id">
                 <td>{{attendee.name}}</td>
-                <td> <form @submit.prevent="del" ><input type="hidden" :value="attendee._id"><button>Delete</button></form> </td>
+                <td id= "deletebuttone"><button class="btn btn-danger" @click.prevent="del(attendee._id)">Delete</button></td>
+            </tr>
+            <tr>
+              <td colspan="2" id="buttone">
+                <span><b>Add a Member: </b></span>
+                <form @submit.prevent="addUser"> 
+                <input type="text" id="name" v-model="attendee.name" class="text-input">
+                <button id="buttone" class="btn btn-lg btn-primary">Add Member</button>
+                </form>
+              </td>
             </tr>
         </table>
-    <br>
-        <form @submit.prevent="addUser">
-            <input type="text" id="name" v-model="attendee.name">
-            <button>Add User</button>
-        </form>
     </div>
 </template>
 
-<style>
+<style scoped>
+#whole-page {
+    font-family: Open Sans, 'Source Sans Pro', sans-serif;
+    height: 100vh;
+    width: auto;
+    padding: 0;
+    margin: 0;
+    background-color: #f1f5f2;
+    background-attachment: fixed;
+
+  }
+
+h1 {
+  font-family: Roboto, Open Sans, sans-serif; 
+  color: #3d5a80; 
+  text-align: center; 
+}
+table {
+    table-layout: fixed; 
+    border-collapse: collapse; 
+    width: 50%; 
+    position: absolute; 
+    left: 25vw; 
+    background-color: white; 
+    border-radius: 10px; 
+  }
+
+td{
+  padding: 1vh;
+  border-top: 1px solid #ddd;
+}
+
+th{
+  padding: 1vh;
+}
+
+#deletebuttone {
+  text-align: right; 
+}
+
+.text-input{
+  padding: 10px;
+  font-size: 17px;
+  border: 1px solid grey;
+  border-radius: 5px;
+  float: left;
+  width: 66%;
+  background: #f1f1f1;
+}
+
+#buttone {
+  margin-left: 0.5vw; 
+}
+
 
 </style>
 
 <script>
 export default {
         mounted() {
-            this.checkAccount();
-          this.post.user = this.user;
-          //alert(this.post.user);
-          let uri = 'http://65.92.152.100:4000/attendance/attendees';
-          this.axios.post(uri, this.post).then(res => {
-          this.attendees = res.data;
-          console.log(this.attendees);
+          this.checkAccount();
+              let url9 = 'http://192.168.1.11:4000/clubs/getbyID';
+              this.post2.number = this.selected;
+
+              this.axios.post(url9, this.post2).then(res => {
+              this.club = res.data;
+
+              this.post.user = this.club._id;
+              //alert(this.post.user);
+              let uri = 'http://192.168.1.11:4000/attendance/attendees';
+              this.axios.post(uri, this.post).then(res => {
+              this.attendees = res.data;
+              console.log(this.attendees);
           });
+        })
+
+
+          
 
         },
       data() {
@@ -42,24 +146,38 @@ export default {
           user: null,
           attendees: [],
           post: {},
+          post2: {},
+          selected: {},
+          club: {},
           attendee: {}
         }
       },
       methods: {
+          logout() {
+            document.cookie = "user= ; expires=Sun, 29 Dec 2019 00:00:00 UTC; path=/;";
+            document.cookie = "club= ; expires=Sun, 29 Dec 2019 00:00:00 UTC; path=/;";
+            this.$router.push({name: 'login'});
+        },
         checkAccount(){
-            this.user = document.cookie.substring(document.cookie.indexOf("=")+1);
+            this.user = document.cookie.substring(document.cookie.indexOf("=")+1, document.cookie.indexOf(";"));
+            this.selected = document.cookie.substring(document.cookie.indexOf(";")+7);
             if(document.cookie == ""){
                 this.$router.push({name: 'login'});
         }
         },
-        del(){
-
+        del(id){
+            this.post.id = id;
+            //alert(id);
+            let uri = 'http://192.168.1.11:4000/attendance/delete';
+            this.axios.post(uri, this.post).then(() => {
+                location.reload();
+            });
         },
         addUser(){
-          alert(this.attendee.name);
-          this.attendee.user = this.user;
-          
-          let uri = 'http://65.92.152.100:4000/attendance/add';
+          //alert(this.attendee.name);
+          this.attendee.user = this.club._id;
+          console.log(this.attendee);
+          let uri = 'http://192.168.1.11:4000/attendance/add';
           this.axios.post(uri, this.attendee).then(() => {
               location.reload();
           });

attendancetracker/src/components/Calendar.vue

@@ -1,164 +1,254 @@
 <template>
 
-    <div id="page">
-    <nav class="navbar navbar-expand-lg navbar-light bg-light">
-        <div class="container-fluid">
+    <div id="whole-page">
+      
 
-            <button type="button" id="sidebarCollapse" class="btn btn-info">
-                <i class="fas fa-align-left"></i>
-                <span>Toggle Sidebar</span>
-            </button>
+      <div>
+  <b-navbar toggleable="lg" type="light" variant="light">
+    <b-navbar-brand href="#" style="margin-top: 8px;">Attendance Tracker</b-navbar-brand>
 
+    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+    <b-collapse id="nav-collapse" is-nav>
+      <b-navbar-nav>
+        <b-nav-item href="/calendar">Calendar</b-nav-item>
+        <b-nav-item-dropdown text="Insights">
+          <b-dropdown-item href="/insights/id">By Join Date</b-dropdown-item>
+          <b-dropdown-item href="/insights/presences">By Presences</b-dropdown-item>
+          <b-dropdown-item href="/insights/absences">By Absences</b-dropdown-item>
+        </b-nav-item-dropdown>
+        <b-nav-item href="/attendees">Manage Club Members</b-nav-item>
+        <b-nav-item href="/clubs">Select Club</b-nav-item>
+      </b-navbar-nav>
+
+      <!-- Right aligned nav items -->
+      <b-navbar-nav class="ml-auto">       
+
+        <b-nav-item-dropdown right>
+          <!-- Using 'button-content' slot -->
+          <template v-slot:button-content>
+            <em>{{user}}</em>
+          </template>
+          <b-dropdown-item @click.prevent="logout">Sign Out</b-dropdown-item>
+        </b-nav-item-dropdown>
+      </b-navbar-nav>
+    </b-collapse>
+  </b-navbar>
+</div>
+        <center>
+        <div class="container">
+        <div id="" style="width: 35%; float:left; margin:10px;" class="box">
+        <h3>Welcome to Attendance Tracker, {{user}}!</h3>
+        <ul style="text-align: left;">
+          <li><b>-</b> Get started by adding clubs on the <a href="/clubs">"Select Club"</a> page. </li>
+          <br>
+          <li><b>-</b> Create some club members on the <a href="/attendees">"Manage Club Members"</a> page. </li>
+          <br>
+          <li><b>-</b> Use the calendar to select a date to take attendance.</li>
+          <br>
+          <li><b>-</b> A day with attendance taken will be highlighted in blue. </li>
+        </ul>
+  
         </div>
-    </nav>
-
-        <h1>Welcome, {{user}}</h1>
         
+        <div id="" style="width: 60%; float:left; margin:10px;" class="box">
         <form @submit.prevent="att">
         <div id="cal">
-       <b-calendar v-model="value" locale="en-US" class="cal" selected-variant="danger" width="150vh" hide-header></b-calendar> 
-        </div>
+        <div v-if="!dates"><center>Calendar loading please wait...</center></div>
+        <div v-else>
+          <h2>Calendar for {{club.clubname}}</h2>
+          <b-calendar v-model="value" locale="en-US" class="cal" selected-variant="primary" width="30vw" :date-info-fn="dateClass">
+          <div class="d-flex" dir="ltr">
+            <b-button
+              size="sm"
+              variant="outline-danger"
+              v-if="value"
+              @click="clearDate"
+            >
+            Clear date
+            </b-button>
+            <b-button
+              size="sm"
+              variant="outline-primary"
+              class="ml-auto"
+              @click="setToday"
+            >
+              Set Today
+      </b-button>
+    </div>
+          </b-calendar> 
+          </div>
+          </div>
+        
+        <p id="incorrect">Please select a date in the calendar </p>
+        <br>
+        <div id="buttone"> 
         <button class="btn btn-primary">Take/View Attendance</button>
+        </div>
         </form>
-  
-<!-- Trigger/Open The Modal -->
-<h2>Modal Example</h2>
+        </div>
+        <br>
+        <br>
+        </div>
 
-<!-- Trigger/Open The Modal -->
-<form @submit.prevent="btnClick">
-<button id="myBtn">Open Modal</button>
-</form>
-<!-- The Modal -->
-<div id="myModal" class="modal">
-
-  <!-- Modal content -->
-  <div class="modal-content">
-    <span class="close" @click="spanClick">&times;</span>
-    <p>Some text in the Modal..</p>
-  </div>
-
-</div>
-
-  
-  <form @submit.prevent="logout">
-    <button id="logout"> Log Out </button> 
-  </form>
-
-
-  <form @submit.prevent="addUser">
-    <input type="text" id="name" v-model="attendee.name">
-    <button>Add User</button>
-  </form>
+        <div id="calcontainer" style="width: 70%">
+        <h3>{{club.clubname}} Attendance</h3>
+        <div v-if="chartData.length == 1"><center>You haven't taken any attendance yet! Take some to view club performance.</center></div>
+        <div v-else>
+        <GChart type="LineChart" :data="chartData" :options="chartOptions" id="graph" style=""/>
+        </div>
+        </div>
+        
+        </center>
+        
 </div>
 </template>
 
-<style>
-    #cal{
+<style scoped>
+    #cal, #buttone{
         text-align: center; 
-        height: 50vh; 
     }
     .cal {
-      height: 500px; 
       border: 1px red; 
     }
 
-    .modal {
-  display: none; /* Hidden by default */
-  position: fixed; /* Stay in place */
-  z-index: 1; /* Sit on top */
-  padding-top: 100px; /* Location of the box */
-  left: 0;
-  top: 0;
-  width: 100%; /* Full width */
-  height: 100%; /* Full height */
-  overflow: auto; /* Enable scroll if needed */
-  background-color: rgb(0,0,0); /* Fallback color */
-  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-}
+    h1 {
+      font-family: Roboto, Open Sans, sans-serif; 
+      color: #3d5a80; 
+      padding: 20px;
+      text-align: left; 
+    }
 
-/* Modal Content */
-.modal-content {
-  background-color: #fefefe;
-  margin: auto;
-  padding: 20px;
-  border: 1px solid #888;
-  width: 80%;
-}
+    #buttone button{
+      width: 15vw;
+      margin-top: -5vh;  
+    }
 
-/* The Close Button */
-.close {
-  color: #aaaaaa;
-  float: right;
-  font-size: 28px;
-  font-weight: bold;
-}
+    #whole-page{
+      height: 100%;
+      text-align: center;
+    }
+
+    #incorrect {
+      text-align: center; 
+      display: none; 
+    }
+
+    #calcontainer{
+      background-color: white;
+      width: 75%;
+      text-align: center;
+      padding: 20px;
+      border-radius: 10px;
+      display: inline-block;
+    }
+    .box{
+    }
+    
 
-.close:hover,
-.close:focus {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer;
-}
 </style>
   
   <script> 
     export default {
-        mounted() {
+        created() {
             this.checkAccount()
 
-              // Get the modal
-              this.modal = document.getElementById("myModal");
+            let url9 = 'http://192.168.1.11:4000/clubs/getbyID';
+            this.post.number = this.selected;
 
-              // Get the button that opens the modal
-              this.btn = document.getElementById("myBtn");
-
-              // Get the <span> element that closes the modal
-              this.span = document.getElementsByClassName("close")[0];
+            this.axios.post(url9, this.post).then(res => {
+              this.club = res.data;
 
+              var ldata = {user: this.club._id};
+              let url2 = 'http://192.168.1.11:4000/clubs/getdates';
+              this.axios.post(url2, ldata).then(res => {
               
+              var datearr = res.data.dates;
+              console.log(res.data.dates)
+              this.dates = [];
+              for(var i =0; i<datearr.length; i++){
+                this.dates[i] = datearr[i].date;
+                this.chartData[i+1] = [this.dates[i], datearr[i].numPresent];
+              }
+            })
+            })
+
+            
+        },
+        updated(){
+          var body = document.body, html = document.documentElement;
+          var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
+          document.getElementById("whole-page").style.height = height + "px";
         },
       data() {
         return {
           value: '',
           context: null,
+          selected: {},
+          club: {},
+          post: {},
           user: null,
           attendee: {}, 
           modal: null, 
           btn: null, 
-          span: null
+          span: null,
+          dates: null,
+          chartData: [
+              ["Dates", "Attendances"]
+          ],
+            chartOptions: {
+              chart: {
+              title: "Club Performance",
+              width: 100, 
+              height: 400
+            }
+          }
         }
       },
       methods: {
         logout() {
             document.cookie = "user= ; expires=Sun, 29 Dec 2019 00:00:00 UTC; path=/;";
+            document.cookie = "club= ; expires=Sun, 29 Dec 2019 00:00:00 UTC; path=/;";
             this.$router.push({name: 'login'});
         },
         checkAccount(){
-            this.user = document.cookie.substring(document.cookie.indexOf("=")+1);
+          console.log(document.cookie);
+            this.user = document.cookie.substring(document.cookie.indexOf("=")+1, document.cookie.indexOf(";"));
+            this.selected = document.cookie.substring(document.cookie.indexOf(";")+7);
             if(document.cookie == ""){
                 this.$router.push({name: 'login'});
             }
         },
         att(){
           if(this.value == ''){
-            alert("SILLY BOII You must select a date!");
+            document.getElementById("incorrect").style.display = "block"; 
           }else{
             this.$router.push({name: 'attendance', params: { id: this.value }});
           }
         },
-        addUser(){
-          alert(this.attendee.name);
-          this.attendee.user = this.user;
+        setToday() {
+          const now = new Date()
+          this.value = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+        },
+        clearDate() {
+          this.value = ''
+        },
+        dateClass(ymd, date) {
+          var year = 1900 + date.getYear();
+          var month = date.getMonth() + 1 + "";
+          if(month.length == 1){
+            month = "0" + month;
+          }
+
+          var day = date.getDate() + "";
+
+          if(day.length == 1){
+            day = "0" + day;
+          }
           
-          let uri = 'http://65.92.152.100:4000/attendance/add';
-          this.axios.post(uri, this.attendee).then(() => {
-          });
-        },
-        btnClick() {
-          this.modal.style.display = "block";
-        },
-        spanClick() {
-          this.modal.style.display = "none";
+          var str = year + "-" + month + "-" + day
+
+          return this.dates.includes(str) ? 'table-info' : ''
         }
       }
     }

attendancetracker/src/components/Clubs.vue

@@ -0,0 +1,189 @@
+<template>
+    <div id="whole-page">
+
+    <div>
+  <b-navbar toggleable="lg" type="light" variant="light">
+    <b-navbar-brand href="#" style="margin-top: 8px;">Attendance Tracker</b-navbar-brand>
+
+    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+    <b-collapse id="nav-collapse" is-nav>
+      <b-navbar-nav>
+        <b-nav-item href="/calendar">Calendar</b-nav-item>
+        <b-nav-item-dropdown text="Insights">
+          <b-dropdown-item href="/insights/id">By Join Date</b-dropdown-item>
+          <b-dropdown-item href="/insights/presences">By Presences</b-dropdown-item>
+          <b-dropdown-item href="/insights/absences">By Absences</b-dropdown-item>
+        </b-nav-item-dropdown>
+        <b-nav-item href="/attendees">Manage Club Members</b-nav-item>
+        <b-nav-item href="/clubs">Select Club</b-nav-item>
+      </b-navbar-nav>
+
+      <!-- Right aligned nav items -->
+      <b-navbar-nav class="ml-auto">       
+
+        <b-nav-item-dropdown right>
+          <!-- Using 'button-content' slot -->
+          <template v-slot:button-content>
+            <em>{{user}}</em>
+          </template>
+          <b-dropdown-item @click.prevent="logout">Sign Out</b-dropdown-item>
+        </b-nav-item-dropdown>
+      </b-navbar-nav>
+    </b-collapse>
+  </b-navbar>
+</div>
+
+
+
+
+      <h1 style="margin-top: 10px;"> Manage Clubs</h1>
+        <table>
+
+            <tr>
+                <th>Club Name (# Days)</th>
+            </tr>
+
+            <tr  v-for="club in clubs" :key="club._id">
+                <td><span v-if="selected == club._id"><b>{{club.clubname}} ({{club.dates.length}})</b></span> <span v-else>{{club.clubname}} ({{club.dates.length}})</span> </td>
+                <td id= "deletebuttone"><button class="btn btn-success" @click.prevent="sel(club._id)">Select</button> <button class="btn btn-danger" @click.prevent="del(club._id)">Delete</button></td>
+            </tr>
+            <tr>
+              <td colspan="2" id="buttone">
+                <span><b>Add a Club: </b></span>
+                <form @submit.prevent="addUser"> 
+                <input type="text" id="name" v-model="club.name" class="text-input">
+                <button id="buttone" class="btn btn-lg btn-primary">Add Club</button>
+                </form>
+              </td>
+            </tr>
+        </table>
+    </div>
+</template>
+
+<style scoped>
+#whole-page {
+    font-family: Open Sans, 'Source Sans Pro', sans-serif;
+    height: 100vh;
+    width: auto;
+    padding: 0;
+    margin: 0;
+    background-color: #f1f5f2;
+    background-attachment: fixed;
+
+  }
+
+h1 {
+  font-family: Roboto, Open Sans, sans-serif; 
+  color: #3d5a80; 
+  text-align: center; 
+}
+table {
+    table-layout: fixed; 
+    border-collapse: collapse; 
+    width: 50%; 
+    position: absolute; 
+    left: 25vw; 
+    background-color: white; 
+    border-radius: 10px; 
+  }
+
+td{
+  padding: 1vh;
+  border-top: 1px solid #ddd;
+}
+
+th{
+  padding: 1vh;
+}
+
+#deletebuttone {
+  text-align: right; 
+}
+
+.text-input{
+  padding: 10px;
+  font-size: 17px;
+  border: 1px solid grey;
+  border-radius: 5px;
+  float: left;
+  width: 66%;
+  background: #f1f1f1;
+}
+
+#buttone {
+  margin-left: 0.5vw; 
+}
+
+
+</style>
+
+<script>
+export default {
+        mounted() {
+            this.checkAccount();
+          this.post.user = this.user;
+          //alert(this.post.user);
+          let uri = 'http://192.168.1.11:4000/clubs/clubs';
+          this.axios.post(uri, this.post).then(res => {
+          this.clubs = res.data;
+          //console.log(this.clubs);
+          });
+
+        },
+      data() {
+        return {
+          user: null,
+          clubs: [],
+          post: {},
+          club: {},
+          selected: {},
+        }
+      },
+      methods: {
+          logout() {
+            document.cookie = "user= ; expires=Sun, 29 Dec 2019 00:00:00 UTC; path=/;";
+            document.cookie = "club= ; expires=Sun, 29 Dec 2019 00:00:00 UTC; path=/;";
+            this.$router.push({name: 'login'});
+        },
+        checkAccount(){
+            this.user = document.cookie.substring(document.cookie.indexOf("=")+1, document.cookie.indexOf(";"));
+            this.selected = document.cookie.substring(document.cookie.indexOf(";")+7);
+            console.log(this.selected);
+            if(document.cookie == ""){
+                this.$router.push({name: 'login'});
+        }
+        },
+        del(id){
+            this.post.id = id;
+            //alert(id);
+            if(this.post.id == this.selected){
+                alert("You cannot delete your selected club!")
+            }else{
+            let uri = 'http://192.168.1.11:4000/clubs/delete';
+            if(this.clubs.length != 1){
+            this.axios.post(uri, this.post).then(() => {
+                location.reload();
+            });
+            }else{
+                alert("You must have at least one club!");
+            }
+            }
+        },
+        addUser(){
+          //alert(this.attendee.name);
+          this.club.user = this.user;
+          this.club.clubname = this.club.name;
+          
+          let uri = 'http://192.168.1.11:4000/clubs/add';
+          this.axios.post(uri, this.club).then(() => {
+              location.reload();
+          });
+        },
+        sel(id){
+            document.cookie = "club= " + id + ";";
+            location.reload();
+        },
+      }
+}
+</script>

attendancetracker/src/components/Insights.vue

@@ -1,29 +1,113 @@
 <template>
+    <div id="whole-page">
+
+
     <div>
+  <b-navbar toggleable="lg" type="light" variant="light">
+    <b-navbar-brand href="#" style="margin-top: 8px;">Attendance Tracker</b-navbar-brand>
+
+    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+    <b-collapse id="nav-collapse" is-nav>
+      <b-navbar-nav>
+        <b-nav-item href="/calendar">Calendar</b-nav-item>
+        <b-nav-item-dropdown text="Insights">
+          <b-dropdown-item href="/insights/id">By Join Date</b-dropdown-item>
+          <b-dropdown-item href="/insights/presences">By Presences</b-dropdown-item>
+          <b-dropdown-item href="/insights/absences">By Absences</b-dropdown-item>
+        </b-nav-item-dropdown>
+        <b-nav-item href="/attendees">Manage Club Members</b-nav-item>
+        <b-nav-item href="/clubs">Select Club</b-nav-item>
+      </b-navbar-nav>
+
+      <!-- Right aligned nav items -->
+      <b-navbar-nav class="ml-auto">       
+
+        <b-nav-item-dropdown right>
+          <!-- Using 'button-content' slot -->
+          <template v-slot:button-content>
+            <em>{{user}}</em>
+          </template>
+          <b-dropdown-item @click.prevent="logout()">Sign Out</b-dropdown-item>
+        </b-nav-item-dropdown>
+      </b-navbar-nav>
+    </b-collapse>
+  </b-navbar>
+</div>
+
+
+  <h1 style="margin-top: 10px;">{{club.clubname}} Insights Page</h1>
+    <h2 style="margin-top: 10px; text-align: center;">{{ header }}</h2>
+        <div v-if="chartData.length == 1"><center>You have no members yet! Add some to get insights. <br>Chart Loading, please wait...</center></div>
+        <div v-else>
+        <center>
+        <GChart style="max-width: 70%;" type="ColumnChart" :data="chartData" :options="chartOptions" id="graph" /></center></div>
+        <br>
+        <center>
         <table id="presences">
           <tr>
             <th class="name">Name</th>
             <th class="present">Presences</th>
             <th class="absent">Absences</th>
           </tr>
+          
           <tbody id="table">
             <tr v-for="attendee in attendees" :key="attendee._id">
-              <input type="hidden" :value="attendee.id"> 
-              <td>{{ attendee.name }}</td>
-              <td>{{attendee.presences.length}}</td>
-              <td>{{attendee.absenses.length}}</td>
+              <td align="left">{{ attendee.name }}</td>
+              <td align="center">{{attendee.presences.length}}</td>
+              <td align="center">{{attendee.absenses.length}}</td>
             </tr>
           </tbody>
         </table>
-
-        <div v-if="chartData.length == 1">Chart Loading Please wait...</div>
-        <div v-else><GChart type="BarChart" :data="chartData" :options="chartOptions" /></div>
-
-
+        </center>
     </div>
 </template>
 
-<style>
+<style scoped>
+#whole-page {
+    font-family: Open Sans, 'Source Sans Pro', sans-serif;
+    height: 100vh; 
+    width: auto;  
+    padding: 0; 
+    margin: 0; 
+    background-color: #f1f5f2;
+
+  }
+
+table {
+    table-layout: fixed; 
+    border-collapse: collapse; 
+    width: 50%; 
+    background-color: white; 
+    border-radius: 10px; 
+    border: none;
+    
+  } 
+
+h1 {
+  font-family: Roboto, Open Sans, sans-serif; 
+  color: #3d5a80; 
+  text-align: center; 
+}
+
+td{
+  padding: 1vh;
+  border-top: 1px solid #ddd;
+}
+
+th{
+  padding: 1vh;
+}
+
+  #graph{
+    max-width: 40%;
+    border-radius: 20px;
+    
+  }
+
+  .present, .absent {
+    text-align: center; 
+  }
 
 </style>
 
@@ -32,22 +116,34 @@
 
 export default {
         mounted() {
-            
-            this.user = document.cookie.substring(document.cookie.indexOf("=")+1);
-            if(document.cookie == ""){
+            this.user = document.cookie.substring(document.cookie.indexOf("=")+1, document.cookie.indexOf(";"));
+            this.selected = document.cookie.substring(document.cookie.indexOf(";")+7);
+            let url = 'http://192.168.1.11:4000/clubs/getbyID';
+            let temp = {number: this.selected};
+            this.axios.post(url, temp).then(res => {
+              this.club = res.data;
+              //console.log(this.clubs);
+
+              if(document.cookie == ""){
                 this.$router.push({name: 'login'});
-            }
+           }
             
             if(this.$route.params.method == "id"){
+                this.header = "Join Date (Left to Right)";
                 this.getAttById();
             }else if(this.$route.params.method == "presences"){
+                this.header = "Most Presences";
                 this.getAttByPresences();
                 
             }else if(this.$route.params.method == "absences"){
+                 this.header = "Most Absences";
                 this.getAttByAbsenses();
                 
             }
-            console.log(this.$route.params.method)
+            //console.log(this.$route.params.method)
+          })
+
+            
 
             
         },
@@ -55,21 +151,24 @@ export default {
         return {
           attendees: [],
           user: "",
+          header: "",
+          club: {},
           chartData: [
               ["User", "Attendances"]
           ],
-          chartOptions: {
-        chart: {
-          title: "Company Performance",
-          subtitle: "Sales, Expenses, and Profit: 2014-2017"
-        }
-        }
+            chartOptions: {
+              chart: {
+              title: "Club Performance",
+              width: 100, 
+              height: 400
+            }
+          }
         }
       },
       methods: {
           getAttById(){
-            var data = {user: this.user};
-            let uri = 'http://65.92.152.100:4000/attendance/getById';
+            var data = {user: this.selected};
+            let uri = 'http://192.168.1.11:4000/attendance/getById';
             this.axios.post(uri, data).then(res => {
                 console.log(res);
                 this.attendees = res.data;
@@ -77,32 +176,33 @@ export default {
                 for(var i = 0; i < this.attendees.length; i++){
                 this.chartData[i+1] = [this.attendees[i].name, parseInt(this.attendees[i].presences.length, 10)]
                 }
+                console.log(this.chartData);
           });
           },
           getAttByPresences(){
-              var data = {user: this.user};
-            let uri = 'http://65.92.152.100:4000/attendance/getById';
+              var data = {user: this.selected};
+            let uri = 'http://192.168.1.11:4000/attendance/getById';
             this.axios.post(uri, data).then(res => {
                 console.log(res);
                 this.attendees = res.data;
                 this.attendees.sort(function(a, b){return b.presences.length - a.presences.length});
 
-                for(var i = 0; i < this.attendees.length; i++){
+                for(var i = 0; i < 5; i++){
                 this.chartData[i+1] = [this.attendees[i].name, parseInt(this.attendees[i].presences.length, 10)]
                 }
                 //console.log(this.chartData)
           });
           },
           getAttByAbsenses(){
-              var data = {user: this.user};
-            let uri = 'http://65.92.152.100:4000/attendance/getById';
+              var data = {user: this.selected};
+            let uri = 'http://192.168.1.11:4000/attendance/getById';
             this.axios.post(uri, data).then(res => {
                 console.log(res);
                 this.attendees = res.data;
                 this.attendees.sort(function(a, b){return b.absenses.length - a.absenses.length});
 
-                for(var i = 0; i < this.attendees.length; i++){
-                this.chartData[i+1] = [this.attendees[i].name, parseInt(this.attendees[i].presences.length, 10)]
+                for(var i = 0; i < 5; i++){
+                this.chartData[i+1] = [this.attendees[i].name, parseInt(this.attendees[i].absenses.length, 10)]
                 }
           });
       }

attendancetracker/src/components/Login.vue

@@ -155,7 +155,7 @@ input:focus {
           },
         methods: {
             add(){
-            let uri = 'http://65.92.152.100:4000/login/post';
+            let uri = 'http://192.168.1.11:4000/login/post';
             this.axios.post(uri, this.post).then(res => {
               if(!res.data){
                  document.getElementById("incorrect").style.display = "block"; 
@@ -163,8 +163,15 @@ input:focus {
                  document.getElementsByClassName("text-input")[1].style.border = "3px solid red"; 
               }else{
                 document.getElementById("incorrect").style.display = "none"; 
-                this.$router.push({name: 'calendar'});
+                
                 document.cookie = "user="+res.data.user;
+
+                let url = 'http://192.168.1.11:4000/clubs/getone';
+                  this.axios.post(url, this.post).then(res2 => {
+                    console.log(res2);
+                    document.cookie = "club=" + res2.data._id + ";";
+                    this.$router.push({name: 'calendar'});
+                })
               }
             });
           }

attendancetracker/src/components/Register.vue

@@ -27,7 +27,7 @@
         </div>
         <div class="login-button">
           <div class="control">
-              <button class="buttone" style="width: 55%"><span>Create Account</span></button><a href="/" class="buttone button" style="color: white; width: 25%"><span>Login</span></a>
+              <button class="buttone" style="width: 60%"><span>Create Account</span></button><a href="/" class="buttone button" style="color: white; width: 30%"><span>Login</span></a>
         </div>
         </div> 
       </div>
@@ -36,6 +36,46 @@
 </div>
   </template>
 
+<script>
+    export default {
+      data() {
+            return {
+              post: {},
+              club: {},
+            }
+          },
+        methods: {
+            add(){
+            if(this.post.user != "" || this.post.email != "" || this.post.pass != ""){ 
+            let uri = 'http://192.168.1.11:4000/login/add';
+            this.axios.post(uri, this.post).then(res => {
+              console.log(res);
+              if(!res.data.user){
+                alert("Success! Account Created!");
+
+                this.club.user = this.post.user;
+                this.club.clubname = "First";
+          
+                let url = 'http://192.168.1.11:4000/clubs/add';
+                this.axios.post(url, this.club).then(() => {
+                  console.log("Added First Club")
+                })
+
+                this.$router.push({name: 'login'});
+              }else{
+                alert("Error username already in use!")
+              }
+            });
+            
+            }else{
+              alert("Fields must not be empty!")
+            }
+        }
+    }
+  }
+  </script>
+
+
   <style scoped>
   #whole-page {
     font-family: Open Sans, 'Source Sans Pro', sans-serif;
@@ -154,31 +194,4 @@ input:focus {
     
   </style>
 
-  <script>
-    export default {
-      data() {
-            return {
-              post: {}
-            }
-          },
-        methods: {
-            add(){
-            if(this.post.user != "" || this.post.email != "" || this.post.pass != ""){ 
-            let uri = 'http://65.92.152.100:4000/login/add';
-            this.axios.post(uri, this.post).then(res => {
-              console.log(res);
-              if(!res.data.user){
-                alert("Success! Account Created!");
-                this.$router.push({name: ''});
-              }else{
-                alert("Error username already in use!")
-              }
-            });
-            
-            }else{
-              alert("Fields must not be empty!")
-            }
-        }
-    }
-  }
-  </script>
+  

attendancetracker/src/main.js

@@ -32,7 +32,7 @@ import Register from './components/Register.vue';
 import Attendance from './components/Attendance.vue';
 import Insights from './components/Insights.vue';
 import Attendees from './components/Attendees.vue';
-
+import Clubs from './components/Clubs.vue';
 
 const routes = [
   {
@@ -65,6 +65,11 @@ const routes = [
     path: '/attendees',
     component: Attendees
   },
+  {
+    name: 'Clubs',
+    path: '/clubs',
+    component: Clubs
+  },
 ];
 
 const router = new VueRouter({ mode: 'history', routes: routes});