finished

attendancetracker/API/attendance.route.js

@@ -73,4 +73,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/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,88 @@
 <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-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">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,10 +95,16 @@
               <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>
@@ -36,17 +118,31 @@
         </table>
         </div>
     </div>
+    </div>
 </template>
 
 
 <style scoped>
   #whole-page {
     font-family: Open Sans, 'Source Sans Pro', sans-serif;
-    height: 100vh; 
+    height: 100vh;
-    width: 100vw; 
+    width: auto;
-    padding: 0; 
+    padding: 0;
-    margin: 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 +156,7 @@
     border-collapse: collapse; 
     width: 50%; 
     position: absolute; 
-    left: 35vw; 
+    left: 25vw; 
     background-color: white; 
     border-radius: 10px; 
   }
@@ -90,7 +186,11 @@
   }
 
   .presentcheckbox {
-    background-color: 
+    background-color: #6CD182; 
+  }
+
+  .absentcheckbox {
+    background-color: #FF7F7F; 
   }
 
   .buttone {
@@ -99,23 +199,23 @@
   }
 
   .buttone button {
-    background-color: #98c1d9; 
+    background-color: #3D5A80; 
-    border: 1px #98c1d9; 
+    border: 1px #3D5A80; 
     border-radius: 5px; 
     padding: 1vh; 
     padding-left: 2vh; 
     padding-right: 2vh; 
-    color: #F7FFFB;
+    color: white;
     font-family: Roboto, Open Sans, sans-serif;  
   }
 
   .buttone button:hover {
-    background-color: #A4D0EA; 
+    background-color: #293D56;
   }
-
 </style>
   
   <script>
+  
 
     export default {
         mounted() {
@@ -140,10 +240,16 @@
             }
             
           }
+          
           //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: [],
@@ -152,10 +258,17 @@
           presentNames: [],
           checked: true,
           post: {},
-          user: null
+          user: null,
+          dismissSecs: 10,
+          dismissCountDown: 0,
+          showDismissibleAlert: false
         }
       },
       methods: {
+        logout() {
+            document.cookie = "user= ; 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){
@@ -214,7 +327,7 @@
               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);
 
               
@@ -242,19 +355,15 @@
             //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";
+            document.getElementById(input + ":acheckbox").style.backgroundColor = "#FF7F7F";
-            letter = "a";
+            letter = "a"; 
           }
           document.getElementById(input + ":" + letter).checked = false;
-          
-
-          
-          
         }
         }
       } 

attendancetracker/src/components/Attendees.vue

@@ -1,26 +1,119 @@
 <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-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 Members</h1>
         <table>
 
             <tr>
-                <th>Name </th>
+                <th>Member Name</th>
-                <th>Delete</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>
 
@@ -46,17 +139,26 @@ export default {
         }
       },
       methods: {
+          logout() {
+            document.cookie = "user= ; 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);
             if(document.cookie == ""){
                 this.$router.push({name: 'login'});
         }
         },
-        del(){
+        del(id){
-
+            this.post.id = id;
+            //alert(id);
+            let uri = 'http://65.92.152.100:4000/attendance/delete';
+            this.axios.post(uri, this.post).then(() => {
+                location.reload();
+            });
         },
         addUser(){
-          alert(this.attendee.name);
+          //alert(this.attendee.name);
           this.attendee.user = this.user;
           
           let uri = 'http://65.92.152.100:4000/attendance/add';

attendancetracker/src/components/Calendar.vue

@@ -1,104 +1,102 @@
 <template>
 
-    <div id="page">
+    <div id="whole-page">
-    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+      
-        <div class="container-fluid">
 
-            <button type="button" id="sidebarCollapse" class="btn btn-info">
+      <div>
-                <i class="fas fa-align-left"></i>
+  <b-navbar toggleable="lg" type="light" variant="light">
-                <span>Toggle Sidebar</span>
+    <b-navbar-brand href="#" style="margin-top: 8px;">Attendance Tracker®</b-navbar-brand>
-            </button>
 
-        </div>
+    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
-    </nav>
 
-        <h1>Welcome, {{user}}</h1>
+    <b-collapse id="nav-collapse" is-nav>
-        
+      <b-navbar-nav>
-        <form @submit.prevent="att">
+        <b-nav-item href="/calendar">Calendar</b-nav-item>
-        <div id="cal">
+        <b-nav-item-dropdown text="Insights">
-       <b-calendar v-model="value" locale="en-US" class="cal" selected-variant="danger" width="150vh" hide-header></b-calendar> 
+          <b-dropdown-item href="/insights/id">By Join Date</b-dropdown-item>
-        </div>
+          <b-dropdown-item href="/insights/presences">By Presences</b-dropdown-item>
-        <button class="btn btn-primary">Take/View Attendance</button>
+          <b-dropdown-item href="/insights/absences">By Absences</b-dropdown-item>
-        </form>
+        </b-nav-item-dropdown>
-  
+        <b-nav-item href="/attendees">Manage Club Members</b-nav-item>
-<!-- Trigger/Open The Modal -->
+      </b-navbar-nav>
-<h2>Modal Example</h2>
 
-<!-- Trigger/Open The Modal -->
+      <!-- Right aligned nav items -->
-<form @submit.prevent="btnClick">
+      <b-navbar-nav class="ml-auto">       
-<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>
 
+        <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>Attendance for {{user}}:</h1>
-  <form @submit.prevent="logout">
+        <form @submit.prevent="att">
-    <button id="logout"> Log Out </button> 
+        <div id="cal">
-  </form>
+          <b-calendar v-model="value" locale="en-US" class="cal" selected-variant="info" width="35vw" hide-header>
-
+          <div class="d-flex" dir="ltr">
-
+            <b-button
-  <form @submit.prevent="addUser">
+              size="sm"
-    <input type="text" id="name" v-model="attendee.name">
+              variant="outline-danger"
-    <button>Add User</button>
+              v-if="value"
-  </form>
+              @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>
+        <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>
 </div>
 </template>
 
-<style>
+<style scoped>
-    #cal{
+    #cal, #buttone{
         text-align: center; 
-        height: 50vh; 
     }
     .cal {
-      height: 500px; 
       border: 1px red; 
     }
 
-    .modal {
+    h1 {
-  display: none; /* Hidden by default */
+      font-family: Roboto, Open Sans, sans-serif; 
-  position: fixed; /* Stay in place */
+      color: #3d5a80; 
-  z-index: 1; /* Sit on top */
+      padding: 20px;
-  padding-top: 100px; /* Location of the box */
+      text-align: left; 
-  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 */
-}
 
-/* Modal Content */
+    #buttone button{
-.modal-content {
+      width: 15vw;
-  background-color: #fefefe;
+      margin-top: -5vh;  
-  margin: auto;
+    }
-  padding: 20px;
-  border: 1px solid #888;
-  width: 80%;
-}
 
-/* The Close Button */
+    #whole-page{
-.close {
+      height: 100vh;
-  color: #aaaaaa;
+    }
-  float: right;
+
-  font-size: 28px;
+    #incorrect {
-  font-weight: bold;
+      text-align: center; 
-}
+      display: none; 
+    }
 
-.close:hover,
-.close:focus {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer;
-}
 </style>
   
   <script> 
@@ -106,15 +104,6 @@
         mounted() {
             this.checkAccount()
 
-              // Get the modal
-              this.modal = document.getElementById("myModal");
-
-              // 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];
-
               
         },
       data() {
@@ -141,24 +130,17 @@
         },
         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(){
+        setToday() {
-          alert(this.attendee.name);
+          const now = new Date()
-          this.attendee.user = this.user;
+          this.value = new Date(now.getFullYear(), now.getMonth(), now.getDate())
-          
-          let uri = 'http://65.92.152.100:4000/attendance/add';
-          this.axios.post(uri, this.attendee).then(() => {
-          });
         },
-        btnClick() {
+        clearDate() {
-          this.modal.style.display = "block";
+          this.value = ''
-        },
-        spanClick() {
-          this.modal.style.display = "none";
         }
       }
     }

attendancetracker/src/components/Insights.vue

@@ -1,29 +1,112 @@
 <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-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;">{{ header }}</h1>
+        <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 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 align="left">{{ attendee.name }}</td>
-              <td>{{ attendee.name }}</td>
+              <td align="center">{{attendee.presences.length}}</td>
-              <td>{{attendee.presences.length}}</td>
+              <td align="center">{{attendee.absenses.length}}</td>
-              <td>{{attendee.absenses.length}}</td>
             </tr>
           </tbody>
         </table>
-
+        </center>
-        <div v-if="chartData.length == 1">Chart Loading Please wait...</div>
-        <div v-else><GChart type="BarChart" :data="chartData" :options="chartOptions" /></div>
-
-
     </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,18 +115,20 @@
 
 export default {
         mounted() {
-            
             this.user = document.cookie.substring(document.cookie.indexOf("=")+1);
             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();
                 
             }
@@ -55,15 +140,18 @@ export default {
         return {
           attendees: [],
           user: "",
+          header: "",
           chartData: [
               ["User", "Attendances"]
           ],
-          chartOptions: {
+            chartOptions: {
-        chart: {
+              chart: {
-          title: "Company Performance",
+              title: "Company Performance",
-          subtitle: "Sales, Expenses, and Profit: 2014-2017"
+              subtitle: "Sales, Expenses, and Profit: 2014-2017",
-        }
+              width: 100, 
-        }
+              height: 400
+            }
+          }
         }
       },
       methods: {
@@ -87,7 +175,7 @@ export default {
                 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)
@@ -101,8 +189,8 @@ export default {
                 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++){
+                for(var i = 0; i < 5; i++){
-                this.chartData[i+1] = [this.attendees[i].name, parseInt(this.attendees[i].presences.length, 10)]
+                this.chartData[i+1] = [this.attendees[i].name, parseInt(this.attendees[i].absenses.length, 10)]
                 }
           });
       }

attendancetracker/src/components/Register.vue

@@ -5,7 +5,7 @@
         <div class="login-form">
           <h1 class="title">Register</h1>
           <div class="field">
-          <label class="label">Username</label>
+          <label class="label">Club Name (No spaces)</label>
             <div class="control">
               <input type="text" v-model="post.user" class="text-input">
             </div> 
@@ -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>
@@ -169,7 +169,7 @@ input:focus {
               console.log(res);
               if(!res.data.user){
                 alert("Success! Account Created!");
-                this.$router.push({name: ''});
+                this.$router.push({name: '/'});
               }else{
                 alert("Error username already in use!")
               }