Skip to content

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

'Add_user_interface_part'

parent 2a3a0b09
Hide whitespace changes
Inline Side-by-side
Showing with 26707 additions and 0 deletions
.idea/.gitignore 0 → 100644
View file @ 9d1b8bf5
# Default ignored files
/shelf/
/workspace.xml
# Datasource local storage ignored files
/../../../../:\Project 2\20_21-j09\.idea/dataSources/
/dataSources.local.xml
# Editor-based HTTP Client requests
/httpRequests/
.idea/20_21-j09.iml 0 → 100644
View file @ 9d1b8bf5
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
.idea/modules.xml 0 → 100644
View file @ 9d1b8bf5
<?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/vcs.xml 0 → 100644
View file @ 9d1b8bf5
<?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
UI/.gitignore 0 → 100644
View file @ 9d1b8bf5
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
UI/README.md 0 → 100644
View file @ 9d1b8bf5
# parent_app
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```
### Lints and fixes files
```
yarn lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
UI/babel.config.js 0 → 100644
View file @ 9d1b8bf5
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
UI/package-lock.json 0 → 100644
View file @ 9d1b8bf5
This source diff could not be displayed because it is too large. You can view the blob instead.
UI/package.json 0 → 100644
View file @ 9d1b8bf5
{
"name": "parent_app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.2",
"axios": "^0.21.1",
"basic-vue-chat": "^0.3.5",
"bootstrap": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"chart.js": "^2.9.4",
"core-js": "^3.6.5",
"dotenv": "^8.2.0",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.1",
"vue": "^2.6.11",
"vue-advanced-chat": "^0.6.9",
"vue-axios": "^3.2.2",
"vue-beautiful-chat": "^2.5.0",
"vue-quick-chat": "^1.2.7",
"vue-router": "^3.5.1",
"vue-sidebar-menu": "^4.7.4",
"vuetify": "^2.4.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.0",
"@vue/cli-plugin-eslint": "^4.5.0",
"@vue/cli-service": "^4.5.0",
"babel-eslint": "^10.1.0",
"deepmerge": "^4.2.2",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.32.5",
"vue-cli-plugin-vuetify": "^2.1.0",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
UI/public/index.html 0 → 100644
View file @ 9d1b8bf5
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.4.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
</body>
</html>
UI/src/App.vue 0 → 100644
View file @ 9d1b8bf5
<template>
<div id="app">
<router-view />
</div>
</template>
\ No newline at end of file
UI/src/components/HelloWorld.vue 0 → 100644
View file @ 9d1b8bf5
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
UI/src/config/config.js 0 → 100644
View file @ 9d1b8bf5
require("dotenv").config();
export const API_URL = process.env.VUE_APP_URL;
export default API_URL;
UI/src/main.js 0 → 100644
View file @ 9d1b8bf5
import Vue from 'vue'
import App from './App.vue'
import router from "./router";
import vuetify from "./plugins/vuetify";
import { API_URL } from "@/services/config"
import ApiService from './services/api.service'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import Chat from 'vue-beautiful-chat'
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
Vue.use(Chat)
import './sass/main.scss';
ApiService.init(API_URL)
Vue.config.productionTip = false
new Vue({
router,
vuetify,
render: h => h(App),
}).$mount('#app')
UI/src/plugins/vuetify.js 0 → 100644
View file @ 9d1b8bf5
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
\ No newline at end of file
UI/src/router.js 0 → 100644
View file @ 9d1b8bf5
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
mode: "history",
routes: [
{
path: "/login",
component: () => import("@/view/pages/Login"),
},
{
path: "/",
redirect: "/dashboard",
component: () => import("@/view/layout/Base"),
children: [
{
path: "/dashboard",
name: "dashboard",
component: () => import("@/view/pages/Dashboard.vue")
},
{
path: "/Community",
name: "Community",
component: () => import("@/view/pages/Community.vue")
},
{
path: "/materials",
name: "Materials",
component: () => import("@/view/pages/Materials.vue")
},
{
path: "/analytics",
name: "Analytics",
component: () => import("@/view/pages/Analytics.vue")
},
]
}
]
});
\ No newline at end of file
UI/src/sass/main.scss 0 → 100644
View file @ 9d1b8bf5
@import "../../node_modules/bootstrap/scss/bootstrap";
@import "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900";
@import "https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css";
@import "https://fonts.googleapis.com/css?family=Material+Icons";
@import '~vuetify/dist/vuetify.css';
@import "https://fonts.googleapis.com/css?family=Poppins";
html {
font-size: 1rem !important;
font-family: 'Poppins' !important;
}
html,
body {
background: rgb(247 247 247) !important;
}
.theme--light.v-application,
.v-application--wrap {
background: rgb(247 247 247) !important;
}
\ No newline at end of file
UI/src/services/api.service.js 0 → 100644
View file @ 9d1b8bf5
import axios from 'axios'
// import { TokenService } from '@/services/token.service'
// import store from '@/store/'
const ApiService = {
// Stores the 401 interceptor position so that it can be later ejected when needed
_401interceptor: null,
init (baseURL) {
axios.defaults.baseURL = baseURL
},
setHeader () {
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
// eslint-disable-next-line dot-notation
axios.defaults.headers.common['Authorization'] = `Bearer `
},
removeHeader () {
axios.defaults.headers.common = {}
},
query (resource, params) {
return axios.get(resource, params).catch(error => {
console.log(error)
})
},
get (resource, slug = '') {
return axios.get(`${resource}/${slug}`)
},
post (resource, params) {
return axios.post(`${resource}`, params)
},
update (resource, slug, params) {
return axios.put(`${resource}/${slug}`, params)
},
put (resource, params) {
return axios.put(`${resource}`, params)
},
delete (resource, params) {
return axios.delete(resource, params)
},
/**
* Perform a custom Axios request.
*
* data is an object containing the following properties:
* - method
* - url
* - data ... request payload
* - auth (optional)
* - username
* - password
**/
customRequest (data) {
return axios(data)
},
}
export default ApiService
UI/src/services/config.js 0 → 100644
View file @ 9d1b8bf5
export const API_URL = process.env.VUE_APP_URL
UI/src/services/jwt.service.js 0 → 100644
View file @ 9d1b8bf5
const ID_TOKEN_KEY = "id_token";
const ID_CURRENT_USER = "id_current_user";
export const getToken = () => {
return window.localStorage.getItem(ID_TOKEN_KEY);
};
export const saveToken = (token) => {
window.localStorage.setItem(ID_TOKEN_KEY, token);
};
export const destroyToken = () => {
window.localStorage.removeItem(ID_TOKEN_KEY);
};
export const getCurrentUser = () => {
return window.localStorage.getItem(ID_CURRENT_USER);
};
export const saveCurrentUser = (user) => {
window.localStorage.setItem(ID_CURRENT_USER, user);
};
export const destroyCurrentUser = () => {
window.localStorage.removeItem(ID_CURRENT_USER);
};
export default {
getToken,
saveToken,
destroyToken,
getCurrentUser,
saveCurrentUser,
destroyCurrentUser
};
UI/src/view/layout/Base.vue 0 → 100644
View file @ 9d1b8bf5
<!-- Public demo pages -->
<template>
<div>
<SideBar></SideBar>
<Header></Header>
<main class="container">
<transition name="fade-in-up" v-cloak>
<v-app v-cloak>
<router-view />
</v-app>
</transition>
<beautiful-chat :onMessageWasSent="onMessageWasSent" :messageList="messageList"
:newMessagesCount="newMessagesCount" :participants="participants" :isOpen="isChatOpen"
:close="closeChat" :open="openChat" :showEmoji="true" :showFile="true" :showEdition="true" :showDeletion="true"
:showTypingIndicator="showTypingIndicator" :showLauncher="true" :showCloseButton="true"
:alwaysScrollToBottom="alwaysScrollToBottom" :messageStyling="messageStyling" @onType="handleOnType"
@edit="editMessage" />
<Footer></Footer>
</main>
</div>
</template>
<script>
import Header from './Header'
import Footer from './Footer'
import SideBar from '@/view/layout/SideBar'
export default {
components: {
Header,
Footer,
SideBar
},
data() {
return {
value: '',
context: null,
participants: [{
id: 'user1',
name: 'Matteo',
imageUrl: 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4'
},
{
id: 'user2',
name: 'Support',
imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4'
}
], // the list of all the participant of the conversation. `name` is the user name, `id` is used to establish the author of a message, `imageUrl` is supposed to be the user avatar.
titleImageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png',
messageList: [{
type: 'text',
author: `me`,
data: {
text: `Say yes!`
}
},
{
type: 'text',
author: `user1`,
data: {
text: `No.`
}
}
], // the list of the messages to show, can be paginated and adjusted dynamically
newMessagesCount: 0,
isChatOpen: false, // to determine whether the chat window should be open or closed
showTypingIndicator: '', // when set to a value matching the participant.id it shows the typing indicator for the specific user
colors: {
header: {
bg: '#4e8cff',
text: '#ffffff'
},
launcher: {
bg: '#4e8cff'
},
messageList: {
bg: '#ffffff'
},
sentMessage: {
bg: '#4e8cff',
text: '#ffffff'
},
receivedMessage: {
bg: '#eaeaea',
text: '#222222'
},
userInput: {
bg: '#f4f7f9',
text: '#565867'
}
}, // specifies the color scheme for the component
alwaysScrollToBottom: false, // when set to true always scrolls the chat to the bottom when new events are in (new message, user starts typing...)
messageStyling: true // enables *bold* /emph/ _underline_ and such (more info at github.com/mattezza/msgdown)
}
},
methods: {
sendMessage(text) {
if (text.length > 0) {
this.newMessagesCount = this.isChatOpen ? this.newMessagesCount : this.newMessagesCount + 1
this.onMessageWasSent({
author: 'support',
type: 'text',
data: {
text
}
})
}
},
onMessageWasSent(message) {
// called when the user sends a message
this.messageList = [...this.messageList, message]
},
openChat() {
// called when the user clicks on the fab button to open the chat
this.isChatOpen = true
this.newMessagesCount = 0
},
closeChat() {
// called when the user clicks on the botton to close the chat
this.isChatOpen = false
},
handleScrollToTop() {
// called when the user scrolls message list to top
// leverage pagination for loading another page of messages
},
handleOnType() {
console.log('Emit typing event')
},
editMessage(message) {
const m = this.messageList.find(m => m.id === message.id);
m.isEdited = true;
m.data.text = message.data.text;
}
}
};
</script>
\ No newline at end of file
UI/src/view/layout/Footer.vue 0 → 100644
View file @ 9d1b8bf5
<template>
<footer>
<div class="copyrights">
eLearning System © 2020 - Designed & Developed by
<a href="#" target="" _blank>eLearning Sri Lanka</a>
</div>
<a href="#">Terms & Conditions</a><br>
<a href="#">Privacy Policy</a><br>
<a href="#">Support</a><br>
</footer>
</template>
<style lang="scss" scoped>
footer{
text-align: center;
}
</style>
\ No newline at end of file
UI/src/view/layout/Header.vue 0 → 100644
View file @ 9d1b8bf5
<template>
<header>
<b-navbar type="dark" variant="dark">
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown text="Username" right>
<b-dropdown-item href="#">Settings</b-dropdown-item>
<b-dropdown-item href="#">Logout</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-navbar>
</header>
</template>
<script>
export default {
}
</script>
UI/src/view/layout/SideBar.vue 0 → 100644
View file @ 9d1b8bf5
<template>
<sidebar-menu :menu="menu" />
</template>
<script>
import {
SidebarMenu
} from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
export default {
components: {
SidebarMenu,
},
data() {
return {
menu: [{
header: true,
title: 'Analytics Dashboard',
hiddenOnCollapse: true
},
{
href: '/',
title: 'Dashboard',
icon: 'fas fa-tachometer-alt'
},
{
href: '/community',
title: 'Community Group',
icon: 'fas fa-users'
},
{
href: '/materials',
title: 'Study Materials',
icon: 'fas fa-file-alt'
},
{
href: '/analytics',
title: 'Analytics',
icon: 'fas fa-chart-line'
}
]
}
}
}
</script>
\ No newline at end of file
UI/src/view/pages/Analytics.vue 0 → 100644
View file @ 9d1b8bf5
<template>
<section>
<h4 class="text-uppercase mb-4">Analytics</h4>
<b-tabs pills content-class="mt-3">
<b-tab title="Year" active>
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-body">
<canvas id="yearlyChart"></canvas>
</div>
</div>
</div>
</div>
</b-tab>
<b-tab title="Month">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-body">
<canvas id="monthlyChart"></canvas>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
</div>
</div>
</div>
</b-tab>
<b-tab title="Week">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-body">
<canvas id="myChart"></canvas>
</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>
</b-tab>
</b-tabs>
</section>
</template>
<script>
import Chart from 'chart.js';
export default {
components: {
},
data() {
return {
chartData: [],
chartLabels: [],
}
},
mounted() {
this.createChart()
this.createYearlyChart()
this.createMonthlyChart()
},
methods: {
createChart() {
var ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets: [{
// label: 'Subjects',
data: [12, 19, 3, 5, 2, 3, 7],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
},
createYearlyChart() {
var ctx = document.getElementById('yearlyChart');
new Chart(ctx, {
type: 'pie',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets: [{
// label: 'Subjects',
data: [12, 19, 3, 5, 2, 3, 7],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
// options: {
// scales: {
// yAxes: [{
// ticks: {
// beginAtZero: true
// }
// }]
// }
// }
});
},
createMonthlyChart() {
var ctx = document.getElementById('monthlyChart');
new Chart(ctx, {
type: 'pie',
data: {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets: [{
// label: 'Subjects',
data: [12, 19, 3, 5, 2, 3, 7],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
// options: {
// scales: {
// yAxes: [{
// ticks: {
// beginAtZero: true
// }
// }]
// }
// }
});
}
},
}
</script>
\ No newline at end of file
UI/src/view/pages/ChatRoom.vue 0 → 100644
View file @ 9d1b8bf5
<template>
<div>
<Chat
:participants="participants"
:myself="myself"
:messages="messages"
:onType="onType"
:onMessageSubmit="onMessageSubmit"
:chatTitle="chatTitle"
:placeholder="placeholder"
:colors="colors"
:borderStyle="borderStyle"
:hideCloseButton="hideCloseButton"
:closeButtonIconSize="closeButtonIconSize"
:submitIconSize="submitIconSize"/>
</div>
</template>
<script>
/* eslint-disable no-unused-vars */
import { Chat } from 'vue-quick-chat'
export default {
components: {
Chat
},
data(){
return {
participants: [
{
name: 'Arnaldo',
id: 1
},
{
name: 'José',
id: 2
}
],
myself: {
name: 'Matheus S.',
id: 3
},
messages: [
{
content: 'received messages',
myself: false,
participantId: 1,
timestamp: { year: 2019, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123 }
},
{
content: 'sent messages',
myself: true,
participantId: 3,
timestamp: { year: 2019, month: 4, day: 5, hour: 19, minute: 10, second: 3, millisecond:123 }
},
{
content: 'other received messages',
myself: false,
participantId: 2,
timestamp: { year: 2019, month: 5, day: 5, hour: 10, minute: 10, second: 3, millisecond: 123 }
}
],
chatTitle: 'My chat title',
placeholder: 'send your message',
colors:{
header:{
bg: '#d30303',
text: '#fff'
},
message:{
myself: {
bg: '#fff',
text: '#bdb8b8'
},
others: {
bg: '#fb4141',
text: '#fff'
}
},
submitIcon: '#b91010'
},
borderStyle: {
topLeft: "10px",
topRight: "10px",
bottomLeft: "10px",
bottomRight: "10px",
},
hideCloseButton: false,
submitIconSize: "20px",
closeButtonIconSize: "20px"
}
},
methods: {
onType: function (event){
//here you can set any behavior
},
onMessageSubmit: function(message){
//here you can set any behavior
}
}
}
</script>
\ No newline at end of file
UI/src/view/pages/Community.vue 0 → 100644
View file @ 9d1b8bf5
<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" />
</section>
</template>
<script>
// import BasicVueChat from "basic-vue-chat";
import ChatWindow from 'vue-advanced-chat'
import 'vue-advanced-chat/dist/vue-advanced-chat.css'
export default {
data() {
return {
value: '',
rooms: [],
messages: [],
currentUserId: 1234
}
},
components: {
ChatWindow
},
methods: {
createChat() {
const rooms = []
// for (let i = 0; i < res.length; i++) {
// rooms.push(res)
// }
this.rooms = rooms
}
},
}
</script>
<style lang="scss">
.window {
max-width: 100% !important;
}
</style>
\ No newline at end of file
UI/src/view/pages/Dashboard.vue 0 → 100644
View file @ 9d1b8bf5
<template>
<section>
<h4 class="text-uppercase mb-4">Dashboard</h4>
<div class="row">
<div class="col-3">
<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>
</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>
</div>
</div>
</div>
</div>
<div class="col-9">
<div class="card">
<div class="card-body">
<h4 class="text-dark font-weight-bold mb-4">Video Bar</h4>
<div class="embed-responsive embed-responsive-21by9">
<iframe width="560" height="315" :src="video_url" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div class="d-flex align-items-center justify-content-between border rounded p-3 mt-3">
<b-button v-b-modal.activities class="text-white" variant="success">Suggested Activties <i
class="fas fa-arrow-right ml-2"></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>
<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';
export default {
data() {
return {
value: '',
context: null,
video_url: ''
}
},
created() {
this.getVideoURL()
},
mounted() {
},
methods: {
getVideoURL() {
ApiService.get('/video/get')
.then(response => {
this.video_url = response.data
})
}
},
components: {
BasicVueChat
},
}
</script>
\ No newline at end of file
UI/src/view/pages/Login.vue 0 → 100644
View file @ 9d1b8bf5
<template>
<section>
<div class="container mt-5">
<div class="row align-items-center justify-content-center">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5>Log in Form</h5>
<b-link href="#" class="btn btn-danger w-100 mt-4 mb-3">Log in with Google</b-link>
<p class="text-center text-muted">---------------------------- &nbsp; &nbsp; Or &nbsp; &nbsp;----------------------------</p>
<b-form class="my-4">
<b-form-group class="mb-4">
<b-form-input type="email" placeholder="Username or Email" required></b-form-input>
</b-form-group>
<b-form-group class="mb-4">
<b-form-input placeholder="Password" required></b-form-input>
</b-form-group>
<b-form-group class="mb-4">
<b-link href="#" to="">Forgot your Password?</b-link>
</b-form-group>
<div class="text-center">
<b-button type="submit" class="text-white px-4" variant="primary">Log in</b-button>
</div>
</b-form>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<style>
body {
background: rgb(247 247 247);
}
</style>
\ No newline at end of file
UI/src/view/pages/Materials.vue 0 → 100644
View file @ 9d1b8bf5
<template>
<section>
<h4 class="text-uppercase mb-4">Study Materials</h4>
<b-tabs content-class="mt-3">
<b-tab title="Mathematics" active>
<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="card">
<div class="card-body">
<b-form-input placeholder="Search..."></b-form-input>
</div>
</div>
</div>
</div>
</b-tab>
<b-tab title="Science">
<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="card">
<div class="card-body">
<b-form-input placeholder="Search..."></b-form-input>
</div>
</div>
</div>
</div>
</b-tab>
</b-tabs>
</section>
</template>
<script>
import ApiService from '@/services/api.service';
export default {
data() {
return {
value: '',
context: null,
video_url:'',
subjects: []
}
},
created() {
this.getDocs()
},
mounted() {
},
methods: {
getDocs() {
ApiService.get('/study-meterials/get')
.then(response => {
this.subjects = response.data
})
}
},
components: {
},
}
</script>
\ No newline at end of file
UI/yarn.lock 0 → 100644
View file @ 9d1b8bf5
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