diff --git a/app.json b/app.json index 63d6dc99..ac986edd 100644 --- a/app.json +++ b/app.json @@ -2,7 +2,7 @@ "expo": { "name": "TAMU SHPE", "slug": "TAMU-SHPE", - "version": "1.0.6", + "version": "1.0.7", "owner": "tamu-shpe", "orientation": "portrait", "icon": "./assets/icon.png", @@ -54,7 +54,7 @@ "permissions": [ "android.permission.RECORD_AUDIO" ], - "versionCode": 60, + "versionCode": 65, "userInterfaceStyle": "automatic" }, "ios": { diff --git a/package.json b/package.json index 0d0d86db..90b66354 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "shpe-app", - "version": "1.0.6", + "version": "1.0.7", "scripts": { "start": "npx expo start --dev-client", "test": "jest --coverage=true --verbose --bail --config ./jest.config.ts", diff --git a/shpe-app-web/app/(main)/committees/page.tsx b/shpe-app-web/app/(main)/committees/page.tsx index 689b1629..ac1bba26 100644 --- a/shpe-app-web/app/(main)/committees/page.tsx +++ b/shpe-app-web/app/(main)/committees/page.tsx @@ -6,7 +6,6 @@ import { Committee } from "@/types/committees"; import Header from "@/components/Header"; import CommitteeCard from "./components/CommitteeCard"; - const Committees = () => { const router = useRouter(); const [loading, setLoading] = useState(true); diff --git a/shpe-app-web/app/(main)/events/components/DayModal.tsx b/shpe-app-web/app/(main)/events/components/DayModal.tsx index 4276aaba..f3c549f1 100644 --- a/shpe-app-web/app/(main)/events/components/DayModal.tsx +++ b/shpe-app-web/app/(main)/events/components/DayModal.tsx @@ -7,9 +7,10 @@ interface DayModalProps { events: SHPEEvent[]; isShowing: boolean; hide: () => void; + toggleEventPage: (event?: SHPEEvent) => void; } -export const DayModal: React.FC = ({ day, events, isShowing, hide }) => { +export const DayModal: React.FC = ({ day, events, isShowing, hide, toggleEventPage }) => { const modal = ( <> {/* Filter */} @@ -25,7 +26,7 @@ export const DayModal: React.FC = ({ day, events, isShowing, hide
{events.map((event) => { return ( -
+
toggleEventPage(event)} className="flex bg-red-300 cursor-pointer rounded-lg text-center font-medium p-1">

{event.name}

@@ -42,7 +43,7 @@ export const DayModal: React.FC = ({ day, events, isShowing, hide onClick={hide} className="absolute left-5 bg-[#500000] text-white text-sm font-semibold rounded-md p-2" > - + X

diff --git a/shpe-app-web/app/(main)/events/components/EventCalendar.tsx b/shpe-app-web/app/(main)/events/components/EventCalendar.tsx index e268407c..6b6c2488 100644 --- a/shpe-app-web/app/(main)/events/components/EventCalendar.tsx +++ b/shpe-app-web/app/(main)/events/components/EventCalendar.tsx @@ -6,9 +6,10 @@ import WeekView from './WeekView'; interface EventCalendarProps { events: SHPEEvent[]; + toggleEventPage: (event?: SHPEEvent) => void; } -const EventCalendar: React.FC = ({ events }) => { +const EventCalendar: React.FC = ({ events, toggleEventPage }) => { const [focusDate, setFocusDate] = useState(new Date()); const [isMonthSelected, setIsMonthSelected] = useState(true); @@ -33,11 +34,11 @@ const EventCalendar: React.FC = ({ events }) => {

Filters

-

General

+

WIP

{/* Small Calendar */} -
+
WIP
@@ -89,12 +90,22 @@ const EventCalendar: React.FC = ({ events }) => {
- + {/* Main Calendar */} {isMonthSelected ? ( - + ) : ( - + )} diff --git a/shpe-app-web/app/(main)/events/components/EventModal.tsx b/shpe-app-web/app/(main)/events/components/EventModal.tsx new file mode 100644 index 00000000..9fc2dacf --- /dev/null +++ b/shpe-app-web/app/(main)/events/components/EventModal.tsx @@ -0,0 +1,478 @@ +import { SHPEEvent, EventType, SHPEEventLog } from '@/types/events'; +import { format } from 'date-fns'; +import { Timestamp } from 'firebase/firestore'; +import { useEffect, useState } from 'react'; +import { getEventLogs, getPublicUserData } from '@/api/firebaseUtils'; +import ReactDOM from 'react-dom'; + +interface EventPageProps { + event?: SHPEEvent; + isShowing: boolean; + hide: () => void; +} + +interface FormData { + [key: string]: any; +} + +export const EventModal: React.FC = ({ event, isShowing, hide }) => { + const [loading, setLoading] = useState(false); + const currentDate = new Date(); + + const [eventLogs, setEventLogs] = useState([]); + const [formData, setFormData] = useState({}); + + useEffect(() => { + console.log(event); + if (event) { + const fetchLogs = async () => { + setLoading(true); + const logs = await getEventLogs(event.id!); + setEventLogs(logs); + setLoading(false); + }; + + fetchLogs(); + + setFormData({ + name: event?.name ?? null, + description: event?.description ?? null, + locationName: event?.locationName ?? null, + startDate: event?.startTime + ? format(event?.startTime?.toDate(), 'yyyy-MM-dd') + : format(new Date(), 'yyyy-MM-dd'), + startTime: event?.startTime + ? format(event.startTime.toDate(), 'HH:mm') + : format( + new Date( + currentDate.getFullYear(), + currentDate.getMonth(), + currentDate.getDay(), + currentDate.getHours() + 1, + 0 + ), + 'HH:mm' + ), + endDate: event?.endTime ? format(event?.endTime?.toDate(), 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd'), + endTime: event?.endTime + ? format(event.endTime.toDate(), 'HH:mm') + : format( + new Date( + currentDate.getFullYear(), + currentDate.getMonth(), + currentDate.getDay(), + currentDate.getHours() + 2, + 0 + ), + 'HH:mm' + ), + eventType: event?.eventType ?? 'CUSTOM_EVENT', + committee: event?.committee ?? 'NONE', + signInPoints: event?.signInPoints ?? null, + signOutPoints: event?.signOutPoints, + pointsPerHour: event?.pointsPerHour ?? null, + startTimeBuffer: event?.startTimeBuffer ?? null, + endTimeBuffer: event?.endTimeBuffer ?? null, + notificationSent: event?.notificationSent ?? false, + general: event?.general ?? false, + nationalConventionEligible: event?.nationalConventionEligible ?? false, + }); + } else { + setFormData({ + name: '', + description: '', + locationName: 'ZACH', + startDate: format(currentDate, 'yyyy-MM-dd'), + startTime: format( + new Date( + currentDate.getFullYear(), + currentDate.getMonth(), + currentDate.getDay(), + currentDate.getHours() + 1, + 0 + ), + 'HH:mm' + ), + endDate: format(currentDate, 'yyyy-MM-dd'), + endTime: format( + new Date( + currentDate.getFullYear(), + currentDate.getMonth(), + currentDate.getDay(), + currentDate.getHours() + 2, + 0 + ), + 'HH:mm' + ), + eventType: 'CUSTOM_EVENT', + committee: 'NONE', + signInPoints: 0, + signOutPoints: 0, + pointsPerHour: 0, + startTimeBuffer: 1200000, + endTimeBuffer: 1200000, + notificationSent: false, + general: false, + nationalConventionEligible: false, + }); + } + console.log(formData); + }, [event]); + + const handleChange = (e: React.ChangeEvent) => { + const { name, value, type } = e.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement; + const checked = type === 'checkbox' ? (e.target as HTMLInputElement).checked : false; + + setFormData((prev) => ({ + ...prev, + [name]: + type === 'checkbox' + ? checked + : name === 'startTimeBuffer' || name == 'endTimeBuffer' + ? parseInt(value) * 1000 * 60 + : value, + })); + }; + + function handleSubmit(e: React.FormEvent) { + e.preventDefault(); + + const startCombined = new Date(`${formData.startDate}T${formData.startTime}`); + const endCombined = new Date(`${formData.endDate}T${formData.endTime}`); + + const startTimeFirebase = Timestamp.fromDate(startCombined); + const endTimeFirebase = Timestamp.fromDate(endCombined); + + const submissionData = { + ...formData, + startTime: startTimeFirebase, + endTime: endTimeFirebase, + }; + + delete (submissionData as { startDate?: string }).startDate; + delete (submissionData as { endDate?: string }).endDate; + + console.log(submissionData); + } + + const modal = ( +
+ + + {loading ? ( +
+ + + ) : ( +
+
+ {/* Name */} +
+ + +
+
+ + {/* Event Info */} +
+
+ {/* Date */} + + + {/* Time */} + + + {/* Location */} + + + {/* Type */} + + + {/* Scope */} +
+

Event Scope

+
+ + + + + +
+
+
+ +
+ {/* Points */} +
+

Points

+ + + +
+ + {/* Advanced */} +
+

Advanced Options

+
+
+ +

+ Allow to scan QRCode {formData.startTimeBuffer ? formData.startTimeBuffer / (1000 * 60) : 0} + mins before event starts +

+
+ +
+ +

+ Allow to scan QRCode {formData.endTimeBuffer ? formData.endTimeBuffer / (1000 * 60) : 0} mins + after event starts +

+
+ + + + +
+
+
+
+ +
+ {/* Description */} +