From eeccbcd583313f7783432ccb8c65ecac35dd534b Mon Sep 17 00:00:00 2001 From: qianxuege Date: Mon, 20 Jan 2025 14:22:29 -0500 Subject: [PATCH] able to get some calendar events to showup on cmucal, working on styling --- backend/api/app.py | 8 ++-- backend/dump.rdb | Bin 790 -> 790 bytes frontend/src/components/calendar/Calendar.tsx | 45 ++++++++++++++++-- frontend/src/components/calendar/index.css | 31 ++++++++++++ frontend/src/pages/Home.tsx | 4 +- frontend/vite.config.js | 2 +- 6 files changed, 80 insertions(+), 10 deletions(-) diff --git a/backend/api/app.py b/backend/api/app.py index a057efd..55a6015 100644 --- a/backend/api/app.py +++ b/backend/api/app.py @@ -141,9 +141,9 @@ def check_credentials(): return jsonify({"authenticated": False, "message": "No credentials found"}), 401 -@app.route("/get_user_calendar") -def get_user_calendar(): - # print('session in get_user_calendar', session); +@app.route("/get_gcal_events", methods=["GET"]) +def get_gcal_events(): + # print('session in get_gcal_events', session); if "credentials" not in session: return jsonify({"error": "User not authenticated"}), 401 @@ -171,7 +171,7 @@ def get_user_calendar(): service.events() .list( calendarId="primary", - timeMin="2024-12-01T00:00:00Z", # Replace with your desired time range + timeMin="2025-01-10T00:00:00Z", # Replace with your desired time range maxResults=10, singleEvents=True, orderBy="startTime", diff --git a/backend/dump.rdb b/backend/dump.rdb index 4e3d0f4de9ef1709b64e3c7d3098ee5691e49694..e5453654456e2b64765cfb4956cf6559c395d043 100644 GIT binary patch delta 453 zcmV~$xo*>7007_=iK=2kf)0qmY)qDXU_0(qAF<=3u8;gax;QjV9-l{ttVkZM&$sFEtbs|4 z7D@5=^6v6n_)Gl$`u$`wnXv0Tgu5k7Ak4~-7x+ru6U#7h<22{zwKfQ}(9}wbd8is{ zgVu|{lax|t-RSNI^@-t0fE$R1Zx^Ur#pYNmyK4$Bqix|TWYKeAmYO7wFiwljF}}8Z z$@fA(&oEkX^`uUFVYKxmB0;Pht zg=MHJ7+fIY!j`4VZgUus!XEY*X8VyT6IIZG4W3R1G?qI6-B3saMB}``;cUf`thwwH zSD9*Py)|O;G$)9V3|`UtxIm-y{^!YgLWTM=xL#h{D+%Cv(6tItkTTWsj0h zcr)X@GM=|m)FCUcw}nGqt$Fi<$zoi!%jnLTZK_2{r##`l7WHx6IG7`^S5(fYywo?= R{o7~%&YmuA%cn1Yod2bPn#%wH delta 453 zcmV~$y^qpR003~##LLB1Z!iuuak!}o^n(u<@3o~sUq7G}+Om+sd;I`j3p@&K6XWXO z;N{H4)x|~sh|9(Q$i*=E`#oGfTz-9h(>%Y}W0X*KksRpb?fLogkP!Uz?!(9Ee3es- zSc1vZ_U`sthQE>e?V?tzb;3*~O|ta8=yuv=T^i~kmvILzb;I7Sl!bL>#Zqgx zaA&8WYEDS1iNf7?@skkGa!+LDkN{v#4cyP85x+z*%Wb|<6tkEgLmL!K;qPpomW}S5 zz=e$F$qJ?o-6KnW3o~3+%yFh7yA(P5gq-@$jE_^S_zJgHh_PY&R+HIDlIS`t(w)+s z6@r#>RbWk8+IEG2x~Q5t6Lk@*Qp|B1BdW&0qXS{<4FwaV@g$HVpMhYq90PkWR!9Aw z#~DdpOxd - +
+ {/* ${eventContent.event.allDay ? 'bg-green': 'bg-green'} */}

{eventContent.timeText} {eventContent.event.title}

) @@ -29,16 +32,18 @@ function renderEventContent(eventContent: EventContentArg) { interface CalendarProps { showSearchBar: boolean; events: any[]; + setEvents: React.Dispatch>; calendarRef: RefObject; handleRemoveFCEvent: RemoveFCEventType; } -export default function Calendar({showSearchBar, events, calendarRef, handleRemoveFCEvent}:CalendarProps) { +export default function Calendar({showSearchBar, events, setEvents, calendarRef, handleRemoveFCEvent}:CalendarProps) { const [weekendsVisible, setWeekendsVisible] = useState(true); const [currentEvents, setCurrentEvents] = useState(); const [currView, setCurrView] = useState('dayGridMonth'); const [showGCal, setShowGCal] = useState(false); + // const [gCalEvents, setGCalEvents] = useState([]); // console.log(events); @@ -56,6 +61,38 @@ export default function Calendar({showSearchBar, events, calendarRef, handleRemo } }; + const toggleGCalEvents = async () => { + if (!showGCal) { + try { + const response = await fetch("http://localhost:8000/get_gcal_events", { + credentials: "include", + }); + + if (response.status === 401) { + window.location.href = "http://localhost:8000/login"; // Redirect to login + } else { + const gCalEvents = await response.json(); + const formattedGCalEvents = gCalEvents.map((event: any) => ({ + title: event.summary, + start: event.start.dateTime || event.start.date, + end: event.end.dateTime || event.end.date, + classNames: ["gcal-event"], // Add a custom class for styling + })); + setEvents((prev) => [...prev, ...formattedGCalEvents]); + } + } catch (error) { + console.error("Error fetching events:", error); + } + } else { + // Remove GCal events by filtering out those with the "gcal-event" class + setEvents((prev) => prev.filter((event) => !event.classNames?.includes("gcal-event"))); + } + + setShowGCal((prev) => !prev); + }; + + + useEffect(() => { updateButtonStyles(); }, [showGCal]); @@ -142,7 +179,7 @@ export default function Calendar({showSearchBar, events, calendarRef, handleRemo }, GCalBtn: { text: `${showGCal? 'Hide GCal events': 'Show GCal events'}`, - click: () => {setShowGCal((prev)=> !prev)} + click: toggleGCalEvents, } }} diff --git a/frontend/src/components/calendar/index.css b/frontend/src/components/calendar/index.css index 27bf2ab..a7e31f6 100644 --- a/frontend/src/components/calendar/index.css +++ b/frontend/src/components/calendar/index.css @@ -5,6 +5,37 @@ margin: 0 auto; } +/* event blocks */ +.fc-event.gcal-event { + border: 2px solid #182C4B !important; + /* background-color: white !important; */ + /* color: #182C4B !important; */ +} + +.fc-event.cmu-cal-event { + border: 3px solid #719F94 !important; + /* background-color: white !important; */ + color: white !important; +} + + + +.fc-event.gcal-event.fc-daygrid-event { /* full-day events, where allDay:true in events */ + background-color: #182C4B !important; +} + +.fc-event.gcal-event.fc-timegrid-event { /* hour-specific events */ + border: 2px solid #182C4B !important; +} + +.fc-dayGridMonth { + +} + +.fc-timeGridWeek { + +} + /* .fc-GCalBtn-button { background-color: #007bff; color: white; diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 3ee8c1f..a8dfc83 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -21,7 +21,7 @@ const Home: React.FC = () => { useEffect(() => { axios - .get("http://localhost:8000/get_user_calendar", { withCredentials: true }) + .get("http://localhost:8000/get_gcal_events", { withCredentials: true }) .then((response) => { console.log("User authenticated:", response.data); }) @@ -82,6 +82,7 @@ const Home: React.FC = () => { start: start, end: end, allDay: allDay, + classNames: ["cmu-cal-event"], searchCardId: searchCardId, }, ]; @@ -140,6 +141,7 @@ const Home: React.FC = () => { diff --git a/frontend/vite.config.js b/frontend/vite.config.js index 6ec9814..7dacc93 100644 --- a/frontend/vite.config.js +++ b/frontend/vite.config.js @@ -32,7 +32,7 @@ export default defineConfig({ "**/*.types.ts", "src/routes/", "src/handlers/", - "src/components/page", + "src/components/page" ], }, global: true,