Timetable system
//Backend -> API -> modules.js
const mongoose = require(‘mongoose’)
const Module=mongoose.Schema({
ModuleId:{type:String},
ModuleName:{type:String},
Duration:{type:String},
LecturesId:{type:String},
AcademicYear:{type:String}
})
module.exports=mongoose.model(“Module”,Module)
//Backend -> API -> timetable.js
const mongoose = require(‘mongoose’)
const Time=mongoose.Schema({
Date:{type:String},
Year:{type:String},
Module:{type:String}
})
module.exports=mongoose.model(“TimeTable”,Time)
//Backend -> API -> user.js
const mongoose = require(‘mongoose’)
const User=mongoose.Schema({
UserId:{type:String},
UserName:{type:String},
Email:{type:String},
Password:{type:String},
UserType:{type:String},
Other:{type:String}
})
module.exports=mongoose.model(“User”,User)
//Backend -> Db -> db.js
const mongoose =require(‘mongoose’)
mongoose.connect(‘mongodb://localhost:27017/It20011970’)
const c=mongoose.connection
c.on(“open”,()=>{
console.log(“Connecteed”)
})
module.exports =mongoose
//Backend -> router.js
const Router = require(‘@koa/router’)
const User =require(‘./api/user’)
const Module =require(‘./api/module’)
const TimeTable =require(‘./api/timetable’)
const router = new Router({prefix:’/tm’})
//Create user
router.post(“/u/add”,async (ctx)=>{
const {UserId,UserName,Email,Password,UserType,Other} = ctx.request.body
const u =await User.create({UserId:UserId,UserName:UserName,Email:Email,Password:Password,UserType:UserType,Other:Other}).then(r=>ctx.body=r)
})
//Create Module
router.post(“/m/add”,async (ctx)=>{
console.log(ctx.request.body)
const { ModuleId,ModuleName, Duration,LecturesId, AcademicYear} = ctx.request.body
const m= await Module.create({ModuleId:ModuleId,ModuleName:ModuleName, Duration:Duration,LecturesId:LecturesId, AcademicYear:AcademicYear}).then(r=>ctx.body=r)
})
//Create Time table
router.post(“/t/add”,async (ctx)=>{
const {Date,Year,Module} =ctx.request.body
const t= await TimeTable.create({Date:Date,Year:Year,Module:Module}).then(r=>ctx.body=r)
})
//Loging User
router.post(“/u/auth/:UserName/:Password/:UserType”,async (ctx)=>{
console.log(ctx.params.UserName)
const UserName = ctx.params.UserName
const Password = ctx.params.Password
const UserType = ctx.params.UserType
const u =await User.findOne({$and:[{UserName:UserName},{Password:Password},{UserType:UserType}]})
if(!u)
return(ctx.body={msg:”Notfound”})
else
return(ctx.body={msg:”found”});
})
//Update User
router.put(‘/u/:id’,async (ctx)=>{
const id =ctx.params.id
const {UserId,UserName,Email,Password,UserType,Other} = ctx.request.body
const m=await User.findByIdAndUpdate(id,{UserId:UserId,UserName:UserName,Email:Email,Password:Password,UserType:UserType,Other:Other}).then(r=>ctx.body=r)
})
router.get(‘/m/get’,async (ctx)=>{
const m=await Module.find().then(r=>ctx.body=r)
})
router.get(‘/t/get’,async (ctx)=>{
const m=await TimeTable.find().then(r=>ctx.body=r)
})
router.get(‘/m/get/a’,async (ctx)=>{
const m=await User.find({ $or:[ {UserType:”student”}, {UserType:”teacher”} ]}).then(r=>ctx.body=r)
})
router.get(‘/m/get/t’,async (ctx)=>{
const m=await User.find({ UserType:”student”}).then(r=>ctx.body=r)
})
router.get(‘/m/get/s’,async (ctx)=>{
const m=await User.find({ UserType:”teacher”}).then(r=>ctx.body=r)
})
//Delete User
router.delete(‘/u/:id’,async (ctx)=>{
const id =ctx.params.id
const m=await User.findByIdAndDelete(id).then(r=>ctx.body={msg:”success”})
})
module.exports =router
//Backend -> server.js
const koa = require(‘koa’)
const cors=require(‘@koa/cors’)
const koabodyparser =require(‘koa-body-parser’)
const mongoose =require(‘./Db/db’)
const router= require(‘./router’)
const App = new koa()
App.use(cors());
App.use(koabodyparser())
App.use(router.routes()).use(router.allowedMethods())
App.listen(3003,()=>{
console.log(3003)
})
//Frontend -> modules -> admin.jsx
import React from “react”;
export default class Admin extends React.Component{
constructor(){
super()
this.state={
ModuleId:””,
ModuleName:””,
Duration:””,
LecturesId:””,
AcademicYear:””,
datamod:[],
Date:””,
Year:””,
Module:””,
dataU:[],
dataC:[],
UserId:””,
UserName1:””,
Email:””,
Password:””,
UserType:””,
Other:””,
_id:””
}
this.getmodule()
this.getUser()
}
addT=()=>{
const requestOptions = {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({
Date:this.state.Date,
Year:this.state.Year,
Module:this.state.Module
})
};
fetch(‘http://localhost:3003/tm/t/add’, requestOptions)
.then(response => response.json())
.then(data => console.log(data));
}
addM=()=>{
const requestOptions = {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({
ModuleId:this.state.ModuleId,
ModuleName:this.state.ModuleName,
Duration:this.state.Duration,
LecturesId:this.state.LecturesId,
AcademicYear:this.state.AcademicYear })
};
fetch(‘http://localhost:3003/tm/m/add’, requestOptions)
.then(response => response.json())
.then(data => console.log(data));
}
getmodule=() =>{
const requestOptions = {
method: ‘GET’,
headers: { ‘Content-Type’: ‘application/json’ },
};
fetch(‘http://localhost:3003/tm/m/get’, requestOptions)
.then(response => response.json()).then(d => this.setState({ datamod:d}));
}
getUser=()=>{
const requestOptions = {
method: ‘GET’,
headers: { ‘Content-Type’: ‘application/json’ },
};
fetch(‘http://localhost:3003/tm/m/get/a’, requestOptions)
.then(response => response.json())
.then(d => this.setState({ dataU:d}))
}
fill=(data)=>{
this.setState({UserId:data.UserId})
this.setState({UserName1:data.UserName})
this.setState({Email:data.Email})
this.setState({Password:data.Password})
this.setState({UserType:data.UserType})
this.setState({Other:data.Other})
this.setState({_id:data._id})
Get Dilini Navodya’s stories in your inbox
Join Medium for free to get updates from this writer.
}
updateUser=()=>{
const requestOptions = {
method: ‘PUT’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({
UserId:this.state.UserId,
UserName:this.state.UserName1,
Email:this.state.Email,
Password:this.state.Password,
UserType:this.state.UserType,
Other:this.state.Other
})
};
fetch(‘http://localhost:3003/tm/u/’+this.state._id, requestOptions)
.then(response => response.json())
.then(data => console.log(data));
}
deleteUser=() =>{
const requestOptions = {
method: ‘DELETE’,
headers: { ‘Content-Type’: ‘application/json’ },
};
fetch(‘http://localhost:3003/tm/u/’+this.state._id, requestOptions)
.then(response => response.json()).then(d => console.log(d));
}
render(){
return(<div>
<label>ModuleId</label>
<input type=”text” id=”ModuleId” onChange={e=>this.setState({ModuleId:e.target.value})}/>
<br/>
<label>ModuleName</label>
<input type=”text” id=”ModuleName” onChange={e=>this.setState({ModuleName:e.target.value})}/>
<br/>
<label>Duration</label>
<input type=”text” id=”Duration” onChange={e=>this.setState({Duration:e.target.value})}/>
<br/>
<label>LecturesId</label>
<input type=”text” id=”LecturesId” onChange={e=>this.setState({LecturesId:e.target.value})}/>
<br/>
<label>AcademicYear</label>
<input type=”text” id=”AcademicYear” onChange={e=>this.setState({AcademicYear:e.target.value})}/>
<br/>
<button onClick={this.addM}>Add</button>
<br/>
<br/>
<br/>
<table>
<thead>
<tr>
<th>ModuleId</th>
<th>ModuleName</th>
<th>Duration</th>
<th>LecturesId</th>
<th> AcademicYear</th>
</tr>
</thead>
<tbody>
{
this.state.datamod.map(data=>
<tr>
<td>{data.ModuleId}</td>
<td>{data.ModuleName}</td>
<td>{data.Duration}</td>
<td>{data.LecturesId}</td>
<td>{data.AcademicYear}</td>
<td><button onClick={()=>this.arrayd(data)}>Add</button></td>
</tr>
)
}
</tbody>
</table>
<br/>
<br/>
<label>Date</label>
<input type=”date” id=”Date” onChange={e=>this.setState({Date:e.target.value})}/>
<br/>
<label>Year</label>
<input type=”text” id=”Year” onChange={e=>this.setState({Year:e.target.value})}/>
<br/>
<label>Module</label>
<input type=”text” id=”Module” onChange={e=>this.setState({Module:e.target.value})}/>
<br/>
<button onClick={this.addT}>Add</button>
<br/>
<br/>
<table>
<thead>
<tr>
<th>UserId</th>
<th>UserName</th>
<th>Email</th>
<th>Password</th>
<th>UserType</th>
<th>Other</th>
</tr>
</thead>
<tbody>
{
this.state.dataU.map(data=>
<tr>
<td>{data.UserId}</td>
<td>{data.UserName}</td>
<td>{data.Email}</td>
<td>{data.Password}</td>
<td>{data.UserType}</td>
<td>{data.Other}</td>
<td><button onClick={()=>this.fill(data)}>Get</button></td>
</tr>
)
}
</tbody>
</table>
<br/>
<label>Update Account</label>
<br/>
<input type=”text” value={this.state.UserId} id=”UserId” onChange={e=>this.setState({UserId:e.target.value})}/>
<br/>
<label>UserId</label>
<input type=”text” value={this.state.Password} id=”UserId” onChange={e=>this.setState({Password:e.target.value})}/>
<br/>
<label>UserName</label>
<input type=”text” value={this.state.UserName1} id=”UserName” onChange={e=>this.setState({UserName1:e.target.value})}/>
<br/>
<label>Email</label>
<input type=”text” value={this.state.Email} id=”Email” onChange={e=>this.setState({Email:e.target.value})}/>
<br/>
<label>Password</label>
<input type=”text” value={this.state.Password} id=”Password” onChange={e=>this.setState({Password:e.target.value})}/>
<br/>
<label>UserType</label>
<input type=”text” value={this.state.UserType} id=”UserType” onChange={e=>this.setState({UserType:e.target.value})}/>
<br/>
<label>Other</label>
<input type=”text” id=”Other” value={this.state.Other} onChange={e=>this.setState({Other:e.target.value})}/>
<br/>
<button onClick={this.updateUser}>Update</button>
<br/>
<button onClick={this.deleteUser}>Delete</button>
</div>)
}
}
//Frontend -> modules -> student.jsx
import React from “react”;
export default class Sutdent extends React.Component{
constructor(){
super()
this.state={
dataT:[],
dataS:[]
}
this.getTimetable()
this.getUser();
}
getTimetable=() =>{
const requestOptions = {
method: ‘GET’,
headers: { ‘Content-Type’: ‘application/json’ },
};
fetch(‘http://localhost:3003/tm/t/get’, requestOptions)
.then(response => response.json())
.then(data => this.setState({ dataT: data }));
}
getUser=()=>{
const requestOptions = {
method: ‘GET’,
headers: { ‘Content-Type’: ‘application/json’ },
};
fetch(‘http://localhost:3003/tm/m/get/s’, requestOptions)
.then(response => response.json())
.then(data => this.setState({ dataS: data }));
}
render(){
return(<div>
<table>
<thead>
<tr>
<th>Date</th>
<th>Year</th>
<th>Module</th>
</tr>
</thead>
<tbody>
{
this.state.dataT.map(data=>
<tr>
<td>{data.Date}</td>
<td>{data.Year}</td>
<td>{data.Duration}</td>
<td>{data.Module}</td>
</tr>
)
}
</tbody>
</table>
<br/>
<table>
<thead>
<tr>
<th>UserId</th>
<th>UserName</th>
<th>Email</th>
<th>Password</th>
<th>UserType</th>
<th>Other</th>
</tr>
</thead>
<tbody>
{
this.state.dataS.map(data=>
<tr>
<td>{data.UserId}</td>
<td>{data.UserName}</td>
<td>{data.Email}</td>
<td>{data.Password}</td>
<td>{data.UserType}</td>
<td>{data.Other}</td>
</tr>
)
}
</tbody>
</table>
</div>)
}
}
//Frontend -> modules -> teacher.jsx
import React from “react”;
export default class Teacher extends React.Component{
constructor(){
super()
this.state={
dataT:[],
dataS:[]
}
this.getTimetable()
this.getUser();
}
getTimetable=() =>{
const requestOptions = {
method: ‘GET’,
headers: { ‘Content-Type’: ‘application/json’ },
};
fetch(‘http://localhost:3003/tm/t/get’, requestOptions)
.then(response => response.json())
.then(data => this.setState({ dataT: data }));
}
getUser=()=>{
const requestOptions = {
method: ‘GET’,
headers: { ‘Content-Type’: ‘application/json’ },
};
fetch(‘http://localhost:3003/tm/m/get/t’, requestOptions)
.then(response => response.json())
.then(data => this.setState({ dataS: data }));
}
render(){
return(<div>
<table>
<thead>
<tr>
<th>Date</th>
<th>Year</th>
<th>Module</th>
</tr>
</thead>
<tbody>
{
this.state.dataT.map(data=>
<tr>
<td>{data.Date}</td>
<td>{data.Year}</td>
<td>{data.Duration}</td>
<td>{data.Module}</td>
</tr>
)
}
</tbody>
</table>
<br/>
<table>
<thead>
<tr>
<th>UserId</th>
<th>UserName</th>
<th>Email</th>
<th>Password</th>
<th>UserType</th>
<th>Other</th>
</tr>
</thead>
<tbody>
{
this.state.dataS.map(data=>
<tr>
<td>{data.UserId}</td>
<td>{data.UserName}</td>
<td>{data.Email}</td>
<td>{data.Password}</td>
<td>{data.UserType}</td>
<td>{data.Other}</td>
</tr>
)
}
</tbody>
</table>
</div>)
}
}
//Frontend -> app.jsx
import React from “react”;
import {createRoot} from “react-dom/client”
import App from “./router”;
createRoot(document.getElementById(‘app’)).render(<App/>)
//Frontend -> login.jsx
import React from “react”;
export default class Login extends React.Component{
constructor(){
super()
this.state={
AUserName:””,
APassword:””,
AUserType:””,
UserId:””,
UserName1:””,
Email:””,
Password:””,
UserType:””,
Other:””
}
}
auth=()=>{
let c
console.log(this.state.AUserName)
console.log(this.state.APassword)
console.log(this.state.AUserType)
const requestOptions = {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
};
fetch(‘http://localhost:3003/tm/u/auth/’+this.state.AUserName+’/’+this.state.APassword+'/'+this.state.AUserType, requestOptions)
.then(response => response.json())
.then(data =>
// console.log(data.msg)
{
if(data.msg===”found”){
if(this.state.AUserType===”student”)
location.href=”/s”
else if(this.state.AUserType===”teacher”)
location.href=”/t”
else
location.href=”/a”
}
}
);
}
add=()=>{
const requestOptions = {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({
UserId:this.state.UserId,
UserName:this.state.UserName1,
Email:this.state.Email,
Password:this.state.Password,
UserType:this.state.UserType,
Other:this.state.Other })
};
fetch(‘http://localhost:3003/tm/u/add’, requestOptions)
.then(response => response.json())
.then(data => console.log(data));
}
render(){
return (
<div>
<label>uname</label>
<input type=”text” id=”name” onChange={e=>this.setState({AUserName:e.target.value})}/>
<br/>
<label>Pass</label>
<input type=”text” id=”pass” onChange={e=>this.setState({APassword:e.target.value})}/>
<label>Type</label>
<input type=”text” id=”Type” onChange={e=>this.setState({AUserType:e.target.value})}/>
<br/>
<button onClick={this.auth}>log</button>
<br/>
<label>Create Account</label>
<input type=”text” id=”UserId” onChange={e=>this.setState({UserId:e.target.value})}/>
<br/>
<label>UserId</label>
<input type=”text” id=”UserId” onChange={e=>this.setState({Password:e.target.value})}/>
<br/>
<label>UserName</label>
<input type=”text” id=”UserName” onChange={e=>this.setState({UserName1:e.target.value})}/>
<br/>
<label>Email</label>
<input type=”text” id=”Email” onChange={e=>this.setState({Email:e.target.value})}/>
<br/>
<label>Password</label>
<input type=”text” id=”Password” onChange={e=>this.setState({Password:e.target.value})}/>
<br/>
<label>UserType</label>
<input type=”text” id=”UserType” onChange={e=>this.setState({UserType:e.target.value})}/>
<br/>
<label>Other</label>
<input type=”text” id=”Other” onChange={e=>this.setState({Other:e.target.value})}/>
<br/>
<button onClick={this.add}>Add</button>
<br/>
</div>
)
}
}
//Frontend -> router.jsx
import React from “react”;
import {BrowserRouter as Router,Routes,Route} from ‘react-router-dom’
import Login from “./login”;
import Admin from “./modules/admin”;
import Sutdent from “./modules/sutdent”;
import Teacher from “./modules/teacher”;
export default class App extends React.Component{
constructor(){
super()
}
render(){
return(
<Router>
<Routes>
<Route path=”/” element={<Login/>}></Route>
<Route path=”/a” element={<Admin/>}></Route>
<Route path=”/s” element={<Sutdent/>}></Route>
<Route path=”/t” element={<Teacher/>}></Route>
</Routes>
</Router>
)
}
}
