diff --git a/Hotel-booking-App/public/images/map.png b/Hotel-booking-App/public/images/map.png new file mode 100644 index 0000000..6efe3b1 Binary files /dev/null and b/Hotel-booking-App/public/images/map.png differ diff --git a/Hotel-booking-App/public/index.html b/Hotel-booking-App/public/index.html index 4b8e449..f471986 100644 --- a/Hotel-booking-App/public/index.html +++ b/Hotel-booking-App/public/index.html @@ -3,8 +3,11 @@
- - + + + diff --git a/Hotel-booking-App/src/DataCreation.js b/Hotel-booking-App/src/DataCreation.js index 1aed503..c0699d9 100644 --- a/Hotel-booking-App/src/DataCreation.js +++ b/Hotel-booking-App/src/DataCreation.js @@ -9,16 +9,31 @@ startDate2.setDate(endDate1.getDate() + 1); const endDate2 = new Date(startDate2); endDate2.setDate(startDate2.getDate() + 2); +const startDate3 = new Date(endDate2); +startDate3.setDate(endDate2.getDate() + 5); +const endDate3 = new Date(startDate3); +endDate3.setDate(startDate3.getDate() + 5); + +const startDate4 = new Date(endDate3); +startDate4.setDate(endDate3.getDate() + 5); +const endDate4 = new Date(startDate4); +endDate4.setDate(startDate4.getDate() + 5); + +const startDate5 = new Date(endDate4); +startDate5.setDate(endDate4.getDate() + 2); +const endDate5 = new Date(startDate5); +endDate5.setDate(startDate5.getDate() + 2); + var hotelData = [ { HotelID: 102278, - HotelName: 'Benor Cotel', + HotelName: 'Benor Hotel', Address: "59 rue de l'Abbaye", Description: 'We are the king of the hotel in the vast beautiful world.', HotelImgID: 'hotel_1', Rating: 5, ReviewCount: 20, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Benor Cotel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Benor Hotel, Montana' }, HotelFacility: 'Parking, Pet allowed, Swiming pool, Restaurant', RoomID: 1, RoomImgID: 'room_1', @@ -31,17 +46,17 @@ var hotelData = [ Extras: 'Free cancellation, Credit card accepted, Pay at visit', RoomFacility: 'Television, Projector, Balcony, Whiteboard, Kitchen, Internet, Shower', Price: 500, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate3, CheckOut: endDate3 }] }, { HotelID: 102278, - HotelName: 'Benor Cotel', + HotelName: 'Benor Hotel', Address: "59 rue de l'Abbaye", Description: 'We are the king of the hotel in the vast beautiful world.', HotelImgID: 'hotel_1', Rating: 5, ReviewCount: 20, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Benor Cotel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Benor Hotel, Montana' }, HotelFacility: 'Parking, Pet allowed, Swiming pool, Restaurant', RoomID: 2, RoomImgID: 'room_2', @@ -54,17 +69,17 @@ var hotelData = [ Extras: 'Credit card accepted, Pay at visit', RoomFacility: 'Television, Whiteboard, Kitchen, Internet', Price: 300, - CheckInOut: [{ CheckIn: startDate1, CheckOut: endDate1 }] + CheckInOut: [{ CheckIn: startDate1, CheckOut: endDate1 }, { CheckIn: startDate3, CheckOut: endDate3 }] }, { HotelID: 102278, - HotelName: 'Benor Cotel', + HotelName: 'Benor Hotel', Address: "59 rue de l'Abbaye", Description: 'We are the king of the hotel in the vast beautiful world.', HotelImgID: 'hotel_1', Rating: 5, ReviewCount: 20, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Benor Cotel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Benor Hotel, Montana' }, HotelFacility: 'Parking, Pet allowed, Swiming pool, Restaurant', RoomID: 3, RoomImgID: 'room_3', @@ -77,17 +92,17 @@ var hotelData = [ Extras: 'Free cancellation, Pay at visit', RoomFacility: 'Television, Internet', Price: 150, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate4, CheckOut: endDate4 }] }, { HotelID: 117823, - HotelName: 'Zabator Cotel', + HotelName: 'Zabator Hotel', Address: "Luisenstr. 48", Description: 'Pleasent hotel for pleasent people.', HotelImgID: 'hotel_2', Rating: 4, ReviewCount: 30, - Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zabator Cotel, New York' }, + Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zabator Hotel, New York' }, HotelFacility: 'Parking, Swiming pool, Restaurant', RoomID: 1, RoomImgID: 'room_4', @@ -104,13 +119,13 @@ var hotelData = [ }, { HotelID: 117823, - HotelName: 'Zabator Cotel', + HotelName: 'Zabator Hotel', Address: "Luisenstr. 48", Description: 'Pleasent hotel for pleasent people.', HotelImgID: 'hotel_2', Rating: 4, ReviewCount: 30, - Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zabator Cotel, New York' }, + Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zabator Hotel, New York' }, HotelFacility: 'Parking, Swiming pool, Restaurant', RoomID: 2, RoomImgID: 'room_5', @@ -123,17 +138,17 @@ var hotelData = [ Extras: 'Pay at visit', RoomFacility: 'Television, Kitchen, Internet', Price: 300, - CheckInOut: [{ CheckIn: startDate2, CheckOut: endDate2 }] + CheckInOut: [{ CheckIn: startDate2, CheckOut: endDate2 }, { CheckIn: startDate3, CheckOut: endDate3 }] }, { HotelID: 117823, - HotelName: 'Zabator Cotel', + HotelName: 'Zabator Hotel', Address: "Luisenstr. 48", Description: 'Pleasent hotel for pleasent people.', HotelImgID: 'hotel_2', Rating: 4, ReviewCount: 30, - Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zabator Cotel, New York' }, + Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zabator Hotel, New York' }, HotelFacility: 'Parking, Swiming pool, Restaurant', RoomID: 3, RoomImgID: 'room_6', @@ -146,7 +161,7 @@ var hotelData = [ Extras: 'Free cancellation', RoomFacility: 'Television, Internet', Price: 100, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate5, CheckOut: endDate5 }] }, { HotelID: 322211, @@ -169,7 +184,7 @@ var hotelData = [ Extras: 'Free cancellation, Credit card accepted, Pay at visit', RoomFacility: 'Television, Kitchen, Internet, Shower', Price: 600, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate5, CheckOut: endDate5 }] }, { HotelID: 322211, @@ -215,17 +230,17 @@ var hotelData = [ Extras: 'Free cancellation', RoomFacility: 'Internet, Shower', Price: 150, - CheckInOut: [{ CheckIn: startDate2, CheckOut: endDate2 }] + CheckInOut: [{ CheckIn: startDate2, CheckOut: endDate2 }, { CheckIn: startDate3, CheckOut: endDate3 }] }, { HotelID: 112278, - HotelName: 'Zentor Motel', + HotelName: 'Zentor Hotel', Address: "2, rue du Commerce", Description: 'We are the queen of the hotel.', HotelImgID: 'hotel_4', Rating: 4, ReviewCount: 35, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zentor Motel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zentor Hotel, Montana' }, HotelFacility: 'Parking, Pet allowed, Swiming pool', RoomID: 1, RoomImgID: 'room_10', @@ -238,17 +253,17 @@ var hotelData = [ Extras: 'Free cancellation', RoomFacility: 'Television, Projector, Balcony, Whiteboard, Kitchen, Internet, Shower', Price: 500, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate4, CheckOut: endDate4 }] }, { HotelID: 112278, - HotelName: 'Zentor Motel', + HotelName: 'Zentor Hotel', Address: "2, rue du Commerce", Description: 'We are the queen of the hotel.', HotelImgID: 'hotel_4', Rating: 4, ReviewCount: 35, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zentor Motel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zentor Hotel, Montana' }, HotelFacility: 'Parking, Pet allowed, Swiming pool', RoomID: 2, RoomImgID: 'room_11', @@ -265,13 +280,13 @@ var hotelData = [ }, { HotelID: 112278, - HotelName: 'Zentor Motel', + HotelName: 'Zentor Hotel', Address: "2, rue du Commerce", Description: 'We are the queen of the hotel.', HotelImgID: 'hotel_4', Rating: 4, ReviewCount: 35, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zentor Motel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zentor Hotel, Montana' }, HotelFacility: 'Parking, Pet allowed, Swiming pool', RoomID: 3, RoomImgID: 'room_12', @@ -284,17 +299,17 @@ var hotelData = [ Extras: 'Free cancellation, Pay at visit', RoomFacility: 'Television, Internet', Price: 150, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate4, CheckOut: endDate4 }] }, { HotelID: 127823, - HotelName: 'Bakator Cotel', + HotelName: 'Bakator Hotel', Address: "Boulevard Tirou, 255", Description: 'Pleasent hotel for sweet people.', HotelImgID: 'hotel_5', Rating: 2, ReviewCount: 15, - Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Bakator Cotel, New York' }, + Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Bakator Hotel, New York' }, HotelFacility: 'Swiming pool, Restaurant', RoomID: 1, RoomImgID: 'room_13', @@ -307,17 +322,17 @@ var hotelData = [ Extras: 'Free cancellation, Credit card accepted, Pay at visit', RoomFacility: 'Television, Projector, Balcony, Kitchen, Internet', Price: 600, - CheckInOut: [{ CheckIn: startDate1, CheckOut: endDate1 }, { CheckIn: startDate2, CheckOut: endDate2 }] + CheckInOut: [{ CheckIn: startDate1, CheckOut: endDate1 }, { CheckIn: startDate2, CheckOut: endDate2 }, { CheckIn: startDate3, CheckOut: endDate3 }] }, { HotelID: 127823, - HotelName: 'Bakator Cotel', + HotelName: 'Bakator Hotel', Address: "Boulevard Tirou, 255", Description: 'Pleasent hotel for sweet people.', HotelImgID: 'hotel_5', Rating: 2, ReviewCount: 15, - Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Bakator Cotel, New York' }, + Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Bakator Hotel, New York' }, HotelFacility: 'Swiming pool, Restaurant', RoomID: 2, RoomImgID: 'room_14', @@ -334,13 +349,13 @@ var hotelData = [ }, { HotelID: 127823, - HotelName: 'Bakator Cotel', + HotelName: 'Bakator Hotel', Address: "Boulevard Tirou, 255", Description: 'Pleasent hotel for sweet people.', HotelImgID: 'hotel_5', Rating: 2, ReviewCount: 15, - Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Bakator Cotel, New York' }, + Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Bakator Hotel, New York' }, HotelFacility: 'Swiming pool, Restaurant', RoomID: 3, RoomImgID: 'room_15', @@ -353,7 +368,7 @@ var hotelData = [ Extras: 'Free cancellation', RoomFacility: 'Television, Internet', Price: 100, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate5, CheckOut: endDate5 }] }, { HotelID: 332211, @@ -376,7 +391,7 @@ var hotelData = [ Extras: 'Free cancellation, Credit card accepted, Pay at visit', RoomFacility: 'Television, Kitchen, Internet, Shower', Price: 600, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate3, CheckOut: endDate3 }] }, { HotelID: 332211, @@ -445,7 +460,7 @@ var hotelData = [ Extras: 'Free cancellation, Credit card accepted, Pay at visit', RoomFacility: 'Television, Kitchen, Internet, Shower', Price: 600, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate3, CheckOut: endDate3 }] }, { HotelID: 342211, @@ -468,7 +483,7 @@ var hotelData = [ Extras: 'Free cancellation, Credit card accepted, Pay at visit', RoomFacility: 'Television, Internet, Shower', Price: 300, - CheckInOut: [{ CheckIn: startDate1, CheckOut: endDate1 }] + CheckInOut: [{ CheckIn: startDate1, CheckOut: endDate1 }, { CheckIn: startDate3, CheckOut: endDate3 }] }, { HotelID: 342211, @@ -495,13 +510,13 @@ var hotelData = [ }, { HotelID: 132278, - HotelName: 'Bekaor Cotel', + HotelName: 'Bekaor Hotel', Address: "68 rue de l'Abbaye", Description: 'We have different theme hotel.', HotelImgID: 'hotel_8', Rating: 3, ReviewCount: 30, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Bekaor Cotel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Bekaor Hotel, Montana' }, HotelFacility: 'Pet allowed, Swiming pool, Restaurant', RoomID: 1, RoomImgID: 'room_6', @@ -514,17 +529,17 @@ var hotelData = [ Extras: 'Pay at visit', RoomFacility: 'Television, Kitchen, Internet, Shower', Price: 600, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate3, CheckOut: endDate3 }] }, { HotelID: 132278, - HotelName: 'Bekaor Cotel', + HotelName: 'Bekaor Hotel', Address: "68 rue de l'Abbaye", Description: 'We have different theme hotel.', HotelImgID: 'hotel_8', Rating: 3, ReviewCount: 30, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Bekaor Cotel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Bekaor Hotel, Montana' }, HotelFacility: 'Pet allowed, Swiming pool, Restaurant', RoomID: 2, RoomImgID: 'room_7', @@ -541,13 +556,13 @@ var hotelData = [ }, { HotelID: 132278, - HotelName: 'Bekaor Cotel', + HotelName: 'Bekaor Hotel', Address: "68 rue de l'Abbaye", Description: 'We have different theme hotel.', HotelImgID: 'hotel_8', Rating: 3, ReviewCount: 30, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Bekaor Cotel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Bekaor Hotel, Montana' }, HotelFacility: 'Pet allowed, Swiming pool, Restaurant', RoomID: 3, RoomImgID: 'room_8', @@ -560,17 +575,17 @@ var hotelData = [ Extras: 'Free cancellation, Pay at visit', RoomFacility: 'Television, Internet', Price: 150, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate3, CheckOut: endDate3 }] }, { HotelID: 137823, - HotelName: 'Zanator Cotel', + HotelName: 'Zanator Hotel', Address: "Luisenstr. 56", Description: 'Pleasent hotel for polite people.', HotelImgID: 'hotel_9', Rating: 5, ReviewCount: 50, - Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zanator Cotel, New York' }, + Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zanator Hotel, New York' }, HotelFacility: 'Parking, Pet allowed', RoomID: 1, RoomImgID: 'room_9', @@ -587,13 +602,13 @@ var hotelData = [ }, { HotelID: 137823, - HotelName: 'Zanator Cotel', + HotelName: 'Zanator Hotel', Address: "Luisenstr. 56", Description: 'Pleasent hotel for polite people.', HotelImgID: 'hotel_9', Rating: 5, ReviewCount: 50, - Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zanator Cotel, New York' }, + Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zanator Hotel, New York' }, HotelFacility: 'Parking, Pet allowed', RoomID: 2, RoomImgID: 'room_10', @@ -610,13 +625,13 @@ var hotelData = [ }, { HotelID: 137823, - HotelName: 'Zanator Cotel', + HotelName: 'Zanator Hotel', Address: "Luisenstr. 56", Description: 'Pleasent hotel for polite people.', HotelImgID: 'hotel_9', Rating: 5, ReviewCount: 50, - Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zanator Cotel, New York' }, + Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zanator Hotel, New York' }, HotelFacility: 'Parking, Pet allowed', RoomID: 3, RoomImgID: 'room_11', @@ -629,7 +644,7 @@ var hotelData = [ Extras: 'Free cancellation', RoomFacility: 'Television, Internet', Price: 300, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate5, CheckOut: endDate5 }] }, { HotelID: 343211, @@ -652,7 +667,7 @@ var hotelData = [ Extras: 'Free cancellation, Pay at visit', RoomFacility: 'Television, Kitchen', Price: 400, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate4, CheckOut: endDate4 }] }, { HotelID: 343211, @@ -675,7 +690,7 @@ var hotelData = [ Extras: 'Free cancellation', RoomFacility: 'Internet, Shower', Price: 500, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate3, CheckOut: endDate3 }] }, { HotelID: 343211, @@ -702,13 +717,13 @@ var hotelData = [ }, { HotelID: 142278, - HotelName: 'ZZntor Cotel', + HotelName: 'ZZntor Hotel', Address: "333, rue du Commerce", Description: 'We are the winner hotel.', HotelImgID: 'hotel_11', Rating: 4, ReviewCount: 35, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'ZZntor Cotel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'ZZntor Hotel, Montana' }, HotelFacility: 'Parking, Swiming pool', RoomID: 1, RoomImgID: 'room_15', @@ -725,13 +740,13 @@ var hotelData = [ }, { HotelID: 142278, - HotelName: 'ZZntor Cotel', + HotelName: 'ZZntor Hotel', Address: "333, rue du Commerce", Description: 'We are the winner hotel.', HotelImgID: 'hotel_11', Rating: 4, ReviewCount: 35, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'ZZntor Cotel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'ZZntor Hotel, Montana' }, HotelFacility: 'Parking, Swiming pool', RoomID: 2, RoomImgID: 'room_16', @@ -748,13 +763,13 @@ var hotelData = [ }, { HotelID: 142278, - HotelName: 'ZZntor Cotel', + HotelName: 'ZZntor Hotel', Address: "333, rue du Commerce", Description: 'We are the winner hotel.', HotelImgID: 'hotel_11', Rating: 4, ReviewCount: 35, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'ZZntor Cotel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'ZZntor Hotel, Montana' }, HotelFacility: 'Parking, Swiming pool', RoomID: 3, RoomImgID: 'room_1', @@ -767,17 +782,17 @@ var hotelData = [ Extras: 'Free cancellation, Pay at visit', RoomFacility: 'Television, Internet', Price: 150, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate4, CheckOut: endDate4 }] }, { HotelID: 129823, - HotelName: 'Oakator Cotel', + HotelName: 'Oakator Hotel', Address: "255, RU Boulevard Tirou", Description: 'Pleasent hotel for sweet people.', HotelImgID: 'hotel_1', Rating: 5, ReviewCount: 50, - Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Oakator Cotel, New York' }, + Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Oakator Hotel, New York' }, HotelFacility: 'Swiming pool, Restaurant', RoomID: 1, RoomImgID: 'room_2', @@ -790,17 +805,17 @@ var hotelData = [ Extras: 'Credit card accepted', RoomFacility: 'Projector, Balcony, Kitchen, Internet', Price: 300, - CheckInOut: [{ CheckIn: startDate2, CheckOut: endDate2 }] + CheckInOut: [{ CheckIn: startDate2, CheckOut: endDate2 }, { CheckIn: startDate3, CheckOut: endDate3 }] }, { HotelID: 129823, - HotelName: 'Oakator Cotel', + HotelName: 'Oakator Hotel', Address: "255, RU Boulevard Tirou", Description: 'Pleasent hotel for sweet people.', HotelImgID: 'hotel_1', Rating: 5, ReviewCount: 50, - Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Oakator Cotel, New York' }, + Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Oakator Hotel, New York' }, HotelFacility: 'Swiming pool, Restaurant', RoomID: 2, RoomImgID: 'room_3', @@ -817,13 +832,13 @@ var hotelData = [ }, { HotelID: 129823, - HotelName: 'Oakator Cotel', + HotelName: 'Oakator Hotel', Address: "255, RU Boulevard Tirou", Description: 'Pleasent hotel for sweet people.', HotelImgID: 'hotel_1', Rating: 5, ReviewCount: 50, - Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Oakator Cotel, New York' }, + Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Oakator Hotel, New York' }, HotelFacility: 'Swiming pool, Restaurant', RoomID: 3, RoomImgID: 'room_4', @@ -836,7 +851,7 @@ var hotelData = [ Extras: 'Free cancellation', RoomFacility: 'Television, Internet', Price: 100, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate5, CheckOut: endDate5 }] }, { HotelID: 332221, @@ -882,7 +897,7 @@ var hotelData = [ Extras: 'Free cancellation', RoomFacility: 'Television, Internet, Shower', Price: 600, - CheckInOut: [{ CheckIn: startDate1, CheckOut: endDate1 }] + CheckInOut: [{ CheckIn: startDate1, CheckOut: endDate1 }, { CheckIn: startDate3, CheckOut: endDate3 }] }, { HotelID: 332221, @@ -928,7 +943,7 @@ var hotelData = [ Extras: 'Free cancellation, Credit card accepted, Pay at visit', RoomFacility: 'Television, Kitchen, Internet, Shower', Price: 600, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate4, CheckOut: endDate4 }] }, { HotelID: 342311, @@ -951,7 +966,7 @@ var hotelData = [ Extras: 'Free cancellation, Credit card accepted, Pay at visit', RoomFacility: 'Television, Internet, Shower', Price: 300, - CheckInOut: [{ CheckIn: startDate1, CheckOut: endDate1 }] + CheckInOut: [{ CheckIn: startDate1, CheckOut: endDate1 }, { CheckIn: startDate3, CheckOut: endDate3 }] }, { HotelID: 342311, @@ -978,13 +993,13 @@ var hotelData = [ }, { HotelID: 192278, - HotelName: 'Zekaorza Cotel', + HotelName: 'Zekaorza Hotel', Address: "68 rue de l'Abbaye GG", Description: 'We have different theme hotel.', HotelImgID: 'hotel_4', Rating: 1, ReviewCount: 30, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zekaorza Cotel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zekaorza Hotel, Montana' }, HotelFacility: 'Pet allowed, Swiming pool, Restaurant', RoomID: 1, RoomImgID: 'room_11', @@ -997,17 +1012,17 @@ var hotelData = [ Extras: 'Pay at visit', RoomFacility: 'Television, Kitchen, Internet, Shower', Price: 100, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate4, CheckOut: endDate4 }] }, { HotelID: 192278, - HotelName: 'Zekaorza Cotel', + HotelName: 'Zekaorza Hotel', Address: "68 rue de l'Abbaye GG", Description: 'We have different theme hotel.', HotelImgID: 'hotel_4', Rating: 1, ReviewCount: 30, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zekaorza Cotel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zekaorza Hotel, Montana' }, HotelFacility: 'Pet allowed, Swiming pool, Restaurant', RoomID: 2, RoomImgID: 'room_12', @@ -1024,13 +1039,13 @@ var hotelData = [ }, { HotelID: 192278, - HotelName: 'Zekaorza Cotel', + HotelName: 'Zekaorza Hotel', Address: "68 rue de l'Abbaye GG", Description: 'We have different theme hotel.', HotelImgID: 'hotel_4', Rating: 1, ReviewCount: 30, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zekaorza Cotel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zekaorza Hotel, Montana' }, HotelFacility: 'Pet allowed, Swiming pool, Restaurant', RoomID: 3, RoomImgID: 'room_13', @@ -1043,17 +1058,17 @@ var hotelData = [ Extras: 'Free cancellation, Pay at visit', RoomFacility: 'Television, Internet', Price: 250, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate4, CheckOut: endDate4 }] }, { HotelID: 197823, - HotelName: 'Zabatorza Cotel', + HotelName: 'Zabatorza Hotel', Address: "Luisenstr. 56 GG", Description: 'Pleasent hotel for polite people.', HotelImgID: 'hotel_5', Rating: 3, ReviewCount: 10, - Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zabatorza Cotel, New York' }, + Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zabatorza Hotel, New York' }, HotelFacility: 'Parking, Pet allowed', RoomID: 1, RoomImgID: 'room_14', @@ -1070,13 +1085,13 @@ var hotelData = [ }, { HotelID: 197823, - HotelName: 'Zabatorza Cotel', + HotelName: 'Zabatorza Hotel', Address: "Luisenstr. 56 GG", Description: 'Pleasent hotel for polite people.', HotelImgID: 'hotel_5', Rating: 3, ReviewCount: 10, - Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zabatorza Cotel, New York' }, + Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zabatorza Hotel, New York' }, HotelFacility: 'Parking, Pet allowed', RoomID: 2, RoomImgID: 'room_15', @@ -1093,13 +1108,13 @@ var hotelData = [ }, { HotelID: 197823, - HotelName: 'Zabatorza Cotel', + HotelName: 'Zabatorza Hotel', Address: "Luisenstr. 56 GG", Description: 'Pleasent hotel for polite people.', HotelImgID: 'hotel_5', Rating: 3, ReviewCount: 10, - Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zabatorza Cotel, New York' }, + Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Zabatorza Hotel, New York' }, HotelFacility: 'Parking, Pet allowed', RoomID: 3, RoomImgID: 'room_16', @@ -1112,7 +1127,7 @@ var hotelData = [ Extras: 'Free cancellation', RoomFacility: 'Television', Price: 300, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate4, CheckOut: endDate4 }] }, { HotelID: 393211, @@ -1181,17 +1196,17 @@ var hotelData = [ Extras: 'Free cancellation', RoomFacility: 'Internet, Shower', Price: 250, - CheckInOut: [{ CheckIn: startDate2, CheckOut: endDate2 }] + CheckInOut: [{ CheckIn: startDate2, CheckOut: endDate2 }, { CheckIn: startDate3, CheckOut: endDate3 }] }, { HotelID: 199278, - HotelName: 'Zoontor Cotel', + HotelName: 'Zoontor Hotel', Address: "333, rue du Commerce", Description: 'We are the winner hotel.', HotelImgID: 'hotel_7', Rating: 1, ReviewCount: 35, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zoontor Cotel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zoontor Hotel, Montana' }, HotelFacility: 'Parking, Swiming pool', RoomID: 1, RoomImgID: 'room_4', @@ -1204,17 +1219,17 @@ var hotelData = [ Extras: 'Free cancellation', RoomFacility: 'Television, Whiteboard, Kitchen, Internet, Shower', Price: 290, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate3, CheckOut: endDate3 }] }, { HotelID: 199278, - HotelName: 'Zoontor Cotel', + HotelName: 'Zoontor Hotel', Address: "333, rue du Commerce", Description: 'We are the winner hotel.', HotelImgID: 'hotel_7', Rating: 1, ReviewCount: 35, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zoontor Cotel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zoontor Hotel, Montana' }, HotelFacility: 'Parking, Swiming pool', RoomID: 2, RoomImgID: 'room_5', @@ -1231,13 +1246,13 @@ var hotelData = [ }, { HotelID: 199278, - HotelName: 'Zoontor Cotel', + HotelName: 'Zoontor Hotel', Address: "333, rue du Commerce", Description: 'We are the winner hotel.', HotelImgID: 'hotel_7', Rating: 1, ReviewCount: 35, - Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zoontor Cotel, Montana' }, + Location: { latitude: 45.322690, longitude: -106.781689, TooltipContent: 'Zoontor Hotel, Montana' }, HotelFacility: 'Parking, Swiming pool', RoomID: 3, RoomImgID: 'room_6', @@ -1250,17 +1265,17 @@ var hotelData = [ Extras: 'Free cancellation, Pay at visit', RoomFacility: 'Television, Internet', Price: 150, - CheckInOut: [] + CheckInOut: [{ CheckIn: startDate3, CheckOut: endDate3 }] }, { HotelID: 199923, - HotelName: 'Sasktor Cotel', + HotelName: 'Sasktor Hotel', Address: "255, RU Boulevard Tirou GG", Description: 'Pleasent hotel for sweet people.', HotelImgID: 'hotel_8', Rating: 2, ReviewCount: 50, - Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Sasktor Cotel, New York' }, + Location: { latitude: 40.633829, longitude: -73.967230, TooltipContent: 'Sasktor Hotel, New York' }, HotelFacility: 'Swiming pool, Restaurant', RoomID: 1, RoomImgID: 'room_7', diff --git a/Hotel-booking-App/src/HotelBookApp.css b/Hotel-booking-App/src/HotelBookApp.css index 12049fc..c156db5 100644 --- a/Hotel-booking-App/src/HotelBookApp.css +++ b/Hotel-booking-App/src/HotelBookApp.css @@ -4,7 +4,7 @@ font-weight: 400; font-size: 16px; line-height: 24px; - color: #767676; + color: #000000; } .primary-text-style { @@ -12,11 +12,11 @@ font-weight: 400; font-size: 16px; line-height: 24px; - color: #767676; + color: #000000; } .e-title-bar { - background-color: #111827; + background-color: #ffffff; padding: 20px 32px; box-shadow: none; border-bottom: 3px solid #6366f1 !important; @@ -39,7 +39,7 @@ .e-menu-button::before { content: "\e721"; - color: #ffffff; + color: #000000; font-size: 20px; font-family: "e-icons"; cursor: pointer; @@ -47,6 +47,13 @@ .e-main-container { display: flex; + height: calc(100vh - 70.67px); +} + +.e-side-bar { + width: 275px; + min-width: 275px; + overflow-y: scroll; } .e-side-bar-title { @@ -56,7 +63,7 @@ .e-side-bar-close-button::before { content: "\e7e7"; - color: #ffffff; + color: #000000; font-size: 20px; font-family: "e-icons"; margin-left: 15px; @@ -64,7 +71,7 @@ } .e-side-bar-operation-container { - background-color: #111827; + background-color: #ffffff; width: 260px; } @@ -72,6 +79,14 @@ padding-bottom: 10px; } +.e-date-cell-orange { + background-color: #ffedd5; +} + +.e-date-cell-green { + background-color: #d1fae5; +} + .e-side-bar-separator { padding: 15px 15px; } @@ -83,13 +98,13 @@ .e-line-separator, .e-data-line-separator { width: 95%; - background-color: #ffffff; + background-color: #a5b4fc; padding: 1px 0px; margin: 10px auto; } .e-app-container { - background-color: #31353e; + background-color: #eef2ff; width: 100%; } @@ -103,6 +118,7 @@ .e-grid-container { padding: 20px 10px 10px 10px; + height: 100%; } .e-mobile-layout { @@ -126,14 +142,32 @@ .e-title-text { font-weight: 600; - color: #ffffff; + font-size: 25px; + color: #000000; +} + +.e-title-text-book { + font-family: "Rubik Vinyl", serif; + color: #ef4444; +} + +.e-title-text-my { + font-family: "Jersey 15", serif; + color: #10b981; +} + +.e-title-text-room { + font-family: "Josefin Sans", serif; + color: #f59e0b; } .e-header-text { text-align: center; padding: 10px; font-weight: 600; - color: #ffffff; + color: #14b8a6; + font-family: "Josefin Sans", serif; + font-size: 20px; } .e-headercell .e-header-text { @@ -142,33 +176,37 @@ .e-semi-header-text { font-weight: 600; - color: #ffffff; + color: #000000; } .e-semi-title-header-text { font-weight: 200; - color: #ffffff; + color: #000000; } .e-semi-bold-header-text { font-weight: 700; - color: #22d3ee; + color: #ec4899; font-size: 24px; + font-family: "Josefin Sans", serif; } .e-semi-bold-title-header-text { font-weight: 600; - color: #ffffff; + color: #a855f7; + font-family: "Josefin Sans", serif; } -.e-rowcell.e-grid-hotel-name { +.e-grid .e-gridcontent table .e-rowcell.e-grid-hotel-name { font-weight: 700; font-size: 18px; + color: #ec4899; } -.e-rowcell.e-grid-room-name { +.e-grid .e-gridcontent table .e-rowcell.e-grid-room-name { font-weight: 600; font-size: 17px; + color: #a855f7; } .e-rowcell.e-grid-date { @@ -176,7 +214,7 @@ } .e-light-blue-border-bottom { - border-bottom: 3px solid #6366f1 !important; + border-bottom: 3px solid #a5b4fc !important; } .templateRow td { @@ -185,14 +223,14 @@ .e-rowtemplate-border-applier { box-shadow: none; - border: 1px solid #ffffff !important; + border: 1px solid #a5b4fc !important; } .e-room-not-available-cover { position: absolute; width: calc(100% - 2px); height: 100%; - background-color: #4b5563; + background-color: #d1d5db; opacity: 0.5; z-index: 1000; } @@ -211,6 +249,15 @@ height: 210px; } +.e-map-img { + height: 17px; + width: 17px; +} + +.e-grid .e-dialog-map { + max-height: none !important; +} + .e-info-container { padding: 5px; margin-top: 15px; @@ -240,11 +287,11 @@ } .normal-text-color { - color: #e5e7eb; + color: #000000; } .normal-hint-text-color { - color: #9ca3af; + color: #6b7280; } .e-map-text-spacer { @@ -257,6 +304,7 @@ .e-address-text-styler { text-decoration: underline; + color: #22c55e; } .e-rating-container.e-custom-rating .e-rating-item-list { @@ -310,10 +358,20 @@ .e-cost-styler { font-weight: 600; - color: #ffffff; + color: #6366f1; font-size: 24px; } +.e-discount-style { + color: #059669; + font-weight: 500; +} + +.e-tax-style { + color: #dc2626; + font-weight: 500; +} + .e-book-button { padding: 0px 8px 0px 25px; } @@ -332,7 +390,7 @@ } .e-details-container { - background-color: #31353e; + background-color: #eef2ff; padding-top: 30px; } @@ -391,14 +449,14 @@ .e-details-info-container { display: flex; - background-color: #111827; + background-color: #ffffff; margin-top: 30px; } .e-booking-details-container { flex: 3; - border-left: 5px solid #31353e !important; - border-right: 5px solid #31353e !important; + border-left: 5px solid #eef2ff !important; + border-right: 5px solid #eef2ff !important; } .e-booking-details-separator { @@ -407,7 +465,7 @@ .e-hotel-details-container { flex: 1; - border-right: 5px solid #31353e !important; + border-right: 5px solid #eef2ff !important; } .e-hotel-details-side-bar-separator { @@ -440,6 +498,19 @@ margin: 6px 6px 0px 0px; } +@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import "../node_modules/@syncfusion/ej2-react-grids/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css"; +@import '../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css'; + @media only screen and (max-width: 1120px) { .e-booking-details-container { @@ -496,18 +567,21 @@ @media only screen and (max-width: 850px) { .e-details-info-container { - display: block; + flex-direction: column-reverse; } .e-booking-details-container { - width: 100%; - border-left: 0px solid #31353e !important; - border-right: 0px solid #31353e !important; - border-bottom: 5px solid #31353e !important; + border-top: 5px solid #eef2ff !important; + border-left: 5px solid #eef2ff !important; + border-right: 5px solid #eef2ff !important; + border-bottom: 5px solid #eef2ff !important; } .e-hotel-details-container { - border-right: 0px solid #31353e !important; + border-top: 5px solid #eef2ff !important; + border-left: 5px solid #eef2ff !important; + border-right: 5px solid #eef2ff !important; + border-bottom: 5px solid #eef2ff !important; } } @@ -523,10 +597,6 @@ display: block; } - .e-main-container { - display: block; - } - .e-side-bar { display: none; position: fixed; diff --git a/Hotel-booking-App/src/HotelBookApp.js b/Hotel-booking-App/src/HotelBookApp.js index a59d4d2..78e3d78 100644 --- a/Hotel-booking-App/src/HotelBookApp.js +++ b/Hotel-booking-App/src/HotelBookApp.js @@ -6,7 +6,7 @@ import { Inject, Page, Print } from '@syncfusion/ej2-react-grids'; -import { closest } from '@syncfusion/ej2-base'; +import { closest, isNullOrUndefined } from '@syncfusion/ej2-base'; import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars'; import { ButtonComponent, ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons'; import { DialogComponent } from '@syncfusion/ej2-react-popups'; @@ -252,7 +252,7 @@ function HotelBookApp() { priceCollectionData.current = priceCollection; lineThroughPriceText.current.innerText = '$' + price.toFixed(2); taxedPriceText.current.innerText = '$' + priceCollection.TaxedPrice; - priceStatementText.current.innerText = 'includes ' + selectedRoom.DiscountPercentage + '% discount (-$' + priceCollection.DiscountAmount + ') and ' + selectedRoom.TaxPercentage + '% tax (+$' + priceCollection.TaxAmount + ')'; + priceStatementText.current.innerHTML = 'includes ' + selectedRoom.DiscountPercentage + '% discount (-$' + priceCollection.DiscountAmount + ') and ' + selectedRoom.TaxPercentage + '% tax (+$' + priceCollection.TaxAmount + ')'; } // This method calls for navigate the user to booking page and rendering the input field with form validator @@ -369,7 +369,7 @@ function HotelBookApp() {
| "); + printWindow.document.write(" | "); printWindow.document.write("Description"); printWindow.document.write(" | "); - printWindow.document.write(""); + printWindow.document.write(" | "); printWindow.document.write("Price"); printWindow.document.write(" | "); printWindow.document.write("
| "); + printWindow.document.write(" | "); printWindow.document.write("Room cost"); printWindow.document.write(" | "); - printWindow.document.write(""); + printWindow.document.write(" | "); printWindow.document.write("+$" + printInfo.current.HotelData.Price); printWindow.document.write(" | "); printWindow.document.write("
| "); + printWindow.document.write(" | "); printWindow.document.write("Extra bed cost ( " + printInfo.current.HotelData.ExtraBedCost + " * " + printInfo.current.ExtraBed + " )"); printWindow.document.write(" | "); - printWindow.document.write(""); + printWindow.document.write(" | "); printWindow.document.write("+$" + (printInfo.current.HotelData.ExtraBedCost * printInfo.current.ExtraBed)); printWindow.document.write(" | "); printWindow.document.write("
| "); + printWindow.document.write(" | "); printWindow.document.write("Discount " + printInfo.current.HotelData.DiscountPercentage + "%"); printWindow.document.write(" | "); - printWindow.document.write(""); + printWindow.document.write(" | "); printWindow.document.write("-$" + printInfo.current.PriceCollection.DiscountAmount); printWindow.document.write(" | "); printWindow.document.write("
| "); + printWindow.document.write(" | "); printWindow.document.write("Tax " + printInfo.current.HotelData.TaxPercentage + "%"); printWindow.document.write(" | "); - printWindow.document.write(""); + printWindow.document.write(" | "); printWindow.document.write("+$" + printInfo.current.PriceCollection.TaxAmount); printWindow.document.write(" | "); printWindow.document.write("
| "); + printWindow.document.write(" | "); + printWindow.document.write("------------------------------------"); + printWindow.document.write(" | "); + printWindow.document.write(""); + printWindow.document.write("-------------------------"); + printWindow.document.write(" | "); + printWindow.document.write("|
| "); printWindow.document.write("Final price"); printWindow.document.write(" | "); - printWindow.document.write(""); + printWindow.document.write(" | "); printWindow.document.write("$" + printInfo.current.PriceCollection.TaxedPrice); printWindow.document.write(" | "); printWindow.document.write("