TAMS Club Calendar Frontend Documentation

Displays an action bar for the home page for switching between views. The component will listen for changes to the route and display the "active" route accordingly.

Shows a floating action button

Displays the app icon and text

Represents a single grid cell in the calendar view. The CalendarDay will render a list of events for the day up to a certain limit, and will render a button that the user can click to see more events.

Displays a single event in the calendar view

Popup that displays when the user clicks on a day in the calendar. This will show a list of all events that are happening on that day.

Displays a simple changelog, with all the data pulled from the data.json file

A card displaying the image and basic info for a club Utilizes the MUI Card component, with the CardActionArea wrapped in a NavLink to the club's page.

Displays the clubs in a table. The clubs prop will be mapped to table rows. For descriptions, the newline character will be replaced with a pipe character.

Displays the information for a club's committee

Displays a controlled checkbox for a form

Shows a checkbox for a single filter

Displays a controlled select to edit. If the select input is in an array of objects, then you must define the parentName, index, and name. This value will be concatenated inside of the component to form the name (ie. [parentName].[index].[name]) All children should be instances of MenuItem components, as the select options

Displays a controlled text field to edit. If required is true, then you must define the errors and errorMessage objects.

Displays an image given a dynamic src. The image will by default be objectFit: cover and try to fit 100% of the width if no width prop is specified.

Displays a controlled date input

Displays a date heading, in the format dddd M/D/YYYY.

Displays a controlled date time input

Shows a delete button on the right side of the resource edit page

Displays the menu for desktop (and large width) devices

Displays the list of EditCommittee components. This component also supports adding more committees.

Displays a card with all fields to edit a committee

Displays a card with all fields to edit an exec

Displays the list of EditExec components. This component also supports adding more execs.

Displays a card with all fields to edit a committee

Display a login message at the top of edit pages telling the user whether or not they are logged in. Additionally, this will feature a login/logout button.

Wraps history components, giving margins and padding, as well as showing all content on a paper container, with the EditLogin component on top

An event entry on the home page events list

A subsection of the events list, representing all the events happening on a single day. This contains a list of elements with a date header.

Displays the information for an exec of a club using nested Box components.

Feedback form for About page

Displays a specific volunteering filter, with a passed in icon, color, and status. If the status resolves to false, the filter will be hidden with "display: none".

Show a list of filters for the volunteer list, each of which has an icon and a specific color to denote that filter. The specific filter will only be shown if it is true.

Simple flex div wrapper for form elements that displays horizontally on larger screens and vertically on smaller screens. Use the Spacer component to add spacing (it will also adapt to be vertical spacing on smaller screens).

Wrapper for the edit forms. Contains support for sx styling and a default responsive padding.

Displays the GitHub icon.

The popup that shows the edits of a single edit history entry for a resource. This component is wrapped in a Dialog component.

Base for all home pages, contains an action bar and a drawer with external links that both can be hidden manually.

Shows a list of external links on the home page This component is only a list of links as it will be placed in two different drawers depending on if the page is in mobile or not.

Component to handle image uploading. By default, this component will show a preview of the image that is currently being used, as well as a button to upload a new image. When an image is uploaded, a popup will appear asking the user to crop the image. Once the user crops the image, the preview image will be updated and the values will be stored in the form controller, to be uploaded to the server when the form is submitted.

Displays an input for a single link

Displays the list of link inputs, as well as allows for more to be added.

Loading screen for all data, as well as an error message display if the error field is defined.

Select a location from the list of predefined rooms using a ControlledSelect component, with an option to select "none" by default or "other" at the bottom of the list

Wrapper for the Google Material Symbols. See https://developers.google.com/fonts/docs/material_symbols for more info.

Displays the Appbar at the top of the screen which serves as a navigation menu and theme switcher.

Displays a colored bar on top of the menu, for a color accent!

Icon wrapper for the menu that displays a custom tooltip and highlighted styles when hovered over.

A link in the navbar that is styled to highlight when hovered over and displays a different style when active. This component will also automatically set the "active" state of the link based on the current path.

Displays the menu for mobile (and small width) devices

Wraps all pages with a simple styling and scroll to top, as well as modify the Head meta tags.

Formats a paragraph of text. This will split the text into its respective paragraphs, adding a slight space between each body section. Additionally, all links starting with http or https will be linked correctly as a link element.

Displays a popup whenever event is updated. For this to happen, props.event.time must be set to the current time.

Creates a grid of reservations for a specific day. This grid is essentially a table with the hours as the columns and each different possible reservation location as the rows.

Displays a reservation in the grid. This will be a certain width and be offset from the left side based on the starting hour and duration.

Creates a grid of reservations for a specific day. This grid is essentially a table with the hours as the columns and each different possible reservation location as the rows.

Creates meta tags for pages that display a single resource object

Robot blocking meta tag that tells search engines to not display this page in search results. Used for the admin, auth, and any other pages that search engines should not see. This is also useful for hiding errored pages from search engines!

Simple component to display a select menu and icon button to select the sorting method and order based on a supplied string array.

Provides horizontal spacing on large screen sizes and vertical spacing on small screen sizes.

Meta tags for pages that only have a title and url, for all pages that are not resource displays: [resource lists and utility pages]

Displays a trash can icon that can be clicked on.

Shows the cancel and success action buttons

Displays a backdrop above all content to make said content uninteractable. This is used when the user is uploading some set of edits.

Shows a button that will switch between a list view and grid view icon. This component will set the tableView prop to true if it is currently in the table view, or else it will set the state to false. The displayed icon will be opposite and have the tooltip "Switch to [list/grid] view".

A card displaying the image and basic info for a club

Displays the volunteering opportunities in a table

Converts the access level enum to a string

Calculates how long ago an edit was made, given the edit date, and displays it in the most reasonable time interval

Creates a Club object

Creates a ClubImageBlobs object

Creates a Committee object

Creates a connection error popup

Creates an Event object

Creates an Exec object

Creates an ExternalLink object

Creates a Filters object

Creates a PopupEvent object

Creates a Volunteering object

Sets a style depending on whether or not the theme is light/dark

Sets a grey (400/600) depending on whether or not the theme is light/dark

Deletes a resource given its resource name and id

Deletes a given club by ID

Deletes a given event by ID

Deletes a repeating event by the repeatingId

Deletes a given volunteering opportunity by ID

Converts the event type to a capitalized string

Formats a UTC millisecond date while converting to central timezone

Formats the full date of the event. Includes an end date if not the same as the start date.

Formats the time of the event. Includes an end time if not the same as the start time.

Formats a UTC millisecond time while converting to central timezone

Gets the access level of the user

Gets a list of resources based on search terms

#################### URL APIS ####################

Gets a specific club by ID.

Gets the list of all clubs.

Gets a cookie; returns the value or null

Gets a specific event by ID.

Gets the list of public events.

Returns a list of public events between two dates

Gets a list of external links

Gets the list of all feedback

Gets the list of edit histories for a specific resource with the given ID.

Gets the list of history objects starting from the start ID. If no ID is defined, this will return the last 50 edits.

Returns the current time in UTC milliseconds

Looks for reservations that overlap a specified time range

Gets a query parameter given the key

Gets the list of all reservations in a week If week is not defined, will get the current week's reservations by default

Gets the list of all reservations for a specific room in a specific month

Extracts the user login token from the cookies

Gets the name of the user with the provided ID. This will only be used on the history list page.

Gets the list of all events that the user created

Gets the information of a logged in user, will return a 401 error if the user is not logged in.

Gets a list of users based on search terms

Gets a specific volunteering opportunity by ID.

Gets the list of all volunteering opportunities.

Checks if time is not midnight

Checks if the date is the same between two UTC millisecond times, in the current time zone.

Converts a location to a string

Parses the parameters in the url, with the format being /YYYY/M/D. If one more more is missing, will return the 1st of each value in its place. If there are no values, then it will return today's date.

Will split up multiple day events to be displayed correctly. This will essentially create a new event for each day of the multi-day event.

Takes in text and a classname, parses the links, and creates a Fragment with the links in Link elements. Uses a regular expression to parse links in paragraphs -- must begin with http or https.

Function to break up reservations by day and filter out reservations outside of the defined time range.

Creates a new club.

Creates a new event

Submits a new feedback object.

Performs a token exchange/login request after the Google auth flow returns tokens

Creates a new volunteering opportunity

This function will remove all deleted links and return a string list of the values, with the empty ones removed

Updates a club

Updates an event

Updates an the list of external links

Updates the level of a single user with the provided ID

Updates a volunteering opportunity

Redirect user and reload the page to a specified path

Removes a cookie given its key

Sets a cookie as a <key, value> string pair All values will be cast to a string by universal-cookie!

Returns the dayjs object, corrected to central timezone