From 137a1ed03426774692d08beda9b7f837725de65b Mon Sep 17 00:00:00 2001 From: Akanksha13-dev <84703175+Akanksha13-dev@users.noreply.github.com> Date: Wed, 21 Jul 2021 17:36:29 +0530 Subject: [PATCH] Add files via upload Setup a back-end server for the previous application. This needs to be a separate application. Create CRUD APIs (REST) for user model. Store data in JSON file. Use that as a source of data. UI functionality should remain the same. Everything should be in TS. Use express for REST APIs. Push the code to a separate repo on Github. Generate a PR for review. --- assign6/front/data.json | 46 ++++ assign6/front/module.ts | 158 ++++++++++++ assign6/front/package.json | 12 + assign6/front/server-api/api/data.json | 46 ++++ assign6/front/server-api/api/exp11.js | 82 +++++++ assign6/front/server-api/api/exp11.ts | 120 ++++++++++ assign6/front/server-api/exp22.js | 21 ++ assign6/front/server-api/exp22.ts | 24 ++ assign6/front/server-api/start/crud.js | 264 +++++++++++++++++++++ assign6/front/server-api/start/index1.html | 45 ++++ assign6/front/server-api/start/module.js | 233 ++++++++++++++++++ assign6/front/server-api/start/source.js | 263 ++++++++++++++++++++ 12 files changed, 1314 insertions(+) create mode 100644 assign6/front/data.json create mode 100644 assign6/front/module.ts create mode 100644 assign6/front/package.json create mode 100644 assign6/front/server-api/api/data.json create mode 100644 assign6/front/server-api/api/exp11.js create mode 100644 assign6/front/server-api/api/exp11.ts create mode 100644 assign6/front/server-api/exp22.js create mode 100644 assign6/front/server-api/exp22.ts create mode 100644 assign6/front/server-api/start/crud.js create mode 100644 assign6/front/server-api/start/index1.html create mode 100644 assign6/front/server-api/start/module.js create mode 100644 assign6/front/server-api/start/source.js diff --git a/assign6/front/data.json b/assign6/front/data.json new file mode 100644 index 0000000..da30fbe --- /dev/null +++ b/assign6/front/data.json @@ -0,0 +1,46 @@ +[{ + "ID":"1", + "First__Name": "Akanksha", + "Middle__Name": "", + "Last__Name": "Singh", + "Email": "singh@gmail.com", + "Phone_Number": "9987654321", + "Role": 1, + "Address": "Bhopal", + "DateTime":"2020-2-3" +}, +{ + "ID": "2", + "First__Name": "Jai", + "Middle__Name": "Narayan", + "Last__Name": "Singh", + "Email": "jns@gmail.com", + "Phone_Number": "9087654321", + "Role": 0, + "Address": "Pune", + "DateTime":"2020-2-3" +}, +{ + "ID": "3", + "First__Name": "Shurabhi", + "Middle__Name": "Singh", + "Last__Name": "Mittal", + "Email": "ssm@gmail.com", + "Phone_Number": "8907654321", + "Role": 0, + "Address": "Mohali", + "DateTime":"2020-2-3" +}, +{ + "ID": "4", + "First__Name": "Chavi", + "Middle__Name": "", + "Last__Name": "Sonali", + "Email": "ssp@gmail.com", + "Phone_Number": "8901234567", + "Role": 1, + "Address": "Mumbai", + "DateTime":"2020-2-3" +} + +] \ No newline at end of file diff --git a/assign6/front/module.ts b/assign6/front/module.ts new file mode 100644 index 0000000..02960a3 --- /dev/null +++ b/assign6/front/module.ts @@ -0,0 +1,158 @@ + +enum Role{SuperAdmin,Admin,Subscriber}; +class model1{ + ID:number; + First__Name:string; + Middle__Name:string; + Last__Name:string; + Email:string; + Phone_Number:number; + Role:Role; + Address:string; + DateTime:string; + constructor(ID:number,First__Name:string,Middle__Name:string,Last__Name:string,Email:string,Phone_Number:number,Role:Role,Address:string,DateTime:string) + { + this.ID=ID; + this.First__Name=First__Name; + this.Middle__Name=Middle__Name; + this.Last__Name=Last__Name; + this.Email=Email; + this.Phone_Number=Phone_Number; + this.Role=Role; + this.Address=Address; + this.DateTime=DateTime; + } +} + let ListS=[]; + const obj1=new model1(1,'Akansha','fg','singh','singh@gmail.com',9876542123,Role.Admin,'adfghkk','2018-12-10T13:49:51.141Z'); + ListS.push(obj1); + const obj2=new model1(2,'Akriti','fg','singh','singh@gmail.com',7812345321,Role.Admin,'adfghkk','2018-12-10T13:49:51.141Z'); + ListS.push(obj2); +//API CALLS ====================================================================================== + +async function getUsers() { + + let response = await fetch('http://localhost:9000/exp22'); + let users = await response.json() as model1[] ; + + return users; // same as Promise.resolve(users) + +} +async function deleteUser(id: string) { + + let response = await fetch(`http://localhost:9000/exp11/${id}`, { + method: 'DELETE' + }) + let data = await response.json() + return data; +} +async function editUser(id: string, object: model1) { + + let response = await fetch(`http://localhost:9000/exp11/${id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + + }, + body: JSON.stringify(object) + }) + let data = await response.json() + return data; +} +async function addUser(id: string, object: model1) { + + let response = await fetch(`http://localhost:9000/exp11/${id}`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + + }, + body: JSON.stringify(object) + }) + let data = await response.json() + return data; +} +//=================================================================================================== + +interface list{ + create(data:T):void; + read(r:number):void; + update(r:number):void; + delete(r:number):void; + } +class changeL implements list{ + create(data:model1):void{ + const row=new model1(data.ID,data.First__Name,data.Middle__Name,data.Last__Name,data.Email,data.Phone_Number,data.Role,data.Address,data.DateTime); + ListS.push(row); + } + read(r:number):void{ + var li=[]; + + for (var j = 0; j < col.length; j++) { + var s=document.getElementById(col[j]+(r)).innerHTML; + //document.getElementById(j).value=""; + li.push(s); + } + let per={'ID':li[0],'First__Name':li[1],'Middle__Name':li[2], + 'Last__Name':li[3], + 'Email':li[4], + 'Phone_Number':li[5], + 'Role':li[6], + 'Address':li[7], + 'DateTime':li[8] } + document.getElementById('retriveValue').innerHTML=JSON.stringify(per); + document.getElementById("select"+r+"").style.visibility ="visible"; + document.getElementById("retrive"+r+"").style.visibility ="hidden"; + document.getElementById("update"+r+"").style.visibility ="hidden"; + document.getElementById("delete"+r+"").style.visibility ="hidden"; + document.getElementById("row"+r+"").style.backgroundColor = "white"; + + } + + update(no:number){ + + document.getElementById("update"+no).style.visibility="hidden"; + document.getElementById("saveUpdate"+no).style.visibility="visible"; + document.getElementById("cancelUpdate"+no).style.visibility="visible"; + + var Id=document.getElementById("ID"+no); + var FirstName=document.getElementById("First__Name"+no); + var MiddleName=document.getElementById("Middle__Name"+no); + var LastName=document.getElementById("Last__Name"+no); + var email =document.getElementById("Email"+no) ; + var Phone_N =document.getElementById("Phone_Number"+no) ; + var role =document.getElementById("Role"+no) ; + var address =document.getElementById("Address"+no) ; + var date =document.getElementById("DateTime"+no) ; + + var ID=Id.innerHTML; + var FName=FirstName.innerHTML; + var MName=MiddleName.innerHTML; + var LName=LastName.innerHTML; + var Email=email.innerHTML; + var Phone=Phone_N.innerHTML; + var Role=role.innerHTML; + var Address=address.innerHTML; + var Date=date.innerHTML; + + helpCancel(ID,FName,MName,LName,Email,Phone,Role,Address,Date); + Id.innerHTML=""; + FirstName.innerHTML=""; + MiddleName.innerHTML=""; + LastName.innerHTML=""; + email.innerHTML=""; + Phone_N.innerHTML=""; + role.innerHTML=""; + address.innerHTML=""; + date.innerHTML=""; + } + delete(r:number):void{ + let par=r-1 + deleteUser(r-1).then(usersArray => {`deleted,${usersArray}`}) + .catch(()=> {alert("Unexpected delete Error Occured !")}) ; + CreateTableFromJSON() + //ListS.splice(r-1,1); + } +} + + \ No newline at end of file diff --git a/assign6/front/package.json b/assign6/front/package.json new file mode 100644 index 0000000..428d04d --- /dev/null +++ b/assign6/front/package.json @@ -0,0 +1,12 @@ +{ + "name": "front", + "version": "1.0.0", + "description": "", + "main": "server-api/exp22.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC" +} diff --git a/assign6/front/server-api/api/data.json b/assign6/front/server-api/api/data.json new file mode 100644 index 0000000..da30fbe --- /dev/null +++ b/assign6/front/server-api/api/data.json @@ -0,0 +1,46 @@ +[{ + "ID":"1", + "First__Name": "Akanksha", + "Middle__Name": "", + "Last__Name": "Singh", + "Email": "singh@gmail.com", + "Phone_Number": "9987654321", + "Role": 1, + "Address": "Bhopal", + "DateTime":"2020-2-3" +}, +{ + "ID": "2", + "First__Name": "Jai", + "Middle__Name": "Narayan", + "Last__Name": "Singh", + "Email": "jns@gmail.com", + "Phone_Number": "9087654321", + "Role": 0, + "Address": "Pune", + "DateTime":"2020-2-3" +}, +{ + "ID": "3", + "First__Name": "Shurabhi", + "Middle__Name": "Singh", + "Last__Name": "Mittal", + "Email": "ssm@gmail.com", + "Phone_Number": "8907654321", + "Role": 0, + "Address": "Mohali", + "DateTime":"2020-2-3" +}, +{ + "ID": "4", + "First__Name": "Chavi", + "Middle__Name": "", + "Last__Name": "Sonali", + "Email": "ssp@gmail.com", + "Phone_Number": "8901234567", + "Role": 1, + "Address": "Mumbai", + "DateTime":"2020-2-3" +} + +] \ No newline at end of file diff --git a/assign6/front/server-api/api/exp11.js b/assign6/front/server-api/api/exp11.js new file mode 100644 index 0000000..6167102 --- /dev/null +++ b/assign6/front/server-api/api/exp11.js @@ -0,0 +1,82 @@ +var express = require("express"); +var router = express(); +//import { v4 as uuidv4 } from 'uuid'; +var data = require('./data.json'); +//SENDS ALL MEMBERS +router.get("/", function (req, res) { + res.json(data); +}); +//SEND A SPECIFIC MEMEBER +router.get("/:id", function (req, res) { + var id = req.params.id; + if (data.some(function (data) { return data.ID === id; })) { + res.status(200).json(data.filter(function (data) { return data.ID === id; })); + } + else + res.status(400).json({ message: "No Member with Member ID " + id + " Found" }); +}); +//ADD MEMBER +router.post("/", function (req, res) { + var newValue = { + ID: req.body.ID, + First__Name: req.body.First__Name, + Middle__Name: req.body.Middle__Name, + Last__Name: req.body.Last__Name, + Email: req.body.Email, + Phone_Number: req.body.Phone_Number, + Role: req.body.Role, + Address: req.body.Address, + DateTime:req.body.DateTime + }; + if (!newValue.ID ||!newValue.First__Name || !newValue.Last__Name || !newValue.Email || !newValue.Phone_Number || !newValue.Role || !newValue.Address) { + res.status(400).json({ message: "Give Correct Input" }); + } + else if (data.some(function (data) { return newValue.Phone_Number === data.Phone_Number; })) { + res.status(400).json({ message: "User Already Exists" }); + } + else { + data.push(newValue); + res.status(200).json({ message: "Member Successfully Added !", "New Member": newValue }); + } +}); +//EDIT MEMBER +router.put('/:id', function (req, res) { + var id = req.params.id; + if (data.some(function (data) { return data.ID === id; })) { + data.forEach(function (object) { + if (object.ID === id) { + object.First__Name = req.body.First__Name ? req.body.First__Name : object.First__Name; + object.Middle__Name = req.body.Middle__Name ? req.body.Middle__Name : object.Middle__Name; + object.Last__Name = req.body.Last__Name ? req.body.Last__Name : object.Last__Name; + object.Email = req.body.Email ? req.body.Email : object.Email; + object.Phone_Number = req.body.Phone_Number ? req.body.Phone_Number : object.Phone_Number; + object.Role = req.body.Role ? req.body.Role : object.Role; + object.Address = req.body.Address ? req.body.Address : object.Address; + object.DateTime= req.body.DateTime ? req.body.DateTime : object.DateTime; + res.status(200).json({ message: 'Updated Successfully', updatedMembers: data }); + } + }); + } + else { + res.status(400).json({ message: "No Member with Member ID " + id + " Found" }); + } +}); +//DELETE MEMBER +router["delete"]('/:id', function (req, res) { + var id = req.params.id; + + if (data.some(function (data) { return data.ID=== id; })) { + var index = 0; + for (; index < data.length; index++) { + if (data[index].ID === id) + break; + } + data.splice(index, 1); + res.status(200).json({ message: "Deleted Member with ID: " + id, members: data }); + console.log(id); + } + else { + res.status(400).json({ message: "No Member with Member ID " + id + " Found" }); + } +}); +module.exports = router; diff --git a/assign6/front/server-api/api/exp11.ts b/assign6/front/server-api/api/exp11.ts new file mode 100644 index 0000000..9e708f0 --- /dev/null +++ b/assign6/front/server-api/api/exp11.ts @@ -0,0 +1,120 @@ +var express =require("express"); +const router = express(); + +//import { v4 as uuidv4 } from 'uuid'; + +const data =require( './data.json'); + +type object1 = { + + ID: string; + First__Name: string; + Middle__Name: string; + Last__Name: string; + Email: string; + Phone_Number: string; + Role: number; + Address: string; + DateTime:string; +} + +//SENDS ALL MEMBERS OF JSON DATA +router.get("/", (req, res) => { + + res.json(data); + +}); + +//SEND A SPECIFIC MEMEBER FROM JSON DATA +router.get("/:id", (req, res) => { + + let id = req.params.id; + if (data.some(data => data.ID === id)) { + res.status(200).json(data.filter(data => data.ID === id)) + } + else + res.status(400).json({ message: `No Member with Member ID ${id} Found` }); + +}) + +//ADD MEMBER TO THE EXISTING JSON +router.post("/", (req, res) => { + + const newValue: object1 = { + ID: req.body.ID, + First__Name: req.body.First__Name, + Middle__Name: req.body.Middle__Name, + Last__Name: req.body.Last__Name, + Email: req.body.Email, + Phone_Number: req.body.Phone_Number, + Role: req.body.Role, + Address: req.body.Address, + DateTime:req.body.DateTime + + } + if (!newValue.First__Name || !newValue.Last__Name || !newValue.Email || !newValue.Phone_Number || !newValue.Role || !newValue.Address) { + res.status(400).json({ message: `Give Correct Input` }) + } + else if (data.some(data => newValue.Phone_Number === data.Phone_Number)) { + res.status(400).json({ message: `User Already Exists` }) + } + + else { + data.push(newValue); + res.status(200).json({ message: `Member Successfully Added !`, "New Member": newValue}); + } + + + +}) + +//EDIT MEMBER + +router.put('/:id', (req, res) => { + let id = req.params.id; + if (data.some(data => data.ID === id)) { + + + data.forEach(object => { + if (object.ID === id) { + object.First__Name = req.body.First__Name ? req.body.First__Name : object.First__Name; + object.Middle__Name = req.body.Middle__Name ? req.body.Middle__Name : object.Middle__Name; + object.Last__Name = req.body.Last__Name ? req.body.Last__Name : object.Last__Name; + object.Email = req.body.Email ? req.body.Email : object.Email; + object.Phone_Number = req.body.Phone_Number ? req.body.Phone_Number : object.Phone_Number; + object.Role = req.body.Role ? req.body.Role : object.Role; + object.Address = req.body.Address ? req.body.Address : object.Address; + object.DateTime= req.body.DateTime ? req.body.DateTime : object.DateTime; + res.status(200).json({ message: 'Updated Successfully', updatedMembers: data }); + } + }) + } + else { + res.status(400).json({ message: `No Member with Member ID ${id} Found` }); + } +}) + +//DELETE MEMBER +router.delete('/:id', (req, res) => { + let id = req.params.id; + + if (data.some(data => data.ID === id)) { + + let index = 0; + + for (; index < data.length; index++) { + if (data[index].ID === id) + break; + } + data.splice(index, 1); + res.status(200).json({ message: `Deleted Member with ID: ${id}`, members: data }); + console.log(id); + } + else { + res.status(400).json({ message: `No Member with Member ID ${id} Found` }); + } + + +}) + +module.exports = router; \ No newline at end of file diff --git a/assign6/front/server-api/exp22.js b/assign6/front/server-api/exp22.js new file mode 100644 index 0000000..7d35859 --- /dev/null +++ b/assign6/front/server-api/exp22.js @@ -0,0 +1,21 @@ +var express = require("express"); +var app = express(); +const path=require('path'); +var cors = require('cors'); +app.use(cors()); +//Body Parser Middleware +app.use(express.json()); +app.use(express.urlencoded({ extended: false })); +var PORT = 9000; +// define a route handler for the default home page +//app.use('/',require('./index.html')) +app.use(express.static(path.join(__dirname,'/start'))); + +app.get('/',function(req,res){ + res.sendFile(path.join(__dirname,'/start/index1.html')) +}); +app.use('/exp11', require('./api/exp11.js')); +// start the Express server +app.listen(PORT, function () { + console.log("Server started at: " + PORT); +}); diff --git a/assign6/front/server-api/exp22.ts b/assign6/front/server-api/exp22.ts new file mode 100644 index 0000000..7dc2475 --- /dev/null +++ b/assign6/front/server-api/exp22.ts @@ -0,0 +1,24 @@ +var express =require("express"); +const app = express(); +const path=require('path'); +//var cors = require('cors'); + +//app.use(cors()); + +//Body Parser Middleware +app.use(express.json()); +app.use(express.urlencoded({extended:false})) + +const PORT = 9000; + +// define a route handler for the default home page +app.use(express.static(path.join(__dirname,'/start'))); +app.get('/',function(req,res){ + res.sendFile(path.join(__dirname,'/start/index1.html')) +}); +app.use('/exp11', require('./api/exp11.js')); + +// start the Express server +app.listen(PORT, () => { + console.log(`Server started at: ${PORT}`); +}); \ No newline at end of file diff --git a/assign6/front/server-api/start/crud.js b/assign6/front/server-api/start/crud.js new file mode 100644 index 0000000..c2fd855 --- /dev/null +++ b/assign6/front/server-api/start/crud.js @@ -0,0 +1,264 @@ +//Decorator Function +function FormatD(fun){ + return function(no){ + var id="DateTime"+no; + fun(id); + } +} +function FormatDate(id) { + + var dateTime = document.getElementById(id); + console.log(id); + let d=dateTime.innerHTML; + dateTime.innerHTML = new Date(d).toLocaleString(); + +} +var i=0; +// VARIABLE controlCreate TO CONTROL CREATE BUTTON WHEN TO PROVIDE INPUT FIELD +var controlCreate=1; + +//FUNCTION TO CREATE INPUT FIELD THROUGH WHICH WE CAN ADD ROWS TO TABLE +function createL(){ + + if (controlCreate==1){ + controlCreate=0; + var table1 = document.createElement("table"); + table1.setAttribute("id","taba"+i+"") + tr = table1.insertRow(-1); + tr.setAttribute('id','first'); + + var j=0; + var tabCell = tr.insertCell(-1); + tabCell.innerHTML = ""; + j+=1; + var tabCell = tr.insertCell(-1); + tabCell.innerHTML = ""; + j+=1; + var tabCell = tr.insertCell(-1); + tabCell.innerHTML = ""; + j+=1; + var tabCell = tr.insertCell(-1); + tabCell.innerHTML = ""; + j+=1; + var tabCell = tr.insertCell(-1); + tabCell.innerHTML = ""; + j+=1; + var tabCell = tr.insertCell(-1); + tabCell.innerHTML = ""; + j+=1; + var tabCell = tr.insertCell(-1); + tabCell.innerHTML = ""; + j+=1; + var tabCell = tr.insertCell(-1); + tabCell.innerHTML = ""; + j+=1; + var tabCell = tr.insertCell(-1); + tabCell.innerHTML = ""; + //butt0 to save the created row + var butt0 = document. createElement("button"); + //butt0.setAttribute('id', 'butt1'); + butt0.textContent = 'Save1'; + butt0.setAttribute("onclick","support()"); + + // to remove created row + var butt1= document. createElement("button"); + //butt1.setAttribute('id', ''); + butt1.textContent = 'remove'; + butt1.setAttribute("onclick","remove()"); + var tabCell = tr.insertCell(-1); + tabCell.appendChild(butt0); + tabCell.appendChild(butt1); + var divContainer = document.getElementById("showData"); + //divContainer.innerHTML = ""; + divContainer.appendChild(table1); + +}} + +//FUNCTION SUPPORT HELPS TO ADD NEWLY CREATED ROW IN TABLE +function support(){ + + let li=[]; + for (var j = 0; j < col.length; j++) { + var s=document.getElementById(j).value; + document.getElementById(j).value=""; + //if(j==4){s=+s}; + li.push(s); + } + + //validating ,the type of can be insert + const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; + var emailP= re.test(li[4]); + var phoneno = /^\d{10}$/; + var phoneP=phoneno.test(li[5]); + for(var i=0;i { + console.log(message) ; + }).catch(()=> {alert("Unexpected Error Occured !")}) + CreateTableFromJSON(); + //createRFT(.length-1,ListS,k); + // var DT=FormatD(FormatDate); + // let rowno = ListS.length; + // DT(rowno); + break; + } + } + console.log(li); + +} + +//TO REMOVE INPUT ROW AFTER YOU DON'T WANT TO INSERT ANY ROW +function remove() +{ + //var i = r.parentNode.parentNode.rowIndex; + document.getElementById("taba"+i+"").deleteRow(0); + controlCreate=1; + i+=1; +} + +//SELECT FUNCTION ALLOWS TO PROCEED FOR RUD AMOUNG CRUD OPERATIONS +function selectF(r){ + document.getElementById("retrive"+r+"").style.visibility ="visible"; + document.getElementById("update"+r+"").style.visibility ="visible"; + document.getElementById("delete"+r+"").style.visibility ="visible"; + document.getElementById("select"+r+"").style.visibility ="hidden"; + document.getElementById("row"+r+"").style.backgroundColor = "grey"; + + +} + +//CRUD RETRIVE FUNCTION TO RETRIVE PARTICULAR ROW INFORMATION +function retriveV(r){ + let ob=new changeL(); + ob.read(r); +} + +//CRUD DELETE FUNCTION +function deleteF(r){ + //var i = r.parentNode.parentNode.rowIndex; + //document.getElementById("tab").deleteRow(r); + let ob=new changeL(); + ob.delete(r); + +} + +// CRUD UPDATE FUNCTION ,AFTER YOU CAN CANCEL OR SAVE USING CANCEL AND SAVE FUNCTION +function update(no){ + let ob=new changeL(); + ob.update(no); +} +function saveU(no,id){ + + var ID=document.getElementById("ID_"+no).value; + var FirstName=document.getElementById("First_Name"+no).value; + var MiddleName=document.getElementById("Middle_Name"+no).value; + var LastName=document.getElementById("Last_Name"+no).value; + var email =document.getElementById("Email_"+no).value ; + var Phone_N =document.getElementById("Phone_Number_"+no).value ; + var role =document.getElementById("Role_"+no).value ; + var address =document.getElementById("Address_"+no).value ; + var date =document.getElementById("Date_"+no).value ; + + document.getElementById("ID"+no).innerHTML=ID; + document.getElementById("First__Name"+no).innerHTML=FirstName; + document.getElementById("Middle__Name"+no).innerHTML=MiddleName; + document.getElementById("Last__Name"+no).innerHTML=LastName; + document.getElementById("Email"+no).innerHTML=email ; + document.getElementById("Phone_Number"+no).innerHTML=Phone_N ; + document.getElementById("Role"+no).innerHTML=role ; + document.getElementById("Address"+no).innerHTML=address ; + document.getElementById("DateTime"+no).innerHTML=date; + var li=[ID,FirstName,MiddleName,LastName,email,Phone_N,role,address,date ]; + var object=new model1(li[0],li[1],li[2],li[3],li[4],li[5],li[6],li[7],li[8]); + editUser(id, object).then((message) => { + console.log(message) ; + }).catch(()=> {alert("Unexpected Error Occured !")}) + + document.getElementById("select"+no+"").style.visibility ="visible"; + document.getElementById("retrive"+no+"").style.visibility ="hidden"; + document.getElementById("update"+no+"").style.visibility ="hidden"; + document.getElementById("delete"+no+"").style.visibility ="hidden"; + document.getElementById("saveUpdate"+no).style.visibility="hidden"; + document.getElementById("cancelUpdate"+no).style.visibility="hidden"; + document.getElementById("row"+no+"").style.backgroundColor = "white"; + CreateTableFromJSON(); + +} +function cancelU(no){ + document.getElementById("ID"+no).innerHTML=li[0]; + document.getElementById("First__Name"+no).innerHTML=li[1]; + document.getElementById("Middle__Name"+no).innerHTML=li[2]; + document.getElementById("Last__Name"+no).innerHTML=li[3]; + document.getElementById("Email"+no).innerHTML=li[4] ; + document.getElementById("Phone_Number"+no).innerHTML=li[5] ; + document.getElementById("Role"+no).innerHTML=li[6]; + document.getElementById("Address"+no).innerHTML=li[7]; + document.getElementById("DateTime"+no).innerHTML=li[8]; + + document.getElementById("select"+no+"").style.visibility ="visible"; + document.getElementById("retrive"+no+"").style.visibility ="hidden"; + document.getElementById("update"+no+"").style.visibility ="hidden"; + document.getElementById("delete"+no+"").style.visibility ="hidden"; + document.getElementById("saveUpdate"+no).style.visibility="hidden"; + document.getElementById("cancelUpdate"+no).style.visibility="hidden"; + document.getElementById("row"+no+"").style.backgroundColor = "white"; +} diff --git a/assign6/front/server-api/start/index1.html b/assign6/front/server-api/start/index1.html new file mode 100644 index 0000000..1019a29 --- /dev/null +++ b/assign6/front/server-api/start/index1.html @@ -0,0 +1,45 @@ + + + + + + + +
+ +
+

+

+

+ + + + + + diff --git a/assign6/front/server-api/start/module.js b/assign6/front/server-api/start/module.js new file mode 100644 index 0000000..40357b5 --- /dev/null +++ b/assign6/front/server-api/start/module.js @@ -0,0 +1,233 @@ +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; + return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (_) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var Role; +(function (Role) { + Role[Role["SuperAdmin"] = 0] = "SuperAdmin"; + Role[Role["Admin"] = 1] = "Admin"; + Role[Role["Subscriber"] = 2] = "Subscriber"; +})(Role || (Role = {})); +; +var model1 = /** @class */ (function () { + function model1(ID, First__Name, Middle__Name, Last__Name, Email, Phone_Number, Role, Address, DateTime) { + this.ID = ID; + this.First__Name = First__Name; + this.Middle__Name = Middle__Name; + this.Last__Name = Last__Name; + this.Email = Email; + this.Phone_Number = Phone_Number; + this.Role = Role; + this.Address = Address; + this.DateTime = DateTime; + } + return model1; +}()); + +//API CALLS ===================================================================================== +function getUsers() { + return __awaiter(this, void 0, void 0, function* () { + let response = yield fetch('http://localhost:9000/exp11'); + let users = yield response.json(); + return users; // same as Promise.resolve(users) + }); +} +function deleteUser(id) { + return __awaiter(this, void 0, void 0, function* () { + let response = yield fetch(`http://localhost:9000/exp11/${id}`, { + method: 'DELETE' + }); + let data = yield response.json(); + return data; + }); +} +function editUser(id, object) { + console.log(object); + return __awaiter(this, void 0, void 0, function* () { + let response = yield fetch(`http://localhost:9000/exp11/${id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(object) + }); + let data = yield response.json(); + return data; + }); +} +function addUser(object) { + //console.log(object); + return __awaiter(this, void 0, void 0, function* () { + let response = yield fetch(`http://localhost:9000/exp11`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(object) + }); + let data = yield response.json(); + return data; + }); +} +//========================================================================================== +//API CALLS ====================================================================================== + +// function getUsers() { +// return __awaiter(this, void 0, void 0, function () { +// var response, users; +// return __generator(this, function (_a) { +// switch (_a.label) { +// case 0: return [4 /*yield*/, fetch('http://localhost:9000/exp22')]; +// case 1: +// response = _a.sent(); +// return [4 /*yield*/, response.json()]; +// case 2: +// users = _a.sent(); +// return [2 /*return*/, users]; // same as Promise.resolve(users) +// } +// }); +// }); +// } +// function deleteUser(id) { +// return __awaiter(this, void 0, void 0, function () { +// var response, data; +// return __generator(this, function (_a) { +// switch (_a.label) { +// case 0: return [4 /*yield*/, fetch("http://localhost:9000/exp11/" + id, { +// method: 'DELETE' +// })]; +// case 1: +// response = _a.sent(); +// return [4 /*yield*/, response.json()]; +// case 2: +// data = _a.sent(); +// return [2 /*return*/, data]; +// } +// }); +// }); +// } +// function editUser(id, object) { +// return __awaiter(this, void 0, void 0, function () { +// var response, data; +// return __generator(this, function (_a) { +// switch (_a.label) { +// case 0: return [4 /*yield*/, fetch("http://localhost:9000/exp11/" + id, { +// method: 'PUT', +// headers: { +// 'Content-Type': 'application/json' +// }, +// body: JSON.stringify(object) +// })]; +// case 1: +// response = _a.sent(); +// return [4 /*yield*/, response.json()]; +// case 2: +// data = _a.sent(); +// return [2 /*return*/, data]; +// } +// }); +// }); +// } +//################################################################ +var changeL = /** @class */ (function () { + function changeL() { + } + changeL.prototype.create = function (data) { + var row = new model1(data.ID, data.First__Name, data.Middle__Name, data.Last__Name, data.Email, data.Phone_Number, data.Role, data.Address, data.DateTime); + ListS.push(row); + }; + changeL.prototype.read = function (r) { + var li = []; + for (var j = 0; j < col.length; j++) { + var s = document.getElementById(col[j] + (r)).innerHTML; + //document.getElementById(j).value=""; + li.push(s); + } + var per = { 'ID': li[0], 'First__Name': li[1], 'Middle__Name': li[2], + 'Last__Name': li[3], + 'Email': li[4], + 'Phone_Number': li[5], + 'Role': li[6], + 'Address': li[7], + 'DateTime': li[8] }; + document.getElementById('retriveValue').innerHTML = JSON.stringify(per); + document.getElementById("select" + r + "").style.visibility = "visible"; + document.getElementById("retrive" + r + "").style.visibility = "hidden"; + document.getElementById("update" + r + "").style.visibility = "hidden"; + document.getElementById("delete" + r + "").style.visibility = "hidden"; + document.getElementById("row" + r + "").style.backgroundColor = "white"; + }; + changeL.prototype.update = function (no) { + document.getElementById("update" + no).style.visibility = "hidden"; + document.getElementById("saveUpdate" + no).style.visibility = "visible"; + document.getElementById("cancelUpdate" + no).style.visibility = "visible"; + var Id = document.getElementById("ID" + no); + var FirstName = document.getElementById("First__Name" + no); + var MiddleName = document.getElementById("Middle__Name" + no); + var LastName = document.getElementById("Last__Name" + no); + var email = document.getElementById("Email" + no); + var Phone_N = document.getElementById("Phone_Number" + no); + var role = document.getElementById("Role" + no); + var address = document.getElementById("Address" + no); + var date = document.getElementById("DateTime" + no); + var ID = Id.innerHTML; + var FName = FirstName.innerHTML; + var MName = MiddleName.innerHTML; + var LName = LastName.innerHTML; + var Email = email.innerHTML; + var Phone = Phone_N.innerHTML; + var Role = role.innerHTML; + var Address = address.innerHTML; + var Date = date.innerHTML; + helpCancel(ID, FName, MName, LName, Email, Phone, Role, Address, Date); + Id.innerHTML = ""; + FirstName.innerHTML = ""; + MiddleName.innerHTML = ""; + LastName.innerHTML = ""; + email.innerHTML = ""; + Phone_N.innerHTML = ""; + role.innerHTML = ""; + address.innerHTML = ""; + date.innerHTML = ""; + }; + changeL.prototype["delete"] = function (r) { + //var par = "" + (r - 1); + deleteUser(r).then(usersArray => {`deleted,${usersArray}`}) + .catch(()=> {alert("Unexpected delete Error Occured !")}) + CreateTableFromJSON() + //ListS.splice(r-1,1); + }; + return changeL; +}()); diff --git a/assign6/front/server-api/start/source.js b/assign6/front/server-api/start/source.js new file mode 100644 index 0000000..3f2aebc --- /dev/null +++ b/assign6/front/server-api/start/source.js @@ -0,0 +1,263 @@ +// +function delete_row(r)//delete function + { + var i = r.parentNode.parentNode.rowIndex; + document.getElementById("tab").deleteRow(i); + + } + var li; + function helpCancel(...args){ + li=args; + + } + + function edit_row(no)//edit function + { + + document.getElementById("edit_button"+no).style.visibility="hidden"; + document.getElementById("save_button"+no).style.visibility="visible"; + document.getElementById("cancel_button"+no).style.visibility="visible"; + + var FirstName=document.getElementById("First__Name"+no); + var MiddleName=document.getElementById("Middle__Name"+no); + var LastName=document.getElementById("Last__Name"+no); + var email =document.getElementById("Email"+no) ; + var Phone_N =document.getElementById("Phone_Number"+no) ; + var role =document.getElementById("Role"+no) ; + var address =document.getElementById("Address"+no) ; + + var FName=FirstName.innerHTML; + var MName=MiddleName.innerHTML; + var LName=LastName.innerHTML; + var Email=email.innerHTML; + var Phone=Phone_N.innerHTML; + var Role=role.innerHTML; + var Address=address.innerHTML; + + helpCancel(FName,MName,LName,Email,Phone,Role,Address); + + FirstName.innerHTML=""; + MiddleName.innerHTML=""; + LastName.innerHTML=""; + email.innerHTML=""; + Phone_N.innerHTML=""; + role.innerHTML=""; + address.innerHTML=""; + } + function save_row(no)//save function + { + //var no = r.parentNode.parentNode.rowIndex; + var FirstName=document.getElementById("First_Name"+no).value; + var MiddleName=document.getElementById("Middle_Name"+no).value; + var LastName=document.getElementById("Last_Name"+no).value; + var email =document.getElementById("Email_"+no).value ; + var Phone_N =document.getElementById("Phone_Number_"+no).value ; + var role =document.getElementById("Role_"+no).value ; + var address =document.getElementById("Address_"+no).value ; + + document.getElementById("First__Name"+no).innerHTML=FirstName; + document.getElementById("Middle__Name"+no).innerHTML=MiddleName; + document.getElementById("Last__Name"+no).innerHTML=LastName; + document.getElementById("Email"+no).innerHTML=email ; + document.getElementById("Phone_Number"+no).innerHTML=Phone_N ; + document.getElementById("Role"+no).innerHTML=role ; + document.getElementById("Address"+no).innerHTML=address ; + + document.getElementById("edit_button"+no).style.visibility="visible"; + document.getElementById("save_button"+no).style.visibility="hidden"; + document.getElementById("cancel_button"+no).style.visibility="hidden"; + } + function cancel_row(no){ //cancel function + + document.getElementById("First__Name"+no).innerHTML=li[0]; + document.getElementById("Middle__Name"+no).innerHTML=li[1]; + document.getElementById("Last__Name"+no).innerHTML=li[2]; + document.getElementById("Email"+no).innerHTML=li[3] ; + document.getElementById("Phone_Number"+no).innerHTML=li[4] ; + document.getElementById("Role"+no).innerHTML=li[5]; + document.getElementById("Address"+no).innerHTML=li[6]; + + document.getElementById("edit_button"+no).style.visibility="visible"; + document.getElementById("save_button"+no).style.visibility="hidden"; + document.getElementById("cancel_button"+no).style.visibility="hidden"; + } + //Function called by Load button CreateTableFromJSON + var col = []; //list to store values of header + var k; // to store table so that we can access table to add row + var tableSize; + function CreateTableFromJSON() { + controlCreate=1; + //Changing load button to Refresh button after clicking on it. + document.getElementById("wer").innerHTML="Refresh Data"; + //obects + let ObjectList = []; + getUsers() + .then(usersArray => { + //creating object of crud with generic type of user + //console.log(userArray); + usersArray.forEach(function (object) { ObjectList.push(object); }); //pushing objects obtained via api into array + + // Promise.reso + + + let myBooks=ObjectList; + // tableSize=ObjectList.length(); + // console.log(tableSize); + // EXTRACT VALUE FOR HTML TABLE HEADER. + console.log(ObjectList); + //let myBooks=obj + for (var i = 0; i < myBooks.length; i++) { + for (var key in myBooks[i]) { + if (col.indexOf(key) === -1) { + col.push(key); + } + } + } + + // CREATE DYNAMIC TABLE. + + var table = document.createElement("table"); + table.setAttribute("id","tab") + //CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE. + + var tr = table.insertRow(-1); // TABLE ROW. + + for (var i = 0; i < col.length; i++) { + var th = document.createElement("th"); // TABLE HEADER. + th.innerHTML = col[i]; + tr.appendChild(th); + } + var th = document.createElement("th"); //LAST COLUMN FOR EDIT AND DELETE BUTTON + tr.appendChild(th); + //************ */ + var th = document.createElement("th"); // NEXT TO LAST COLUMN FOR SELECT BUTTON + tr.appendChild(th); + th.innerHTML="select row to perform RUD operations"; + + // ADD JSON DATA TO THE TABLE AS ROWS. + for (var i = 0; i < myBooks.length; i++) { + createRFT(i,myBooks,table) //function create rows for each item in ListS(object) for table + + } + //CREATING CRUD create BUTTON + var butt1 = document. createElement("button"); + butt1.setAttribute('id', 'butt1'); + butt1.textContent = 'Create'; //Create + butt1.setAttribute("onclick","createL()"); + + // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. + var divContainer = document.getElementById("showData"); + divContainer.innerHTML = ""; + k=table; + divContainer.appendChild(table); + //Using Decorator Function + // for (var i = 0; i < myBooks.length; i++) { ////commenting for now + // var DT=FormatD(FormatDate); + + // DT(i+1);} + + var divCont = document.getElementById("showManupulate"); + divCont.innerHTML = ""; + + divCont.appendChild(butt1); + + }) + .catch(()=> {alert("Unexpected Error Occured !")}) } + + //FUNCTION TO ADD ROW IN TABLE + function createRFT(i,myBooks,table){ + tr = table.insertRow(-1); + tr.setAttribute("id","row"+(i+1)+"") + + for (var j = 0; j < col.length; j++) { + var tabCell = tr.insertCell(-1); + tabCell.setAttribute("id",col[j]+(i+1)) + tabCell.innerHTML = myBooks[i][col[j]]; + } + + //adding EDIT button and setting its attribute + var tabCell = tr.insertCell(-1); + var button1= document. createElement("button"); + button1.setAttribute('id', "edit_button"+(i+1)); + button1.textContent = 'Edit'; + ////adding funtionality to EDIT button + button1.setAttribute("onclick","edit_row("+(i+1)+")"); + tabCell.appendChild(button1); + //Adding save button which is visible after clicking on edit button + + var button3= document.createElement("button"); + button3.setAttribute('id', "save_button"+(i+1)); + button3.textContent = 'Save'; + button3.style.visibility = "hidden"; + button3.setAttribute("onclick","save_row("+(i+1)+")"); + tabCell.appendChild(button3); + + //Adding cancel button which is visible after clicking on edit button + + var button4= document.createElement("button"); + button4.setAttribute('id', "cancel_button"+(i+1)); + button4.textContent = 'cancel'; + button4.style.visibility = "hidden"; + button4.setAttribute("onclick","cancel_row("+(i+1)+")"); + + tabCell.appendChild(button4); + + //adding delete button + var button2 = document. createElement("button"); + + button2.setAttribute('id', 'btni'); + button2.textContent = 'Delete'; + button2.setAttribute("onclick","delete_row(this)"); + + tabCell.appendChild(button2) + //*********************** */ + var tabCell = tr.insertCell(-1); + var Select1= document. createElement("button"); + Select1.setAttribute('id', "select"+(i+1)); + Select1.textContent = 'Select'; + ////adding funtionality to EDIT button + Select1.setAttribute("onclick","selectF("+(i+1)+")"); + tabCell.appendChild(Select1); + + //CRUD operations button + var butt2 = document. createElement("button"); + butt2.setAttribute('id', 'retrive'+(i+1)); + butt2.textContent = 'Read'; //Read + butt2.setAttribute("onclick","retriveV("+(i+1)+")"); + butt2.style.visibility = "hidden"; + tabCell.appendChild(butt2); + + var butt3 = document. createElement("button"); + butt3.setAttribute('id', 'update'+(i+1)); + butt3.textContent = 'Update'; // Update + butt3.style.visibility = "hidden"; + tabCell.appendChild(butt3); + butt3.setAttribute("onclick",`update(${i+1})`); + + var button3= document.createElement("button"); + button3.setAttribute('id', "saveUpdate"+(i+1)); + button3.textContent = 'SaveU'; + button3.style.visibility = "hidden"; + button3.setAttribute("onclick",`saveU(${i+1},${myBooks[i].ID})`); + tabCell.appendChild(button3); + + //Adding cancel button which is visible after clicking on edit button + + var button4= document.createElement("button"); + button4.setAttribute('id', "cancelUpdate"+(i+1)); + button4.textContent = 'cancelU'; + button4.style.visibility = "hidden"; + button4.setAttribute("onclick",`cancelU(${i+1})`); + tabCell.appendChild(button4); + + + var butt4 = document. createElement("button"); + butt4.setAttribute('id', 'delete'+(i+1)); + butt4.textContent = 'Delete'; //Delete + butt4.style.visibility = "hidden"; + tabCell.appendChild(butt4); + butt4.setAttribute("onclick",`deleteF(${myBooks[i].ID})`); + + + } + \ No newline at end of file