Skip to content

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

'updated_UI'

parent 790a9991
Show whitespace changes
Inline Side-by-side
Showing with 2458 additions and 383 deletions
.idea/20_21-j09.iml 0 → 100644
View file @ 71980c9f
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/Core/app" isTestSource="false" packagePrefix="App\" />
<sourceFolder url="file://$MODULE_DIR$/Core/database/factories" isTestSource="false" packagePrefix="Database\Factories\" />
<sourceFolder url="file://$MODULE_DIR$/Core/database/seeders" isTestSource="false" packagePrefix="Database\Seeders\" />
<sourceFolder url="file://$MODULE_DIR$/spec" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/tests" isTestSource="true" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
.idea/inspectionProfiles/Project_Default.xml 0 → 100644
View file @ 71980c9f
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>
\ No newline at end of file
.idea/modules.xml 0 → 100644
View file @ 71980c9f
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/20_21-j09.iml" filepath="$PROJECT_DIR$/.idea/20_21-j09.iml" />
</modules>
</component>
</project>
\ No newline at end of file
.idea/php.xml 0 → 100644
View file @ 71980c9f
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="PhpProjectSharedConfiguration" php_language_level="7.3" />
</project>
\ No newline at end of file
.idea/vcs.xml 0 → 100644
View file @ 71980c9f
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>
\ No newline at end of file
.idea/workspace.xml
View file @ 71980c9f
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="1a1b2fc9-e664-4b80-be31-181ccebefc6b" name="Default Changelist" comment="" /> <list default="true" id="1a1b2fc9-e664-4b80-be31-181ccebefc6b" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/UI/.gitignore" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/UI/README.md" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/babel.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/UI/babel.config.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/UI/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/UI/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/public/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/UI/public/index.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/App.vue" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/App.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/components/HelloWorld.vue" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/components/HelloWorld.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/config/config.js" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/config/config.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/main.js" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/main.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/plugins/vuetify.js" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/plugins/vuetify.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/router.js" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/router.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/sass/main.scss" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/sass/main.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/services/api.service.js" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/services/api.service.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/services/config.js" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/services/config.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/services/jwt.service.js" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/services/jwt.service.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/view/layout/Base.vue" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/view/layout/Base.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/view/layout/Footer.vue" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/view/layout/Footer.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/view/layout/Header.vue" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/view/layout/Header.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/view/layout/SideBar.vue" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/view/layout/SideBar.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/view/pages/Activity.vue" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/view/pages/Activity.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/view/pages/ActivityAnalytics.vue" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/view/pages/ActivityAnalytics.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/view/pages/Dashboard.vue" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/view/pages/Dashboard.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/view/pages/Login.vue" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/view/pages/Login.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/view/pages/Reports.vue" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/view/pages/Reports.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/view/pages/Student.vue" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/view/pages/Student.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/src/view/pages/StudentProfile.vue" beforeDir="false" afterPath="$PROJECT_DIR$/UI/src/view/pages/StudentProfile.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/UI/yarn.lock" beforeDir="false" afterPath="$PROJECT_DIR$/UI/yarn.lock" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" /> <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" /> <option name="LAST_RESOLUTION" value="IGNORE" />
</component> </component>
<component name="ComposerSettings"> <component name="ComposerSettings" synchronizationState="SYNCHRONIZE">
<pharConfigPath>$PROJECT_DIR$/Core/composer.json</pharConfigPath>
<execution /> <execution />
</component> </component>
<component name="Git.Settings"> <component name="Git.Settings">
...@@ -24,6 +55,8 @@ ...@@ -24,6 +55,8 @@
<property name="RunOnceActivity.ShowReadmeOnStart" value="true" /> <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
<property name="WebServerToolWindowFactoryState" value="false" /> <property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$" /> <property name="last_opened_file_path" value="$PROJECT_DIR$" />
<property name="node.js.detected.package.eslint" value="true" />
<property name="node.js.selected.package.eslint" value="(autodetect)" />
<property name="nodejs_package_manager_path" value="yarn" /> <property name="nodejs_package_manager_path" value="yarn" />
<property name="vue.rearranger.settings.migration" value="true" /> <property name="vue.rearranger.settings.migration" value="true" />
</component> </component>
...@@ -35,7 +68,8 @@ ...@@ -35,7 +68,8 @@
<option name="number" value="Default" /> <option name="number" value="Default" />
<option name="presentableId" value="Default" /> <option name="presentableId" value="Default" />
<updated>1613414107534</updated> <updated>1613414107534</updated>
<workItem from="1613414111905" duration="649000" /> <workItem from="1613414111905" duration="2105000" />
<workItem from="1620655555354" duration="1293000" />
</task> </task>
<servers /> <servers />
</component> </component>
......
UI/package.json
View file @ 71980c9f
...@@ -52,7 +52,9 @@ ...@@ -52,7 +52,9 @@
"parserOptions": { "parserOptions": {
"parser": "babel-eslint" "parser": "babel-eslint"
}, },
"rules": {} "rules": {
"no-debugger":"off"
}
}, },
"browserslist": [ "browserslist": [
"> 1%", "> 1%",
......
UI/src/main.js
View file @ 71980c9f
...@@ -2,7 +2,7 @@ import Vue from 'vue' ...@@ -2,7 +2,7 @@ import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from "./router"; import router from "./router";
import vuetify from "./plugins/vuetify"; import vuetify from "./plugins/vuetify";
import { API_URL } from "@/services/config" //import { API_URL } from "@/services/config"
import ApiService from './services/api.service' import ApiService from './services/api.service'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
...@@ -12,9 +12,6 @@ import 'bootstrap/dist/css/bootstrap.css' ...@@ -12,9 +12,6 @@ import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css' import 'bootstrap-vue/dist/bootstrap-vue.css'
import Chat from 'vue-beautiful-chat' import Chat from 'vue-beautiful-chat'
import ApiService from '@/services/api.service';
ApiService.init();
// Make BootstrapVue available throughout your project // Make BootstrapVue available throughout your project
Vue.use(BootstrapVue) Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin // Optionally install the BootstrapVue icon components plugin
...@@ -22,7 +19,7 @@ Vue.use(IconsPlugin) ...@@ -22,7 +19,7 @@ Vue.use(IconsPlugin)
Vue.use(Chat) Vue.use(Chat)
import './sass/main.scss'; import './sass/main.scss';
ApiService.init(API_URL) ApiService.init()
Vue.config.productionTip = false Vue.config.productionTip = false
......
UI/src/router.js
View file @ 71980c9f
...@@ -41,7 +41,7 @@ export default new Router({ ...@@ -41,7 +41,7 @@ export default new Router({
component: () => import("@/view/pages/Activity.vue"), component: () => import("@/view/pages/Activity.vue"),
}, },
{ {
path: "/activity/analytics", path: "/activity/analytics/:id",
name: "ActivityAnalytics", name: "ActivityAnalytics",
component: () => import("@/view/pages/ActivityAnalytics.vue"), component: () => import("@/view/pages/ActivityAnalytics.vue"),
}, },
......
UI/src/services/api.service.js
View file @ 71980c9f
<<<<<<< HEAD
import axios from 'axios' import axios from 'axios'
// import { TokenService } from '@/services/token.service' // import { TokenService } from '@/services/token.service'
// import store from '@/store/' // 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 = { const ApiService = {
<<<<<<< HEAD
// Stores the 401 interceptor position so that it can be later ejected when needed // Stores the 401 interceptor position so that it can be later ejected when needed
_401interceptor: null, _401interceptor: null,
init (baseURL) { init () {
axios.defaults.baseURL = baseURL axios.defaults.baseURL = 'http://localhost:8000//api/'
=======
init() {
Vue.use(VueAxios, axios);
Vue.axios.defaults.baseURL = 'http://localhost:8000/api/';
>>>>>>> bb6ef00918e4d58139578a3c10c6d8367b83c693
}, },
setHeader () { setHeader () {
......
UI/src/view/layout/Base.vue
View file @ 71980c9f
...@@ -9,12 +9,12 @@ ...@@ -9,12 +9,12 @@
<router-view /> <router-view />
</v-app> </v-app>
</transition> </transition>
<beautiful-chat :onMessageWasSent="onMessageWasSent" :messageList="messageList" <!-- <beautiful-chat :onMessageWasSent="onMessageWasSent" :messageList="messageList"
:newMessagesCount="newMessagesCount" :participants="participants" :isOpen="isChatOpen" :newMessagesCount="newMessagesCount" :participants="participants" :isOpen="isChatOpen"
:close="closeChat" :open="openChat" :showEmoji="true" :showFile="true" :showEdition="true" :showDeletion="true" :close="closeChat" :open="openChat" :showEmoji="true" :showFile="true" :showEdition="true" :showDeletion="true"
:showTypingIndicator="showTypingIndicator" :showLauncher="true" :showCloseButton="true" :showTypingIndicator="showTypingIndicator" :showLauncher="true" :showCloseButton="true"
:alwaysScrollToBottom="alwaysScrollToBottom" :messageStyling="messageStyling" @onType="handleOnType" :alwaysScrollToBottom="alwaysScrollToBottom" :messageStyling="messageStyling" @onType="handleOnType"
@edit="editMessage" /> @edit="editMessage" /> -->
<Footer></Footer> <Footer></Footer>
</main> </main>
</div> </div>
......
UI/src/view/layout/Header.vue
View file @ 71980c9f
...@@ -2,9 +2,8 @@ ...@@ -2,9 +2,8 @@
<header> <header>
<b-navbar type="dark" variant="dark"> <b-navbar type="dark" variant="dark">
<b-navbar-nav class="ml-auto"> <b-navbar-nav class="ml-auto">
<b-nav-item-dropdown text="Username" right> <b-nav-item-dropdown :text="user && user.username" right>
<b-dropdown-item href="#">Settings</b-dropdown-item> <b-dropdown-item href="/login">Logout</b-dropdown-item>
<b-dropdown-item href="#">Logout</b-dropdown-item>
</b-nav-item-dropdown> </b-nav-item-dropdown>
</b-navbar-nav> </b-navbar-nav>
...@@ -13,6 +12,13 @@ ...@@ -13,6 +12,13 @@
</template> </template>
<script> <script>
export default { export default {
data() {
return {
user:null
}
},
created() {
this.user = JSON.parse(window.localStorage.getItem('user'));
},
} }
</script> </script>
UI/src/view/layout/SideBar.vue
View file @ 71980c9f
...@@ -35,11 +35,11 @@ ...@@ -35,11 +35,11 @@
title: 'Activity Analytics', title: 'Activity Analytics',
icon: 'fas fa-chart-line' icon: 'fas fa-chart-line'
}, },
{ // {
href: '/reports', // href: '/reports',
title: 'Reports', // title: 'Reports',
icon: 'fas fa-file-alt' // icon: 'fas fa-file-alt'
} // }
] ]
} }
} }
......
UI/src/view/pages/Activity.vue
View file @ 71980c9f
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<h4 class="text-uppercase mb-4">Activity data analytics</h4> <h4 class="text-uppercase mb-4">Activity data analytics</h4>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="card mb-4"> <!-- <div class="card mb-4">
<div class="card-body"> <div class="card-body">
<h4 class="text-dark font-weight-bold">Search Students</h4> <h4 class="text-dark font-weight-bold">Search Students</h4>
<b-form> <b-form>
...@@ -24,8 +24,8 @@ ...@@ -24,8 +24,8 @@
</div> </div>
</b-form> </b-form>
</div> </div>
</div> </div> -->
<div class="card"> <!-- <div class="card">
<div class="card-body"> <div class="card-body">
<b-table bordered hover :items="items" :filter="filter"> <b-table bordered hover :items="items" :filter="filter">
<template v-slot:cell(quiz_name)="row"> <template v-slot:cell(quiz_name)="row">
...@@ -33,38 +33,55 @@ ...@@ -33,38 +33,55 @@
</template> </template>
</b-table> </b-table>
</div> </div>
</div> </div> -->
<v-card>
<v-card-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="search"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="items"
:search="search"
>
<template v-slot:[`item.activity_title`]="{ item }">
<b-link href="#" :to="`/activity/analytics/${item.activity_id}`" >{{ item.activity_title }}</b-link>
</template>
</v-data-table>
</v-card>
</div> </div>
</div> </div>
</section> </section>
</template> </template>
<script> <script>
import ApiService from '../../services/api.service'
export default { export default {
components: { components: {
}, },
data() { data() {
return { return {
fields: ['ID', 'Quiz Name', 'Lesson', 'Subject', 'No of players'], search:null,
items: [{ headers: [{text:'ID',value:'activity_id'}, {text:'Title',value:'activity_title'},
id: 1, {text: 'Subject',value:'subject'},{text: 'No of players',value:'no_of_students'}],
quiz_name: 'Test 01', items: [],
lesson: 'xxx',
subject: 'maths',
no_of_players: 21
},
{
id: 2,
quiz_name: 'Test 02',
lesson: 'xxx',
subject: 'environment',
no_of_players: 55
},
],
filter: null, filter: null,
} }
}, },
created() {
ApiService.get('quiz/activity-master')
.then(response => {
this.items = response.data
})
.catch(error => {
console.log(error)
})
},
} }
</script> </script>
\ No newline at end of file
UI/src/view/pages/ActivityAnalytics.vue
View file @ 71980c9f
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-4"> <div class="d-flex align-items-center justify-content-between mb-4">
<h5 class="text-dark mb-o">75% Correct</h5> <h5 class="text-dark mb-o">{{completed}}% is Completed</h5>
<b-button type="button" variant="primary" class="text-white">Play Again</b-button> <!-- <b-button type="button" variant="primary" class="text-white">Play Again</b-button> -->
</div> </div>
<canvas id="lastTest"></canvas> <canvas id="lastTest"></canvas>
</div> </div>
...@@ -21,21 +21,21 @@ ...@@ -21,21 +21,21 @@
<h3 class="text-dark mb-0"><i class="fas fa-user-friends"></i></h3> <h3 class="text-dark mb-0"><i class="fas fa-user-friends"></i></h3>
<h5 class="text-dark mb-0 ml-3">Players</h5> <h5 class="text-dark mb-0 ml-3">Players</h5>
</div> </div>
<p class="text-muted mb-0">35</p> <p class="text-muted mb-0">{{activity.no_of_students}}</p>
</div> </div>
<div class="d-flex align-items-center border justify-content-between rounded p-3 my-4"> <div class="d-flex align-items-center border justify-content-between rounded p-3 my-4">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<h3 class="text-dark mb-0"><i class="fas fa-question"></i></h3> <h3 class="text-dark mb-0"><i class="fas fa-question"></i></h3>
<h5 class="text-dark mb-0 ml-3">Questions</h5> <h5 class="text-dark mb-0 ml-3">Questions</h5>
</div> </div>
<p class="text-muted mb-0">35</p> <p class="text-muted mb-0">{{activity.no_of_quiz}}</p>
</div> </div>
<div class="d-flex align-items-center border justify-content-between rounded p-3"> <div class="d-flex align-items-center border justify-content-between rounded p-3">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<h3 class="text-dark mb-0"><i class="far fa-clock"></i></h3> <h3 class="text-dark mb-0"><i class="far fa-clock"></i></h3>
<h5 class="text-dark mb-0 ml-3">Avg.time</h5> <h5 class="text-dark mb-0 ml-3">Avg.time</h5>
</div> </div>
<p class="text-muted mb-0">45 min</p> <p class="text-muted mb-0">{{activity.avg_time}} min</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -44,17 +44,10 @@ ...@@ -44,17 +44,10 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h4 class="mb-4">Need Help?</h4> <h4 class="mb-4">Need Help?</h4>
<div class="d-flex align-items-center justify-content-between border rounded p-3 mb-3"> <div v-for="(student,index) in lowStudents" :key="index"
<h5 class="text-dark mb-0 ml-3">Dilhara</h5> class="d-flex align-items-center justify-content-between border rounded p-3 mb-3">
<p class="text-muted mb-0">15%</p> <h5 class="text-dark mb-0 ml-3">{{student.info.first_name}} {{student.info.last_name}}</h5>
</div> <p class="text-muted mb-0">{{student.marks}} - - Grade( {{student.grade}} )</p>
<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> </div>
...@@ -63,24 +56,42 @@ ...@@ -63,24 +56,42 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h4 class="mb-4">Diffcult Questions</h4> <h4 class="mb-4">Diffcult Questions</h4>
<div class="d-flex align-items-center justify-content-between border rounded p-3 mb-3"> <div v-for="(quiz,index) in diffQuiz" :key="index"
<div> class="d-flex align-items-center justify-content-between border rounded p-3 mb-3">
<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> <div>
<h5 class="text-dark mb-0">2 - quiz</h5> <h5 class="text-dark mb-0">{{index+1}} - quiz</h5>
<p class="text-muted mb-0">What is xxxxxxxxxxxxxxxxx ?</p> <p class="text-muted mb-0" v-html="quiz.question"></p>
<b-link :class="quiz.visible ? null : 'collapsed'"
:aria-expanded="visible ? 'true' : 'false'"
:aria-controls="'collapse-'+ index"
@click="quiz.visible = !quiz.visible" href="#">Show more...</b-link>
<b-collapse :id="'collapse-'+ index" v-model="quiz.visible" class="mt-2">
<b-card>
<p>
<label for="answer1">Answer 1 :</label> <br>
<span v-html="quiz.first_answer"></span>
</p>
<p>
<label for="answer1">Answer 2 :</label> <br>
<span v-html="quiz.second_answer"></span>
</p>
<p>
<label for="answer1">Answer 3 :</label> <br>
<span v-html="quiz.third_answer"></span>
</p>
<p>
<label for="answer1">Answer 4 :</label> <br>
<span v-html="quiz.fourth_answer"></span>
</p>
<p>
<label for="answer1">Answer 5 :</label> <br>
<span v-html="quiz.fifth_answer"></span>
</p>
</b-card>
</b-collapse>
</div> </div>
<div> <div>
<h4>+ 6</h4>
<b-link href="#">See more</b-link>
</div> </div>
</div> </div>
...@@ -92,14 +103,59 @@ ...@@ -92,14 +103,59 @@
</template> </template>
<script> <script>
import Chart from 'chart.js'; import Chart from 'chart.js';
import ApiService from '../../services/api.service'
export default { export default {
name: "StudentProfile", name: "StudentProfile",
data() { data() {
return { return {
chartData: [], chartData: [],
chartLabels: [], chartLabels: [],
activity: {
avg_time: 0,
no_of_students: 0,
no_of_quiz: 0
},
completed: 0,
lowStudents: [],
diffQuiz: []
} }
}, },
created() {
ApiService.get('quiz/activity-master', this.$route.params.id)
.then(response => {
this.activity = response.data
})
.catch(error => {
console.log(error)
})
ApiService.get('quiz/completed', this.$route.params.id)
.then(response => {
this.completed = response.data.count.count
})
.catch(error => {
console.log(error)
})
ApiService.get('/quiz/lowStudents/' + this.$route.params.id)
.then(response => {
this.lowStudents = response.data.students
})
.catch(error => {
console.log(error)
})
ApiService.get('/quiz/diffquiz/' + this.$route.params.id)
.then(response => {
response.data.quiz.forEach(element => {
element.visible = false;
});
this.diffQuiz = response.data.quiz
})
.catch(error => {
console.log(error)
})
},
mounted() { mounted() {
// this.showStudentProgress() // this.showStudentProgress()
this.showLastTestPerfomance() this.showLastTestPerfomance()
...@@ -110,10 +166,10 @@ ...@@ -110,10 +166,10 @@
new Chart(ctx, { new Chart(ctx, {
type: 'line', type: 'line',
data: { data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], labels: [],
datasets: [{ datasets: [{
label: 'Subjects', label: 'Grades',
data: [12, 19, 3, 5, 2, 3, 7], data: [],
backgroundColor: [ backgroundColor: [
'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)', 'rgba(54, 162, 235, 0.2)',
...@@ -133,26 +189,29 @@ ...@@ -133,26 +189,29 @@
borderWidth: 1 borderWidth: 1
}] }]
}, },
// options: {
// scales: {
// yAxes: [{
// ticks: {
// beginAtZero: true
// }
// }]
// }
// }
}); });
}, },
showLastTestPerfomance() { showLastTestPerfomance() {
ApiService.get('quiz/rankings', this.$route.params.id)
.then(({
data
}) => {
const xAxis = []
const yAxis = []
data.forEach(element => {
xAxis.push(element.grade)
yAxis.push(element.count)
});
var ctx = document.getElementById('lastTest'); var ctx = document.getElementById('lastTest');
new Chart(ctx, { new Chart(ctx, {
type: 'pie', type: 'pie',
data: { data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], labels: xAxis,
datasets: [{ datasets: [{
label: 'Subjects', label: 'Grades',
data: [12, 19, 3, 5, 2, 3, 7], data: yAxis,
backgroundColor: [ backgroundColor: [
'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)', 'rgba(54, 162, 235, 0.2)',
...@@ -182,6 +241,11 @@ ...@@ -182,6 +241,11 @@
// } // }
// } // }
}); });
})
.catch(error => {
console.log(error)
})
}, },
}, },
} }
......
UI/src/view/pages/Dashboard.vue
View file @ 71980c9f
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div class="card-body"> <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 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 font-weight-bold text-dark">Activites</p>
<p class="text-center text-muted">110</p> <p class="text-center text-muted">{{activityCount}}</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<div class="card-body"> <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 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 font-weight-bold text-dark">Comments</p>
<p class="text-center text-muted">256</p> <p class="text-center text-muted">{{commentCount}}</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -52,6 +52,8 @@ ...@@ -52,6 +52,8 @@
chartData: [], chartData: [],
chartLabels: [], chartLabels: [],
studentCount: 0, studentCount: 0,
activityCount:0,
commentCount:0,
} }
}, },
created() { created() {
...@@ -62,14 +64,21 @@ ...@@ -62,14 +64,21 @@
}, },
methods: { methods: {
createChart() { createChart() {
ApiService.get('common/activity/chart').then(( {data} ) => {
const xAxis =[]
const yAxis=[]
data.counts.forEach(element => {
xAxis.push(element.type)
yAxis.push(element.count)
});
var ctx = document.getElementById('myChart'); var ctx = document.getElementById('myChart');
new Chart(ctx, { new Chart(ctx, {
type: 'bar', type: 'bar',
data: { data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], labels: xAxis,
datasets: [{ datasets: [{
label: 'Subjects', label: 'Subjects',
data: [12, 19, 3, 5, 2, 3, 7], data: yAxis,
backgroundColor: [ backgroundColor: [
'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)', 'rgba(54, 162, 235, 0.2)',
...@@ -99,6 +108,8 @@ ...@@ -99,6 +108,8 @@
} }
} }
}); });
}).catch( e=> { console.log( e ); })
}, },
getStudentsCount() { getStudentsCount() {
ApiService.get('/students/count').then(( {data} ) => { ApiService.get('/students/count').then(( {data} ) => {
...@@ -106,6 +117,16 @@ ...@@ -106,6 +117,16 @@
this.studentCount = data; this.studentCount = data;
}).catch( e=> { console.log( e ); }) }).catch( e=> { console.log( e ); })
ApiService.get('common/activities/count').then(( {data} ) => {
this.activityCount = data.activityCount;
}).catch( e=> { console.log( e ); })
ApiService.get('common/comments/count').then(( {data} ) => {
this.commentCount = data.commentCount;
}).catch( e=> { console.log( e ); })
} }
}, },
} }
......
UI/src/view/pages/Login.vue
View file @ 71980c9f
...@@ -6,23 +6,21 @@ ...@@ -6,23 +6,21 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5>Log in Form</h5> <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 class="my-4">
<b-form-group class="mb-4"> <b-form-group class="mb-4">
<b-form-input type="email" placeholder="Username or Email" required></b-form-input> <b-form-input v-model="form.email" type="email" placeholder="Username or Email" required></b-form-input>
</b-form-group> </b-form-group>
<b-form-group class="mb-4"> <b-form-group class="mb-4">
<b-form-input placeholder="Password" required></b-form-input> <b-form-input v-model="form.password" type="password" placeholder="Password" required></b-form-input>
</b-form-group> </b-form-group>
<b-form-group class="mb-4"> <!-- <b-form-group class="mb-4">
<b-link href="#" to="">Forgot your Password?</b-link> <b-link href="#" to="">Forgot your Password?</b-link>
</b-form-group> </b-form-group> -->
<div class="text-center"> <div class="text-center">
<b-button type="submit" class="text-white px-4" variant="primary">Log in</b-button> <b-button @click="onSubmit" class="text-white px-4" variant="primary">Log in</b-button>
</div> </div>
</b-form> </b-form>
</div> </div>
...@@ -32,6 +30,44 @@ ...@@ -32,6 +30,44 @@
</div> </div>
</section> </section>
</template> </template>
<script>
import ApiService from '@/services/api.service';
export default {
data() {
return {
form: {
email: null,
password: null
},
}
},
mounted(){
window.localStorage.removeItem('user');
},
methods: {
onSubmit(){
setTimeout(() => {
// send login request
ApiService.post('login', this.form)
// go to which page after successfully login
.then(({data}) => {
if (data.user != null) {
window.localStorage.setItem('user',JSON.stringify(data.user));
this.$router.push({ name: "dashboard" });
} else {
window.localStorage.removeItem('user');
window.location.reload();
}
})
.catch(() => {
window.localStorage.removeItem('user');
window.location.reload();
});
}, 2000);
}
},
}
</script>
<style> <style>
body { body {
background: rgb(247 247 247); background: rgb(247 247 247);
......
UI/src/view/pages/Student.vue
View file @ 71980c9f
...@@ -3,81 +3,56 @@ ...@@ -3,81 +3,56 @@
<h4 class="text-uppercase mb-4">student analytics</h4> <h4 class="text-uppercase mb-4">student analytics</h4>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="card mb-4"> <v-card>
<div class="card-body"> <v-card-title>
<h4 class="text-dark font-weight-bold">Search Students</h4> Students
<b-form> <v-spacer></v-spacer>
<div class="form-row"> <v-text-field
<b-form-group label="Student #ID" class="col-4"> v-model="search"
<b-form-input></b-form-input> append-icon="search"
</b-form-group> label="Search"
<b-form-group label="Student Name" class="col-4"> single-line
<b-form-input v-model="filter"></b-form-input> hide-details
</b-form-group> ></v-text-field>
<b-form-group label="Class #ID" class="col-4"> </v-card-title>
<b-form-input></b-form-input> <v-data-table
</b-form-group> :headers="headers"
</div> :items="students"
<div class="text-center"> :search="search"
<b-button type="submit" variant="primary" class="text-white">Search <i >
class="fas fa-search ml-2"></i></b-button> <template v-slot:[`item.first_name`]="{ item }">
</div> <b-link href="#" :to="'/student/profile/'+ item.student_id">{{ item.first_name }}</b-link>
</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> </template>
</b-table> </v-data-table>
</div> </v-card>
</div>
</div> </div>
</div> </div>
</section> </section>
</template> </template>
<script> <script>
<<<<<<< HEAD
import ApiService from '../../services/api.service'
export default {
data() {
return {
fields: ['id', 'Name', 'gender', 'branch', 'username'],
=======
import ApiService from '@/services/api.service'; import ApiService from '@/services/api.service';
export default { export default {
data() { data() {
return { return {
fields: ['ID', 'Name', 'Class', 'Contacts', 'Parent'], search: '',
>>>>>>> bb6ef00918e4d58139578a3c10c6d8367b83c693 headers: [
items: [], {text:'ID',value:'student_id'},
{text:'First Name',value:'first_name'},
{text:'Last Name',value:'last_name'},
{text:'Email',value:'email'},
{text:'Contact',value:'contact'},
{text:'Gender',value:'gender'},
{text:'Grade',value:'grade'}],
students: [],
filter: null, filter: null,
} }
}, },
<<<<<<< HEAD
created() {
this.populateStudents()
},
methods: {
populateStudents() {
ApiService.get('/students', 'all')
.then(response => {
this.items = response.data
})
.catch(error => {
console.log(error)
})
}
=======
created() { created() {
ApiService.get('/students/all').then(({data})=>{ ApiService.get('/students/all').then(({data})=>{
this.students = data.students;
this.items = data;
}).catch(e=>{ }).catch(e=>{
console.log(e); console.log(e);
...@@ -88,7 +63,6 @@ import ApiService from '../../services/api.service' ...@@ -88,7 +63,6 @@ import ApiService from '../../services/api.service'
}, },
methods: { methods: {
>>>>>>> bb6ef00918e4d58139578a3c10c6d8367b83c693
}, },
} }
</script> </script>
\ No newline at end of file
UI/src/view/pages/StudentProfile.vue
View file @ 71980c9f
...@@ -8,10 +8,12 @@ ...@@ -8,10 +8,12 @@
<div class="d-flex align-items-start"> <div class="d-flex align-items-start">
<img src="@/assets/profile-pic.png" class="img-fluid mr-3 rounded" alt="Student Profile picture"> <img src="@/assets/profile-pic.png" class="img-fluid mr-3 rounded" alt="Student Profile picture">
<div> <div>
<h5 class="text-dark mb-0">{{ student.name }}</h5> <h5 class="text-dark mb-0">{{ student.first_name }} {{student.last_name}}</h5>
<p class="text-muted mb-0">{{ student.username }}</p> <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.email }}</p>
<p class="text-muted mb-0">{{ student.phno }}</p> <p class="text-muted mb-0">{{ student.grade }}</p>
<p class="text-muted mb-0">{{ student.contact }}</p>
<p class="text-muted mb-0">Next Level Expectation: {{ nextLevel }}</p>
</div> </div>
</div> </div>
...@@ -24,7 +26,7 @@ ...@@ -24,7 +26,7 @@
<div class="card-body"> <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 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 font-weight-bold text-dark">Attendance</p>
<p class="text-center text-muted">{{ attendance }}%</p> <p class="text-center text-muted">{{ attendance }}</p>
</div> </div>
</div> </div>
...@@ -32,9 +34,9 @@ ...@@ -32,9 +34,9 @@
<div class="col-3"> <div class="col-3">
<div class="card mb-4"> <div class="card mb-4">
<div class="card-body"> <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 text-dark mb-2" style="font-size: 4em;"><i class="fas fa-chart-area"></i></p>
<p class="text-center font-weight-bold text-dark">Works</p> <p class="text-center font-weight-bold text-dark">Works</p>
<p class="text-center text-muted">{{ works }}%</p> <p class="text-center text-muted">{{ works.grade }}</p>
</div> </div>
</div> </div>
...@@ -72,6 +74,7 @@ ...@@ -72,6 +74,7 @@
works: null, works: null,
chartData: [], chartData: [],
chartLabels: [], chartLabels: [],
nextLevel:0
} }
}, },
created() { created() {
...@@ -84,7 +87,79 @@ ...@@ -84,7 +87,79 @@
}, },
methods: { methods: {
showStudentProgress() { showStudentProgress() {
ApiService.get('/students/prediction/' + this.$route.params.id)
.then(({
data
}) => {
var ctx = document.getElementById('myChart'); var ctx = document.getElementById('myChart');
if (data.result != null) {
let actual=[]; let predicted = [];
data.result .forEach(element => {
actual.push(element.actual);
predicted.push(element.predicted);
});
this.nextLevel = parseFloat(predicted[predicted.length - 1]) + parseFloat((parseFloat(predicted[predicted.length - 1]) - parseFloat(predicted[predicted.length - 2]))/2)
new Chart(ctx, {
type: 'line',
data: {
labels: ['Case 1', 'Case 2', 'Case 3', 'Case 4', 'Case 5'],
datasets: [{
label: ['Actual'],
data: actual,
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
},
{
label: ['Predicted'],
data: predicted,
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
'rgba(255, 99, 132, 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(54, 162, 235, 1)',
'rgba(255, 99, 132, 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
}
}]
}
}
});
} else {
new Chart(ctx, { new Chart(ctx, {
type: 'line', type: 'line',
data: { data: {
...@@ -121,16 +196,30 @@ ...@@ -121,16 +196,30 @@
} }
} }
}); });
}
});
}, },
showLastTestPerfomance() { showLastTestPerfomance() {
ApiService.get('/students/get-last-performance/' + this.$route.params.id)
.then(({
data
}) => {
const xAxis = []
const yAxis = []
data.forEach(element => {
xAxis.push(element.marks)
yAxis.push(element.subject)
});
console.log(data);
var ctx = document.getElementById('lastTest'); var ctx = document.getElementById('lastTest');
new Chart(ctx, { new Chart(ctx, {
type: 'pie', type: 'pie',
data: { data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], labels: yAxis,
datasets: [{ datasets: [{
label: 'Subjects', label: 'Subjects',
data: [12, 19, 3, 5, 2, 3, 7], data: xAxis,
backgroundColor: [ backgroundColor: [
'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)', 'rgba(54, 162, 235, 0.2)',
...@@ -156,6 +245,11 @@ ...@@ -156,6 +245,11 @@
// } // }
// } // }
}); });
})
.catch(error => {
console.log(error)
})
}, },
populateProfile() { populateProfile() {
ApiService.get('/students/view', this.$route.params.id) ApiService.get('/students/view', this.$route.params.id)
...@@ -167,15 +261,15 @@ ...@@ -167,15 +261,15 @@
}) })
}, },
populateAttendanceWorks() { populateAttendanceWorks() {
ApiService.get('/students', 'get-attendance') ApiService.get('/students/get-attendance/' + this.$route.params.id)
.then(response => { .then(response => {
this.attendance = response.data this.attendance = response.data[0].count
}) })
.catch(error => { .catch(error => {
console.log(error) console.log(error)
}) })
ApiService.get('/students', 'get-works') ApiService.get('/students/get-works/'+ this.$route.params.id)
.then(response => { .then(response => {
this.works = response.data this.works = response.data
}) })
......
UI/yarn.lock
View file @ 71980c9f
This source diff could not be displayed because it is too large. You can view the blob instead.
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