diff options
Diffstat (limited to 'interface')
| -rw-r--r-- | interface/controllers/citizens.controller.js | 13 | ||||
| -rw-r--r-- | interface/controllers/district.controller.js | 12 | ||||
| -rw-r--r-- | interface/controllers/mandal.controller.js | 8 | ||||
| -rw-r--r-- | interface/controllers/state.controller.js | 7 | ||||
| -rw-r--r-- | interface/controllers/village.controller.js | 10 | ||||
| -rw-r--r-- | interface/public/adduser.js | 291 | ||||
| -rw-r--r-- | interface/public/citizens.js | 95 | ||||
| -rw-r--r-- | interface/routes/api/citizens.js | 175 | ||||
| -rw-r--r-- | interface/routes/api/geography.js | 21 | ||||
| -rw-r--r-- | interface/routes/api/index.js | 2 | ||||
| -rw-r--r-- | interface/routes/index.js | 14 | ||||
| -rw-r--r-- | interface/views/adduser.ejs | 250 | ||||
| -rw-r--r-- | interface/views/citizens.ejs | 164 | ||||
| -rw-r--r-- | interface/views/partials/navbar.ejs | 2 |
14 files changed, 669 insertions, 395 deletions
diff --git a/interface/controllers/citizens.controller.js b/interface/controllers/citizens.controller.js index 0e45a13..3bec103 100644 --- a/interface/controllers/citizens.controller.js +++ b/interface/controllers/citizens.controller.js @@ -5,23 +5,26 @@ const { sequelize } = require("../models"); // Retrieve all citizens from the database. Limit the number of citizens returned to 10. -exports.findXCitizens = () => { - query = `select c.citizen_id, c.first_name, c.last_name, c.address, c.mobile_num, c.dob, c.gender, c.marital_status, c.village_id, v.village_name +exports.findXCitizens = (limit, offset) => { + const query = `select c.citizen_id, c.first_name, c.last_name, c.address, c.mobile_num, c.dob, c.gender, c.marital_status, c.village_id, v.village_name from citizens c join village_master v on c.village_id = v.village_id - order by citizen_id limit 10;`; + order by citizen_id limit ${limit} offset ${offset};`; return sequelize.query(query, { type: QueryTypes.SELECT }) }; +exports.getCountOfCitizens = () => { + const query = `select count(*) as count from citizens;`; + return sequelize.query(query, { type: QueryTypes.SELECT }) +} -exports.deleteCitizenbyId = (citizen_id) =>{ +exports.deleteCitizenbyId = (citizen_id) =>{ return citizens.destroy({ where: { citizen_id } }) - }; exports.editCitizen = (citizen_id, address, mobile_num, dob, marital_status) => { diff --git a/interface/controllers/district.controller.js b/interface/controllers/district.controller.js index 5b21530..468d5fb 100644 --- a/interface/controllers/district.controller.js +++ b/interface/controllers/district.controller.js @@ -10,10 +10,10 @@ exports.allDistricts = () => { exports.allDistrictsByStateId = (state_id) => { const query =`SELECT * FROM district_master WHERE state_id = ${state_id}`; - return db.sequelize.query(query, { type: db.sequelize.QueryTypes.SELECT }); + return db.sequelize.query(query, { type: db.sequelize.QueryTypes.SELECT }).then(districts => { + if (districts) { + return districts; + } + return null; + }); }; - - - - - diff --git a/interface/controllers/mandal.controller.js b/interface/controllers/mandal.controller.js index 43842fe..5e4d287 100644 --- a/interface/controllers/mandal.controller.js +++ b/interface/controllers/mandal.controller.js @@ -11,6 +11,10 @@ exports.allMandals = () => { exports.allMandalsByDistrictId = (district_id) => { const query =`SELECT * FROM mandal_master WHERE district_id = ${district_id}`; - return db.sequelize.query(query, { type: db.sequelize.QueryTypes.SELECT }); - + return db.sequelize.query(query, { type: db.sequelize.QueryTypes.SELECT }).then(mandals => { + if (mandals) { + return mandals; + } + return null; + }); }; diff --git a/interface/controllers/state.controller.js b/interface/controllers/state.controller.js index 1a3a4ed..95bff0d 100644 --- a/interface/controllers/state.controller.js +++ b/interface/controllers/state.controller.js @@ -4,10 +4,5 @@ const state = db.state_master; // function to get all states exports.allStates = () => { const query = "SELECT * FROM state_master"; - return db.sequelize.query(query, { type: db.sequelize.QueryTypes.SELECT }); - + return db.sequelize.query(query, { type: db.sequelize.QueryTypes.SELECT }); }; - - - - diff --git a/interface/controllers/village.controller.js b/interface/controllers/village.controller.js index 0a488d4..95372fa 100644 --- a/interface/controllers/village.controller.js +++ b/interface/controllers/village.controller.js @@ -11,8 +11,10 @@ exports.allVillages = () => { exports.allVillagesByMandalId = (mandal_id) => { const query =`SELECT * FROM village_master WHERE mandal_id = ${mandal_id}`; - return db.sequelize.query(query, { type: db.sequelize.QueryTypes.SELECT }); - + return db.sequelize.query(query, { type: db.sequelize.QueryTypes.SELECT }).then(villages => { + if (villages) { + return villages; + } + return null; + }); }; - - diff --git a/interface/public/adduser.js b/interface/public/adduser.js new file mode 100644 index 0000000..bee96f6 --- /dev/null +++ b/interface/public/adduser.js @@ -0,0 +1,291 @@ +$("#citizenForm").form({ + on: "blur", + inline: true, + fields: { + citizen_id: { + identifier: "citizen_id", + rules: [ + { + type: "empty", + prompt: "Please enter a citizen id", + }, + ], + }, + first_name: { + identifier: "first_name", + rules: [ + { + type: "empty", + prompt: "Please enter a first name", + }, + ], + }, + last_name: { + identifier: "last_name", + rules: [ + { + type: "empty", + prompt: "Please enter a last name", + }, + ], + }, + address: { + identifier: "address", + rules: [ + { + type: "empty", + prompt: "Please enter a address", + }, + ], + }, + mobile_number: { + identifier: "mobile_number", + rules: [ + { + type: "empty", + prompt: "Please enter a mobile number", + }, + { + type: "number", + prompt: "Please enter a valid mobile number", + }, + { + type: "minLength[10]", + prompt: "Please enter a valid mobile number", + }, + ], + }, + dob: { + identifier: "dob", + rules: [ + { + type: "empty", + prompt: "Please enter a date of birth", + }, + ], + }, + state: { + identifier: "state", + rules: [ + { + type: "empty", + prompt: "Please select a state", + }, + ], + }, + district: { + identifier: "district", + rules: [ + { + type: "empty", + prompt: "Please select a district", + }, + ], + }, + mandal: { + identifier: "mandal", + rules: [ + { + type: "empty", + prompt: "Please select a mandal", + }, + ], + }, + village: { + identifier: "village", + rules: [ + { + type: "empty", + prompt: "Please select a village", + }, + ], + }, + }, +}); + +//gereate random data with Upper case letter with seven digit number +function generateCitizenId() { + var text = ""; + var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; + var possible2 = "0123456789"; + text += possible.charAt(Math.floor(Math.random() * possible.length)); + for (var i = 0; i < 7; i++) + text += possible2.charAt(Math.floor(Math.random() * possible2.length)); + + //validate user name with database + fetch("/api/citizens/validate", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ citizen_id: text }), + }).then((res) => { + if (res.status == 200) { + document.getElementById("citizen_id").value = text; + } else { + generateCitizenId(); + } + }); +} + +generateCitizenId(); + +//get all states +fetch("/api/geography/states", { + method: "GET", + headers: { "Content-Type": "application/json" }, +}) + .then((res) => res.json()) + .then((data) => { + var state = document.getElementById("state"); + // set the first option to be the default disabled option + var disabledOption = document.createElement("option"); + disabledOption.text = "Select State"; + disabledOption.value = "undefined"; + disabledOption.disabled = true; + disabledOption.selected = true; + $(state).dropdown("set selected", disabledOption.value); + + state.add(disabledOption); + + for (var i = 0; i < data.length; i++) { + var option = document.createElement("option"); + option.value = data[i].state_id; + option.text = data[i].state_name; + state.add(option); + } + }); + +//get all districts +document.getElementById("state").addEventListener("change", function () { + var state_id = document.getElementById("state").value; + fetch("/api/geography/districts/" + state_id, { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.json()) + .then((data) => { + var district = document.getElementById("district"); + district.innerHTML = ""; + var disabledOption = document.createElement("option"); + disabledOption.text = "Select District"; + disabledOption.value = "undefined"; + disabledOption.disabled = true; + disabledOption.selected = true; + $(district).dropdown("set selected", disabledOption.value); + + district.add(disabledOption); + + for (var i = 0; i < data.length; i++) { + var option = document.createElement("option"); + option.value = data[i].district_id; + option.text = data[i].district_name; + district.add(option); + } + }).catch((err) => { + alert(err); + }); +}); + +//get all mandals +document.getElementById("district").addEventListener("change", function () { + var district_id = document.getElementById("district").value; + fetch("/api/geography/mandals/" + district_id, { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.json()) + .then((data) => { + var mandal = document.getElementById("mandal"); + mandal.innerHTML = ""; + var disabledOption = document.createElement("option"); + disabledOption.text = "Select Mandal"; + disabledOption.value = "undefined"; + disabledOption.disabled = true; + disabledOption.selected = true; + $(mandal).dropdown("set selected", disabledOption.value); + mandal.add(disabledOption); + + for (var i = 0; i < data.length; i++) { + var option = document.createElement("option"); + option.value = data[i].mandal_id; + option.text = data[i].mandal_name; + mandal.add(option); + } + }).catch((err) => { + alert(err); + }); +}); + +//get all villages +document.getElementById("mandal").addEventListener("change", function () { + var mandal_id = document.getElementById("mandal").value; + fetch("/api/geography/villages/" + mandal_id, { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.json()) + .then((data) => { + var village = document.getElementById("village"); + village.innerHTML = ""; + var disabledOption = document.createElement("option"); + disabledOption.text = "Select Village"; + disabledOption.value = "undefined"; + disabledOption.disabled = true; + disabledOption.selected = true; + $(village).dropdown("set selected", disabledOption.value); + village.add(disabledOption); + + for (var i = 0; i < data.length; i++) { + var option = document.createElement("option"); + option.value = data[i].village_id; + option.text = data[i].village_name; + village.add(option); + } + }).catch((err) => { + alert(err); + }); +}); + +function addCitizen(event) { + event.preventDefault(); + if ($("#citizenForm form").form("is valid")) { + var formData = { + citizen_id: document.getElementById("citizen_id").value, + first_name: document.getElementById("first_name").value, + middle_name: document.getElementById("middle_name").value, + last_name: document.getElementById("last_name").value, + address: document.getElementById("address").value, + mobile_num: '+91-' + document.getElementById("mobile_number").value, + dob: document.getElementById("dob").value, + gender: document.getElementById("gender").value, + marital_status: document.getElementById("marital_status").value, + disabled: document.getElementById("disabled").value, + disbaled_percentage: document.getElementById("disbaled_percentage").value ?? 0, + caste: document.getElementById("caste").value, + village_id: document.getElementById("village").value, + }; + + fetch("/api/citizens/addnewcitizen", { + method: "POST", + body: JSON.stringify(formData), + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.json()) + .then((data) => { + if (data.message == "Citizen added successfully") { + window.location.href = "/citizens"; + } else { + console.log(data.message); + alert(data.message); + } + }); + } +} + +document.getElementById("add_citizen").addEventListener("click", addCitizen); +document.getElementById("disabled").addEventListener("change", function () { + if (document.getElementById("disabled").value == "yes") { + document.getElementById("disbaled_percentage").disabled = false; + } else { + document.getElementById("disbaled_percentage").disabled = true; + } +}); diff --git a/interface/public/citizens.js b/interface/public/citizens.js index 540bf72..10a226f 100644 --- a/interface/public/citizens.js +++ b/interface/public/citizens.js @@ -7,6 +7,93 @@ $(".ui.form").form({ }, }); +// Get current page and limit query parameter +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); +const page = urlParams.get("page") || 1; +const limit = urlParams.get("limit") || 10; +const numberOfPages = Math.ceil(count / limit); +const pagination = $(".pagination"); +const pageLeft = $('#pageLeft'); +const pageRight = $('#pageRight'); +if (page > 1) { + pageLeft.removeClass("disabled"); + pageLeft.attr("href", `/citizens?page=${page - 1}&limit=${limit}`); +} else { + pageLeft.addClass("disabled"); +} +if (page < numberOfPages) { + pageRight.removeClass("disabled"); + pageRight.attr("href", `/citizens?page=${page + 1}&limit=${limit}`); +} else { + pageRight.addClass("disabled"); +} + +function redirectToLimit(limit) { + window.location.href = `/citizens?page=1&limit=${limit}`; +} + +addPageNumbers(numberOfPages); + +function addPageNumbers(numberOfPages) { + // Add page numbers from current page to 2 pages before and 2 pages after, if there are more than 5 pages + if (numberOfPages > 5) { + let startingPoint = page - 2; + if (page < 3) { + startingPoint = 1; + } else if (page > numberOfPages - 2) { + startingPoint = numberOfPages - 4; + } else { + startingPoint = page - 2; + } + for (let i = startingPoint; i < startingPoint + 5; i++) { + const linkElement = document.createElement("a"); + linkElement.innerHTML = i; + linkElement.setAttribute("href", `/citizens?page=${i}&limit=${limit}`); + linkElement.setAttribute("id", `page${i}`); + linkElement.classList.add("item"); + pageRight.before(linkElement); + } + // add dots + const dots = document.createElement("a"); + dots.innerHTML = "..."; + dots.classList.add("item"); + pageRight.before(dots); + + // add first page if page > 3 + if (page > 3) { + const firstPage = document.createElement("a"); + firstPage.innerHTML = 1; + firstPage.setAttribute("href", `/citizens?page=1&limit=${limit}`); + firstPage.setAttribute("id", `page1`); + firstPage.classList.add("item"); + pageRight.before(firstPage); + } + + // add last page + if (page != numberOfPages) { + const lastPage = document.createElement("a"); + lastPage.innerHTML = numberOfPages; + lastPage.setAttribute("href", `/citizens?page=${numberOfPages}&limit=${limit}`); + lastPage.classList.add("item"); + pageRight.before(lastPage); + } + } else { + // add page numbers + for (let i = 1; i <= numberOfPages; i++) { + // Insert before pageRight + const linkElement = document.createElement("a"); + linkElement.innerHTML = i; + linkElement.setAttribute("href", `/citizens?page=${i}&limit=${limit}`); + linkElement.setAttribute("id", `page${i}`); + linkElement.classList.add("item"); + pageRight.before(linkElement); + } + } + const currentPageElement = document.getElementById(`page${page}`); + currentPageElement.classList.add("active"); +} + function editCitizensRecord(citizen) { citizen = JSON.parse(citizen); $(".edit.modal").modal("show"); @@ -14,7 +101,7 @@ function editCitizensRecord(citizen) { $("#mobile_number").val(citizen.mobile_num); $("#dob").val(citizen.dob); $("#marital_status").val(citizen.marital_status); - $('#marital_status').dropdown('set selected', citizen.marital_status); + $("#marital_status").dropdown("set selected", citizen.marital_status); $("#citizen_id").html(citizen.citizen_id); } @@ -51,10 +138,6 @@ function deleteCitizenRecord(citizen) { success: function (response) { console.log(response); location.reload(); - } + }, }); - - } - - diff --git a/interface/routes/api/citizens.js b/interface/routes/api/citizens.js index 40e0c16..c6c6425 100644 --- a/interface/routes/api/citizens.js +++ b/interface/routes/api/citizens.js @@ -3,78 +3,119 @@ const router = express.Router(); const citizensController = require("../../controllers/citizens.controller"); -router.post('/edit', (req, res) => { - const { citizen_id, address, mobile_num, dob, marital_status } = req.body; - if (!citizen_id || !address || !mobile_num || !dob || !marital_status) { - res.status(400).json({ message: "Please fill in all fields" }); - } else { - citizensController.editCitizen(citizen_id, address, mobile_num, dob, marital_status) - .then(() => { - res.status(200).json({ message: "Citizen updated successfully" }); - }) - .catch((err) => { - res.status(400).json({ message: err }); - }); - } +router.get('/count', (req, res) => { + citizensController.getCountOfCitizens().then(count => { + res.json({ count }); + }); }); - -router.post('/delete', (req, res) => { - const { citizen_id } = req.body; - if (!citizen_id) { - res.status(400).json({ message: "Please fill in all fields" }); - } else { - citizensController.deleteCitizenbyId(citizen_id) - .then(() => { - res.status(200).json({ message: "Citizen deleted successfully" }); - }) - .catch((err) => { - res.status(400).json({ message: err }); - }); - } -} ); - - -router.post('/validate', (req, res) => { - const { citizen_id } = req.body; - if (!citizen_id) { - res.status(400).json({ message: "Please fill in all fields" }); - } else { - citizensController.checkCitizenId(citizen_id) - .then(( isValid ) => { - res.status(200).json({ isValid: !isValid }); - } - ) - .catch((err) => { - res.status(400).json({ message: err }); - }); - } +router.post("/edit", (req, res) => { + const { citizen_id, address, mobile_num, dob, marital_status } = req.body; + if (!citizen_id || !address || !mobile_num || !dob || !marital_status) { + res.status(400).json({ message: "Please fill in all fields" }); + } else { + citizensController + .editCitizen(citizen_id, address, mobile_num, dob, marital_status) + .then(() => { + res.status(200).json({ message: "Citizen updated successfully" }); + }) + .catch((err) => { + res.status(400).json({ message: err }); + }); + } }); - -router.post('/addnewcitizen', (req, res) => { - const { citizen_id, first_name, last_name, address, mobile_num, dob, gender, marital_status, disabled, disbaled_percentage, caste, village_id} = req.body; - - if(!citizen_id && !first_name && !last_name && !address && !mobile_num && !dob && !gender && !marital_status && !disabled && !caste && !village_id){ - - res.status(400).json({ message: "Please fill in all fields" }); - - }else{ - citizensController.addNewCitizen(citizen_id, first_name, last_name, address, mobile_num, dob, gender, marital_status, disabled, disbaled_percentage, caste, village_id).then(() => { - res.status(200).json({ message: "Citizen added successfully" }); - }).catch((err) => { - res.status(400).json({ message: err }); - }); - } - +router.post("/delete", (req, res) => { + const { citizen_id } = req.body; + if (!citizen_id) { + res.status(400).json({ message: "Please fill in all fields" }); + } else { + citizensController + .deleteCitizenbyId(citizen_id) + .then(() => { + res.status(200).json({ message: "Citizen deleted successfully" }); + }) + .catch((err) => { + res.status(400).json({ message: err }); + }); + } }); +router.post("/validate", (req, res) => { + const { citizen_id } = req.body; + if (!citizen_id) { + res.status(400).json({ message: "Please fill in all fields" }); + } else { + citizensController + .checkCitizenId(citizen_id) + .then((isValid) => { + res.status(200).json({ isValid: !isValid }); + }) + .catch((err) => { + res.status(400).json({ message: err }); + }); + } +}); +router.post("/addnewcitizen", (req, res) => { + let { + citizen_id, + first_name, + middle_name, + last_name, + address, + mobile_num, + dob, + gender, + marital_status, + disabled, + disbaled_percentage, + caste, + village_id, + } = req.body; + + if (!disbaled_percentage) { + disbaled_percentage = 0.0; + } + + if ( + !citizen_id || + !first_name || + !last_name || + !address || + !mobile_num || + !dob || + !gender || + !marital_status || + !disabled || + !caste || + !village_id + ) { + res.status(400).json({ message: "Please fill in all fields" }); + } else { + citizensController + .addNewCitizen( + citizen_id, + first_name, + last_name, + address, + mobile_num, + dob, + gender, + marital_status, + disabled, + disbaled_percentage, + caste, + village_id + ) + .then(() => { + res.status(200).json({ message: "Citizen added successfully" }); + }) + .catch((err) => { + console.log(err); + res.status(400).json({ message: err }); + }); + } +}); - - - - - - -module.exports = router;
\ No newline at end of file +module.exports = router; diff --git a/interface/routes/api/geography.js b/interface/routes/api/geography.js index 4667db8..58e3b84 100644 --- a/interface/routes/api/geography.js +++ b/interface/routes/api/geography.js @@ -9,27 +9,38 @@ const districtController = require("../../controllers/district.controller"); router.get("/states", (req, res) => { stateController.allStates().then(states => { res.send(states); - }); - + }); }); router.get("/districts/:state_id", (req, res) => { const state_id = req.params.state_id; districtController.allDistrictsByStateId(state_id).then(districts => { - res.send(districts); + if (districts) { + res.send(districts); + } else { + res.status(400).json({ message: "No districts found" }); + } }); }); router.get("/mandals/:district_id", (req, res) => { const district_id = req.params.district_id; mandalController.allMandalsByDistrictId(district_id).then(mandals => { - res.send(mandals); + if (mandals) { + res.send(mandals); + } else { + res.status(400).json({ message: "No mandals found" }); + } }); }); router.get("/villages/:mandal_id", (req, res) => { const mandal_id = req.params.mandal_id; villageController.allVillagesByMandalId(mandal_id).then(villages => { - res.send(villages); + if (villages) { + res.send(villages); + } else { + res.status(400).json({ message: "No villages found" }); + } }); }); diff --git a/interface/routes/api/index.js b/interface/routes/api/index.js index f21720b..b8ae7ca 100644 --- a/interface/routes/api/index.js +++ b/interface/routes/api/index.js @@ -64,7 +64,7 @@ router.post("/login", (req, res) => { payload, process.env.JWT_SECRET, { - expiresIn: 3600, + expiresIn: 60 * 60 * 24 * 7, }, (err, token) => { if (err) throw err; diff --git a/interface/routes/index.js b/interface/routes/index.js index b99abbf..c75c2c0 100644 --- a/interface/routes/index.js +++ b/interface/routes/index.js @@ -22,11 +22,17 @@ router.get('/', (req, res) => { }); router.get("/citizens", (req, res) => { + // Get the limit and offset from the query string + const limit = parseInt(req.query.limit, 10) || 10; + const page = req.query.page ? (req.query.page - 1) * limit : 0; + // Get the citizens from the database - citizensController.findXCitizens().then(citizens => { - res.render("citizens", { - citizens: citizens, - title: "Citizens Data" + Promise.all([citizensController.findXCitizens(limit, page), citizensController.getCountOfCitizens()]).then(results => { + const [citizens, count] = results; + res.render('citizens', { + title: 'Citizens', + citizens, + count: count[0].count, }); }); }); diff --git a/interface/views/adduser.ejs b/interface/views/adduser.ejs index 5b21d72..8d1b4d0 100644 --- a/interface/views/adduser.ejs +++ b/interface/views/adduser.ejs @@ -3,17 +3,11 @@ <head> <%- include('partials/head') %> </head> - <body> - <%- include('partials/navbar') %> - - - <div class="ui container segment" > - <h1 style="text-align: center;">Add New Citizen</h1> - - <form class="ui form" method="post" onsubmit="addCitizen(event)" > + <h1 style="text-align: center;">Add New Citizen</h1> + <form class="ui form" method="post" onsubmit="addCitizen(event)" id="citizenForm"> <div class="field"> <label>Citizen ID</label> <input @@ -34,6 +28,15 @@ id="first_name"> </div> <div class="field"> + <label>Middle Name</label> + <input + placeholder="Middle Name" + name="middle_name" + type="text" + autocomplete="off" + id="middle_name"> + </div> + <div class="field"> <label>Last Name</label> <input placeholder="Last Name" @@ -66,16 +69,23 @@ <input type="date" name="dob" placeholder="DOB" id="dob" /> </div> <div class="field"> + <label>Gender</label> + <select class="ui dropdown" id="gender"> + <option value="M" selected>Male</option> + <option value="F">Female</option> + </select> + </div> + <div class="field"> <label>Marital Status</label> <select class="ui dropdown" id="marital_status"> - <option value="M">Married</option> + <option value="M" selected>Married</option> <option value="UM">Unmarried</option> </select> </div> <div class = "field"> <label>Disabled</label> <select class="ui dropdown" id="disabled"> - <option value="Yes">Yes</option> + <option value="Yes" selected>Yes</option> <option value="No">No</option> </select> </div> @@ -91,7 +101,7 @@ <div class="field"> <label>Caste</label> <select class="ui dropdown" id="caste"> - <option value="OC" >OC</option> + <option value="OC" selected>OC</option> <option value="SC">SC</option> <option value="ST">ST</option> <option value="BC">BC</option> @@ -128,222 +138,6 @@ </body> <%- include('partials/scripts') %> - <script> - //gereate random data with Upper case letter with seven digit number - function generateCitizenId() { - var text = ""; - var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; - var possible2 = "0123456789"; - text += possible.charAt(Math.floor(Math.random() * possible.length)); - for (var i = 0; i < 7; i++) - - text += possible2.charAt(Math.floor(Math.random() * possible2.length)); - - //validate user name with database - fetch("/api/citizens/validate", { - method: "POST", - headers: {'Content-Type': 'application/json'}, - body: JSON.stringify({citizen_id: text}) - }).then(res => { - if(res.status == 200){ - document.getElementById("citizen_id").value = text; - } - else{ - generateCitizenId(); - } - }); - - } - - generateCitizenId(); - - //get all states - fetch("/api/geography/states", { - method: "GET", - headers: {'Content-Type': 'application/json'} - }).then(res => res.json()).then(data => { - var state = document.getElementById("state"); - // set the first option to be the default disabled option - var disabledOption = document.createElement("option"); - disabledOption.text = "Select State"; - disabledOption.value = "undefined"; - disabledOption.disabled = true; - disabledOption.selected = true; - $(state).dropdown('set selected', disabledOption.value); - - state.add(disabledOption); - - for(var i = 0; i < data.length; i++){ - var option = document.createElement("option"); - option.value = data[i].state_id; - option.text = data[i].state_name; - state.add(option); - } - }); - - //get all districts - document.getElementById("state").addEventListener("change", function(){ - var state_id = document.getElementById("state").value; - fetch("/api/geography/districts/" + state_id, { - method: "GET", - headers: {'Content-Type': 'application/json'} - }).then(res => res.json()).then(data => { - var district = document.getElementById("district"); - district.innerHTML = ""; - var disabledOption = document.createElement("option"); - disabledOption.text = "Select District"; - disabledOption.value = "undefined"; - disabledOption.disabled = true; - disabledOption.selected = true; - $(district).dropdown('set selected', disabledOption.value); - - district.add(disabledOption); - - for(var i = 0; i < data.length; i++){ - var option = document.createElement("option"); - option.value = data[i].district_id; - option.text = data[i].district_name; - district.add(option); - } - }); - }); - - //get all mandals - document.getElementById("district").addEventListener("change", function(){ - var district_id = document.getElementById("district").value; - fetch("/api/geography/mandals/" + district_id, { - method: "GET", - headers: {'Content-Type': 'application/json'} - }).then(res => res.json()).then(data => { - var mandal = document.getElementById("mandal"); - mandal.innerHTML = ""; - var disabledOption = document.createElement("option"); - disabledOption.text = "Select Mandal"; - disabledOption.value = "undefined"; - disabledOption.disabled = true; - disabledOption.selected = true; - $(mandal).dropdown('set selected', disabledOption.value); - mandal.add(disabledOption); - - - for(var i = 0; i < data.length; i++){ - var option = document.createElement("option"); - option.value = data[i].mandal_id; - option.text = data[i].mandal_name; - mandal.add(option); - } - }); - }); - - //get all villages - document.getElementById("mandal").addEventListener("change", function(){ - var mandal_id = document.getElementById("mandal").value; - fetch("/api/geography/villages/" + mandal_id, { - method: "GET", - headers: {'Content-Type': 'application/json'} - }).then(res => res.json()).then(data => { - var village = document.getElementById("village"); - village.innerHTML = ""; - var disabledOption = document.createElement("option"); - disabledOption.text = "Select Village"; - disabledOption.value = "undefined"; - disabledOption.disabled = true; - disabledOption.selected = true; - $(village).dropdown('set selected', disabledOption.value); - village.add(disabledOption); - - for(var i = 0; i < data.length; i++){ - var option = document.createElement("option"); - option.value = data[i].village_id; - option.text = data[i].village_name; - village.add(option); - } - }); - }); - - - $(".ui.form").form({ - fields: { - first_name: "empty", - last_name: "empty", - address: "empty", - mobile_number: { - identifier: "mobile_number", - rules: [ - { - type: "length[10]", - prompt: "Please enter a valid mobile number" - } - ] - }, - dob: "empty", - marital_status: "empty", - disabled: "empty", - caste: "empty", - state: "empty", - district: "empty", - mandal: "empty", - village: "empty" - }, - }); - - function checkMobileNumber(mobile_number){ - var mobile_number = document.getElementById("mobile_number").value; - if(mobile_number.length != 10){ - return false; - } - return true; - } - - function addCitizen(event){ - event.preventDefault(); - - if($(".ui.form").form("is valid")){ - var formData = { - first_name: document.getElementById("first_name").value, - last_name: document.getElementById("last_name").value, - address: document.getElementById("address").value, - mobile_number: document.getElementById("mobile_number").value, - - dob: document.getElementById("dob").value, - marital_status: document.getElementById("marital_status").value, - disabled: document.getElementById("disabled").value, - disbaled_percentage: document.getElementById("disbaled_percentage").value, - caste: document.getElementById("caste").value, - village_id: document.getElementById("village").value, - citizen_id: document.getElementById("citizen_id").value - }; - - fetch("/api/citizens/addnewcitizen", { - method: "POST", - body: formData - }).then(res => res.json()).then(data => { - if(data.status == "success"){ - window.location.href = "/citizens"; - } - else{ - $(".ui.error.message").html(data.message); - } - }); - } - - } - - - - - document.getElementById("add_citizen").addEventListener("click", addCitizen); - - document.getElementById("disabled").addEventListener("change", function(){ - if(document.getElementById("disabled").value == "yes"){ - document.getElementById("disbaled_percentage").disabled = false; - } - else{ - document.getElementById("disbaled_percentage").disabled = true; - } - }); - - -</script> + <script src="/adduser.js"></script> </html> diff --git a/interface/views/citizens.ejs b/interface/views/citizens.ejs index 0e703b2..2cb4ecf 100644 --- a/interface/views/citizens.ejs +++ b/interface/views/citizens.ejs @@ -2,6 +2,26 @@ <html lang="en"> <head> <%- include('partials/head') %> + <style> + .ui.menu { + margin-top: 0; + } + .scrollY { + max-height: calc(100vh - 8rem); + margin-top: 1rem; + overflow-y: scroll; + } + .ui.table thead tr:first-child > th { + position: sticky !important; + top: 0; + z-index: 2; + } + .ui.table tfoot tr:first-child > th { + position: sticky !important; + bottom: 0; + z-index: 2; + } + </style> </head> <body> @@ -13,7 +33,6 @@ style="border: none; box-shadow: none" > <form class="ui form" method="post" onsubmit="editCitizen(event)"> - <div class="field"> <label>Address</label> <input @@ -51,69 +70,94 @@ </div> <%- include('partials/navbar') %> - <table class="ui selectable table"> - <thead> - <tr> - <!-- <th>Citizen ID</th> --> - <th>First Name</th> - <!-- <th>Middle Name</th> --> - <th>Last Name</th> - <th>Address</th> - <th>Mobile Number</th> - <th>Date of Birth</th> - <th>Gender</th> - <th>Marital Status</th> - <!-- <th>Disabled</th> - <th>Disabled Percentage</th> --> - <!-- <th>Caste</th> --> - <th>Village Name</th> - <th></th> - </tr> - </thead> - <tbody> - <% for(var i=0; i < citizens.length; i++) { %> - <tr> - <!-- <td><%= citizens[i].citizen_id %></td> --> - <td><%= citizens[i].first_name %></td> - <!-- <td> - <%= citizens[i].middle_name ? citizens[i].middle_name : '-' %> - </td> --> - <td><%= citizens[i].last_name %></td> - <td><%= citizens[i].address %></td> - <td><%= citizens[i].mobile_num %></td> - <td><%= citizens[i].dob %></td> - <td><%= citizens[i].gender %></td> - <td><%= citizens[i].marital_status %></td> - <!-- <td><%= citizens[i].disabled %></td> --> - <!-- <td><%= citizens[i].disbaled_percentage %></td> --> - <!-- <td><%= citizens[i].caste %></td> --> - <td><%= citizens[i].village_name %></td> - <td> - <div class="ui teal buttons"> - <div - class="ui button" - onclick="editCitizensRecord('<%=JSON.stringify(citizens[i])%>')" - > - Edit - </div> - <div class="ui floating dropdown icon button"> - <i class="dropdown icon"></i> - <div class="menu"> - <div - class="item" - onclick="deleteCitizenRecord('<%= JSON.stringify(citizens[i])%>')" - > - <i class="delete icon"></i> Delete + + <!-- Drop down for selecting limit --> + + <div class="ui container"> + <div class="ui floating labeled icon dropdown button"> + <i class="list icon"></i> + <span class="text">Items</span> + <div class="menu"> + <div class="item" onclick="redirectToLimit(10)">10</div> + <div class="item" onclick="redirectToLimit(25)">25</div> + <div class="item" onclick="redirectToLimit(50)">50</div> + <div class="item" onclick="redirectToLimit(100)">100</div> + </div> + </div> + </div> + + <div class="scrollY"> + <table class="ui selectable table"> + <thead> + <tr> + <th>First Name</th> + <th>Last Name</th> + <th>Address</th> + <th>Mobile Number</th> + <th>Date of Birth</th> + <th>Gender</th> + <th>Marital Status</th> + <th>Village Name</th> + <th></th> + </tr> + </thead> + <tbody> + <% for(var i=0; i < citizens.length; i++) { %> + <tr> + <td><%= citizens[i].first_name %></td> + <td><%= citizens[i].last_name %></td> + <td><%= citizens[i].address %></td> + <td><%= citizens[i].mobile_num %></td> + <td><%= citizens[i].dob %></td> + <td><%= citizens[i].gender %></td> + <td><%= citizens[i].marital_status %></td> + <td><%= citizens[i].village_name %></td> + <td> + <div class="ui teal buttons"> + <div + class="ui button" + onclick="editCitizensRecord('<%=JSON.stringify(citizens[i])%>')" + > + Edit + </div> + <div class="ui floating dropdown icon button"> + <i class="dropdown icon"></i> + <div class="menu"> + <div + class="item" + onclick="deleteCitizenRecord('<%= JSON.stringify(citizens[i])%>')" + > + <i class="delete icon"></i> Delete + </div> </div> </div> </div> - </div> - </td> - </tr> - <% } %> - </tbody> - </table> + </td> + </tr> + <% } %> + </tbody> + <!-- Display a pagination --> + <tfoot> + <tr> + <th colspan="9"> + <div class="ui right floated pagination menu"> + <a class="icon item" id="pageLeft"> + <i class="left chevron disabled icon"></i> + </a> + + <a class="icon item" id="pageRight"> + <i class="right chevron disabled icon"></i> + </a> + </div> + </th> + </tr> + </tfoot> + </table> + </div> </body> <%- include('partials/scripts') %> + <script> + const count = "<%= count %>"; + </script> <script src="/citizens.js"></script> </html> diff --git a/interface/views/partials/navbar.ejs b/interface/views/partials/navbar.ejs index 440497a..967cbcb 100644 --- a/interface/views/partials/navbar.ejs +++ b/interface/views/partials/navbar.ejs @@ -1,5 +1,5 @@ <div class="ui menu"> - <a class="item"> Home </a> + <a class="item" onclick="route('/')"> Home </a> <div class="ui pointing dropdown link item"> <span class="text">View Data</span> <i class="dropdown icon"></i> |