Start time must be before end time
} {slot.selected && ( + className="remove-button">X )} ))} diff --git a/frontend/frontend/src/components/Availability/AvaiblityCopy.js b/frontend/frontend/src/components/Availability/AvaiblityCopy.js new file mode 100644 index 0000000..3d1e758 --- /dev/null +++ b/frontend/frontend/src/components/Availability/AvaiblityCopy.js @@ -0,0 +1,211 @@ +import React, { useState, useEffect } from 'react'; +import { useEvent } from '../EventDetails/EventDetailsCopy'; +import { GraphQLClient } from 'graphql-request'; +import { useParams } from 'react-router-dom'; +import { UPSERT_AVAILABILITY, DELETE_AVAILABILITY } from './graphqlQueries'; +import './AvailabilityFormCopy.css'; + +const graphqlClient = new GraphQLClient('http://localhost:8080/v1/graphql', { + headers: { + 'x-hasura-admin-secret': '123', + }, +}); + +const TimeSelect = ({ disabled, onChange, value }) => { + const times = []; + for (let i = 0; i < 24; i++) { + for (let j = 0; j < 60; j += 30) { + const time = `${i.toString().padStart(2, '0')}:${j.toString().padStart(2, '0')}`; + times.push(time); + } + } + + return ( + + ); +}; + +const AvailabilityForm = () => { + const daysOfWeek = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN']; + const {eventName} = useParams(); + const { availability, setAvailability } = useEvent(); + const [isFormValid, setIsFormValid] = useState(true); + + useEffect(() => { + const validateForm = () => { + for (const day in availability) { + const slots = availability[day]; + for (let i = 0; i < slots.length; i++) { + const slot = slots[i]; + if (slot.selected) { + if (slot.startTime >= slot.endTime) { + setIsFormValid(false); + return; + } + for (let j = 0; j < slots.length; j++) { + if (i !== j && slots[j].selected) { + if ( + (slot.startTime < slots[j].endTime && slot.endTime > slots[j].startTime) || + (slots[j].startTime < slot.endTime && slots[j].endTime > slot.startTime) + ) { + setIsFormValid(false); + return; + } + } + } + } + } + } + setIsFormValid(true); + }; + + validateForm(); + }, [availability]); + + const handleDayChange = (day, index) => async (event) => { + const updatedDaySlots = [...availability[day]]; + if (updatedDaySlots[index]) { + updatedDaySlots[index].selected = event.target.checked; + setAvailability({ ...availability, [day]: updatedDaySlots }); + + if (!event.target.checked) { + // Delete the slot if it's being deselected + const slotToDelete = availability[day][index]; + try { + const response = await graphqlClient.request(DELETE_AVAILABILITY, { + day: day, + startTime: slotToDelete.startTime, + eventName: eventName, + }); + if (response.delete_availability.affected_rows > 0) { + console.log('Slot deleted successfully'); + } else { + console.error('Failed to delete slot'); + } + } catch (e) { + console.error('Error occurred while deleting slot', e); + } + updatedDaySlots.splice(index, 1); + setAvailability({ ...availability, [day]: updatedDaySlots }); + } + } + }; + + const handleTimeChange = (day, index, timeType) => (event) => { + const updatedDaySlots = [...availability[day]]; + if (updatedDaySlots[index]) { + updatedDaySlots[index][timeType] = event.target.value; + setAvailability({ ...availability, [day]: updatedDaySlots }); + } + }; + + const handleSubmit = async (event) => { + event.preventDefault(); + + const filteredAvailability = Object.fromEntries( + Object.entries(availability).filter(([day, slots]) => slots.some(slot => slot.selected)) + ); + + try { + let flag = false; + for (const [day, slots] of Object.entries(filteredAvailability)) { + for (const slot of slots) { + if (slot.selected) { + const response = await graphqlClient.request(UPSERT_AVAILABILITY, { + eventName, + day, + startTime: slot.startTime, + endTime: slot.endTime, + }); + if(!(response.insert_availability_one.event_name===eventName)){ + alert(`Availability will not set for Timeline:\n${day} ${slot.startTime}\nas it is already present in Event Name:\n${response.insert_availability_one.event_name}`); + flag = true; + } + } + } + } + if (!flag) { + alert('Availability saved successfully.'); + } else { + alert('Failed to save some slots.'); + } + } catch (error) { + console.error('Failed to save availability:', error); + } + }; + + const addTimeSlot = (day) => { + const updatedDaySlots = [...(availability[day] || [])]; + updatedDaySlots.push({ selected: true, startTime: '00:00', endTime: '00:00' }); + setAvailability({ ...availability, [day]: updatedDaySlots }); + }; + + const deleteTimeSlot = (day, index) => async () => { + const updatedDaySlots = [...availability[day]]; + const slotToDelete = updatedDaySlots[index]; + if (slotToDelete) { + try { + const response = await graphqlClient.request(DELETE_AVAILABILITY, { + day: day, + startTime: slotToDelete.startTime, + eventName: eventName, + }); + if (response.delete_availability.affected_rows > 0) { + console.log('Slot deleted successfully'); + } else { + console.error('Failed to delete slot'); + } + } catch (e) { + console.error('Error occurred while deleting slot', e); + } + updatedDaySlots.splice(index, 1); + setAvailability({ ...availability, [day]: updatedDaySlots }); + } + }; + + return ( + + ); +}; + +export default AvailabilityForm; diff --git a/frontend/frontend/src/components/Availability/AvailabilityForm.css b/frontend/frontend/src/components/Availability/AvailabilityForm.css index 170f4ee..3e53310 100644 --- a/frontend/frontend/src/components/Availability/AvailabilityForm.css +++ b/frontend/frontend/src/components/Availability/AvailabilityForm.css @@ -1,65 +1,118 @@ +/* AvailabilityForm.css */ .availability-form { - display: flex; - flex-direction: column; - align-items: center; - } - - .title { - font-size: 24px; - font-weight: bold; - margin-bottom: 20px; - } - - .form { - width: 100%; - } - - .days-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: 20px; - } - - .day { - display: flex; - flex-direction: column; - align-items: center; - } - - .day-name { - font-size: 18px; - font-weight: bold; - margin-bottom: 10px; - } - - .time-slot { - display: flex; - align-items: center; - margin-bottom: 10px; - } - - .add-slot-button { - margin-top: 10px; - } - - .submit-button { - margin-top: 20px; - } - - - /* AvailabilityForm.css */ + display: flex; + flex-direction: column; + align-items: center; + width: 80%; /* Adjust width to better fit the content */ + margin: 0 auto; /* Center the form */ + padding: 20px; /* Add padding for better spacing */ + background-color: #f9f9f9; /* Light background for contrast */ + border-radius: 20px; /* Rounded corners for better aesthetics */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */ + border-color: #000000; +} + +.title { + font-size: 24px; + font-weight: bold; + margin-bottom: 20px; +} + +.form { + width: 100%; +} .days-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 10px; /* Reduce the gap between grid items */ - } - - .day { - display: flex; - flex-direction: column; - align-items: center; - padding: 5px; /* Reduce the padding */ - } - \ No newline at end of file + display: grid; + grid-template-columns: repeat(2, 1fr); /* Increase columns for more compact layout */ + gap: 10px; +} + +.day { + display: flex; + flex-direction: column; + align-items: center; + background-color: #fff; /* White background for each day */ + padding: 15px; /* Add padding for space */ + border-radius: 5px; /* Slight rounding for better aesthetics */ + box-shadow: 0 2px 4px rgba(7, 6, 6, 0.1); /* Light shadow for depth */ +} + +.day-name { + font-size: 18px; + font-weight: bold; + margin-bottom: 10px; + color: #333; /* Darker text color for better readability */ +} + +.time-slot { + display: flex; + align-items: center; + margin-bottom: 10px; + width: 100%; /* Full width for better alignment */ + justify-content: space-between; /* Space out elements evenly */ +} + +.time-slot select, .time-slot input[type="checkbox"] { + margin-right: 5px; /* Space out elements */ +} + +.time-slot .text-red-500 { + font-size: 12px; /* Smaller font for error message */ + margin-left: 5px; +} + +.add-slot-button { + margin-top: 10px; + padding: 5px 10px; /* Add padding for better click area */ + background-color: #4CAF50; /* Green background */ + color: white; /* White text */ + border: none; + border-radius: 5px; /* Rounded corners */ + cursor: pointer; /* Pointer cursor */ + transition: background-color 0.3s ease; /* Smooth transition */ +} + +.add-slot-button:hover { + background-color: #45a049; /* Darker green on hover */ +} + + +.remove-button button{ + background-color:#e53935; +} + +.submit-button { + margin-top: 20px; + padding: 10px 20px; /* Add padding for better click area */ + background-color: #008CBA; /* Blue background */ + color: white; /* White text */ + border: none; + border-radius: 5px; /* Rounded corners */ + cursor: pointer; /* Pointer cursor */ + transition: background-color 0.3s ease; /* Smooth transition */ +} + +.submit-button:disabled { + background-color: #ccc; /* Grey background when disabled */ + cursor: not-allowed; /* Not allowed cursor when disabled */ +} + +.submit-button:hover:not(:disabled) { + background-color: #007bb5; /* Darker blue on hover */ +} + +.time-slot button { + background-color: #f44336; /* Red background for delete button */ + color: white; /* White text */ + border: none; + border-radius: 5px; /* Rounded corners */ + padding: 5px 10px; /* Add padding for better click area */ + cursor: pointer; /* Pointer cursor */ + transition: background-color 0.3s ease; /* Smooth transition */ +} + +.time-slot button:hover { + background-color: #e53935; /* Darker red on hover */ +} diff --git a/frontend/frontend/src/components/Availability/AvailabilityFormCopy.css b/frontend/frontend/src/components/Availability/AvailabilityFormCopy.css new file mode 100644 index 0000000..8ecf970 --- /dev/null +++ b/frontend/frontend/src/components/Availability/AvailabilityFormCopy.css @@ -0,0 +1,69 @@ +.availability-form { + display: flex; + flex-direction: column; + align-items: center; + width: 80%; /* Adjust width to better fit the content */ + margin: 0 auto; /* Center the form */ + padding: 20px; /* Add padding for better spacing */ + background-color: #f9f9f9; /* Light background for contrast */ + border-radius: 20px; /* Rounded corners for better aesthetics */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */ + border-color: #000000; +} + +.availability-day { + margin-bottom: 20px; /* Added margin between days for spacing */ + display: flex; + flex-direction: column; + align-items: center; + background-color: #fff; /* White background for each day */ + padding: 15px; /* Add padding for space */ + border-radius: 5px; /* Slight rounding for better aesthetics */ + box-shadow: 0 2px 4px; /* Light shadow for depth */ + +} + +.availability-slot { + display: flex; + align-items: center; + margin-bottom: 10px; +} + +.availability-slot input[type="checkbox"] { + margin-right: 10px; /* Added margin to separate checkbox from time inputs */ +} + +.availability-slot button { + margin-left: 10px; /* Added margin to separate delete button from time inputs */ + padding: 5px 10px; /* Adjusted padding for the delete button */ + border: none; + border-radius: 4px; + background-color: #f44336; /* Changed delete button background color */ + color: white; + cursor: pointer; +} + +.availability-slot button:hover { + background-color: #cc0000; /* Darkened delete button color on hover */ +} + +.availability-day h3 { + font-size: 18px; + font-weight: bold; + margin-bottom: 10px; +} + +button[type="submit"] { + margin-top: 20px; + padding: 10px 20px; + border: none; + border-radius: 4px; + background-color: #4CAF50; + color: white; + cursor: pointer; +} + +button[type="submit"]:disabled { + background-color: #cccccc; /* Changed disabled button background color */ + cursor: not-allowed; +} diff --git a/frontend/frontend/src/components/CreateEvent/CreateEvent.js b/frontend/frontend/src/components/CreateEvent/CreateEvent.js index e386483..b799b13 100644 --- a/frontend/frontend/src/components/CreateEvent/CreateEvent.js +++ b/frontend/frontend/src/components/CreateEvent/CreateEvent.js @@ -24,7 +24,7 @@ const CreateEvent = () => { event.preventDefault(); try { - const response = await axios.post('http://localhost:6541/events/create', { + const response = await axios.post('http://localhost:8888/.netlify/functions/api/events/create', { eventName, duration, locationType, @@ -49,7 +49,7 @@ const CreateEvent = () => { const jwt = Cookies.get('jwt'); const data ={}; try { - const verification = await axios.post('http://localhost:6541/verify',data,{ + const verification = await axios.post('http://localhost:8888/.netlify/functions/api/verify',data,{ headers: { Authorization: `${jwt}` } diff --git a/frontend/frontend/src/components/EventDetails/EventDetails.css b/frontend/frontend/src/components/EventDetails/EventDetails.css index dbb00fd..26120b6 100644 --- a/frontend/frontend/src/components/EventDetails/EventDetails.css +++ b/frontend/frontend/src/components/EventDetails/EventDetails.css @@ -11,6 +11,7 @@ box-sizing: border-box; border: 1px solid #ccc; border-radius: 8px; + background-color: #f9f9f9; /* Light background for better contrast */ } .event-edit form { @@ -64,5 +65,5 @@ } .edit-button:hover { - background-color: #45a049; + background-color: #2a47a6; } diff --git a/frontend/frontend/src/components/EventDetails/EventDetailsCopy.js b/frontend/frontend/src/components/EventDetails/EventDetailsCopy.js new file mode 100644 index 0000000..0f55346 --- /dev/null +++ b/frontend/frontend/src/components/EventDetails/EventDetailsCopy.js @@ -0,0 +1,125 @@ +import React, { useState, useEffect, createContext, useContext } from 'react'; +import { useParams } from 'react-router-dom'; +import AvailabilityForm from '../Availability/AvaiblityCopy'; +import { GraphQLClient } from 'graphql-request'; +import { GET_EVENT_AND_AVAILABILITY, UPDATE_EVENT_DETAIL } from './query'; +import './EventDetails.css'; + +// Create a context for sharing event data +const EventContext = createContext(); + +const graphqlClient = new GraphQLClient('http://localhost:8080/v1/graphql', { + headers: { + 'x-hasura-admin-secret': '123', + }, +}); + +export const useEvent = () => useContext(EventContext); + +const EventDetails = () => { + const { eventName } = useParams(); + const [event, setEvent] = useState(null); + const [editEvent, setEditEvent] = useState(null); + const [availability, setAvailability] = useState({}); + const [showEditForm, setShowEditForm] = useState(false); + const [showAvailabilityForm, setShowAvailabilityForm] = useState(false); + + useEffect(() => { + const fetchEventAndAvailability = async () => { + try { + const response = await graphqlClient.request(GET_EVENT_AND_AVAILABILITY, { eventName }); + setEvent(response.event); + setEditEvent(response.event); + const newAvailability = response.availability.reduce((acc, slot) => { + if (!acc[slot.day]) { + acc[slot.day] = []; + } + acc[slot.day].push({ selected: true, startTime: slot.start_time, endTime: slot.end_time }); + return acc; + }, {}); + setAvailability(newAvailability); + } catch (error) { + console.error('Failed to fetch event and availability:', error); + } + }; + + fetchEventAndAvailability(); + }, [eventName]); + + const handleEditChange = (e) => { + setEditEvent({ ...editEvent, [e.target.name]: e.target.value }); + }; + + const handleEditSubmit = async (e) => { + e.preventDefault(); + + try { + const response = await graphqlClient.request(UPDATE_EVENT_DETAIL, { + eventName, + data: { + event_name: editEvent.event_name, + duration: editEvent.duration, + location_type: editEvent.location_type, + location_detail: editEvent.location_detail, + }, + }); + + setEvent(response.update_kalenview_create_events_by_pk); + setShowEditForm(false); + } catch (error) { + console.error('Failed to update event:', error); + } + }; + + if (!event) { + returnDuration: {event.duration} minutes
+Location Type: {event.location_type}
+Description: {event.location_detail}
+{eventName}
{organizerName.first_name +" "+ organizerName.last_name}
diff --git a/frontend/frontend/src/components/login/Login.js b/frontend/frontend/src/components/login/Login.js index cfb4287..1f168e6 100644 --- a/frontend/frontend/src/components/login/Login.js +++ b/frontend/frontend/src/components/login/Login.js @@ -1,9 +1,16 @@ import { useRef,useState,useEffect} from 'react'; import {Link, useNavigate} from "react-router-dom"; -import axios from 'axios'; import Cookies from 'js-cookie'; +import { loginQuery } from './LoginQuery'; import './Login.css'; +import { GraphQLClient } from 'graphql-request'; +const graphqlClient = new GraphQLClient('http://localhost:8080/v1/graphql', { + headers: { + 'x-hasura-admin-secret': '123', + }, +}); + const Login =()=>{ const userRef = useRef(); const errRef= useRef(); @@ -32,9 +39,10 @@ const Login =()=>{ const handleSubmit = async (e) => { e.preventDefault(); try { - const response = await axios.post('http://localhost:6541/login', { email: user, password: pwd }); - if (response.data.message === 'Welcome User') { - Cookies.set('jwt', response.data.token); // Save the JWT to a cookie + const response = await graphqlClient.request(loginQuery, { email: user, password: pwd }); + // console.log("This is response: ",response); + if (response.LoginQuery.message === true) { + Cookies.set('jwt', response.LoginQuery.token); // Save the JWT to a cookie setSuccess(true); } else { setErrMsg(response.data.error); diff --git a/frontend/frontend/src/components/login/LoginQuery.js b/frontend/frontend/src/components/login/LoginQuery.js new file mode 100644 index 0000000..5660806 --- /dev/null +++ b/frontend/frontend/src/components/login/LoginQuery.js @@ -0,0 +1,11 @@ +export const loginQuery = ` + query LoginQuiry($email: String!, $password: String!) { + LoginQuery(input: {email: $email, password: $password}) { + first_name + last_name + message + token + uuid + } + } +`; \ No newline at end of file diff --git a/frontend/frontend/src/components/slotbook/slotBook.css b/frontend/frontend/src/components/slotbook/slotBook.css index eb668c0..e5a47de 100644 --- a/frontend/frontend/src/components/slotbook/slotBook.css +++ b/frontend/frontend/src/components/slotbook/slotBook.css @@ -222,3 +222,6 @@ abbr[title] { border-right: none; /* Remove border on the last half */ } +#half-next{ + background-color: #0d73e0; +} \ No newline at end of file diff --git a/frontend/frontend/src/components/slotbook/slotbook.js b/frontend/frontend/src/components/slotbook/slotbook.js index 98ce725..ba5ede7 100644 --- a/frontend/frontend/src/components/slotbook/slotbook.js +++ b/frontend/frontend/src/components/slotbook/slotbook.js @@ -174,9 +174,10 @@ function CalendarPage() {