Ajith
/
Coworkspace_live
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

building id dynamically and live issue fixed (wrong build & category) booking by user & fixed the changes officerdashboard page for caretaker2

master
AJITHKUMAR12 9 months ago
parent
f278fc60a3
commit
d9358e997e
8 changed files with 4298 additions and 3809 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 312
      src/main/java/com/gcc/coworkspace/controller/BookingController.java
  2. 682
      src/main/java/com/gcc/coworkspace/controller/controller.java
  3. 896
      src/main/java/com/gcc/coworkspace/service/BookingService.java
  4. 4
      src/main/resources/application.properties
  5. 376
      src/main/resources/templates/caretaker/officer-dashboard.html
  6. 355
      src/main/resources/templates/user/book-Conferance.html
  7. 289
      src/main/resources/templates/user/book-reading.html
  8. 23
      src/main/resources/templates/user/book-workdesk.html

312
src/main/java/com/gcc/coworkspace/controller/BookingController.java
View File

@ -1,11 +1,10 @@
package com.gcc.coworkspace.controller;
import com.gcc.coworkspace.component.UserSession;
import com.gcc.coworkspace.configuration.AppConfig;
import com.gcc.coworkspace.configuration.QrGenerator;
import com.gcc.coworkspace.constants.AppConstants;
import com.gcc.coworkspace.exception.NoSlotAvailable;
import com.gcc.coworkspace.service.BookingService;
import com.gcc.coworkspace.service.NormalSMS;
import com.gcc.coworkspace.service.PaymentService;
@ -54,8 +53,39 @@ public class BookingController {
@Autowired
private NormalSMS normalSMS;
/*
* @PostMapping("/saveInTemp")
* public Map<String, Object> booking(@RequestParam("catId") int catId,
*
* @RequestParam("buildId") int buildId,
*
* @RequestParam("subId") int subId,
*
* @RequestParam("noOfPeople") int noOfPeople,
*
* @RequestParam("fromDate") LocalDate fromDate,
*
* @RequestParam("toDate") LocalDate toDate,
*
* @RequestParam("userName") String userName,
*
* @RequestParam("userMobile") long userMobile,
* // @RequestParam("amount") double amount,
*
* @RequestParam("slots") List<Integer> slots) {
*
* System.out.println(catId);
* System.out.println(slots);
* return bookingService.saveTempBooking(userName, userMobile, slots, fromDate,
* toDate, noOfPeople, catId, buildId,
* subId);
*
* }
*/
@PostMapping("/saveInTemp")
public Map<String, Object> booking(@RequestParam("catId") int catId,
public ResponseEntity<Map<String, Object>> booking(
@RequestParam("catId") int catId,
@RequestParam("buildId") int buildId,
@RequestParam("subId") int subId,
@RequestParam("noOfPeople") int noOfPeople,
@ -63,53 +93,73 @@ public class BookingController {
@RequestParam("toDate") LocalDate toDate,
@RequestParam("userName") String userName,
@RequestParam("userMobile") long userMobile,
// @RequestParam("amount") double amount,
@RequestParam("slots") List<Integer> slots){
@RequestParam("slots") List<Integer> slots) {
System.out.println("buildId" + buildId);
System.out.println("catId" + catId);
System.out.println(catId);
System.out.println(slots);
return bookingService.saveTempBooking(userName,userMobile, slots, fromDate, toDate,noOfPeople,catId,buildId,subId) ;
Map<String, Object> response = new HashMap<>();
}
try {
Map<String, Object> result = bookingService.saveTempBooking(
userName, userMobile, slots,
fromDate, toDate, noOfPeople,
catId, buildId, subId);
// @PostMapping("/saveBooking")
// public int saveBooking(@RequestParam("tempBookId") int tempBookId){
//
// return bookingService.saveBooking(tempBookId);
// }
/*
@GetMapping("/checkAvail")
public Boolean checkAvailability(int bid,int cid,LocalDate bDate,int scid,int noOfPerson,int slotId){
System.out.println("check Availability");
return bookingService.checkAvailabilityByBdate(bid,cid,bDate,scid,noOfPerson,slotId);
response.put("status", "SUCCESS");
response.putAll(result);
return ResponseEntity.ok(response);
} catch (NoSlotAvailable e) {
response.put("status", "ERROR");
response.put("message", e.getMessage());
return ResponseEntity
.status(HttpStatus.BAD_REQUEST)
.body(response);
}
}
*/
// @PostMapping("/saveBooking")
// public int saveBooking(@RequestParam("tempBookId") int tempBookId){
//
// return bookingService.saveBooking(tempBookId);
// }
/*
* @GetMapping("/checkAvail")
* public Boolean checkAvailability(int bid,int cid,LocalDate bDate,int scid,int
* noOfPerson,int slotId){
* System.out.println("check Availability");
* return
* bookingService.checkAvailabilityByBdate(bid,cid,bDate,scid,noOfPerson,slotId)
* ;
* }
*/
@GetMapping("/checkAvail")
public Boolean checkAvailability(int bid,int cid,LocalDate bDate,int scid,int noOfPerson,int slotId){
public Boolean checkAvailability(int bid, int cid, LocalDate bDate, int scid, int noOfPerson, int slotId) {
System.out.println("check Availability");
return bookingService.checkAvailabilityByBdate(bid,cid,bDate,scid,noOfPerson,slotId);
return bookingService.checkAvailabilityByBdate(bid, cid, bDate, scid, noOfPerson, slotId);
}
@GetMapping("/hasTodayAttendance")
public ResponseEntity<Map<String,Object>> hasTodayAttendance(
public ResponseEntity<Map<String, Object>> hasTodayAttendance(
@RequestParam("buildingid") int buildingid) {
boolean exists = bookingService.hasTodayAttendance(buildingid);
Map<String,Object> response = new HashMap<>();
Map<String, Object> response = new HashMap<>();
response.put("exists", exists);
return ResponseEntity.ok(response);
}
@PostMapping(value="/create_order")
public String create_order(HttpServletRequest request,@RequestParam("id") int tempid) throws RazorpayException {
@PostMapping(value = "/create_order")
public String create_order(HttpServletRequest request, @RequestParam("id") int tempid) throws RazorpayException {
// Get data from the service
Map<String, Object> tempBookingInfo = bookingService.getTempBookingByTempId(tempid);
// Check if the list is not empty
if (tempBookingInfo!=null && !tempBookingInfo.isEmpty()) {
if (tempBookingInfo != null && !tempBookingInfo.isEmpty()) {
String tempbookid = tempBookingInfo.get("tempbookid").toString();
String amount = tempBookingInfo.get("amount").toString();
@ -121,54 +171,52 @@ public class BookingController {
System.out.println("Invalid number format for amount: " + amount);
}
//To enable testing mode in appConstants if required for testing & development
var client = new RazorpayClient(AppConstants.key_id,AppConstants.key_secret);
// To enable testing mode in appConstants if required for testing & development
var client = new RazorpayClient(AppConstants.key_id, AppConstants.key_secret);
JSONObject options = new JSONObject();
options.put("amount", amountDouble * 100);
options.put("currency", "INR");
Order od = client.orders.create(options);
System.out.println(od);
paymentService.saveorderLog(od.get("id").toString(),od.toString(),tempbookid);
paymentService.saveorderLog(od.get("id").toString(), od.toString(), tempbookid);
return od.toString();
} else {
System.out.println("No data found for tempid: " + tempid);
return "No data found for tempid: " + tempid;
}
// return "error";
// return "error";
}
@PostMapping("/Confirm")
public String updateOrder(@RequestBody Map<String,Object> data){
String tempid=data.get("id").toString();;
String pay_id= data.get("payment_id").toString();
String order_id=data.get("order_id").toString();
String status=data.get("status").toString();
String amount =(Double.parseDouble(data.get("amount").toString())/100)+"";
int pid = paymentService.savePayment(amount,pay_id,order_id,status,0+"",0+"");
public String updateOrder(@RequestBody Map<String, Object> data) {
String tempid = data.get("id").toString();
;
String pay_id = data.get("payment_id").toString();
String order_id = data.get("order_id").toString();
String status = data.get("status").toString();
String amount = (Double.parseDouble(data.get("amount").toString()) / 100) + "";
int pid = paymentService.savePayment(amount, pay_id, order_id, status, 0 + "", 0 + "");
try {
int bookingId = bookingser.saveBooking(Integer.parseInt(tempid),pid);
//
int bookingId = bookingser.saveBooking(Integer.parseInt(tempid), pid);
//
// Print or use the values as required
System.out.println("Temp ID: " + tempid);
System.out.println("Booking ID:- "+bookingId);
return bookingId+"";
System.out.println("Booking ID:- " + bookingId);
return bookingId + "";
}catch (Exception e){
System.out.println("error: "+e.getMessage());
} catch (Exception e) {
System.out.println("error: " + e.getMessage());
System.out.println("No booking data found for tempid: " + tempid);
return "error";
}
}
//mobile app development
// mobile app development
@GetMapping("/bookings")
public ResponseEntity<List<Map<String, Object>>> getBookingsByMobileNo(@RequestParam long mobileNo) {
List<Map<String, Object>> bookings = bookingService.getBookingByMobileNo(mobileNo);
@ -177,6 +225,7 @@ public class BookingController {
}
return ResponseEntity.ok(bookings); // Return 200 with the bookings data
}
@GetMapping("/generate-qrcode")
public ResponseEntity<?> generateQRCode(@RequestParam(required = true) String booking_id) {
if (booking_id == null) {
@ -184,7 +233,7 @@ public class BookingController {
}
try {
// URL for the booking details API
String url = appConfig.getFull_URL()+"/bookingQRCode?booking_id=" + booking_id;
String url = appConfig.getFull_URL() + "/bookingQRCode?booking_id=" + booking_id;
// Generate QR code as base64 string
String base64QRCode = QrGenerator.generateQRCode(url);
@ -214,7 +263,7 @@ public class BookingController {
int otp = rand.nextInt(90000) + 10000;
System.out.print("\n otp---:" + otp);
String bodyMessage = normalSMS.sendOTPNsms(mobileNo,otp+"");
String bodyMessage = normalSMS.sendOTPNsms(mobileNo, otp + "");
HttpSession session = request.getSession();
session.setAttribute("otp", otp);
@ -222,7 +271,6 @@ public class BookingController {
return bodyMessage;
}
@GetMapping(value = "/verifyOTP")
@ResponseBody
public Map<String, Object> verifyOtp(HttpServletRequest request, @RequestParam String otp) {
@ -270,37 +318,40 @@ public class BookingController {
return response;
}
/*
@GetMapping(value = "/verifyOTP")
public String verifyOtp(HttpServletRequest request, @RequestParam String otp) {
HttpSession session = request.getSession();
try {
Integer session_otp = (Integer) session.getAttribute("otp");
System.out.println("session_otp---:" + session_otp);
Integer entered_otp = Integer.parseInt(otp);
if (session_otp != null && session_otp.equals(entered_otp)) {
System.out.println("Entered OTP Correct");
session.setAttribute("verifiedotp", "success");
userSession.setMobileno(Long.parseLong(session.getAttribute("mobileNo").toString()));
return "Success";
} else {
System.out.println("Incorrect OTP. Please enter correct OTPs.");
session.setAttribute("verifiedotp", "error");
return "Error";
}
} catch (NumberFormatException e) {
System.out.println("Invalid OTP format: " + otp);
return "Error";
} catch (Exception e) {
System.out.println("Error verifying OTP: " + e.getMessage());
return "Error";
}
}
* @GetMapping(value = "/verifyOTP")
* public String verifyOtp(HttpServletRequest request, @RequestParam String otp)
* {
* HttpSession session = request.getSession();
*
* try {
* Integer session_otp = (Integer) session.getAttribute("otp");
* System.out.println("session_otp---:" + session_otp);
* Integer entered_otp = Integer.parseInt(otp);
*
* if (session_otp != null && session_otp.equals(entered_otp)) {
* System.out.println("Entered OTP Correct");
* session.setAttribute("verifiedotp", "success");
* userSession.setMobileno(Long.parseLong(session.getAttribute("mobileNo").
* toString()));
* return "Success";
* } else {
* System.out.println("Incorrect OTP. Please enter correct OTPs.");
* session.setAttribute("verifiedotp", "error");
* return "Error";
* }
* } catch (NumberFormatException e) {
* System.out.println("Invalid OTP format: " + otp);
* return "Error";
* } catch (Exception e) {
* System.out.println("Error verifying OTP: " + e.getMessage());
* return "Error";
* }
* }
*/
// @PostMapping("/validatelogin")
// public ResponseEntity<?> checkLogin(@RequestParam String usernametxt, @RequestParam String passwordtxt, HttpSession session) {
// public ResponseEntity<?> checkLogin(@RequestParam String usernametxt,
// @RequestParam String passwordtxt, HttpSession session) {
// try {
// String userName = bookingser.validateLogin(usernametxt, passwordtxt);
@ -316,11 +367,11 @@ public class BookingController {
// }
// } catch (Exception e) {
// e.printStackTrace();
// return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Internal server error occurred");
// return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Internal
// server error occurred");
// }
// }
// added by yogi
@PostMapping("/validatelogin")
public ResponseEntity<?> checkLogin(
@ -334,7 +385,7 @@ public class BookingController {
if (userData != null) {
String userName = (String) userData.get("user_name");
//Integer bid = (Integer) userData.get("bid");
// Integer bid = (Integer) userData.get("bid");
// FIX: Convert BID safely
Integer bid = Integer.valueOf(userData.get("bid").toString());
@ -349,7 +400,6 @@ public class BookingController {
response.put("user_name", userName);
response.put("bid", bid);
System.out.println("Logged in user=" + userName + ", BID=" + bid);
return ResponseEntity.ok(response);
@ -364,9 +414,7 @@ public class BookingController {
}
}
//ak
// ak
@GetMapping("/bookinghistorydetails")
@ResponseBody
@ -389,13 +437,16 @@ public class BookingController {
// Replace with the actual view name
}
/* @GetMapping("/getbookingdetailDashBoard")
public List<Map<String, Object>> getbookingdetailDashBoard(@RequestParam String fromDate, @RequestParam String toDate, @RequestParam String status) {
return bookingService.getbookingdetailDashBoard(fromDate,toDate, status);
}*/
//ak
/*
* @GetMapping("/getbookingdetailDashBoard")
* public List<Map<String, Object>> getbookingdetailDashBoard(@RequestParam
* String fromDate, @RequestParam String toDate, @RequestParam String status) {
* return bookingService.getbookingdetailDashBoard(fromDate,toDate, status);
* }
*/
// ak
@GetMapping("/getbookingdetailDashBoard")
public List<Map<String, Object>> getbookingdetailDashBoard(
public List<Map<String, Object>> getbookingdetailDashBoard(
@RequestParam String fromDate,
@RequestParam String toDate,
@RequestParam String status,
@ -406,19 +457,22 @@ public List<Map<String, Object>> getbookingdetailDashBoard(
System.out.println("toDate: " + toDate);
return bookingService.getbookingdetailDashBoard(fromDate, toDate, status, bid);
}
}
/* @GetMapping("/amountCollected")
public List<Map<String, Object>> getAmountCollected(@RequestParam("fromDate") String fromDate,
@RequestParam("toDate") String toDate) {
// Convert the string dates to LocalDate
LocalDate parsedFromDate = LocalDate.parse(fromDate);
LocalDate parsedToDate = LocalDate.parse(toDate);
return bookingService.getAmountCollectedByDate(parsedFromDate, parsedToDate);
}*/
/*
* @GetMapping("/amountCollected")
* public List<Map<String, Object>> getAmountCollected(@RequestParam("fromDate")
* String fromDate,
*
* @RequestParam("toDate") String toDate) {
* // Convert the string dates to LocalDate
* LocalDate parsedFromDate = LocalDate.parse(fromDate);
* LocalDate parsedToDate = LocalDate.parse(toDate);
* return bookingService.getAmountCollectedByDate(parsedFromDate, parsedToDate);
* }
*/
@GetMapping("/amountCollected")
public List<Map<String, Object>> getAmountCollected(
public List<Map<String, Object>> getAmountCollected(
@RequestParam("fromDate") String fromDate,
@RequestParam("toDate") String toDate,
@RequestParam("bid") int bid) {
@ -427,40 +481,46 @@ public List<Map<String, Object>> getAmountCollected(
LocalDate parsedToDate = LocalDate.parse(toDate);
return bookingService.getAmountCollectedByDate(parsedFromDate, parsedToDate, bid);
}
}
/*@GetMapping("/bookingCountByCategory")
public List<Map<String, Object>> getBookingCountsByCategory(@RequestParam("fromDate") String fromDate,
@RequestParam("toDate") String toDate,) {
// Call the service method to get the booking counts for the specified date range
return bookingService.getBookingCountsByCategory(fromDate, toDate);
}*/
//ak
/*
* @GetMapping("/bookingCountByCategory")
* public List<Map<String, Object>>
* getBookingCountsByCategory(@RequestParam("fromDate") String fromDate,
*
* @RequestParam("toDate") String toDate,) {
* // Call the service method to get the booking counts for the specified date
* range
* return bookingService.getBookingCountsByCategory(fromDate, toDate);
* }
*/
// ak
@GetMapping("/bookingCountByCategory")
public List<Map<String, Object>> getBookingCountsByCategory(
public List<Map<String, Object>> getBookingCountsByCategory(
@RequestParam("fromDate") String fromDate,
@RequestParam("toDate") String toDate,
@RequestParam("bid") int bid) {
return bookingService.getBookingCountsByCategory(fromDate, toDate, bid);
}
}
/* @GetMapping("/totalBookingCounts")
public List<Map<String, Object>> getBookingCounts(@RequestParam("fromDate") String fromDate,@RequestParam("toDate")String toDate) {
// Call service method to get booking counts
return bookingService.getBookingCountsByDate(fromDate,toDate);
}*/
//ak
/*
* @GetMapping("/totalBookingCounts")
* public List<Map<String, Object>> getBookingCounts(@RequestParam("fromDate")
* String fromDate,@RequestParam("toDate")String toDate) {
* // Call service method to get booking counts
* return bookingService.getBookingCountsByDate(fromDate,toDate);
* }
*/
// ak
@GetMapping("/totalBookingCounts")
public List<Map<String, Object>> getBookingCounts(
public List<Map<String, Object>> getBookingCounts(
@RequestParam("fromDate") String fromDate,
@RequestParam("toDate") String toDate,
@RequestParam("bid") int bid) {
return bookingService.getBookingCountsByDate(fromDate, toDate, bid);
}
}
@GetMapping("/bookinghistory")
@ResponseBody

682
src/main/java/com/gcc/coworkspace/controller/controller.java
File diff suppressed because it is too large
View File

896
src/main/java/com/gcc/coworkspace/service/BookingService.java
File diff suppressed because it is too large
View File

4
src/main/resources/application.properties
View File

@ -1,6 +1,6 @@
spring.application.name=conferencehall
#spring.profiles.active=dev
spring.profiles.active=prod
spring.profiles.active=dev
#spring.profiles.active=prod
server.port=8074

376
src/main/resources/templates/caretaker/officer-dashboard.html
View File

@ -1,53 +1,53 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="~{fragments/user-head :: head}">
<title>Officer Dashboard</title>
<!-- DataTables CSS -->
<link rel="stylesheet"
href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
<!-- AmCharts libraries -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<title>Officer Dashboard</title>
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
<!-- AmCharts libraries -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
</head>
<style>
* {
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
}
.containers {
.containers {
background-color: #f4f4f9;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
}
}
.table-responsive {
.table-responsive {
overflow-x: auto;
width: 100%;
}
}
/*.date-div{*/
/* !*max-width: 1300px;*!*/
/* !*display: flex;*!*/
/* align-items: start;*/
/* justify-content: start;*/
/*}*/
.container {
/*.date-div{*/
/* !*max-width: 1300px;*!*/
/* !*display: flex;*!*/
/* align-items: start;*/
/* justify-content: start;*/
/*}*/
.container {
display: flex;
gap: 30px;
max-width: 1125px;
margin-top: 20px;
}
}
.card-item {
.card-item {
width: 250px;
height: 150px;
background-color: #EBEBEB;
@ -60,43 +60,46 @@
border: 2px solid #D4D2E3;
font-weight: bold;
text-align: center;
}
/*.container1 {*/
/* display: flex;*/
/* flex-wrap: nowrap; !* Prevent wrapping *!*/
/* gap: 30px;*/
/* overflow-x: auto; !* Allow horizontal scroll on smaller screens *!*/
/* padding: 20px;*/
/* max-width: 1300px;*/
/* justify-content: flex-start;*/
/*}*/
.container1 {
}
/*.container1 {*/
/* display: flex;*/
/* flex-wrap: nowrap; !* Prevent wrapping *!*/
/* gap: 30px;*/
/* overflow-x: auto; !* Allow horizontal scroll on smaller screens *!*/
/* padding: 20px;*/
/* max-width: 1300px;*/
/* justify-content: flex-start;*/
/*}*/
.container1 {
display: flex;
flex-wrap: nowrap; /* force all cards in one row */
flex-wrap: nowrap;
/* force all cards in one row */
gap: 30px;
overflow-x: auto; /* scroll on smaller screens */
overflow-x: auto;
/* scroll on smaller screens */
padding: 20px;
max-width: 1300px;
justify-content: flex-start;
}
}
.bar-chart-container {
.bar-chart-container {
display: flex;
align-items: center;
flex-direction: column;
}
}
.card {
.card {
width: 250px;
flex: 0 0 auto; /* Prevent from shrinking or stretching */
}
flex: 0 0 auto;
/* Prevent from shrinking or stretching */
}
.card {
.card {
width: 250px;
height: 400px;
background-color: #EBEBEB;
@ -108,9 +111,9 @@
padding: 12px;
border: 2px solid #D4D2E3;
flex-direction: column;
}
}
.card .content {
.card .content {
width: 100%;
height: 100%;
background-color: white;
@ -121,114 +124,132 @@
align-items: center;
justify-content: center;
padding: 15px;
}
}
/*.card h1 {*/
/* font-size: 18px;*/
/* color: #152C5B;*/
/* margin-bottom: 15px;*/
/* text-align: center;*/
/*}*/
/*.card h1 {*/
/* font-size: 18px;*/
/* color: #152C5B;*/
/* margin-bottom: 15px;*/
/* text-align: center;*/
/*}*/
.card h1 {
.card h1 {
text-align: left;
width: 100%;
font-size: 18px;
color: #152C5B;
margin-bottom: 15px;
}
}
/*.chart-container {*/
/* width: 200px;*/
/* height: 400px;*/
/* margin: auto;*/
/*}*/
/*.chart-container {*/
/* width: 200px;*/
/* height: 400px;*/
/* margin: auto;*/
/*}*/
.chart-container {
/* .chart-container {
width: 100%;
min-height: 240px;
display: flex;
justify-content: flex-start; /* Align chart canvas to left */
}
justify-content: flex-start;
}*/
.chart-container {
width: 100%;
height: 240px;
display: flex;
justify-content: center;
align-items: center;
}
.date-layout {
.date-layout {
display: flex;
gap: 20px; /* Space between the date pickers */
justify-content: flex-start; /* Aligns date pickers to the left */
gap: 20px;
/* Space between the date pickers */
justify-content: flex-start;
/* Aligns date pickers to the left */
align-items: center;
margin-bottom: 20px; /* Adds space below the date pickers */
margin-bottom: 20px;
/* Adds space below the date pickers */
padding-top: 40px;
margin-top: 20px;
margin-left: 195px; /* Shifts the layout slightly to the right */
margin-left: 195px;
/* Shifts the layout slightly to the right */
/*width: 100%; !* Ensures the layout stretches across the container *!*/
width: calc(100% - 80px);
/* Adjusts width so it stays within the viewport */
}
.hidden-card {
}
.hidden-card {
display: none !important;
}
}
.custom-card {
.custom-card {
margin-top: 84px;
width: 93%;
height: 100%;
background-color: white;
}
}
.date-picker {
.date-picker {
display: flex;
align-items: center;
gap: 10px; /* Space between label and input */
}
gap: 10px;
/* Space between label and input */
}
.form-label {
.form-label {
font-size: 14px;
}
}
input[type="date"] {
input[type="date"] {
padding: 8px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 5px;
width: 150px; /* Adjust width as needed */
}
width: 150px;
/* Adjust width as needed */
}
.containers {
.containers {
background-color: #f4f4f9;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
}
.wrap {
}
.wrap {
flex-wrap: wrap !important;
}
.hidden-card {
}
.hidden-card {
display: none !important;
}
}
/* button style*/
.legend-text {
/* button style*/
.legend-text {
font-weight: bold;
margin-right: 5px;
color: #333;
}
}
.legend-value {
.legend-value {
color: #666;
}
}
.dataTables_filter {
.dataTables_filter {
text-align: right;
}
}
.dataTables_filter {
.dataTables_filter {
text-align: right;
}
}
</style>
<body>
@ -249,13 +270,12 @@ input[type="date"] {
<!-- Date Layout -->
<div class="date-layout">
<div class="date-picker">
<label for="fromDate" class="form-label">From Date</label> <input
type="date" placeholder="from date" id="fromDate"
name="fromDate">
<label for="fromDate" class="form-label">From Date</label> <input type="date"
placeholder="from date" id="fromDate" name="fromDate">
</div>
<div class="date-picker">
<label for="toDate" class="form-label">To Date</label> <input
type="date" placeholder="to date" id="toDate" name="toDate">
<label for="toDate" class="form-label">To Date</label> <input type="date"
placeholder="to date" id="toDate" name="toDate">
</div>
</div>
@ -342,15 +362,13 @@ input[type="date"] {
<div class="card filter-card"
style="width: 97%; height: 100%; background-color: white;">
<div class="card filter-card" style="width: 97%; height: 100%; background-color: white;">
<div class="row"
style="margin-left: auto; margin-right: 20px; display: flex; justify-content: flex-end;">
<div class="col-sm-12">
<label for="status" class="form-label"
style="margin-left: auto; margin-right: 0; display: flex; justify-content: flex-end;">Status</label>
<select id="status" name="status"
class="form-control text-center">
<select id="status" name="status" class="form-control text-center">
<option value="" class="">select</option>
<option value="">All</option>
<option value="Upcoming">Upcoming</option>
@ -376,10 +394,10 @@ input[type="date"] {
<!-- Filter container with date and type dropdowns and status buttons -->
<div class="col-md-12">
<div class="card-table table-container mt-2"
id="nameinclusiontable">
<div class="card-table table-container mt-2" id="nameinclusiontable">
<div class="table-responsive">
<table id="nameinclusion" class="table table-bordered nowrap" style="width:100%">
<table id="nameinclusion" class="table table-bordered nowrap"
style="width:100%">
<thead>
<tr>
<th>S.No</th>
@ -420,12 +438,9 @@ input[type="date"] {
<script th:replace="~{fragments/user-script :: script}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- DataTables JS -->
<script
src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script
src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
@ -461,7 +476,7 @@ input[type="date"] {
chartsContainer.children[2].style.display = "none"; // Conference Total Bookings
chartsContainer.children[3].style.display = "flex"; // Learning Total Bookings
}
});*/
});*/
// Initialize DataTable
@ -481,7 +496,7 @@ input[type="date"] {
readingBarChart;
// AJAX function to fetch amount collected
function fetchAmountCollected(fromDate, toDate,bid, callback) {
function fetchAmountCollected(fromDate, toDate, bid, callback) {
console.log("fromdate", fromDate);
//let bid = document.getElementById("bid").value;
@ -489,7 +504,7 @@ input[type="date"] {
$.ajax({
url: "/muthalvarpadaippagam/book/api/amountCollected",
type: "GET",
data: {fromDate, toDate,bid},
data: { fromDate, toDate, bid },
dataType: "json",
success: function (response) {
console.log("Amount Collected Response:", response);
@ -507,14 +522,14 @@ input[type="date"] {
}
// AJAX function to fetch booking counts
function fetchBookingCounts(fromDate, toDate, bid,callback) {
function fetchBookingCounts(fromDate, toDate, bid, callback) {
//console.log("fromdate", fromDate)
//console.log("todate",toDate)
//console.log("bid for fetchbookingcounts",bid)
$.ajax({
url: "/muthalvarpadaippagam/book/api/bookingCountByCategory",
type: "GET",
data: {fromDate, toDate,bid},
data: { fromDate, toDate, bid },
dataType: "json",
success: function (response) {
if (response && response.length > 0) {
@ -531,11 +546,11 @@ input[type="date"] {
}
// AJAX function to fetch Overallbooking counts
function fetchOverAllBookingCounts(fromDate, toDate,bid, callback) {
function fetchOverAllBookingCounts(fromDate, toDate, bid, callback) {
$.ajax({
url: "/muthalvarpadaippagam/book/api/totalBookingCounts",
type: "GET",
data: {fromDate, toDate,bid},
data: { fromDate, toDate, bid },
dataType: "json",
success: function (response) {
if (response && response.length > 0) {
@ -554,6 +569,7 @@ input[type="date"] {
// Function to render amount collected
function renderAmountCollected(data) {
console.log("data", data)
if (data) {
document.getElementById("overallAmount").innerText =
"Rs. " + (data.overall_amount_collected || 0).toLocaleString();
@ -577,6 +593,7 @@ input[type="date"] {
//function to renderOverallBookingCounts
function renderOverallBookingCounts(data) {
console.log("data", data)
if (data) {
// Update charts with the fetched data
updateChart(overallDoughnutChart, [
@ -618,6 +635,7 @@ input[type="date"] {
}
}
// Update chart data
function updateChart(chart, data) {
if (chart) {
@ -639,26 +657,26 @@ input[type="date"] {
initializeCharts();
// Fetch initial data with today's date as default
fetchAmountCollected(today, today,bid, renderAmountCollected);
fetchBookingCounts(today, today,bid, renderBookingCounts);
fetchOverAllBookingCounts(today, today,bid, renderOverallBookingCounts);
fetchAmountCollected(today, today, bid, renderAmountCollected);
fetchBookingCounts(today, today, bid, renderBookingCounts);
fetchOverAllBookingCounts(today, today, bid, renderOverallBookingCounts);
// Add date change listeners
document.getElementById("fromDate").addEventListener("change", () => {
const fromDate = document.getElementById("fromDate").value;
const toDate = document.getElementById("toDate").value;
fetchAmountCollected(fromDate, toDate,bid, renderAmountCollected);
fetchBookingCounts(fromDate, toDate, bid,renderBookingCounts);
fetchOverAllBookingCounts(fromDate, toDate,bid, renderOverallBookingCounts);
fetchAmountCollected(fromDate, toDate, bid, renderAmountCollected);
fetchBookingCounts(fromDate, toDate, bid, renderBookingCounts);
fetchOverAllBookingCounts(fromDate, toDate, bid, renderOverallBookingCounts);
});
document.getElementById("toDate").addEventListener("change", () => {
const fromDate = document.getElementById("fromDate").value;
const toDate = document.getElementById("toDate").value;
fetchAmountCollected(fromDate, toDate,bid, renderAmountCollected);
fetchBookingCounts(fromDate, toDate,bid, renderBookingCounts);
fetchOverAllBookingCounts(fromDate, toDate, bid,renderOverallBookingCounts);
fetchAmountCollected(fromDate, toDate, bid, renderAmountCollected);
fetchBookingCounts(fromDate, toDate, bid, renderBookingCounts);
fetchOverAllBookingCounts(fromDate, toDate, bid, renderOverallBookingCounts);
});
});
@ -685,7 +703,7 @@ input[type="date"] {
position: "bottom",
align: "start",
labels: {
generateLabels: function(chart) {
generateLabels: function (chart) {
const dataset = chart.data.datasets[0];
return chart.data.labels.map((label, i) => ({
text: `${label}: ${dataset.data[i]}`,
@ -726,7 +744,7 @@ input[type="date"] {
position: "bottom",
align: "start",
labels: {
generateLabels: function(chart) {
generateLabels: function (chart) {
const dataset = chart.data.datasets[0];
return chart.data.labels.map((label, i) => ({
text: `${label}: ${dataset.data[i]}`,
@ -748,7 +766,7 @@ input[type="date"] {
labels: ['HD', 'FD', 'M'], // Define fixed labels
ticks: {
color: '#1E3A8A',
callback: function(value, index) {
callback: function (value, index) {
return this.getLabelForValue(index);
}
}
@ -764,7 +782,7 @@ input[type="date"] {
{
type: "doughnut",
data: {
labels: ["4 Seater - Hall 1", "4 Seater - Hall 2"," 6 Seater"],
labels: ["4 Seater - Hall 1", "4 Seater - Hall 2", " 6 Seater"],
datasets: [
{
data: [0, 0, 0],
@ -779,7 +797,7 @@ input[type="date"] {
position: "bottom",
align: "start",
labels: {
generateLabels: function(chart) {
generateLabels: function (chart) {
const dataset = chart.data.datasets[0];
return chart.data.labels.map((label, i) => ({
text: `${label}: ${dataset.data[i]}`,
@ -811,7 +829,7 @@ input[type="date"] {
datasets: [
{
data: [24, 85, 54, 36, 19],
backgroundColor: ["#1E3A8A","#4C1D95","#374151","#10B981","#9A3412"],
backgroundColor: ["#1E3A8A", "#4C1D95", "#374151", "#10B981", "#9A3412"],
},
],
},
@ -822,7 +840,7 @@ input[type="date"] {
position: "bottom",
align: "start",
labels: {
generateLabels: function(chart) {
generateLabels: function (chart) {
const dataset = chart.data.datasets[0];
return chart.data.labels.map((label, i) => ({
text: `${label}: ${dataset.data[i]}`,
@ -844,7 +862,7 @@ input[type="date"] {
labels: ['S1', 'S2', 'S3', 'S4', 'S5'], // Define fixed labels
ticks: {
color: '#1E3A8A',
callback: function(value, index) {
callback: function (value, index) {
return this.getLabelForValue(index);
}
}
@ -860,37 +878,37 @@ input[type="date"] {
//ajax function
$(document).ready(function () {
// Initialize DataTable on page load
// Initialize DataTable on page load
const dataTable = $('#nameinclusion').DataTable();
// Set default date values for fromDate and toDate inputs
// Set default date values for fromDate and toDate inputs
// const today = new Date().toISOString().split("T")[0];
//document.getElementById("fromDate").value = today;
// document.getElementById("toDate").value = today;
const fromDateInput = document.getElementById("fromDate");
const toDateInput = document.getElementById("toDate");
const toDateInput = document.getElementById("toDate");
// Calculate today's date
const today = new Date();
//ak done for loading date format
// Calculate today's date
const today = new Date();
//ak done for loading date format
const todayStr = today.toISOString().split("T")[0];
const todayStr = today.toISOString().split("T")[0];
// Calculate max date (today + 2 months)
const maxDate = new Date(today);
maxDate.setMonth(maxDate.getMonth() + 2);
const maxDateStr = maxDate.toISOString().split("T")[0];
// Calculate max date (today + 2 months)
const maxDate = new Date(today);
maxDate.setMonth(maxDate.getMonth() + 2);
const maxDateStr = maxDate.toISOString().split("T")[0];
// Set max date for both inputs (no min means past dates are allowed)
fromDateInput.max = maxDateStr;
toDateInput.max = maxDateStr;
// Set max date for both inputs (no min means past dates are allowed)
fromDateInput.max = maxDateStr;
toDateInput.max = maxDateStr;
// Set initial values to today
fromDateInput.value = todayStr;
toDateInput.value = todayStr;
// Set initial values to today
fromDateInput.value = todayStr;
toDateInput.value = todayStr;
// Function to update toDate range based on fromDate
function updateToDateRange() {
// Function to update toDate range based on fromDate
function updateToDateRange() {
const fromDate = new Date(fromDateInput.value);
if (!isNaN(fromDate.getTime())) {
@ -903,26 +921,26 @@ function updateToDateRange() {
toDateInput.value = fromDateInput.value;
}
}
}
}
// Initial setup
updateToDateRange();
// Initial setup
updateToDateRange();
// Listen for changes in fromDate
fromDateInput.addEventListener("change", updateToDateRange);
// Listen for changes in fromDate
fromDateInput.addEventListener("change", updateToDateRange);
// Trigger AJAX call when either fromDate or toDate changes
function fetchData(fromDate, toDate,bid, status) {
// Trigger AJAX call when either fromDate or toDate changes
function fetchData(fromDate, toDate, bid, status) {
// console.log("bid to fetch data",bid);
// console.log("frondate",fromDate)
// console.log("todate",toDate);
$.ajax({
url: '/muthalvarpadaippagam/book/api/getbookingdetailDashBoard',
type: 'GET',
data: { fromDate: fromDate, toDate: toDate,bid:bid ,status:status },
success: function(response) {
data: { fromDate: fromDate, toDate: toDate, bid: bid, status: status },
success: function (response) {
// console.log(response);
const bookingTableBody = $('#nameinclusion tbody');
dataTable.clear(); // Clear existing table data
@ -961,7 +979,8 @@ fromDateInput.addEventListener("change", updateToDateRange);
<td colspan="10" style="text-align:center;">No booking details available.</td>
</tr>
`;
bookingTableBody.empty().append(noDataRow);}
bookingTableBody.empty().append(noDataRow);
}
// dataTable.draw(); // Clear the DataTable
// // dataTable.rows.add([]); // Add empty rows
// // $('#nameinclusiontable').show();
@ -969,7 +988,7 @@ fromDateInput.addEventListener("change", updateToDateRange);
dataTable.draw(); // Redraw the DataTable
},
error: function(error) {
error: function (error) {
console.error('Error fetching booking details:', error);
alert('Failed to fetch booking details. Please try again later.');
}
@ -980,13 +999,13 @@ fromDateInput.addEventListener("change", updateToDateRange);
//console.log("withoutpassibg",bid);
// Fetch data for today's date on page load
const today1 = new Date().toISOString().split("T")[0];
// Fetch data for today's date on page load
const today1 = new Date().toISOString().split("T")[0];
//console.log("today1",today1)
fetchData(today1, today1,bid, '');
//console.log("today1",today1)
fetchData(today1, today1, bid, '');
// // Fetch data dynamically when dates are changed
// // Fetch data dynamically when dates are changed
function updateData() {
const fromDate = $('#fromDate').val();
const toDate = $('#toDate').val();
@ -996,7 +1015,7 @@ const today1 = new Date().toISOString().split("T")[0];
if (fromDate && toDate) {
// console.log("fromdate",fromDate);
//console.log("todate",toDate);
fetchData(fromDate, toDate,bid, status);
fetchData(fromDate, toDate, bid, status);
}
}
@ -1008,13 +1027,14 @@ const today1 = new Date().toISOString().split("T")[0];
window.history.pushState(null, document.title, window.location.href);
// Handle back button event
window.onpopstate = function() {
window.onpopstate = function () {
// Redirect to home when back button is pressed
window.location.href = '/muthalvarpadaippagam';
};
</script>
</script>
</body>
</html>

355
src/main/resources/templates/user/book-Conferance.html
View File

@ -1,37 +1,39 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="~{fragments/user-head :: head}"></head>
<header th:replace="~{user/razor-pay :: header}"></header>
<style>
.radio-button-group {
.radio-button-group {
display: flex;
}
}
.radio-button-group input[type="radio"] {
.radio-button-group input[type="radio"] {
display: none;
}
}
.radio-button {
.radio-button {
padding: 10px 20px;
margin: 5px; /* Adds space between buttons */
margin: 5px;
/* Adds space between buttons */
border: 1px solid #007bff;
border-radius: 5px;
cursor: pointer;
background-color: #f0f0f0;
color: #007bff;
transition: background-color 0.3s, color 0.3s;
}
}
.radio-button:hover {
.radio-button:hover {
background-color: #E29D25;
color: white;
}
}
.radio-button-group input[type="radio"]:checked + .radio-button {
.radio-button-group input[type="radio"]:checked+.radio-button {
background-color: #E29D25;
color: white;
}
}
.carousel-inner img {
height: 500px;
@ -51,21 +53,26 @@
background-color: #f0f0f0;
padding: 10px;
}
.time-slot-box.booked {
border-color: red;
color: red;
cursor: not-allowed;
}
.time-slot-box.available {
border-color: green;
color: green;
}
.time-slot-box input[type="radio"] {
display: none;
}
.time-slot-box:hover {
background-color: #e0e0e0;
}
#timeSlots {
display: flex;
flex-wrap: wrap;
@ -114,18 +121,20 @@
cursor: pointer;
-webkit-transition: all ease-in 0.3s;
transition: all ease-in 0.3s;
}
}
.btn-primary2.active {
background-color: #E29D25 !important;
color: #FFF;
border-color: green !important;
}
</style>
<body>
<!-- Pre-loader start -->
<div th:replace="~{fragments/preloader :: div}"></div>
<!-- Pre-loader end -->
<div id="pcoded" class="pcoded">
<!-- Pre-loader start -->
<div th:replace="~{fragments/preloader :: div}"></div>
<!-- Pre-loader end -->
<div id="pcoded" class="pcoded">
<div class="pcoded-container">
<!-- Menu header start -->
<nav th:replace="~{fragments/user-nav :: nav}"></nav>
@ -146,7 +155,8 @@
<div class="d-inline">
<h4 style="font-weight:bold;">Book Meeting Room</h4>
<!--<span class="address">Jeganathan street, Agaram, Chennai - 600082</span>-->
<span class="address" th:text="${buildingAddress}">Address not available</span>
<span class="address" th:text="${buildingAddress}">Address not
available</span>
</div>
</div>
@ -183,64 +193,92 @@
<div class="row" id="conferenceHallDiv" style="border-radius: 10px; margin:0px;">
<div class="col-lg-12 col-sm-12">
<div style="border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; padding: 20px; margin-top: 20px;">
<div
style="border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; padding: 20px; margin-top: 20px;">
<form id="conferenceHallForm">
<div class="row">
<div class="col-lg-6 col-sm-0" style="padding:0px;">
<!--photo grid start-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div id="carouselExampleIndicators" class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<!-- <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>-->
<li th:each="homeImg, iterStat : ${homeImg}" class=""
th:classappend="${iterStat.index == 0} ? ' active'" data-target="#carouselExampleIndicators" th:data-slide-to="${iterStat.index}">
<li th:each="homeImg, iterStat : ${homeImg}"
class=""
th:classappend="${iterStat.index == 0} ? ' active'"
data-target="#carouselExampleIndicators"
th:data-slide-to="${iterStat.index}">
</li>
</ol>
<div class="carousel-inner">
<div th:each="homeImg, iterStat : ${homeImg}" class="carousel-item"
<div th:each="homeImg, iterStat : ${homeImg}"
class="carousel-item"
th:classappend="${iterStat.index == 0} ? ' active'">
<img style="border-radius:15px;" class="d-block w-100" th:src="${homeImg.imageurl}" width="100%" alt="Slide Image">
<img style="border-radius:15px;"
class="d-block w-100"
th:src="${homeImg.imageurl}" width="100%"
alt="Slide Image">
</div>
<!-- <div class="carousel-caption">
Welcome to Desk Space
</div> -->
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<a class="carousel-control-prev"
href="#carouselExampleIndicators" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<a class="carousel-control-next"
href="#carouselExampleIndicators" role="button"
data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Photo Grid End-->
</div>
<div class="col-lg-6 col-sm-12 justify-content-center align-items-center">
<div
class="col-lg-6 col-sm-12 justify-content-center align-items-center">
<!-- Enter Details -->
<!-- <h5 class="mb-3" style="color:#E29D25">Select Your Preference:</h5>-->
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0" style="color:#E29D25">Select Your Preference:</h5>
<div
class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0" style="color:#E29D25">Select Your
Preference:</h5>
<button id="backBtn2" onclick= "history.back()" class="btn btn-primary">Back</button>
</div>
<button id="backBtn2" onclick="history.back()"
class="btn btn-primary">Back</button>
</div>
<!-- Time Slots -->
<div class="row mb-3">
<label style="font-weight:bold;" class="col-sm-4 col-form-label text-end">Select Room :</label>
<label style="font-weight:bold;"
class="col-sm-4 col-form-label text-end">Select Room
:</label>
<div class="col-sm-8">
<div id="seatfor" class="d-flex flex-wrap">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary2 me-2 mb-2" style="margin: 5px;">
<input type="radio" name="booking_type" id="booking_type" autocomplete="off" value="5"> Room No:1 (4 Seater)
<label class="btn btn-primary2 me-2 mb-2"
style="margin: 5px;">
<input type="radio" name="booking_type"
id="booking_type" autocomplete="off"
value="5"> Room No:1 (4 Seater)
</label>
<label class="btn btn-primary2 me-2 mb-2" style="margin: 5px;">
<input type="radio" name="booking_type" id="booking_type" autocomplete="off" value="6"> Room No:2 (4 Seater)
<label class="btn btn-primary2 me-2 mb-2"
style="margin: 5px;">
<input type="radio" name="booking_type"
id="booking_type" autocomplete="off"
value="6"> Room No:2 (4 Seater)
</label>
<label class="btn btn-primary2 mb-2" style="margin: 5px;">
<input type="radio" name="booking_type" id="booking_type" autocomplete="off" value="7"> Room No:3 (6 Seater)
<label class="btn btn-primary2 mb-2"
style="margin: 5px;">
<input type="radio" name="booking_type"
id="booking_type" autocomplete="off"
value="7"> Room No:3 (6 Seater)
</label>
</div>
</div>
@ -248,7 +286,9 @@
</div>
<div class="mb-3 row">
<label style="font-weight:bold;" for="numSeats" class="col-sm-12 col-md-4 col-form-label"><strong>Number of Seats :</strong></label>
<label style="font-weight:bold;" for="numSeats"
class="col-sm-12 col-md-4 col-form-label"><strong>Number
of Seats :</strong></label>
<div class="col-sm-6 col-md-6">
<select class="form-control" id="numSeats" disabled>
<option value="4">4 Seats</option>
@ -266,31 +306,43 @@
</div>
</div>-->
<div class="mb-3 row align-items-center">
<label for="buildingname" class="col-sm-4 col-form-label text-end fw-semibold" style="font-weight:bold;">
<label for="buildingname"
class="col-sm-4 col-form-label text-end fw-semibold"
style="font-weight:bold;">
Location:
</label>
<div class="col-sm-6 d-flex align-items-center">
<input type="text" id="buildingname" class="form-control"
th:value="${buildingName}" readonly> <br>
<input type="text" id="buildingname"
class="form-control" th:value="${buildingName}"
readonly> <br>
</div>
<button type="button" id="viewBuildingBtn" class="btn btn-primary">Change</button>
</div>
<button type="button" id="viewBuildingBtn"
class="btn btn-primary">Change</button>
</div>
<input type="hidden" id="buildingId" th:value="${buildingId}">
<input type="hidden" id="categoryId" th:value="${categoryId}">
<input type="hidden" id="subId" th:value="${subId}">
<input type="hidden" id="buildingId"
th:value="${buildingId}">
<input type="hidden" id="categoryId"
th:value="${categoryId}">
<input type="hidden" id="subId" th:value="${subId}">
<!-- Date Picker -->
<div class="row mb-3">
<label style="font-weight:bold;" for="selectDate" class="col-sm-4 col-form-label text-end">Select Date :</label>
<label style="font-weight:bold;" for="selectDate"
class="col-sm-4 col-form-label text-end">Select Date
:</label>
<div class="col-sm-6">
<input class="form-control" id="selectDate" type="text" placeholder="Select a date" readonly>
<input class="form-control" id="selectDate"
type="text" placeholder="Select a date"
readonly>
</div>
</div>
<!-- Time Slots -->
<div class="row mb-3">
<label style="font-weight:bold;" class="col-sm-4 col-form-label text-end">Available Time Slot :</label>
<label style="font-weight:bold;"
class="col-sm-4 col-form-label text-end">Available
Time Slot :</label>
<div class="col-sm-12">
<div id="timeSlots" class="d-flex flex-wrap">
<!-- Time slots will be generated here dynamically -->
@ -302,12 +354,15 @@
<div class="row mb-3">
<label style="font-weight:bold;" class="col-sm-4 col-form-label text-end">Selected Time Slot</label>
<div class="col-sm-6">-->
<input type="hidden" id="selectedSlot" class="form-control" readonly>
<input type="hidden" id="selectedSlot" class="form-control"
readonly>
<!-- </div>
</div> -->
<div class="row mb-3">
<label style="font-weight:bold;" for="selectType" class="col-sm-4 col-form-label text-end">Select Type :</label>
<label style="font-weight:bold;" for="selectType"
class="col-sm-4 col-form-label text-end">Select Type
:</label>
<div class="col-sm-6">
<select class="form-control" id="selectType">
<option value="Individual">Individual</option>
@ -317,16 +372,25 @@
</div>
<div class="row mb-3">
<label style="font-weight:bold;" for="personName" class="col-sm-4 col-form-label text-end">Name :</label>
<label style="font-weight:bold;" for="personName"
class="col-sm-4 col-form-label text-end">Name
:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="personName">
<input type="text" class="form-control"
id="personName">
</div>
</div>
<div class="row mb-3">
<label style="font-weight:bold;" for="personPhone" class="col-sm-4 col-form-label text-end">Mobile Number :</label>
<label style="font-weight:bold;" for="personPhone"
class="col-sm-4 col-form-label text-end">Mobile
Number :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="personPhone" placeholder="Enter mobile number" pattern="^\d{10}$" maxlength="10" minlength="10" required>
<input type="text" class="form-control"
id="personPhone"
placeholder="Enter mobile number"
pattern="^\d{10}$" maxlength="10" minlength="10"
required>
</div>
</div>
@ -335,8 +399,12 @@
<!-- Action Buttons -->
<div class="d-flex justify-content-center">
<button type="button" style="width:100px;" class="reset-now-btn mr-1" onclick="resetForm()">Reset</button>
<button type="button" style="width:100px;" class="book-now-btn" onclick="saveBooking()">Book Now</button>
<button type="button" style="width:100px;"
class="reset-now-btn mr-1"
onclick="resetForm()">Reset</button>
<button type="button" style="width:100px;"
class="book-now-btn" onclick="saveBooking()">Book
Now</button>
</div>
<div style="margin-top: 10px">
<center>
@ -368,55 +436,88 @@
<!-- First Column -->
<div class="col-lg-6 col-sm-6">
<ul class="list-unstyled">
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/cal.png" class="mr-1" width="25px;"> Available days: S M T W T F S </li>
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/clo.png" class="mr-1" width="25px;"> Available time : 09:00 AM to 09:00 PM</li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/cal.png"
class="mr-1" width="25px;"> Available days:
S M T W T F S </li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/clo.png"
class="mr-1" width="25px;"> Available time :
09:00 AM to 09:00 PM</li>
</ul>
</div>
</div>
<hr>
<h4 style="font-weight: bold;margin-bottom: 27px;">Amenities</h4>
<h4 style="font-weight: bold;margin-bottom: 27px;">Amenities
</h4>
<div class="row">
<!-- First Column -->
<div class="col-lg-4 col-sm-4">
<ul class="list-unstyled">
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/1.png" class="mr-1" width="15px;"> Wifi / Internet</li>
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/2.png" class="mr-1" width="15px;"> 24/7 Security</li>
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/3.png" class="mr-1" width="15px;"> Housekeeping</li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/1.png"
class="mr-1" width="15px;"> Wifi / Internet
</li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/2.png"
class="mr-1" width="15px;"> 24/7 Security
</li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/3.png"
class="mr-1" width="15px;"> Housekeeping
</li>
</ul>
</div>
<!-- Second Column -->
<div class="col-lg-4 col-sm-4">
<ul class="list-unstyled">
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/4.png" class="mr-1" width="15px;"> Vehicle Parking</li>
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/5.png" class="mr-1" width="15px;"> Reception</li>
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/6.png" class="mr-1" width="15px;"> Tea / Coffee</li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/4.png"
class="mr-1" width="15px;"> Vehicle Parking
</li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/5.png"
class="mr-1" width="15px;"> Reception</li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/6.png"
class="mr-1" width="15px;"> Tea / Coffee
</li>
</ul>
</div>
<!-- Third Column -->
<div class="col-lg-4 col-sm-4">
<ul class="list-unstyled">
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/7.png" class="mr-1" width="15px;"> Comfy Workstations</li>
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/8.png" class="mr-1" width="15px;"> Air Conditioning</li>
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/9.png" class="mr-1" width="15px;"> ⁠Informal Collab Area</li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/7.png"
class="mr-1" width="15px;"> Comfy
Workstations</li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/8.png"
class="mr-1" width="15px;"> Air Conditioning
</li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/9.png"
class="mr-1" width="15px;"> ⁠Informal Collab
Area</li>
</ul>
</div>
<small>*The availability of amenities is subject to change.</small>
<small>*The availability of amenities is subject to
change.</small>
</div>
</div>
<div class="col-lg-6 col-sm-12 justify-content-center align-items-center">
<h4 style="font-weight: bold;">Muthalvar Padaippagam Location</h4>
<div
class="col-lg-6 col-sm-12 justify-content-center align-items-center">
<h4 style="font-weight: bold;">Muthalvar Padaippagam Location
</h4>
<div class="locationmap">
<iframe
th:src="'https://www.google.com/maps?q=' + ${latitude} + ',' + ${longitude} + '&hl=en&z=14&output=embed'"
width="100%"
height="450"
style="border:0;"
allowfullscreen
loading="lazy"
width="100%" height="450" style="border:0;"
allowfullscreen loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</iframe>
<!-- <iframe src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d3885.7981508771118!2d80.232587!3d13.111970000000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMTPCsDA2JzQzLjEiTiA4MMKwMTMnNTcuMyJF!5e0!3m2!1sen!2sin!4v1730288154721!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>-->
<!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5919.7511602058585!2d80.22612333567244!3d13.112778597995147!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a52644d2af36f2f%3A0xab9239a0f5506f51!2sChennai%20Corporation%20Office!5e1!3m2!1sen!2sin!4v1729756217765!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> -->
@ -436,7 +537,8 @@
</div>
<footer th:replace="~{fragments/footer :: footer}"></footer>
</div>
<div class="modal fade" id="visitTourModal" tabindex="-1" aria-labelledby="visitTourModalLabel" aria-hidden="true">
<div class="modal fade" id="visitTourModal" tabindex="-1" aria-labelledby="visitTourModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
@ -444,13 +546,15 @@
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
<div class="modal-body">
<iframe id="visitTourIframe" src="" style="width: 100%; height: 500px; border: none;"></iframe>
<iframe id="visitTourIframe" src=""
style="width: 100%; height: 500px; border: none;"></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- modal for confrim booking -->
<div class="modal fade" id="ackModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal fade" id="ackModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
@ -504,7 +608,7 @@
</div>
<script th:replace="~{fragments/user-script :: script}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script >
<script>
// let catId=3;
// let subId =5;
// let buildId= 1;
@ -517,29 +621,29 @@
window.location.href = '/muthalvarpadaippagam';
});
}
});
});
let slots =[];
let timeSlots =[];
let slots = [];
let timeSlots = [];
let selectedSeatType = 4; // default to 4 seater
let ratePerHour = 150; // default rate for 4 seater
const bookedSlots = ['9:00 AM', '6:00 PM', '8:00 PM']; // Sample booked slots, will show in red
// const urlParams = new URLSearchParams(window.location.search);
// const catId = urlParams.get('categoryId');
// const buildId = urlParams.get('buildingId');
// const subId = urlParams.get('subId');
// const urlParams = new URLSearchParams(window.location.search);
// const catId = urlParams.get('categoryId');
// const buildId = urlParams.get('buildingId');
// const subId = urlParams.get('subId');
const buildId = document.getElementById("#buildingId")
const catId = document.getElementById("#categoryId")
let subId = document.getElementById("#subId")
const buildId = document.getElementById("#buildingId")
const catId = document.getElementById("#categoryId")
let subId = document.getElementById("#subId")
// console.log("Category ID:", catId);
// console.log("Building ID:", buildId);
// console.log("Sub ID:", subId);
// console.log("Category ID:", catId);
// console.log("Building ID:", buildId);
// console.log("Sub ID:", subId);
// Load available time slots
// Global variable to store selected slots
@ -569,7 +673,7 @@ let subId = document.getElementById("#subId")
let day = String(endDate.getDate()).padStart(2, '0');
let month = String(endDate.getMonth() + 1).padStart(2, '0');
let year = endDate.getFullYear();
toDate = year + "-" +month+ "-" +day;
toDate = year + "-" + month + "-" + day;
const hours = String(currentTime.getHours()).padStart(2, '0');
const minutes = String(currentTime.getMinutes()).padStart(2, '0');
@ -577,7 +681,7 @@ let subId = document.getElementById("#subId")
timeSlots.forEach(slot => {
if(selectedDate==toDate){
if (selectedDate == toDate) {
if (slot.end_time > formattedTime) {
const isBooked = bookedSlots.includes(slot.value); // Use slot value to check if it's booked
const slotDiv = `
@ -589,7 +693,7 @@ let subId = document.getElementById("#subId")
timeSlotsDiv.insertAdjacentHTML('beforeend', slotDiv);
}
}
else{
else {
const isBooked = bookedSlots.includes(slot.value); // Use slot value to check if it's booked
const slotDiv = `
<label class="time-slot-box ${isBooked ? 'booked' : 'available'}">
@ -763,7 +867,7 @@ let subId = document.getElementById("#subId")
userMobile: phone,
slots: slots // Ensure this is defined and populated
},
success: function(response) {
success: function (response) {
if (response) {
let tempId = response.tempBookId;
$(".amount").text(response.amount);
@ -773,8 +877,8 @@ let subId = document.getElementById("#subId")
// Update the modal with a dynamic Pay Now button
$('#paynow').html(
'<button type="button" class="btn book-now-btn" data-bs-dismiss="modal" style="margin-right:10px;">Close</button>'+
'<button style="" class="btn book-now-btn" onclick="paymentStart(' + tempId + ',' + finalAmount + ')">Pay Now (Rs. ' + finalAmount + ')</button>'+
'<button type="button" class="btn book-now-btn" data-bs-dismiss="modal" style="margin-right:10px;">Close</button>' +
'<button style="" class="btn book-now-btn" onclick="paymentStart(' + tempId + ',' + finalAmount + ')">Pay Now (Rs. ' + finalAmount + ')</button>' +
''
);
@ -782,10 +886,20 @@ let subId = document.getElementById("#subId")
$('#ackModal').modal('show');
}
},
error: function(xhr, status, error) {
/* error: function(xhr, status, error) {
alert("Please select another slot. The selected slot is now full.");
console.log('Error sending data:', error);
console.log('Response text:', xhr.responseText); // Log response text for debugging
}*/
error: function (xhr) {
let msg = "Booking failed. Please try again.";
if (xhr.responseJSON && xhr.responseJSON.message) {
msg = xhr.responseJSON.message;
}
alert(msg);
}
});
}
@ -819,31 +933,31 @@ let subId = document.getElementById("#subId")
});*/
// Function to load available time slots
$('#selectDate').on('change', async function() {
$('#selectDate').on('change', async function () {
//alert('Date changed');
const selectedDate = $("#selectDate").val();
//alert(selectedDate);
const bookingType = document.querySelector('input[name="booking_type"]:checked').value;
const scid = bookingType; // Retrieve scid dynamically if needed
if(scid){
if (scid) {
await loadSlots(scid);
loadTimeSlots(selectedDate);
}
$('#selectedSlot').val('');
});
$('input[name="booking_type"]').on('change', async function() {
$('input[name="booking_type"]').on('change', async function () {
const bookingType = document.querySelector('input[name="booking_type"]:checked').value;
subId = bookingType; // Retrieve scid dynamically if needed
//subId
if(subId==5 || subId==6){
if (subId == 5 || subId == 6) {
$("#numSeats").val(4);
}
else if(subId==7){
else if (subId == 7) {
$("#numSeats").val(6);
}
const selectedDate = $("#selectDate").val();
if(selectedDate){
if (selectedDate) {
await loadSlots(subId);
loadTimeSlots(selectedDate);
}
@ -864,8 +978,8 @@ let subId = document.getElementById("#subId")
}
});
</script>
<script>
function showTour(buildingId, categoryId) {
<script>
function showTour(buildingId, categoryId) {
console.log("Visit Tour Triggered - Bid:", buildingId, "Cid:", categoryId);
let url = "";
@ -898,17 +1012,18 @@ function showTour(buildingId, categoryId) {
modalInstance.show();
console.log("Modal Displayed:", modalId);
}
}
function showTourPopup1(link) {
function showTourPopup1(link) {
const iframe = document.getElementById('visitTourIframe1');
iframe.src = link;
// Show the modal
const modal = new bootstrap.Modal(document.getElementById('visitTourModal1'));
modal.show();
}
</script>
</div>
}
</script>
</div>
</body>
</html>

289
src/main/resources/templates/user/book-reading.html
View File

@ -1,14 +1,17 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="~{fragments/user-head :: head}"></head>
<header th:replace="~{user/razor-pay :: header}"></header>
<style>
.border-img {
border: 2px solid #0069d9;
/* Set your desired border color */
padding: 2px;
/* Optional: to create some space between the image and the border */
}
.border-img {
border: 2px solid #0069d9; /* Set your desired border color */
padding: 2px; /* Optional: to create some space between the image and the border */
}
.carousel-inner img {
height: 500px;
object-fit: cover;
@ -27,21 +30,26 @@
background-color: #f0f0f0;
padding: 10px;
}
.time-slot-box.booked {
border-color: red;
color: red;
cursor: not-allowed;
}
.time-slot-box.available {
border-color: green;
color: green;
}
.time-slot-box input[type="radio"] {
display: none;
}
.time-slot-box:hover {
background-color: #e0e0e0;
}
#timeSlots {
display: flex;
flex-wrap: wrap;
@ -83,11 +91,12 @@
background-color: #E29D25;
}
</style>
<body>
<!-- Pre-loader start -->
<div th:replace="~{fragments/preloader :: div}"></div>
<!-- Pre-loader end -->
<div id="pcoded" class="pcoded">
<!-- Pre-loader start -->
<div th:replace="~{fragments/preloader :: div}"></div>
<!-- Pre-loader end -->
<div id="pcoded" class="pcoded">
<div class="pcoded-container">
<!-- Menu header start -->
<nav th:replace="~{fragments/user-nav :: nav}"></nav>
@ -108,7 +117,8 @@
<div class="d-inline">
<h4 style="font-weight:bold;">Book Learning Centre</h4>
<!-- <span class="address">Jeganathan street, Agaram, Chennai - 600082</span> -->
<span class="address" th:text="${buildingAddress}">Address not available</span>
<span class="address" th:text="${buildingAddress}">Address not
available</span>
</div>
</div>
</div>
@ -143,64 +153,83 @@
<hr>
<input type="hidden" id="buildingId" th:value="${buildingId}">
<input type="hidden" id="categoryId" th:value="${categoryId}">
<input type="hidden" id="subId" th:value="${subId}">
<input type="hidden" id="categoryId" th:value="${categoryId}">
<input type="hidden" id="subId" th:value="${subId}">
<div class="row" id="conferenceHallDiv" style="border-radius: 10px; margin:0px;">
<div class="col-lg-12 col-sm-12">
<div style="border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; padding: 20px; margin-top: 20px;">
<div
style="border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; padding: 20px; margin-top: 20px;">
<form id="conferenceHallForm">
<div class="row">
<div class="col-lg-6 col-sm-0" style="padding:0px;">
<!--photo grid start-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div id="carouselExampleIndicators" class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<!-- <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>-->
<li th:each="homeImg, iterStat : ${homeImg}" class=""
th:classappend="${iterStat.index == 0} ? ' active'" data-target="#carouselExampleIndicators" th:data-slide-to="${iterStat.index}">
<li th:each="homeImg, iterStat : ${homeImg}"
class=""
th:classappend="${iterStat.index == 0} ? ' active'"
data-target="#carouselExampleIndicators"
th:data-slide-to="${iterStat.index}">
</li>
</ol>
<div class="carousel-inner">
<div th:each="homeImg, iterStat : ${homeImg}" class="carousel-item"
<div th:each="homeImg, iterStat : ${homeImg}"
class="carousel-item"
th:classappend="${iterStat.index == 0} ? ' active'">
<img style="border-radius:15px;" class="d-block w-100" th:src="${homeImg.imageurl}" width="100%" alt="Slide Image">
<img style="border-radius:15px;"
class="d-block w-100"
th:src="${homeImg.imageurl}" width="100%"
alt="Slide Image">
</div>
<!-- <div class="carousel-caption">
Welcome to Learning Centre
</div>-->
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<a class="carousel-control-prev"
href="#carouselExampleIndicators" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<a class="carousel-control-next"
href="#carouselExampleIndicators" role="button"
data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Photo Grid End-->
</div>
<div class="col-lg-6 col-sm-12 justify-content-center align-items-center">
<div
class="col-lg-6 col-sm-12 justify-content-center align-items-center">
<!-- Enter Details -->
<!-- <h5 class="mb-3" style="color:#E29D25">Select Your Preference</h5>-->
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0" style="color:#E29D25">Select Your Preference:</h5>
<div
class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0" style="color:#E29D25">Select Your
Preference:</h5>
<button id="backBtn2" onclick= "history.back()" class="btn btn-primary">Back</button>
</div>
<button id="backBtn2" onclick="history.back()"
class="btn btn-primary">Back</button>
</div>
<div class="mb-3 row">
<label style="font-weight:bold;" for="numSeats" class="col-sm-12 col-md-4 col-form-label"><strong>Number of Seats :</strong></label>
<label style="font-weight:bold;" for="numSeats"
class="col-sm-12 col-md-4 col-form-label"><strong>Number
of Seats :</strong></label>
<div class="col-sm-6 col-md-6">
<select class="form-control" id="numSeats" >
<select class="form-control" id="numSeats">
<option value="1">1 Seat</option>
<option value="2">2 Seats</option>
</select>
@ -217,30 +246,40 @@
</div> -->
<div class="mb-3 row align-items-center">
<label for="buildingname" class="col-sm-4 col-form-label text-end fw-semibold" style="font-weight:bold;">
<label for="buildingname"
class="col-sm-4 col-form-label text-end fw-semibold"
style="font-weight:bold;">
Location :
</label>
<div class="col-sm-6 d-flex align-items-center">
<input type="text" id="buildingname" class="form-control"
th:value="${buildingName}" readonly> <br>
<input type="text" id="buildingname"
class="form-control" th:value="${buildingName}"
readonly> <br>
</div>
<button type="button" id="viewBuildingBtn" class="btn btn-primary">Change</button>
</div>
<button type="button" id="viewBuildingBtn"
class="btn btn-primary">Change</button>
</div>
<!-- Date Picker -->
<div class="row mb-3">
<label style="font-weight:bold;" for="selectDate" class="col-sm-4 col-form-label text-end">Select Date :</label>
<label style="font-weight:bold;" for="selectDate"
class="col-sm-4 col-form-label text-end">Select Date
:</label>
<div class="col-sm-6">
<!-- <input type="date" class="form-control" id="selectDate" onchange="loadTimeSlots()"> -->
<input class="form-control" id="selectDate" type="text" placeholder="Select a date" readonly>
<input class="form-control" id="selectDate"
type="text" placeholder="Select a date"
readonly>
</div>
</div>
<!-- Time Slots -->
<div class="row mb-3">
<label style="font-weight:bold;" class="col-sm-4 col-form-label text-end">Available Time Slot :</label>
<label style="font-weight:bold;"
class="col-sm-4 col-form-label text-end">Available
Time Slot :</label>
<div class="col-sm-12">
<div id="timeSlots" class="d-flex flex-wrap">
<!-- Time slots will be generated here dynamically -->
@ -252,12 +291,15 @@
<div class="row mb-3">
<label style="font-weight:bold;" class="col-sm-4 col-form-label text-end">Selected Time Slot</label>
<div class="col-sm-6">-->
<input type="hidden" id="selectedSlot" class="form-control" readonly>
<input type="hidden" id="selectedSlot" class="form-control"
readonly>
<!-- </div>
</div> -->
<div class="row mb-3">
<label style="font-weight:bold;" for="selectType" class="col-sm-4 col-form-label text-end">Select Type :</label>
<label style="font-weight:bold;" for="selectType"
class="col-sm-4 col-form-label text-end">Select Type
:</label>
<div class="col-sm-6">
<select class="form-control" id="selectType">
<option value="Individual">Individual</option>
@ -267,16 +309,25 @@
</div>
<div class="row mb-3">
<label style="font-weight:bold;" for="personName" class="col-sm-4 col-form-label text-end">Name :</label>
<label style="font-weight:bold;" for="personName"
class="col-sm-4 col-form-label text-end">Name
:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="personName">
<input type="text" class="form-control"
id="personName">
</div>
</div>
<div class="row mb-3">
<label style="font-weight:bold;" for="personPhone" class="col-sm-4 col-form-label text-end">Phone Number :</label>
<label style="font-weight:bold;" for="personPhone"
class="col-sm-4 col-form-label text-end">Phone
Number :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="personPhone" placeholder="Enter mobile number" pattern="^\d{10}$" maxlength="10" minlength="10" required>
<input type="text" class="form-control"
id="personPhone"
placeholder="Enter mobile number"
pattern="^\d{10}$" maxlength="10" minlength="10"
required>
</div>
</div>
@ -285,8 +336,12 @@
<!-- Action Buttons -->
<div class="d-flex justify-content-center">
<button type="button" style="width:100px;" class="reset-now-btn mr-1" onclick="resetForm()">Reset</button>
<button type="button" style="width:100px;" class="book-now-btn" onclick="saveBooking()">Book Now</button>
<button type="button" style="width:100px;"
class="reset-now-btn mr-1"
onclick="resetForm()">Reset</button>
<button type="button" style="width:100px;"
class="book-now-btn" onclick="saveBooking()">Book
Now</button>
</div>
<div style="margin-top: 15px">
@ -314,61 +369,90 @@
<br>
<div class="row">
<div class="col-lg-6 col-sm-0" style="padding:0px;">
<h4 style="font-weight: bold;margin-bottom: 27px;">Timing Details</h4>
<h4 style="font-weight: bold;margin-bottom: 27px;">Timing
Details</h4>
<div class="row">
<!-- First Column -->
<div class="col-lg-6 col-sm-6">
<ul class="list-unstyled">
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/cal.png" class="mr-1" width="25px;"> Available days: S M T W T F S </li>
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/clo.png" class="mr-1" width="25px;"> Available time : 06:00 AM to 11:00 PM</li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/cal.png"
class="mr-1" width="25px;"> Available days:
S M T W T F S </li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/clo.png"
class="mr-1" width="25px;"> Available time :
06:00 AM to 11:00 PM</li>
</ul>
</div>
</div>
<hr>
<h4 style="font-weight: bold;margin-bottom: 27px;">Amenities</h4>
<h4 style="font-weight: bold;margin-bottom: 27px;">Amenities
</h4>
<div class="row">
<!-- First Column -->
<div class="col-lg-4 col-sm-4">
<ul class="list-unstyled">
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/1.png" class="mr-1" width="15px;"> Wifi / Internet</li>
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/2.png" class="mr-1" width="15px;"> ⁠24/7 Security</li>
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/3.png" class="mr-1" width="15px;"> Housekeeping</li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/1.png"
class="mr-1" width="15px;"> Wifi / Internet
</li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/2.png"
class="mr-1" width="15px;"> ⁠24/7 Security
</li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/3.png"
class="mr-1" width="15px;"> Housekeeping
</li>
</ul>
</div>
<!-- Second Column -->
<div class="col-lg-4 col-sm-4">
<ul class="list-unstyled">
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/4.png" class="mr-1" width="15px;"> Vehicle Parking</li>
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/5.png" class="mr-1" width="15px;"> Reception</li>
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/6.png" class="mr-1" width="15px;"> Tea / Coffee</li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/4.png"
class="mr-1" width="15px;"> Vehicle Parking
</li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/5.png"
class="mr-1" width="15px;"> Reception</li>
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/6.png"
class="mr-1" width="15px;"> Tea / Coffee
</li>
</ul>
</div>
<!-- Third Column -->
<div class="col-lg-4 col-sm-4">
<ul class="list-unstyled">
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/10.png" class="mr-1" width="15px;"> PC with internet access
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/10.png"
class="mr-1" width="15px;"> PC with internet
access
</li>
<li style="margin-bottom: 21px;"><img src="/co-workspaceDocuments/icons/8.png" class="mr-1" width="15px;"> Air Conditioning
<li style="margin-bottom: 21px;"><img
src="/co-workspaceDocuments/icons/8.png"
class="mr-1" width="15px;"> Air Conditioning
</li>
</ul>
</div>
*The availability of amenities is subject to change.
</div>
</div>
<div class="col-lg-6 col-sm-12 justify-content-center align-items-center">
<h4 style="font-weight: bold;">Muthalvar Padaippagam Location</h4>
<div
class="col-lg-6 col-sm-12 justify-content-center align-items-center">
<h4 style="font-weight: bold;">Muthalvar Padaippagam Location
</h4>
<div class="locationmap">
<iframe
th:src="'https://www.google.com/maps?q=' + ${latitude} + ',' + ${longitude} + '&hl=en&z=14&output=embed'"
width="100%"
height="450"
style="border:0;"
allowfullscreen
loading="lazy"
width="100%" height="450" style="border:0;"
allowfullscreen loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</iframe>
<!--<iframe src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d3885.7981508771118!2d80.232587!3d13.111970000000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMTPCsDA2JzQzLjEiTiA4MMKwMTMnNTcuMyJF!5e0!3m2!1sen!2sin!4v1730288154721!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>-->
@ -390,7 +474,8 @@
<footer th:replace="~{fragments/footer :: footer}"></footer>
</div>
<div class="modal fade" id="visitTourModal" tabindex="-1" aria-labelledby="visitTourModalLabel" aria-hidden="true">
<div class="modal fade" id="visitTourModal" tabindex="-1" aria-labelledby="visitTourModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
@ -398,14 +483,16 @@
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
<div class="modal-body">
<iframe id="visitTourIframe" src="" style="width: 100%; height: 500px; border: none;"></iframe>
<iframe id="visitTourIframe" src=""
style="width: 100%; height: 500px; border: none;"></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- modal for confrim booking -->
<div class="modal fade" id="ackModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal fade" id="ackModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
@ -460,7 +547,7 @@
</div>
<script th:replace="~{fragments/user-script :: script}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script >
<script>
//ak
document.addEventListener('DOMContentLoaded', () => {
const viewBuildingBtn = document.getElementById('viewBuildingBtn');
@ -470,17 +557,17 @@
window.location.href = '/muthalvarpadaippagam';
});
}
});
});
// let catId=1;
///let subId =1;
// let buildId= 1;
// Read URL parameters
// const urlParams = new URLSearchParams(window.location.search);
// const catId = urlParams.get('categoryId');
// const buildId = urlParams.get('buildingId');
// let subId = urlParams.get('subId');
// const urlParams = new URLSearchParams(window.location.search);
// const catId = urlParams.get('categoryId');
// const buildId = urlParams.get('buildingId');
// let subId = urlParams.get('subId');
const buildId = document.getElementById("#buildingId")
@ -490,8 +577,8 @@
let slots =[];
let timeSlots =[];
let slots = [];
let timeSlots = [];
let selectedSeatType = 4; // default to 4 seater
let ratePerHour = 150; // default rate for 4 seater
const bookedSlots = ['9:00 AM', '6:00 PM', '8:00 PM']; // Sample booked slots, will show in red
@ -514,7 +601,7 @@
}
}
function loadTimeSlots(selectedDate) {
function loadTimeSlots(selectedDate) {
const timeSlotsDiv = document.getElementById('timeSlots');
timeSlotsDiv.innerHTML = ''; // Clear previous slots
@ -524,7 +611,7 @@ function loadTimeSlots(selectedDate) {
let day = String(endDate.getDate()).padStart(2, '0');
let month = String(endDate.getMonth() + 1).padStart(2, '0');
let year = endDate.getFullYear();
toDate = year + "-" +month+ "-" +day;
toDate = year + "-" + month + "-" + day;
const hours = String(currentTime.getHours()).padStart(2, '0');
const minutes = String(currentTime.getMinutes()).padStart(2, '0');
@ -532,7 +619,7 @@ function loadTimeSlots(selectedDate) {
timeSlots.forEach(slot => {
if(selectedDate==toDate){
if (selectedDate == toDate) {
if (slot.end_time > formattedTime) {
const isBooked = bookedSlots.includes(slot.value); // Use slot value to check if it's booked
const slotDiv = `
@ -544,7 +631,7 @@ function loadTimeSlots(selectedDate) {
timeSlotsDiv.insertAdjacentHTML('beforeend', slotDiv);
}
}
else{
else {
const isBooked = bookedSlots.includes(slot.value); // Use slot value to check if it's booked
const slotDiv = `
<label class="time-slot-box ${isBooked ? 'booked' : 'available'}">
@ -706,7 +793,7 @@ function loadTimeSlots(selectedDate) {
userMobile: phone,
slots: slots // Ensure this is defined and populated
},
success: function(response) {
success: function (response) {
console.log(response);
if (response) {
let tempId = response.tempBookId;
@ -717,8 +804,8 @@ function loadTimeSlots(selectedDate) {
// Update the modal with a dynamic Pay Now button
$('#paynow').html(
'<button type="button" class="btn book-now-btn" data-bs-dismiss="modal" style="margin-right:10px;">Close</button>'+
'<button style="" class="btn book-now-btn" onclick="paymentStart(' + tempId + ',' + finalAmount + ')">Pay Now (Rs. ' + finalAmount + ')</button>'+
'<button type="button" class="btn book-now-btn" data-bs-dismiss="modal" style="margin-right:10px;">Close</button>' +
'<button style="" class="btn book-now-btn" onclick="paymentStart(' + tempId + ',' + finalAmount + ')">Pay Now (Rs. ' + finalAmount + ')</button>' +
''
);
@ -726,10 +813,21 @@ function loadTimeSlots(selectedDate) {
$('#ackModal').modal('show');
}
},
error: function(xhr, status, error) {
/* error: function(xhr, status, error) {
alert("Please select another slot. The selected slot is now full.");
console.log('Error sending data:', error);
console.log('Response text:', xhr.responseText); // Log response text for debugging
}*/
error: function (xhr) {
let msg = "Booking failed. Please try again.";
if (xhr.responseJSON && xhr.responseJSON.message) {
msg = xhr.responseJSON.message;
}
alert(msg);
}
});
}
@ -775,11 +873,11 @@ function loadTimeSlots(selectedDate) {
// Function to load available time slots
$('#selectDate').on('change', async function() {
$('#selectDate').on('change', async function () {
//alert('Date changed');
const selectedDate = $("#selectDate").val();
const scid=$('#subId').val();
const scid = $('#subId').val();
console.log("Subcategory ID:", scid);
// const scid = 1; // Retrieve scid dynamically if needed
await loadSlots(scid);
@ -802,8 +900,8 @@ function loadTimeSlots(selectedDate) {
});
</script>
<script>
function showTour(buildingId, categoryId) {
<script>
function showTour(buildingId, categoryId) {
console.log("Visit Tour Triggered - Bid:", buildingId, "Cid:", categoryId);
let url = "";
@ -836,17 +934,18 @@ function showTour(buildingId, categoryId) {
modalInstance.show();
console.log("Modal Displayed:", modalId);
}
}
function showTourPopup1(link) {
function showTourPopup1(link) {
const iframe = document.getElementById('visitTourIframe1');
iframe.src = link;
// Show the modal
const modal = new bootstrap.Modal(document.getElementById('visitTourModal1'));
modal.show();
}
</script>
</div>
}
</script>
</div>
</body>
</html>

23
src/main/resources/templates/user/book-workdesk.html
View File

@ -283,11 +283,14 @@
<!-- Enter Details -->
<!-- <h5 class="mb-3" style="color:#E29D25">Select Your Preference: <button id="backBtn" class="btn btn-sm btn-outline-primary">Back </button></h5> -->
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0" style="color:#E29D25">Select Your Preference:</h5>
<div
class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0" style="color:#E29D25">Select Your
Preference:</h5>
<button id="backBtn2" onclick= "history.back()" class="btn btn-primary">Back</button>
</div>
<button id="backBtn2" onclick="history.back()"
class="btn btn-primary">Back</button>
</div>
@ -955,10 +958,20 @@
$('#ackModal').modal('show');
}
},
error: function (xhr, status, error) {
/*error: function (xhr, status, error) {
alert("Please select another slot. The selected slot is now full.");
console.log('Error sending data:', error);
console.log('Response text:', xhr.responseText); // Log response text for debugging
}*/
error: function (xhr) {
let msg = "Booking failed. Please try again.";
if (xhr.responseJSON && xhr.responseJSON.message) {
msg = xhr.responseJSON.message;
}
alert(msg);
}
});
}

Write Preview
Loading…
Cancel
Save