jslightham/MEVN-Attendance-Tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

transfer

Browse Source
This commit is contained in:
jslightham
2020-03-26 20:17:32 -04:00
parent 52d2d79548
commit a35b789e16
14 changed files with 1234 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
attendancetracker/API/login.route.js Normal file
View File

@@ -0,0 +1,22 @@
const express = require('express');
const loginRoute = expressRouter();
let LInfo = require('./user.model');
postRoutes.route('/login').post(function (req, res) {
console.log(req);
var user = req.body.username;
var pass = req.body.password;
LInfo.findOne(
{
and: [{username: user}, {password: pass}]
},
function(err, user){
if(err){
res.json(err);
}
else {
res.json(user);
}
});
});

2
attendancetracker/API/package.json
View File

@@ -2,7 +2,7 @@
"name": "API",
"version": "1.0.0",
"description": "",
"main": "index.js",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},

0
attendancetracker/API/post.model.js
View File

0
attendancetracker/API/post.route.js
View File

17
attendancetracker/API/user.model.js Normal file
View File

@@ -0,0 +1,17 @@
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
let LInfo = new Schema({
username: { type: String, unique: true, required: true },
hash: { type: String, required: true },
firstName: { type: String, required: true },
lastName: { type: String, required: true },
createdDate: { type: Date, default: Date.now }
},{
collection: 'users'
}
)
schema.set('toJSON', {virtuals: true});
module.exports = mongoose.model('User', schema);

1055
attendancetracker/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
attendancetracker/package.json
View File

@@ -9,10 +9,16 @@
},
"dependencies": {
"axios": "^0.19.2",
"bootstrap-vue": "^2.9.0",
"buefy": "^0.8.12",
"core-js": "^3.6.4",
"jquery": "^3.4.1",
"moment": "^2.24.0",
"vee-validate": "^3.2.5",
"vue": "^2.6.11",
"vue-axios": "^2.1.5",
"vue-ctk-date-time-picker": "^2.4.0",
"vue-full-calendar": "^2.7.0",
"vue-router": "^3.1.5"
},
"devDependencies": {
@@ -22,7 +28,10 @@
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"vue-template-compiler": "^2.6.11"
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.41.6"
},
"eslintConfig": {
"root": true,

4
attendancetracker/public/index.html
View File

@@ -5,11 +5,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<title>Attendance Tracker</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong>We're sorry but Attendance Tracker doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->

35
attendancetracker/src/App.vue
View File

@@ -1,5 +1,4 @@
<template>
<div class="container">
<transition name="fade">
<router-view></router-view>
@@ -18,3 +17,37 @@ color: #2c3e50;
margin-top: 60px;
}
</style>
<style lang="scss">
// Import Bulma's core
@import "~bulma/sass/utilities/_all";
// Set your colors
$primary: #8c67ef;
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);
// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: (
"white": ($white, $black),
"black": ($black, $white),
"light": ($light, $light-invert),
"dark": ($dark, $dark-invert),
"primary": ($primary, $primary-invert),
"info": ($info, $info-invert),
"success": ($success, $success-invert),
"warning": ($warning, $warning-invert),
"danger": ($danger, $danger-invert),
"twitter": ($twitter, $twitter-invert)
);
// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;
// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
</style>

2
attendancetracker/src/components/HelloWorld.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="hello">
<h1>Johnny is horrible </h1>
<h1>Johnny is horribl</h1>
<p>
For a guid:e and recipes on how to configure / customize this project,<br>
check out the

60
attendancetracker/src/components/Home.vue Normal file
View File

@@ -0,0 +1,60 @@
<template>
<div class="page">
<div class="buttons">
<b-button v-b-modal.add-modal>Add Calendar Event</b-button>
</div>
<full-calendar :events="events" @event-selected="openEditModal" defaultView="month" />
<b-modal id="add-modal" title="Add Calendar Event" hide-footer ref="add-modal">
<CalendarForm :edit="false" @eventSaved="closeModal()" />
</b-modal>
<b-modal id="edit-modal" title="Edit Calendar Event" hide-footer ref="edit-modal">
<CalendarForm :edit="true" :calendarEvent="calendarEvent" @eventSaved="closeModal()" />
</b-modal>
</div>
</template>
<script>
// @ is an alias to /src
import CalendarForm from "@/components/CalendarForm.vue";
import { requestsMixin } from "../mixins/requestsMixin";
export default {
name: "home",
components: {
CalendarForm
},
mixins: [requestsMixin],
computed: {
events() {
return this.$store.state.events;
}
},
data() {
return {
calendarEvent: {}
};
},
async beforeMount() {
await this.getEvents();
},
methods: {
async getEvents() {
const response = await this.getCalendar();
this.$store.commit("setEvents", response.data);
},
closeModal() {
this.$refs["add-modal"].hide();
this.$refs["edit-modal"].hide();
this.calendarEvent = {};
},
openEditModal(event) {
let { id, start, end, title } = event;
this.calendarEvent = { id, start, end, title };
this.$refs["edit-modal"].show();
}
}
};
</script>
<style lang="scss" scoped>
.buttons {
margin-bottom: 10px;
}
</style>

37
attendancetracker/src/components/Login.vue
View File

@@ -1,37 +1,52 @@
<template>
<div class="login-box">
<div class="login">
<h1 class="title">Login</h1>
<div class="field">
<label class="label">Name</label>
<label class="label">Username</label>
<div class="control">
<input class="input" type="text" placeholder="e.g Alex Smith">
<input class="input" type="text" placeholder="e.g Alex Smith" name="username">
</div>
</div>
<div class="field">
<label class="label">Email</label>
<label class="label">Password</label>
<div class="control">
<input class="input" type="email" placeholder="e.g. alexsmith@gmail.com">
<input class="input" type="password" placeholder="e.g. alexsmith@gmail.com" name="password">
</div>
</div>
<div class="login-button">
<div class="control">
<button @click="add()">Click Me</button>
</div>
</div>
</div>
</template>
<style>
.field {
width: 50%;
font-family:
}
</style>
<script>
export default {
methods: {
data() {
return {
post: {}
}
},
methods: {
login(){
let uri = 'http://localhost:4000/posts/add';
add(){
let uri = 'http://localhost:4000/login/post';
this.axios.post(uri, this.post).then(() => {
this.$router.push({name: 'posts'});
this.$router.push({username: 'username'});
this.$router.push({password: 'password'});
});
}
}
}
</script>

12
attendancetracker/src/main.js
View File

@@ -1,6 +1,12 @@
import Vue from 'vue'
import App from './App.vue'
import Buefy from 'buefy'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
Vue.use(Buefy)
Vue.config.productionTip = false
@@ -16,6 +22,7 @@ Vue.config.productionTip = false;
import HelloWorld from './components/HelloWorld.vue';
import Login from './components/Login.vue';
import Home from './components/Home.vue';
const routes = [
{
@@ -27,6 +34,11 @@ const routes = [
name: 'login',
path: '/login',
component: Login
},
{
name: 'calendar',
path: '/calendar',
component: Home
}
];

18
attendancetracker/src/mixins/requestsMixin.js Normal file
View File

@@ -0,0 +1,18 @@
const APIURL = "http://localhost:3000";
const axios = require("axios");
export const requestsMixin = {
methods: {
getCalendar() {
return axios.get(`${APIURL}/calendar`);
},
addCalendar(data) {
return axios.post(`${APIURL}/calendar`, data);
},
editCalendar(data) {
return axios.put(`${APIURL}/calendar/${data.id}`, data);
},
deleteCalendar(id) {
return axios.delete(`${APIURL}/calendar/${id}`);
}
}
};