finished
This commit is contained in:
jslightham
@@ -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;
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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,6 +118,7 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -43,10 +126,23 @@
|
||||
#whole-page {
|
||||
font-family: Open Sans, 'Source Sans Pro', sans-serif;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
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,24 +199,24 @@
|
||||
}
|
||||
|
||||
.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() {
|
||||
this.user = document.cookie.substring(document.cookie.indexOf("=")+1);
|
||||
@@ -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){
|
||||
@@ -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";
|
||||
}
|
||||
document.getElementById(input + ":" + letter).checked = false;
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
<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';
|
||||
|
||||
@@ -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>
|
||||
|
||||
<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>
|
||||
</nav>
|
||||
|
||||
<h1>Welcome, {{user}}</h1>
|
||||
|
||||
<h1>Attendance for {{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>
|
||||
<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>
|
||||
</form>
|
||||
|
||||
<!-- Trigger/Open The Modal -->
|
||||
<h2>Modal Example</h2>
|
||||
|
||||
<!-- 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">×</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>
|
||||
</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 */
|
||||
}
|
||||
|
||||
/* Modal Content */
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: auto;
|
||||
h1 {
|
||||
font-family: Roboto, Open Sans, sans-serif;
|
||||
color: #3d5a80;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* The Close Button */
|
||||
.close {
|
||||
color: #aaaaaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
#buttone button{
|
||||
width: 15vw;
|
||||
margin-top: -5vh;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
#whole-page{
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#incorrect {
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
</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 = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,13 +140,16 @@ export default {
|
||||
return {
|
||||
attendees: [],
|
||||
user: "",
|
||||
header: "",
|
||||
chartData: [
|
||||
["User", "Attendances"]
|
||||
],
|
||||
chartOptions: {
|
||||
chart: {
|
||||
title: "Company Performance",
|
||||
subtitle: "Sales, Expenses, and Profit: 2014-2017"
|
||||
subtitle: "Sales, Expenses, and Profit: 2014-2017",
|
||||
width: 100,
|
||||
height: 400
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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)]
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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!")
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user