Ilvi

hotel-management/src/components/AddRoomForm.jsx

@@ -7,19 +7,17 @@ import { useState } from "react";
 import { useSubmitState } from "../hooks/useSubmitState";
 
 import { RequestService } from "../util/sendRequest";
-
 import { getTokenFromLocalStorage } from "../util/token";
 
-export default function AddRoomForm({roomTypes, onSubmit}) {
-
+export default function AddRoomForm({ roomTypes, onSubmit }) {
     const [submitState, setErrorMessage, setSubmitting] = useSubmitState();
     const token = getTokenFromLocalStorage();
 
-
     const [newRoomInfo, setNewRoomInfo] = useState({
         room_type: null,
         room_unique_number: "",
-        room_description: ""
+        room_description: "",
+        main_image: null
     });
 
     const roomTypeOptions = roomTypes.map((roomType) => roomType.type_name);
@@ -50,67 +48,77 @@ export default function AddRoomForm({roomTypes, onSubmit}) {
         }));
     }
 
-    function handleSubmit(){ 
+    function handleFileChange(event) {
+        setErrorMessage("");
+        const file = event.target.files[0];
+        setNewRoomInfo((prev) => ({
+            ...prev,
+            main_image: file
+        }));
+    }
+
+    async function handleSubmit() {
         if (newRoomInfo.room_type === null || newRoomInfo.room_unique_number === "") {
-            setErrorMessage("THIS is why your wife left you 🖕🏻");
+            setErrorMessage("Please provide all the required information.");
             return;
         }
 
         const roomTypeId = roomTypes.find((roomType) => roomType.type_name === newRoomInfo.room_type).id;
-
-        const roomData = {
-            room_type: roomTypeId,
-            room_unique_number: newRoomInfo.room_unique_number,
-            description: newRoomInfo.room_description
+
+        const formData = new FormData();
+        formData.append('room_type', roomTypeId);
+        formData.append('room_unique_number', newRoomInfo.room_unique_number);
+        formData.append('description', newRoomInfo.room_description);
+        if (newRoomInfo.main_image) {
+            formData.append('main_image', newRoomInfo.main_image);
         }
 
         async function sendRoomData() {
             try {
                 const rs = new RequestService(token.access);
-                const response =await rs.createRoom(roomData);
+                const response = await rs.createRoomType(formData);
 
-                // console.log(await response.json());
-
-                if (response.status === 400) {
+                if (!response.ok) {
                     console.log(await response.text());
-                    throw new Error("Room already exists");
+                    throw new Error("Room already exists or other error occurred");
                 }
                 const data = await response.json();
 
                 onSubmit(data);
-
-            }
-            catch (error) {
+
+            } catch (error) {
                 setErrorMessage(error.message);
-            }
-            finally {
+            } finally {
                 setSubmitting(false);
             }
-
         }
 
         sendRoomData();
         setNewRoomInfo({
             room_type: null,
             room_unique_number: "",
-            room_description: ""
-        } )
-        console.log(roomData);
+            room_description: "",
+            main_image: null
+        });
     }
 
-	return (
-		<form>
-			<div>
-				<OptionList options={roomTypeOptions} selectedOption={newRoomInfo.room_type ? newRoomInfo.room_type : "Select Room Type"} onSelect={handleRoomTypeSelection} />
-			</div>
+    return (
+        <form>
+            <div>
+                <OptionList options={roomTypeOptions} selectedOption={newRoomInfo.room_type ? newRoomInfo.room_type : "Select Room Type"} onSelect={handleRoomTypeSelection} />
+            </div>
             <div className="make-stypeWider">
                 <Input type="number" labelText="Room Number" onChange={handleRoomNumberChange} value={newRoomInfo.room_unique_number} />
             </div>
-			<Input textarea onChange={handleRoomDescriptionChange} value={newRoomInfo.room_description}/>
-			<p className="center-button-modal">
+            <Input textarea onChange={handleRoomDescriptionChange} value={newRoomInfo.room_description} />
+            <div className="make-stypeWider">
+                <label htmlFor="main_image">Room Image</label>
+                <input type="file" id="main_image" onChange={handleFileChange} />
+            </div>
+            <p className="center-button-modal">
                 {submitState.errorMessage && <p className="lato-bold feedback_error_msg_text">{submitState.errorMessage}</p>}
-				<Button onClick={handleSubmit}  type="button">Submit</Button>
-			</p>
-		</form>
-	);
+                <Button onClick={handleSubmit} type="button">Submit</Button>
+            </p>
+        </form>
+    );
 }

hotel-management/src/components/AddRoomTypeForm.jsx

@@ -0,0 +1,154 @@
+import Button from "./Button";
+import Input from "./Input";
+
+import { useState } from "react";
+import { useSubmitState } from "../hooks/useSubmitState";
+
+import { isPngOrJpg } from "../util/validation";
+import { RequestService } from "../util/sendRequest";
+
+import { getTokenFromLocalStorage } from "../util/token";
+
+export default function AddRoomTypeForm({}) {
+	const token = getTokenFromLocalStorage();
+	const [submitState, setErrorMessage, setSubmitting] = useSubmitState();
+
+	const [newRoomTypeInfo, setNewRoomTypeInfo] = useState({
+		type_name: "",
+		price: 0,
+		capacity: 0,
+		room_image: "",
+	});
+
+	function handleTypeNameChange(event) {
+		setErrorMessage("");
+		const value = event.target.value;
+		setNewRoomTypeInfo((prev) => ({
+			...prev,
+			type_name: value,
+		}));
+	}
+
+	function handlePriceChange(event) {
+		setErrorMessage("");
+		const value = event.target.value;
+		setNewRoomTypeInfo((prev) => ({
+			...prev,
+			price: value,
+		}));
+	}
+
+	function handleCapacityChange(event) {
+		setErrorMessage("");
+		const value = event.target.value;
+		setNewRoomTypeInfo((prev) => ({
+			...prev,
+			capacity: value,
+		}));
+	}
+
+	function handleRoomImageChange(event) {
+		setErrorMessage("");
+		const value = event.target.value;
+		const file = event.target.files[0];
+		console.log(file.name);
+		console.log(value);
+		setNewRoomTypeInfo((prev) => ({
+			...prev,
+			room_image: file,
+		}));
+	}
+
+	console.log(newRoomTypeInfo);
+
+	function handleSubmit() {
+		if (
+			newRoomTypeInfo.type_name === "" ||
+			newRoomTypeInfo.price === 0 ||
+			newRoomTypeInfo.capacity === 0 ||
+			newRoomTypeInfo.room_image === ""
+		) {
+			setErrorMessage("Please fill in all fields");
+			return;
+		}
+
+		// if (!isPngOrJpg(newRoomTypeInfo.room_image)) {
+		//     setErrorMessage("Please upload a valid image file");
+		//     return;
+		// }
+
+		const roomData = {
+			type_name: newRoomTypeInfo.type_name,
+			price: parseInt(newRoomTypeInfo.price, 10),
+			size: parseInt(newRoomTypeInfo.capacity, 10),
+			main_image: newRoomTypeInfo.room_image.name,
+		};
+
+		// console.log(roomData);
+
+		async function sendRoomData() {
+			try {
+				const rs = new RequestService(token.access);
+				const response = await rs.createRoomType(roomData);
+
+				if (!response.ok) {
+					console.log(await response.text());
+					throw new Error(await response.text());
+				}
+
+				console.log(await response.json());
+				setSubmitting(false);
+			} catch (error) {
+				console.error(error);
+				// setErrorMessage("Failed to create room type");
+				setSubmitting(false);
+			}
+		}
+
+		sendRoomData();
+	}
+
+	return (
+		<>
+			<form>
+				<Input
+					labelText={"Type name"}
+					type="text"
+					value={newRoomTypeInfo.type_name}
+					onChange={handleTypeNameChange}
+				/>
+				<div className="make-stypeWider">
+					<Input
+						labelText={"Capacity"}
+						type="number"
+						min={0}
+						max={10}
+						value={newRoomTypeInfo.capacity}
+						onChange={handleCapacityChange}
+					/>
+				</div>
+				<Input
+					labelText={"Price"}
+					type="number"
+					min={0}
+					value={newRoomTypeInfo.price}
+					onChange={handlePriceChange}
+				/>
+				<Input
+					labelText={"Room Image"}
+					type="file"
+					onChange={(event) => handleRoomImageChange(event)}
+				/>
+
+				<div className="center-button-modal">
+					{submitState.errorMessage && (
+						<p className="lato-bold feedback_error_msg_text">{submitState.errorMessage}</p>
+					)}
+					<Button type="button" onClick={handleSubmit} display="primary">
+						Submit
+					</Button>
+				</div>
+			</form>
+		</>
+	);
+}

hotel-management/src/components/Input.css

@@ -24,4 +24,4 @@
         font-size: 1.1rem;
         color: #001427;
     }
-}
+}

hotel-management/src/components/RoomDetails.css

@@ -8,9 +8,9 @@
     margin: 20px 0;
 }
 
-.room-detail-filters-container :last-child{
+/* .room-detail-filters-container :last-child{
     margin-left: auto;
-}
+} */
 
 .room-detail-table-container{
     width: 100%;

hotel-management/src/pages/ManagerRoomDetailPage.jsx

@@ -3,6 +3,7 @@ import FeedbackCategoryBtn from "../components/FeedbackCategoryBtn";
 import Modal from "../components/Modal";
 import RoomDetailForm from "../components/RoomDetailForm";
 import AddRoomForm from "../components/AddRoomForm";
+import AddRoomTypeForm from "../components/AddRoomTypeForm";
 import "../components/RoomDetails.css";
 
 import { useState, useRef, useEffect } from "react";
@@ -12,6 +13,7 @@ import { getTokenFromLocalStorage } from "../util/token";
 export default function ManagerRoomDetailPage() {
 	const modalRef = useRef();
 	const addRoomModalRef = useRef();
+	const addRoomTypeModalRef = useRef();
 
 	const token = getTokenFromLocalStorage();
 
@@ -75,6 +77,8 @@ export default function ManagerRoomDetailPage() {
 		addRoomModalRef.current.open();
 	}
 
+
+
 	function handleAddRoomSubmit(newRoom) {
         setRoomDetails((prev) => [...prev, newRoom]);
 		addRoomModalRef.current.close();
@@ -96,6 +100,9 @@ export default function ManagerRoomDetailPage() {
 					<AddRoomForm roomTypes={roomTypes} onSubmit={handleAddRoomSubmit} />
 				)}
 			</Modal>
+			<Modal ref={addRoomTypeModalRef} title="Add Room Type">
+				<AddRoomTypeForm />
+			</Modal>
 
 			<div className="room-detail-filters-container">
 				<FeedbackCategoryBtn
@@ -118,6 +125,10 @@ export default function ManagerRoomDetailPage() {
 				<Button display="secondary" onClick={handleAddRoom}>
 					Add Room
 				</Button>
+				<Button display="secondary" onClick={() => {addRoomTypeModalRef.current.open() }}>
+					Add Room Type
+				</Button>
+
 			</div>
 
 			<main className="room-detail-table-container">

hotel-management/src/util/sendRequest.js

@@ -78,6 +78,11 @@ export class RequestService {
         return await this.roomService.changeReservationDate(reservation_id, data);
     }
 
+    async createRoomType(data) {
+        console.log(data);
+        return await this.roomService.createRoomType(data);
+    }
+
 }
 
 class RequestUserService {
@@ -150,7 +155,7 @@ class RequestRoomService {
         return await fetch(this.mainUrl + `reservation/change/date/${reservation_id}/`, {
             method: requestMethods.PUT,
             headers: this.header_info,
-            body: data
+            body: JSON.stringify(data)
         })
     }
 
@@ -163,6 +168,14 @@ class RequestRoomService {
             body: JSON.stringify(data),
         })
     }
+
+    async createRoomType(data) {
+        return await fetch(this.mainUrl + 'room_type/create/', {
+            method: requestMethods.POST,
+            headers: this.header_info,
+            body: JSON.stringify(data)
+        })
+    }
 }
 
 class RequestFeedbackService {
@@ -178,7 +191,7 @@ class RequestFeedbackService {
         return await fetch(this.mainUrl + 'create/', {
             method: requestMethods.POST,
             headers: this.header_info,
-            body: data
+            body: JSON.stringify(data)
         })
     }