Skip to content
This repository has been archived by the owner on Dec 9, 2024. It is now read-only.

Commit

Permalink
Adapting popup to support coruse & event modes
Browse files Browse the repository at this point in the history
  • Loading branch information
jasonmzx committed Nov 6, 2023
1 parent baac3e5 commit a421c9b
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 31 deletions.
3 changes: 2 additions & 1 deletion frontend/client/src/components/calendar/NewCalendar.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import NewCalendarPopUp from "./NewCalendarPopUp";
const NewCalendar = ({
calendarView,
viewState,
courseMode,
EARLIEST_TIME,
LATEST_TIME,
THIRTY_FRAC_DENOM,
Expand Down Expand Up @@ -130,7 +131,7 @@ const NewCalendar = ({
const PopUpCallback = (eventBlob) => {
setPopUp(
<NewCalendarPopUp onClose={() => setPopUp(null)}
event={eventBlob} />
event={eventBlob} courseMode={courseMode} />
);
};

Expand Down
49 changes: 36 additions & 13 deletions frontend/client/src/components/calendar/NewCalendarPopUp.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,41 @@ import React from 'react'

import PopUpWrapper from '../util/PopUpWrapper'

const NewCalendarPopUp = ({onClose, event}) => {
const NewCalendarPopUp = ({onClose, event, courseMode}) => {

//* courseCode: True is Courses, False is Events

const eventDesc = event["description"];

const DescriptionRenderer = (courseMode) => {

if(courseMode){
return(
<>

<p className="font-semibold">Seats Filled:</p>
<p>{event["seats_filled"]}</p>

<p className="font-semibold">Campus:</p>
<p>{eventDesc["campus"]}</p>

<p className="font-semibold">Delivery:</p>
<p>{eventDesc["delivery"]}</p>

<p className="font-semibold">CRN:</p>
<p>{eventDesc["crn"]}</p>

<p className="font-semibold">Section:</p>
<p>{eventDesc["section"]}</p>
</>
);
} else {
return(<>
<p className="font-semibold">Event Description:</p>
<p>{eventDesc}</p>
</>)
}
}

//!BAD DESIGN ? : OnClose is Prop Drilled
return (
Expand All @@ -27,20 +58,12 @@ const eventDesc = event["description"];
<p className="font-semibold">Time End:</p>
<p>{event["time_end"]}</p>

<p className="font-semibold">Seats Filled:</p>
<p>{event["seats_filled"]}</p>

<p className="font-semibold">Campus:</p>
<p>{eventDesc["campus"]}</p>

<p className="font-semibold">Delivery:</p>
<p>{eventDesc["delivery"]}</p>
<p className="font-semibold">Location</p>
<p>{event["location"]}</p>

<p className="font-semibold">CRN:</p>
<p>{eventDesc["crn"]}</p>
{/* COURSE DESCRIPTION BREAKDOWN: */}

<p className="font-semibold">Section:</p>
<p>{eventDesc["section"]}</p>
{DescriptionRenderer(courseMode)}
</div>
</div>
</PopUpWrapper>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,13 @@ import { useSelector, useDispatch } from 'react-redux';
import { leftScroll, rightScroll, setParameter } from '../../redux/features/newCalendarSlice.js';

const ConferenceCalendarWrapper = () => {

//* ========== ========== ========== ========== ==========
//* >> Constants for Wrapper
//* ========== ========== ========== ========== ==========

const COURSE_MODE = false; //Events mode

//* ========== ========== ========== ========== ==========
//* >> REDUX DEFINITIONS & DISPATCHERS
//* ========== ========== ========== ========== ==========
Expand All @@ -31,8 +38,6 @@ const ConferenceCalendarWrapper = () => {

}



//Function Accepts a boolean Paramter, and size of scroll (N. Elements forward or back)
const reduxScroll = (s, size) => {
if(s) { dispatch(rightScroll({scroll_size : size})); }
Expand All @@ -51,7 +56,7 @@ const ConferenceCalendarWrapper = () => {

// Handle the response data here
console.log(response);
let parsedCal = cParse2(response, false); //*Calendar Parse, on Event Mode
let parsedCal = cParse2(response, COURSE_MODE); //*Calendar Parse, on Event Mode

console.log("Before Serialization: ");
console.log(parsedCal);
Expand Down Expand Up @@ -208,12 +213,6 @@ const ConferenceCalendarWrapper = () => {
CalendarPlaceholder(stream, handleAPIresponse);
}

//* ========== ========== ========== ========== ==========
//* >> ACTUAL CONTAINER UI FUNCTIONS
//* ========== ========== ========== ========== ==========

//...

//* ========== ========== ========== ========== ==========
//* >> REACT useEffect & return
//* ========== ========== ========== ========== ==========
Expand Down Expand Up @@ -283,6 +282,7 @@ React.useEffect(() => {
<NewCalendar
calendarView={full_view.slice(current_offset, current_offset+7)}
viewState={0}
courseMode={COURSE_MODE}
THIRTY_FRAC_DENOM={3}
EARLIEST_TIME={36}
LATEST_TIME={144}
Expand All @@ -298,12 +298,14 @@ React.useEffect(() => {


<div className="flex space-x-4 justify-center">
<button className="widget_btn" onClick={() => {reduxScroll(false, 1)}}>Left {"<--"}</button>
<button className="widget_btn" onClick={() => {reduxScroll(true, 1)}}>Right {"-->"}</button>
</div>
<button className="widget_btn" onClick={() => {reduxScroll(false, 1)}}>Left {"<--"}</button>
<button className="widget_btn" onClick={() => {reduxScroll(true, 1)}}>Right {"-->"}</button>
</div>

<NewCalendar
calendarView={full_view.slice(current_offset, current_offset+1)}
viewState={2}
courseMode={COURSE_MODE}
THIRTY_FRAC_DENOM={3}
EARLIEST_TIME={36}
LATEST_TIME={144}
Expand All @@ -315,11 +317,8 @@ React.useEffect(() => {

}



return (

<>
//! MAIN RETURN STATEMENT:
return (<>
<div className="flex justify-between">
{conferenceStreamButton("Stream A")}
{conferenceStreamButton("Stream B")}
Expand Down
3 changes: 3 additions & 0 deletions frontend/client/src/util/calendarJSON.js
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,9 @@ export function cParse2(data, courseMode) {
appendedEvent.description
);
}
// else { appendedEvent.description = appendedEvent.description}


e.push(appendedEvent);
}
}
Expand Down

0 comments on commit a421c9b

Please sign in to comment.