book room done

COS301-SE-2024 · Jul 11, 2024 · 7d2ce9e · 7d2ce9e
1 parent 6a36032
commit 7d2ce9e
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 48 deletions.
diff --git a/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx b/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx
@@ -112,6 +112,11 @@ const BookRoom = () => {
 
   const roomPairs = groupDataInPairs(roomData);
 
+  const handleRoomSelect = async (room) => {
+    await SecureStore.setItemAsync('CurrentRoom', JSON.stringify(room));
+    router.push('/office-details');
+  }
+
   return (
     <>
       <View style={{ flex: 1, backgroundColor, paddingTop: 60, top: 0 }}>
@@ -142,7 +147,7 @@ const BookRoom = () => {
             {roomPairs.map((pair, index) => (
               <View key={index} style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20 }}>
                 {pair.map((room, idx) => (
-                  <TouchableOpacity key={idx} style={{ flex: 1, borderWidth: 1, borderColor: cardBackgroundColor, borderRadius: 12, backgroundColor: cardBackgroundColor, marginHorizontal: 4 }} onPress={() => router.push({ pathname: '/office-details', params: { roomData: JSON.stringify(room) } })}>
+                  <TouchableOpacity key={idx} style={{ flex: 1, borderWidth: 1, borderColor: cardBackgroundColor, borderRadius: 12, backgroundColor: cardBackgroundColor, marginHorizontal: 4 }} onPress={() => handleRoomSelect(room)}>
                     <Image style={{ width: '100%', height: 96, borderRadius: 10 }} source={{ uri: 'https://content-files.shure.com/OriginFiles/BlogPosts/best-layouts-for-conference-rooms/img5.png' }} />
                     <View style={{ padding: 10 }}>
                       <Text style={{ fontSize: 18, fontWeight: 'bold', color: textColor }}>{room.roomName}</Text>
@@ -171,7 +176,7 @@ const BookRoom = () => {
         ) : (
           <ScrollView style={{ flex: 1, marginTop: 10, paddingHorizontal: 11, marginBottom: 84 }} showsVerticalScrollIndicator={false}>
             {roomData.map((room, idx) => (
-              <TouchableOpacity key={idx} style={{ flexDirection: 'row', borderWidth: 1, borderColor: cardBackgroundColor, borderRadius: 12, backgroundColor: cardBackgroundColor, marginVertical: 4, height: "fit" }} onPress={() => router.push({ pathname: '/office-details', params: { roomData: JSON.stringify(room) } })}>
+              <TouchableOpacity key={idx} style={{ flexDirection: 'row', borderWidth: 1, borderColor: cardBackgroundColor, borderRadius: 12, backgroundColor: cardBackgroundColor, marginVertical: 4, height: "fit" }} onPress={() => handleRoomSelect(room)}>
                 <Image style={{ width: '50%', height: '100%', borderRadius: 10 }} source={{ uri: 'https://content-files.shure.com/OriginFiles/BlogPosts/best-layouts-for-conference-rooms/img5.png' }} />
                 <View style={{ flex: 1, padding: 10, justifyContent: 'space-between' }}>
                   <Text style={{ fontSize: 18, fontWeight: 'bold', color: textColor }}>{room.roomName}</Text>

diff --git a/frontend/occupi-mobile4/screens/Booking/ViewBookingDetails.tsx b/frontend/occupi-mobile4/screens/Booking/ViewBookingDetails.tsx
@@ -60,7 +60,7 @@ const ViewBookingDetails = (bookingId:string, roomName:string) => {
         //   console.log("CurrentRoom:",result);
           // setUserDetails(JSON.parse(result).data);
           let jsonresult = JSON.parse(result);
-        //   console.log(jsonresult.checkedIn);
+          console.log(jsonresult);
           setRoom(jsonresult);
           setCheckedIn(jsonresult.checkedIn);
         };

diff --git a/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx b/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx
@@ -33,38 +33,43 @@ const BookingDetails = () => {
   const [currentStep, setCurrentStep] = useState(0);
   const [email, setEmail] = useState("");
   const [loading, setLoading] = useState(false);
-  const [bookingInfo, setBookingInfo] = useState({});
+  const [bookingInfo, setbookingInfo] = useState();
   const colorScheme = useColorScheme();
   const toast = useToast();
   const router = useRouter();
-  const roomParams = useLocalSearchParams();
   const [creatorEmail, setCreatorEmail] = useState('');
-  const slot = roomParams.slot || 0;
-  const { startTime, endTime } = {4,5};
-  const roomId = bookingInfo.roomId;
-  const floorNo = bookingInfo.floorNo;
+  const [startTime, setStartTime] = useState('');
+  const [endTime, setEndTime] = useState('');
   const isDark = colorScheme === "dark";
-  // console.log(creatorEmail + slot + roomId + floorNo);
-  // console.log(roomData);
-  // console.log("slot: " + slot);
+  // console.log(creatorEmail + roomId + floorNo);
+  // console.log(bookingInfo?);
   // console.log(startTime);
-  const [attendees, setAttendees] = useState([creatorEmail]);
+  const [attendees, setAttendees] = useState(['']);
   // console.log(attendees);
   const cardBackgroundColor = isDark ? '#2C2C2E' : '#F3F3F3';
   const steps = ["Booking details", "Invite attendees", "Receipt"];
   const apiUrl = process.env.EXPO_PUBLIC_LOCAL_API_URL;
   const bookroomendpoint = process.env.EXPO_PUBLIC_BOOK_ROOM;
 
   useEffect(() => {
-    const getBookingInfo = async () => {
-      let result : string = await SecureStore.getItemAsync('BookingInfo');
-    //   console.log("CurrentRoom:",result);
+    const getbookingInfo = async () => {
+      let userinfo = await SecureStore.getItemAsync('UserData');
+      // console.log(result);
+      // if (result !== undefined) {
+      let jsoninfo = JSON.parse(userinfo);
+      setCreatorEmail(jsoninfo?.data?.email);
+      let result: string = await SecureStore.getItemAsync('BookingInfo');
+      console.log("CurrentRoom:", jsoninfo?.data?.email);
       // setUserDetails(JSON.parse(result).data);
       let jsonresult = JSON.parse(result);
-      console.log(jsonresult);
-      setBookingInfo(jsonresult);
+      console.log("BookingInfo", jsonresult);
+      setbookingInfo(jsonresult);
+      setStartTime(jsonresult.startTime);
+      setEndTime(jsonresult.endTime);
+      console.log(jsoninfo?.data?.email);
+      setAttendees([jsoninfo?.data?.email]);
     };
-    getBookingInfo();
+    getbookingInfo();
   }, []);
 
   const addAttendee = () => {
@@ -80,16 +85,16 @@ const BookingDetails = () => {
 
   const onSubmit = async () => {
     const body = {
-      "roomId": roomParams.roomId,
+      "roomId": bookingInfo?.roomId,
       "emails": attendees,
-      "roomName": roomData.roomName,
+      "roomName": bookingInfo?.roomName,
       "creator": creatorEmail,
-      "floorNo": roomParams.floorNo,
-      "date": "2024-07-01T00:00:00.000+00:00",
-      "start": "2024-07-01T08:00:00.000+00:00",
-      "end": "2024-07-01T09:00:00.000+00:00"
+      "floorNo": bookingInfo?.floorNo,
+      "date": `${bookingInfo?.date}T00:00:00.000+00:00`,
+      "start": `${bookingInfo?.date}T${startTime}:00.000+00:00`,
+      "end": `${bookingInfo?.date}T${endTime}:00.000+00:00`
     };
-    console.log("hereeeeee");
+    console.log("hereeeeee", body);
     let authToken = await SecureStore.getItemAsync('Token');
     try {
       setLoading(true);
@@ -301,7 +306,7 @@ const BookingDetails = () => {
                 color: isDark ? "#fff" : "#000",
               }}
             >
-              {roomData.roomName}
+              {bookingInfo?.roomName}
             </Text>
             <View
               style={{
@@ -312,8 +317,8 @@ const BookingDetails = () => {
             >
               <Ionicons name="wifi" size={24} color={isDark ? '#fff' : '#000'} /><Text color={isDark ? '#fff' : '#000'}> Fast   </Text>
               <MaterialCommunityIcons name="television" size={24} color={isDark ? '#fff' : '#000'} /><Text color={isDark ? '#fff' : '#000'}> OLED   </Text>
-              <Octicons name="people" size={24} color={isDark ? '#fff' : '#000'} /><Text color={isDark ? '#fff' : '#000'}> {roomData.minOccupancy} - {roomData.maxOccupancy} </Text>
-              <Feather name="layers" size={24} color={isDark ? '#fff' : '#000'} /><Text color={isDark ? '#fff' : '#000'}> Floor: {roomData.floorNo === 0 ? 'G' : roomData.floorNo}</Text>
+              <Octicons name="people" size={24} color={isDark ? '#fff' : '#000'} /><Text color={isDark ? '#fff' : '#000'}>{bookingInfo?.minOccupancy} - {bookingInfo?.maxOccupancy}   </Text>
+              <Feather name="layers" size={24} color={isDark ? '#fff' : '#000'} /><Text color={isDark ? '#fff' : '#000'}> Floor: {bookingInfo?.floorNo === "0" ? 'G' : bookingInfo?.floorNo}</Text>
 
             </View>
             <View
@@ -472,12 +477,12 @@ const BookingDetails = () => {
           > */}
           <View style={{ width: 365, height: 500, borderWidth: 1, borderColor: cardBackgroundColor, paddingBottom: 50, borderRadius: 12, backgroundColor: cardBackgroundColor, marginHorizontal: 4 }}>
             <Image style={{ width: '100%', height: '30%', borderTopLeftRadius: 10, borderTopRightRadius: 10 }} source={{ uri: 'https://content-files.shure.com/OriginFiles/BlogPosts/best-layouts-for-conference-rooms/img5.png' }} />
-            <Text fontWeight="$bold" m="$3" style={{ color: isDark ? '#fff' : '#000', fontSize: 24 }}>HDMI Room</Text>
+            <Text fontWeight="$bold" m="$3" style={{ color: isDark ? '#fff' : '#000', fontSize: 24 }}>{bookingInfo?.roomName}</Text>
             <View px="$3" alignItems="center" flexDirection="row">
               <Ionicons name="wifi" size={24} color={isDark ? '#fff' : '#000'} /><Text fontWeight="$light" color={isDark ? '#fff' : '#000'}> Fast   </Text>
               <MaterialCommunityIcons name="television" size={24} color={isDark ? '#fff' : '#000'} /><Text color={isDark ? '#fff' : '#000'}> OLED   </Text>
-              <Octicons name="people" size={24} color={isDark ? '#fff' : '#000'} /><Text color={isDark ? '#fff' : '#000'}> {roomData.minOccupancy} - {roomData.maxOccupancy} </Text>
-              <Feather name="layers" size={24} color={isDark ? '#fff' : '#000'} /><Text fontWeight="$light" color={isDark ? '#fff' : '#000'}> Floor {roomData.floorNo === 0 ? 'G' : roomData.floorNo}</Text>
+              <Octicons name="people" size={24} color={isDark ? '#fff' : '#000'} /><Text color={isDark ? '#fff' : '#000'}>{bookingInfo?.minOccupancy} - {bookingInfo?.maxOccupancy}   </Text>
+              <Feather name="layers" size={24} color={isDark ? '#fff' : '#000'} /><Text fontWeight="$light" color={isDark ? '#fff' : '#000'}> Floor {bookingInfo?.floorNo === "0" ? 'G' : bookingInfo?.floorNo}</Text>
             </View>
             <View px="$3" flexDirection="row" justifyContent="space-around">
               <View alignItems="center" my="$3" px="$1" py="$1.5" w="$2/5" backgroundColor="$yellowgreen" borderRadius="$lg">

diff --git a/frontend/occupi-mobile4/screens/Office/OfficeDetails.tsx b/frontend/occupi-mobile4/screens/Office/OfficeDetails.tsx
@@ -63,9 +63,7 @@ const OfficeDetails = () => {
   const router = useRouter();
   const colorScheme = useColorScheme();
   const isDarkMode = colorScheme === 'dark';
-  const roomParams = useLocalSearchParams();
-  const roomData = roomParams.roomData;
-  const roomData2 = JSON.parse(roomData);
+  const [room, setRoom] = useState();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const scrollX = useRef(new Animated.Value(0)).current;
   const { width } = useWindowDimensions();
@@ -81,14 +79,26 @@ const OfficeDetails = () => {
   };
   const upcomingDates = getUpcomingDates();
 
+  useEffect(() => {
+    const getCurrentRoom = async () => {
+      let result : string = await SecureStore.getItemAsync('CurrentRoom');
+      console.log("CurrentRoom:",result);
+      // setUserDetails(JSON.parse(result).data);
+      let jsonresult = JSON.parse(result);
+      // console.log(jsonresult);
+      setRoom(jsonresult);
+    };
+    getCurrentRoom();
+  }, []);
+
   const handleBookRoom = async () => {
     // console.log('Booking Room');
     // console.log(date);
     // console.log(startTime);
     // console.log(endTime);
-    // console.log(roomData2.roomName);
-    // console.log(roomData2.roomId);
-    // console.log(roomData2.floorNo);
+    // console.log(room?.roomName);
+    // console.log(room?.roomId);
+    // console.log(room?.floorNo);
 
     // Check if any of the required fields are blank
     if (!date || !startTime || !endTime) {
@@ -108,26 +118,28 @@ const OfficeDetails = () => {
       date: date,
       startTime: startTime,
       endTime: endTime,
-      roomName: roomData2.roomName,
-      roomId: roomData2.roomId,
-      floorNo: roomData2.floorNo
+      roomName: room?.roomName,
+      roomId: room?.roomId,
+      floorNo: room?.floorNo,
+      minOccupancy: room?.minOccupancy,
+      maxOccupancy: room?.maxOccupancy
     };
 
-    // console.log(bookingInfo);
+    console.log(bookingInfo);
     await SecureStore.setItemAsync('BookingInfo', JSON.stringify(bookingInfo));
     router.replace('/booking-details');
   }
 
 
-  // console.log(roomData2);
+  // console.log(room?);
   // console.log(userEmail);
 
   return (
     <>
       {/* Top Section */}
       <View pt="$12" px="$8" pb="$4" backgroundColor={colorScheme === 'dark' ? 'black' : 'white'} style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
         <Icon right="$4" as={Feather} name="chevron-left" size="xl" color={colorScheme === 'dark' ? 'white' : 'black'} onPress={() => navigation.goBack()} />
-        <Text right="$2" fontWeight="$bold" fontSize={22} style={{ color: isDarkMode ? '#fff' : '#000' }}>{roomData2.roomName}</Text>
+        <Text right="$2" fontWeight="$bold" fontSize={22} style={{ color: isDarkMode ? '#fff' : '#000' }}>{room?.roomName}</Text>
         <View alignItems="center" flexDirection="row" w="$24" justifyContent="space-between">
           <View rounded="$full" backgroundColor={isDarkMode ? '#2C2C2E' : '#F3F3F3'} p="$2">
             <Feather name="heart" size={24} color={isDarkMode ? '#fff' : '#000'} />
@@ -168,12 +180,12 @@ const OfficeDetails = () => {
           </View>
         </View>
         <View style={{ paddingHorizontal: wp('5%') }}>
-          <Text fontSize={24} fontWeight="$bold" mt="$2" mb="$3" style={{ color: isDarkMode ? '#fff' : '#000' }}>{roomData2.roomName}</Text>
+          <Text fontSize={24} fontWeight="$bold" mt="$2" mb="$3" style={{ color: isDarkMode ? '#fff' : '#000' }}>{room?.roomName}</Text>
           <View alignItems="center" flexDirection="row">
             <Ionicons name="wifi" size={24} color={isDarkMode ? '#fff' : '#000'} /><Text fontWeight="$light" color={isDarkMode ? '#fff' : '#000'}> Fast   </Text>
             <MaterialCommunityIcons name="television" size={24} color={isDarkMode ? '#fff' : '#000'} /><Text color={isDarkMode ? '#fff' : '#000'}> OLED   </Text>
-            <Octicons name="people" size={24} color={isDarkMode ? '#fff' : '#000'} /><Text color={isDarkMode ? '#fff' : '#000'}> {roomData2.minOccupancy} - {roomData2.maxOccupancy}   </Text>
-            <Feather name="layers" size={24} color={isDarkMode ? '#fff' : '#000'} /><Text fontWeight="$light" color={isDarkMode ? '#fff' : '#000'}> Floor: {roomData2.floorNo === 0 ? 'G' : roomData2.floorNo}</Text>
+            <Octicons name="people" size={24} color={isDarkMode ? '#fff' : '#000'} /><Text color={isDarkMode ? '#fff' : '#000'}> {room?.minOccupancy} - {room?.maxOccupancy}   </Text>
+            <Feather name="layers" size={24} color={isDarkMode ? '#fff' : '#000'} /><Text fontWeight="$light" color={isDarkMode ? '#fff' : '#000'}> Floor: {room?.floorNo === 0 ? 'G' : room?.floorNo}</Text>
           </View>
         </View>
 
@@ -206,7 +218,7 @@ const OfficeDetails = () => {
         <View px="$5">
           <Text fontSize={24} fontWeight="$bold" style={{ color: isDarkMode ? '#fff' : '#000' }}>Description</Text>
           <Text fontSize={16} style={{ color: isDarkMode ? '#fff' : '#000' }}>
-            {roomData2.description}
+            {room?.description}
           </Text>
         </View>
         <Divider my="$2" bg="$grey" w="80%" alignSelf='center' />