148 lines
3.8 KiB
Vue
148 lines
3.8 KiB
Vue
<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>Attendance Calendar for {{user}}:</h1>
|
|
<form @submit.prevent="att">
|
|
<br><br><br>
|
|
<div id="cal">
|
|
<b-calendar v-model="value" locale="en-US" class="cal" selected-variant="primary" 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 scoped>
|
|
#cal, #buttone{
|
|
text-align: center;
|
|
}
|
|
.cal {
|
|
border: 1px red;
|
|
}
|
|
|
|
h1 {
|
|
font-family: Roboto, Open Sans, sans-serif;
|
|
color: #3d5a80;
|
|
padding: 20px;
|
|
text-align: left;
|
|
}
|
|
|
|
#buttone button{
|
|
width: 15vw;
|
|
margin-top: -5vh;
|
|
}
|
|
|
|
#whole-page{
|
|
height: 100vh;
|
|
}
|
|
|
|
#incorrect {
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
mounted() {
|
|
this.checkAccount()
|
|
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
value: '',
|
|
context: null,
|
|
user: null,
|
|
attendee: {},
|
|
modal: null,
|
|
btn: null,
|
|
span: null
|
|
}
|
|
},
|
|
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'});
|
|
}
|
|
},
|
|
att(){
|
|
if(this.value == ''){
|
|
document.getElementById("incorrect").style.display = "block";
|
|
}else{
|
|
this.$router.push({name: 'attendance', params: { id: this.value }});
|
|
}
|
|
},
|
|
setToday() {
|
|
const now = new Date()
|
|
this.value = new Date(now.getFullYear(), now.getMonth(), now.getDate())
|
|
},
|
|
clearDate() {
|
|
this.value = ''
|
|
}
|
|
}
|
|
}
|
|
</script> |