UBC/Alley-HSBC-Frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

minor fixes

Browse Source
This commit is contained in:
Taehee Choi 2022-03-30 04:24:01 -07:00
parent 667886224c
commit 7e97501269
4 changed files with 78 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/contacts/contacts-components/body-components/LowerBody.tsx
View File

@ -25,13 +25,16 @@ const LowerBody: React.FC<Props> = (props) => {
border: 1,
borderRadius: 2,
borderColor: "#af000d",
backgroundColor: "#af000d",
width: "70%",
height: "60%",
alignSelf: "center",
}}
>
<Typography sx={{ color: "white", my: 1 }} variant="h4" textAlign="center">
<Typography
sx={{ color: "white", my: 1 }}
variant="h4"
textAlign="center"
>
Upcoming meetings
</Typography>
{meetings.length === 0 ? (

6
src/components/contacts/contacts-components/body-components/UpperBody.tsx
View File

@ -96,7 +96,7 @@ const UpperBody: React.FC<Props> = ({ contactInfo }) => {
</Button>
) : (
<Button
variant="contained"
variant="outlined"
color="secondary"
startIcon={<RemoveIcon />}
onClick={() =>
@ -133,7 +133,9 @@ const UpperBody: React.FC<Props> = ({ contactInfo }) => {
</IconButton>
</Box>
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography variant="button" sx={{ textAlign: "right" }}>{meetingStatus}</Typography>
<Typography variant="button" sx={{ textAlign: "right" }}>
{meetingStatus}
</Typography>
{detailedMeeting ? (
<Typography variant="h6">{detailedMeeting.topic}</Typography>
) : null}

29
src/components/home/MeetingsPanel.tsx
View File

@ -40,7 +40,11 @@ const MeetingsPanel: React.FC = () => {
return (
<div className="meetings-panel">
<div className="row panel-label">
<Typography className="mylabel" variant="h5" sx={{ color: "white", ml: 1 }}>
<Typography
className="mylabel"
variant="h5"
sx={{ color: "white", ml: 1 }}
>
Meetings in progress
</Typography>
</div>
@ -65,16 +69,25 @@ const MeetingsPanel: React.FC = () => {
const meetingMembersString = () => {
if (meetingMembers.length > 3) {
return "Participants: " +
meetingMembers[0].name + ", " +
meetingMembers[1].name + ", " +
meetingMembers[2].name + ", and " +
(meetingMembers.length - 3).toString() + " more...";
return (
"Participants: " +
meetingMembers[0].name +
", " +
meetingMembers[1].name +
", " +
meetingMembers[2].name +
", and " +
(meetingMembers.length - 3).toString() +
" more..."
);
} else {
return "Participants: " + meetingMembers.map((userLite) => (" " + userLite.name)).toString();
return (
"Participants: " +
meetingMembers.map((userLite) => " " + userLite.name).toString()
);
}
};
console.log(meetingMembersString);
if (currentDatemil >= startDatemil && currentDatemil <= endDatemil) {
const lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
i += 1;

60
src/components/meeting-details/meeting-details-components/Body.tsx
View File

@ -13,7 +13,6 @@ import DetailedMeeting from "../../../api-bodies/DetailedMeeting";
import { useAppSelector } from "../../../redux/hooks";
import { selectUsers } from "../../../redux/slices/usersSlice";
import UserLite from "../../../api-bodies/UserLite";
import { getMeetingDuration } from "../Utils";
enum MeetingStatus {
Live = "Live",
@ -45,21 +44,41 @@ const Body: React.FC<Props> = ({ meeting }) => {
selectUsers(state, meeting.registrantIds)
);
const liveParticipants: UserLite[] = useAppSelector((state) =>
selectUsers(state, props.meeting.liveParticipantIds)
selectUsers(state, meeting.liveParticipantIds)
);
const parseIsoString = (s: string) => {
const month = ["January", "February", "March", "April",
"May", "June", "July", "August",
"September", "October", "November", "December"][parseInt(s.slice(5,7)) - 1];
const month = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
][parseInt(s.slice(5, 7)) - 1];
const day = s.slice(8, 10);
const isoTime: string = s.slice(11, 16);
const hour: number = parseInt(isoTime.slice(0, 2));
const hourMod: string = hour % 12 == 0 ? "12" : (hour % 12).toString();
return month + " " + day + ", " + hourMod + ":" + isoTime.slice(3, 5) + (hour > 11 ? "PM" : "AM");
return (
month +
" " +
day +
", " +
hourMod +
":" +
isoTime.slice(3, 5) +
(hour > 11 ? "PM" : "AM")
);
};
const start = props.meeting.start;
const start = meeting.startTime;
const startDateString = parseIsoString(start);
const listLiveParticipants = () => {
const s: string[] = liveParticipants.map((user) => user.name + ", ");
@ -83,16 +102,29 @@ const Body: React.FC<Props> = ({ meeting }) => {
flexDirection: "column",
width: "70%",
height: "100%",
mt: 10
mt: 10,
}}
>
<Typography sx={{ pl: 5 }} variant="overline">Meeting ID: {meeting.meetingId}</Typography>
<Typography sx={{ pl: 5, color: "#af000d" }} variant="h2">{meeting.topic}</Typography>
<Typography sx={{ pl: 5 }} variant="overline">
Meeting ID: {meeting.meetingId}
</Typography>
<Typography sx={{ pl: 5, color: "#af000d" }} variant="h2">
{meeting.topic}
</Typography>
<Divider sx={{ mb: 3 }} />
<Typography sx={{ pl: 5 }} variant="h4">Start: {startDateString}</Typography>
<Typography sx={{ pl: 5 }} variant="h4">Duration: {meeting.duration.toString() + " minutes"}</Typography>
<Typography sx= {{ my: 1 }} />
<Typography sx={{ pl: 5 }} variant="button">Currently inside: {listLiveParticipants()}</Typography>
<Typography sx={{ pl: 5 }} variant="h4">
Start: {startDateString}
</Typography>
<Typography sx={{ pl: 5 }} variant="h4">
Duration: {meeting.duration.toString() + " minutes"}
</Typography>
<Typography sx={{ my: 1 }} />
<Typography sx={{ pl: 5 }} variant="button">
Currently inside: {listLiveParticipants()}
</Typography>
<Typography sx={{ pl: 5 }} variant="button">
Status: {meetingStatus}
</Typography>
</Box>
<Box
sx={{