From 1571b7696714a6eab73504ff00606edd88847c7b Mon Sep 17 00:00:00 2001
From: jslightham <31053827+jslightham@users.noreply.github.com>
Date: Tue, 7 Apr 2020 01:41:02 -0400
Subject: [PATCH] finished

---
 attendancetracker/API/attendance.route.js     |   9 +
 attendancetracker/src/App.vue                 |  14 +-
 attendancetracker/src/components/Account.vue  |   0
 .../src/components/Attendance.vue             | 153 +++++++++++---
 .../src/components/Attendees.vue              | 128 ++++++++++--
 attendancetracker/src/components/Calendar.vue | 186 ++++++++----------
 attendancetracker/src/components/Insights.vue | 130 ++++++++++--
 attendancetracker/src/components/Register.vue |   6 +-
 8 files changed, 464 insertions(+), 162 deletions(-)
 delete mode 100644 attendancetracker/src/components/Account.vue

diff --git a/attendancetracker/API/attendance.route.js b/attendancetracker/API/attendance.route.js
index 67c7ec8..93af6e2 100644
--- a/attendancetracker/API/attendance.route.js
+++ b/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;
\ No newline at end of file
diff --git a/attendancetracker/src/App.vue b/attendancetracker/src/App.vue
index 0092782..798fc7a 100644
--- a/attendancetracker/src/App.vue
+++ b/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>
 
diff --git a/attendancetracker/src/components/Account.vue b/attendancetracker/src/components/Account.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/attendancetracker/src/components/Attendance.vue b/attendancetracker/src/components/Attendance.vue
index 2eca75b..0faf560 100644
--- a/attendancetracker/src/components/Attendance.vue
+++ b/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; 
-    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 +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; 
-    border: 1px #98c1d9; 
+    background-color: #3D5A80; 
+    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";
-            letter = "a";
+            document.getElementById(input + ":acheckbox").style.backgroundColor = "#FF7F7F";
+            letter = "a"; 
           }
           document.getElementById(input + ":" + letter).checked = false;
-          
-
-          
-          
         }
         }
       } 
diff --git a/attendancetracker/src/components/Attendees.vue b/attendancetracker/src/components/Attendees.vue
index d32f3f8..106b9ac 100644
--- a/attendancetracker/src/components/Attendees.vue
+++ b/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>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>
 
@@ -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';
diff --git a/attendancetracker/src/components/Calendar.vue b/attendancetracker/src/components/Calendar.vue
index d9e2267..1371e99 100644
--- a/attendancetracker/src/components/Calendar.vue
+++ b/attendancetracker/src/components/Calendar.vue
@@ -1,104 +1,102 @@
 <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>
 
-        </div>
-    </nav>
+    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 
-        <h1>Welcome, {{user}}</h1>
-        
-        <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>
-        <button class="btn btn-primary">Take/View Attendance</button>
-        </form>
-  
-<!-- Trigger/Open The Modal -->
-<h2>Modal Example</h2>
+    <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>
 
-<!-- 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>
+      <!-- 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>
 
-  
-  <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>
+        <h1>Attendance for {{user}}:</h1>
+        <form @submit.prevent="att">
+        <div id="cal">
+          <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
+              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>
+        <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>
-    #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: 100vh;
+    }
+
+    #incorrect {
+      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(){
-          alert(this.attendee.name);
-          this.attendee.user = this.user;
-          
-          let uri = 'http://65.92.152.100:4000/attendance/add';
-          this.axios.post(uri, this.attendee).then(() => {
-          });
+        setToday() {
+          const now = new Date()
+          this.value = new Date(now.getFullYear(), now.getMonth(), now.getDate())
         },
-        btnClick() {
-          this.modal.style.display = "block";
-        },
-        spanClick() {
-          this.modal.style.display = "none";
+        clearDate() {
+          this.value = ''
         }
       }
     }
diff --git a/attendancetracker/src/components/Insights.vue b/attendancetracker/src/components/Insights.vue
index bbe29e7..f580356 100644
--- a/attendancetracker/src/components/Insights.vue
+++ b/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>{{ 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,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: {
-        chart: {
-          title: "Company Performance",
-          subtitle: "Sales, Expenses, and Profit: 2014-2017"
-        }
-        }
+            chartOptions: {
+              chart: {
+              title: "Company Performance",
+              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++){
-                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)]
                 }
           });
       }
diff --git a/attendancetracker/src/components/Register.vue b/attendancetracker/src/components/Register.vue
index 0579345..aecb204 100644
--- a/attendancetracker/src/components/Register.vue
+++ b/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!")
               }