Skip to content

2
2020-027
Commit b4c56307 authored by inusha maduranga's avatar inusha maduranga
Browse files
Options

ReactJs Frontend implimented

parent d1c9c9ad
Hide whitespace changes
Inline Side-by-side
Showing with 20257 additions and 0 deletions
inusha madurnaga/React_Frontend/.gitignore 0 → 100644
View file @ b4c56307
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
inusha madurnaga/React_Frontend/.idea/React_Frontend.iml 0 → 100644
View file @ b4c56307
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
inusha madurnaga/React_Frontend/.idea/misc.xml 0 → 100644
View file @ b4c56307
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="JSX" />
</component>
</project>
\ No newline at end of file
inusha madurnaga/React_Frontend/.idea/modules.xml 0 → 100644
View file @ b4c56307
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/React_Frontend.iml" filepath="$PROJECT_DIR$/.idea/React_Frontend.iml" />
</modules>
</component>
</project>
\ No newline at end of file
inusha madurnaga/React_Frontend/.idea/vcs.xml 0 → 100644
View file @ b4c56307
<?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
inusha madurnaga/React_Frontend/.idea/workspace.xml 0 → 100644
View file @ b4c56307
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ChangeListManager">
<list default="true" id="48d96c29-ce37-4d1e-a6ad-f9f0880051ed" name="Default Changelist" comment="" />
<ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" />
<ignored path="$PROJECT_DIR$/tmp/" />
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FileEditorManager">
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/service/constant.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="51">
<caret line="3" column="32" selection-start-line="3" selection-start-column="32" selection-end-line="3" selection-end-column="32" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/components/constant.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="153">
<caret line="9" lean-forward="true" selection-start-line="9" selection-end-line="9" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/components/Login.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-561">
<folding>
<element signature="e#0#40#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/src/components/UploadPage.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="204">
<caret line="12" column="21" lean-forward="true" selection-start-line="12" selection-start-column="21" selection-end-line="12" selection-end-column="21" />
<folding>
<element signature="e#0#25#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-158">
<folding>
<element signature="e#0#26#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
</file>
</leaf>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/.." />
</component>
<component name="IdeDocumentHistory">
<option name="CHANGED_PATHS">
<list>
<option value="$PROJECT_DIR$/src/service/constant.js" />
<option value="$PROJECT_DIR$/src/components/constant.js" />
<option value="$PROJECT_DIR$/src/components/UploadPage.js" />
</list>
</option>
</component>
<component name="ProjectConfigurationFiles">
<option name="files">
<list>
<option value="$PROJECT_DIR$/.idea/React_Frontend.iml" />
<option value="$PROJECT_DIR$/.idea/vcs.xml" />
<option value="$PROJECT_DIR$/.idea/misc.xml" />
<option value="$PROJECT_DIR$/.idea/modules.xml" />
</list>
</option>
</component>
<component name="ProjectFrameBounds" extendedState="6">
<option name="x" value="-10" />
<option name="y" value="-10" />
<option name="width" value="1480" />
<option name="height" value="1090" />
</component>
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
<component name="ProjectView">
<navigator proportions="" version="1">
<foldersAlwaysOnTop value="true" />
</navigator>
<panes>
<pane id="ProjectPane">
<subPane>
<expand>
<path>
<item name="React_Frontend" type="b2602c69:ProjectViewProjectNode" />
<item name="React_Frontend" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="React_Frontend" type="b2602c69:ProjectViewProjectNode" />
<item name="React_Frontend" type="462c0819:PsiDirectoryNode" />
<item name="public" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="React_Frontend" type="b2602c69:ProjectViewProjectNode" />
<item name="React_Frontend" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="React_Frontend" type="b2602c69:ProjectViewProjectNode" />
<item name="React_Frontend" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" />
<item name="components" type="462c0819:PsiDirectoryNode" />
</path>
</expand>
<select />
</subPane>
</pane>
<pane id="Scope" />
</panes>
</component>
<component name="PropertiesComponent">
<property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
<property name="nodejs_npm_path_reset_for_default_project" value="true" />
<property name="nodejs_package_manager_path" value="npm" />
</component>
<component name="RunDashboard">
<option name="ruleStates">
<list>
<RuleState>
<option name="name" value="ConfigurationTypeDashboardGroupingRule" />
</RuleState>
<RuleState>
<option name="name" value="StatusDashboardGroupingRule" />
</RuleState>
</list>
</option>
</component>
<component name="SvnConfiguration">
<configuration />
</component>
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="48d96c29-ce37-4d1e-a6ad-f9f0880051ed" name="Default Changelist" comment="" />
<created>1566045025602</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1566045025602</updated>
<workItem from="1566045027961" duration="722000" />
<workItem from="1566056567040" duration="50000" />
<workItem from="1566101217411" duration="1515000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="2287000" />
</component>
<component name="ToolWindowManager">
<frame x="-7" y="-7" width="1550" height="878" extended-state="6" />
<editor active="true" />
<layout>
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.18902843" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info id="npm" order="2" side_tool="true" />
<window_info id="Favorites" order="3" side_tool="true" />
<window_info anchor="bottom" id="Message" order="0" />
<window_info anchor="bottom" id="Find" order="1" />
<window_info anchor="bottom" id="Run" order="2" weight="0.3297587" />
<window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
<window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
<window_info anchor="bottom" id="TODO" order="6" />
<window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
<window_info anchor="bottom" id="Version Control" order="8" />
<window_info anchor="bottom" id="Event Log" order="9" side_tool="true" />
<window_info anchor="bottom" id="Terminal" order="10" visible="true" weight="0.32707775" />
<window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
<window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
<window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
</layout>
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="1" />
</component>
<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/src/service/constant.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="51">
<caret line="3" column="32" selection-start-line="3" selection-start-column="32" selection-end-line="3" selection-end-column="32" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/Login.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-561">
<folding>
<element signature="e#0#40#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-158">
<folding>
<element signature="e#0#26#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/constant.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="153">
<caret line="9" lean-forward="true" selection-start-line="9" selection-end-line="9" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/UploadPage.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="204">
<caret line="12" column="21" lean-forward="true" selection-start-line="12" selection-start-column="21" selection-end-line="12" selection-end-column="21" />
<folding>
<element signature="e#0#25#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
</component>
</project>
\ No newline at end of file
inusha madurnaga/React_Frontend/README.md 0 → 100644
View file @ b4c56307
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.<br>
You will also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.<br>
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.<br>
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
### Analyzing the Bundle Size
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
### Making a Progressive Web App
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
### Advanced Configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
### Deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
### `npm run build` fails to minify
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
inusha madurnaga/React_Frontend/package-lock.json 0 → 100644
View file @ b4c56307
This source diff could not be displayed because it is too large. You can view the blob instead.
inusha madurnaga/React_Frontend/package.json 0 → 100644
View file @ b4c56307
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-free": "^5.14.0",
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"@fortawesome/react-fontawesome": "^0.1.11",
"@kenshooui/react-multi-select": "^1.1.6",
"@material-ui/core": "^4.9.10",
"@progress/kendo-react-dropdowns": "^3.17.0",
"@progress/kendo-react-intl": "^3.17.0",
"@progress/kendo-react-labels": "^3.17.0",
"apexcharts": "^3.20.2",
"axios": "^0.18.0",
"bootstrap": "^4.4.1",
"disable-browser-back-navigation": "^0.1.0",
"moment": "^2.27.0",
"multiselect-react-dropdown": "^1.5.7",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-apexcharts": "^1.3.7",
"react-bootstrap": "^1.3.0",
"react-bootstrap-table": "^4.3.1",
"react-charts": "^2.0.0-beta.7",
"react-circular-progressbar": "^2.0.3",
"react-compound-timer": "^1.2.0",
"react-digital-clock": "^0.1.2",
"react-dom": "^16.8.6",
"react-json-parser": "^0.2.1",
"react-live-clock": "^4.0.5",
"react-moment": "^0.9.7",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.0.1",
"reactstrap": "^8.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
inusha madurnaga/React_Frontend/public/index.html 0 → 100644
View file @ b4c56307
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link href="/fontawesome-free-5.14.0-web/css/all.css" rel="stylesheet"> <!--load all styles -->
<script defer src="/fontawesome-free-5.14.0-web/js/all.js"></script> <!--load all styles -->
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css"></link>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
inusha madurnaga/React_Frontend/public/manifest.json 0 → 100644
View file @ b4c56307
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
inusha madurnaga/React_Frontend/src/App.css 0 → 100644
View file @ b4c56307
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.divider {
height: 1px;
width:100%;
display:block; /* for use on default inline elements like span */
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
inusha madurnaga/React_Frontend/src/App.js 0 → 100644
View file @ b4c56307
import React, { Component } from 'react'
import axios from 'axios'
import './App.css';
import constant from '../src/service/constant';
class App extends Component{
constructor(props) {
super(props)
this.state = {
// LocationList:[],
// startTimeList:[],
startLocation: '',
endLocation: '',
startTime: ''
}
}
changeHandler = (e) => {
this.setState({[e.target.name]: e.target.value })
}
submitHandler = (e) => {
e.preventDefault()
const{startLocation , endLocation , startTime} = this.state
console.log(this.state)
axios.post(constant()+'/findtrain', {startLocation , endLocation , startTime} )
.then(response => {
console.log(response)
if(response.data === ''){
this.props.history.push("/App")
}else{
this.props.history.push({
pathname : '/AddTicket',
state: { detail: response.data }
}
);
}
})
.catch(error => {
console.log(error)
})
}
componentWillMount() {
// e.preventDefault()
axios.get(constant()+'/trarin/location')
.then(response => {
this.setState({
LocationList: response.data
})
}).catch(error => {
console.log(error)
})
console.log(this.LocationList)
axios.get(constant()+'/trarin/starttime')
.then(response => {
this.setState({
startTimeList: response.data
})
}).catch(error => {
console.log(error)
})
}
logOutButtonHandler = () => {
this.props.history.push("/")
}
// renderLocationList() {
// return (this.state.LocationList.map(data =>({label:data,value:data})))
// }
// renderTimeList() {
// return (this.state.startTimeList.map(data =>({label:data,value:data})))
// }
render() {
const { startLocation, endLocation, startTime } = this.state;
// let options = this.state.startLocation.map(function (LocationList) {
// return { value: LocationList, label: LocationList};
// })
return (
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="panel panel-default">
<div className="panel-heading">
<button type="submit" className="btn btn-outline-danger btn float-right" onClick={this.logOutButtonHandler}>Logout</button>
<h3 className="panel-title">
Train Ticket Reservation
</h3>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="panel-body">
<form onSubmit={this.submitHandler}>
<div className="form-group">
<label>Start Location:</label>
{/* <Select options={ this.renderLocationList() } value={startLocation} name="startLocation" onChange={this.changeHandler} placeholder='Select Loaction'/> */}
<input type="text" className="form-control" name="startLocation" value={startLocation} onChange={this.changeHandler} placeholder="Start Location" />
</div>
<div className="form-group">
<label>End Location:</label>
{/* <Select options={ this.renderLocationList() } value={endLocation} name="endLocation" onChange={this.changeHandler} placeholder='Select Loaction'/> */}
<input type="text" className="form-control" name="endLocation" value={endLocation} onChange={this.changeHandler} placeholder="End Location" />
</div>
<div className="form-group">
<label>Start Time:</label>
{/* <Select options={ this.renderTimeList() } value={startTime} name="startTime" onChange={this.changeHandler} placeholder='Select time'/> */}
<input type="text" className="form-control" name="startTime" value={startTime} onChange={this.changeHandler} placeholder="Start Time" />
</div>
<button type="submit" className="btn btn-outline-primary findBtn">Find</button>
</form>
</div>
</div>
</div>
</div>
)
}
}
export default App;
inusha madurnaga/React_Frontend/src/App.test.js 0 → 100644
View file @ b4c56307
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
inusha madurnaga/React_Frontend/src/components/CreatePost.js 0 → 100644
View file @ b4c56307
import React, { Component } from 'react'
import axios from 'axios'
import constant from '../service/constant';
class CreatePost extends Component {
constructor(pros){
super(pros)
this.state = {
title:'',
content:'',
image:'',
courses:[],
course:'',
}
}
changeHandler = (e) => {
const state = this.state
state[e.target.name] = e.target.value;
this.setState(state)
}
userTypeHandler = (e) => {
const state = this.state
state[e.target.name] = e.target.value;
this.setState(state)
}
componentDidMount() {
axios.get(constant()+'/courses').then(
data => {
this.setState({
courses: data.data,
course:data.data[0].id //get first object id from courses list and set status to defult course
})
}
).catch(error => {
console.log(error)
})
}
submitHandler = (e) => {
e.preventDefault()
console.log(this.state)
axios.post(constant()+'/save/post', this.state)
.then(response => {
console.log(response)
if(response.data !== ''){
alert(`Post added successfully`);
this.props.history.push("/createpost")
}
})
.catch(error => {
console.log(error)
})
}
SubmitButtonHandler = () => {
this.props.history.push("/createpost")
}
render(){
const { title,image, content,course} = this.state;
return (
<div className="container">
<div className="panel panel-default">
<div className="panel-heading">
<h3 className="panel-title">
Create New Post
</h3>
</div>
<div className="panel-body">
<form onSubmit={this.submitHandler}>
<div className="form-group">
<label>Title:</label>
<input type='text' id="title" className="form-control" name="title" value={title} onChange={this.changeHandler} placeholder="Title" pattern="^[a-zA-Z0-9_]+$" title="Title is required"/>
</div>
<div className="form-group">
<label>Content:</label>
<textarea className="form-control" name="content" value={content} onChange={this.changeHandler} placeholder="Content" />
</div>
<div className="form-group">
<label>Image:</label>
<input type='text' className="form-control" name="image" value={image} onChange={this.changeHandler} placeholder="Image" />
</div>
<div className="form-group">
<label>Course:</label>
<select className="form-control" name="course" onChange={this.changeHandler} value={course}>
{
this.state.courses.map(sub => {
return (
<option key={sub.id} value={sub.id}>{sub.cname}</option>
)
})
}
</select>
</div>
<button type="button" className="btn btn-outline-secondary loginBtn" onClick={this.SubmitButtonHandler}>Submit</button>
</form>
</div>
</div>
</div>
);
}
}
export default CreatePost;
inusha madurnaga/React_Frontend/src/components/EditPost.js 0 → 100644
View file @ b4c56307
import React, { Component } from 'react'
class EditPost extends Component {
constructor(pros){
super(pros)
this.state = {
}
}
render(){
return(
<div className="container">
<h2>Edit Post Page</h2>
</div>
)
}
}
export default EditPost;
inusha madurnaga/React_Frontend/src/components/ExamSearch.js 0 → 100644
View file @ b4c56307
import React, { Component } from 'react';
import { withRouter, Redirect } from 'react-router-dom';
import axios from 'axios';
import constant from '../service/constant';
class ExamSearch extends Component {
constructor(pros) {
super(pros)
this.state = {
SystemUser: this.props.SystemUser,
areaList: [],
topicList: [],
subTopicList: [],
questionList: [],
area: '',
topic: '',
subtopic: '',
value: false,
}
}
componentDidMount() {
axios.get(constant() + '/searchlist')
.then(res => {
this.setState({
areaList: res.data.areaList,
topicList: res.data.topicList,
subTopicList: res.data.subTopicList,
area: res.data.areaList[0],
topic: res.data.topicList[0],
subtopic: res.data.subTopicList[0],
});
console.log(this.state.areaList);
}).catch(err => {
console.log(err);
});
}
listHandler = (e) => {
const state = this.state
state[e.target.name] = e.target.value;
this.setState(state)
}
redirect_fun(questionList , SystemUser) {
return <Redirect
to={{
pathname: "/QuestionPaper",
state: {
questionList: questionList,
answerList: [],
SystemUser: SystemUser,
count: 0,
paperCount: 1,
}
}}
/>
}
generatePaperHandler = (e) => {
e.preventDefault()
var area = this.state.area;
var topic = this.state.topic;
var subtopic = this.state.subtopic;
axios.post(constant() + '/questions/' + area + '/' + topic + '/' + subtopic + '/')
.then(response => {
console.log(response.data)
this.state.questionList = response.data
this.props.history.push({
pathname: '/QuestionPaper',
state: {
questionList: response.data,
answerList: [],
SystemUser: this.state.SystemUser,
count: 0,
paperCount: 1,
}
});
})
.catch(error => {
console.log(error)
})
}
render() {
const { area, topic, subtopic } = this.state;
return (
<div className="container">
<div className="panel panel-default">
<div className="panel-heading">
<h3 className="panel-title">
Student exam page
</h3>
</div>
<div className="panel-body">
<form onSubmit={this.submitHandler}>
<div className="form-group">
<label>Area:</label>
<select className="form-control" name="area" onChange={this.listHandler} value={area}>
{
this.state.areaList.map(sub => {
return (
<option key={sub.id} value={sub.id}>{sub} </option>
)
})
}
</select>
</div>
<div className="form-group">
<label>Topic:</label>
<select className="form-control" name="topic" onChange={this.listHandler} value={topic}>
{
this.state.topicList.map(sub => {
return (
<option key={sub.id} value={sub.id}>{sub} </option>
)
})
}
</select>
</div>
<div className="form-group">
<label>Sub Topic:</label>
<select className="form-control" name="subtopic" onChange={this.listHandler} value={subtopic}>
{
this.state.subTopicList.map(sub => {
return (
<option key={sub.id} value={sub.id}>{sub} </option>
)
})
}
</select>
</div>
<button type="submit" className="btn btn btn-outline-success registerBtn" onClick={this.generatePaperHandler.bind(this)}>Genarate</button>
<button type="button" className="btn btn-outline-secondary loginBtn">Reset</button>
</form>
</div>
</div>
</div>
)
}
}
export default withRouter(ExamSearch);
inusha madurnaga/React_Frontend/src/components/Lecturer.js 0 → 100644
View file @ b4c56307
import React, { Component } from 'react'
class Lecturer extends Component{
constructor(pros){
super(pros)
this.state = {
}
}
render(){
return(
<div className="container">
<h2>Lecturer Page</h2>
</div>
)
}
}
export default Lecturer
\ No newline at end of file
inusha madurnaga/React_Frontend/src/components/Login.js 0 → 100644
View file @ b4c56307
import React, { Component } from 'react'
import { Link , withRouter} from 'react-router-dom';
import axios from 'axios'
import constant from '../service/constant';
import disableBrowserBackButton from 'disable-browser-back-navigation';
class Login extends Component {
constructor(props) {
super(props)
this.state = {
username: '',
password:'',
}
}
async componentDidMount() {
disableBrowserBackButton();
}
changeHandler = (e) => {
this.setState({[e.target.name]: e.target.value })
}
submitHandler = (e) => {
e.preventDefault()
console.log(this.state)
axios.post(constant()+'/login', this.state)
.then(response => {
console.log(response)
if(response.data.systemUser.type === "Student"){
this.props.history.push({
pathname : '/StudentDashBoard',
state: { SystemUser: response.data }
});
}else if(response.data.systemUser.type === "Lecturer"){
this.props.history.push({
pathname : '/Lecturer',
state: { detail: response.data }
});
}else{
this.props.history.push("/")
}
// console.log(response)
// if(response.data.responseCode === "LOGIN_SUCCESS"){
// this.props.history.push({
// pathname : '/UploadPage',
// state: { detail: response.data }
// });
// }else{
// this.props.history.push("/")
// }
})
.catch(error => {
console.log(error)
})
}
registerButtonHandler = () => {
this.props.history.push("/Register")
}
render() {
const { username, password } = this.state;
return (
<div className="container">
<div className="panel panel-default">
<div className="panel-heading">
<h3 className="panel-title">
Login
</h3>
</div>
<div className="panel-body">
<form onSubmit={this.submitHandler}>
<div className="form-group">
<label>User Name:</label>
<input type="text" className="form-control" name="username" value={username} onChange={this.changeHandler} placeholder="User name" required/>
</div>
<div className="form-group">
<label>Password:</label>
<input type="password" className="form-control" name="password" value={password} onChange={this.changeHandler} placeholder="Password" required />
</div>
<button type="submit" className="btn btn-outline-primary loginBtn">Login</button>
<button type="button" className="btn btn-outline-secondary registerBtn" onClick={this.registerButtonHandler}>Register</button>
</form>
</div>
</div>
</div>
)
}
}
export default Login
inusha madurnaga/React_Frontend/src/components/Papers.js 0 → 100644
View file @ b4c56307
import React, { Component } from 'react'
import { Link, withRouter, BrowserRouter as Router, Route } from 'react-router-dom';
import axios from 'axios'
import constant from '../service/constant';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSignOutAlt, faAngleDoubleLeft, faEye, faCogs } from '@fortawesome/free-solid-svg-icons';
class papers extends Component {
constructor(props) {
super(props);
this.state = {
SystemUser: this.props.location.state.SystemUser,
studentPaperList: [],
}
}
componentDidMount() {
var sid = this.state.SystemUser.systemUser.id;
axios.get(constant() + '/getpapers/' + sid + '/')
.then(res => {
this.setState({ studentPaperList: res.data });
}).catch(err => {
console.log(err);
});
// var html_code = '<button style={{ marginLeft: "10px" }} onClick={() => this.viewPaper(paper.sid, paper.paperNo, paper.subtopic)} className="btn btn-outline-secondary">View </button>';
// if (true) {
// document.getElementById("continueBtn").innerHTML = html_code;
// }
}
logOutButtonHandler = () => {
this.props.history.push("/")
}
backButtonHandler = () => {
this.props.history.push({
pathname: '/StudentDashBoard',
state: {
SystemUser: this.state.SystemUser,
}
});
}
viewPaper = (id) => {
axios.get(constant() + '/getpaper/' + id + '/')
.then(res => {
this.setState({
questionList: res.data.questionList,
answerList: res.data.answerList,
});
this.props.history.push({
pathname: '/QuestionPaperResultsView',
state: {
SystemUser: this.state.SystemUser,
questionList: res.data.questionList,
answerList: res.data.answerList,
}
});
}).catch(err => {
console.log(err);
});
}
generatePaperHandler = (id, paperNo, area, topic, subtopic, uniqueId) => {
var paperNo = paperNo
var area = area;
var topic = topic;
var subtopicNew = subtopic.split(','); //String-list convert to List
axios.post(constant() + '/questions/' + area + '/' + topic + '/', subtopicNew)
.then(response => {
console.log(response.data)
this.props.history.push({
pathname: '/QuestionPaper',
state: {
questionList: response.data,
answerList: [],
SystemUser: this.state.SystemUser,
count: 0,
paperNo: paperNo + 1,
area: area,
topic: topic,
subtopic: subtopicNew,
previouPaperId: id,
uniqueId: uniqueId,
}
});
})
.catch(error => {
console.log(error)
})
}
// getContinueBtn = (flag) => {
// var html_code = '<button style={{ marginLeft: "10px" }} onClick={() => this.viewPaper(paper.sid, paper.paperNo, paper.subtopic)} className="btn btn-outline-secondary">View </button>';
// if (flag == 'ACTIVE') {
// document.getElementById("continueBtn").innerHTML = html_code;
// }
// }
render() {
// function getSubjectList(flag) {
// var html_code = '<button style={{ marginLeft: "10px" }} onClick={() => this.viewPaper(paper.sid, paper.paperNo, paper.subtopic)} className="btn btn-outline-secondary">View </button>';
// if (flag == 'ACTIVE') {
// document.getElementById("continueBtn").innerHTML = html_code;
// }
// }
return (
<div className="container">
<div className="panel panel-default">
<div className="panel-heading">
<div className="row">
<div className="col-md-7">
<h3 className="panel-title">
Student Papers
</h3>
</div>
<div className="col-md-3 text-right">
<button type="submit" className="btn btn btn-outline-primary" onClick={this.backButtonHandler.bind(this)}><FontAwesomeIcon icon={faAngleDoubleLeft} /> Back to Dashboard</button>
</div>
<div className="col-md-2">
<button type="submit" className="btn btn btn-outline-danger" onClick={this.logOutButtonHandler.bind(this)}><FontAwesomeIcon icon={faSignOutAlt} /> Logout</button>
</div>
</div>
</div><br />
<div className="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Attempt</th>
<th scope="col">Area</th>
<th scope="col">Topic</th>
<th scope="col">Sub Topic</th>
<th scope="col">Date/Time</th>
<th scope="col">Avarege Mark</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{
this.state.studentPaperList.map(
paper =>
<tr>
<td>{paper.paperNo}</td>
<td>{paper.area}</td>
<td>{paper.topic}</td>
{/* <td><b>{paper.subtopic}</b>-({paper.uniqueId})</td> */}
<td>{paper.subtopic}</td>
<td>{paper.date}</td>
<td>{paper.averageScore}%</td>
<td>
<button disabled={!(paper.flag == "ACTIVE")} style={{ marginLeft: "10px" }} onClick={() => this.generatePaperHandler(paper.id, paper.paperNo, paper.area, paper.topic, paper.subtopic, paper.uniqueId)} className="btn btn-outline-success"><FontAwesomeIcon icon={faCogs} /> Continue</button>
{/* <p id="continueBtn" onChange={() => this.getContinueBtn(paper.flag)}></p> */}
</td>
<td>
<button style={{ marginLeft: "10px" }} onClick={() => this.viewPaper(paper.id)} className="btn btn-outline-info"><FontAwesomeIcon icon={faEye} /> View </button>
</td>
</tr>
)
}
</tbody>
</table>
</div>
</div>
</div>
)
}
}
export default papers
inusha madurnaga/React_Frontend/src/components/QuestionPaper.js 0 → 100644
View file @ b4c56307
import React, { Component } from 'react'
import axios from 'axios'
import constant from '../service/constant';
// import moment from 'react-moment'
import moment from 'moment';
import Clock from 'react-live-clock';
import Timer from 'react-compound-timer'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowAltCircleRight } from '@fortawesome/free-solid-svg-icons';
class QuestionPaper extends Component {
constructor(pros) {
super(pros)
this.state = {
questionList: this.props.location.state.questionList,
answerList: this.props.location.state.answerList,
count: this.props.location.state.count,
paperNo: this.props.location.state.paperNo,
SystemUser: this.props.location.state.SystemUser,
area:this.props.location.state.area,
topic:this.props.location.state.topic,
subtopic:this.props.location.state.subtopic,
previouPaperId: this.props.location.state.previouPaperId,
uniqueId: this.props.location.state.uniqueId,
subtopicNew:'',
studentAnswer: 0,
startTime: 0,
}
}
componentDidMount() {
const { startTime } = this.state;
//get current time (START TIME)
var startTimeNew = moment().utcOffset('+05:30').format('YYYY-MM-DD hh:mm:ss a');
//set the subtopic lis to string
var subtopicNew = this.state.subtopic[0]; //initially add the first subtopic to the string
this.state.subtopic.map(function (subTopic, index) {
if(index != 0){ //after first repeatly add rest of the subtopic
subtopicNew = subtopicNew.concat(", "+ subTopic)
}
})
console.log(startTimeNew)
this.setState({ startTime: startTimeNew,subtopicNew:subtopicNew })
}
changeHandler = (e) => {
this.setState({ [e.target.name]: e.target.value })
}
submitHandler = (e) => {
e.preventDefault()
const { count, studentAnswer, questionList, answerList, startTime, SystemUser, paperNo, area, topic, subtopic, previouPaperId, uniqueId } = this.state;
//Cheke the answer is selected
if (studentAnswer != 0) {
//get current time (END TIME)
var endTime = moment().utcOffset('+05:30').format('YYYY-MM-DD hh:mm:ss a');
//Calculate the diffrent
var timeConsuming = moment.utc(moment(endTime, "YYYY/MM/DD HH:mm:ss a").diff(moment(startTime, "YYYY/MM/DD HH:mm:ss a"))).format("HH:mm:ss")
var answerObj = {
questionId: questionList[count].id,
weight: questionList[count].weight,
studentAnswer: studentAnswer,
correctAnswer: questionList[count].correctAnswer,
time: timeConsuming,
}
answerList.push(answerObj);
if (count < questionList.length - 1) {
//Increase count for next question
this.setState({ count: count + 1, studentAnswer: 0 })
//get current time (START TIME)
var startTimeNew = moment().utcOffset('+05:30').format('YYYY-MM-DD hh:mm:ss a');
this.setState({ startTime: startTimeNew })
//Unchecked the radio buttons
document.getElementById("ans1").checked = false;
document.getElementById("ans2").checked = false;
document.getElementById("ans3").checked = false;
document.getElementById("ans4").checked = false;
} else {
this.props.history.push({
pathname: '/QuestionPaperResults',
state: {
questionList: questionList,
answerList: answerList,
SystemUser: SystemUser,
paperNo: paperNo,
area:area,
topic:topic,
subtopic:subtopic,
previouPaperId:previouPaperId,
uniqueId:uniqueId,
}
});
}
} else if (studentAnswer == 0) {
alert("You should select a answer");
}
}
render() {
const { count, questionList, studentAnswer } = this.state;
return (
<div className="container">
<div className="panel panel-default">
<div className="panel-heading">
<h3 className="panel-title">
<div className="row">
<div className="col-sm-12 text-center">
Question Paper - {this.state.area} <br /><h5> Topic - {this.state.topic} </h5><h5> Sub Topic - {this.state.subtopicNew}</h5>
</div>
</div>
</h3>
<div className="row">
<div className="col-sm-8">
</div>
<div className="col-sm-4">
<h5>
<Timer>
{() => (
<React.Fragment>
<Timer.Hours /> Hour :
<Timer.Minutes /> Minute :
<Timer.Seconds /> Seconds
</React.Fragment>
)}
</Timer>
</h5>
</div>
</div>
</div>
<div className="panel-body">
<form onSubmit={this.submitHandler}>
<div className="card">
<div className="card-header"><lable>{count + 1}. </lable><lable>{questionList[count].question} {questionList[count].correctAnswer}</lable></div>
<div className="card-body">
<div className="form-group">
<input type="radio" value="1" id='ans1' name="studentAnswer" onChange={this.changeHandler} /> <lable> a) </lable>{questionList[count].answer1}
</div>
<div className="form-group">
<input type="radio" value="2" id='ans2' name="studentAnswer" onChange={this.changeHandler} /> <lable> b) </lable>{questionList[count].answer2}
</div>
<div className="form-group">
<input type="radio" value="3" id='ans3' name="studentAnswer" onChange={this.changeHandler} /> <lable> c) </lable>{questionList[count].answer3}
</div>
<div className="form-group">
<input type="radio" value="4" id='ans4' name="studentAnswer" onChange={this.changeHandler} /> <lable> d) </lable>{questionList[count].answer4}
</div>
<button type="submit" className="btn btn btn-outline-success registerBtn">Next &nbsp; <FontAwesomeIcon icon={faArrowAltCircleRight} /> </button>
</div>
</div>
</form>
</div>
</div>
</div>
)
}
}
export default QuestionPaper;
inusha madurnaga/React_Frontend/src/components/QuestionPaperResults.js 0 → 100644
View file @ b4c56307
import React, { Component } from 'react'
import axios from 'axios'
import constant from '../service/constant';
import moment from 'moment';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFastBackward } from '@fortawesome/free-solid-svg-icons';
import { CircularProgressbar } from "react-circular-progressbar";
function QuestionListView(props) {
const questionList = props.questionList;
const answerList = props.answerList;
const listItems = questionList.map((question, key) =>
<div>
<div className="card">
<div className="card-header"><lable>{key + 1}. </lable><lable>{question.question}</lable></div>
<div className="card-body">
<p className="card-text">{answer1(question, answerList[key])}</p>
<p className="card-text">{answer2(question, answerList[key])}</p>
<p className="card-text">{answer3(question, answerList[key])}</p>
<p className="card-text">{answer4(question, answerList[key])}</p>
</div>
</div><br />
</div>
);
return (
<ul className="card-list-align">{listItems}</ul>
);
}
function answer1(question, correctAnswer) {
if (correctAnswer.studentAnswer == 1 && correctAnswer.correctAnswer == 1) {
const listItems =
<div>
<div className="alert alert-success">
<lable> a) </lable>{question.answer1}
</div>
</div>
return listItems;
} else if (correctAnswer.studentAnswer == 1 && correctAnswer.correctAnswer != 1) {
const listItems =
<div>
<div className="alert alert-danger">
<lable> a) </lable>{question.answer1}
</div>
</div>
return listItems;
} else if (correctAnswer.studentAnswer != 1 && correctAnswer.correctAnswer == 1) {
const listItems =
<div>
<div className="alert alert-success">
<lable> a) </lable>{question.answer1}
</div>
</div>
return listItems;
} else {
const listItems =
<div>
<div className="alert">
<lable> a) </lable>{question.answer1}
</div>
</div>
return listItems;
}
}
function answer2(question, correctAnswer) {
if (correctAnswer.studentAnswer == 2 && correctAnswer.correctAnswer == 2) {
const listItems =
<div>
<div className="alert alert-success">
<lable> b) </lable>{question.answer2}
</div>
</div>
return listItems;
} else if (correctAnswer.studentAnswer == 2 && correctAnswer.correctAnswer != 2) {
const listItems =
<div>
<div className="alert alert-danger">
<lable> b) </lable>{question.answer2}
</div>
</div>
return listItems;
} else if (correctAnswer.studentAnswer != 2 && correctAnswer.correctAnswer == 2) {
const listItems =
<div>
<div className="alert alert-success">
<lable> b) </lable>{question.answer2}
</div>
</div>
return listItems;
} else {
const listItems =
<div>
<div className="alert">
<lable> b) </lable>{question.answer2}
</div>
</div>
return listItems;
}
}
function answer3(question, correctAnswer) {
if (correctAnswer.studentAnswer == 3 && correctAnswer.correctAnswer == 3) {
const listItems =
<div>
<div className="alert alert-success">
<lable> c) </lable>{question.answer3}
</div>
</div>
return listItems;
} else if (correctAnswer.studentAnswer == 3 && correctAnswer.correctAnswer != 3) {
const listItems =
<div>
<div className="alert alert-danger">
<lable> c) </lable>{question.answer3}
</div>
</div>
return listItems;
} else if (correctAnswer.studentAnswer != 3 && correctAnswer.correctAnswer == 3) {
const listItems =
<div>
<div className="alert alert-success">
<lable> c) </lable>{question.answer3}
</div>
</div>
return listItems;
} else {
const listItems =
<div>
<div className="alert">
<lable> c) </lable>{question.answer3}
</div>
</div>
return listItems;
}
}
function answer4(question, correctAnswer) {
if (correctAnswer.studentAnswer == 4 && correctAnswer.correctAnswer == 4) {
const listItems =
<div>
<div className="alert alert-success">
<lable> d) </lable>{question.answer4}
</div>
</div>
return listItems;
} else if (correctAnswer.studentAnswer == 4 && correctAnswer.correctAnswer != 4) {
const listItems =
<div>
<div className="alert alert-danger">
<lable> d) </lable>{question.answer4}
</div>
</div>
return listItems;
} else if (correctAnswer.studentAnswer != 4 && correctAnswer.correctAnswer == 4) {
const listItems =
<div>
<div className="alert alert-success">
<lable> d) </lable>{question.answer4}
</div>
</div>
return listItems;
} else {
const listItems =
<div>
<div className="alert">
<lable> d) </lable>{question.answer4}
</div>
</div>
return listItems;
}
}
class QuestionPaperResults extends Component {
constructor(pros) {
super(pros)
this.state = {
questionList: this.props.location.state.questionList,
answerList: this.props.location.state.answerList,
SystemUser: this.props.location.state.SystemUser,
paperNo: this.props.location.state.paperNo,
area: this.props.location.state.area,
topic: this.props.location.state.topic,
subtopic: this.props.location.state.subtopic,
previouPaperId: this.props.location.state.previouPaperId,
uniqueId: this.props.location.state.uniqueId,
totalQuestionNo: 0,
correctQuestionNo: 0,
averageScore: 0,
status: '',
grade: '',
date: '',
}
}
componentDidMount() {
const { answerList } = this.state;
//get total no of questions
var totalQuestionNoNew = answerList.length
var correctQuestionNoNew = 0;
var gradeNew = '';
var statusNew = '';
//calculate correct no of questiona
answerList.map(function (answerObj) {
if (parseInt(answerObj.studentAnswer) == answerObj.correctAnswer) {
correctQuestionNoNew++;
}
});
//Calculate correct answer percentage
var averageScoreNew = (100 * correctQuestionNoNew) / totalQuestionNoNew;
averageScoreNew = parseInt(averageScoreNew.toFixed(2));
//Set the success level
if (averageScoreNew >= 0 && averageScoreNew <= 20) {
statusNew = 'Poor';
} else if (averageScoreNew >= 21 && averageScoreNew <= 40) {
statusNew = 'Faire';
} else if (averageScoreNew >= 41 && averageScoreNew <= 60) {
statusNew = 'Good';
} else if (averageScoreNew >= 61 && averageScoreNew <= 80) {
statusNew = 'Very Good';
} else if (averageScoreNew >= 81 && averageScoreNew <= 100) {
statusNew = 'Excellent';
}
//Set the grade
if (averageScoreNew >= 0 && averageScoreNew <= 29) {
gradeNew = 'E';
} else if (averageScoreNew >= 30 && averageScoreNew <= 34) {
gradeNew = 'D';
} else if (averageScoreNew >= 35 && averageScoreNew <= 39) {
gradeNew = 'D+';
} else if (averageScoreNew >= 40 && averageScoreNew <= 44) {
gradeNew = 'C-';
} else if (averageScoreNew >= 45 && averageScoreNew <= 49) {
gradeNew = 'C';
} else if (averageScoreNew >= 50 && averageScoreNew <= 54) {
gradeNew = 'C+';
} else if (averageScoreNew >= 55 && averageScoreNew <= 59) {
gradeNew = 'B-';
} else if (averageScoreNew >= 60 && averageScoreNew <= 64) {
gradeNew = 'B';
} else if (averageScoreNew >= 65 && averageScoreNew <= 69) {
gradeNew = 'B+';
} else if (averageScoreNew >= 70 && averageScoreNew <= 74) {
gradeNew = '-A';
} else if (averageScoreNew >= 75 && averageScoreNew <= 84) {
gradeNew = 'A';
} else if (averageScoreNew >= 85 && averageScoreNew <= 100) {
gradeNew = 'A+';
}
//get current date
var dateNew = moment().utcOffset('+05:30').format('YYYY-MM-DD hh:mm:ss a');
this.setState({
totalQuestionNo: totalQuestionNoNew,
correctQuestionNo: correctQuestionNoNew,
averageScore: averageScoreNew,
grade: gradeNew,
status: statusNew,
date: dateNew,
});
}
submitHandler = (e) => {
e.preventDefault()
const { answerList, SystemUser, paperNo, totalQuestionNo, correctQuestionNo, averageScore, grade, status, area, topic, subtopic, date, previouPaperId, uniqueId } = this.state;
// var subtopicNew = subtopic.split(','); //String-list convert to List
var PaperResult = {
loginResponse: SystemUser,
studentAnswerList: answerList,
paperNo: paperNo,
totalQuestionNo: totalQuestionNo,
correctQuestionNo: correctQuestionNo,
averageScore: averageScore,
grade: grade,
status: status,
area: area,
topic: topic,
subtopic: subtopic,
date: date,
previouPaperId: previouPaperId,
uniqueId: uniqueId,
}
axios.post(constant() + '/paperresult', PaperResult)
.then(response => {
console.log(response)
this.props.history.push({
pathname: '/StudentDashBoard',
state: {
SystemUser: this.state.SystemUser,
}
});
})
.catch(error => {
console.log(error)
})
}
render() {
const { questionList, answerList, correctQuestionNo, totalQuestionNo, averageScore, grade, status } = this.state;
return (
<div className="container">
<div className="panel panel-default">
<div className="panel-heading">
<h3 className="panel-title text-center">
Question paper Final results
</h3><br />
</div>
<div className="panel-body">
<div className="row">
<div className="col-md-3">
<div className="card text-white bg-info mb-3 result-card">
<div className="card-header">Marks</div>
<div className="card-body">
<h5 className="card-title text-center"><h1>{correctQuestionNo}/{totalQuestionNo}</h1></h5>
<h5 className="card-title text-center">{correctQuestionNo} correct out of {totalQuestionNo}</h5>
</div>
</div>
</div>
<div className="col-md-3">
<div className="card result-card">
<div className="card-header">Average Score</div>
<div className="card-body round-Progress">
<div style={{ width: " 120px" }}>
&nbsp;&nbsp;<CircularProgressbar value={averageScore} text={`${averageScore}%`} />
</div>
</div>
</div>
</div>
<div className="col-md-3">
<div className="card text-white bg-success mb-3 result-card">
<div className="card-header">Status</div>
<div className="card-body">
<h5 className="card-title">Your knowledge level is </h5>
<p className="card-text"><h3>{status}</h3></p>
</div>
</div>
</div>
<div className="col-md-3">
<div className="card text-white bg-primary mb-3 result-card">
<div className="card-header">Grade</div>
<div className="card-body">
<h5 className="card-title">Your Grade is</h5>
<p className="card-text text-center"><h1>{grade}</h1></p>
</div>
</div>
</div>
</div>
<form onSubmit={this.submitHandler}>
<QuestionListView questionList={questionList} answerList={answerList} />
<button type="submit" className="btn btn btn-outline-success"> <FontAwesomeIcon icon={faFastBackward} /> &nbsp; Submit and Back to DashBoard</button>
</form>
</div>
</div>
</div >
)
}
}
export default QuestionPaperResults;
inusha madurnaga/React_Frontend/src/components/QuestionPaperResultsView.js 0 → 100644
View file @ b4c56307
import React, { Component } from 'react'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFastBackward, faSignOutAlt, faAngleDoubleLeft } from '@fortawesome/free-solid-svg-icons';
import { CircularProgressbar } from "react-circular-progressbar";
function QuestionListView(props) {
const questionList = props.questionList;
const answerList = props.answerList;
const listItems = questionList.map((question, key) =>
<div>
<div className="card">
<div className="card-header"><lable>{key + 1}. </lable><lable>{question.question}</lable></div>
<div className="card-body">
<p className="card-text">{answer1(question, answerList[key])}</p>
<p className="card-text">{answer2(question, answerList[key])}</p>
<p className="card-text">{answer3(question, answerList[key])}</p>
<p className="card-text">{answer4(question, answerList[key])}</p>
</div>
</div><br />
</div>
);
return (
<ul className="card-list-align">{listItems}</ul>
);
}
function answer1(question, correctAnswer) {
if (correctAnswer.studentAnswer == 1 && correctAnswer.correctAnswer == 1) {
const listItems =
<div>
<div className="alert alert-success">
<lable> a) </lable>{question.answer1}
</div>
</div>
return listItems;
} else if (correctAnswer.studentAnswer == 1 && correctAnswer.correctAnswer != 1) {
const listItems =
<div>
<div className="alert alert-danger">
<lable> a) </lable>{question.answer1}
</div>
</div>
return listItems;
} else if (correctAnswer.studentAnswer != 1 && correctAnswer.correctAnswer == 1) {
const listItems =
<div>
<div className="alert alert-success">
<lable> a) </lable>{question.answer1}
</div>
</div>
return listItems;
} else {
const listItems =
<div>
<div className="alert">
<lable> a) </lable>{question.answer1}
</div>
</div>
return listItems;
}
}
function answer2(question, correctAnswer) {
if (correctAnswer.studentAnswer == 2 && correctAnswer.correctAnswer == 2) {
const listItems =
<div>
<div className="alert alert-success">
<lable> b) </lable>{question.answer2}
</div>
</div>
return listItems;
} else if (correctAnswer.studentAnswer == 2 && correctAnswer.correctAnswer != 2) {
const listItems =
<div>
<div className="alert alert-danger">
<lable> b) </lable>{question.answer2}
</div>
</div>
return listItems;
} else if (correctAnswer.studentAnswer != 2 && correctAnswer.correctAnswer == 2) {
const listItems =
<div>
<div className="alert alert-success">
<lable> b) </lable>{question.answer2}
</div>
</div>
return listItems;
} else {
const listItems =
<div>
<div className="alert">
<lable> b) </lable>{question.answer2}
</div>
</div>
return listItems;
}
}
function answer3(question, correctAnswer) {
if (correctAnswer.studentAnswer == 3 && correctAnswer.correctAnswer == 3) {
const listItems =
<div>
<div className="alert alert-success">
<lable> c) </lable>{question.answer3}
</div>
</div>
return listItems;
} else if (correctAnswer.studentAnswer == 3 && correctAnswer.correctAnswer != 3) {
const listItems =
<div>
<div className="alert alert-danger">
<lable> c) </lable>{question.answer3}
</div>
</div>
return listItems;
} else if (correctAnswer.studentAnswer != 3 && correctAnswer.correctAnswer == 3) {
const listItems =
<div>
<div className="alert alert-success">
<lable> c) </lable>{question.answer3}
</div>
</div>
return listItems;
} else {
const listItems =
<div>
<div className="alert">
<lable> c) </lable>{question.answer3}
</div>
</div>
return listItems;
}
}
function answer4(question, correctAnswer) {
if (correctAnswer.studentAnswer == 4 && correctAnswer.correctAnswer == 4) {
const listItems =
<div>
<div className="alert alert-success">
<lable> d) </lable>{question.answer4}
</div>
</div>
return listItems;
} else if (correctAnswer.studentAnswer == 4 && correctAnswer.correctAnswer != 4) {
const listItems =
<div>
<div className="alert alert-danger">
<lable> d) </lable>{question.answer4}
</div>
</div>
return listItems;
} else if (correctAnswer.studentAnswer != 4 && correctAnswer.correctAnswer == 4) {
const listItems =
<div>
<div className="alert alert-success">
<lable> d) </lable>{question.answer4}
</div>
</div>
return listItems;
} else {
const listItems =
<div>
<div className="alert">
<lable> d) </lable>{question.answer4}
</div>
</div>
return listItems;
}
}
class QuestionPaperResultsView extends Component {
constructor(pros) {
super(pros)
this.state = {
questionList: this.props.location.state.questionList,
answerList: this.props.location.state.answerList,
SystemUser: this.props.location.state.SystemUser,
totalQuestionNo: 0,
correctQuestionNo: 0,
averageScore: 0,
status: '',
grade: '',
}
}
componentWillMount() {
const { questionList, answerList, SystemUser } = this.state;
//get total no of questions
var totalQuestionNoNew = answerList.length
var correctQuestionNoNew = 0;
var gradeNew = '';
var statusNew = '';
//calculate correct no of questiona
answerList.map(function (answerObj) {
if (parseInt(answerObj.studentAnswer) == answerObj.correctAnswer) {
correctQuestionNoNew++;
}
});
//Calculate correct answer percentage
var averageScoreNew = (100 * correctQuestionNoNew) / totalQuestionNoNew;
averageScoreNew = averageScoreNew.toFixed(2);
//Set the success level
if (averageScoreNew >= 0 && averageScoreNew <= 20) {
statusNew = 'Poor';
} else if (averageScoreNew >= 21 && averageScoreNew <= 40) {
statusNew = 'Faire';
} else if (averageScoreNew >= 41 && averageScoreNew <= 60) {
statusNew = 'Good';
} else if (averageScoreNew >= 61 && averageScoreNew <= 80) {
statusNew = 'Very Good';
} else if (averageScoreNew >= 81 && averageScoreNew <= 100) {
statusNew = 'Excellent';
}
//Set the grade
if (averageScoreNew >= 0 && averageScoreNew <= 29) {
gradeNew = 'E';
} else if (averageScoreNew >= 30 && averageScoreNew <= 34) {
gradeNew = 'D';
} else if (averageScoreNew >= 35 && averageScoreNew <= 39) {
gradeNew = 'D+';
} else if (averageScoreNew >= 40 && averageScoreNew <= 44) {
gradeNew = 'C-';
} else if (averageScoreNew >= 45 && averageScoreNew <= 49) {
gradeNew = 'C';
} else if (averageScoreNew >= 50 && averageScoreNew <= 54) {
gradeNew = 'C+';
} else if (averageScoreNew >= 55 && averageScoreNew <= 59) {
gradeNew = 'B-';
} else if (averageScoreNew >= 60 && averageScoreNew <= 64) {
gradeNew = 'B';
} else if (averageScoreNew >= 65 && averageScoreNew <= 69) {
gradeNew = 'B+';
} else if (averageScoreNew >= 70 && averageScoreNew <= 74) {
gradeNew = '-A';
} else if (averageScoreNew >= 75 && averageScoreNew <= 84) {
gradeNew = 'A';
} else if (averageScoreNew >= 85 && averageScoreNew <= 100) {
gradeNew = 'A+';
}
this.setState({
totalQuestionNo: totalQuestionNoNew,
correctQuestionNo: correctQuestionNoNew,
averageScore: averageScoreNew,
grade: gradeNew,
status: statusNew,
});
}
logOutButtonHandler = () => {
this.props.history.push("/")
}
backButtonHandler = () => {
this.props.history.push({
pathname: '/Papers',
state: {
SystemUser: this.state.SystemUser,
}
});
}
submitHandler = (e) => {
e.preventDefault()
// const { answerList, SystemUser, paperNo, totalQuestionNo, correctQuestionNo, averageScore, grade, status, area, topic, subtopic } = this.state;
// var PaperResult = {
// loginResponse: SystemUser,
// studentAnswerList: answerList,
// paperNo: paperNo,
// totalQuestionNo: totalQuestionNo,
// correctQuestionNo: correctQuestionNo,
// averageScore: averageScore,
// grade: grade,
// status: status,
// area:area,
// topic:topic,
// subtopic:subtopic,
// }
// axios.post(constant() + '/paperresult', PaperResult)
// .then(response => {
// console.log(response)
// this.props.history.push({
// pathname: '/StudentDashBoard',
// state: {
// SystemUser: this.state.SystemUser,
// }
// });
// })
// .catch(error => {
// console.log(error)
// })
}
render() {
const { questionList, answerList, correctQuestionNo, totalQuestionNo, averageScore, grade, status } = this.state;
return (
<div className="container">
<div className="panel panel-default">
<div className="panel-heading">
<div className="row">
<div className="col-md-7">
<h3 className="panel-title">
Question paper Final results
</h3>
</div>
<div className="col-md-3 text-right">
<button type="submit" className="btn btn btn-outline-primary" onClick={this.backButtonHandler.bind(this)}><FontAwesomeIcon icon={faAngleDoubleLeft} /> Back to Student Papers</button>
</div>
<div className="col-md-2">
<button type="submit" className="btn btn btn-outline-danger" onClick={this.logOutButtonHandler.bind(this)}><FontAwesomeIcon icon={faSignOutAlt} /> Logout</button>
</div>
</div>
</div><br/>
<div className="panel-body">
<div className="row">
<div className="col-md-3">
<div className="card text-white bg-info mb-3 result-card">
<div className="card-header">Marks</div>
<div className="card-body">
<h5 className="card-title text-center"><h1>{correctQuestionNo}/{totalQuestionNo}</h1></h5>
<h5 className="card-title text-center">{correctQuestionNo} correct out of {totalQuestionNo}</h5>
</div>
</div>
</div>
<div className="col-md-3">
<div className="card result-card">
<div className="card-header">Average Score</div>
<div className="card-body round-Progress">
<div style={{ width: " 120px" }}>
&nbsp;&nbsp;<CircularProgressbar value={averageScore} text={`${averageScore}%`} />
</div>
</div>
</div>
</div>
<div className="col-md-3">
<div className="card text-white bg-success mb-3 result-card">
<div className="card-header">Status</div>
<div className="card-body">
<h5 className="card-title">Your knowledge level is </h5>
<p className="card-text"><h3>{status}</h3></p>
</div>
</div>
</div>
<div className="col-md-3">
<div className="card text-white bg-primary mb-3 result-card">
<div className="card-header">Grade</div>
<div className="card-body">
<h5 className="card-title">Youre Grade is</h5>
<p className="card-text text-center"><h1>{grade}</h1></p>
</div>
</div>
</div>
</div>
<form onSubmit={this.submitHandler}>
<QuestionListView questionList={questionList} answerList={answerList} />
{/* <button type="submit" className="btn btn btn-outline-success"> <FontAwesomeIcon icon={faFastBackward} /> &nbsp; Submit and Back to DashBoard</button> */}
</form>
</div>
</div>
</div >
)
}
}
export default QuestionPaperResultsView;
inusha madurnaga/React_Frontend/src/components/Register.js 0 → 100644
View file @ b4c56307
import React, { Component } from 'react'
import { Link } from 'react-router-dom';
import axios from 'axios'
import constant from '../service/constant';
class Register extends Component {
constructor(props) {
super(props)
this.state = {
username:'',
email:'',
password:'',
typeList:['Lecturer','Student'],
type:'Lecturer'
}
}
changeHandler = (e) => {
const state = this.state
state[e.target.name] = e.target.value;
this.setState(state)
}
userTypeHandler = (e) => {
const state = this.state
state[e.target.name] = e.target.value;
this.setState(state)
}
// componentDidMount() {
// axios.get(constant()+'/getcourse').then(
// data => {
// this.setState({
// Courses: data.data
// })
// }
// )
// }
submitHandler = (e) => {
e.preventDefault()
console.log(this.state)
axios.post(constant()+'/save/systemuser', this.state)
.then(response => {
console.log(response)
if(response.data != ''){
alert(`User added . now you can log in to the system`);
this.props.history.push("/")
}
})
.catch(error => {
console.log(error)
})
}
loginButtonHandler = () => {
this.props.history.push("/")
}
render() {
const { username,email, password, type} = this.state;
return (
<div className="container">
<div className="panel panel-default">
<div className="panel-heading">
<h3 className="panel-title">
User Registration
</h3>
</div>
<div className="panel-body">
<form onSubmit={this.submitHandler}>
<div className="form-group">
<label>User Name:</label>
<input type='text' id="validationCustom01" className="form-control" name="username" value={username} onChange={this.changeHandler} placeholder="User name" pattern="^[a-zA-Z0-9_]+$" title="Enter user name is requird"/>
</div>
<div className="form-group">
<label>Password:</label>
<input type='password' className="form-control" name="password" value={password} onChange={this.changeHandler} placeholder="Password" />
</div>
<div className="form-group">
<label>Email:</label>
<input type='email' className="form-control" name="email" value={email} onChange={this.changeHandler} placeholder="Email" />
</div>
<div className="form-group">
<label>User Type:</label>
<select className="form-control" name="type" onChange={this.userTypeHandler} value={type}>
{
this.state.typeList.map(sub => {
return (
<option key={sub.id} value={sub.id}>{sub} </option>
)
})
}
</select>
</div>
<button type="submit" className="btn btn btn-outline-success registerBtn">Submit</button>
<button type="button" className="btn btn-outline-secondary loginBtn" onClick={this.loginButtonHandler}>Login</button>
</form>
</div>
</div>
</div>
);
}
}
export default Register
inusha madurnaga/React_Frontend/src/components/ResultItem.js 0 → 100644
View file @ b4c56307
import React, { Component } from 'react'
class ResultItem extends Component {
render() {
return (
<tr>
{/* <th scope="row">{index + 1}</th> */}
<td>{this.props.codeLineItem.codeNumber}</td>
<td>{this.props.codeLineItem.lineNumber}</td>
<td>{this.props.codeLineItem.pStatement}</td>
</tr>
)
}
}
export default ResultItem;
inusha madurnaga/React_Frontend/src/components/Student.js 0 → 100644
View file @ b4c56307
import React, { Component } from 'react'
import axios from 'axios'
import constant from '../service/constant';
import Card from 'react-bootstrap/Card'
import { makeStyles } from '@material-ui/core/styles';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
class Student extends Component {
constructor(pros) {
super(pros)
this.state = {
postList: [],
count: 0,
}
}
componentWillMount() {
axios.get(constant() + '/post')
.then(res => {
this.setState({ postList: res.data });
}).catch(err => {
console.log(err);
});
}
render() {
const { postList } = this.state;
const classes = makeStyles((theme) => ({
root: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-around',
overflow: 'hidden',
backgroundColor: theme.palette.background.paper,
},
gridList: {
width: 500,
height: 450,
},
}));
return (
<div className="container">
<div className="panel panel-default">
<div className="panel-heading">
<h3 className="panel-title">
Login
</h3>
</div>
<div className="panel-body">
<div className={classes.root}>
<GridList cellHeight={500} className={classes.gridList} cols={3}>
{postList.map((item) => (
<GridListTile key={item.img} cols={item.cols || 1}>
<Card>
<Card.Img className="postImageSize" variant="top" src={item.image} />
<Card.Body>
<Card.Title>{item.title}</Card.Title>
<Card.Text>{item.content} </Card.Text>
</Card.Body>
<Card.Footer>
<a href="#" class="btn btn-primary">Go somewhere</a>
</Card.Footer>
</Card>
</GridListTile>
))}
</GridList>
</div>
</div>
</div>
</div>
)
}
}
export default Student;
inusha madurnaga/React_Frontend/src/components/Student2.js 0 → 100644
View file @ b4c56307
import React, { Component } from 'react'
import axios from 'axios'
import constant from '../service/constant';
import { faAngleDoubleLeft, faRedoAlt, faCogs, faSignOutAlt } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { MultiSelect } from '@progress/kendo-react-dropdowns';
const sports = ["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"];
class Student2 extends Component {
constructor(pros) {
super(pros)
this.state = {
SystemUser: this.props.location.state.SystemUser,
areaList: [],
topicList: [],
subTopicList: [],
questionList: [],
subTopicListNew: ['Layer'],
area: '',
topic: '',
subtopic: [],
previouPaperId: 0,
uniqueId: 0,
}
}
componentDidMount() {
axios.get(constant() + '/searchlist')
.then(res => {
// this.state.subtopic.push(res.data.subTopicList[0]) //add first sub topic to the list for view
//Set the sub topic to new array
// if (this.state.topicList[0] == this.state.topic) {
// this.state.subTopicListNew.push(subTopic[2])
// }
//Set the relevant sub topics accourding to the topic
var subTopicListNew = [];
res.data.subTopicList.map(function (subTopic, index) {
if (res.data.topicList[0] == res.data.topicList[0]) {
subTopicListNew.push(subTopic[0])
}
})
this.setState({
areaList: res.data.areaList,
topicList: res.data.topicList,
subTopicList: res.data.subTopicList,
area: res.data.areaList[0],
topic: res.data.topicList[0],
subTopicListNew: subTopicListNew,
// subtopic: res.data.subTopicList[0],
});
console.log(this.state.subTopicListNew);
}).catch(err => {
console.log(err);
});
}
listHandler = (e) => {
const state = this.state
state[e.target.name] = e.target.value;
this.setState(state)
}
topicHandler = (e) => {
const state = this.state
state[e.target.name] = e.target.value;
this.setState(state)
//Set the relevant sub topics accourding to the topic
var subTopicListNew = [];
this.state.subTopicListNew = [];
this.state.subtopic = [];
this.state.subTopicList.map(function (subTopic, index) {
console.log(subTopic);
if (subTopic[1] == e.target.value) {
subTopicListNew.push(subTopic[0])
}
})
this.setState({
subTopicListNew: subTopicListNew,
});
}
generatePaperHandler = (e) => {
e.preventDefault()
if(this.state.subtopic.length == 0){
alert("Please fill the sub topic input feild!")
}
var area = this.state.area;
var topic = this.state.topic;
var subtopic = this.state.subtopic;
axios.post(constant() + '/questions/' + area + '/' + topic + '/', subtopic)
.then(response => {
console.log(response.data)
this.props.history.push({
pathname: '/QuestionPaper',
state: {
questionList: response.data,
answerList: [],
SystemUser: this.state.SystemUser,
count: 0,
paperNo: 1,
area: area,
topic: topic,
subtopic: subtopic,
previouPaperId: this.state.previouPaperId,
uniqueId: this.state.uniqueId,
}
});
})
.catch(error => {
console.log(error)
})
}
backButtonHandler = () => {
this.props.history.push({
pathname: '/StudentDashBoard',
state: {
SystemUser: this.state.SystemUser,
}
});
}
logOutButtonHandler = () => {
this.props.history.push("/")
}
handleSubTopic = (event) => {
this.setState({
subtopic: event.value
});
}
render() {
const { areaList, topicList, subTopicListNew, area, topic, subtopic } = this.state;
return (
<div className="container">
<div className="panel panel-default">
<div className="panel-heading">
<div className="row">
<div className="col-md-7">
<h3 className="panel-title">
Student Question Paper Creation
</h3>
</div>
<div className="col-md-3 text-right">
<button type="submit" className="btn btn btn-outline-primary" onClick={this.backButtonHandler.bind(this)}><FontAwesomeIcon icon={faAngleDoubleLeft} /> Back to Dashboard</button>
</div>
<div className="col-md-2">
<button type="submit" className="btn btn btn-outline-danger" onClick={this.logOutButtonHandler.bind(this)}><FontAwesomeIcon icon={faSignOutAlt} /> Logout</button>
</div>
</div>
</div>
<div className="panel-body">
<form onSubmit={this.submitHandler}>
<div className="form-group">
<label>Area:</label>
<select className="form-control" name="area" onChange={this.listHandler} value={area}>
{
this.state.areaList.map(sub => {
return (
<option key={sub.id} value={sub.id}>{sub} </option>
)
})
}
</select>
</div>
<div className="form-group">
<label>Topic:</label>
<select className="form-control" name="topic" onChange={this.topicHandler} value={topic}>
{
this.state.topicList.map(sub => {
return (
<option key={sub.id} value={sub.id}>{sub} </option>
)
})
}
</select>
</div>
<div className="example-wrapper">
<label>Sub Topic:</label>
<MultiSelect data={subTopicListNew} onChange={this.handleSubTopic} value={subtopic} />
</div>
<button type="submit" className="btn btn btn-outline-success generateBtn" onClick={this.generatePaperHandler.bind(this)}><FontAwesomeIcon icon={faCogs} /> &nbsp; Create</button>
<button type="reset" className="btn btn-outline-secondary loginBtn"><FontAwesomeIcon icon={faRedoAlt} /> &nbsp; Reset</button>
</form>
</div>
</div>
</div>
)
}
}
export default Student2
\ No newline at end of file
inusha madurnaga/React_Frontend/src/components/StudentDashBoard.js 0 → 100644
View file @ b4c56307
import React, { Component } from 'react'
import { Link, withRouter, BrowserRouter as Router, Route } from 'react-router-dom';
import axios from 'axios'
import constant from '../service/constant';
import disableBrowserBackButton from 'disable-browser-back-navigation';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
import Chart from 'react-apexcharts'
class StudentDashBoard extends Component {
constructor(props) {
super(props);
this.progressListeHandler = this.progressListeHandler.bind(this);
this.state = {
SystemUser: this.props.location.state.SystemUser,
ProgressDataList: [],
progressLable: '',
//Start --- charts values
optionsMixedChart: {
chart: { id: "basic-bar", toolbar: { show: false } },
plotOptions: { bar: { columnWidth: "50%", endingShape: "arrow" } },
stroke: { width: [4, 0, 0] },
xaxis: { categories: [] },
markers: { size: 6, strokeWidth: 3, fillOpacity: 0, strokeOpacity: 0, hover: { size: 8 } },
yaxis: { tickAmount: 5, min: -10, max: 10, floating: false, labels: { formatter: (val) => { return val.toFixed(3) }, } }
},
seriesMixedChart: [{ name: "Learning progress", type: "line", data: [] }],
optionsRadial: {
plotOptions: {
radialBar: {
startAngle: -135,
endAngle: 225,
hollow: { margin: 0, size: "70%", background: "#fff", image: undefined, imageOffsetX: 0, imageOffsetY: 0, position: "front", dropShadow: { enabled: true, top: 3, left: 0, blur: 4, opacity: 0.24 } },
track: { background: "#fff", strokeWidth: "67%", margin: 0, dropShadow: { enabled: true, top: -3, left: 0, blur: 4, opacity: 0.35 } },
dataLabels: { showOn: "always", name: { offsetY: -20, show: true, color: "#888", fontSize: "13px" }, value: { formatter: function (val) { return val.toFixed(3); }, color: "#111", fontSize: "30px", show: true } }
}
},
fill: { type: "gradient", gradient: { shade: "dark", type: "horizontal", shadeIntensity: 0.5, gradientToColors: ["#ABE5A1"], inverseColors: true, opacityFrom: 1, opacityTo: 1, stops: [0, 100] } },
stroke: { lineCap: "round" },
labels: ["Avarage Learning Progress"]
},
seriesRadial: [100],
optionsBar: {
chart: {
stacked: true,
stackType: "100%",
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: true
}
},
dataLabels: {
dropShadow: {
enabled: true
}
},
stroke: {
width: 0
},
xaxis: {
categories: ["Fav Color"],
labels: {
show: false
},
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
fill: {
opacity: 1,
type: "gradient",
gradient: {
shade: "dark",
type: "vertical",
shadeIntensity: 0.35,
gradientToColors: undefined,
inverseColors: false,
opacityFrom: 0.85,
opacityTo: 0.85,
stops: [90, 0, 100]
}
},
legend: {
position: "bottom",
horizontalAlign: "right"
}
},
seriesBar: [
{
name: "blue",
data: [32]
},
{
name: "green",
data: [41]
},
{
name: "yellow",
data: [12]
},
{
name: "red",
data: [65]
}
]
//End --- charts values
}
}
componentWillMount() {
// disableBrowserBackButton();
var sid = this.state.SystemUser.systemUser.id;
console.log(this.state.optionsMixedChart.xaxis.categories);
axios.get(constant() + '/getprogress/' + sid + '/')
.then(res => {
//set data list and categories(label) to the dashboard at first time
var dataNew = res.data[0].learningProgresList
var categoriesNew = res.data[0].paperLabelList
var totalLearningRate = 0;
var seriesRadialNew = 0;
var seriesRadialNewListType = [];
//Calulate total Learning progress
res.data[0].learningProgresList.map(function (learningRate, index) {
totalLearningRate = totalLearningRate + learningRate;
})
//Calulate Avarage Learning progress
seriesRadialNew = totalLearningRate / res.data[0].learningProgresList.length;
seriesRadialNewListType.push(seriesRadialNew);//seriesRadial should List type
this.setState({
ProgressDataList: res.data,
optionsMixedChart: { xaxis: { categories: categoriesNew } }, //Object property(categories) Assign
seriesMixedChart: [{ data: dataNew }], //Object property(data) Assign
seriesRadial: seriesRadialNewListType,
});
console.log(this.state.ProgressDataList);
}).catch(err => {
console.log(err);
});
}
listHandler = (e) => {
const state = this.state
state[e.target.name] = e.target.value;
this.setState(state)
}
paperSearch = (e) => {
e.preventDefault()
this.props.history.push({
pathname: '/Student2',
state: {
SystemUser: this.state.SystemUser,
}
});
}
paperView = (e) => {
e.preventDefault()
this.props.history.push({
pathname: '/Papers',
state: {
SystemUser: this.state.SystemUser,
}
});
}
logOutButtonHandler = () => {
this.props.history.push("/")
}
progressListeHandler = (e) => {
const state = this.state
state[e.target.name] = e.target.value;
this.setState(state)
var dataNew = []
var categoriesNew = []
var seriesRadialNewListType = [];
//Calulate total Learning progress
this.state.ProgressDataList.map(function (Progress, index) {
if(Progress.subTopic === e.target.value){
//set data list and categories(label) to the dashboard at first time
dataNew = Progress.learningProgresList
categoriesNew = Progress.paperLabelList
var totalLearningRate = 0;
var seriesRadialNew = 0;
seriesRadialNewListType = [];
//Calulate total Learning progress
Progress.learningProgresList.map(function (learningRate, index) {
totalLearningRate = totalLearningRate + learningRate;
})
//Calulate Avarage Learning progress
seriesRadialNew = totalLearningRate / Progress.learningProgresList.length;
seriesRadialNewListType.push(seriesRadialNew);//seriesRadial should List type
}
});
this.setState({
optionsMixedChart: { xaxis: { categories: categoriesNew } }, //Object property(categories) Assign
seriesMixedChart: [{ data: dataNew }], //Object property(data) Assign
seriesRadial: seriesRadialNewListType,
});
}
render() {
return (
<div className="container">
<div className="panel panel-default">
<div className="panel-heading">
<div className="row">
<div className="col-md-10">
<h3 className="panel-title">
Student Dashboard
</h3>
</div>
<div className="col-md-2-right">
<button type="submit" className="btn btn btn-outline-danger" onClick={this.logOutButtonHandler.bind(this)}><FontAwesomeIcon icon={faSignOutAlt} /> Logout</button>
</div>
</div>
</div><br />
</div>
<div className="panel-body">
<button type="submit" className="btn btn-outline-success btn-lg btn-block" onClick={this.paperSearch.bind(this)}>Paper Search</button><br />
<button type="submit" className="btn btn-outline-info btn-lg btn-block" onClick={this.paperView.bind(this)}>View My Papers</button>
</div>
<div>
<div className="app">
<div className="row">
<div className="col-md-6 mixed-chart">
<Chart
options={this.state.optionsMixedChart}
series={this.state.seriesMixedChart}
type="line"
width="500"
/>
</div>
<div className="col-md-3 radial-chart">
<Chart
options={this.state.optionsRadial}
series={this.state.seriesRadial}
type="radialBar"
width="280"
/>
</div>
<div className="col-md-3">
<label>Select a paper series:</label>
<select className="form-control" name="progressLable" onChange={this.progressListeHandler} value={this.state.progressLable}>
{
this.state.ProgressDataList.map(sub => {
return (
<option key={sub.subTopic} value={sub.subTopic}>{sub.subTopic} </option>
)
})
}
</select>
</div>
</div>
{/* <div className="row">
<div className="col percentage-chart">
<Chart
options={this.state.optionsBar}
height={140}
series={this.state.seriesBar}
type="bar"
width={500}
/>
</div>
<p className="col">
<button onClick={this.updateCharts}>Update!</button>
</p>
</div> */}
</div>
</div>
</div>
)
}
}
export default StudentDashBoard;
inusha madurnaga/React_Frontend/src/components/chart/ReactChart.js 0 → 100644
View file @ b4c56307
import Chart from 'react-apexcharts'
import React, { Component } from 'react'
class ReactChart extends Component {
constructor(props) {
super(props);
this.updateCharts = this.updateCharts.bind(this);
this.state = {
optionsMixedChart: {
chart: {
id: "basic-bar",
toolbar: {
show: false
}
},
plotOptions: {
bar: {
columnWidth: "50%",
endingShape: "arrow"
}
},
stroke: {
width: [4, 0, 0]
},
xaxis: {
categories: props.categories
},
markers: {
size: 6,
strokeWidth: 3,
fillOpacity: 0,
strokeOpacity: 0,
hover: {
size: 8
}
},
yaxis: {
tickAmount: 5,
min: 0,
max: 100
}
},
seriesMixedChart: [
{
name: "series-1",
type: "line",
data: props.data
}
],
optionsRadial: {
plotOptions: {
radialBar: {
startAngle: -135,
endAngle: 225,
hollow: {
margin: 0,
size: "70%",
background: "#fff",
image: undefined,
imageOffsetX: 0,
imageOffsetY: 0,
position: "front",
dropShadow: {
enabled: true,
top: 3,
left: 0,
blur: 4,
opacity: 0.24
}
},
track: {
background: "#fff",
strokeWidth: "67%",
margin: 0, // margin is in pixels
dropShadow: {
enabled: true,
top: -3,
left: 0,
blur: 4,
opacity: 0.35
}
},
dataLabels: {
showOn: "always",
name: {
offsetY: -20,
show: true,
color: "#888",
fontSize: "13px"
},
value: {
formatter: function (val) {
return val;
},
color: "#111",
fontSize: "30px",
show: true
}
}
}
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "horizontal",
shadeIntensity: 0.5,
gradientToColors: ["#ABE5A1"],
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100]
}
},
stroke: {
lineCap: "round"
},
labels: ["Percent"]
},
seriesRadial: [76],
optionsBar: {
chart: {
stacked: true,
stackType: "100%",
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: true
}
},
dataLabels: {
dropShadow: {
enabled: true
}
},
stroke: {
width: 0
},
xaxis: {
categories: ["Fav Color"],
labels: {
show: false
},
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
fill: {
opacity: 1,
type: "gradient",
gradient: {
shade: "dark",
type: "vertical",
shadeIntensity: 0.35,
gradientToColors: undefined,
inverseColors: false,
opacityFrom: 0.85,
opacityTo: 0.85,
stops: [90, 0, 100]
}
},
legend: {
position: "bottom",
horizontalAlign: "right"
}
},
seriesBar: [
{
name: "blue",
data: [32]
},
{
name: "green",
data: [41]
},
{
name: "yellow",
data: [12]
},
{
name: "red",
data: [65]
}
]
};
}
componentDidMount() {
const { areaList, topicList, subTopicListNew, area, topic, seriesBar } = this.state;
}
updateCharts() {
// const max = 90;
// const min = 30;
// const newMixedSeries = [];
// const newBarSeries = [];
// this.state.seriesMixedChart.forEach((s) => {
// const data = s.data.map(() => {
// return Math.floor(Math.random() * (max - min + 1)) + min;
// });
// newMixedSeries.push({ data: data, type: s.type });
// });
// this.state.seriesBar.forEach((s) => {
// const data = s.data.map(() => {
// return Math.floor(Math.random() * (180 - min + 1)) + min;
// });
// newBarSeries.push({ data, name: s.name });
// });
// this.setState({
// seriesMixedChart: newMixedSeries,
// seriesBar: newBarSeries,
// seriesRadial: [Math.floor(Math.random() * (90 - 50 + 1)) + 50]
// });
}
render() {
return (
<div className="app">
<div className="row">
<div className="col mixed-chart">
<Chart
options={this.state.optionsMixedChart}
series={this.state.seriesMixedChart}
type="line"
width="500"
/>
</div>
<div className="col radial-chart">
<Chart
options={this.state.optionsRadial}
series={this.state.seriesRadial}
type="radialBar"
width="280"
/>
</div>
</div>
<div className="row">
<div className="col percentage-chart">
<Chart
options={this.state.optionsBar}
height={140}
series={this.state.seriesBar}
type="bar"
width={500}
/>
</div>
<p className="col">
<button onClick={this.updateCharts}>Update!</button>
</p>
</div>
</div>
);
}
}
export default ReactChart
\ No newline at end of file
inusha madurnaga/React_Frontend/src/components/chart/canvasjs.min.js 0 → 100644
View file @ b4c56307
This source diff could not be displayed because it is too large. You can view the blob instead.
inusha madurnaga/React_Frontend/src/components/chart/canvasjs.react.js 0 → 100644
View file @ b4c56307
/*
CanvasJS React Charts - https://canvasjs.com/
Copyright 2020 fenopix
--------------------- License Information --------------------
CanvasJS is a commercial product which requires purchase of license. Without a commercial license you can use it for evaluation purposes for upto 30 days. Please refer to the following link for further details.
https://canvasjs.com/license/
*/
var React = require('react');
var CanvasJS = require('./canvasjs.min');
CanvasJS = CanvasJS.Chart ? CanvasJS : window.CanvasJS;
class CanvasJSChart extends React.Component {
static _cjsContainerId = 0
constructor(props) {
super(props);
this.options = props.options ? props.options : {};
this.containerProps = props.containerProps ? props.containerProps : { width: "100%", position: "relative" };
this.containerProps.height = props.containerProps && props.containerProps.height ? props.containerProps.height : this.options.height ? this.options.height + "px" : "400px";
this.chartContainerId = "canvasjs-react-chart-container-" + CanvasJSChart._cjsContainerId++;
}
componentDidMount() {
//Create Chart and Render
this.chart = new CanvasJS.Chart(this.chartContainerId, this.options);
this.chart.render();
if (this.props.onRef)
this.props.onRef(this.chart);
}
shouldComponentUpdate(nextProps, nextState) {
//Check if Chart-options has changed and determine if component has to be updated
return !(nextProps.options === this.options);
}
componentDidUpdate() {
//Update Chart Options & Render
this.chart.options = this.props.options;
this.chart.render();
}
componentWillUnmount() {
//Destroy chart and remove reference
this.chart.destroy();
if (this.props.onRef)
this.props.onRef(undefined);
}
render() {
//return React.createElement('div', { id: this.chartContainerId, style: this.containerProps });
return <div id={this.chartContainerId} style={this.containerProps} />
}
}
var CanvasJSReact = {
CanvasJSChart: CanvasJSChart,
CanvasJS: CanvasJS
};
export default CanvasJSReact;
\ No newline at end of file
inusha madurnaga/React_Frontend/src/components/chart/jquery.canvasjs.min.js 0 → 100644
View file @ b4c56307
This source diff could not be displayed because it is too large. You can view the blob instead.
inusha madurnaga/React_Frontend/src/components/constant.js 0 → 100644
View file @ b4c56307
import React from 'react'
function constant (){
return'http://localhost:8084/elearning-ws2'
}
export default constant
inusha madurnaga/React_Frontend/src/index.css 0 → 100644
View file @ b4c56307
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
.loginBtn {
width: 100px;
margin-right: 20px;
}
.findBtn {
width: 200px;
}
.registerBtn {
width: 100px;
margin-right: 20px;
}
.AppPageHeading {
background-color: #563d7c;
}
.AppBody{
background-color:#d4d4d4;
}
/* .table1Td{
padding-left: 400px;
width: 612px;
} */
.table1{
width:100%;
border: 3px;
text-align: center;
}
.header1{
text-align: center;
}
.tableRow1{
padding-left: 400px;
width: 612px;
}
.tableColumn1{
padding-left: 400px;
width: 612px;
}
.lable1{
padding-left: 220px;
}
.input1{
margin-left: 208px;
width:800px;
}
.button1Div{
text-align: center;
}
.sampathBankBtn {
margin-right: 20px;
width: 200px;
}
.dialogBtn {
margin-right: 20px;
width: 200px;
}
.lable2{
padding-left: 260px;
}
.loginHeder{
background-color: #563d7c;
}
.navBar {
/* background-color: #e3f2fd; */
background-color:#563d7c;
}
.navBarTitle {
color: white;
font-family:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
a:link {
text-decoration: none;
}
.logoutLink {
color: white;
}
h6:hover{
color: blue;
}
.logoutBtn {
text-align: right;
}
.th1{
/* text-align: right; */
width:500px;
}
.td1{
/* text-align: left */
width:500px;
}
.instructorBtn{
width: 200px;
margin-right: 20px;
margin-bottom: 100px;
}
.resultViewBtn {
width: 150px;
margin-right: 20px;
}
.postCard{
width: 20rem;
}
.postImageSize {
width: 23rem;
height: 200px;
}
ul#CardView-Align li {
display:inline;
}
.generateBtn {
width: 150px;
margin-right: 20px;
}
.round-Progress{
margin-left: 45px;
height: 186px;
width: 166px;
padding-top: 0px;
padding-bottom: 36px;
}
.result-card{
height: 213px;
}
.card-list-align{
padding-left: 0px;
}
/* Sub-Topic Drop Down CSS - START ----------------------------------------------*/
@keyframes k-loading-animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.k-i-loading.k-example-loading {
font-size: 64px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgb(144,152,165);
}
.k-i-loading.k-example-loading::before,
.k-i-loading.k-example-loading::after {
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
content: "";
box-sizing: inherit;
border-radius: 50%;
border-width: .05em;
border-style: solid;
border-color: currentColor;
border-top-color: transparent;
border-bottom-color: transparent;
background-color: transparent;
}
.k-icon.k-i-loading.k-example-loading::before,
.k-icon.k-i-loading::after {
content: "";
}
.k-i-loading.k-example-loading::before {
margin-top: -0.5em;
margin-left: -0.5em;
width: 1em;
height: 1em;
animation: k-loading-animation .7s linear infinite;
}
.k-i-loading.k-example-loading::after {
margin-top: -0.25em;
margin-left: -0.25em;
width: .5em;
height: .5em;
animation: k-loading-animation reverse 1.4s linear infinite;
}
.example-wrapper {
min-height: 100px;
align-content: flex-start;
}
.example-wrapper p, .example-col p {
margin: 20px 0 10px;
}
.example-wrapper p:first-child, .example-col p:first-child {
margin-top: 0;
}
.example-col {
display: inline-block;
vertical-align: top;
padding-right: 20px;
padding-bottom: 20px;
}
.example-config {
margin: 0 0 20px;
padding: 20px;
background-color: rgba(0,0,0,.03);
border: 1px solid rgba(0,0,0,.08);
}
.event-log {
margin: 0;
padding: 0;
max-height: 100px;
overflow-y: auto;
list-style-type: none;
border: 1px solid rgba(0,0,0,.08);
background-color: white;
}
.event-log li {
margin: 0;
padding: .3em;
line-height: 1.2em;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.event-log li:last-child {
margin-bottom: -1px;
}
/* Sub-Topic Drop Down CSS - END ---------------------------------------------- */
\ No newline at end of file
inusha madurnaga/React_Frontend/src/index.js 0 → 100644
View file @ b4c56307
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route ,HashRouter, NavLink } from 'react-router-dom';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import "react-circular-progressbar/dist/styles.css";
import App from './App';
import * as serviceWorker from './serviceWorker';
import Register from './components/Register';
import Login from './components/Login';
import Student from './components/Student';
import Student2 from './components/Student2';
import Lecturer from './components/Lecturer';
import QuestionPaper from './components/QuestionPaper';
import QuestionPaperResults from './components/QuestionPaperResults';
import ExamSearch from './components/ExamSearch';
import StudentDashBoard from './components/StudentDashBoard';
import Papers from './components/Papers';
import QuestionPaperResultsView from './components/QuestionPaperResultsView'
ReactDOM.render(
<Router>
{/* <div style={secionStyle}> */}
<div>
<nav className="navbar navbar-light navBar" >
<a className="navbar-brand " href="#"><h4 className="navBarTitle">E-Learning Platform</h4></a>
</nav>
<br/>
{/* <Route exact path='/' component={CreatePost} /> */}
<Route exact path='/' component={Login} />
<Route path='/Register' component={Register} />
<Route path='/App' component={App} />
<Route path='/Student' component={Student} />
<Route path='/Student2' component={Student2} />
<Route path='/QuestionPaper' component={QuestionPaper} />
<Route path='/QuestionPaperResults' component={QuestionPaperResults} />
<Route path='/Lecturer' component={Lecturer} />
<Route path='/ExamSearch' component={ExamSearch} />
<Route path='/StudentDashBoard' component={StudentDashBoard} />
<Route path='/Papers' component={Papers} />
<Route path='/QuestionPaperResultsView' component={QuestionPaperResultsView} />
</div>
{/* </div> */}
</Router>,
document.getElementById('root')
);
serviceWorker.unregister();
inusha madurnaga/React_Frontend/src/logo.svg 0 → 100644
View file @ b4c56307
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
</svg>
inusha madurnaga/React_Frontend/src/service/SegmentedProgressbar.js 0 → 100644
View file @ b4c56307
import React from 'react';
import { render } from 'react-dom';
import _ from 'lodash';
import CircularProgressbar from 'react-circular-progressbar';
// Component that renders an arbitrary
// number of divs on top of CircularProgressbar,
// whose content is centered.
function LayeredProgressbar(props) {
const { renderOverlays, ...otherProps } = props;
const overlayStyles = {
position: 'absolute',
height: '100%',
width: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
};
const overlays = props.renderOverlays();
return (
<div
style={{
position: 'relative',
width: '100%',
height: '100%',
}}
>
<div style={{ position: 'absolute' }}>
<CircularProgressbar {...otherProps} textForPercentage={null} />
</div>
{overlays.map((overlay, index) => (
<div style={overlayStyles} key={index}>
{overlay}
</div>
))}
</div>
);
}
function RadialSeparator(props) {
return (
<div
style={{
background: '#fff',
width: '3px',
height: '100%',
transform: `rotate(${props.degrees}deg)`,
}}
/>
);
}
// Expects an even number of separators.
// Can be implemented with non-even numbers
// but requires changing the styling of LayeredProgressbar,
// left as exercise to the reader.
function getRadialSeparators(numSeparators) {
const degrees = 360 / numSeparators;
return _.range(numSeparators / 2).map(index => (
<RadialSeparator degrees={index * degrees} />
));
}
function SegmentedProgressbar(props) {
return (
<LayeredProgressbar
percentage={props.percentage}
styles={{
path: {
strokeLinecap: 'butt',
},
}}
renderOverlays={() =>
getRadialSeparators(20).concat(
<div style={{ fontSize: 20, color: '#3e98c7' }}>
{props.percentage}%
</div>,
)
}
/>
);
}
export default SegmentedProgressbar;
inusha madurnaga/React_Frontend/src/service/constant.js 0 → 100644
View file @ b4c56307
import React from 'react'
function constant (){
return'http://localhost:8084/elearning-ws2'
}
export default constant
inusha madurnaga/React_Frontend/src/serviceWorker.js 0 → 100644
View file @ b4c56307
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
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