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"?> <?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4"> <module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager"> <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="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" /> <orderEntry type="sourceFolder" forTests="false" />
</component> </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 @@ ...@@ -2581,6 +2581,7 @@
"thread-loader": "^2.1.3", "thread-loader": "^2.1.3",
"url-loader": "^2.2.0", "url-loader": "^2.2.0",
"vue-loader": "^15.9.2", "vue-loader": "^15.9.2",
"vue-loader-v16": "npm:vue-loader@^16.1.0",
"vue-style-loader": "^4.1.2", "vue-style-loader": "^4.1.2",
"webpack": "^4.0.0", "webpack": "^4.0.0",
"webpack-bundle-analyzer": "^3.8.0", "webpack-bundle-analyzer": "^3.8.0",
...@@ -15579,6 +15580,80 @@ ...@@ -15579,6 +15580,80 @@
"resolved": "https://registry.npmjs.org/vue-infinite-loading/-/vue-infinite-loading-2.4.5.tgz", "resolved": "https://registry.npmjs.org/vue-infinite-loading/-/vue-infinite-loading-2.4.5.tgz",
"integrity": "sha512-xhq95Mxun060bRnsOoLE2Be6BR7jYwuC89kDe18+GmCLVrRA/dU0jrGb12Xu6NjmKs+iTW0AA6saSEmEW4cR7g==" "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": { "vue-material-design-icons": {
"version": "4.11.0", "version": "4.11.0",
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-4.11.0.tgz", "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 @@ ...@@ -8,7 +8,7 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^5.15.2", "@fortawesome/fontawesome-free": "^5.15.3",
"axios": "^0.21.1", "axios": "^0.21.1",
"basic-vue-chat": "^0.3.5", "basic-vue-chat": "^0.3.5",
"bootstrap": "^4.6.0", "bootstrap": "^4.6.0",
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
"chart.js": "^2.9.4", "chart.js": "^2.9.4",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"dotenv": "^8.2.0", "dotenv": "^8.2.0",
"moment": "^2.29.1",
"node-sass": "^5.0.0", "node-sass": "^5.0.0",
"sass-loader": "^10.1.1", "sass-loader": "^10.1.1",
"vue": "^2.6.11", "vue": "^2.6.11",
...@@ -51,7 +52,9 @@ ...@@ -51,7 +52,9 @@
"parserOptions": { "parserOptions": {
"parser": "babel-eslint" "parser": "babel-eslint"
}, },
"rules": {} "rules": {
"no-debugger": "off"
}
}, },
"browserslist": [ "browserslist": [
"> 1%", "> 1%",
......
UI/public/index.html
View file @ 353f5595
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.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> <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://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> </head>
<body> <body>
<noscript> <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' ...@@ -12,6 +12,15 @@ 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 { 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 // 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
...@@ -23,6 +32,20 @@ ApiService.init(API_URL) ...@@ -23,6 +32,20 @@ ApiService.init(API_URL)
Vue.config.productionTip = false 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({ new Vue({
router, router,
vuetify, vuetify,
......
UI/src/view/layout/Base.vue
View file @ 353f5595
...@@ -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 @ 353f5595
...@@ -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/pages/Analytics.vue
View file @ 353f5595
<template> <template>
<section> <div>
<h4 class="text-uppercase mb-4">Analytics</h4> <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-tabs pills content-class="mt-3">
<b-tab title="Year" active> <b-tab title="Student Mark Growth" active>
<div class="row"> <div class="row">
<div class="col-8"> <div class="col-8 offset-2">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<canvas id="yearlyChart"></canvas> <canvas id="yearlyChart"></canvas>
...@@ -13,9 +39,9 @@ ...@@ -13,9 +39,9 @@
</div> </div>
</div> </div>
</b-tab> </b-tab>
<b-tab title="Month"> <!-- <b-tab title="Month">
<div class="row"> <div class="row">
<div class="col-8"> <div class="col-8 offset-2">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<canvas id="monthlyChart"></canvas> <canvas id="monthlyChart"></canvas>
...@@ -28,10 +54,10 @@ ...@@ -28,10 +54,10 @@
</div> </div>
</div> </div>
</div> </div>
</b-tab> </b-tab> -->
<b-tab title="Week"> <!--<b-tab title="Week">
<div class="row"> <div class="row">
<div class="col-8"> <div class="col-8 offset-2">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<canvas id="myChart"></canvas> <canvas id="myChart"></canvas>
...@@ -47,38 +73,162 @@ ...@@ -47,38 +73,162 @@
</div> </div>
</div> </div>
</div> </div>
</b-tab> </b-tab>-->
</b-tabs> </b-tabs>
</section> </section>
</div>
</template> </template>
<script> <script>
import Chart from 'chart.js'; import Chart from 'chart.js';
import ApiService from '@/services/api.service';
export default { export default {
components: {
},
data() { data() {
return { return {
chartData: [], chartData: [],
chartLabels: [], chartLabels: [],
avarageMarks: [],
weeklyData: [10, 15],
monthlyData: [25, 30],
annualyData: [75, 60],
} }
}, },
created() {
// Api call
},
mounted() { mounted() {
this.createChart() // this.createChart()
this.createYearlyChart() this.createYearlyChart()
this.createMonthlyChart() // this.createMonthlyChart()
this.getAVGMarks()
this.createSentimentalChart();
this.createSentimentalChart2();
}, },
methods: { 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() { createChart() {
var ctx = document.getElementById('myChart'); var ctx = document.getElementById('myChart');
const data = this.weeklyData;
new Chart(ctx, { new Chart(ctx, {
type: 'bar', type: 'bar',
data: { data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], labels: ['Maths', 'Science'],
datasets: [{ datasets: [{
// label: 'Subjects', label: 'Subjects',
data: [12, 19, 3, 5, 2, 3, 7], data: 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)',
...@@ -110,14 +260,36 @@ ...@@ -110,14 +260,36 @@
}); });
}, },
createYearlyChart() { 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'); var ctx = document.getElementById('yearlyChart');
//const data = this.annualyData;
new Chart(ctx, { new Chart(ctx, {
type: 'pie', type: 'line',
data: { data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], labels: xAxisS1,
datasets: [{ datasets: [{
// label: 'Subjects', label: ['Maths'],
data: [12, 19, 3, 5, 2, 3, 7], fill: false,
data: yAxisS1,
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)',
...@@ -135,28 +307,58 @@ ...@@ -135,28 +307,58 @@
'rgba(255, 159, 64, 1)' 'rgba(255, 159, 64, 1)'
], ],
borderWidth: 1 borderWidth: 1
}]
}, },
// options: { {
// scales: { label: ['Science'],
// yAxes: [{ fill: false,
// ticks: { data: yAxisS2,
// beginAtZero: true 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() { createMonthlyChart() {
var ctx = document.getElementById('monthlyChart'); var ctx = document.getElementById('monthlyChart');
const data = this.monthlyData;
new Chart(ctx, { new Chart(ctx, {
type: 'pie', type: 'bar',
data: { data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], labels: ['Maths', 'Science'],
datasets: [{ datasets: [{
// label: 'Subjects', label: 'Subjects',
data: [12, 19, 3, 5, 2, 3, 7], data: 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)',
...@@ -176,15 +378,15 @@ ...@@ -176,15 +378,15 @@
borderWidth: 1 borderWidth: 1
}] }]
}, },
// options: { options: {
// scales: { scales: {
// yAxes: [{ yAxes: [{
// ticks: { ticks: {
// beginAtZero: true beginAtZero: true
// } }
// }] }]
// } }
// } }
}); });
} }
}, },
......
UI/src/view/pages/ChatRoom.vue
View file @ 353f5595
...@@ -3,12 +3,27 @@ ...@@ -3,12 +3,27 @@
<Chat <Chat
:participants="participants" :participants="participants"
:myself="myself" :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" :messages="messages"
:onType="onType" :onType="onType"
:onMessageSubmit="onMessageSubmit" :onMessageSubmit="onMessageSubmit"
:chatTitle="chatTitle" :chatTitle="chatTitle"
:placeholder="placeholder" :placeholder="placeholder"
:colors="colors"
:borderStyle="borderStyle" :borderStyle="borderStyle"
:hideCloseButton="hideCloseButton" :hideCloseButton="hideCloseButton"
:closeButtonIconSize="closeButtonIconSize" :closeButtonIconSize="closeButtonIconSize"
...@@ -19,6 +34,10 @@ ...@@ -19,6 +34,10 @@
<script> <script>
/* eslint-disable no-unused-vars */ /* eslint-disable no-unused-vars */
import { Chat } from 'vue-quick-chat' 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 { export default {
components: { components: {
Chat Chat
...@@ -86,7 +105,25 @@ export default { ...@@ -86,7 +105,25 @@ export default {
}, },
hideCloseButton: false, hideCloseButton: false,
submitIconSize: "20px", 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: { methods: {
......
UI/src/view/pages/Community.vue
View file @ 353f5595
<template> <template>
<section> <main>
<h4 class="text-uppercase mb-4">Community Group</h4> <section class="my-5">
<!-- <basic-vue-chat :new-message="message" :title="'Community group'" :initial-feed="feed" /> --> <basic-vue-chat :new-message="message" :title="'Maths Community group'"
<chat-window :current-user-id="currentUserId" :rooms="rooms" :messages="messages" /> @newOwnMessage="onNewOwnMessageMaths" :initial-feed="feedMaths" />
<!-- <chat-window :current-user-id="currentUserId" :rooms="rooms" :messages="messages" /> -->
</section> </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> </template>
<script> <script>
// import BasicVueChat from "basic-vue-chat"; import BasicVueChat from "basic-vue-chat";
import ChatWindow from 'vue-advanced-chat' import ApiService from '@/services/api.service';
import 'vue-advanced-chat/dist/vue-advanced-chat.css' // import ChatWindow from 'vue-advanced-chat'
// import 'vue-advanced-chat/dist/vue-advanced-chat.css'
export default { export default {
data() { data() {
return { return {
value: '', value: '',
rooms: [], rooms: [],
messages: [], message: {
currentUserId: 1234 id: 0,
author: 'Person',
contents: 'hi there',
date: '16:30'
},
feedMaths: [],
feedScience: [],
currentUserId: 1,
user:null,
} }
}, },
components: { 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: { methods: {
createChat() { onNewOwnMessageMaths(msg) {
const rooms = [] const messageObj = {
// for (let i = 0; i < res.length; i++) { conversation_group_id: 1, // Maths
// rooms.push(res) sender_id: this.currentUserId,
// } receiver_id: 1000,
this.rooms = rooms 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> <template>
<section> <section class="container-fuild">
<h4 class="text-uppercase mb-4">Dashboard</h4> <h4 class="text-uppercase mb-4">Dashboard</h4>
<div class="row"> <div class="row">
<div class="col-3"> <div class="col-12 col-md-4">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h4 class="text-dark font-weight-bold mb-3">Calendar</h4> <h4 class="text-dark font-weight-bold mb-3">Calendar</h4>
<div class="text-center"> <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>
</div> </div>
<div class="card mt-3"> <div class="card mt-3">
<div class="card-body"> <div class="card-body">
<h4 class="text-dark font-weight-bold mb-2">Activity Bar</h4> <h4 class="text-dark font-weight-bold mb-2">Activities</h4>
<div class="d-flex flex-column border rounded p-3 my-3"> <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 01</p> <p class="text-dark font-weight-bold mb-2">Activity {{video.recid}}</p>
<span class="text-muted">Mathematics</span> <span class="text-muted" v-show="video.type==1">Mathematics</span>
<a href="https://youtu.be/MMC0iaz6bac">https://youtu.be/MMC0iaz6bac</a> <span class="text-muted" v-show="video.type==2">Science</span>
</div> <a href="#" @click="() =>{setVideoURL(video.url)}">{{video.url}}</a>
<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>
</div> </div>
</div> </div>
</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"> <div class="card-body">
<h4 class="text-dark font-weight-bold mb-4">Video Bar</h4> <h4 class="text-dark font-weight-bold mb-4">Video Bar</h4>
<div class="embed-responsive embed-responsive-21by9"> <div class="embed-responsive embed-responsive-21by9">
...@@ -38,53 +35,116 @@ ...@@ -38,53 +35,116 @@
allowfullscreen></iframe> allowfullscreen></iframe>
</div> </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 <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 class="text-white" variant="success">View Progress <i class="fas fa-chart-line ml-2"></i>
</b-button> </b-button>
</div> </div> -->
</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>
</div> </div>
<b-modal id="activities" hide-footer title="Activities">
<basic-vue-chat />
</b-modal>
</section> </section>
</template> </template>
<script> <script>
import BasicVueChat from "basic-vue-chat"; import BasicVueChat from "basic-vue-chat";
import ApiService from '@/services/api.service'; import ApiService from '@/services/api.service';
import moment from 'moment'
export default { export default {
data() { data() {
return { return {
value: '', selectedDT: moment().format("YYYY-MM-DD"),
context: null, videos: [],
video_url: '' video_url:'',
feedActivities: [],
currentUserId: 0,
userObj:'',
user:null,
message: {
id: 0,
author: 'Person',
contents: 'hi there',
date: '16:30'
},
} }
}, },
components: {
BasicVueChat
},
created() { created() {
const user = JSON.parse(window.localStorage.getItem('user'));
this.user = user;
this.currentUserId = user.parent_id
this.getVideoURL() this.getVideoURL()
this.showActivities()
}, },
mounted() { mounted() {
}, },
methods: { methods: {
onContext(ctx) {
this.selectedDT = moment(ctx.activeDate).format("YYYY-MM-DD")
this.getVideoURL();
},
getVideoURL() { getVideoURL() {
ApiService.get('/video/get') ApiService.post("/quiz-records",{date : this.selectedDT})
.then(response => { .then(response => {
this.video_url = response.data this.videos = response.data.quiz_records
}) })
}
}, },
components: { getUserInfo( id ) {
BasicVueChat 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> </script>
\ No newline at end of file
UI/src/view/pages/Login.vue
View file @ 353f5595
...@@ -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/Materials.vue
View file @ 353f5595
...@@ -2,44 +2,60 @@ ...@@ -2,44 +2,60 @@
<section> <section>
<h4 class="text-uppercase mb-4">Study Materials</h4> <h4 class="text-uppercase mb-4">Study Materials</h4>
<b-tabs content-class="mt-3"> <b-tabs content-class="mt-3">
<b-tab title="Mathematics" active> <b-tab title="Mathematics" active @click="getLessons(0)">
<div class="row"> <div class="row">
<div class="col-8"> <div class="col-12">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="d-flex flex-column"> <v-card-title>
<b-link href="#" :to="subject.url" v-for="(subject, index) in subjects" :key="index">{{ subject.subject }} - pdf</b-link> Mathematics
<v-spacer></v-spacer>
</div> <v-text-field
</div> v-model="search"
</div> append-icon="search"
</div> label="Search"
<div class="col-4"> 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">
<div class="card-body"> <div class="card-body">
<b-form-input placeholder="Search..."></b-form-input> <b-form-input placeholder="Search..."></b-form-input>
</div>
</div> </div>
</div> </div>
</div> -->
</div> </div>
</b-tab> </b-tab>
<b-tab title="Science"> <b-tab title="Science" @click="getLessons(1)">
<div class="row"> <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">
<div class="card"> <div class="card">
<div class="card-body"> <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> </div>
</div> </div>
...@@ -57,22 +73,31 @@ ...@@ -57,22 +73,31 @@
value: '', value: '',
context: null, context: null,
video_url:'', 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() { created() {
this.getDocs() this.getLessons(0);
},
mounted() {
}, },
methods: { methods: {
getLessons(type) {
getDocs() { ApiService.get(`/lessons/${type}`)
ApiService.get('/study-meterials/get') .then(({data}) => {
.then(response => { this.lessons = data.lessons;
this.subjects = response.data });
})
} }
}, },
......
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