added multiple club feature
This commit is contained in:
@@ -5,12 +5,15 @@ 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")
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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){
|
||||
|
||||
13
attendancetracker/API/club.model.js
Normal file
13
attendancetracker/API/club.model.js
Normal file
@@ -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);
|
||||
96
attendancetracker/API/club.route.js
Normal file
96
attendancetracker/API/club.route.js
Normal file
@@ -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;
|
||||
@@ -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(){
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<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-brand href="#" style="margin-top: 8px;">Attendance Tracker</b-navbar-brand>
|
||||
|
||||
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
<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 -->
|
||||
@@ -45,7 +46,7 @@
|
||||
|
||||
<div>
|
||||
<b-navbar toggleable="lg" type="light" variant="light">
|
||||
<b-navbar-brand href="#" style="margin-top: 8px;">Attendance Tracker®</b-navbar-brand>
|
||||
<b-navbar-brand href="#" style="margin-top: 8px;">Attendance Tracker</b-navbar-brand>
|
||||
|
||||
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
|
||||
|
||||
@@ -76,7 +77,7 @@
|
||||
</div>
|
||||
|
||||
|
||||
<h1 id="title">Attendance for {{this.$route.params.id}}</h1>
|
||||
<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">
|
||||
@@ -111,8 +112,9 @@
|
||||
<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>
|
||||
@@ -192,26 +194,6 @@
|
||||
.absentcheckbox {
|
||||
background-color: #FF7F7F;
|
||||
}
|
||||
|
||||
.buttone {
|
||||
text-align: center;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.buttone button {
|
||||
background-color: #3D5A80;
|
||||
border: 1px #3D5A80;
|
||||
border-radius: 5px;
|
||||
padding: 1vh;
|
||||
padding-left: 2vh;
|
||||
padding-right: 2vh;
|
||||
color: white;
|
||||
font-family: Roboto, Open Sans, sans-serif;
|
||||
}
|
||||
|
||||
.buttone button:hover {
|
||||
background-color: #293D56;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@@ -219,12 +201,20 @@
|
||||
|
||||
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;
|
||||
let uri = 'http://localhost: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;
|
||||
for(var element of this.attendees){
|
||||
@@ -235,6 +225,9 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
updated(){
|
||||
@@ -247,6 +240,9 @@
|
||||
attendees: [],
|
||||
att: {},
|
||||
absentNames: [],
|
||||
selected: {},
|
||||
club: {},
|
||||
post2: {},
|
||||
presentNames: [],
|
||||
checked: true,
|
||||
post: {},
|
||||
@@ -256,13 +252,14 @@
|
||||
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://localhost: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);
|
||||
@@ -278,14 +275,14 @@
|
||||
|
||||
var test2 = {id: res.data._id, presences: arr, absenses: arr2};
|
||||
|
||||
let url = 'http://localhost:4000/attendance/post';
|
||||
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.user};
|
||||
let url2 = 'http://localhost:4000/login/getdates';
|
||||
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;
|
||||
@@ -304,9 +301,9 @@
|
||||
arrd.push(ddata);
|
||||
//console.log(arrd);
|
||||
|
||||
var userPostData = {dates: arrd, user: this.user}
|
||||
var userPostData = {dates: arrd, user: this.club._id}
|
||||
|
||||
let url3 = 'http://localhost:4000/login/update';
|
||||
let url3 = 'http://192.168.1.11:4000/clubs/update';
|
||||
this.axios.post(url3, userPostData).then(res => {
|
||||
//console.log("URL 3");
|
||||
console.log(res);
|
||||
@@ -323,7 +320,7 @@
|
||||
//alert("absences")
|
||||
for(var element1 of this.absentNames){
|
||||
var test1 = {number: element1};
|
||||
let uri1 = 'http://localhost: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);
|
||||
@@ -337,7 +334,7 @@
|
||||
|
||||
var testt2 = {id: res.data._id, presences: arrr2, absenses: arrr};
|
||||
|
||||
let url1 = 'http://localhost:4000/attendance/post';
|
||||
let url1 = 'http://192.168.1.11:4000/attendance/post';
|
||||
this.axios.post(url1, testt2).then(res => {
|
||||
console.log("Arr2: " + res);
|
||||
|
||||
@@ -347,8 +344,8 @@
|
||||
}
|
||||
// start of user updating
|
||||
|
||||
var ldata = {user: this.user};
|
||||
let url2 = 'http://localhost:4000/login/getdates';
|
||||
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;
|
||||
@@ -367,9 +364,9 @@
|
||||
arrd.push(ddata);
|
||||
console.log(arrd);
|
||||
|
||||
var userPostData = {dates: arrd, user: this.user}
|
||||
var userPostData = {dates: arrd, user: this.club._id}
|
||||
|
||||
let url3 = 'http://localhost:4000/login/update';
|
||||
let url3 = 'http://192.168.1.11:4000/clubs/update';
|
||||
this.axios.post(url3, userPostData).then(res => {
|
||||
console.log("URL 3");
|
||||
console.log(res);
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<div>
|
||||
<b-navbar toggleable="lg" type="light" variant="light">
|
||||
<b-navbar-brand href="#" style="margin-top: 8px;">Attendance Tracker®</b-navbar-brand>
|
||||
<b-navbar-brand href="#" style="margin-top: 8px;">Attendance Tracker</b-navbar-brand>
|
||||
|
||||
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
<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 -->
|
||||
@@ -36,7 +37,7 @@
|
||||
|
||||
|
||||
|
||||
<h1 style="margin-top: 10px;"> Manage Club Members</h1>
|
||||
<h1 style="margin-top: 10px;"> Manage {{club.clubname}} Members</h1>
|
||||
<table>
|
||||
|
||||
<tr>
|
||||
@@ -120,14 +121,24 @@ th{
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.checkAccount();
|
||||
this.post.user = this.user;
|
||||
//alert(this.post.user);
|
||||
let uri = 'http://localhost: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() {
|
||||
@@ -135,16 +146,21 @@ 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'});
|
||||
}
|
||||
@@ -152,16 +168,16 @@ export default {
|
||||
del(id){
|
||||
this.post.id = id;
|
||||
//alert(id);
|
||||
let uri = 'http://localhost:4000/attendance/delete';
|
||||
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://localhost:4000/attendance/add';
|
||||
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();
|
||||
});
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
<div>
|
||||
<b-navbar toggleable="lg" type="light" variant="light">
|
||||
<b-navbar-brand href="#" style="margin-top: 8px;">Attendance Tracker®</b-navbar-brand>
|
||||
<b-navbar-brand href="#" style="margin-top: 8px;">Attendance Tracker</b-navbar-brand>
|
||||
|
||||
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
<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 -->
|
||||
@@ -37,11 +38,13 @@
|
||||
<center>
|
||||
<div class="container">
|
||||
<div id="" style="width: 35%; float:left; margin:10px;" class="box">
|
||||
<h3>Attendance Calendar for {{user}}</h3>
|
||||
<h3>Welcome to Attendance Tracker, {{user}}!</h3>
|
||||
<ul style="text-align: left;">
|
||||
<li><b>-</b> Get started by creating some club members on the <a href="/attendees">"Manage Club Members"</a> page. </li>
|
||||
<li><b>-</b> Get started by adding clubs on the <a href="/clubs">"Select Club"</a> page. </li>
|
||||
<br>
|
||||
<li><b>-</b> Use the calendar below to select a date to take attendance.</li>
|
||||
<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>
|
||||
@@ -53,7 +56,7 @@
|
||||
<div id="cal">
|
||||
<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
|
||||
@@ -88,8 +91,8 @@
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div id="calcontainer" style="border: 0.25px solid grey;">
|
||||
<h3>Club Attendance</h3>
|
||||
<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=""/>
|
||||
@@ -140,7 +143,6 @@
|
||||
display: inline-block;
|
||||
}
|
||||
.box{
|
||||
border: 0.25px solid grey;
|
||||
}
|
||||
|
||||
|
||||
@@ -151,9 +153,15 @@
|
||||
created() {
|
||||
this.checkAccount()
|
||||
|
||||
var ldata = {user: this.user};
|
||||
let url2 = 'http://localhost:4000/login/getdates';
|
||||
this.axios.post(url2, ldata).then(res => {
|
||||
let url9 = 'http://192.168.1.11:4000/clubs/getbyID';
|
||||
this.post.number = this.selected;
|
||||
|
||||
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)
|
||||
@@ -163,6 +171,9 @@
|
||||
this.chartData[i+1] = [this.dates[i], datearr[i].numPresent];
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
updated(){
|
||||
var body = document.body, html = document.documentElement;
|
||||
@@ -173,6 +184,9 @@
|
||||
return {
|
||||
value: '',
|
||||
context: null,
|
||||
selected: {},
|
||||
club: {},
|
||||
post: {},
|
||||
user: null,
|
||||
attendee: {},
|
||||
modal: null,
|
||||
@@ -194,10 +208,13 @@
|
||||
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'});
|
||||
}
|
||||
|
||||
189
attendancetracker/src/components/Clubs.vue
Normal file
189
attendancetracker/src/components/Clubs.vue
Normal file
@@ -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>
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<div>
|
||||
<b-navbar toggleable="lg" type="light" variant="light">
|
||||
<b-navbar-brand href="#" style="margin-top: 8px;">Attendance Tracker®</b-navbar-brand>
|
||||
<b-navbar-brand href="#" style="margin-top: 8px;">Attendance Tracker</b-navbar-brand>
|
||||
|
||||
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
<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 -->
|
||||
@@ -35,8 +36,8 @@
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h1 style="margin-top: 10px;">{{ header }}</h1>
|
||||
<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>
|
||||
@@ -115,8 +116,15 @@ th{
|
||||
|
||||
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'});
|
||||
}
|
||||
|
||||
@@ -132,7 +140,10 @@ export default {
|
||||
this.getAttByAbsenses();
|
||||
|
||||
}
|
||||
console.log(this.$route.params.method)
|
||||
//console.log(this.$route.params.method)
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
@@ -141,6 +152,7 @@ export default {
|
||||
attendees: [],
|
||||
user: "",
|
||||
header: "",
|
||||
club: {},
|
||||
chartData: [
|
||||
["User", "Attendances"]
|
||||
],
|
||||
@@ -155,8 +167,8 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getAttById(){
|
||||
var data = {user: this.user};
|
||||
let uri = 'http://localhost: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;
|
||||
@@ -168,8 +180,8 @@ export default {
|
||||
});
|
||||
},
|
||||
getAttByPresences(){
|
||||
var data = {user: this.user};
|
||||
let uri = 'http://localhost: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;
|
||||
@@ -182,8 +194,8 @@ export default {
|
||||
});
|
||||
},
|
||||
getAttByAbsenses(){
|
||||
var data = {user: this.user};
|
||||
let uri = 'http://localhost: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;
|
||||
|
||||
@@ -155,7 +155,7 @@ input:focus {
|
||||
},
|
||||
methods: {
|
||||
add(){
|
||||
let uri = 'http://localhost: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'});
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="login-form">
|
||||
<h1 class="title">Register</h1>
|
||||
<div class="field">
|
||||
<label class="label">Club Name (No spaces)</label>
|
||||
<label class="label">Username</label>
|
||||
<div class="control">
|
||||
<input type="text" v-model="post.user" class="text-input">
|
||||
</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://localhost: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: 'login'});
|
||||
}else{
|
||||
alert("Error username already in use!")
|
||||
}
|
||||
});
|
||||
|
||||
}else{
|
||||
alert("Fields must not be empty!")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -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});
|
||||
|
||||
Reference in New Issue
Block a user