= [
{
title: 'Score',
dataIndex: 'score',
- // defaultSortOrder: 'descend',
sorter: (a, b) => a.score - b.score,
},
{
title: 'Submissions',
dataIndex: 'submitHistory',
- // defaultSortOrder: 'descend',
render: (v) => v.length,
sorter: (a, b) => a.submitHistory.length - b.submitHistory.length,
},
@@ -95,7 +74,6 @@ const CompetitionLeaderboardPage = () => {
submissionsEnabled: boolean;
} | null>(null);
const [visible, setVisible] = useState(false);
- const [chart, setChart] = useState
(null);
const chartContainer = useRef(null);
const [scoreHistTitle, setScoreHistTitle] = useState('');
const params = useParams() as { id: string };
@@ -119,7 +97,6 @@ const CompetitionLeaderboardPage = () => {
setData(newData);
});
getMetaData(competitionID).then((res) => {
- // console.log("METADATA", res.data);
setMeta(res.data);
});
};
diff --git a/src/pages/Competitions/CompetitionPortalPage/CountDownTimer.tsx b/src/pages/Competitions/CompetitionPortalPage/CountDownTimer.tsx
new file mode 100644
index 0000000..c75bc2a
--- /dev/null
+++ b/src/pages/Competitions/CompetitionPortalPage/CountDownTimer.tsx
@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from 'react';
+import moment from 'moment';
+
+
+/**
+ * Component that displays the remaining time until
+ * a competition ends at a provided data
+ *
+ * @param {any} endDate represents the terminating date for a competition
+ *
+ * NOTE: this component has a bug where the remaining time is incorrect
+ *
+ */
+const CountdownTimer = ({ endDate }: { endDate: any }) => {
+
+ /**
+ * Calculates the difference between current time
+ * and end time using moment js
+ */
+ const calculateTimeRemaining = () => {
+ const now = moment();
+ const endDateTime = moment(endDate);
+ const duration = moment.duration(endDateTime.diff(now));
+
+ return {
+ days: duration.days(),
+ hours: duration.hours(),
+ minutes: duration.minutes(),
+ seconds: duration.seconds(),
+ };
+ };
+
+ const [timeRemaining, setTimeRemaining] = useState(calculateTimeRemaining());
+
+ /**
+ * Formats the remaining time into a semantic text
+ * like '5 days 4 hours left'
+ */
+ const formatTimeRemaining = () => {
+ const { days, hours, minutes, seconds } = timeRemaining;
+
+ if (days > 0) {
+ return `Closes in ${days} day${days !== 1 ? 's' : ''}${hours > 0 ? ` ${hours} hours` : ''}${minutes > 0 ? ` ${minutes} minutes` : ''
+ }`;
+ } else if (hours > 0) {
+ return `Closes in ${hours} hour${hours !== 1 ? 's' : ''}${minutes > 0 ? ` ${minutes} minutes` : ''}`;
+ } else {
+ return `Closes in ${minutes} minute${minutes !== 1 ? 's' : ''}${seconds > 0 ? ` ${seconds} seconds` : ''}`;
+ }
+ };
+
+ // Update the remaining time on a scheduled interval
+ useEffect(() => {
+ let intervalId: string | number | NodeJS.Timeout | undefined;
+
+ const updateInterval = () => {
+ const { minutes } = timeRemaining;
+
+ if (minutes > 1) {
+ // Use a longer interval when there's more than 1 minute remaining
+ return 60 * 1000; // 1 minute
+ }
+ else {
+ // Switch to a shorter interval when there's 1 minute or less remaining
+ return 1000; // 1 second
+ }
+ };
+
+ const updateTimer = () => {
+ setTimeRemaining(calculateTimeRemaining());
+ };
+ intervalId = setInterval(updateTimer, updateInterval());
+
+ return () => {
+ clearInterval(intervalId);
+ };
+
+ }, [endDate]);
+
+
+ return (
+ {formatTimeRemaining()}
+ );
+};
+
+export default CountdownTimer;
diff --git a/src/pages/Competitions/CompetitionPortalPage/LineChart.tsx b/src/pages/Competitions/CompetitionPortalPage/LineChart.tsx
new file mode 100644
index 0000000..9de8c3f
--- /dev/null
+++ b/src/pages/Competitions/CompetitionPortalPage/LineChart.tsx
@@ -0,0 +1,167 @@
+import React, { useEffect, useRef, useState } from 'react';
+import ChartJS from 'chart.js';
+import { Empty, Statistic } from 'antd';
+import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
+
+/** Configuration for chart graph that removes legend,
+ * horizontal lines and ticks. Customizes line and dot color
+ *
+ */
+const chartConfig = {
+ type: 'line',
+ data: {
+ labels: [0],
+ datasets: [
+ {
+ data: [0],
+ pointBackgroundColor: 'rgb(18, 113, 255)',
+ backgroundColor: (ctx: any) => {
+ const canvas = ctx.chart.ctx;
+ const containerHeight = canvas.canvas.clientHeight;
+
+ const gradient = canvas.createLinearGradient(0, -160, 0, containerHeight);
+
+ // Adds a gradient under the curve
+ gradient.addColorStop(0, 'rgb(18, 113, 255)');
+ gradient.addColorStop(1, 'rgba(255, 255, 255, 0.6)');
+
+ return gradient;
+ },
+ borderColor: 'rgb(18, 113, 255)',
+ },
+ ],
+ },
+ options: {
+ responsive: true,
+ title: {
+ display: false,
+ },
+ legend: {
+ display: false
+ },
+ elements: {
+ rectangle: {
+ backgroundColor: '', // '' means no color
+ },
+ },
+ scales: {
+ yAxes: [{
+ ticks: {
+ display: true,
+ fontColor: "grey"
+ },
+ gridLines: {
+ display: false
+ },
+
+ angleLines: {
+ display: false
+ }
+ }],
+ xAxes: [{
+ ticks: {
+ display: true,
+ length: 0,
+ fontColor: "grey"
+ },
+
+ angleLines: {
+ display: false
+ }
+ }],
+ },
+ },
+};
+
+
+/**
+ * Used as an interactive line chart to view a competition team's
+ * submission score history from the competition portal dashboard.
+ * Utilizes a chart.js graph to plot data.
+ *
+ * @param {Array} scoreHistory the team's score history
+ *
+ */
+const LineChart = ({ scoreHistory }: {scoreHistory: Array}) => {
+
+ // initialize the chart
+ const chartContainer = useRef(null);
+ const [chart, setChart] = useState(null);
+ const [chartTrigger, setTrigger] = useState(false);
+
+ // Metric used to show relative change from previous submission score
+ const [scoreHistoryPercentage, setScoreHistoryPercentage] = useState(0);
+
+ console.log(scoreHistory)
+
+ useEffect(() => {
+ if(scoreHistory.length != 0) {
+
+ // Find relative growth of scores
+ let lastTwo = scoreHistory.slice(-2);
+
+ const diff = lastTwo[1] - lastTwo[0];
+ const percent = diff / lastTwo[0];
+ setScoreHistoryPercentage(percent);
+ }
+
+ if (chartContainer.current && scoreHistory.length !== 0) {
+ const myChartRef = chartContainer.current.getContext('2d');
+
+ if (!chart) {
+ // Create the chart instance only once during the component mount
+ const newChart = new ChartJS(myChartRef!, chartConfig);
+ setChart(newChart);
+ }
+
+ // Update chart data and labels
+ chartConfig.data.labels = Array.from({ length: scoreHistory.length }, (_, i) => i + 1);
+ chartConfig.data.datasets[0].data = scoreHistory;
+
+ // Update the chart
+ chart?.update();
+ }
+ }, [chartTrigger]);
+
+
+
+ // Use a second hook to address bug where chartContainer ref does not update in time nor triggers callback
+ useEffect(() => {
+ setTrigger(true);
+
+ }, [scoreHistory]);
+
+ return (
+ <>
+ {scoreHistory.length == 0 ?
+ // No data available
+
+ {scoreHistoryPercentage ?
+
:
}
+ suffix="%"
+ />
+ :
+ <>
+ }
+ {/* DO NOT remove the max height. ChartJS has a bug where changing the scorehistory
+ causes the line graph to grow down infinitely. This can happen whenever the user leaves and
+ joins another team. */}
+
+
+
+
+ )
+
+}
+
+
+
+export default MatchesPage;
\ No newline at end of file
diff --git a/src/pages/Competitions/CompetitionPortalPage/SubmissionEntryCard/index.less b/src/pages/Competitions/CompetitionPortalPage/SubmissionEntryCard/index.less
new file mode 100644
index 0000000..f20442b
--- /dev/null
+++ b/src/pages/Competitions/CompetitionPortalPage/SubmissionEntryCard/index.less
@@ -0,0 +1,125 @@
+@import '../../../../newStyles/text.less';
+@import '../../../../newStyles/components.less';
+@import '../../../../newStyles/index.less';
+
+.submissionPreviewCard {
+ background: white;
+ width: 100%;
+ border-radius: @radius-base4;
+ padding: @padding-base2;
+
+ span.submissionCardHeader {
+ display: inline-flex;
+ justify-content: space-between;
+ width: 100%;
+
+ }
+
+ h3.submissionUserName {
+ font-weight: @semi-bold;
+ }
+
+ p.submissionDescription {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ color: @text-gray2;
+ }
+
+ span.submissionFileRow {
+ display: inline-flex;
+ align-items: center;
+ }
+}
+
+
+section.submissionDetailsSection {
+ margin-top: 2rem;
+
+ div.submissionDetailsRow {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 400px;
+ margin-bottom: 12px;
+
+ span {
+ display: inline-flex;
+ align-items: center;
+
+ }
+
+ span > div {
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: @gray;
+ border-radius: @radius-base5;
+ width: 32px;
+ height: 32px;
+ margin-right: 1rem;
+
+ .submissionDetailsIcon {
+ color: @text-gray2;
+ }
+
+ p {
+ color: @text-gray2;
+ }
+
+ }
+
+ span .teamMemberImage {
+ height: 2rem !important;
+ width: 2rem !important;
+ }
+
+ }
+}
+
+section.submissionDescriptionSection, section.submissionErrorLogsSection {
+ margin-top: 2.5rem;
+ h4 {
+ font-weight: @semi-bold;
+ }
+
+ p {
+ margin-top: 1rem;
+ color: @text-gray2;
+ }
+}
+
+
+section.submissionErrorLogsSection {
+
+ margin-bottom: 2rem;
+
+ p {
+ background: @gray;
+ border-radius: @radius-base4;
+ padding: @padding-base2;
+ }
+}
+
+
+p.submissionStatus {
+ padding: 4px 12px;
+ background: @p3;
+ align-self: center;
+ width: fit-content;
+ border-radius: @radius-base5;
+ color: white;
+}
+
+
+span.submissionTimeStamp {
+ display: inline-flex;
+ align-items: center;
+ margin-left: 1rem;
+
+ p {
+ padding-left: 4px;
+ }
+
+}
\ No newline at end of file
diff --git a/src/pages/Competitions/CompetitionPortalPage/SubmissionEntryCard/index.tsx b/src/pages/Competitions/CompetitionPortalPage/SubmissionEntryCard/index.tsx
new file mode 100644
index 0000000..c80dd1b
--- /dev/null
+++ b/src/pages/Competitions/CompetitionPortalPage/SubmissionEntryCard/index.tsx
@@ -0,0 +1,196 @@
+import React, { useEffect, useState } from "react";
+import './index.less';
+import { IoEllipse, IoEllipsisVertical, IoPerson, IoTime } from "react-icons/io5";
+import moment from "moment";
+import { FaEllipsisH, FaLink, FaPaperclip } from "react-icons/fa";
+import { Button, Modal } from "antd";
+import { TeamMemberAvatar } from "../../CompetitionPortalPage";
+import { BsQuestion, BsQuestionLg } from "react-icons/bs";
+import { BiStats } from "react-icons/bi";
+
+/**
+ * Modular component that renders a competition submission details.
+ * This is used as part of a submission log preview in the
+ * Competitions Portal page in the 'My Team' tab as well as the
+ * Submissions Log page.
+ *
+ * @param {any} data The submission entry, dereferenced using data.entry
+ *
+ * An entry inherits the competitionEntry interface:
+ *
+ * interface competitionEntry {
+ * _id: mongoose.Types.ObjectId,
+ * competitionTeam: mongoose.Types.ObjectId;
+ * competitionName: string;
+ * status: submitStates;
+ * description: string;
+ * tags: string[];
+ * fileLocation: string;
+ * score: number;
+ * trueScore: number;
+ * rank: Object;
+ * submissionDate: Date;
+ * error: string;
+ * }
+ *
+ */
+const SubmissionEntryCard = (data: any) => {
+
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ // the upload status of the entry
+ let status = '?';
+ switch (data.entry.status) {
+ case 0:
+ status = 'uploading';
+ break;
+ case 1:
+ status = 'unverified';
+ break;
+ case 2:
+ status = 'verified';
+ break;
+ case 3:
+ status = 'failed';
+ break;
+ }
+
+ function openModal() {
+ setIsModalOpen(true);
+ }
+
+ return (
+ <>
+ setIsModalOpen(false)}
+ onCancel={() => setIsModalOpen(false)}
+ open={isModalOpen}
+ title={submission
}
+ centered
+ className="submissionModal"
+ >
+
+
+
+ {data.entry.dateString}
+
+
+ {moment(data.entry.date).fromNow()}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Uploader
+
+
+
+ {/* Current competitionEntry schema doesn't have way to add username to identify uploader.
+ * A simple solution is to insert the username into the tag list as the first element*/}
+ {data.entry.tags.split(',')[0]}
+
+
+
+
+
+
+ Status
+
+
{status}
+
+
+
+
+ Score
+
+
submission score
+
+
+
+ Description
+ {data.entry.description}
+
+
+
+ Error Logs
+ {data.entry.description}
+
+
+
+
+
+
+
+ {status}
+
+
+ {moment(data.entry.date).fromNow()}
+
+
+
+ openModal()} />} />
+
+
+
+ {data.entry.tags.split(',')[0]}
+
+
+
+
{data.entry.description}
+
+ bot.targz
+ {/* TODO: Add this back in when file submission works: {data.entry.fileLocation}
*/}
+
+
('bottom');
+ const [align] = useState('center');
+
+ const [submissions, setSubmissions] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
+ const [teamInfo, setTeamInfo] = useState({});
+
+ // First grab the competition data and update team info
+ useEffect(() => {
+ getTeamInfo(competitionName, id).then((res) => {
+ console.log(res.data);
+ setTeamInfo(res.data);
+ console.log("set team info");
+ })
+
+ }, []);
+
+ // Once we verify team, get recent submissions
+ useEffect(() => {
+ if(teamInfo !== null) {
+ console.log(teamInfo)
+ fetchRecents();
+ }
+ }, [teamInfo]);
+
+
+ /**
+ * Retrieves the submissions associated with the team.
+ */
+ const fetchRecents = () => {
+ setIsLoading(true);
+
+ // initialize the submissions
+ setSubmissions([]);
+
+ if (teamInfo && teamInfo.submitHistory) {
+ console.log(teamInfo);
+
+ {/* Currently slices data, but need to remove this line in the future */}
+ teamInfo.submitHistory.slice(0, 3).map((id: any) => {
+ getSubmissionDetails(competitionName, id).then((res) => {
+ let submission = res.data[0];
+ if (!submission) return;
+ let date = new Date(submission.submissionDate);
+
+ let submissionDetails = {
+ date: date,
+ status: submission.status,
+ dateString:
+ date.toLocaleDateString() + ' at ' + date.toLocaleTimeString(),
+ description: submission.description,
+ tags: submission.tags.join(', '),
+ score: submission.score,
+ key: id,
+ };
+
+ // Append the new submissions to the current state
+ setSubmissions((submissionData: any) => [
+ ...submissionData,
+ submissionDetails,
+ ]);
+
+ // Set a delayed loading status
+ setTimeout(() => {
+ setIsLoading(false);
+ }, 500);
+
+ });
+ });
+ }
+ else {
+ setTimeout(() => {
+ setIsLoading(false);
+ }, 500);
+ }
+ }
+
+ return(
+
+
+
+
+
+
+
+
+
+
+ {/* Render list of submission entry cards */}
+ {isLoading ?
+ (
+
+
+ )}
+ />
+ }
+
+
+
+
+ )
+}
+
+
+export default SubmissionLogPage;
\ No newline at end of file
diff --git a/src/pages/Competitions/CompetitionPortalPage/index.less b/src/pages/Competitions/CompetitionPortalPage/index.less
index a292be7..b05c1b8 100644
--- a/src/pages/Competitions/CompetitionPortalPage/index.less
+++ b/src/pages/Competitions/CompetitionPortalPage/index.less
@@ -2,15 +2,403 @@
@import '../../../newStyles/components.less';
@import '../../../newStyles/index.less';
+
.CompetitionPortalPage {
.noContainer();
- #portalHeader{
+ #portalHeader {
.generic-section();
.constrained-bounds();
+ max-width: 1200px !important;
margin-top: 4rem;
+
+ span {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+
+ Button {
+ .button-black-square();
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+
+ #portalBanner {
+ .gradient();
+ border-radius: @radius-base4;
+ padding: @padding-base2;
+ margin-top: 1rem;
+ box-sizing: border-box;
+
+ p {
+ color: white;
+ }
+ }
+ }
+
+
+
+
+ #portalStatsContent {
+
+ width: 100%;
+ min-height: 120px;
+ margin-top: 2rem;
+
+ section#noTeamMessage {
+ height: 108px;
+ text-align: left;
+ align-items: start;
+ padding: @padding-base2;
+ max-width: @sm;
+ color: @black;
+ }
+
+
+ #portalStatsRow {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(124px, 1fr));
+ gap: 1rem 2rem; // Adjust the gap as needed
+ width: 100%;
+
+ @media screen and (max-width: @lg) {
+ grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
+ }
+
+ .portalStatsBox {
+ background-color: @light-gray;
+ min-height: 140px;
+ padding: @padding-base2;
+ border-radius: @radius-base4;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-bottom: 1rem;
+ transition: background-color 0.2s ease-in;
+
+ span {
+ display: flex;
+ justify-content: start;
+ flex-direction: row;
+ align-items: center;
+ flex-wrap: wrap;
+
+ .statsIcon {
+ padding: 6px;
+ border-radius: 8px;
+ color: white;
+ background: black;
+ margin-right: 1rem;
+ }
+
+ p {
+ color: @text-gray3;
+ }
+
+ }
+
+ p.stat {
+ font-size: 2.8rem;
+ font-weight: @semi-bold;
+ margin-top: 1rem;
+ }
+ }
+
+ }
+ }
+
+
+
+ #portalTabContent {
+ .generic-section();
+ .constrained-bounds();
+ overflow-y: hidden; // prevents layout shifts when user switches tabs
+ max-width: 1200px !important;
+
+ .ant-tabs-ink-bar {
+ display: block;
+ background-color: @mainred;
+ }
+
+ }
+
+
+ #findTeamsContainer {
+ margin-top: 1rem;
+ margin-bottom: 5rem;
+
+ Input {
+ line-height: 2.5rem;
+ font-size: 16px;
+ }
+ }
+
+}
+
+
+#leaderBoardContainer {
+ margin-top: 1rem;
+
+ section {
+ display: inline-flex;
+ width: 100%;
+ justify-content: space-between;
+ margin-bottom: 1rem;
+
+ p#lastRefreshedText {
+ background: @light-gray;
+ border-radius: @radius-base4;
+ padding: @padding-base;
+ margin-right: 2rem;
+ }
+
+ @media screen and (max-width: @sm) {
+ p#lastRefreshedText {
+ display: none;
+ }
+ }
+
+ Button {
+ .button-black-square();
+ }
+ }
+}
+
+
+
+
+#myTeamContainer {
+ margin-top: 1rem;
+
+ section:first-of-type {
+ display: grid;
+ grid-template-columns: minmax(400px, 3fr) 2fr;
}
+ div#teamMainContent {
+ #submitFileButton {
+ margin-top: 2rem;
+ .button-black-square();
+ }
+ #makeTeamButton {
+ margin-top: 1rem;
+ width: fit-content;
+ }
+
+ #leaveTeamButton {
+ border: none;
+ }
+
+ #teamNameWrapper {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+
+ #rankingTag {
+ border-radius: @radius-base5;
+ background-color: rgb(18, 113, 255);
+ padding: 4px 12px;
+ width: fit-content;
+ color: white;
+ transform: translateY(4px);
+ font-weight: @semi-bold;
+ }
+ }
+
+ #teamNameInput {
+ max-width: 300px;
+ }
+
+
+
+ #teamHeader {
+ display: flex;
+ margin-bottom: 2rem;
+ align-items: center;
+
+ h3 {
+ font-weight: @semi-bold;
+ }
+ }
+
+ #uploadFileSection,
+ #submissionsPreviewSection,
+ #teamScoreHistorySection {
+ display: block;
+ margin-top: 5rem;
+ }
+
+ #uploadFileSection {
+ background-color: @light-gray;
+ padding: @padding-base2;
+ border-radius: @radius-base4;
+
+ #uploadFileHeader {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: row;
+ margin-bottom: 2rem;
+
+ h3 {
+ font-weight: @semi-bold;
+ }
+ }
+
+ #uploadDescription {
+ color: @black;
+ border-radius: @radius-base3;
+ margin-bottom: 2rem;
+ height: 100px;
+ border: none;
+ resize: none;
+ }
+
+ #antUploadText {
+ color: @text-gray;
+ }
+ }
+
+ #teamScoreHistorySection {
+
+ h3 {
+ font-weight: @semi-bold;
+ }
+ }
+
+ #submissionsPreviewSection {
+ background-color: @light-gray;
+ padding: @padding-base2;
+ border-radius: @radius-base4;
+ margin-bottom: 10rem;
+
+
+ span#submissionsPreviewHeader {
+ width: 100%;
+ display: inline-flex;
+ justify-content: space-between;
+ align-items: center;
+ h3 {
+ font-weight: @semi-bold;
+ }
+
+ span {
+ display: inline-flex;
+ }
+
+ #viewSubmissionsButton {
+ color: black;
+ }
+ }
+
+ Button#viewAllSubmissionsButton {
+ display: flex;
+ align-items: center;
+ }
+
+ section#submissionsPreviewColumn {
+ width: 100%;
+ display: block;
+ margin-top: @margin-base2;
+ }
+
+ }
+
+
+ #submissionCountDown {
+ background-color: @light-gray;
+ border-radius: @radius-base3;
+ padding: 10px;
+ display: inline-block;
+ margin-left: 1rem;
+ }
+
+
+ }
+
+ div#sideContent {
+ margin-top: 1rem;
+ margin-left: 2rem;
+ height: fit-content;
+
+
+ div#membersBox {
+ height: fit-content;
+ box-sizing: border-box;
+ padding: @padding-base3;
+ background-color: @light-gray;
+ border-radius: @radius-base4;
+
+
+ #teamMembersHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ h3 {
+ margin-right: 1rem;
+ font-weight: @semi-bold;
+ }
+
+ #inviteButton {
+ .button-black-square();
+ }
+ }
+
+ div.teamMember {
+ display: flex;
+ padding: 8px;
+ background: none;
+ border-radius: @radius-base4;
+ margin: 1rem 0rem 1rem 0;
+ transition: 0.2s ease-in;
+
+ .teamMemberName {
+ font-weight: bold;
+ }
+ }
+
+ div.teamMember:hover {
+ background-color: white !important;
+ cursor: pointer;
+ }
+ }
+
+ div#matchesBox {
+ .gradient();
+ height: fit-content;
+ box-sizing: border-box;
+ padding: @padding-base3;
+ border-radius: @radius-base4;
+ margin-top: 3rem;
+
+ h3 {
+ margin-right: 1rem;
+ font-weight: @semi-bold;
+ color: white;
+ margin-bottom: 1rem;
+ }
+
+ p {
+ color: white;
+ }
+ }
+ }
+}
+
+
+
+@media screen and (max-width: @lg) {
+ #myTeamContainer section:first-of-type {
+ display: block;
+ }
+
+ div#sideContent {
+ margin-left: 0 !important;
+ }
}
\ No newline at end of file
diff --git a/src/pages/Competitions/CompetitionPortalPage/index.tsx b/src/pages/Competitions/CompetitionPortalPage/index.tsx
index da78e21..3579d46 100644
--- a/src/pages/Competitions/CompetitionPortalPage/index.tsx
+++ b/src/pages/Competitions/CompetitionPortalPage/index.tsx
@@ -1,42 +1,1100 @@
-import React, { useContext, useEffect } from "react";
-import { message } from "antd";
-import { Layout, Space, Button } from 'antd';
-import UserContext from "../../../UserContext";
-import { useHistory } from 'react-router-dom';
+import React, { useContext, useEffect, useState } from "react";
+import { AutoComplete, Drawer, List, Skeleton, Tabs, message, Empty, Tooltip } from "antd";
+import { InboxOutlined } from '@ant-design/icons';
+import { Layout, Button, Input, Modal, Upload } from 'antd';
+import type { UploadProps } from 'antd';
+import UserContext, { User } from "../../../UserContext";
+import { Link, useHistory } from 'react-router-dom';
+import {
+ getTeamInfo,
+ createTeam,
+ getCompetitionUser,
+ getTeams,
+ leaveTeam,
+ getSubmissionDetails
+} from '../../../actions/teams/utils';
+import TeamCard from '../../../components/TeamCard/index';
import './index.less';
+import path from 'path';
import DefaultLayout from "../../../components/layouts/default";
+import { PaginationPosition, PaginationAlign } from "antd/es/pagination/Pagination";
+import { CompetitionData, getLeaderboard, getMetaData, getRanks, registerCompetitionUser, uploadSubmission } from "../../../actions/competition";
+import { genColor } from "../../../utils/colors";
+import { IoHelp, IoRefresh, IoSearch, IoTime } from "react-icons/io5";
+import { IoEllipsisVertical , IoPersonAdd} from "react-icons/io5";
+import { FaCheck, FaClock, FaStar } from "react-icons/fa";
+import Table, { ColumnsType } from "antd/es/table";
+import { BiStats } from "react-icons/bi";
+import { createAvatar } from '@dicebear/core';
+import { botttsNeutral, identicon } from '@dicebear/collection';
+import CountdownTimer from "./CountDownTimer";
+import TextArea from "antd/es/input/TextArea";
+import LineChart from "./LineChart";
+import SubmissionEntryCard from "./SubmissionEntryCard";
const { Content } = Layout;
+/**
+ * Renders the tab to view all available teams to join or leave
+ *
+ * @param {any} data Holds the array of all teams
+ * @param {User} user
+ * @param {any} compUser The competition user
+ * @param fetchTeamsCallback Function that refetches all team data
+ * @param updateRankings Function that retreives the new rankings of teams
+ *
+ */
+const FindTeamsTab = (
+ { data, user, compUser, registered, fetchTeamsCallback, updateRankings }:
+ { data: Object[], user: User, compUser: any, registered: Boolean, fetchTeamsCallback: () => void, updateRankings: () => void }
+) => {
-function CompetitionPortalPage () {
+ // Constants to align the pagination options for the teams list
+ const [position] = useState('bottom');
+ const [align] = useState('center');
+
+ // Dropdown options for search bar
+ const [options, setOptions] = useState>(data);
+
+ // Initialize the teams data once that data defined
+ useEffect(() => {
+ if (data) {
+ setOptions(data);
+ }
+ }, [data, registered])
+
+ const handleSearch = (value: string) => {
+ // Resets search options back to the original data if the value is an empty string
+ if (value === "") {
+ setOptions(data);
+ }
+ }
+
+ const handleSelect = (value: string) => {
+
+ // Filter the list items
+ const filteredOptions = data.filter((item: any) =>
+ item.teamName.toUpperCase().includes(value.toUpperCase())
+ );
+ setOptions(filteredOptions)
+ }
+
+ return (
+
+ handleSearch(text)}
+ onSelect={handleSelect}
+
+ // list of all possible options for dropdown
+ options={options.map((item: any) => ({ value: item.teamName }))}
+
+ // filterOption to handle filtered dropdown items
+ filterOption={(inputValue, option) =>
+ option!.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+ }
+ size="large"
+ style={{ width: "100%" }}
+ >
+
+
+ {/** List to preview all the teams based on the user's query */}
+ (
+
+ {
+ )}
+ />
+
+
+ );
+};
+
+
+
+
+/**
+ * Renders the leaderboard of all teams based on their ranking
+ *
+ * @param {any} rankData The ranking data of all teams
+ * @param {Date} lastRefresh The last time when the leaderboard was refreshed
+ * @param updateRankingsCallback Function that refetches the rankings for all teams
+ * @param {boolean} isLoading Indicates if all the competitions teams info is being fetched
+ *
+ */
+const LeaderBoardTab = (
+ {rankData, lastRefresh, updateRankingsCallback, isLoading}:
+ { rankData: any,
+ lastRefresh: Date | null,
+ updateRankingsCallback: () => void,
+ isLoading: boolean
+ }
+) => {
+
+ // Formats how the columns should be arranged and styled
+ const columns: ColumnsType = [
+ {
+ title: 'Rank',
+ dataIndex: 'rank',
+ sorter: (a, b) => b.score - a.score,
+ defaultSortOrder: 'ascend',
+ },
+ {
+ title: 'Team',
+ dataIndex: 'team',
+ sorter: (a, b) => a.team.length - b.team.length,
+ render(value, record, index) {
+ const color1 = genColor(record.team);
+ const color2 = genColor(`${record.team}_additional_seed`);
+
+ return (
+
+
+ {value.length > 28 ? (
+ {value.substring(0, 28)}...
+ ) : (
+ {value.substring(0, 28)}
+ )}
+
+ );
+ },
+ },
+ {
+ title: 'Score',
+ dataIndex: 'score',
+ sorter: (a, b) => a.score - b.score,
+ },
+ ];
+
+
+ return (
+
+
+
+
+ Last refreshed{': '}
+ {lastRefresh ? lastRefresh.toLocaleString() : ''}
+
+ {
+ updateRankingsCallback();
+ }}
+ >
+ Refresh
+
+
+
+
+ );
+};
+
+
+/**
+ * Renders the submission preview list for the user's team
+ *
+ * @param {any} teamInfo The team's general information
+ * @param {string} competitionName The name of the current competition
+ *
+ */
+const SubmissionsPreview = ({teamInfo, competitionName}: {teamInfo: any, competitionName: string}) => {
+
+ const [submissions, setSubmissions] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
+
+ /* The actual data inside the teamInfo.submitHistory will be a list of mongoose object ids
+ that point to each competition entry object. This component will query the
+ recent entries and display them in a list view */
+
+ const dummyData = [
+ "63c396f9671b14068b17f681"
+ ];
+
+ const fetchRecents = async() => {
+ setSubmissions([]);
+ setIsLoading(true);
+
+ if (teamInfo) {
+ teamInfo.submitHistory.slice(0, 3).map((id: any) => {
+ getSubmissionDetails(competitionName, id).then((res) => {
+ let submission = res.data[0];
+ if (!submission) return;
+ let date = new Date(submission.submissionDate);
+ let submissionDetails = {
+ date: date,
+ status: submission.status,
+ dateString:
+ date.toLocaleDateString() + ' at ' + date.toLocaleTimeString(),
+ description: submission.description,
+ tags: submission.tags.join(', '),
+ score: submission.score,
+ key: id,
+ };
+ setSubmissions((submissionData: any) => [
+ ...submissionData,
+ submissionDetails,
+ ]);
+ });
+ })
+
+ setTimeout(() => {
+ // Your code to be executed after the delay
+ console.log("Delayed code executed!");
+ setIsLoading(false);
+ }, 500);
+
+ }
+
+ }
+
+
+ useEffect(() => {
+ fetchRecents();
+ }, []);
+
+ return (
+
+
+
+
+ {isLoading ? (
+
+
+ )}
+ />
+ }
+
+
+ );
+}
+
+
+
+
+/**
+ * Generates a unique avatar for each team member
+ * using a third party avatar library
+ *
+ * @param {string} username A team member's name
+ *
+ */
+export const TeamMemberAvatar = ( {username}:{username: string}) => {
+ const [avatarUrl, setAvatarUrl] = useState('');
+ const [loadingImage, setLoadingImage] = useState(false);
+
+ useEffect(() => {
+ setLoadingImage(true);
+ // Generate avatar based on username using DiceBear
+ const svg = createAvatar(botttsNeutral, {
+ seed: username,
+ radius: 50,
+ backgroundType: ["gradientLinear"]
+ });
+
+ // Convert the SVG string to a data URL
+ const dataUrl = `data:image/svg+xml;base64,${btoa(svg.toString())}`;
+
+ // Set the avatar URL
+ setAvatarUrl(dataUrl);
+
+ setLoadingImage(false);
+ }, [username]);
+
+ return (
+ <>
+ {loadingImage ? (
+
+
+ )
+}
+
+
+
+
+/**
+ * Component that displays a team's data. Contains several components
+ * to create a team, view team members, upload submissions, view submission previews,
+ * and navigate to the matches page.
+ *
+ * @param {boolean} isLoadingTeamInfo the current team the user is viewing
+ * @param {any} compUser schema that holds user's competition profile data
+ * @param {any} rankData schema that holds the team's ranking data
+ * @param {any} teamInfo schema that holds the team's general information
+ * @param fetchTeamCallback callback function to update the team data and the competition user
+ *
+ */
+const MyTeamTab = ( { isLoadingTeamInfo, compUser, rankData, teamInfo, metaData , fetchTeamsCallback}:
+ { isLoadingTeamInfo: boolean, compUser: any, rankData: any, teamInfo: any, metaData: any, fetchTeamsCallback: () => void }
+) => {
+
+ const [isLoading, setIsLoading] = useState(false);
+
+ // Form field to create a new etam with a name
+ const [newTeamName, setNewTeamName] = useState("");
+
+ // Modal states
+ const [isInviteModalVisible, setIsInviteModalVisible] = useState(false);
+ const [isLeaveModalVisible, setIsLeaveModalVisible] = useState(false);
+
+ // Submission description input
+ const [desc, setDesc] = useState('');
+
+ // Submission tags input (not being used for now as there isn't UI to add tags yet)
+ // const [tags, setTags] = useState>([]);
+
+ const [submissionFile, setFile] = useState();
+ const [uploading, setUploading] = useState(false);
+
+ const showLeaveModal = () => {
+ setIsLeaveModalVisible(true);
+ };
+
+ const handleLeaveModalClose = () => {
+ setIsLeaveModalVisible(false);
+ };
+
+ const showInviteModal = () => {
+ setIsInviteModalVisible(true);
+ };
+
+ const handleInviteModalClose = () => {
+ setIsInviteModalVisible(false);
+ };
+
+ // Upload submission
+ const { Dragger } = Upload;
+ const uploadProps: UploadProps = {
+ name: 'file',
+ multiple: false,
+ // TODO: replace placeholder link with actual file uploading logic
+ // action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188',
+ onChange(info) {
+ const { status } = info.file;
+ if (status !== 'uploading') {
+ console.log(info.file, info.fileList);
+ }
+ if (status === 'done') {
+ message.success(`${info.file.name} file uploaded successfully.`);
+ setFile(info.file)
+ } else if (status === 'error') {
+ message.error(`${info.file.name} file upload failed.`);
+ }
+ },
+ onDrop(e) {
+ console.log('Dropped files', e.dataTransfer.files);
+ },
+ };
+
+ /**
+ * Helper function to refresh the submission history or log
+ * when the user successfully uploads a submission. Also
+ * performs a refresh of the team data in case the eval server
+ * updates the team's ranking, score, etc.
+ *
+ * @param event A react form event
+ */
+ const handleSubmit = (event: React.FormEvent) => {
+
+ event.preventDefault();
+ fetchTeamsCallback();
+
+ /* TODO: When eval servers are up, uncomment this portion
+ event.preventDefault();
+ setUploading(true);
+ uploadSubmission(
+ submissionFile,
+ // use the username as first tag value
+ [compUser.username],
+ desc,
+ compUser.competitionName,
+ compUser.username as string
+ )
+ .then((res) => {
+ message.success('Submission Uploaded Succesfully');
+ fetchTeamsCallback();
+ })
+ .catch((err) => {
+ message.error(`${err}`);
+ })
+ .finally(() => {
+ setUploading(false);
+ }); */
+ };
+
+ /**
+ * Converts a numeric rankinginto a ordinal label
+ * e.g. 1 = 1st, 2 = 2nd, 3 = 3rd, 4 = 4th...
+ *
+ * @param number Represents the team's ranking
+ * @returns {string}
+ */
+ function getOrdinal(number: any) {
+ const suffixes = ['th', 'st', 'nd', 'rd'];
+ const v = number % 100;
+ return number + (suffixes[(v - 20) % 10] || suffixes[v] || suffixes[0]);
+ }
+
+ /**
+ * Helper function that removes the user from the team.
+ * Invokes callback to update the dashboard data and competition user info
+ */
+ const handleLeaveTeam = () => {
+ leaveTeam(compUser.competitionName, compUser.username, compUser.competitionTeam.teamName).then((res) => {
+ message.success('Successfully left team.');
+ handleLeaveModalClose();
+ fetchTeamsCallback();
+ })
+ .catch((error) => (
+ message.error(error)
+ ));
+ }
+
+ /**
+ * Helper function that calls API to create a new team
+ * for the user upon submission of a new name
+ *
+ */
+ const handleClick = () => {
+
+ if (newTeamName.length == 0) {
+ message.info('Name cannot be empty');
+ return;
+ }
+ setIsLoading(true);
+
+ createTeam(compUser.competitionName, compUser.username, newTeamName).then((res) => {
+ message.success('Successfully made a new team!');
+ fetchTeamsCallback();
+ console.log(compUser)
+
+ })
+ .catch((error) => {
+ message.error(error.message);
+ });
+ setIsLoading(false);
+ }
+
+
+ return (
+ <>
+ {isLoadingTeamInfo ?
+
+
+ {teamInfo !== null && teamInfo.teamName && (
+
+
+
+
+
+
+
Score History
+
+
+