From 019869a219ffd62e089f42c67ef40a756cc79492 Mon Sep 17 00:00:00 2001 From: Kamogelo Moeketse Date: Wed, 10 Jul 2024 17:45:32 +0200 Subject: [PATCH 1/8] fixed viewmybookings --- .../screens/Booking/ViewBookings.tsx | 14 +++++++++++--- frontend/occupi-mobile4/screens/Login/SignIn.tsx | 4 ++-- .../occupi-mobile4/screens/Settings/Profile.tsx | 2 +- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx b/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx index 7e28223a..f94f0a7f 100644 --- a/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx +++ b/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx @@ -11,6 +11,7 @@ import RNPickerSelect from 'react-native-picker-select'; import { Octicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons'; import Navbar from '../../components/NavBar'; +import * as SecureStore from 'expo-secure-store'; import { useRouter } from 'expo-router'; const groupDataInPairs = (data) => { @@ -98,16 +99,20 @@ const ViewBookings = () => { // const [email, setEmail] = useState('kamogelomoeketse@gmail.com'); const router = useRouter(); const [refreshing, setRefreshing] = useState(false); + const apiUrl = process.env.EXPO_PUBLIC_LOCAL_API_URL; const onRefresh = React.useCallback(() => { const fetchAllRooms = async () => { console.log("heree"); + let authToken = await SecureStore.getItemAsync('Token'); + console.log("Token:"+authToken); try { - const response = await fetch(`https://dev.occupi.tech/api/view-bookings?email=kamogelomoeketse@gmail.com`, { + const response = await fetch(`${apiUrl}/api/view-bookings?email=kamogelomoeketse@gmail.com`, { method: 'GET', headers: { 'Content-Type': 'application/json', + 'Authorization': `${authToken}` }, }); const data = await response.json(); @@ -186,12 +191,15 @@ const ViewBookings = () => { useEffect(() => { const fetchAllRooms = async () => { - console.log("heree"); + let authToken = await SecureStore.getItemAsync('Token'); + // console.log("Token:"+authToken); + // console.log("heree"); try { - const response = await fetch(`https://dev.occupi.tech/api/view-bookings?email=kamogelomoeketse@gmail.com`, { + const response = await fetch(`${apiUrl}/api/view-bookings?email=kamogelomoeketse@gmail.com`, { method: 'GET', headers: { 'Content-Type': 'application/json', + 'Authorization': `${authToken}` }, }); const data = await response.json(); diff --git a/frontend/occupi-mobile4/screens/Login/SignIn.tsx b/frontend/occupi-mobile4/screens/Login/SignIn.tsx index 2019a625..afbff9ff 100644 --- a/frontend/occupi-mobile4/screens/Login/SignIn.tsx +++ b/frontend/occupi-mobile4/screens/Login/SignIn.tsx @@ -68,10 +68,10 @@ const SignInForm = () => { } = useForm({ resolver: zodResolver(signInSchema), }); - const apiUrl = process.env.EXPO_PUBLIC_DEVELOP_API_URL; + const apiUrl = process.env.EXPO_PUBLIC_LOCAL_API_URL; const loginUrl = process.env.EXPO_PUBLIC_LOGIN; const getUserDetailsUrl= process.env.EXPO_PUBLIC_GET_USER_DETAILS; - console.log(apiUrl,loginUrl); + console.log(apiUrl + "" +loginUrl); const isEmailFocused = useState(false); const [loading, setLoading] = useState(false); const [showPassword, setShowPassword] = useState(false); diff --git a/frontend/occupi-mobile4/screens/Settings/Profile.tsx b/frontend/occupi-mobile4/screens/Settings/Profile.tsx index 30b03cac..a902d670 100644 --- a/frontend/occupi-mobile4/screens/Settings/Profile.tsx +++ b/frontend/occupi-mobile4/screens/Settings/Profile.tsx @@ -57,7 +57,7 @@ const Profile = () => { const [isLoading, setIsLoading] = useState(false); const [isDatePickerVisible, setDatePickerVisibility] = useState(false); let colorScheme = useColorScheme(); - const apiUrl = process.env.EXPO_PUBLIC_DEVELOP_API_URL; + const apiUrl = process.env.EXPO_PUBLIC_LOCAL_API_URL; const getUserDetailsUrl= process.env.EXPO_PUBLIC_GET_USER_DETAILS; const updateDetailsUrl = process.env.EXPO_PUBLIC_UPDATE_USER_DETAILS; console.log(apiUrl, getUserDetailsUrl, updateDetailsUrl); From 26f55dbd6afab50e9856bf6910ec54ce3283a0bc Mon Sep 17 00:00:00 2001 From: Kamogelo Moeketse Date: Wed, 10 Jul 2024 18:49:38 +0200 Subject: [PATCH 2/8] formatted date and time to accomodate api returns --- .../screens/Booking/ViewBookings.tsx | 131 ++++++++++-------- 1 file changed, 73 insertions(+), 58 deletions(-) diff --git a/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx b/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx index f94f0a7f..7cfdada4 100644 --- a/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx +++ b/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx @@ -32,61 +32,77 @@ interface Room { maxOccupancy: number; description: string; emails: string[]; + date: string; + start: string; + end: string; } -const getTimeForSlot = (slot) => { - let startTime, endTime; - switch (slot) { - case 1: - startTime = '07:00'; - endTime = '08:00'; - break; - case 2: - startTime = '08:00'; - endTime = '09:00'; - break; - case 3: - startTime = '09:00'; - endTime = '10:00'; - break; - case 4: - startTime = '10:00'; - endTime = '11:00'; - break; - case 5: - startTime = '11:00'; - endTime = '12:00'; - break; - case 6: - startTime = '12:00'; - endTime = '13:00'; - break; - case 7: - startTime = '13:00'; - endTime = '14:00'; - break; - case 8: - startTime = '14:00'; - endTime = '15:00'; - break; - case 9: - startTime = '15:00'; - endTime = '16:00'; - break; - case 10: - startTime = '16:00'; - endTime = '17:00'; - break; - default: - startTime = 'Invalid slot'; - endTime = 'Invalid slot'; - } - return { startTime, endTime }; -}; +// const getTimeForSlot = (slot) => { +// let startTime, endTime; +// switch (slot) { +// case 1: +// startTime = '07:00'; +// endTime = '08:00'; +// break; +// case 2: +// startTime = '08:00'; +// endTime = '09:00'; +// break; +// case 3: +// startTime = '09:00'; +// endTime = '10:00'; +// break; +// case 4: +// startTime = '10:00'; +// endTime = '11:00'; +// break; +// case 5: +// startTime = '11:00'; +// endTime = '12:00'; +// break; +// case 6: +// startTime = '12:00'; +// endTime = '13:00'; +// break; +// case 7: +// startTime = '13:00'; +// endTime = '14:00'; +// break; +// case 8: +// startTime = '14:00'; +// endTime = '15:00'; +// break; +// case 9: +// startTime = '15:00'; +// endTime = '16:00'; +// break; +// case 10: +// startTime = '16:00'; +// endTime = '17:00'; +// break; +// default: +// startTime = 'Invalid slot'; +// endTime = 'Invalid slot'; +// } +// return { startTime, endTime }; +// }; + + -const slotToTime = (slot: number) => { - const { startTime, endTime } = getTimeForSlot(slot); - return `${startTime} - ${endTime}` +// const slotToTime = (slot: number) => { +// const { startTime, endTime } = getTimeForSlot(slot); +// return `${startTime} - ${endTime}` +// } + +function extractTimeFromDate(dateString: string): string { + const date = new Date(dateString); + date.setHours(date.getHours() - 2); + return date.toTimeString().substring(0, 5); +} + +function extractDateFromDate(dateString: string): string { + const date = new Date(dateString); + return date.toDateString(); } const ViewBookings = () => { @@ -366,10 +382,9 @@ const ViewBookings = () => { - {new Date().toDateString()} - {slotToTime(room.slot)} + {extractDateFromDate(room.date)} + {extractTimeFromDate(room.start)}-{extractTimeFromDate(room.end)} - @@ -416,7 +431,7 @@ const ViewBookings = () => { justifyContent: "space-between" }} > - {room.roomName} + {room.roomName} Attendees: {room.emails.length} @@ -424,8 +439,8 @@ const ViewBookings = () => { Your booking time: - {new Date().toDateString()} - {slotToTime(room.slot)} + {extractDateFromDate(room.date)} + {extractTimeFromDate(room.start)}-{extractTimeFromDate(room.end)} From b986b0c8195184e407c6d40eda2426a72b446cef Mon Sep 17 00:00:00 2001 From: Kamogelo Moeketse Date: Wed, 10 Jul 2024 19:23:59 +0200 Subject: [PATCH 3/8] store room info in storage --- .../screens/Booking/ViewBookingDetails.tsx | 30 ++++++++++++++----- .../screens/Booking/ViewBookings.tsx | 24 ++++++--------- 2 files changed, 31 insertions(+), 23 deletions(-) diff --git a/frontend/occupi-mobile4/screens/Booking/ViewBookingDetails.tsx b/frontend/occupi-mobile4/screens/Booking/ViewBookingDetails.tsx index f918f6b4..499b88a9 100644 --- a/frontend/occupi-mobile4/screens/Booking/ViewBookingDetails.tsx +++ b/frontend/occupi-mobile4/screens/Booking/ViewBookingDetails.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { Icon, ScrollView, @@ -18,6 +18,7 @@ import { MaterialIcons } from '@expo/vector-icons'; import { useColorScheme, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native'; +import * as SecureStore from 'expo-secure-store'; import { widthPercentageToDP as wp } from 'react-native-responsive-screen'; @@ -25,18 +26,31 @@ import PagerView from 'react-native-pager-view'; import { useRouter, useLocalSearchParams } from 'expo-router'; -const ViewBookingDetails = (bookingId, roomName) => { +const ViewBookingDetails = (bookingId:string, roomName:string) => { const colorScheme = useColorScheme(); const isDarkMode = colorScheme === 'dark'; - const roomParams = useLocalSearchParams(); - const roomData = roomParams.roomData; - const room = JSON.parse(roomData); + const [room, setRoom] = useState({}); const router = useRouter(); - const [checkedIn, setCheckedIn] = useState(room.checkedIn); + const [checkedIn, setCheckedIn] = useState(false); const [isLoading, setIsLoading] = useState(false); const toast = useToast(); - console.log("HERE:" + roomData); - console.log(checkedIn); + // console.log("HERE:" + room); + + useEffect(() => { + const getCurrentRoom = async () => { + let result = await SecureStore.getItemAsync('CurrentRoom'); + console.log("CurrentRoom:",result); + // setUserDetails(JSON.parse(result).data); + let jsonresult = JSON.parse(result); + console.log(jsonresult.checkedIn); + setRoom(jsonresult); + setCheckedIn(jsonresult.checkedIn); + }; + getCurrentRoom(); + }, []); + + console.log("Room",room._id); + const checkin = async () => { const body = { diff --git a/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx b/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx index 7cfdada4..80fd2956 100644 --- a/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx +++ b/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx @@ -260,10 +260,16 @@ const ViewBookings = () => { } }; fetchAllRooms(); - }, [toast]); + }, [toast, apiUrl]); const roomPairs = groupDataInPairs(roomData); + const handleRoomClick = async (value : string) => { + await SecureStore.setItemAsync('CurrentRoom', value); + router.push('/viewbookingdetails'); + console.log(value); + } + return ( @@ -350,7 +356,7 @@ const ViewBookings = () => { > {pair.map((room) => ( router.push({ pathname: '/viewbookingdetails', params: { roomData: JSON.stringify(room) } })} + onPress={() => handleRoomClick(JSON.stringify(room))} style={{ flex: 1, borderWidth: 1, @@ -403,7 +409,7 @@ const ViewBookings = () => { > {roomData.map((room) => ( router.push({ pathname: '/viewbookingdetails', params: { roomData: JSON.stringify(room) } })} + onPress={() => handleRoomClick(JSON.stringify(room))} style={{ flex: 1, borderWidth: 1, @@ -456,16 +462,4 @@ const ViewBookings = () => { ); }; -const styles = StyleSheet.create({ - container: { - flex: 1, - }, - scrollView: { - flex: 1, - backgroundColor: 'pink', - alignItems: 'center', - justifyContent: 'center', - }, -}); - export default ViewBookings; From 5f1bcf44955920988f9c7df9b2b80244b517b7a1 Mon Sep 17 00:00:00 2001 From: Kamogelo Moeketse Date: Wed, 10 Jul 2024 21:36:55 +0200 Subject: [PATCH 4/8] checkin fix --- .../screens/Booking/ViewBookingDetails.tsx | 56 +++++++++++++------ .../screens/Booking/ViewBookings.tsx | 22 ++++++-- 2 files changed, 55 insertions(+), 23 deletions(-) diff --git a/frontend/occupi-mobile4/screens/Booking/ViewBookingDetails.tsx b/frontend/occupi-mobile4/screens/Booking/ViewBookingDetails.tsx index 499b88a9..c8894666 100644 --- a/frontend/occupi-mobile4/screens/Booking/ViewBookingDetails.tsx +++ b/frontend/occupi-mobile4/screens/Booking/ViewBookingDetails.tsx @@ -23,55 +23,75 @@ import { widthPercentageToDP as wp } from 'react-native-responsive-screen'; import PagerView from 'react-native-pager-view'; -import { useRouter, useLocalSearchParams } from 'expo-router'; +import { useRouter } from 'expo-router'; +interface Room { + _id: string; + roomName: string; + roomId: string; + roomNo: number; + floorNo: number; + minOccupancy: number; + maxOccupancy: number; + description: string; + emails: string[]; + date: string; + start: string; + end: string; +} const ViewBookingDetails = (bookingId:string, roomName:string) => { const colorScheme = useColorScheme(); const isDarkMode = colorScheme === 'dark'; - const [room, setRoom] = useState({}); + const [room, setRoom] = useState({}); const router = useRouter(); const [checkedIn, setCheckedIn] = useState(false); const [isLoading, setIsLoading] = useState(false); const toast = useToast(); + const apiUrl = process.env.EXPO_PUBLIC_LOCAL_API_URL; + const checkinendpoint = process.env.EXPO_PUBLIC_CHECK_IN; + const cancelbookingendpoint = process.env.EXPO_PUBLIC_CANCEL_BOOKING; + // console.log("HERE:" + room); useEffect(() => { const getCurrentRoom = async () => { - let result = await SecureStore.getItemAsync('CurrentRoom'); - console.log("CurrentRoom:",result); + let result : string = await SecureStore.getItemAsync('CurrentRoom'); + // console.log("CurrentRoom:",result); // setUserDetails(JSON.parse(result).data); let jsonresult = JSON.parse(result); - console.log(jsonresult.checkedIn); + // console.log(jsonresult.checkedIn); setRoom(jsonresult); setCheckedIn(jsonresult.checkedIn); }; getCurrentRoom(); }, []); - console.log("Room",room._id); + // console.log("Room",room._id); const checkin = async () => { const body = { "bookingId": room._id, - "creator": room.creator, - "roomId": room.roomId + "creator": room.creator }; setIsLoading(true); console.log(body); + // console.log(apiUrl+""+checkinendpoint); + let authToken = await SecureStore.getItemAsync('Token'); try { - const response = await fetch('https://dev.occupi.tech/api/check-in', { + const response = await fetch(`${apiUrl}${checkinendpoint}`, { method: 'POST', headers: { Accept: 'application/json', - 'Content-Type': 'application/json' + 'Content-Type': 'application/json', + 'Authorization': `${authToken}` }, body: JSON.stringify(body), credentials: "include" }); const data = await response.json(); - console.log(data); + // console.log(data); // const cookies = response.headers.get('Accept'); // console.log(cookies); if (response.ok) { @@ -108,17 +128,19 @@ const ViewBookingDetails = (bookingId:string, roomName:string) => { const cancelBooking = async () => { const body = { - "_id": room._id, + "bookingId": room._id, "creator": room.creator, }; setIsLoading(true); console.log(body); + let authToken = await SecureStore.getItemAsync('Token'); try { - const response = await fetch('https://dev.occupi.tech/api/cancel-booking', { + const response = await fetch(`${apiUrl}${cancelbookingendpoint}`, { method: 'POST', headers: { Accept: 'application/json', - 'Content-Type': 'application/json' + 'Content-Type': 'application/json', + 'Authorization': `${authToken}` }, body: JSON.stringify(body), credentials: "include" @@ -139,7 +161,7 @@ const ViewBookingDetails = (bookingId:string, roomName:string) => { }, }); setIsLoading(false); - router.push("/home"); + router.replace("/home"); } else { setIsLoading(false); console.log(data); @@ -191,10 +213,10 @@ const ViewBookingDetails = (bookingId:string, roomName:string) => { - Attendees: {room.emails.length} + Attendees: {room.emails?.length} - {room.emails.map((email, idx) => ( + {room.emails?.map((email, idx) => ( {idx + 1}. {email} ))} Description diff --git a/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx b/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx index 80fd2956..550ad359 100644 --- a/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx +++ b/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx @@ -112,10 +112,11 @@ const ViewBookings = () => { const toast = useToast(); const [roomData, setRoomData] = useState([]); // const [selectedSort, setSelectedSort] = useState("newest"); - // const [email, setEmail] = useState('kamogelomoeketse@gmail.com'); + const [email, setEmail] = useState(''); const router = useRouter(); const [refreshing, setRefreshing] = useState(false); const apiUrl = process.env.EXPO_PUBLIC_LOCAL_API_URL; + const viewbookingsendpoint = process.env.EXPO_PUBLIC_VIEW_BOOKINGS; const onRefresh = React.useCallback(() => { @@ -124,7 +125,7 @@ const ViewBookings = () => { let authToken = await SecureStore.getItemAsync('Token'); console.log("Token:"+authToken); try { - const response = await fetch(`${apiUrl}/api/view-bookings?email=kamogelomoeketse@gmail.com`, { + const response = await fetch(`${apiUrl}${viewbookingsendpoint}?email=${email}`, { method: 'GET', headers: { 'Content-Type': 'application/json', @@ -134,7 +135,7 @@ const ViewBookings = () => { const data = await response.json(); if (response.ok) { setRoomData(data.data || []); // Ensure data is an array - console.log(data); + // console.log(data); // toast.show({ // placement: 'top', // render: ({ id }) => { @@ -177,7 +178,7 @@ const ViewBookings = () => { setRefreshing(false); fetchAllRooms(); }, 2000); - }, [toast]); + }, [toast,apiUrl,viewbookingsendpoint,email]); const toggleLayout = () => { setLayout((prevLayout) => (prevLayout === "row" ? "grid" : "row")); @@ -206,6 +207,14 @@ const ViewBookings = () => { // ]; useEffect(() => { + const fetchUserEmail = async () => { + let result = await SecureStore.getItemAsync('UserData'); + // console.log(result); + if (result !== undefined) { + let jsonresult = JSON.parse(result); + setEmail(String(jsonresult?.data?.details?.email)); + } + } const fetchAllRooms = async () => { let authToken = await SecureStore.getItemAsync('Token'); // console.log("Token:"+authToken); @@ -221,7 +230,7 @@ const ViewBookings = () => { const data = await response.json(); if (response.ok) { setRoomData(data.data || []); // Ensure data is an array - console.log(data); + // console.log(data); // toast.show({ // placement: 'top', // render: ({ id }) => { @@ -259,6 +268,7 @@ const ViewBookings = () => { }); } }; + fetchUserEmail(); fetchAllRooms(); }, [toast, apiUrl]); @@ -267,7 +277,7 @@ const ViewBookings = () => { const handleRoomClick = async (value : string) => { await SecureStore.setItemAsync('CurrentRoom', value); router.push('/viewbookingdetails'); - console.log(value); + // console.log(value); } return ( From 5297534ec5120d46352f006e8b2409219561cf97 Mon Sep 17 00:00:00 2001 From: Kamogelo Moeketse Date: Thu, 11 Jul 2024 01:08:32 +0200 Subject: [PATCH 5/8] updated viewrooms --- .../screens/Booking/BookRoom.tsx | 16 ++++++++-- .../screens/Booking/ViewBookings.tsx | 31 +++++++++---------- .../screens/Login/SplashScreen.tsx | 2 +- .../screens/Office/BookingDetails.tsx | 10 ++++-- occupi-backend/pkg/router/router.go | 2 +- 5 files changed, 37 insertions(+), 24 deletions(-) diff --git a/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx b/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx index 4deef071..6ea95e1c 100644 --- a/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx +++ b/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx @@ -11,6 +11,7 @@ import { import Navbar from '../../components/NavBar'; import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen'; +import * as SecureStore from 'expo-secure-store'; const groupDataInPairs = (data) => { if (!data) return []; @@ -42,12 +43,21 @@ const BookRoom = () => { const toggleLayout = () => { setLayout((prevLayout) => (prevLayout === "row" ? "grid" : "row")); }; + const apiUrl = process.env.EXPO_PUBLIC_LOCAL_API_URL; + const viewroomsendpoint = process.env.EXPO_PUBLIC_VIEW_ROOMS; useEffect(() => { const fetchAllRooms = async () => { console.log("heree"); + let authToken = await SecureStore.getItemAsync('Token'); try { - const response = await fetch('https://dev.occupi.tech/api/view-rooms') + const response = await fetch(`${apiUrl}${viewroomsendpoint}?floorNo=0`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `${authToken}` + }, + }); const data = await response.json(); if (response.ok) { setRoomData(data.data || []); // Ensure data is an array @@ -89,7 +99,7 @@ const BookRoom = () => { } }; fetchAllRooms(); - }, [toast]); + }, [toast, apiUrl, viewroomsendpoint]); useEffect(() => { setIsDarkMode(colorScheme === 'dark'); @@ -160,7 +170,7 @@ const BookRoom = () => { ) : ( {roomData.map((room, idx) => ( - router.push({ pathname: '/office-details', params: { roomData: JSON.stringify(room) } })}> + router.push({ pathname: '/office-details', params: { roomData: JSON.stringify(room) } })}> {room.roomName} diff --git a/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx b/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx index 550ad359..5004631d 100644 --- a/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx +++ b/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx @@ -123,7 +123,7 @@ const ViewBookings = () => { const fetchAllRooms = async () => { console.log("heree"); let authToken = await SecureStore.getItemAsync('Token'); - console.log("Token:"+authToken); + console.log("Token:" + authToken); try { const response = await fetch(`${apiUrl}${viewbookingsendpoint}?email=${email}`, { method: 'GET', @@ -178,7 +178,7 @@ const ViewBookings = () => { setRefreshing(false); fetchAllRooms(); }, 2000); - }, [toast,apiUrl,viewbookingsendpoint,email]); + }, [toast, apiUrl, viewbookingsendpoint, email]); const toggleLayout = () => { setLayout((prevLayout) => (prevLayout === "row" ? "grid" : "row")); @@ -207,20 +207,19 @@ const ViewBookings = () => { // ]; useEffect(() => { - const fetchUserEmail = async () => { - let result = await SecureStore.getItemAsync('UserData'); - // console.log(result); - if (result !== undefined) { - let jsonresult = JSON.parse(result); - setEmail(String(jsonresult?.data?.details?.email)); - } - } const fetchAllRooms = async () => { let authToken = await SecureStore.getItemAsync('Token'); + let result = await SecureStore.getItemAsync('UserData'); + // console.log(result); + // if (result !== undefined) { + let jsonresult = JSON.parse(result); + setEmail(jsonresult?.data?.email); + // } // console.log("Token:"+authToken); // console.log("heree"); try { - const response = await fetch(`${apiUrl}/api/view-bookings?email=kamogelomoeketse@gmail.com`, { + // console.log(`${apiUrl}${viewbookingsendpoint}?email=${jsonresult?.data?.email}`); + const response = await fetch(`${apiUrl}${viewbookingsendpoint}?email=${jsonresult?.data?.email}`, { method: 'GET', headers: { 'Content-Type': 'application/json', @@ -228,6 +227,7 @@ const ViewBookings = () => { }, }); const data = await response.json(); + console.log(data); if (response.ok) { setRoomData(data.data || []); // Ensure data is an array // console.log(data); @@ -268,17 +268,16 @@ const ViewBookings = () => { }); } }; - fetchUserEmail(); fetchAllRooms(); - }, [toast, apiUrl]); + }, [toast, apiUrl, email, viewbookingsendpoint]); const roomPairs = groupDataInPairs(roomData); - const handleRoomClick = async (value : string) => { + const handleRoomClick = async (value: string) => { await SecureStore.setItemAsync('CurrentRoom', value); router.push('/viewbookingdetails'); // console.log(value); - } + } return ( @@ -366,7 +365,7 @@ const ViewBookings = () => { > {pair.map((room) => ( handleRoomClick(JSON.stringify(room))} + onPress={() => handleRoomClick(JSON.stringify(room))} style={{ flex: 1, borderWidth: 1, diff --git a/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx b/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx index 1c5dce6c..d7bf7401 100644 --- a/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx +++ b/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx @@ -93,7 +93,7 @@ export default function SplashScreen() { useEffect(() => { const timer = setTimeout(() => { setSelectedIndex(1); // Assuming Onboarding1 is at index 1 - router.replace('/login'); // Navigate to Onboarding1 screen + router.replace('/bookings'); // Navigate to Onboarding1 screen }, 5000); // 8 seconds return () => clearTimeout(timer); // Clean up timer on component unmount diff --git a/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx b/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx index 559ad181..c2983856 100644 --- a/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx +++ b/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx @@ -24,6 +24,7 @@ import { LinearGradient } from "expo-linear-gradient"; import { useRouter, useLocalSearchParams } from 'expo-router'; import { ActivityIndicator } from 'react-native'; import * as LocalAuthentication from "expo-local-authentication"; +import * as SecureStore from 'expo-secure-store'; import GradientButton from '@/components/GradientButton'; const getTimeForSlot = (slot) => { @@ -100,8 +101,9 @@ const BookingDetails = () => { const [attendees, setAttendees] = useState([creatorEmail]); 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; const addAttendee = () => { if (email && !attendees.includes(email)) { @@ -125,13 +127,15 @@ const BookingDetails = () => { "floorNo": parseInt(roomParams.floorNo, 10) }; console.log(body); + let authToken = await SecureStore.getItemAsync('Token'); try { setLoading(true); - const response = await fetch('https://dev.occupi.tech/api/book-room', { + const response = await fetch(`${apiUrl}${bookroomendpoint}`, { method: 'POST', headers: { Accept: 'application/json', - 'Content-Type': 'application/json' + 'Content-Type': 'application/json', + 'Authorization': `${authToken}` }, body: JSON.stringify(body), credentials: "include" diff --git a/occupi-backend/pkg/router/router.go b/occupi-backend/pkg/router/router.go index 7457a2b0..840fa309 100644 --- a/occupi-backend/pkg/router/router.go +++ b/occupi-backend/pkg/router/router.go @@ -48,7 +48,7 @@ func OccupiRouter(router *gin.Engine, db *mongo.Client, cache *bigcache.BigCache api.POST("/check-in", middleware.ProtectedRoute, func(ctx *gin.Context) { handlers.CheckIn(ctx, appsession) }) api.POST("/cancel-booking", middleware.ProtectedRoute, func(ctx *gin.Context) { handlers.CancelBooking(ctx, appsession) }) api.GET(("/view-bookings"), middleware.ProtectedRoute, func(ctx *gin.Context) { handlers.ViewBookings(ctx, appsession) }) - api.GET("/view-rooms", middleware.UnProtectedRoute, func(ctx *gin.Context) { handlers.ViewRooms(ctx, appsession) }) + api.GET("/view-rooms", middleware.ProtectedRoute, func(ctx *gin.Context) { handlers.ViewRooms(ctx, appsession) }) api.GET("/user-details", middleware.ProtectedRoute, func(ctx *gin.Context) { handlers.GetUserDetails(ctx, appsession) }) api.PUT("/update-user", middleware.ProtectedRoute, func(ctx *gin.Context) { handlers.UpdateUserDetails(ctx, appsession) }) // api.GET("/filter-users", middleware.UnProtectedRoute, func(ctx *gin.Context) { handlers.FilterUsers(ctx, appsession) }) From 62b7074b8ef7514f7ef8cb5997cf16658edc1f28 Mon Sep 17 00:00:00 2001 From: Kamogelo Moeketse Date: Thu, 11 Jul 2024 10:57:27 +0200 Subject: [PATCH 6/8] Added components for times and altered date components --- .../screens/Booking/BookRoom.tsx | 3 +- .../screens/Booking/ViewBookings.tsx | 2 +- .../screens/Office/BookingDetails.tsx | 33 +-- .../screens/Office/OfficeDetails.tsx | 264 +++++++++--------- 4 files changed, 143 insertions(+), 159 deletions(-) diff --git a/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx b/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx index 6ea95e1c..1adc3969 100644 --- a/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx +++ b/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx @@ -48,7 +48,7 @@ const BookRoom = () => { useEffect(() => { const fetchAllRooms = async () => { - console.log("heree"); + // console.log("heree"); let authToken = await SecureStore.getItemAsync('Token'); try { const response = await fetch(`${apiUrl}${viewroomsendpoint}?floorNo=0`, { @@ -59,6 +59,7 @@ const BookRoom = () => { }, }); const data = await response.json(); + // console.log(data); if (response.ok) { setRoomData(data.data || []); // Ensure data is an array // toast.show({ diff --git a/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx b/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx index 5004631d..9ee9f727 100644 --- a/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx +++ b/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx @@ -227,7 +227,7 @@ const ViewBookings = () => { }, }); const data = await response.json(); - console.log(data); + // console.log(data); if (response.ok) { setRoomData(data.data || []); // Ensure data is an array // console.log(data); diff --git a/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx b/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx index c2983856..01542447 100644 --- a/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx +++ b/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx @@ -28,7 +28,7 @@ import * as SecureStore from 'expo-secure-store'; import GradientButton from '@/components/GradientButton'; const getTimeForSlot = (slot) => { - console.log(slot); + // console.log(slot); let startTime, endTime; switch (slot) { case 1: @@ -94,12 +94,12 @@ const BookingDetails = () => { const floorNo = roomParams.floorNo; const roomData = JSON.parse(roomParams.roomData); const isDark = colorScheme === "dark"; - console.log(creatorEmail + slot + roomId + floorNo); - console.log(roomData); - console.log("slot: " + slot); - console.log(startTime); + // console.log(creatorEmail + slot + roomId + floorNo); + // console.log(roomData); + // console.log("slot: " + slot); + // console.log(startTime); const [attendees, setAttendees] = useState([creatorEmail]); - console.log(attendees); + // console.log(attendees); const cardBackgroundColor = isDark ? '#2C2C2E' : '#F3F3F3'; const steps = ["Booking details", "Invite attendees", "Receipt"]; const apiUrl = process.env.EXPO_PUBLIC_LOCAL_API_URL; @@ -117,16 +117,17 @@ const BookingDetails = () => { }; const onSubmit = async () => { - const body = { "roomId": roomParams.roomId, - "slot": parseInt(roomParams.slot, 10), "emails": attendees, "roomName": roomData.roomName, "creator": creatorEmail, - "floorNo": parseInt(roomParams.floorNo, 10) + "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" }; - console.log(body); + console.log("hereeeeee"); let authToken = await SecureStore.getItemAsync('Token'); try { setLoading(true); @@ -142,12 +143,6 @@ const BookingDetails = () => { }); const data = await response.json(); console.log(data); - const cookies = response.headers.get('Accept'); - // CookieManager.get('https://dev.occupi.tech') - // .then((cookies) => { - // console.log('CookieManager.get =>', cookies); - // }); - console.log(cookies); if (response.ok) { setCurrentStep(2); setLoading(false); @@ -466,7 +461,7 @@ const BookingDetails = () => { {!loading ? ( onSubmit()} - text="Send invites" + text="Send invites" /> ) : ( { color: isDark ? "#fff" : "#000", }} > */} - + HDMI Room @@ -540,7 +535,7 @@ const BookingDetails = () => { Attendees: - + {attendees.map((email, idx) => ( {idx + 1}. {email} ))} diff --git a/frontend/occupi-mobile4/screens/Office/OfficeDetails.tsx b/frontend/occupi-mobile4/screens/Office/OfficeDetails.tsx index d9b34feb..7ea7de1b 100644 --- a/frontend/occupi-mobile4/screens/Office/OfficeDetails.tsx +++ b/frontend/occupi-mobile4/screens/Office/OfficeDetails.tsx @@ -1,7 +1,6 @@ import React, { useState, useEffect, useRef } from 'react'; import { TouchableOpacity, - Modal, useColorScheme, StyleSheet, Animated, @@ -14,12 +13,10 @@ import { ChevronDownIcon, Feather } from '@expo/vector-icons'; -import AsyncStorage from '@react-native-async-storage/async-storage'; import { useRouter, useLocalSearchParams } from 'expo-router'; -import DateTimePickerModal from 'react-native-modal-datetime-picker'; import { LinearGradient } from 'expo-linear-gradient'; import RNPickerSelect from 'react-native-picker-select'; -import { Icon, ScrollView, View, Text, Image } from '@gluestack-ui/themed'; +import { Icon, ScrollView, View, Text, Image, Divider } from '@gluestack-ui/themed'; import { widthPercentageToDP as wp, heightPercentageToDP as hp, @@ -27,10 +24,8 @@ import { // import Carousel from 'react-native-snap-carousel'; import { useNavigation, NavigationProp } from '@react-navigation/native'; import { Theme } from 'react-native-calendars/src/types'; -import slotsData from './availableSlots.json'; import { PageIndicator } from 'react-native-page-indicator'; - type RootStackParamList = { BookingDetails: undefined; }; @@ -61,10 +56,9 @@ type RootStackParamList = { const pages = ['Page 1', 'Page 2', 'Page 3']; const OfficeDetails = () => { - const [modalVisible, setModalVisible] = useState(false); - // const [date, setDate] = useState(new Date(2000, 6, 7)); - const [isDatePickerVisible, setDatePickerVisibility] = useState(false); - const [slot, setSlot] = useState(1); + const [date, setDate] = useState(''); + const [startTime, setStartTime] = useState(); + const [endTime, setEndTime] = useState(); const [userEmail, setUserEmail] = useState(''); const router = useRouter(); const colorScheme = useColorScheme(); @@ -73,75 +67,29 @@ const OfficeDetails = () => { const roomData = roomParams.roomData; const roomData2 = JSON.parse(roomData); const navigation = useNavigation>(); - const [availableSlots, setAvailableSlots] = useState({}); const scrollX = useRef(new Animated.Value(0)).current; const { width } = useWindowDimensions(); const animatedCurrent = useRef(Animated.divide(scrollX, width)).current; - useEffect(() => { - // Load the available slots from the JSON file - setAvailableSlots(slotsData.slots); - getData(); - }, []); - - // const handleCheckAvailability = () => { - // setModalVisible(true); - // }; - - // const showDatePicker = () => { - // setDatePickerVisibility(true); - // }; - - const hideDatePicker = () => { - setDatePickerVisibility(false); - }; - - const handleConfirm = (selectedDate) => { - // setDate(selectedDate); - // setDate(selectedDate.toLocaleDateString()); - // console.log(date.toLocaleDateString()); - hideDatePicker(); - }; - - // const storeData = async (value) => { - // try { - // await AsyncStorage.setItem('email', value); - // } catch (e) { - // // saving error - // } - // }; - - const getData = async () => { - try { - const value = await AsyncStorage.getItem('email'); - // console.log(value); - setUserEmail(value); - } catch (e) { - // error reading value - console.log(e); + const getUpcomingDates = () => { + const dates = []; + for (let i = 1; i <= 4; i++) { + const date = new Date(); + date.setDate(date.getDate() + i); + dates.push(date.toISOString().split('T')[0]); } + return dates; }; + const upcomingDates = getUpcomingDates(); - // storeData('kamogelomoeketse@gmail.com'); - - // const renderItem = ({ item }: { item: { uri: string } }) => ( - // - // - // - // ); - - const handleSlotClick = () => { - navigation.navigate('/booking-details'); - }; - - console.log(roomData2); - console.log(userEmail); + // console.log(roomData2); + // console.log(userEmail); return ( <> {/* Top Section */} navigation.goBack()} /> - {roomData2.roomName} + {roomData2.roomName} @@ -152,18 +100,7 @@ const OfficeDetails = () => { - - {/* - - slide1 - - - slide2 - - - slide3 - - */} + { - - {roomData2.roomName} + + {roomData2.roomName} Fast OLED @@ -234,27 +171,24 @@ const OfficeDetails = () => { {roomData2.description} + + Date: setSlot(value)} + darkTheme={isDarkMode ? true : false} + onValueChange={(value) => { setDate(value) }} items={[ - { label: '07:00 - 08:00', value: '1' }, - { label: '08:00 - 09:00', value: '2' }, - { label: '09:00 - 10:00', value: '3' }, - { label: '10:00 - 11:00', value: '4' }, - { label: '11:00 - 12:00', value: '5' }, - { label: '12:00 - 13:00', value: '6' }, - { label: '13:00 - 14:00', value: '7' }, - { label: '14:00 - 15:00', value: '8' }, - { label: '15:00 - 16:00', value: '9' }, - { label: '16:00 - 17:00', value: '10' } + { label: upcomingDates[0], value: upcomingDates[0] }, + { label: upcomingDates[1], value: upcomingDates[1] }, + { label: upcomingDates[2], value: upcomingDates[2] }, + { label: upcomingDates[3], value: upcomingDates[3] }, ]} - placeholder={{ label: 'Select a slot', value: null, color: isDarkMode ? '#fff' : '#000' }} + placeholder={{ label: 'Select a date', value: null, color: isDarkMode ? '#fff' : '#000' }} style={{ inputIOS: { fontSize: 16, paddingVertical: 12, - marginVertical: 12, + marginVertical: 4, paddingHorizontal: 16, borderWidth: 1, borderColor: 'lightgrey', @@ -278,58 +212,112 @@ const OfficeDetails = () => { }} /> + + + Start Time: + setStartTime(value)} + items={[ + { label: '07:00', value: '07:00' }, + { label: '08:00', value: '08:00' }, + { label: '09:00', value: '09:00' }, + { label: '10:00', value: '10:00' }, + { label: '11:00', value: '11:00' }, + { label: '12:00', value: '12:00' }, + { label: '13:00', value: '13:00' }, + { label: '14:00', value: '14:00' }, + { label: '15:00', value: '15:00' }, + { label: '16:00', value: '16:00' } + ]} + placeholder={{ label: 'Select a time', value: null, color: isDarkMode ? '#fff' : '#000' }} + style={{ + inputIOS: { + fontSize: 16, + paddingVertical: 12, + marginVertical: 4, + paddingHorizontal: 16, + borderWidth: 1, + borderColor: 'lightgrey', + borderRadius: 10, + color: isDarkMode ? '#fff' : '#000', + paddingRight: 30, // to ensure the text is never behind the icon + }, + inputAndroid: { + fontSize: 16, + paddingVertical: 8, + paddingHorizontal: 16, + borderWidth: 1, + borderColor: 'lightgrey', + borderRadius: 4, + color: isDarkMode ? '#fff' : '#000', + paddingRight: 30, // to ensure the text is never behind the icon + }, + }} + Icon={() => { + return ; + }} + /> + + + End Time: + setEndTime(value)} + items={[ + { label: '08:00', value: '08:00' }, + { label: '09:00', value: '09:00' }, + { label: '10:00', value: '10:00' }, + { label: '11:00', value: '11:00' }, + { label: '12:00', value: '12:00' }, + { label: '13:00', value: '13:00' }, + { label: '14:00', value: '14:00' }, + { label: '15:00', value: '15:00' }, + { label: '16:00', value: '16:00' }, + { label: '17:00', value: '17:00' } + ]} + placeholder={{ label: 'Select a time', value: null, color: isDarkMode ? '#fff' : '#000' }} + style={{ + inputIOS: { + fontSize: 16, + paddingVertical: 12, + marginVertical: 4, + paddingHorizontal: 16, + borderWidth: 1, + borderColor: 'lightgrey', + borderRadius: 10, + color: isDarkMode ? '#fff' : '#000', + paddingRight: 30, // to ensure the text is never behind the icon + }, + inputAndroid: { + fontSize: 16, + paddingVertical: 8, + paddingHorizontal: 16, + borderWidth: 1, + borderColor: 'lightgrey', + borderRadius: 4, + color: isDarkMode ? '#fff' : '#000', + paddingRight: 30, // to ensure the text is never behind the icon + }, + }} + Icon={() => { + return ; + }} + /> + + + {/* Check Availability Button */} - router.push({ pathname: '/booking-details', params: { email: userEmail, slot: slot, roomId: roomData2.roomId, floorNo: roomData2.floorNo, roomData: roomData } })}> + router.replace({ pathname: '/booking-details', params: { email: userEmail, slot: slot, roomId: roomData2.roomId, floorNo: roomData2.floorNo, roomData: roomData } })}> - Check availability - - - {/* Modal for Calendar */} - { - setModalVisible(!modalVisible); - }} - > - - Available slots - {/* */} - - {Object.keys(availableSlots).map(date => ( - availableSlots[date].map((slot, index) => ( - - {date} at {slot} - - )) - ))} - - setModalVisible(!modalVisible)} - > - Close - - - ); @@ -344,8 +332,8 @@ const styles = StyleSheet.create({ alignItems: 'center', }, pageIndicator: { - left: 20, - right: 20, + // left: 20, + // right: 20, // bottom: 50, // position: 'absolute', marginTop: 20, From 6a3603289448a8265443c9966392c0f56fc556a9 Mon Sep 17 00:00:00 2001 From: Kamogelo Moeketse Date: Thu, 11 Jul 2024 12:04:30 +0200 Subject: [PATCH 7/8] storage of booking info --- .../screens/Booking/ViewBookings.tsx | 57 -------------- .../screens/Office/BookingDetails.tsx | 74 +++++-------------- .../screens/Office/OfficeDetails.tsx | 48 ++++++++++-- 3 files changed, 61 insertions(+), 118 deletions(-) diff --git a/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx b/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx index 9ee9f727..fb34d61f 100644 --- a/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx +++ b/frontend/occupi-mobile4/screens/Booking/ViewBookings.tsx @@ -37,63 +37,6 @@ interface Room { end: string; } -// const getTimeForSlot = (slot) => { -// let startTime, endTime; -// switch (slot) { -// case 1: -// startTime = '07:00'; -// endTime = '08:00'; -// break; -// case 2: -// startTime = '08:00'; -// endTime = '09:00'; -// break; -// case 3: -// startTime = '09:00'; -// endTime = '10:00'; -// break; -// case 4: -// startTime = '10:00'; -// endTime = '11:00'; -// break; -// case 5: -// startTime = '11:00'; -// endTime = '12:00'; -// break; -// case 6: -// startTime = '12:00'; -// endTime = '13:00'; -// break; -// case 7: -// startTime = '13:00'; -// endTime = '14:00'; -// break; -// case 8: -// startTime = '14:00'; -// endTime = '15:00'; -// break; -// case 9: -// startTime = '15:00'; -// endTime = '16:00'; -// break; -// case 10: -// startTime = '16:00'; -// endTime = '17:00'; -// break; -// default: -// startTime = 'Invalid slot'; -// endTime = 'Invalid slot'; -// } -// return { startTime, endTime }; -// }; - - - -// const slotToTime = (slot: number) => { -// const { startTime, endTime } = getTimeForSlot(slot); -// return `${startTime} - ${endTime}` -// } - function extractTimeFromDate(dateString: string): string { const date = new Date(dateString); date.setHours(date.getHours() - 2); diff --git a/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx b/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx index 01542447..ee4c1d6c 100644 --- a/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx +++ b/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { Image, TouchableOpacity, @@ -27,72 +27,22 @@ import * as LocalAuthentication from "expo-local-authentication"; import * as SecureStore from 'expo-secure-store'; import GradientButton from '@/components/GradientButton'; -const getTimeForSlot = (slot) => { - // console.log(slot); - let startTime, endTime; - switch (slot) { - case 1: - startTime = '07:00'; - endTime = '08:00'; - break; - case 2: - startTime = '08:00'; - endTime = '09:00'; - break; - case 3: - startTime = '09:00'; - endTime = '10:00'; - break; - case 4: - startTime = '10:00'; - endTime = '11:00'; - break; - case 5: - startTime = '11:00'; - endTime = '12:00'; - break; - case 6: - startTime = '12:00'; - endTime = '13:00'; - break; - case 7: - startTime = '13:00'; - endTime = '14:00'; - break; - case 8: - startTime = '14:00'; - endTime = '15:00'; - break; - case 9: - startTime = '15:00'; - endTime = '16:00'; - break; - case 10: - startTime = '16:00'; - endTime = '17:00'; - break; - default: - startTime = 'Invalid slot'; - endTime = 'Invalid slot'; - } - return { startTime, endTime }; -}; const BookingDetails = () => { const navigation = useNavigation(); const [currentStep, setCurrentStep] = useState(0); const [email, setEmail] = useState(""); const [loading, setLoading] = useState(false); + const [bookingInfo, setBookingInfo] = useState({}); const colorScheme = useColorScheme(); const toast = useToast(); const router = useRouter(); const roomParams = useLocalSearchParams(); - const creatorEmail = roomParams.email; + const [creatorEmail, setCreatorEmail] = useState(''); const slot = roomParams.slot || 0; - const { startTime, endTime } = getTimeForSlot(Number(roomParams.slot)); - const roomId = roomParams.roomId; - const floorNo = roomParams.floorNo; - const roomData = JSON.parse(roomParams.roomData); + const { startTime, endTime } = {4,5}; + const roomId = bookingInfo.roomId; + const floorNo = bookingInfo.floorNo; const isDark = colorScheme === "dark"; // console.log(creatorEmail + slot + roomId + floorNo); // console.log(roomData); @@ -105,6 +55,18 @@ const BookingDetails = () => { 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); + // setUserDetails(JSON.parse(result).data); + let jsonresult = JSON.parse(result); + console.log(jsonresult); + setBookingInfo(jsonresult); + }; + getBookingInfo(); + }, []); + const addAttendee = () => { if (email && !attendees.includes(email)) { setAttendees([...attendees, email]); diff --git a/frontend/occupi-mobile4/screens/Office/OfficeDetails.tsx b/frontend/occupi-mobile4/screens/Office/OfficeDetails.tsx index 7ea7de1b..c816b207 100644 --- a/frontend/occupi-mobile4/screens/Office/OfficeDetails.tsx +++ b/frontend/occupi-mobile4/screens/Office/OfficeDetails.tsx @@ -22,6 +22,7 @@ import { heightPercentageToDP as hp, } from 'react-native-responsive-screen'; // import Carousel from 'react-native-snap-carousel'; +import * as SecureStore from 'expo-secure-store'; import { useNavigation, NavigationProp } from '@react-navigation/native'; import { Theme } from 'react-native-calendars/src/types'; import { PageIndicator } from 'react-native-page-indicator'; @@ -56,10 +57,9 @@ type RootStackParamList = { const pages = ['Page 1', 'Page 2', 'Page 3']; const OfficeDetails = () => { - const [date, setDate] = useState(''); + const [date, setDate] = useState(); const [startTime, setStartTime] = useState(); const [endTime, setEndTime] = useState(); - const [userEmail, setUserEmail] = useState(''); const router = useRouter(); const colorScheme = useColorScheme(); const isDarkMode = colorScheme === 'dark'; @@ -81,6 +81,44 @@ const OfficeDetails = () => { }; const upcomingDates = getUpcomingDates(); + 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); + + // Check if any of the required fields are blank + if (!date || !startTime || !endTime) { + alert('Please fill in all the information.'); + return; // Exit the function to prevent further execution + } + + // Compare startTime and endTime + const start = new Date(`1970-01-01T${startTime}Z`); + const end = new Date(`1970-01-01T${endTime}Z`); + if (end <= start) { + alert('End time cannot be before start time.'); + return; // Exit the function to prevent further execution + } + + let bookingInfo = { + date: date, + startTime: startTime, + endTime: endTime, + roomName: roomData2.roomName, + roomId: roomData2.roomId, + floorNo: roomData2.floorNo + }; + + // console.log(bookingInfo); + await SecureStore.setItemAsync('BookingInfo', JSON.stringify(bookingInfo)); + router.replace('/booking-details'); + } + + // console.log(roomData2); // console.log(userEmail); @@ -171,9 +209,9 @@ const OfficeDetails = () => { {roomData2.description} - + - Date: + Date: { setDate(value) }} @@ -308,7 +346,7 @@ const OfficeDetails = () => { {/* Check Availability Button */} - router.replace({ pathname: '/booking-details', params: { email: userEmail, slot: slot, roomId: roomData2.roomId, floorNo: roomData2.floorNo, roomData: roomData } })}> + handleBookRoom()}> Date: Thu, 11 Jul 2024 15:53:04 +0200 Subject: [PATCH 8/8] book room done --- .../screens/Booking/BookRoom.tsx | 9 ++- .../screens/Booking/ViewBookingDetails.tsx | 2 +- .../screens/Office/BookingDetails.tsx | 63 ++++++++++--------- .../screens/Office/OfficeDetails.tsx | 44 ++++++++----- 4 files changed, 70 insertions(+), 48 deletions(-) diff --git a/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx b/frontend/occupi-mobile4/screens/Booking/BookRoom.tsx index 1adc3969..0a1f8c9c 100644 --- 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 ( <> @@ -142,7 +147,7 @@ const BookRoom = () => { {roomPairs.map((pair, index) => ( {pair.map((room, idx) => ( - router.push({ pathname: '/office-details', params: { roomData: JSON.stringify(room) } })}> + handleRoomSelect(room)}> {room.roomName} @@ -171,7 +176,7 @@ const BookRoom = () => { ) : ( {roomData.map((room, idx) => ( - router.push({ pathname: '/office-details', params: { roomData: JSON.stringify(room) } })}> + handleRoomSelect(room)}> {room.roomName} diff --git a/frontend/occupi-mobile4/screens/Booking/ViewBookingDetails.tsx b/frontend/occupi-mobile4/screens/Booking/ViewBookingDetails.tsx index c8894666..5f990311 100644 --- 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 index ee4c1d6c..3d67a3e1 100644 --- a/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx +++ b/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx @@ -33,22 +33,18 @@ 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"]; @@ -56,15 +52,24 @@ const BookingDetails = () => { 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} { > Fast OLED - {roomData.minOccupancy} - {roomData.maxOccupancy} - Floor: {roomData.floorNo === 0 ? 'G' : roomData.floorNo} + {bookingInfo?.minOccupancy} - {bookingInfo?.maxOccupancy} + Floor: {bookingInfo?.floorNo === "0" ? 'G' : bookingInfo?.floorNo} { > */} - HDMI Room + {bookingInfo?.roomName} Fast OLED - {roomData.minOccupancy} - {roomData.maxOccupancy} - Floor {roomData.floorNo === 0 ? 'G' : roomData.floorNo} + {bookingInfo?.minOccupancy} - {bookingInfo?.maxOccupancy} + Floor {bookingInfo?.floorNo === "0" ? 'G' : bookingInfo?.floorNo} diff --git a/frontend/occupi-mobile4/screens/Office/OfficeDetails.tsx b/frontend/occupi-mobile4/screens/Office/OfficeDetails.tsx index c816b207..d6eca469 100644 --- 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>(); 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,18 +118,20 @@ 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 ( @@ -127,7 +139,7 @@ const OfficeDetails = () => { {/* Top Section */} navigation.goBack()} /> - {roomData2.roomName} + {room?.roomName} @@ -168,12 +180,12 @@ const OfficeDetails = () => { - {roomData2.roomName} + {room?.roomName} Fast OLED - {roomData2.minOccupancy} - {roomData2.maxOccupancy} - Floor: {roomData2.floorNo === 0 ? 'G' : roomData2.floorNo} + {room?.minOccupancy} - {room?.maxOccupancy} + Floor: {room?.floorNo === 0 ? 'G' : room?.floorNo} @@ -206,7 +218,7 @@ const OfficeDetails = () => { Description - {roomData2.description} + {room?.description}