Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/mobile/booking integration #188

Merged
merged 9 commits into from
Jul 11, 2024
Merged

Fix/mobile/booking integration #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
019869a
fixed viewmybookings
KamogeloMoeketse Jul 10, 2024
26f55db
formatted date and time to accomodate api returns
KamogeloMoeketse Jul 10, 2024
b986b0c
store room info in storage
KamogeloMoeketse Jul 10, 2024
5f1bcf4
checkin fix
KamogeloMoeketse Jul 10, 2024
0f60209
Merge branch 'develop' into fix/mobile/booking-integration
KamogeloMoeketse Jul 10, 2024
5297534
updated viewrooms
KamogeloMoeketse Jul 10, 2024
62b7074
Added components for times and altered date components
KamogeloMoeketse Jul 11, 2024
6a36032
storage of booking info
KamogeloMoeketse Jul 11, 2024
7d2ce9e
book room done
KamogeloMoeketse Jul 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 21 additions & 5 deletions frontend/occupi-mobile4/screens/Booking/BookRoom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 [];
Expand Down Expand Up @@ -42,13 +43,23 @@ 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");
// 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();
// console.log(data);
if (response.ok) {
setRoomData(data.data || []); // Ensure data is an array
// toast.show({
Expand Down Expand Up @@ -89,7 +100,7 @@ const BookRoom = () => {
}
};
fetchAllRooms();
}, [toast]);
}, [toast, apiUrl, viewroomsendpoint]);

useEffect(() => {
setIsDarkMode(colorScheme === 'dark');
Expand All @@ -101,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 }}>
Expand Down Expand Up @@ -131,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>
Expand Down Expand Up @@ -160,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: 160 }} 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>
Expand Down
76 changes: 56 additions & 20 deletions frontend/occupi-mobile4/screens/Booking/ViewBookingDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import {
Icon,
ScrollView,
Expand All @@ -18,46 +18,80 @@ 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';
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, 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<Room>({});
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);
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 : string = await SecureStore.getItemAsync('CurrentRoom');
// console.log("CurrentRoom:",result);
// setUserDetails(JSON.parse(result).data);
let jsonresult = JSON.parse(result);
console.log(jsonresult);
setRoom(jsonresult);
setCheckedIn(jsonresult.checkedIn);
};
getCurrentRoom();
}, []);

// 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) {
Expand Down Expand Up @@ -94,17 +128,19 @@ const ViewBookingDetails = (bookingId, roomName) => {

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"
Expand All @@ -125,7 +161,7 @@ const ViewBookingDetails = (bookingId, roomName) => {
},
});
setIsLoading(false);
router.push("/home");
router.replace("/home");
} else {
setIsLoading(false);
console.log(data);
Expand Down Expand Up @@ -177,10 +213,10 @@ const ViewBookingDetails = (bookingId, roomName) => {
<View px="$4">
<View flexDirection="$row" alignItems="$center">
<Octicons name="people" size={24} color={isDarkMode ? '#fff' : '#000'} />
<Text color={isDarkMode ? '#fff' : '#000'} fontSize="$20"> Attendees: {room.emails.length}</Text>
<Text color={isDarkMode ? '#fff' : '#000'} fontSize="$20"> Attendees: {room.emails?.length}</Text>

</View>
{room.emails.map((email, idx) => (
{room.emails?.map((email, idx) => (
<Text color={isDarkMode ? '#fff' : '#000'}>{idx + 1}. {email}</Text>
))}
<Text mt="$4" mb="$1" fontSize="$16" fontWeight="$bold" color={colorScheme === 'dark' ? 'white' : 'black'}>Description</Text>
Expand Down
Loading
Loading