Skip to content

Commit 7e334a6

Browse files
Eclipse-DominatorEclipse-Dominator
committed
Fix GUI looks
1 parent 1c61f56 commit 7e334a6

File tree

15 files changed

+232
-218
lines changed

15 files changed

+232
-218
lines changed

‎code_execution/src/executor_client.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,7 @@ export async function runSubmission(
152152
source_code: string,
153153
userid: number
154154
) {
155+
const submissionTime = new Date();
155156
const resDat: submissionResult = {
156157
completed: false,
157158
evaluated: 0,
@@ -186,5 +187,5 @@ export async function runSubmission(
186187
resDat.verdict = resDat.verdict === "Unknown" ? "Accepted" : resDat.verdict;
187188
resDat.completed = true;
188189

189-
submitSubmission(resDat.verdict, lang, qn__id, userid, source_code); // runs in the bg
190+
submitSubmission(resDat.verdict, lang, qn__id, userid, source_code, submissionTime); // runs in the bg
190191
}

‎code_execution/src/submission_client.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ export const submitSubmission = async (
2222
language: string,
2323
qid: string,
2424
userId: number,
25-
sourceCode: string
25+
sourceCode: string,
26+
time: Date
2627
) => {
2728
const question = await fetchQn(qid);
2829
const submission = {
@@ -35,6 +36,7 @@ export const submitSubmission = async (
3536
verdict: verdict,
3637
sourceCode: sourceCode,
3738
language: language,
39+
answeredAt: time.toISOString(),
3840
};
3941
await axios.post(
4042
`http://user-service:8081/api/users/${userId}/addquestions`,

‎frontend/src/components/MatchMakeBtn/MatchMakeBtn.component.tsx‎

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,7 @@ import { useMatchmake } from "../../contexts/matchmake.context";
1616
import { AiOutlineDisconnect as DisconnectIcon } from "react-icons/ai";
1717
import { useSelector } from "react-redux";
1818
import { selectUser } from "../../reducers/authSlice";
19-
20-
const diffRange = [
21-
[0, 2.9],
22-
[3, 5.9],
23-
[6, 7.9],
24-
[8, 9.9],
25-
[0, 9.9],
26-
];
19+
import { diffRanges } from "../../helper/DifficultyFilterHelper";
2720

2821
const MatchMakeBtn = () => {
2922
const user = useSelector(selectUser);
@@ -79,21 +72,14 @@ const MatchMakeBtn = () => {
7972
)}
8073

8174
<MenuList>
82-
<MenuItem onClick={() => findMatch(diffRange[0][0], diffRange[0][1])}>
83-
Basic
84-
</MenuItem>
85-
<MenuItem onClick={() => findMatch(diffRange[1][0], diffRange[1][1])}>
86-
Simple
87-
</MenuItem>
88-
<MenuItem onClick={() => findMatch(diffRange[2][0], diffRange[2][1])}>
89-
Medium
90-
</MenuItem>
91-
<MenuItem onClick={() => findMatch(diffRange[3][0], diffRange[3][1])}>
92-
Hard
93-
</MenuItem>
94-
<MenuItem onClick={() => findMatch(diffRange[4][0], diffRange[4][1])}>
95-
All
96-
</MenuItem>
75+
{diffRanges.map((dr) => (
76+
<MenuItem
77+
onClick={() => findMatch(dr.range[0], dr.range[1])}
78+
id={dr.difficulty}
79+
>
80+
{dr.difficulty}
81+
</MenuItem>
82+
))}
9783
</MenuList>
9884
</Menu>
9985
);

‎frontend/src/components/ProgressBar/ProgressBar.component.tsx‎

Lines changed: 117 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,141 @@
11
import React, { useEffect, useState } from "react";
2-
import { Flex, Text, CircularProgress, CircularProgressLabel, Progress, Card, Th, TableContainer, Table } from "@chakra-ui/react";
2+
import {
3+
Flex,
4+
Text,
5+
CircularProgress,
6+
CircularProgressLabel,
7+
Progress,
8+
Card,
9+
Th,
10+
TableContainer,
11+
Table,
12+
ProgressProps,
13+
Box,
14+
CardHeader,
15+
Heading,
16+
HStack,
17+
Stat,
18+
StatLabel,
19+
StatNumber,
20+
StatHelpText,
21+
Center,
22+
VStack,
23+
} from "@chakra-ui/react";
324
import { fetchAllQuestions } from "../../api/questions";
425
import { Question } from "../../models/Question.model";
526
import { useProfile } from "../../contexts/profileContext";
27+
import {
28+
diffRanges,
29+
mapRangeToDifficulty,
30+
} from "../../helper/DifficultyFilterHelper";
631

32+
type info = {
33+
name: string;
34+
percentage: number;
35+
solved: number;
36+
total: number;
37+
scheme?: string;
38+
};
739

840
const ProgressBar = () => {
9-
1041
const { solvedQuestions } = useProfile();
1142

12-
const [easyCount, setEasyCount] = useState(0);
13-
const [mediumCount, setMediumCount] = useState(0);
14-
const [hardCount, setHardCount] = useState(0);
15-
const [totalSolved, setTotalSolved] = useState(0);
16-
const [totalEasy, setTotalEasy] = useState(0);
17-
const [totalMedium, setTotalMedium] = useState(0);
18-
const [totalHard, setTotalHard] = useState(0);
19-
const [totalQuestions, setTotalQuestions] = useState(0);
20-
const [easyPercentage, setEasyPercentage] = useState(0);
21-
const [mediumPercentage, setMediumPercentage] = useState(0);
22-
const [hardPercentage, setHardPercentage] = useState(0);
23-
const [totalPercentage, setTotalPercentage] = useState(0);
43+
const [datas, setDatas] = useState<info[]>([]);
2444

2545
useEffect(() => {
26-
async function fetchAndCategorizeQuestions() {
46+
(async () => {
2747
try {
2848
const allQuestions: Question[] = await fetchAllQuestions();
2949

30-
// Categorize questions into easy, medium, and hard
31-
const easyQuestions = allQuestions.filter((question) => question.difficulty >= 0 && question.difficulty < 3.5).length;
32-
const mediumQuestions = allQuestions.filter((question) => question.difficulty >= 3.5 && question.difficulty < 7).length;
33-
const hardQuestions = allQuestions.filter((question) => question.difficulty >= 7 && question.difficulty <= 10).length;
34-
35-
const userEasyQuestions = solvedQuestions.filter((question) => question.difficulty >= 0 && question.difficulty < 3.5).length;
36-
const userMediumQuestions = solvedQuestions.filter((question) => question.difficulty >= 3.5 && question.difficulty < 7).length;
37-
const userHardQuestions = solvedQuestions.filter((question) => question.difficulty >= 7 && question.difficulty <= 10).length;
38-
39-
setTotalEasy(easyQuestions);
40-
setTotalMedium(mediumQuestions);
41-
setTotalHard(hardQuestions);
42-
setTotalQuestions(easyQuestions + mediumQuestions + hardQuestions);
43-
setEasyCount(userEasyQuestions);
44-
setMediumCount(userMediumQuestions);
45-
setHardCount(userHardQuestions);
46-
setTotalSolved(userEasyQuestions + userMediumQuestions + userHardQuestions);
47-
48-
// Calculate percentages here
49-
const easyPercentage = (userEasyQuestions / easyQuestions) * 100;
50-
const mediumPercentage = (userMediumQuestions / mediumQuestions) * 100;
51-
const hardPercentage = (userHardQuestions / hardQuestions) * 100;
52-
const totalPercentage = (totalSolved / totalQuestions) * 100;
53-
54-
// Set state for percentages
55-
setEasyPercentage(easyPercentage);
56-
setMediumPercentage(mediumPercentage);
57-
setHardPercentage(hardPercentage);
58-
setTotalPercentage(totalPercentage);
59-
60-
// Hard coded values for testing
61-
// setTotalEasy(10);
62-
// setTotalMedium(10);
63-
// setTotalHard(10);
64-
// setTotalQuestions(30);
65-
// setEasyCount(8);
66-
// setMediumCount(7);
67-
// setHardCount(3);
68-
// setTotalSolved(18);
69-
// setEasyPercentage(80);
70-
// setMediumPercentage(70);
71-
// setHardPercentage(30);
72-
// setTotalPercentage(60);
50+
const res: info[] = diffRanges.map((dr) => {
51+
const diff = dr.difficulty;
52+
const total =
53+
dr.difficulty !== "All"
54+
? allQuestions.filter(
55+
(qn) => mapRangeToDifficulty(qn.difficulty) === diff
56+
).length
57+
: allQuestions.length;
58+
const solved =
59+
dr.difficulty !== "All"
60+
? new Set(
61+
solvedQuestions
62+
.filter(
63+
(qn) =>
64+
qn.solved &&
65+
mapRangeToDifficulty(qn.difficulty) === diff
66+
)
67+
.map((q) => q._id)
68+
).size
69+
: new Set(
70+
solvedQuestions.filter((qn) => qn.solved).map((q) => q._id)
71+
).size;
72+
return {
73+
name: diff,
74+
percentage: total
75+
? Math.round((solved / total) * 10000) / 100
76+
: 0.0,
77+
solved,
78+
total,
79+
scheme: dr.scheme,
80+
};
81+
});
82+
setDatas(res);
7383
} catch (error) {
7484
console.error(error);
7585
}
76-
}
77-
78-
fetchAndCategorizeQuestions();
86+
})();
7987
}, [solvedQuestions]);
80-
88+
console.log(solvedQuestions);
8189
return (
8290
<>
83-
<TableContainer width="100%">
84-
<Table
85-
variant="striped"
86-
backgroundColor={"white"}
87-
size="md"
88-
boxShadow="md"
89-
transition="box-shadow 0.2s"
90-
_hover={{
91-
boxShadow: "xl",
92-
}}
93-
width="100%"
94-
sx={{ tableLayout: "fixed" }}
95-
>
96-
97-
<Th colSpan={4}>
98-
Solved Problems
99-
</Th>
100-
</Table>
101-
</TableContainer>
10291
<Card>
103-
<Flex direction="column" p={10}>
104-
<Flex width="100%" direction="row" align="center">
105-
<CircularProgress size="180px" value={totalPercentage} color="yellow.400">
106-
<CircularProgressLabel fontSize="18px">{totalSolved} solved</CircularProgressLabel>
107-
</CircularProgress>
108-
<Flex width="100%" direction="column" align="left" textAlign="left" ml={6}>
109-
<Flex justify="space between" align="center" mb={2}>
110-
<Text fontSize="sm">Easy</Text>
111-
<Text fontSize="sm" color="gray.500">
112-
{easyCount}/{totalEasy}
113-
</Text>
114-
</Flex>
115-
<Progress value={easyPercentage} colorScheme="green" mb={2} />
116-
<Flex justify="space between" align="center" mb={2}>
117-
<Text fontSize="sm">Medium</Text>
118-
<Text fontSize="sm" color="gray.500">
119-
{mediumCount}/{totalMedium}
120-
</Text>
121-
</Flex>
122-
<Progress value={mediumPercentage} colorScheme="yellow" mb={2} />
123-
<Flex justify="space between" align="center" mb={2}>
124-
<Text fontSize="sm">Hard</Text>
125-
<Text fontSize="sm" color="gray.500">
126-
{hardCount}/{totalHard}
127-
</Text>
128-
</Flex>
129-
<Progress value={hardPercentage} colorScheme="red" mb={2} />
130-
</Flex>
131-
</Flex>
132-
</Flex>
92+
<CardHeader>
93+
<Heading size="md">Solved Problems</Heading>
94+
</CardHeader>
95+
<HStack gap={3} margin={4}>
96+
{datas
97+
.filter((d) => d.name === "All")
98+
.map((d) => (
99+
<CircularProgress
100+
size="200px"
101+
value={d.percentage}
102+
color="yellow.400"
103+
key="All"
104+
thickness={5}
105+
>
106+
<CircularProgressLabel fontSize="15px">
107+
<Stat textShadow="md">
108+
<StatLabel>Total Solved</StatLabel>
109+
<StatNumber>
110+
{d.solved}/{d.total}
111+
</StatNumber>
112+
<StatHelpText>{d.percentage}%</StatHelpText>
113+
</Stat>
114+
</CircularProgressLabel>
115+
</CircularProgress>
116+
))}
117+
<VStack width="100%" align="left" textAlign="left" gap={2}>
118+
{datas
119+
.filter((d) => d.name !== "All")
120+
.map((d) => (
121+
<HStack alignContent="center">
122+
<Stat textShadow="md" size="xs">
123+
<StatLabel>{d.name}</StatLabel>
124+
<StatNumber>
125+
{d.solved}/{d.total}
126+
</StatNumber>
127+
</Stat>
128+
<Progress
129+
size="lg"
130+
width="100%"
131+
value={d.percentage}
132+
colorScheme={d.scheme}
133+
marginLeft={4}
134+
/>
135+
</HStack>
136+
))}
137+
</VStack>
138+
</HStack>
133139
</Card>
134140
</>
135141
);

‎frontend/src/components/QnDrawer/QnDrawer.component.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import {
1414
} from "@chakra-ui/react";
1515
import { Question } from "../../models/Question.model";
1616
import { ArrowRightIcon } from "@chakra-ui/icons";
17-
import { diffToScheme } from "../../helper/UIHelper";
1817
import { MarkdownViewer } from "../MarkdownVIewer/MarkdownViewer";
18+
import { rangeToScheme } from "../../helper/DifficultyFilterHelper";
1919

2020
interface qnProp {
2121
question: Question;
@@ -47,7 +47,7 @@ export const QnDrawer = (prop: qnProp) => {
4747
<DrawerHeader>
4848
{question.displayedQuestion}
4949
<HStack spacing={2}>
50-
<Tag colorScheme={diffToScheme(question.difficulty)}>
50+
<Tag colorScheme={rangeToScheme(question.difficulty)}>
5151
Difficulty: {question.difficulty}
5252
</Tag>
5353
<Divider orientation="vertical" padding="2"></Divider>

‎frontend/src/components/QnFilter/DifficultyFilter.component.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
import React from "react";
22
import { Flex, Select } from "@chakra-ui/react";
33
import { QnFilter } from "../../models/Question.model";
4-
import { mapDifficultyToRange, mapRangeToDifficulty} from "../../helper/DifficultyFilterHelper"
4+
import {
5+
diffRanges,
6+
difficultyToRange,
7+
} from "../../helper/DifficultyFilterHelper";
58

69
export interface DifficultyFilterProps extends QnFilter {
710
setDifficultyFilter: (difficultyFilter: [number, number]) => void;
811
}
912

1013
export const DifficultyFilter = ({
11-
difficultyFilter = [0, 10],
1214
setDifficultyFilter,
1315
}: DifficultyFilterProps) => {
1416
const handleDifficultyChange = (
1517
event: React.ChangeEvent<HTMLSelectElement>
1618
) => {
1719
const difficulty = event.target.value;
18-
const newDifficultyFilter = mapDifficultyToRange(difficulty);
20+
const newDifficultyFilter = difficultyToRange(difficulty);
1921
setDifficultyFilter(newDifficultyFilter);
2022
};
2123

@@ -24,13 +26,16 @@ export const DifficultyFilter = ({
2426
<Select
2527
variant="outline"
2628
placeholder=""
27-
value={mapRangeToDifficulty(difficultyFilter)}
29+
defaultValue="All"
2830
onChange={handleDifficultyChange}
2931
>
30-
<option value="">All</option>
31-
<option value="Easy">Easy</option>
32-
<option value="Medium">Medium</option>
33-
<option value="Hard">Hard</option>
32+
{diffRanges.map((dr) => {
33+
return (
34+
<option key={dr.difficulty} value={dr.difficulty}>
35+
{dr.difficulty}
36+
</option>
37+
);
38+
})}
3439
</Select>
3540
</Flex>
3641
);

0 commit comments

Comments
 (0)