Merge branch...

Merge branch '31-as-a-hospital-worker-i-want-to-view-and-search-patients-and-care-providers-information-and' into 'main'

Show and search patient and nurse

Closes #31

See merge request !63

src/main/java/com/cardiff/client_project/controller/ViewController.java

 package com.cardiff.client_project.controller;
 
-import com.cardiff.client_project.service.DeviceService;
-import com.cardiff.client_project.service.HospitalService;
-import com.cardiff.client_project.service.SuperAdminService;
+import com.cardiff.client_project.mapper.PatientMapper;
+import com.cardiff.client_project.service.*;
 import com.cardiff.client_project.utils.Result;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
@@ -20,6 +19,11 @@ public class ViewController {
     private HospitalService hospitalService;
     @Autowired
     private DeviceService deviceService;
+    @Autowired
+    private PatientService patientService;
+    @Autowired
+    private NurseService nurseService;
+
 
     @GetMapping("/loadLeft")
     public String loadLeftView() {
@@ -70,4 +74,21 @@ public class ViewController {
         // System.out.println("result"+result.getData());
         return "mainHospitalView2";
     }
+
+    @GetMapping("/patientLoadMain/{hospitalId}")
+    public String loadMainView_5(Model model, @PathVariable int hospitalId) {
+        Result result = patientService.selectAllPatient(hospitalId);
+        System.out.println("result" + result.getData());
+        model.addAttribute("tableData", result.getData());
+        return "mainPatientView";
+    }
+
+    @GetMapping("/nurseLoadMain/{hospitalId}")
+    public String loadMainView_6(Model model, @PathVariable int hospitalId) {
+        Result result = nurseService.selectAllNurse(hospitalId);
+        System.out.println("result" + result.getData());
+        model.addAttribute("tableData", result.getData());
+        // System.out.println("result"+result.getData());
+        return "mainNurseView";
+    }
 }

src/main/java/com/cardiff/client_project/controller/nurse/NurseController.java

+package com.cardiff.client_project.controller.nurse;
+
+import com.cardiff.client_project.pojo.entity.Nurse;
+import com.cardiff.client_project.service.NurseService;
+import com.cardiff.client_project.utils.Result;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.*;
+
+@RestController
+@RequestMapping("/nurse")
+public class NurseController {
+    @Autowired
+    private NurseService nurseService;
+
+    /**
+     * select all
+     *
+     * @return
+     */
+    @PostMapping("/selectAll")
+    public Result SelectAll(int hospitalId) {
+        Result result = nurseService.selectAllNurse(hospitalId);
+        return result;
+    }
+
+
+    /**
+     * fuzzy query
+     *
+     * @param
+     * @return
+     */
+    @PostMapping("/select")
+    public Result selectByItem(@RequestBody Nurse nurse) {
+        System.out.println(nurse);
+        Result result = nurseService.selectByItem(nurse);
+        return result;
+    }
+
+    /**
+     * Update data
+     * @param nurse
+     * @return
+     */
+    @PutMapping("/update")
+    public Result updateById(@RequestBody Nurse nurse){
+        System.out.println("update" + nurse);
+        Result result = nurseService.update(nurse);
+        return result;
+    }
+
+}

src/main/java/com/cardiff/client_project/controller/patient/PatientController.java

+package com.cardiff.client_project.controller.patient;
+
+import com.cardiff.client_project.pojo.entity.Patient;
+import com.cardiff.client_project.service.PatientService;
+import com.cardiff.client_project.utils.Result;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+@RestController
+@RequestMapping("/patient")
+public class PatientController {
+    @Autowired
+    private PatientService patientService;
+
+    /**
+     * select all
+     * @return
+     */
+    @PostMapping("/selectAll")
+    public Result SelectAll(int hospitalId) {
+        Result result = patientService.selectAllPatient(hospitalId);
+        return result;
+    }
+
+    /**
+     * fuzzy query
+     * @param
+     * @return
+     */
+    @PostMapping("/select")
+    public Result selectByItem(@RequestBody Patient patient){
+        System.out.println(patient);
+        Result result = patientService.selectByItem(patient);
+        return result;
+    }
+
+
+    /**
+     * Update data
+     * @param patient
+     * @return
+     */
+    @PutMapping("/update")
+    public Result updateById(@RequestBody Patient patient){
+        System.out.println("update" + patient);
+        Result result = patientService.update(patient);
+        return result;
+    }
+}
\ No newline at end of file

src/main/java/com/cardiff/client_project/mapper/NurseMapper.java

+package com.cardiff.client_project.mapper;
+
+import com.cardiff.client_project.constant.ResponseCode;
+import com.cardiff.client_project.pojo.entity.Nurse;
+import com.cardiff.client_project.utils.Result;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.jdbc.core.BeanPropertyRowMapper;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.jdbc.core.simple.SimpleJdbcInsert;
+import org.springframework.stereotype.Repository;
+
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+@Repository
+public class NurseMapper {
+    @Autowired
+    JdbcTemplate jdbcTemplate;
+    /**
+     * update nurse data
+     * @param nurse
+     * @return
+     */
+    public int update(Nurse nurse) {
+        String sql = "UPDATE nurse SET name = ?,phone = ?, age=?, email=?, address=?, status = ?,hospitalId =? WHERE id = ?";
+        int update = jdbcTemplate.update(sql, preparedStatement -> {
+            preparedStatement.setString(1, nurse.getName());
+            preparedStatement.setString(2, nurse.getPhone());
+            preparedStatement.setInt(3, nurse.getAge());
+            preparedStatement.setString(4, nurse.getEmail());
+            preparedStatement.setString(5, nurse.getAddress());
+            preparedStatement.setInt(6, nurse.getStatus());
+            preparedStatement.setInt(7, nurse.getHospitalId());
+            preparedStatement.setInt(8, nurse.getId());
+        });
+        return update;
+    }
+
+
+    /**
+     * select nurse
+     * @return
+     */
+    public List<Nurse> selectAllNurse(int hospitalId){
+
+        // Parameterized queries avoid SQL injection
+        String sql = "SELECT * FROM nurse where hospitalId=?";
+        List<Nurse> query = jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Nurse.class), hospitalId);
+        System.out.println(query);
+        return query;
+    }
+
+
+    /**
+     * fuzzy query
+     * @param nurse
+     * @return
+     */
+    public List<Nurse> selectByItem(Nurse nurse) {
+        System.out.println("test:" + nurse);
+        // Build the basic SQL and parameter list
+        StringBuilder sql = new StringBuilder("SELECT * FROM nurse");
+
+        //Dynamic table name stitching
+        sql.append(" WHERE 1=1 ");
+        List<Object> params = new ArrayList<>();
+
+        //Dynamic concatenation of query conditions
+        if (nurse.getName() != null && nurse.getName() != "") {
+            sql.append(" AND name LIKE ?");
+            params.add("%" + nurse.getName() + "%");
+        }
+        if (nurse.getPhone() != null && nurse.getPhone() != "") {
+            sql.append(" AND phone LIKE ?");
+            params.add("%" + nurse.getPhone() + "%");
+        }
+        if (nurse.getAddress() != null && nurse.getAddress() != "") {
+            sql.append(" AND address LIKE ?");
+            params.add("%" + nurse.getAddress() + "%");
+        }
+        if (Integer.valueOf(nurse.getStatus()) != null) {
+            sql.append(" AND status = ?, ");
+            params.add(nurse.getStatus());
+        }
+        sql.setLength(sql.length() - 2);
+
+        System.out.println("sql: "+sql.toString());
+        List<Nurse> query = jdbcTemplate.query(sql.toString(), params.toArray(), new BeanPropertyRowMapper<>(Nurse.class));
+        System.out.println("query" + query);
+        return query;
+
+    }
+
+    /**
+     * Query data by name
+     * @param name
+     * @return
+     */
+    public Object getNurseByName(String name){
+        try {
+            // 1. 查询 nurse 表
+            String sql = "select * from nurse where name=?";
+            return jdbcTemplate.queryForObject(sql, new Object[]{name}, new BeanPropertyRowMapper<>(Nurse.class));
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        // 如果所有查询都为空，返回 null
+        return null;
+    }
+
+    /**
+     * Get role permissions based on id
+     * @param roleId
+     * @return
+     */
+    public String getTypeById(int roleId) {
+        String sql="SELECT type from role where roleId=?;";
+        String type= jdbcTemplate.queryForObject(sql, new Object[]{roleId}, String.class);
+        return type;
+    }
+
+}

src/main/java/com/cardiff/client_project/mapper/PatientMapper.java

 package com.cardiff.client_project.mapper;
 
+import com.cardiff.client_project.constant.Authority;
+import com.cardiff.client_project.constant.ResponseCode;
 import com.cardiff.client_project.pojo.entity.Patient;
+
+import com.cardiff.client_project.utils.Result;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.jdbc.core.BeanPropertyRowMapper;
 import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.jdbc.core.simple.SimpleJdbcInsert;
 import org.springframework.stereotype.Repository;
 
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
 @Repository
 public class PatientMapper {
 
@@ -28,4 +39,91 @@ public class PatientMapper {
         });
         return update;
     }
+
+    /**
+     * select patient
+     * @return
+     */
+    public List<Patient> selectAllPatient(int hospitalId){
+
+        // Parameterized queries avoid SQL injection
+        String sql = "SELECT * FROM patient where hospitalId=?";
+        List<Patient> query = jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Patient.class), hospitalId);
+        System.out.println(query);
+        return query;
+    }
+
+
+    /**
+     * fuzzy query
+     * @param patient
+     * @return
+     */
+    public List<Patient> selectByItem(Patient patient) {
+        System.out.println("test:" + patient);
+        // Build the basic SQL and parameter list
+        StringBuilder sql = new StringBuilder("SELECT * FROM patient");
+
+        //Dynamic table name stitching
+        sql.append(" WHERE 1=1 ");
+        List<Object> params = new ArrayList<>();
+
+        //Dynamic concatenation of query conditions
+        if (patient.getName() != null && patient.getName() != "") {
+            sql.append(" AND name LIKE ?");
+            params.add("%" + patient.getName() + "%");
+        }
+        if (patient.getPhone() != null && patient.getPhone() != "") {
+            sql.append(" AND phone LIKE ?");
+            params.add("%" + patient.getPhone() + "%");
+        }
+
+//        if (patient.getAddress() != null && patient.getAddress() != "") {
+//            sql.append(" AND address LIKE ?");
+//            params.add("%" + patient.getAddress() + "%");
+//        }
+
+        if (Integer.valueOf(patient.getStatus()) != null) {
+            sql.append(" AND status = ?, ");
+            params.add(patient.getStatus());
+        }
+        sql.setLength(sql.length() - 2);
+
+        System.out.println("sql: "+sql.toString());
+        List<Patient> query = jdbcTemplate.query(sql.toString(), params.toArray(), new BeanPropertyRowMapper<>(Patient.class));
+        System.out.println("query" + query);
+        return query;
+
+    }
+
+    /**
+     * Query data by name
+     * @param name
+     * @return
+     */
+    public Object getPatientByName(String name){
+        try {
+            // 1. 查询 patient 表
+            String sql = "select * from patient where name=?";
+            return jdbcTemplate.queryForObject(sql, new Object[]{name}, new BeanPropertyRowMapper<>(Patient.class));
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        // 如果所有查询都为空，返回 null
+        return null;
+    }
+
+    /**
+     * Get role permissions based on id
+     * @param roleId
+     * @return
+     */
+    public String getTypeById(int roleId) {
+        String sql="SELECT type from role where roleId=?;";
+        String type= jdbcTemplate.queryForObject(sql, new Object[]{roleId}, String.class);
+        return type;
+    }
+
+
 }
+

src/main/java/com/cardiff/client_project/pojo/entity/Nurse.java

+package com.cardiff.client_project.pojo.entity;
+
+import lombok.Data;
+import lombok.ToString;
+
+@Data
+@ToString
+public class Nurse {
+    private int id;
+    private String name;
+    private int status;
+    private int hospitalId;
+    private String gender;
+    private int age;
+    private String address;
+    private String email;
+    private String phone;
+    private String status_str;
+}

src/main/java/com/cardiff/client_project/pojo/vo/NurseVO.java

+package com.cardiff.client_project.pojo.vo;
+
+import lombok.Data;
+import lombok.ToString;
+
+@Data
+@ToString
+public class NurseVO {
+    private int id;
+    private String name;
+    private int status;
+    private String status_str;
+    private int hospitalId;
+    private String gender;
+    private int age;
+    private String address;
+    private String email;
+    private String phone;
+}
\ No newline at end of file

src/main/java/com/cardiff/client_project/pojo/vo/PatientVO.java

+package com.cardiff.client_project.pojo.vo;
+
+import lombok.Data;
+import lombok.ToString;
+
+@Data
+@ToString
+public class PatientVO {
+    private int id;
+    private String name;
+    private int status;
+    private String status_str;
+    private int hospitalId;
+    private String gender;
+    private int age;
+    private String address;
+    private String email;
+    private String phone;
+}
\ No newline at end of file

src/main/java/com/cardiff/client_project/service/NurseService.java

+package com.cardiff.client_project.service;
+
+import com.cardiff.client_project.pojo.entity.Nurse;
+import com.cardiff.client_project.utils.Result;
+import java.util.List;
+
+public interface NurseService {
+
+    /**
+     * Query nurse information
+     * @return
+     */
+    Result selectAllNurse(int hospitalId);
+
+    /**
+     * Update data
+     * @param nurse
+     * @return
+     */
+    Result update(Nurse nurse);
+
+    /**
+     * fuzzy query
+     * @param nurse
+     * @return
+     */
+    Result selectByItem(Nurse nurse);
+}

src/main/java/com/cardiff/client_project/service/PatientService.java

+package com.cardiff.client_project.service;
+
+import com.cardiff.client_project.pojo.entity.Patient;
+import com.cardiff.client_project.utils.Result;
+
+import java.util.List;
+
+public interface PatientService {
+
+    /**
+     * Query patient information
+     * @return
+     */
+    Result selectAllPatient(int hospitalId);
+
+    /**
+     * Update data
+     * @param patient
+     * @return
+     */
+    Result update(Patient patient);
+
+    /**
+     * fuzzy query
+     * @param patient
+     * @return
+     */
+    Result selectByItem(Patient patient);
+}
\ No newline at end of file

src/main/java/com/cardiff/client_project/service/imp/NurseServiceImp.java

+package com.cardiff.client_project.service.imp;
+
+import com.cardiff.client_project.constant.ResponseCode;
+import com.cardiff.client_project.mapper.NurseMapper;
+import com.cardiff.client_project.pojo.entity.Nurse;
+import com.cardiff.client_project.pojo.vo.NurseVO;
+import com.cardiff.client_project.service.NurseService;
+import com.cardiff.client_project.utils.Result;
+import org.springframework.beans.BeanUtils;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.ArrayList;
+import java.util.List;
+@Service
+public class NurseServiceImp implements NurseService {
+    @Autowired
+    private NurseMapper nurseMapper;
+
+
+    @Override
+    public Result selectAllNurse(int hospitalId) {
+        List<Nurse> selectVOS = nurseMapper.selectAllNurse(hospitalId);
+
+        List<NurseVO> nurseVOS = new ArrayList<>();
+        selectVOS.forEach(selectVO -> {
+            NurseVO nurseVO = new NurseVO();
+            BeanUtils.copyProperties(selectVO, nurseVO);
+            // Set the corresponding status string according to status
+            if (nurseVO.getStatus() == 1) {
+                nurseVO.setStatus_str("ACTIVE");
+            }
+            if (nurseVO.getStatus() == 0) {
+                nurseVO.setStatus_str("INACTIVE");
+            }
+            nurseVOS.add(nurseVO);
+        });
+        return Result.success(nurseVOS);
+    }
+
+    @Override
+    public Result update(Nurse nurse) {
+        int update = nurseMapper.update(nurse);
+        if (update > 0) {
+            return Result.success(ResponseCode.SUCCESS);
+        }
+        return Result.error(ResponseCode.ERROR);
+    }
+
+    @Override
+    public Result selectByItem(Nurse nurse) {
+        List<Nurse> selectVos = nurseMapper.selectByItem(nurse);
+        selectVos.forEach(selectVO -> {
+            NurseVO nurseVO = new NurseVO();
+            if (selectVO.getStatus() == 1) {
+                selectVO.setStatus_str("ACTIVE");
+            }
+            if (selectVO.getStatus() == 0) {
+                selectVO.setStatus_str("INACTIVE");
+            }
+            BeanUtils.copyProperties(selectVO, nurseVO);
+        });
+        if(!selectVos.isEmpty()){
+            return Result.success(selectVos);
+        }else {
+            return Result.error(ResponseCode.ACCOUNT_NOT_EXISTS);
+        }
+    }
+}

src/main/java/com/cardiff/client_project/service/imp/PatientServiceImp.java

+package com.cardiff.client_project.service.imp;
+
+import com.cardiff.client_project.constant.Authority;
+import com.cardiff.client_project.constant.ResponseCode;
+import com.cardiff.client_project.mapper.PatientMapper;
+import com.cardiff.client_project.pojo.entity.Patient;
+import com.cardiff.client_project.pojo.vo.PatientVO;
+import com.cardiff.client_project.service.PatientService;
+import com.cardiff.client_project.utils.Result;
+import org.springframework.beans.BeanUtils;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.ArrayList;
+import java.util.List;
+@Service
+public class PatientServiceImp implements PatientService {
+    @Autowired
+    private PatientMapper patientMapper;
+
+    @Override
+    public Result selectAllPatient(int hospitalId) {
+        List<Patient> selectVOS = patientMapper.selectAllPatient(hospitalId);
+
+        List<PatientVO> patientVOS = new ArrayList<>();
+        selectVOS.forEach(selectVO -> {
+            PatientVO patientVO = new PatientVO();
+            BeanUtils.copyProperties(selectVO, patientVO);
+            // Set the corresponding status string according to status
+            if (patientVO.getStatus() == 1) {
+                patientVO.setStatus_str("ACTIVE");
+            }
+            if (patientVO.getStatus() == 0) {
+                patientVO.setStatus_str("INACTIVE");
+            }
+            patientVOS.add(patientVO);
+        });
+        return Result.success(patientVOS);
+    }
+
+    @Override
+    public Result update(Patient patient) {
+        int update = patientMapper.update(patient);
+        if (update > 0) {
+            return Result.success(ResponseCode.SUCCESS);
+        }
+        return Result.error(ResponseCode.ERROR);
+    }
+
+    @Override
+    public Result selectByItem(Patient patient) {
+        List<Patient> selectVos = patientMapper.selectByItem(patient);
+        selectVos.forEach(selectVO -> {
+            PatientVO patientVO = new PatientVO();
+            if (selectVO.getStatus() == 1) {
+                selectVO.setStatus_str("ACTIVE");
+            }
+            if (selectVO.getStatus() == 0) {
+                selectVO.setStatus_str("INACTIVE");
+            }
+            BeanUtils.copyProperties(selectVO, patientVO);
+        });
+        if(!selectVos.isEmpty()){
+            return Result.success(selectVos);
+        }else {
+            return Result.error(ResponseCode.ACCOUNT_NOT_EXISTS);
+        }
+    }
+}

src/main/resources/static/js/mainNurseView.js

+//add data of admin
+$(document).on("click","#addButton",function (){
+    const overlay = document.getElementById("overlay_add");
+    const formContainerAdd = document.getElementById("formContainer_add");
+
+    // show
+    overlay.classList.add("active");
+    formContainerAdd.classList.add("active");
+})
+
+$(document).on("click","#addNurse",function (){
+    var data={
+        "hospitalId":localStorage.getItem('hospitalId'),
+        "name":document.getElementById("addName").value,
+        "age":document.getElementById("addAge").value,
+        "email":document.getElementById("addEmail").value,
+        "phone":document.getElementById("addPhone").value,
+        "address":document.getElementById("addAddress").value,
+        "type":"hospital",
+        "status":1,
+        "role":"HOSPITAL"
+    }
+    console.log(data)
+    $.ajax({
+        contentType: "application/json",
+        url: "/nurse/insert",
+        type: "POST",
+        data: JSON.stringify(data),
+        dataType: "Json",
+        success: function (data) {
+
+            if(data.code!=0){
+                console.log(data.data)
+                location.reload()
+            }else {
+                alert(data.msg)
+            }
+        },
+    })
+})
+
+
+
+
+//create table to add data or update data
+$(document).on("click","#edit",function (){
+
+    const row = $(this).closest('tr');
+    console.log(row.data('id'))
+    let status=0;
+    if(row.data('status')=="ACTIVE"){
+        status=1
+    }
+    var data={
+        "id":row.data('id'),
+        "type":"hospital",
+        "hospitalId":row.data('hospitalId'),
+        "name":row.data('name'),
+        "age":row.data('age'),
+        "phone":row.data('phone'),
+        "email":row.data('email'),
+        "address":row.data('address'),
+        "status":status,
+    }
+
+    //select By id (Data echo)
+    $.ajax({
+        contentType: "application/json",
+        url: "/nurse/select",
+        type: "POST",
+        data: JSON.stringify(data),
+        dataType: "Json",
+        success: function (data) {
+
+            if(data.code!=0){
+
+                console.log(data.data)
+                console.log(data.data[0].email)
+                //Load form
+
+                //padding data
+                document.getElementById("id").value=data.data[0].id
+                document.getElementById("hospitalId").value=data.data[0].hospitalId
+                document.getElementById("name").value=data.data[0].name
+                document.getElementById("age").value=data.data[0].age
+                document.getElementById("phone").value=data.data[0].phone
+                document.getElementById("email").value=data.data[0].email
+                document.getElementById("address").value=data.data[0].address
+                document.getElementById("status").value=data.data[0].status
+
+                //Change css
+                const overlay = document.getElementById("overlay");
+                const formContainer = document.getElementById("formContainer");
+                formContainer.classList.toggle("active"); // Toggle display status
+                overlay.classList.toggle("active");
+            }else {
+                alert(data.msg)
+            }
+        },
+    })
+})
+
+//submit Updated form data(Implement edit)
+function submitForm(){
+
+    var data={
+        "type":"hospital",
+        "id":document.getElementById("id").value,
+        "hospitalId":document.getElementById("hospitalId").value,
+        "name":document.getElementById("name").value,
+        "age":document.getElementById("age").value,
+        "phone":document.getElementById("phone").value,
+        "email":document.getElementById("email").value,
+        "address":document.getElementById("address").value,
+        "status":document.getElementById("status").value,
+    }
+    console.log(data)
+    $.ajax({
+        contentType: "application/json",
+        url: "/nurse/update",
+        type: "PUT",
+        data: JSON.stringify(data),
+        dataType: "Json",
+        success: function (data) {
+
+            if(data.code!=0){
+
+                console.log(data.data)
+                location.reload()
+
+            }else {
+                alert(data.msg)
+            }
+        },
+    })
+
+}
+
+
+
+
+$(document).on("click","#freeze",function (){
+    const row = $(this).closest('tr');
+    console.log(row.data('id'))
+    var status;
+    if(row.data('status')==="ACTIVE"){
+        status=0;
+    }else {
+        status=1
+    }
+    var data={
+        "id":row.data('id'),
+        "type":"hospital",
+        "hospitalId":row.data('hospitalId'),
+        "name":row.data('name'),
+        "age":row.data('age'),
+        "phone":row.data('phone'),
+        "email":row.data('email'),
+        "address":row.data('address'),
+        "status":status,
+    }
+    $.ajax({
+        contentType: "application/json",
+        url: "/nurse/update",
+        type: "PUT",
+        data: JSON.stringify(data),
+        dataType: "Json",
+        success: function (data) {
+            console.log(data)
+            if(data.code==1){
+                updateTable(data.data)
+                location.reload()
+            }else {
+                alert(data.msg)
+            }
+        },
+
+    });
+})
+
+
+
+
+
+$(document).on("click","#delete",function (){
+    const clickedLabel = this;
+    // remove active class
+    const labels = document.querySelectorAll('.tdOption .btn');
+    labels.forEach(label => label.classList.remove('active'));
+
+    // add active class
+    clickedLabel.classList.add('active');
+
+    const row = $(this).closest('tr');
+    // get data in row
+    row.data('id');          // get ID
+    let ids = new Array();
+    ids.push(row.data('id'))
+    console.log(ids)
+    $.ajax({
+        contentType: "application/json",
+        url: "/nurse/deleteNurseById",
+        type: "DELETE",
+        data: JSON.stringify(ids),
+        dataType: "Json",
+        success: function (data) {
+            console.log(data)
+            if(data.code==1){
+                console.log(data)
+                window.location.reload()
+            }else {
+                alert(data.msg)
+            }
+        },
+
+    });
+
+})
+
+//reflash page
+$(document).on("dblclick","#searchButton",function (){
+    location.reload()
+})
+
+
+//use jQuery's load() to load content dynamically,Events cannot be bound in dom mode
+$(document).on("click", "#searchButton", function () {
+    let status=document.getElementById("searchStatus").value;
+
+    if(status==="active"){
+        status=1;
+    }
+    else if(status==="inactive"){
+        status=0;
+    }else {
+        status=1;
+    }
+
+    var data={
+        'name':document.getElementById("searchName").value,
+        'phone':document.getElementById("searchPhone").value,
+        'address':document.getElementById("searchAddress").value,
+        'type':"hospital",
+        'status':status
+    }
+    $.ajax({
+        contentType: "application/json",
+        url: "/nurse/select",
+        type: "POST",
+        data: JSON.stringify(data),
+        dataType: "Json",
+        success: function (data) {
+
+            if(data.code!=0){
+                updateTable(data.data);
+                // location.reload()
+            }else {
+                alert(data.msg)
+            }
+        },
+    });
+});
+
+function updateTable(data) {
+    let tbody = $("table tbody"); // choose table's tbody
+    tbody.empty(); // clean old data
+    console.log(data)
+    // create new table
+    data.forEach(row => {
+        const tr = `
+            <tr
+            data-id="${row.id}"
+            data-hospitalId="${row.hospitalId}"
+            data-name="${row.name}"
+            data-age="${row.age}"
+            data-phone="${row.phone}"
+            data-email="${row.email}"
+            data-address="${row.address}"
+            data-status="${row.status_str}">
+                <td>${row.id}</td>
+                <td>${row.hospitalId}</td>
+                <td>${row.name}</td>
+                <td>${row.age}</td>
+                <td>${row.phone}</td>
+                <td>${row.email}</td>
+                <td>${row.address}</td>
+                <td>${row.status_str}</td>
+                <td class="tdOption">
+                <label id="edit" class="btn">Edit</label>
+                <label id="delete" class="btn">Delete</label>
+                <label id="freeze" class="btn">Freeze</label>
+            </td>
+            </tr>
+        `;
+        tbody.append(tr);
+    });
+}
\ No newline at end of file

src/main/resources/static/js/mainPatientView.js

+//add data of admin
+$(document).on("click","#addButton",function (){
+    const overlay = document.getElementById("overlay_add");
+    const formContainerAdd = document.getElementById("formContainer_add");
+
+    // show
+    overlay.classList.add("active");
+    formContainerAdd.classList.add("active");
+})
+
+$(document).on("click","#addPatient",function (){
+    var data={
+        "hospitalId":localStorage.getItem('hospitalId'),
+        "name":document.getElementById("addName").value,
+        "age":document.getElementById("addAge").value,
+        "email":document.getElementById("addEmail").value,
+        "phone":document.getElementById("addPhone").value,
+        "type":"hospital",
+        "status":1,
+        "role":"HOSPITAL"
+    }
+    console.log(data)
+    $.ajax({
+        contentType: "application/json",
+        url: "/patient/insert",
+        type: "POST",
+        data: JSON.stringify(data),
+        dataType: "Json",
+        success: function (data) {
+
+            if(data.code!=0){
+                console.log(data.data)
+                location.reload()
+            }else {
+                alert(data.msg)
+            }
+        },
+    })
+})
+
+
+
+
+//create table to add data or update data
+$(document).on("click","#edit",function (){
+
+    const row = $(this).closest('tr');
+    console.log(row.data('id'))
+    let status=0;
+    if(row.data('status')=="ACTIVE"){
+        status=1
+    }
+    var data={
+        "id":row.data('id'),
+        "type":"hospital",
+        "hospitalId":row.data('hospitalId'),
+        "name":row.data('name'),
+        "age":row.data('age'),
+        "phone":row.data('phone'),
+        "email":row.data('email'),
+        "status":status,
+    }
+
+    //select By id (Data echo)
+    $.ajax({
+        contentType: "application/json",
+        url: "/patient/select",
+        type: "POST",
+        data: JSON.stringify(data),
+        dataType: "Json",
+        success: function (data) {
+
+            if(data.code!=0){
+
+                console.log(data.data)
+                console.log(data.data[0].email)
+                //Load form
+
+                //padding data
+                document.getElementById("id").value=data.data[0].id
+                document.getElementById("hospitalId").value=data.data[0].hospitalId
+                document.getElementById("name").value=data.data[0].name
+                document.getElementById("age").value=data.data[0].age
+                document.getElementById("phone").value=data.data[0].phone
+                document.getElementById("email").value=data.data[0].email
+                document.getElementById("status").value=data.data[0].status
+
+                //Change css
+                const overlay = document.getElementById("overlay");
+                const formContainer = document.getElementById("formContainer");
+                formContainer.classList.toggle("active"); // Toggle display status
+                overlay.classList.toggle("active");
+            }else {
+                alert(data.msg)
+            }
+        },
+    })
+})
+
+//submit Updated form data(Implement edit)
+function submitForm(){
+
+    var data={
+        "type":"hospital",
+        "id":document.getElementById("id").value,
+        "hospitalId":document.getElementById("hospitalId").value,
+        "name":document.getElementById("name").value,
+        "age":document.getElementById("age").value,
+        "phone":document.getElementById("phone").value,
+        "email":document.getElementById("email").value,
+        "status":document.getElementById("status").value,
+    }
+    console.log(data)
+    $.ajax({
+        contentType: "application/json",
+        url: "/patient/update",
+        type: "PUT",
+        data: JSON.stringify(data),
+        dataType: "Json",
+        success: function (data) {
+
+            if(data.code!=0){
+
+                console.log(data.data)
+                location.reload()
+
+            }else {
+                alert(data.msg)
+            }
+        },
+    })
+
+}
+
+
+
+
+$(document).on("click","#freeze",function (){
+    const row = $(this).closest('tr');
+    console.log(row.data('id'))
+    var status;
+    if(row.data('status')==="ACTIVE"){
+        status=0;
+    }else {
+        status=1
+    }
+    var data={
+        "id":row.data('id'),
+        "type":"hospital",
+        "hospitalId":row.data('hospitalId'),
+        "name":row.data('name'),
+        "age":row.data('age'),
+        "phone":row.data('phone'),
+        "email":row.data('email'),
+        "status":status,
+    }
+    $.ajax({
+        contentType: "application/json",
+        url: "/patient/update",
+        type: "PUT",
+        data: JSON.stringify(data),
+        dataType: "Json",
+        success: function (data) {
+            console.log(data)
+            if(data.code==1){
+                updateTable(data.data)
+                location.reload()
+            }else {
+                alert(data.msg)
+            }
+        },
+
+    });
+})
+
+
+
+
+
+$(document).on("click","#delete",function (){
+    const clickedLabel = this;
+    // remove active class
+    const labels = document.querySelectorAll('.tdOption .btn');
+    labels.forEach(label => label.classList.remove('active'));
+
+    // add active class
+    clickedLabel.classList.add('active');
+
+    const row = $(this).closest('tr');
+    // get data in row
+    row.data('id');          // get ID
+    let ids = new Array();
+    ids.push(row.data('id'))
+    console.log(ids)
+    $.ajax({
+        contentType: "application/json",
+        url: "/patient/deletePatientById",
+        type: "DELETE",
+        data: JSON.stringify(ids),
+        dataType: "Json",
+        success: function (data) {
+            console.log(data)
+            if(data.code==1){
+                console.log(data)
+                window.location.reload()
+            }else {
+                alert(data.msg)
+            }
+        },
+
+    });
+
+})
+
+//reflash page
+$(document).on("dblclick","#searchButton",function (){
+    location.reload()
+})
+
+
+//use jQuery's load() to load content dynamically,Events cannot be bound in dom mode
+$(document).on("click", "#searchButton", function () {
+    let status=document.getElementById("searchStatus").value;
+
+    if(status==="active"){
+        status=1;
+    }
+    else if(status==="inactive"){
+        status=0;
+    }else {
+        status=1;
+    }
+
+    var data={
+        'name':document.getElementById("searchName").value,
+        'phone':document.getElementById("searchPhone").value,
+        'email':document.getElementById("searchAddress").value,
+        'type':"hospital",
+        'status':status
+    }
+    $.ajax({
+        contentType: "application/json",
+        url: "/patient/select",
+        type: "POST",
+        data: JSON.stringify(data),
+        dataType: "Json",
+        success: function (data) {
+
+            if(data.code!=0){
+                updateTable(data.data);
+                // location.reload()
+            }else {
+                alert(data.msg)
+            }
+        },
+    });
+});
+
+function updateTable(data) {
+    let tbody = $("table tbody"); // choose table's tbody
+    tbody.empty(); // clean old data
+    console.log(data)
+    // create new table
+    data.forEach(row => {
+        const tr = `
+            <tr
+            data-id="${row.id}"
+            data-hospitalId="${row.hospitalId}"
+            data-name="${row.name}"
+            data-age="${row.age}"
+            data-phone="${row.phone}"
+            data-email="${row.email}"
+            data-status="${row.status_str}">
+                <td>${row.id}</td>
+                <td>${row.hospitalId}</td>
+                <td>${row.name}</td>
+                <td>${row.age}</td>
+                <td>${row.phone}</td>
+                <td>${row.email}</td>
+                <td>${row.status_str}</td>
+                <td class="tdOption">
+                <label id="edit" class="btn">Edit</label>
+                <label id="delete" class="btn">Delete</label>
+                <label id="freeze" class="btn">Freeze</label>
+            </td>
+            </tr>
+        `;
+        tbody.append(tr);
+    });
+}
\ No newline at end of file

src/main/resources/templates/leftView2.html

@@ -22,7 +22,7 @@
     }
 
     function choosePatient(){
-        //window.location.href="/mainHospitalView2.html?type=patient"
+        window.location.href="/HospitalView.html?type=patient"
     }
 
     function chooseDevice(){
@@ -30,7 +30,7 @@
     }
 
     function chooseNurse(){
-        //window.location.href="/HospitalView2.html?type=nurse"
+        window.location.href="/HospitalView.html?type=nurse"
     }
 
     function chooseOut() {

src/main/resources/templates/mainNurseView.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="/css/mainSupAdminView.css">
+</head>
+<body>
+<div id="toolbar">
+    <label for="searchName">Name</label>
+    <input type="text" class="searchBox" id="searchName" placeholder="type name..." />
+    <label for="searchAddress">Address</label>
+    <input type="text" class="searchBox" id="searchAddress" placeholder="type address..." />
+    <label for="searchPhone">Phone</label>
+    <input type="text" class="searchBox" id="searchPhone" placeholder="type phone..." />
+    <select class="searchBox" id="searchStatus">
+        <option value="" disabled selected>choose status</option>
+        <option value="active">Active</option>
+        <option value="inactive">Inactive</option>
+    </select>
+    <button id="searchButton">Confirm</button>
+    <button id="addButton">Add</button>
+</div>
+
+<div style="height: 450px; overflow: auto;">
+    <table>
+        <thead>
+        <tr>
+            <th>ID</th>
+            <th>HOSPITAL</th>
+            <th>NAME</th>
+            <th>AGE</th>
+            <th>PHONE</th>
+            <th>EMAIL</th>
+            <th>ADDRESS</th>
+            <th>STATUS</th>
+            <th>OPTION</th>
+        </tr>
+        </thead>
+        <tbody>
+        <!-- Ergodic set -->
+        <tr th:each="row : ${tableData}"
+            th:data-id="${row.id}"
+            th:data-hospitalId="${row.hospitalId}"
+            th:data-name="${row.name}"
+            th:data-age="${row.age}"
+            th:data-phone="${row.phone}"
+            th:data-email="${row.email}"
+            th:data-address="${row.address}"
+            th:data-status="${row.status_str}">
+            <td th:text="${row.id}"></td>
+            <td th:text="${row.hospitalId}"></td>
+            <td th:text="${row.name}"></td>
+            <td th:text="${row.age}"></td>
+            <td th:text="${row.phone}"></td>
+            <td th:text="${row.email}"></td>
+            <td th:text="${row.address}"></td>
+            <td th:text="${row.status_str}"></td>
+            <td class="tdOption">
+                <label id="edit" class="btn">Edit</label>
+                <label id="delete" class="btn">Delete</label>
+                <label id="freeze" class="btn">Freeze</label>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</div>
+
+<!-- mask layer -->
+<div id="overlay"></div>
+<!-- form -->
+<div id="formContainer">
+    <form id="dynamicForm">
+        <label for="hospitalId">hospitalId:</label>
+        <input type="text" id="hospitalId" placeholder="Please enter nurse hospitalId">
+
+        <label for="name">name:</label>
+        <input type="text" id="name" placeholder="Please enter nurse name">
+
+        <label for="age">age:</label>
+        <input type="text" id="age" placeholder="Please enter nurse age">
+
+        <label for="phone">phone:</label>
+        <input type="text" id="phone" placeholder="Please enter nurse phone">
+
+        <label for="email">email:</label>
+        <input type="text" id="email" placeholder="Please enter nurse email">
+
+        <label for="address">address:</label>
+        <input type="text" id="address" placeholder="Please enter nurse address">
+
+        <input type="text" id="status" style="display: none">
+        <input type="text" id="id" style="display: none">
+    </form>
+    <button type="button" onclick="submitForm()" style="margin-right: 170px;margin-left: 20px">submit</button>
+    <button type="button" onclick="location.reload()">Cancel</button>
+</div>
+
+
+<div id="overlay_add"></div>
+<div id="formContainer_add">
+    <form id="dynamicForm_add">
+
+        <!--        <label for="addHospitalId">HospitalId:</label>-->
+        <!--        <input type="text" id="addHospitalId" placeholder="Please enter nurse HospitalId">-->
+
+        <label for="addName">Name:</label>
+        <input type="text" id="addName" placeholder="Please enter nurse name">
+
+        <label for="addAge">Age:</label>
+        <input type="text" id="addAge" placeholder="Please enter nurse age">
+
+        <label for="addPhone">Phone:</label>
+        <input type="text" id="addPhone" placeholder="Please enter nurse phone">
+
+        <label for="addEmail">Email:</label>
+        <input type="text" id="addEmail" placeholder="Please enter nurse email">
+
+        <label for="addAddress">Address:</label>
+        <input type="text" id="addAddress" placeholder="Please enter nurse address">
+
+
+    </form>
+    <button type="button" id="addNurse" style="margin-right: 170px;margin-left: 20px">Submit</button>
+    <button type="button" onclick="location.reload()">Cancel</button>
+</div>
+
+
+<script src="/js/mainNurseView.js"></script>
+
+</body>
+</html>

src/main/resources/templates/mainPatientView.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="/css/mainSupAdminView.css">
+</head>
+<body>
+<div id="toolbar">
+    <label for="searchName">Name</label>
+    <input type="text" class="searchBox" id="searchName" placeholder="type name..." />
+    <label for="searchAddress">Address</label>
+    <input type="text" class="searchBox" id="searchAddress" placeholder="type address..." />
+    <label for="searchPhone">Phone</label>
+    <input type="text" class="searchBox" id="searchPhone" placeholder="type phone..." />
+    <select class="searchBox" id="searchStatus">
+        <option value="" disabled selected>choose status</option>
+        <option value="active">Active</option>
+        <option value="inactive">Inactive</option>
+    </select>
+    <button id="searchButton">Confirm</button>
+    <button id="addButton">Add</button>
+</div>
+
+<div style="height: 450px; overflow: auto;">
+    <table>
+        <thead>
+        <tr>
+            <th>ID</th>
+            <th>HOSPITAL</th>
+            <th>NAME</th>
+            <th>AGE</th>
+            <th>PHONE</th>
+            <th>EMAIL</th>
+            <th>STATUS</th>
+            <th>OPTION</th>
+        </tr>
+        </thead>
+        <tbody>
+        <!-- Ergodic set -->
+        <tr th:each="row : ${tableData}"
+            th:data-id="${row.id}"
+            th:data-hospitalId="${row.hospitalId}"
+            th:data-name="${row.name}"
+            th:data-age="${row.age}"
+            th:data-phone="${row.phone}"
+            th:data-email="${row.email}"
+            th:data-status="${row.status_str}">
+            <td th:text="${row.id}"></td>
+            <td th:text="${row.hospitalId}"></td>
+            <td th:text="${row.name}"></td>
+            <td th:text="${row.age}"></td>
+            <td th:text="${row.phone}"></td>
+            <td th:text="${row.email}"></td>
+            <td th:text="${row.status_str}"></td>
+            <td class="tdOption">
+                <label id="edit" class="btn">Edit</label>
+                <label id="delete" class="btn">Delete</label>
+                <label id="freeze" class="btn">Freeze</label>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</div>
+
+<!-- mask layer -->
+<div id="overlay"></div>
+<!-- form -->
+<div id="formContainer">
+    <form id="dynamicForm">
+        <label for="hospitalId">hospitalId:</label>
+        <input type="text" id="hospitalId" placeholder="Please enter patient hospitalId">
+
+        <label for="name">name:</label>
+        <input type="text" id="name" placeholder="Please enter patient name">
+
+        <label for="age">age:</label>
+        <input type="text" id="age" placeholder="Please enter patient age">
+
+        <label for="phone">phone:</label>
+        <input type="text" id="phone" placeholder="Please enter patient phone">
+
+        <label for="email">email:</label>
+        <input type="text" id="email" placeholder="Please enter patient email">
+
+        <input type="text" id="status" style="display: none">
+        <input type="text" id="id" style="display: none">
+    </form>
+    <button type="button" onclick="submitForm()" style="margin-right: 170px;margin-left: 20px">submit</button>
+    <button type="button" onclick="location.reload()">Cancel</button>
+</div>
+
+
+<div id="overlay_add"></div>
+<div id="formContainer_add">
+    <form id="dynamicForm_add">
+
+        <!--        <label for="addHospitalId">HospitalId:</label>-->
+        <!--        <input type="text" id="addHospitalId" placeholder="Please enter patient HospitalId">-->
+
+        <label for="addName">Name:</label>
+        <input type="text" id="addName" placeholder="Please enter patient name">
+
+        <label for="addAge">Age:</label>
+        <input type="text" id="addAge" placeholder="Please enter patient age">
+
+        <label for="addPhone">Phone:</label>
+        <input type="text" id="addPhone" placeholder="Please enter patient phone">
+
+        <label for="addEmail">Email:</label>
+        <input type="text" id="addEmail" placeholder="Please enter patient email">
+
+        <!--        <label for="addRoleId">RoleId:</label>-->
+        <!--        <input type="text" id="addRoleId" placeholder="Please enter patient RoleId">-->
+
+        <!--        <label for="addRoleType">RoleType:</label>-->
+        <!--        <input type="text" id="addRoleType" placeholder="Please enter patient RoleType">-->
+
+    </form>
+    <button type="button" id="addPatient" style="margin-right: 170px;margin-left: 20px">Submit</button>
+    <button type="button" onclick="location.reload()">Cancel</button>
+</div>
+
+
+<script src="/js/mainPatientView.js"></script>
+
+</body>
+</html>