Skip to content

2
20_21-J09
Commit 7db70cee authored by IT17176798_Bhagya Dilhara's avatar IT17176798_Bhagya Dilhara
Browse files
Options

'added_vue.js_components'

parent 7b4c98d3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 27023 additions and 0 deletions
UI/.gitignore 0 → 100644
View file @ 7db70cee
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
UI/README.md 0 → 100644
View file @ 7db70cee
# parent_app
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```
### Lints and fixes files
```
yarn lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
UI/babel.config.js 0 → 100644
View file @ 7db70cee
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
UI/package-lock.json 0 → 100644
View file @ 7db70cee
This diff is collapsed.
UI/package.json 0 → 100644
View file @ 7db70cee
{
"name": "student_app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.2",
"axios": "^0.21.1",
"basic-vue-chat": "^0.3.5",
"bootstrap": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"chart.js": "^2.9.4",
"core-js": "^3.6.5",
"dotenv": "^8.2.0",
"file-saver": "^2.0.5",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.1",
"vue": "^2.6.11",
"vue-advanced-chat": "^0.6.9",
"vue-axios": "^3.2.2",
"vue-beautiful-chat": "^2.5.0",
"vue-quick-chat": "^1.2.7",
"vue-router": "^3.5.1",
"vue-sidebar-menu": "^4.7.4",
"vuetify": "^2.4.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.0",
"@vue/cli-plugin-eslint": "^4.5.0",
"@vue/cli-service": "^4.5.0",
"babel-eslint": "^10.1.0",
"deepmerge": "^4.2.2",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.32.5",
"vue-cli-plugin-vuetify": "^2.1.0",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
UI/public/index.html 0 → 100644
View file @ 7db70cee
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<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>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.4.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
</body>
</html>
UI/src/App.vue 0 → 100644
View file @ 7db70cee
<template>
<div id="app">
<router-view />
</div>
</template>
\ No newline at end of file
UI/src/components/HelloWorld.vue 0 → 100644
View file @ 7db70cee
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
UI/src/config/config.js 0 → 100644
View file @ 7db70cee
require("dotenv").config();
export const API_URL = process.env.VUE_APP_URL;
export default API_URL;
UI/src/main.js 0 → 100644
View file @ 7db70cee
import Vue from 'vue'
import App from './App.vue'
import router from "./router";
import vuetify from "./plugins/vuetify";
import { API_URL } from "@/services/config"
import ApiService from './services/api.service'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import Chat from 'vue-beautiful-chat'
import ApiService from '@/services/api.service';
ApiService.init();
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
Vue.use(Chat)
import './sass/main.scss';
ApiService.init(API_URL)
Vue.config.productionTip = false
new Vue({
router,
vuetify,
render: h => h(App),
}).$mount('#app')
UI/src/plugins/vuetify.js 0 → 100644
View file @ 7db70cee
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
\ No newline at end of file
UI/src/router.js 0 → 100644
View file @ 7db70cee
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
mode: "history",
routes: [
{
path: "/login",
component: () => import("@/view/pages/Login"),
},
{
path: "/",
redirect: "/dashboard",
component: () => import("@/view/layout/Base"),
children: [
{
path: "/dashboard",
name: "dashboard",
component: () => import("@/view/pages/Dashboard.vue")
},
{
path: "/student",
redirect: "/student/analytics",
},
{
path: "/student/analytics",
name: "StudentAnalytics",
component: () => import("@/view/pages/Student.vue"),
},
{
path: "/student/profile/:id",
name: "StudentProfile",
component: () => import("@/view/pages/StudentProfile.vue"),
},
{
path: "/activity",
name: "Activity",
component: () => import("@/view/pages/Activity.vue"),
},
{
path: "/activity/analytics",
name: "ActivityAnalytics",
component: () => import("@/view/pages/ActivityAnalytics.vue"),
},
{
path: "/reports",
name: "Reports",
component: () => import("@/view/pages/Reports.vue"),
},
]
}
]
});
\ No newline at end of file
UI/src/sass/main.scss 0 → 100644
View file @ 7db70cee
@import "../../node_modules/bootstrap/scss/bootstrap";
@import "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900";
@import "https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css";
@import "https://fonts.googleapis.com/css?family=Material+Icons";
@import '~vuetify/dist/vuetify.css';
@import "https://fonts.googleapis.com/css?family=Poppins";
html {
font-size: 1rem !important;
font-family: 'Poppins' !important;
}
html,
body {
background: rgb(247 247 247) !important;
}
.theme--light.v-application,
.v-application--wrap {
background: rgb(247 247 247) !important;
}
\ No newline at end of file
UI/src/services/api.service.js 0 → 100644
View file @ 7db70cee
<<<<<<< HEAD
import axios from 'axios'
// import { TokenService } from '@/services/token.service'
// import store from '@/store/'
=======
import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
import JwtService from "./jwt.service";
//import { API_URL } from "@/core/services/config";
>>>>>>> bb6ef00918e4d58139578a3c10c6d8367b83c693
const ApiService = {
<<<<<<< HEAD
// Stores the 401 interceptor position so that it can be later ejected when needed
_401interceptor: null,
init (baseURL) {
axios.defaults.baseURL = baseURL
=======
init() {
Vue.use(VueAxios, axios);
Vue.axios.defaults.baseURL = 'http://localhost:8000/api/';
>>>>>>> bb6ef00918e4d58139578a3c10c6d8367b83c693
},
setHeader () {
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
// eslint-disable-next-line dot-notation
axios.defaults.headers.common['Authorization'] = `Bearer `
},
removeHeader () {
axios.defaults.headers.common = {}
},
query (resource, params) {
return axios.get(resource, params).catch(error => {
console.log(error)
})
},
get (resource, slug = '') {
return axios.get(`${resource}/${slug}`)
},
post (resource, params) {
return axios.post(`${resource}`, params)
},
update (resource, slug, params) {
return axios.put(`${resource}/${slug}`, params)
},
put (resource, params) {
return axios.put(`${resource}`, params)
},
delete (resource, params) {
return axios.delete(resource, params)
},
/**
* Perform a custom Axios request.
*
* data is an object containing the following properties:
* - method
* - url
* - data ... request payload
* - auth (optional)
* - username
* - password
**/
customRequest (data) {
return axios(data)
},
}
export default ApiService
UI/src/services/config.js 0 → 100644
View file @ 7db70cee
export const API_URL = process.env.VUE_APP_URL
UI/src/services/jwt.service.js 0 → 100644
View file @ 7db70cee
const ID_TOKEN_KEY = "id_token";
const ID_CURRENT_USER = "id_current_user";
export const getToken = () => {
return window.localStorage.getItem(ID_TOKEN_KEY);
};
export const saveToken = (token) => {
window.localStorage.setItem(ID_TOKEN_KEY, token);
};
export const destroyToken = () => {
window.localStorage.removeItem(ID_TOKEN_KEY);
};
export const getCurrentUser = () => {
return window.localStorage.getItem(ID_CURRENT_USER);
};
export const saveCurrentUser = (user) => {
window.localStorage.setItem(ID_CURRENT_USER, user);
};
export const destroyCurrentUser = () => {
window.localStorage.removeItem(ID_CURRENT_USER);
};
export default {
getToken,
saveToken,
destroyToken,
getCurrentUser,
saveCurrentUser,
destroyCurrentUser
};
UI/src/view/layout/Base.vue 0 → 100644
View file @ 7db70cee
<!-- Public demo pages -->
<template>
<div>
<SideBar></SideBar>
<Header></Header>
<main class="container">
<transition name="fade-in-up" v-cloak>
<v-app v-cloak>
<router-view />
</v-app>
</transition>
<beautiful-chat :onMessageWasSent="onMessageWasSent" :messageList="messageList"
:newMessagesCount="newMessagesCount" :participants="participants" :isOpen="isChatOpen"
:close="closeChat" :open="openChat" :showEmoji="true" :showFile="true" :showEdition="true" :showDeletion="true"
:showTypingIndicator="showTypingIndicator" :showLauncher="true" :showCloseButton="true"
:alwaysScrollToBottom="alwaysScrollToBottom" :messageStyling="messageStyling" @onType="handleOnType"
@edit="editMessage" />
<Footer></Footer>
</main>
</div>
</template>
<script>
import Header from './Header'
import Footer from './Footer'
import SideBar from '@/view/layout/SideBar'
export default {
components: {
Header,
Footer,
SideBar
},
data() {
return {
value: '',
context: null,
participants: [{
id: 'user1',
name: 'Matteo',
imageUrl: 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4'
},
{
id: 'user2',
name: 'Support',
imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4'
}
], // the list of all the participant of the conversation. `name` is the user name, `id` is used to establish the author of a message, `imageUrl` is supposed to be the user avatar.
titleImageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png',
messageList: [{
type: 'text',
author: `me`,
data: {
text: `Say yes!`
}
},
{
type: 'text',
author: `user1`,
data: {
text: `No.`
}
}
], // the list of the messages to show, can be paginated and adjusted dynamically
newMessagesCount: 0,
isChatOpen: false, // to determine whether the chat window should be open or closed
showTypingIndicator: '', // when set to a value matching the participant.id it shows the typing indicator for the specific user
colors: {
header: {
bg: '#4e8cff',
text: '#ffffff'
},
launcher: {
bg: '#4e8cff'
},
messageList: {
bg: '#ffffff'
},
sentMessage: {
bg: '#4e8cff',
text: '#ffffff'
},
receivedMessage: {
bg: '#eaeaea',
text: '#222222'
},
userInput: {
bg: '#f4f7f9',
text: '#565867'
}
}, // specifies the color scheme for the component
alwaysScrollToBottom: false, // when set to true always scrolls the chat to the bottom when new events are in (new message, user starts typing...)
messageStyling: true // enables *bold* /emph/ _underline_ and such (more info at github.com/mattezza/msgdown)
}
},
methods: {
sendMessage(text) {
if (text.length > 0) {
this.newMessagesCount = this.isChatOpen ? this.newMessagesCount : this.newMessagesCount + 1
this.onMessageWasSent({
author: 'support',
type: 'text',
data: {
text
}
})
}
},
onMessageWasSent(message) {
// called when the user sends a message
this.messageList = [...this.messageList, message]
},
openChat() {
// called when the user clicks on the fab button to open the chat
this.isChatOpen = true
this.newMessagesCount = 0
},
closeChat() {
// called when the user clicks on the botton to close the chat
this.isChatOpen = false
},
handleScrollToTop() {
// called when the user scrolls message list to top
// leverage pagination for loading another page of messages
},
handleOnType() {
console.log('Emit typing event')
},
editMessage(message) {
const m = this.messageList.find(m => m.id === message.id);
m.isEdited = true;
m.data.text = message.data.text;
}
}
};
</script>
\ No newline at end of file
UI/src/view/layout/Footer.vue 0 → 100644
View file @ 7db70cee
<template>
<footer>
<!-- <div class="copyrights">
eLearning System © 2020 - Designed & Developed by
<a href="#" target="" _blank>eLearning Sri Lanka</a>
</div> -->
<a href="#">Terms & Conditions</a><br>
<a href="#">Privacy Policy</a><br>
<a href="#">Support</a><br>
</footer>
</template>
<style lang="scss" scoped>
footer{
text-align: center;
}
</style>
\ No newline at end of file
UI/src/view/layout/Header.vue 0 → 100644
View file @ 7db70cee
<template>
<header>
<b-navbar type="dark" variant="dark">
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown text="Username" right>
<b-dropdown-item href="#">Settings</b-dropdown-item>
<b-dropdown-item href="#">Logout</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-navbar>
</header>
</template>
<script>
export default {
}
</script>
UI/src/view/layout/SideBar.vue 0 → 100644
View file @ 7db70cee
<template>
<sidebar-menu :menu="menu" />
</template>
<script>
import {
SidebarMenu
} from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
export default {
components: {
SidebarMenu,
},
data() {
return {
menu: [{
header: true,
title: 'Analytics Dashboard',
hiddenOnCollapse: true
},
{
href: '/',
title: 'Dashboard',
icon: 'fas fa-tachometer-alt'
},
{
href: '/student/analytics',
title: 'Student Analytics',
icon: 'fas fa-users'
},
{
href: '/activity',
title: 'Activity Analytics',
icon: 'fas fa-chart-line'
},
{
href: '/reports',
title: 'Reports',
icon: 'fas fa-file-alt'
}
]
}
}
}
</script>
\ No newline at end of file
UI/src/view/pages/Activity.vue 0 → 100644
View file @ 7db70cee
<template>
<section>
<h4 class="text-uppercase mb-4">Activity data analytics</h4>
<div class="row">
<div class="col-12">
<div class="card mb-4">
<div class="card-body">
<h4 class="text-dark font-weight-bold">Search Students</h4>
<b-form>
<div class="form-row">
<b-form-group label="Subject" class="col-4">
<b-form-input></b-form-input>
</b-form-group>
<b-form-group label="Lesson" class="col-4">
<b-form-input v-model="filter"></b-form-input>
</b-form-group>
<b-form-group label="Quiz #ID" class="col-4">
<b-form-input></b-form-input>
</b-form-group>
</div>
<div class="text-center">
<b-button type="submit" variant="primary" class="text-white">Search <i
class="fas fa-search ml-2"></i></b-button>
</div>
</b-form>
</div>
</div>
<div class="card">
<div class="card-body">
<b-table bordered hover :items="items" :filter="filter">
<template v-slot:cell(quiz_name)="row">
<b-link href="#" to="/activity/analytics">{{ row.item.quiz_name }}</b-link>
</template>
</b-table>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
components: {
},
data() {
return {
fields: ['ID', 'Quiz Name', 'Lesson', 'Subject', 'No of players'],
items: [{
id: 1,
quiz_name: 'Test 01',
lesson: 'xxx',
subject: 'maths',
no_of_players: 21
},
{
id: 2,
quiz_name: 'Test 02',
lesson: 'xxx',
subject: 'environment',
no_of_players: 55
},
],
filter: null,
}
},
}
</script>
\ No newline at end of file
UI/src/view/pages/ActivityAnalytics.vue 0 → 100644
View file @ 7db70cee
<template>
<section>
<h4 class="text-uppercase mb-4">Quiz Info</h4>
<div class="row mt-3">
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-4">
<h5 class="text-dark mb-o">75% Correct</h5>
<b-button type="button" variant="primary" class="text-white">Play Again</b-button>
</div>
<canvas id="lastTest"></canvas>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center border justify-content-between rounded p-3">
<div class="d-flex align-items-center">
<h3 class="text-dark mb-0"><i class="fas fa-user-friends"></i></h3>
<h5 class="text-dark mb-0 ml-3">Players</h5>
</div>
<p class="text-muted mb-0">35</p>
</div>
<div class="d-flex align-items-center border justify-content-between rounded p-3 my-4">
<div class="d-flex align-items-center">
<h3 class="text-dark mb-0"><i class="fas fa-question"></i></h3>
<h5 class="text-dark mb-0 ml-3">Questions</h5>
</div>
<p class="text-muted mb-0">35</p>
</div>
<div class="d-flex align-items-center border justify-content-between rounded p-3">
<div class="d-flex align-items-center">
<h3 class="text-dark mb-0"><i class="far fa-clock"></i></h3>
<h5 class="text-dark mb-0 ml-3">Avg.time</h5>
</div>
<p class="text-muted mb-0">45 min</p>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<h4 class="mb-4">Need Help?</h4>
<div class="d-flex align-items-center justify-content-between border rounded p-3 mb-3">
<h5 class="text-dark mb-0 ml-3">Dilhara</h5>
<p class="text-muted mb-0">15%</p>
</div>
<div class="d-flex align-items-center justify-content-between border rounded p-3 mb-3">
<h5 class="text-dark mb-0 ml-3">Chamath</h5>
<p class="text-muted mb-0">23%</p>
</div>
<div class="d-flex align-items-center justify-content-between border rounded p-3 mb-3">
<h5 class="text-dark mb-0 ml-3">Ajith</h5>
<p class="text-muted mb-0">23%</p>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<h4 class="mb-4">Diffcult Questions</h4>
<div class="d-flex align-items-center justify-content-between border rounded p-3 mb-3">
<div>
<h5 class="text-dark mb-0">1 - quiz</h5>
<p class="text-muted mb-0">What is xxxxxxxxxxxxxxxxx ?</p>
</div>
<div>
<h4>+ 4</h4>
<b-link href="#">See more</b-link>
</div>
</div>
<div class="d-flex align-items-center justify-content-between border rounded p-3 mb-3">
<div>
<h5 class="text-dark mb-0">2 - quiz</h5>
<p class="text-muted mb-0">What is xxxxxxxxxxxxxxxxx ?</p>
</div>
<div>
<h4>+ 6</h4>
<b-link href="#">See more</b-link>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import Chart from 'chart.js';
export default {
name: "StudentProfile",
data() {
return {
chartData: [],
chartLabels: [],
}
},
mounted() {
// this.showStudentProgress()
this.showLastTestPerfomance()
},
methods: {
showStudentProgress() {
var ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets: [{
label: 'Subjects',
data: [12, 19, 3, 5, 2, 3, 7],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
// options: {
// scales: {
// yAxes: [{
// ticks: {
// beginAtZero: true
// }
// }]
// }
// }
});
},
showLastTestPerfomance() {
var ctx = document.getElementById('lastTest');
new Chart(ctx, {
type: 'pie',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets: [{
label: 'Subjects',
data: [12, 19, 3, 5, 2, 3, 7],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
// options: {
// scales: {
// yAxes: [{
// ticks: {
// beginAtZero: true
// }
// }]
// }
// }
});
},
},
}
</script>
<style scoped>
canvas {
width: 600px !important;
height: 300px !important;
}
</style>
\ No newline at end of file
UI/src/view/pages/Dashboard.vue 0 → 100644
View file @ 7db70cee
<template>
<section>
<h4 class="text-uppercase mb-4">Dashboard</h4>
<div class="row">
<div class="col-4">
<div class="card">
<div class="card-body">
<p class="text-center text-dark mb-2" style="font-size: 4em;"><i class="fas fa-users"></i></p>
<p class="text-center font-weight-bold text-dark">Students</p>
<p class="text-center text-muted">{{ studentCount }}</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
<p class="text-center text-dark mb-2" style="font-size: 4em;"><i class="fas fa-file-alt"></i></p>
<p class="text-center font-weight-bold text-dark">Activites</p>
<p class="text-center text-muted">110</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-body">
<p class="text-center text-dark mb-2" style="font-size: 4em;"><i class="fas fa-comments"></i></p>
<p class="text-center font-weight-bold text-dark">Comments</p>
<p class="text-center text-muted">256</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="text-dark font-weight-bold">Analytics Chart</h4>
<canvas id="myChart"></canvas>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import Chart from 'chart.js';
import ApiService from '@/services/api.service';
export default {
data() {
return {
chartData: [],
chartLabels: [],
studentCount: 0,
}
},
created() {
this.getStudentsCount()
},
mounted() {
this.createChart()
},
methods: {
createChart() {
var ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets: [{
label: 'Subjects',
data: [12, 19, 3, 5, 2, 3, 7],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
},
getStudentsCount() {
ApiService.get('/students/count').then(( {data} ) => {
this.studentCount = data;
}).catch( e=> { console.log( e ); })
}
},
}
</script>
\ No newline at end of file
UI/src/view/pages/Login.vue 0 → 100644
View file @ 7db70cee
<template>
<section>
<div class="container mt-5">
<div class="row align-items-center justify-content-center">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5>Log in Form</h5>
<b-link href="#" class="btn btn-danger w-100 mt-4 mb-3">Log in with Google</b-link>
<p class="text-center text-muted">---------------------------- &nbsp; &nbsp; Or &nbsp; &nbsp;----------------------------</p>
<b-form class="my-4">
<b-form-group class="mb-4">
<b-form-input type="email" placeholder="Username or Email" required></b-form-input>
</b-form-group>
<b-form-group class="mb-4">
<b-form-input placeholder="Password" required></b-form-input>
</b-form-group>
<b-form-group class="mb-4">
<b-link href="#" to="">Forgot your Password?</b-link>
</b-form-group>
<div class="text-center">
<b-button type="submit" class="text-white px-4" variant="primary">Log in</b-button>
</div>
</b-form>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<style>
body {
background: rgb(247 247 247);
}
</style>
\ No newline at end of file
UI/src/view/pages/Reports.vue 0 → 100644
View file @ 7db70cee
<template>
<section>
<h4 class="text-uppercase mb-4">Reports Viewer</h4>
<div class="row align-items-stretch">
<div class="col-3">
<div class="card mb-4">
<div class="card-body">
<div class="text-center">
<p class="text-center text-dark mb-2" style="font-size: 5em;"><i class="fas fa-users"></i>
</p>
<div class="d-flex align-items-center justify-content-center mb-3">
<b-form-radio v-model="individual" class="mr-3" name="students" value="in">Individual
</b-form-radio>
<b-form-radio v-model="individual" name="students" value="al">All Students
</b-form-radio>
</div>
<b-form-select v-if="individual === 'in'" v-model="selected" :options="options" size="sm"></b-form-select>
<div class="d-flex flex-column mt-5">
<b-button type="button" variant="primary" class="text-white">View</b-button>
<b-button type="button" @click="download" variant="danger" class="text-white mt-4">Download</b-button>
</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="card mb-4">
<div class="card-body">
<div class="text-center">
<p class="text-center text-dark mb-2" style="font-size: 5em;"><i class="fas fa-file-alt"></i>
</p>
<div class="d-flex align-items-center justify-content-center mb-5">
<b-form-radio v-model="report" class="mr-3" name="report" value="in">Daily Report
</b-form-radio>
<b-form-radio v-model="report" name="report" value="al">Monthly Report
</b-form-radio>
</div>
<div class="d-flex flex-column mt-5">
<b-button type="button" variant="primary" class="text-white">View</b-button>
<b-button type="button" @click="download" variant="danger" class="text-white mt-4">Download</b-button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
// import ApiService from '../../services/api.service'
import FileSaver from 'file-saver';
export default {
data() {
return {
individual: null,
report: null,
selected: null,
options: [{
value: null,
text: 'Select Student ID'
}, ]
}
},
methods: {
download() {
var blob = new Blob(["Hello, Student!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "Students-data.pdf");
}
},
}
</script>
\ No newline at end of file
UI/src/view/pages/Student.vue 0 → 100644
View file @ 7db70cee
<template>
<section>
<h4 class="text-uppercase mb-4">student analytics</h4>
<div class="row">
<div class="col-12">
<div class="card mb-4">
<div class="card-body">
<h4 class="text-dark font-weight-bold">Search Students</h4>
<b-form>
<div class="form-row">
<b-form-group label="Student #ID" class="col-4">
<b-form-input></b-form-input>
</b-form-group>
<b-form-group label="Student Name" class="col-4">
<b-form-input v-model="filter"></b-form-input>
</b-form-group>
<b-form-group label="Class #ID" class="col-4">
<b-form-input></b-form-input>
</b-form-group>
</div>
<div class="text-center">
<b-button type="submit" variant="primary" class="text-white">Search <i
class="fas fa-search ml-2"></i></b-button>
</div>
</b-form>
</div>
</div>
<div class="card">
<div class="card-body">
<b-table bordered hover :fields="fields" :items="items" :filter="filter">
<template v-slot:cell(name)="row">
<b-link href="#" :to="'/student/profile/'+ row.item.id">{{ row.item.name }}</b-link>
</template>
</b-table>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
<<<<<<< HEAD
import ApiService from '../../services/api.service'
export default {
data() {
return {
fields: ['id', 'Name', 'gender', 'branch', 'username'],
=======
import ApiService from '@/services/api.service';
export default {
data() {
return {
fields: ['ID', 'Name', 'Class', 'Contacts', 'Parent'],
>>>>>>> bb6ef00918e4d58139578a3c10c6d8367b83c693
items: [],
filter: null,
}
},
<<<<<<< HEAD
created() {
this.populateStudents()
},
methods: {
populateStudents() {
ApiService.get('/students', 'all')
.then(response => {
this.items = response.data
})
.catch(error => {
console.log(error)
})
}
=======
created() {
ApiService.get('/students/all').then(({data})=>{
this.items = data;
}).catch(e=>{
console.log(e);
})
},
mounted() {
},
methods: {
>>>>>>> bb6ef00918e4d58139578a3c10c6d8367b83c693
},
}
</script>
\ No newline at end of file
UI/src/view/pages/StudentProfile.vue 0 → 100644
View file @ 7db70cee
<template>
<section>
<h4 class="text-uppercase mb-4">student Profile</h4>
<div class="row align-items-stretch">
<div class="col-6">
<div class="card mb-4">
<div class="card-body">
<div class="d-flex align-items-start">
<img src="@/assets/profile-pic.png" class="img-fluid mr-3 rounded" alt="Student Profile picture">
<div>
<h5 class="text-dark mb-0">{{ student.name }}</h5>
<p class="text-muted mb-0">{{ student.username }}</p>
<p class="text-muted mb-0">{{ student.branch }}</p>
<p class="text-muted mb-0">{{ student.phno }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="card mb-4">
<div class="card-body">
<p class="text-center text-dark mb-2" style="font-size: 4em;"><i class="fas fa-users"></i></p>
<p class="text-center font-weight-bold text-dark">Attendance</p>
<p class="text-center text-muted">{{ attendance }}%</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card mb-4">
<div class="card-body">
<p class="text-center text-dark mb-2" style="font-size: 4em;"><i class="fas fa-users"></i></p>
<p class="text-center font-weight-bold text-dark">Works</p>
<p class="text-center text-muted">{{ works }}%</p>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-6">
<div class="card">
<div class="card-body">
<h4 class="text-dark font-weight-bold">Students progress</h4>
<canvas id="myChart"></canvas>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<h4 class="text-dark font-weight-bold">Last Test performance</h4>
<canvas id="lastTest"></canvas>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import Chart from 'chart.js';
import ApiService from '../../services/api.service'
export default {
name: "StudentProfile",
data() {
return {
student: {},
attendance: null,
works: null,
chartData: [],
chartLabels: [],
}
},
created() {
this.populateProfile()
this.populateAttendanceWorks()
},
mounted() {
this.showStudentProgress()
this.showLastTestPerfomance()
},
methods: {
showStudentProgress() {
var ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets: [{
label: 'Subjects',
data: [12, 19, 3, 5, 2, 3, 7],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
},
showLastTestPerfomance() {
var ctx = document.getElementById('lastTest');
new Chart(ctx, {
type: 'pie',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets: [{
label: 'Subjects',
data: [12, 19, 3, 5, 2, 3, 7],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
// options: {
// scales: {
// }
// }
});
},
populateProfile() {
ApiService.get('/students/view', this.$route.params.id)
.then(response => {
this.student = response.data
})
.catch(error => {
console.log(error)
})
},
populateAttendanceWorks() {
ApiService.get('/students', 'get-attendance')
.then(response => {
this.attendance = response.data
})
.catch(error => {
console.log(error)
})
ApiService.get('/students', 'get-works')
.then(response => {
this.works = response.data
})
.catch(error => {
console.log(error)
})
}
}
}
</script>
\ No newline at end of file
UI/yarn.lock 0 → 100644
View file @ 7db70cee
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment