Skip to content

2
20_21-J09
Commit 353f5595 authored by IT17186216_Chamath Ravindu's avatar IT17186216_Chamath Ravindu
Browse files
Options

'update_UI_part'

parent 8304b562
Show whitespace changes
Inline Side-by-side
Showing with 2624 additions and 241 deletions
.idea/20_21-j09.iml
View file @ 353f5595
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<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>
......
.idea/php.xml 0 → 100644
View file @ 353f5595
<?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
UI/package-lock.json
View file @ 353f5595
......@@ -2581,6 +2581,7 @@
"thread-loader": "^2.1.3",
"url-loader": "^2.2.0",
"vue-loader": "^15.9.2",
"vue-loader-v16": "npm:vue-loader@^16.1.0",
"vue-style-loader": "^4.1.2",
"webpack": "^4.0.0",
"webpack-bundle-analyzer": "^3.8.0",
......@@ -15579,6 +15580,80 @@
"resolved": "https://registry.npmjs.org/vue-infinite-loading/-/vue-infinite-loading-2.4.5.tgz",
"integrity": "sha512-xhq95Mxun060bRnsOoLE2Be6BR7jYwuC89kDe18+GmCLVrRA/dU0jrGb12Xu6NjmKs+iTW0AA6saSEmEW4cR7g=="
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.1.2",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
"integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-material-design-icons": {
"version": "4.11.0",
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-4.11.0.tgz",
......
UI/package.json
View file @ 353f5595
......@@ -8,7 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.2",
"@fortawesome/fontawesome-free": "^5.15.3",
"axios": "^0.21.1",
"basic-vue-chat": "^0.3.5",
"bootstrap": "^4.6.0",
......@@ -16,6 +16,7 @@
"chart.js": "^2.9.4",
"core-js": "^3.6.5",
"dotenv": "^8.2.0",
"moment": "^2.29.1",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.1",
"vue": "^2.6.11",
......@@ -51,7 +52,9 @@
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
"rules": {
"no-debugger": "off"
}
},
"browserslist": [
"> 1%",
......
UI/public/index.html
View file @ 353f5595
......@@ -12,6 +12,7 @@
<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" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<body>
<noscript>
......
UI/src/components/PieChart.vue 0 → 100644
View file @ 353f5595
<template>
<div class="card">
<div class="card-header">
<h4>Sentimental Analysis</h4>
</div>
<div class="card-body">
<canvas id="sentimentalChart"></canvas>
</div>
</div>
</template>
<script>
import Chart from 'chart.js';
export default {
data() {
return {
}
},
created() {
}
}
</script>
\ No newline at end of file
UI/src/main.js
View file @ 353f5595
......@@ -12,6 +12,15 @@ import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import Chat from 'vue-beautiful-chat'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faCoffee)
Vue.component('font-awesome-icon', FontAwesomeIcon)
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
......@@ -23,6 +32,20 @@ ApiService.init(API_URL)
Vue.config.productionTip = false
import axios from 'axios'
function callToPython () {
axios.get("http://127.0.0.1:5000/sentimental")
.then(response => {
console.log(response.data);
})
.catch(error => {
this.errorMessage = error.message;
console.error("There was an error!", error);
});
}
setInterval(function () { callToPython(); }, 10000);
new Vue({
router,
vuetify,
......
UI/src/view/layout/Base.vue
View file @ 353f5595
......@@ -9,12 +9,12 @@
<router-view />
</v-app>
</transition>
<beautiful-chat :onMessageWasSent="onMessageWasSent" :messageList="messageList"
<!-- <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" />
@edit="editMessage" /> -->
<Footer></Footer>
</main>
</div>
......
UI/src/view/layout/Header.vue
View file @ 353f5595
......@@ -2,9 +2,8 @@
<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 :text="user && user.username" right>
<b-dropdown-item href="/login">Logout</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
......@@ -13,6 +12,13 @@
</template>
<script>
export default {
data() {
return {
user:null
}
},
created() {
this.user = JSON.parse(window.localStorage.getItem('user'));
},
}
</script>
UI/src/view/pages/Analytics.vue
View file @ 353f5595
<template>
<section>
<div>
<h4 class="text-uppercase mb-4">Analytics</h4>
<section class="my-5">
<div class="d-flex flex-wrap justify-content-between">
<div class="card">
<!-- <div class="card-body">
<h4>Avarage Marks: {{avarageMarks}}</h4>
</div> -->
</div>
</div>
</section>
<section class="my-5">
<div class="row">
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header"><div class="card-title">Sentimental for Maths</div></div>
<div class="card-body"><canvas id="sentimentalChart"></canvas></div>
</div>
</div>
<div class="col-12 col-md-6"> <div class="card">
<div class="card-header"><div class="card-title">Sentimental for Science</div></div>
<div class="card-body"><canvas id="sentimentalChart2"></canvas></div>
</div></div>
</div>
</section>
<hr>
<section>
<b-tabs pills content-class="mt-3">
<b-tab title="Year" active>
<b-tab title="Student Mark Growth" active>
<div class="row">
<div class="col-8">
<div class="col-8 offset-2">
<div class="card">
<div class="card-body">
<canvas id="yearlyChart"></canvas>
......@@ -13,9 +39,9 @@
</div>
</div>
</b-tab>
<b-tab title="Month">
<!-- <b-tab title="Month">
<div class="row">
<div class="col-8">
<div class="col-8 offset-2">
<div class="card">
<div class="card-body">
<canvas id="monthlyChart"></canvas>
......@@ -28,10 +54,10 @@
</div>
</div>
</div>
</b-tab>
<b-tab title="Week">
</b-tab> -->
<!--<b-tab title="Week">
<div class="row">
<div class="col-8">
<div class="col-8 offset-2">
<div class="card">
<div class="card-body">
<canvas id="myChart"></canvas>
......@@ -47,38 +73,162 @@
</div>
</div>
</div>
</b-tab>
</b-tab>-->
</b-tabs>
</section>
</div>
</template>
<script>
import Chart from 'chart.js';
import ApiService from '@/services/api.service';
export default {
components: {
},
data() {
return {
chartData: [],
chartLabels: [],
avarageMarks: [],
weeklyData: [10, 15],
monthlyData: [25, 30],
annualyData: [75, 60],
}
},
created() {
// Api call
},
mounted() {
this.createChart()
// this.createChart()
this.createYearlyChart()
this.createMonthlyChart()
// this.createMonthlyChart()
this.getAVGMarks()
this.createSentimentalChart();
this.createSentimentalChart2();
},
methods: {
getAVGMarks() {
ApiService.get('/get-avg-time').then(({
data
}) => {
console.log(data)
this.avarageMarks = data;
}).catch(e => {
console.log(e);
})
},
createSentimentalChart() {
ApiService.get('/feedbacks/1').then(({
data
}) => {
let yAxis =[]
data.results.forEach(element => {
yAxis.push(element.count)
});
var ctx = document.getElementById('sentimentalChart');
new Chart(ctx, {
type: 'pie',
data: {
labels: ['NEGATIVE', 'NEUTRAL', 'POSITIVE'],
datasets: [{
label: 'Subjects',
data: yAxis,
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
// }
// }]
// }
// }
});
}).catch(e => {
console.log(e);
})
},
createSentimentalChart2() {
ApiService.get('/feedbacks/2').then(({
data
}) => {
let yAxis =[]
data.results.forEach(element => {
yAxis.push(element.count)
});
var ctx = document.getElementById('sentimentalChart2');
new Chart(ctx, {
type: 'pie',
data: {
labels: ['NEGTIVE', 'NEUTRAL', 'POSITIVE'],
datasets: [{
label: 'Subjects',
data: yAxis,
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
// }
// }]
// }
// }
});
}).catch(e => {
console.log(e);
})
},
createChart() {
var ctx = document.getElementById('myChart');
const data = this.weeklyData;
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
labels: ['Maths', 'Science'],
datasets: [{
// label: 'Subjects',
data: [12, 19, 3, 5, 2, 3, 7],
label: 'Subjects',
data: data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
......@@ -110,14 +260,36 @@
});
},
createYearlyChart() {
const user = JSON.parse(window.localStorage.getItem('user'));
ApiService.get('/students/getmarks/'+ user.student_id).then(({data}) => {
let xAxisS1 = [];
let xAxisS2 = [];
let yAxisS1 = [];
let yAxisS2 = [];
data.summary.forEach(element => {
if(element.subject == "maths"){
xAxisS1.push(element.added_date)
yAxisS1.push(element.marks)
}else{
xAxisS2.push(element.added_date)
yAxisS2.push(element.marks)
}
});
var ctx = document.getElementById('yearlyChart');
//const data = this.annualyData;
new Chart(ctx, {
type: 'pie',
type: 'line',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
labels: xAxisS1,
datasets: [{
// label: 'Subjects',
data: [12, 19, 3, 5, 2, 3, 7],
label: ['Maths'],
fill: false,
data: yAxisS1,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
......@@ -135,28 +307,58 @@
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
// options: {
// scales: {
// yAxes: [{
// ticks: {
// beginAtZero: true
// }
// }]
// }
// }
{
label: ['Science'],
fill: false,
data: yAxisS2,
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
}
}]
}
}
});
}).catch(e => {
console.log(e);
})
},
createMonthlyChart() {
var ctx = document.getElementById('monthlyChart');
const data = this.monthlyData;
new Chart(ctx, {
type: 'pie',
type: 'bar',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
labels: ['Maths', 'Science'],
datasets: [{
// label: 'Subjects',
data: [12, 19, 3, 5, 2, 3, 7],
label: 'Subjects',
data: data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
......@@ -176,15 +378,15 @@
borderWidth: 1
}]
},
// options: {
// scales: {
// yAxes: [{
// ticks: {
// beginAtZero: true
// }
// }]
// }
// }
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
},
......
UI/src/view/pages/ChatRoom.vue
View file @ 353f5595
......@@ -3,12 +3,27 @@
<Chat
:participants="participants"
:myself="myself"
:newMessagesCount="newMessagesCount"
:isOpen="isChatOpen"
:close="closeChat"
:icon="['fas', 'twitter']"
:open="openChat"
:showEmoji="true"
:showFile="true"
:showEdition="true"
:showDeletion="true"
:showTypingIndicator="showTypingIndicator"
:showLauncher="true"
:showCloseButton="true"
:colors="colors"
:alwaysScrollToBottom="alwaysScrollToBottom"
:disableUserListToggle="false"
:messageStyling="messageStyling"
:messages="messages"
:onType="onType"
:onMessageSubmit="onMessageSubmit"
:chatTitle="chatTitle"
:placeholder="placeholder"
:colors="colors"
:borderStyle="borderStyle"
:hideCloseButton="hideCloseButton"
:closeButtonIconSize="closeButtonIconSize"
......@@ -19,6 +34,10 @@
<script>
/* eslint-disable no-unused-vars */
import { Chat } from 'vue-quick-chat'
import CloseIcon from 'vue-beautiful-chat/src/assets/close-icon.png'
import OpenIcon from 'vue-beautiful-chat/src/assets/logo-no-bg.svg'
import FileIcon from 'vue-beautiful-chat/src/assets/file.svg'
import CloseIconSvg from 'vue-beautiful-chat/src/assets/close.svg'
export default {
components: {
Chat
......@@ -86,7 +105,25 @@ export default {
},
hideCloseButton: false,
submitIconSize: "20px",
closeButtonIconSize: "20px"
closeButtonIconSize: "20px",
icons:{
open:{
img: OpenIcon,
name: 'default',
},
close:{
img: CloseIcon,
name: 'default',
},
file:{
img: FileIcon,
name: 'default',
},
closeSvg:{
img: CloseIconSvg,
name: 'default',
},
}
}
},
methods: {
......
UI/src/view/pages/Community.vue
View file @ 353f5595
<template>
<section>
<h4 class="text-uppercase mb-4">Community Group</h4>
<!-- <basic-vue-chat :new-message="message" :title="'Community group'" :initial-feed="feed" /> -->
<chat-window :current-user-id="currentUserId" :rooms="rooms" :messages="messages" />
<main>
<section class="my-5">
<basic-vue-chat :new-message="message" :title="'Maths Community group'"
@newOwnMessage="onNewOwnMessageMaths" :initial-feed="feedMaths" />
<!-- <chat-window :current-user-id="currentUserId" :rooms="rooms" :messages="messages" /> -->
</section>
<section class="my-5">
<basic-vue-chat :new-message="message" :title="'Science Community group'"
@newOwnMessage="onNewOwnMessageScience" :initial-feed="feedScience" />
<!-- <chat-window :current-user-id="currentUserId" :rooms="rooms" :messages="messages" /> -->
</section>
</main>
</template>
<script>
// import BasicVueChat from "basic-vue-chat";
import ChatWindow from 'vue-advanced-chat'
import 'vue-advanced-chat/dist/vue-advanced-chat.css'
import BasicVueChat from "basic-vue-chat";
import ApiService from '@/services/api.service';
// import ChatWindow from 'vue-advanced-chat'
// import 'vue-advanced-chat/dist/vue-advanced-chat.css'
export default {
data() {
return {
value: '',
rooms: [],
messages: [],
currentUserId: 1234
message: {
id: 0,
author: 'Person',
contents: 'hi there',
date: '16:30'
},
feedMaths: [],
feedScience: [],
currentUserId: 1,
user:null,
}
},
components: {
ChatWindow
BasicVueChat
},
created() {
const user = JSON.parse(window.localStorage.getItem('user'));
this.user = user;
this.currentUserId = user.parent_id
this.showMessagesMaths()
this.showMessagesScience()
},
methods: {
createChat() {
const rooms = []
// for (let i = 0; i < res.length; i++) {
// rooms.push(res)
// }
this.rooms = rooms
onNewOwnMessageMaths(msg) {
const messageObj = {
conversation_group_id: 1, // Maths
sender_id: this.currentUserId,
receiver_id: 1000,
message: msg,
is_read: 1,
created_at: '2021-02-17'
}
ApiService.post('/chat/create', messageObj)
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
},
onNewOwnMessageScience(msg) {
const messageObj = {
conversation_group_id: 2, // Science
sender_id: this.currentUserId,
receiver_id: 1000,
message: msg,
is_read: 1,
created_at: '2021-02-17'
}
ApiService.post('/chat/create', messageObj)
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
},
showMessagesMaths() {
ApiService.get('/chat/get', 1)
.then(response => {
response.data.conversations.forEach(element => {
this.feedMaths.push({
id: element.sender_id == this.currentUserId ? 0 : 1,
author: element.sender_id == this.currentUserId ? "Me" : element.sender.first_name,
contents: element.message,
date: new Date(element.created_at).toISOString().substring(0, 10)
})
});
})
.catch(error => {
console.log(error)
})
},
showMessagesScience() {
ApiService.get('/chat/get', 2)
.then(response => {
response.data.conversations.forEach(element => {
this.feedScience.push({
id: element.sender_id == this.currentUserId ? 0 : 1,
author: element.sender_id == this.currentUserId ? "Me" : element.sender.first_name,
contents: element.message,
date: new Date(element.created_at).toISOString().substring(0, 10)
})
});
})
.catch(error => {
console.log(error)
})
}
},
}
......
UI/src/view/pages/Dashboard.vue
View file @ 353f5595
<template>
<section>
<section class="container-fuild">
<h4 class="text-uppercase mb-4">Dashboard</h4>
<div class="row">
<div class="col-3">
<div class="col-12 col-md-4">
<div class="card">
<div class="card-body">
<h4 class="text-dark font-weight-bold mb-3">Calendar</h4>
<div class="text-center">
<b-calendar v-model="value" locale="en-US"></b-calendar>
<b-calendar v-model="selectedDT" locale="en-US" @context="onContext"></b-calendar>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-body">
<h4 class="text-dark font-weight-bold mb-2">Activity Bar</h4>
<div class="d-flex flex-column border rounded p-3 my-3">
<p class="text-dark font-weight-bold mb-2">Activity 01</p>
<span class="text-muted">Mathematics</span>
<a href="https://youtu.be/MMC0iaz6bac">https://youtu.be/MMC0iaz6bac</a>
</div>
<div class="d-flex flex-column border rounded p-3 my-3">
<p class="text-dark font-weight-bold mb-2">Activity 02</p>
<span class="text-muted">Science</span>
<a href="https://youtu.be/MMC0iaz6bac">https://youtu.be/MMC0iaz6bac</a>
<h4 class="text-dark font-weight-bold mb-2">Activities</h4>
<div class="d-flex flex-column border rounded p-3 my-3" v-for="video in videos" :key="video.recid">
<p class="text-dark font-weight-bold mb-2">Activity {{video.recid}}</p>
<span class="text-muted" v-show="video.type==1">Mathematics</span>
<span class="text-muted" v-show="video.type==2">Science</span>
<a href="#" @click="() =>{setVideoURL(video.url)}">{{video.url}}</a>
</div>
</div>
</div>
</div>
<div class="col-9">
<div class="card">
<div class="col-12 col-md-6">
<div class="card mt-3">
<div class="card-body">
<h4 class="text-dark font-weight-bold mb-4">Video Bar</h4>
<div class="embed-responsive embed-responsive-21by9">
......@@ -38,53 +35,116 @@
allowfullscreen></iframe>
</div>
<div class="d-flex align-items-center justify-content-between border rounded p-3 mt-3">
<!-- <div class="d-flex align-items-center justify-content-between border rounded">
<b-button v-b-modal.activities class="text-white" variant="success">Suggested Activties <i
class="fas fa-arrow-right ml-2"></i></b-button>
class="fas fa-arrow-right ml-1"></i></b-button>
<b-button class="text-white" variant="success">View Progress <i class="fas fa-chart-line ml-2"></i>
</b-button>
</div>
</div> -->
</div>
</div>
</div>
<div class="col-12 col-md-2">
<div class="mt-3"><basic-vue-chat :new-message="message" :title="'Activities Suggetions'"
@newOwnMessage="onNewActivity" :initial-feed="feedActivities" /></div>
</div>
</div>
<b-modal id="activities" hide-footer title="Activities">
<basic-vue-chat />
</b-modal>
</section>
</template>
<script>
import BasicVueChat from "basic-vue-chat";
import ApiService from '@/services/api.service';
import moment from 'moment'
export default {
data() {
return {
value: '',
context: null,
video_url: ''
selectedDT: moment().format("YYYY-MM-DD"),
videos: [],
video_url:'',
feedActivities: [],
currentUserId: 0,
userObj:'',
user:null,
message: {
id: 0,
author: 'Person',
contents: 'hi there',
date: '16:30'
},
}
},
components: {
BasicVueChat
},
created() {
const user = JSON.parse(window.localStorage.getItem('user'));
this.user = user;
this.currentUserId = user.parent_id
this.getVideoURL()
this.showActivities()
},
mounted() {
},
methods: {
onContext(ctx) {
this.selectedDT = moment(ctx.activeDate).format("YYYY-MM-DD")
this.getVideoURL();
},
getVideoURL() {
ApiService.get('/video/get')
ApiService.post("/quiz-records",{date : this.selectedDT})
.then(response => {
this.video_url = response.data
this.videos = response.data.quiz_records
})
}
},
components: {
BasicVueChat
getUserInfo( id ) {
ApiService.get('/user-info/'+ id )
.then(response => {
return response.data.user;
}).catch(e=>console.log(e))
},
setVideoURL(url) {
this.video_url = url
},
showActivities() {
const self =this;
ApiService.get('/activities/get/' + self.currentUserId)
.then(response => {
response.data.activities.forEach(element => {
//if(element.parent_id==self.currentUserId){
self.feedActivities.push({
id: element.parent_id == self.currentUserId ? 0 : 1,
author: element.parent_id == self.currentUserId ? "Me" : element.name,
contents: element.feedback,
date: new Date(element.date).toISOString().substring(0, 10)
})
//}
});
})
.catch(error => {
console.log(error)
})
},
onNewActivity( content ) {
const activityObj = {
name: this.user.username,
parent_id: this.user.student_id,
subject: 'maths',
feedback: content,
date: '2021-02-17',
time: '12:00:00',
}
ApiService.post('/activities/create', activityObj)
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
}
},
}
</script>
\ No newline at end of file
UI/src/view/pages/Login.vue
View file @ 353f5595
......@@ -6,23 +6,21 @@
<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-input v-model="form.email" 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-input v-model="form.password" type="password" placeholder="Password" required></b-form-input>
</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-form-group>
</b-form-group> -->
<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>
</b-form>
</div>
......@@ -32,6 +30,44 @@
</div>
</section>
</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>
body {
background: rgb(247 247 247);
......
UI/src/view/pages/Materials.vue
View file @ 353f5595
......@@ -2,44 +2,60 @@
<section>
<h4 class="text-uppercase mb-4">Study Materials</h4>
<b-tabs content-class="mt-3">
<b-tab title="Mathematics" active>
<b-tab title="Mathematics" active @click="getLessons(0)">
<div class="row">
<div class="col-8">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="d-flex flex-column">
<b-link href="#" :to="subject.url" v-for="(subject, index) in subjects" :key="index">{{ subject.subject }} - pdf</b-link>
</div>
</div>
</div>
</div>
<div class="col-4">
<v-card-title>
Mathematics
<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="lessons"
:search="search"
></v-data-table>
</div>
</div>
</div>
<!-- <div class="col-4">
<div class="card">
<div class="card-body">
<b-form-input placeholder="Search..."></b-form-input>
</div>
</div>
</div>
</div> -->
</div>
</b-tab>
<b-tab title="Science">
<b-tab title="Science" @click="getLessons(1)">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-body">
<div class="d-flex flex-column">
<b-link href="#" :to="subject.url" v-for="(subject, index) in subjects" :key="index">{{ subject.subject }} - pdf</b-link>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="col-12">
<div class="card">
<div class="card-body">
<b-form-input placeholder="Search..."></b-form-input>
<v-card-title>
Science
<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="lessons"
:search="search"
></v-data-table>
</div>
</div>
</div>
......@@ -57,22 +73,31 @@
value: '',
context: null,
video_url:'',
subjects: []
search: '',
headers: [
// {
// text: 'Dessert (100g serving)',
// align: 'left',
// sortable: false,
// value: 'name',
// },
// { text: 'ID', value: 'lessonid' },
// { text: 'SUBJECT', value: 'subject' },
{ text: 'TOPIC', value: 'topic' },
{ text: 'CONTENT', value: 'content' },
],
lessons: []
}
},
created() {
this.getDocs()
},
mounted() {
this.getLessons(0);
},
methods: {
getDocs() {
ApiService.get('/study-meterials/get')
.then(response => {
this.subjects = response.data
})
getLessons(type) {
ApiService.get(`/lessons/${type}`)
.then(({data}) => {
this.lessons = data.lessons;
});
}
},
......
UI/yarn.lock
View file @ 353f5595
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