From 56d96cc037b4f867dbb9685d56d482bdb4ab758c Mon Sep 17 00:00:00 2001 From: Aditi Killedar Date: Sun, 20 Oct 2024 22:02:49 -0400 Subject: [PATCH 01/16] Create test.tsx placeholder for StudentTasks init --- src/pages/StudentTasks/test.tsx | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/pages/StudentTasks/test.tsx diff --git a/src/pages/StudentTasks/test.tsx b/src/pages/StudentTasks/test.tsx new file mode 100644 index 00000000..46c74165 --- /dev/null +++ b/src/pages/StudentTasks/test.tsx @@ -0,0 +1,3 @@ +import { Placeholder } from "react-bootstrap"; + +Placeholder \ No newline at end of file From 7b61dc144acf181c4f17519b8d3d02983f6d2e9e Mon Sep 17 00:00:00 2001 From: sphurthy Date: Sat, 26 Oct 2024 15:31:02 -0400 Subject: [PATCH 02/16] added some dummy data --- package-lock.json | 42 ++++++++++++++++++++--- src/pages/Assignments/Assignment.tsx | 30 +++++++++++----- src/pages/Assignments/dummyData/data.json | 11 ++++++ 3 files changed, 70 insertions(+), 13 deletions(-) create mode 100644 src/pages/Assignments/dummyData/data.json diff --git a/package-lock.json b/package-lock.json index 3ef4561e..510e8922 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,7 @@ "@types/react-router-dom": "^5.3.3", "axios": "^1.4.0", "bootstrap": "^5.3.3", - "chart.js": "^3.7.0", + "chart.js": "^4.1.1", "formik": "^2.2.9", "jquery": "^3.7.1", "jwt-decode": "^3.1.2", @@ -38,7 +38,7 @@ "react-redux": "^8.0.5", "react-router-dom": "^6.11.1", "react-scripts": "^5.0.1", - "recharts": "^2.12.3", + "recharts": "^2.0.0", "redux-persist": "^6.0.0", "sass": "^1.62.1", "save": "^2.9.0", @@ -3045,6 +3045,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@kurkle/color": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", + "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" + }, "node_modules/@leichtgewicht/ip-codec": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz", @@ -5760,9 +5765,15 @@ } }, "node_modules/chart.js": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.0.tgz", - "integrity": "sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg==" + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.5.tgz", + "integrity": "sha512-CVVjg1RYTJV9OCC8WeJPMx8gsV8K6WIyIEQUE3ui4AR9Hfgls9URri6Ja3hyMVBbTF8Q2KFa19PE815gWcWhng==", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=8" + } }, "node_modules/check-types": { "version": "11.2.3", @@ -16603,6 +16614,27 @@ "node": ">= 0.8" } }, + "node_modules/victory-vendor": { + "version": "36.9.2", + "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz", + "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==", + "dependencies": { + "@types/d3-array": "^3.0.3", + "@types/d3-ease": "^3.0.0", + "@types/d3-interpolate": "^3.0.1", + "@types/d3-scale": "^4.0.2", + "@types/d3-shape": "^3.1.0", + "@types/d3-time": "^3.0.0", + "@types/d3-timer": "^3.0.0", + "d3-array": "^3.1.6", + "d3-ease": "^3.0.1", + "d3-interpolate": "^3.0.1", + "d3-scale": "^4.0.2", + "d3-shape": "^3.1.0", + "d3-time": "^3.0.0", + "d3-timer": "^3.0.1" + } + }, "node_modules/void-elements": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", diff --git a/src/pages/Assignments/Assignment.tsx b/src/pages/Assignments/Assignment.tsx index b178162a..a1866bf3 100644 --- a/src/pages/Assignments/Assignment.tsx +++ b/src/pages/Assignments/Assignment.tsx @@ -12,6 +12,7 @@ import Table from "components/Table/Table"; import { alertActions } from "store/slices/alertSlice"; import useAPI from "hooks/useAPI"; +import dummyData from "./dummyData/data.json"; const Assignments = () => { const { error, isLoading, data: assignmentResponse, sendRequest: fetchAssignments } = useAPI(); @@ -32,18 +33,31 @@ const Assignments = () => { }>({ visible: false }); - const fetchData = useCallback(async () => { + // const fetchData = useCallback(async () => { + // try { + // const [assignments, courses] = await Promise.all([ + // fetchAssignments({ url: `/assignments` }), + // fetchCourses({ url: '/courses' }), + // ]); + // // Handle the responses as needed + // } catch (err) { + // // Handle any errors that occur during the fetch + // console.error("Error fetching data:", err); + // } + // }, [fetchAssignments, fetchCourses]); + + // Fetch data from the dummy JSON file + const fetchData = useCallback(() => { try { - const [assignments, courses] = await Promise.all([ - fetchAssignments({ url: `/assignments` }), - fetchCourses({ url: '/courses' }), - ]); - // Handle the responses as needed + // Extract assignments and courses directly from imported dummyData + const assignments = dummyData.assignments; + const courses = dummyData.courses; + + // Process data if needed } catch (err) { - // Handle any errors that occur during the fetch console.error("Error fetching data:", err); } - }, [fetchAssignments, fetchCourses]); + }, []); useEffect(() => { if (!showDeleteConfirmation.visible) { diff --git a/src/pages/Assignments/dummyData/data.json b/src/pages/Assignments/dummyData/data.json new file mode 100644 index 00000000..74226e7d --- /dev/null +++ b/src/pages/Assignments/dummyData/data.json @@ -0,0 +1,11 @@ +{ + "assignments": [ + { "id": 1, "name": "Assignment 1", "course_id": 1 }, + { "id": 2, "name": "Assignment 2", "course_id": 2 } + ], + "courses": [ + { "id": 1, "name": "Course 1" }, + { "id": 2, "name": "Course 2" } + ] + } + \ No newline at end of file From f3584b51ba5415f1e8b22da05ae090c1b95d5db7 Mon Sep 17 00:00:00 2001 From: sphurthy Date: Sat, 26 Oct 2024 15:45:09 -0400 Subject: [PATCH 03/16] added dummy data --- src/pages/Assignments/Assignment.tsx | 30 +++++++++++++++++------ src/pages/Assignments/dummyData/data.json | 11 +++++++++ 2 files changed, 33 insertions(+), 8 deletions(-) create mode 100644 src/pages/Assignments/dummyData/data.json diff --git a/src/pages/Assignments/Assignment.tsx b/src/pages/Assignments/Assignment.tsx index b178162a..a1866bf3 100644 --- a/src/pages/Assignments/Assignment.tsx +++ b/src/pages/Assignments/Assignment.tsx @@ -12,6 +12,7 @@ import Table from "components/Table/Table"; import { alertActions } from "store/slices/alertSlice"; import useAPI from "hooks/useAPI"; +import dummyData from "./dummyData/data.json"; const Assignments = () => { const { error, isLoading, data: assignmentResponse, sendRequest: fetchAssignments } = useAPI(); @@ -32,18 +33,31 @@ const Assignments = () => { }>({ visible: false }); - const fetchData = useCallback(async () => { + // const fetchData = useCallback(async () => { + // try { + // const [assignments, courses] = await Promise.all([ + // fetchAssignments({ url: `/assignments` }), + // fetchCourses({ url: '/courses' }), + // ]); + // // Handle the responses as needed + // } catch (err) { + // // Handle any errors that occur during the fetch + // console.error("Error fetching data:", err); + // } + // }, [fetchAssignments, fetchCourses]); + + // Fetch data from the dummy JSON file + const fetchData = useCallback(() => { try { - const [assignments, courses] = await Promise.all([ - fetchAssignments({ url: `/assignments` }), - fetchCourses({ url: '/courses' }), - ]); - // Handle the responses as needed + // Extract assignments and courses directly from imported dummyData + const assignments = dummyData.assignments; + const courses = dummyData.courses; + + // Process data if needed } catch (err) { - // Handle any errors that occur during the fetch console.error("Error fetching data:", err); } - }, [fetchAssignments, fetchCourses]); + }, []); useEffect(() => { if (!showDeleteConfirmation.visible) { diff --git a/src/pages/Assignments/dummyData/data.json b/src/pages/Assignments/dummyData/data.json new file mode 100644 index 00000000..74226e7d --- /dev/null +++ b/src/pages/Assignments/dummyData/data.json @@ -0,0 +1,11 @@ +{ + "assignments": [ + { "id": 1, "name": "Assignment 1", "course_id": 1 }, + { "id": 2, "name": "Assignment 2", "course_id": 2 } + ], + "courses": [ + { "id": 1, "name": "Course 1" }, + { "id": 2, "name": "Course 2" } + ] + } + \ No newline at end of file From d71c086edeae88e65589ff9013862b0e7a5e9484 Mon Sep 17 00:00:00 2001 From: Aditi Killedar Date: Sat, 26 Oct 2024 20:09:12 -0400 Subject: [PATCH 04/16] Table populated with dummy data, and base structure setup. More changes: - DummyData created - barebones css files created - StudentTaskBox and StudentTaskHome created x contains an error in the StudentTaskBox page, we will be working on that in the next commit. --- package-lock.json | 226 ++++++++++-------- src/layout/Header.tsx | 4 +- src/pages/StudentTasks/StudentTaskHome.tsx | 125 ++++++++++ .../StudentTasks/StudentTasks.module.css | 6 + .../StudentTasks/StudentTasksBox.module.css | 12 + src/pages/StudentTasks/StudentTasksBox.tsx | 48 ++++ src/pages/StudentTasks/test.tsx | 3 - src/pages/StudentTasks/testData.json | 173 ++++++++++++++ 8 files changed, 493 insertions(+), 104 deletions(-) create mode 100644 src/pages/StudentTasks/StudentTaskHome.tsx create mode 100644 src/pages/StudentTasks/StudentTasks.module.css create mode 100644 src/pages/StudentTasks/StudentTasksBox.module.css create mode 100644 src/pages/StudentTasks/StudentTasksBox.tsx delete mode 100644 src/pages/StudentTasks/test.tsx create mode 100644 src/pages/StudentTasks/testData.json diff --git a/package-lock.json b/package-lock.json index 3ef4561e..7575feca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,7 @@ "@types/react-router-dom": "^5.3.3", "axios": "^1.4.0", "bootstrap": "^5.3.3", - "chart.js": "^3.7.0", + "chart.js": "^4.1.1", "formik": "^2.2.9", "jquery": "^3.7.1", "jwt-decode": "^3.1.2", @@ -38,7 +38,7 @@ "react-redux": "^8.0.5", "react-router-dom": "^6.11.1", "react-scripts": "^5.0.1", - "recharts": "^2.12.3", + "recharts": "^2.0.0", "redux-persist": "^6.0.0", "sass": "^1.62.1", "save": "^2.9.0", @@ -3045,6 +3045,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@kurkle/color": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", + "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" + }, "node_modules/@leichtgewicht/ip-codec": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz", @@ -3939,15 +3944,6 @@ "@types/json-schema": "*" } }, - "node_modules/@types/eslint-scope": { - "version": "3.7.7", - "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz", - "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==", - "dependencies": { - "@types/eslint": "*", - "@types/estree": "*" - } - }, "node_modules/@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", @@ -4718,10 +4714,10 @@ "node": ">=0.4.0" } }, - "node_modules/acorn-import-assertions": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", - "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==", + "node_modules/acorn-import-attributes": { + "version": "1.9.5", + "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz", + "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==", "peerDependencies": { "acorn": "^8" } @@ -5187,9 +5183,9 @@ } }, "node_modules/axios": { - "version": "1.6.8", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", - "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "version": "1.7.7", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz", + "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==", "dependencies": { "follow-redirects": "^1.15.6", "form-data": "^4.0.0", @@ -5470,9 +5466,9 @@ "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==" }, "node_modules/body-parser": { - "version": "1.20.2", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz", - "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==", + "version": "1.20.3", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz", + "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==", "dependencies": { "bytes": "3.1.2", "content-type": "~1.0.5", @@ -5482,7 +5478,7 @@ "http-errors": "2.0.0", "iconv-lite": "0.4.24", "on-finished": "2.4.1", - "qs": "6.11.0", + "qs": "6.13.0", "raw-body": "2.5.2", "type-is": "~1.6.18", "unpipe": "1.0.0" @@ -5566,11 +5562,11 @@ } }, "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "dependencies": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" }, "engines": { "node": ">=8" @@ -5760,9 +5756,15 @@ } }, "node_modules/chart.js": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.0.tgz", - "integrity": "sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg==" + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.4.tgz", + "integrity": "sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA==", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=8" + } }, "node_modules/check-types": { "version": "11.2.3", @@ -6096,9 +6098,9 @@ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==" }, "node_modules/cookie": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", - "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz", + "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==", "engines": { "node": ">= 0.6" } @@ -7171,17 +7173,17 @@ } }, "node_modules/encodeurl": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", - "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz", + "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==", "engines": { "node": ">= 0.8" } }, "node_modules/enhanced-resolve": { - "version": "5.16.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz", - "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==", + "version": "5.17.1", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz", + "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==", "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" @@ -8123,36 +8125,36 @@ } }, "node_modules/express": { - "version": "4.19.2", - "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz", - "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==", + "version": "4.21.1", + "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz", + "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "1.20.2", + "body-parser": "1.20.3", "content-disposition": "0.5.4", "content-type": "~1.0.4", - "cookie": "0.6.0", + "cookie": "0.7.1", "cookie-signature": "1.0.6", "debug": "2.6.9", "depd": "2.0.0", - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", - "finalhandler": "1.2.0", + "finalhandler": "1.3.1", "fresh": "0.5.2", "http-errors": "2.0.0", - "merge-descriptors": "1.0.1", + "merge-descriptors": "1.0.3", "methods": "~1.1.2", "on-finished": "2.4.1", "parseurl": "~1.3.3", - "path-to-regexp": "0.1.7", + "path-to-regexp": "0.1.10", "proxy-addr": "~2.0.7", - "qs": "6.11.0", + "qs": "6.13.0", "range-parser": "~1.2.1", "safe-buffer": "5.2.1", - "send": "0.18.0", - "serve-static": "1.15.0", + "send": "0.19.0", + "serve-static": "1.16.2", "setprototypeof": "1.2.0", "statuses": "2.0.1", "type-is": "~1.6.18", @@ -8307,9 +8309,9 @@ } }, "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "dependencies": { "to-regex-range": "^5.0.1" }, @@ -8318,12 +8320,12 @@ } }, "node_modules/finalhandler": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", - "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz", + "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==", "dependencies": { "debug": "2.6.9", - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "on-finished": "2.4.1", "parseurl": "~1.3.3", @@ -11373,9 +11375,12 @@ } }, "node_modules/merge-descriptors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", - "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==" + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz", + "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==", + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } }, "node_modules/merge-stream": { "version": "2.0.0", @@ -11399,11 +11404,11 @@ } }, "node_modules/micromatch": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", - "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dependencies": { - "braces": "^3.0.2", + "braces": "^3.0.3", "picomatch": "^2.3.1" }, "engines": { @@ -12126,9 +12131,9 @@ } }, "node_modules/path-to-regexp": { - "version": "0.1.7", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", - "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==" + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz", + "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==" }, "node_modules/path-type": { "version": "4.0.0", @@ -13688,11 +13693,11 @@ } }, "node_modules/qs": { - "version": "6.11.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", - "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", + "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", "dependencies": { - "side-channel": "^1.0.4" + "side-channel": "^1.0.6" }, "engines": { "node": ">=0.6" @@ -14259,11 +14264,6 @@ "decimal.js-light": "^2.4.1" } }, - "node_modules/recharts/node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - }, "node_modules/recursive-readdir": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz", @@ -14599,9 +14599,9 @@ } }, "node_modules/rollup": { - "version": "2.79.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", - "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", + "version": "2.79.2", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz", + "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==", "bin": { "rollup": "dist/bin/rollup" }, @@ -14885,9 +14885,9 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, "node_modules/send": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz", - "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==", + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz", + "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==", "dependencies": { "debug": "2.6.9", "depd": "2.0.0", @@ -14920,6 +14920,14 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" }, + "node_modules/send/node_modules/encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", + "engines": { + "node": ">= 0.8" + } + }, "node_modules/send/node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -15004,14 +15012,14 @@ } }, "node_modules/serve-static": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz", - "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==", + "version": "1.16.2", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz", + "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==", "dependencies": { - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "parseurl": "~1.3.3", - "send": "0.18.0" + "send": "0.19.0" }, "engines": { "node": ">= 0.8.0" @@ -16603,6 +16611,27 @@ "node": ">= 0.8" } }, + "node_modules/victory-vendor": { + "version": "36.9.2", + "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz", + "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==", + "dependencies": { + "@types/d3-array": "^3.0.3", + "@types/d3-ease": "^3.0.0", + "@types/d3-interpolate": "^3.0.1", + "@types/d3-scale": "^4.0.2", + "@types/d3-shape": "^3.1.0", + "@types/d3-time": "^3.0.0", + "@types/d3-timer": "^3.0.0", + "d3-array": "^3.1.6", + "d3-ease": "^3.0.1", + "d3-interpolate": "^3.0.1", + "d3-scale": "^4.0.2", + "d3-shape": "^3.1.0", + "d3-time": "^3.0.0", + "d3-timer": "^3.0.1" + } + }, "node_modules/void-elements": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", @@ -16681,20 +16710,19 @@ } }, "node_modules/webpack": { - "version": "5.91.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz", - "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==", + "version": "5.95.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz", + "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==", "dependencies": { - "@types/eslint-scope": "^3.7.3", "@types/estree": "^1.0.5", "@webassemblyjs/ast": "^1.12.1", "@webassemblyjs/wasm-edit": "^1.12.1", "@webassemblyjs/wasm-parser": "^1.12.1", "acorn": "^8.7.1", - "acorn-import-assertions": "^1.9.0", + "acorn-import-attributes": "^1.9.5", "browserslist": "^4.21.10", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.16.0", + "enhanced-resolve": "^5.17.1", "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", @@ -16905,9 +16933,9 @@ } }, "node_modules/webpack-dev-server/node_modules/ws": { - "version": "8.16.0", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz", - "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==", + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", + "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", "engines": { "node": ">=10.0.0" }, @@ -17493,9 +17521,9 @@ } }, "node_modules/ws": { - "version": "7.5.9", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz", - "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", + "version": "7.5.10", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz", + "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==", "engines": { "node": ">=8.3.0" }, diff --git a/src/layout/Header.tsx b/src/layout/Header.tsx index 5b278dd8..588e969f 100644 --- a/src/layout/Header.tsx +++ b/src/layout/Header.tsx @@ -143,8 +143,8 @@ const Header: React.FC = () => { )} - - Assignments + + Assignments (StudentTaskHome) Profile diff --git a/src/pages/StudentTasks/StudentTaskHome.tsx b/src/pages/StudentTasks/StudentTaskHome.tsx new file mode 100644 index 00000000..87777063 --- /dev/null +++ b/src/pages/StudentTasks/StudentTaskHome.tsx @@ -0,0 +1,125 @@ +import React, { useState, useEffect, useCallback } from 'react'; +import testData from './testData.json'; +import { useDispatch, useSelector } from 'react-redux'; +import { useNavigate, Link } from 'react-router-dom'; +import { RootState } from 'store/store'; +import StudentTasksBox from './StudentTasksBox'; + +import styles from './StudentTasks.module.css'; + +type Task = { + id: number; + assignment: string; + course: string; + topic: string; + currentStage: string; + reviewGrade: string | { comment: string }; + badges: string | boolean; + stageDeadline: string; + publishingRights: boolean; +}; + +const StudentTasksHome: React.FC = () => { + // init state and hooks + const currUserId = testData.current_user_id; + const dispatch = useDispatch(); + const navigate = useNavigate(); + const auth = useSelector((state: RootState) => state.authentication) + + // states to hold tasks + const taskRevisions = testData.revisions; + const participantTasks = testData.participantTasks; + const [tasks, setTasks] = useState([]); + const dueTasks = testData.dueTasks; + const studentsTeamedWith = testData.studentsTeamedWith; + + function togglePublishingRights(id: number): void { + throw new Error('Function not implemented.'); + } + + useEffect(() => { + // Map the data from participationTasks to the tasks state + const mappedTasks = participantTasks.map(task => ({ + id: task.id, + assignment: task.assignment, + course: task.course, + topic: task.topic, + currentStage: task.current_stage, // Adjust to match your data's structure + reviewGrade: task.review_grade, // Can be a string or an object + badges: task.badges, // Keep as is since it can be string or boolean + stageDeadline: task.stage_deadline, // Adjust to match your data's structure + publishingRights: task.publishing_rights, // Boolean type + })); + + setTasks(mappedTasks); + }, [participantTasks]); + + return ( +
+

Assignments

+
+ +
+ + + + + + + + + {} + + + + + + {tasks.map((task) => ( + + + + + + + {} + + + + ))} + +
AssignmentCourseTopicCurrent StageReview GradeBadges + Stage Deadline + Info + + Publishing Rights + Info +
{task.assignment}{task.course}{task.topic}{task.currentStage} + {task.reviewGrade === "N/A" ? "NA" : + Review Grade + } + {task.badges}{task.stageDeadline} + togglePublishingRights(task.id)} + /> +
+
+
+ + {/* Footer section */} +
+ Help + Papers on Expertiza +
+
+ ); +}; + +export default StudentTasksHome; \ No newline at end of file diff --git a/src/pages/StudentTasks/StudentTasks.module.css b/src/pages/StudentTasks/StudentTasks.module.css new file mode 100644 index 00000000..00145676 --- /dev/null +++ b/src/pages/StudentTasks/StudentTasks.module.css @@ -0,0 +1,6 @@ +/* Sidebar styling */ +.sidebar { + width: 250px; + margin-right: 20px; + padding-top: 20px; +} \ No newline at end of file diff --git a/src/pages/StudentTasks/StudentTasksBox.module.css b/src/pages/StudentTasks/StudentTasksBox.module.css new file mode 100644 index 00000000..fa9f33a4 --- /dev/null +++ b/src/pages/StudentTasks/StudentTasksBox.module.css @@ -0,0 +1,12 @@ +/* Main content area that grows to fill the space */ +.mainContent { + flex-grow: 1; + overflow: hidden; + /* In case the content is too wide */ +} + +/* Styling for the page header */ +.header { + margin-bottom: 20px; + /* Space below the header */ +} \ No newline at end of file diff --git a/src/pages/StudentTasks/StudentTasksBox.tsx b/src/pages/StudentTasks/StudentTasksBox.tsx new file mode 100644 index 00000000..a910f7bd --- /dev/null +++ b/src/pages/StudentTasks/StudentTasksBox.tsx @@ -0,0 +1,48 @@ +import React from 'react' +import styles from './StudentTasksBox.module.css' + +type Revision = { + name: string; + dueDate: string; +} +type StudentsTeamedWith = { + [semester: string]: string[]; +}; +type dueTask = {}; + +interface StudentTasksBoxProps { + participantTasks: dueTask; // might be wrong + revisions: Revision[]; + studentsTeamedWith: StudentsTeamedWith; +} + +const getDaysLeft = (dueString: string) => { + // calc number days left till due date + const today: Date = new Date(); + const dueDate: Date = new Date(dueString); + const timeToDueDate = dueDate.getTime() - today.getTime(); + const daysLeftTillDueDate = Math.ceil(timeToDueDate / (1000 * 60 * 60 * 24)); + if (daysLeftTillDueDate < 0) { return 0 } + else { return daysLeftTillDueDate } +}; + +const StudentTasksBox: React.FC = ({ participantTasks, revisions, studentsTeamedWith }) => { + // calc total number of students teamed up with + let totalStudents = 0; + for (const semester in studentsTeamedWith) { + totalStudents = totalStudents + studentsTeamedWith[semester].length; + } + + // calc number of revisions remaining + const pendingRevisions = revisions.filter(revisions => getDaysLeft(revisions.dueDate) > 0); + + return ( +
+

Due Tasks: {participantTasks}

+

Revisions: {revisions.join(", ")}

+

Total Students Teamed With: {totalStudents}

+
+ ); +}; + +export default StudentTasksBox; \ No newline at end of file diff --git a/src/pages/StudentTasks/test.tsx b/src/pages/StudentTasks/test.tsx deleted file mode 100644 index 46c74165..00000000 --- a/src/pages/StudentTasks/test.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { Placeholder } from "react-bootstrap"; - -Placeholder \ No newline at end of file diff --git a/src/pages/StudentTasks/testData.json b/src/pages/StudentTasks/testData.json new file mode 100644 index 00000000..339e267c --- /dev/null +++ b/src/pages/StudentTasks/testData.json @@ -0,0 +1,173 @@ +{ + "participantTasks": [ + { + "id": 1, + "assignment": "Program 1", + "course": "CSC 517", + "topic": "Ruby", + "current_stage": "In progress", + "review_grade": { + "comment": "40/40" + }, + "badges": false, + "stage_deadline": "2024-02-26 12:00:00 -0500", + "publishing_rights": true, + "participant_id": 1 + }, + { + "id": 2, + "assignment": "Program 2", + "course": "CSC 517", + "topic": "Rails", + "current_stage": "In progress", + "review_grade": "N/A", + "badges": false, + "stage_deadline": "2024-02-26 12:00:00 -0500", + "publishing_rights": false, + "participant_id": 2 + }, + { + "id": 3, + "assignment": "Program 3", + "course": "CSC 517", + "topic": "Git", + "current_stage": "In progress", + "review_grade": "N/A", + "badges": false, + "stage_deadline": "2024-02-26 12:00:00 -0500", + "publishing_rights": false, + "participant_id": 1 + }, + { + "id": 4, + "assignment": "Program 4", + "course": "CSC 517", + "topic": "Reimplementation Backend", + "current_stage": "In progress", + "review_grade": "120/120", + "badges": false, + "stage_deadline": "2024-02-26 12:00:00 -0500", + "publishing_rights": true, + "participant_id": 1 + }, + { + "id": 5, + "assignment": "Program 5", + "course": "CSC 517", + "topic": "Reimplementation Frontend", + "current_stage": "Finished", + "review_grade": "N/A", + "badges": false, + "stage_deadline": "2024-02-26 12:00:00 -0500", + "publishing_rights": false, + "participant_id": 1 + }, + { + "id": 6, + "assignment": "OSS Program 1", + "course": "CSC 517", + "topic": "Reimplementation Frontend", + "current_stage": "Finished", + "review_grade": "N/A", + "badges": false, + "stage_deadline": "2024-02-26 12:00:00 -0500", + "publishing_rights": false, + "participant_id": 1 + }, + { + "id": 7, + "assignment": "OSS Program 2", + "course": "CSC 517", + "topic": "Reimplementation Frontend", + "current_stage": "Finished", + "review_grade": "N/A", + "badges": false, + "stage_deadline": "2024-02-26 12:00:00 -0500", + "publishing_rights": false, + "participant_id": 1 + }, + { + "id": 8, + "assignment": "Program 5", + "course": "CSC 517", + "topic": "Reimplementation Frontend", + "current_stage": "Finished", + "review_grade": "N/A", + "badges": false, + "stage_deadline": "2024-02-26 12:00:00 -0500", + "publishing_rights": true, + "participant_id": 1 + }, + { + "id": 9, + "assignment": "Program 5", + "course": "CSC 517", + "topic": "Reimplementation Frontend", + "current_stage": "Finished", + "review_grade": "N/A", + "badges": false, + "stage_deadline": "2024-02-26 12:00:00 -0500", + "publishing_rights": true, + "participant_id": 1 + } + ], + "courses": [ + { + "id": 1, + "name": "Course3", + "directory_path": "/path/to/course_files", + "info": null, + "private": false, + "created_at": "2024-04-21T23:46:38.633Z", + "updated_at": "2024-04-21T23:46:38.633Z", + "instructor_id": 2, + "institution_id": 1 + }, + { + "id": 4, + "name": "Course4", + "directory_path": "/path/to/course_files", + "info": null, + "private": false, + "created_at": "2024-04-21T23:46:38.633Z", + "updated_at": "2024-04-21T23:46:38.633Z", + "instructor_id": 2, + "institution_id": 1 + } + ], + "dueTasks": [], + "revisions": [ + { + "name": "Program 1", + "dueDate": "2024-03-18" + }, + { + "name": "Program 2", + "dueDate": "2024-03-18" + }, + { + "name": "OSS project", + "dueDate": "2024-03-18" + }, + { + "name": "OSS project 2", + "dueDate": "2024-03-25" + }, + { + "name": "OSS project 3", + "dueDate": "2024-04-28" + } + ], + "studentsTeamedWith": { + "CSC/ECE 517, Fall 2024": [ + "teammate one", + "teammate two", + "teammate three", + "teammate four", + "teammate five", + "teammate six", + "teammate seven" + ] + }, + "current_user_id": 1 +} \ No newline at end of file From 3ca60ebb8ca454f8bcdb9e41a5f0a7840dc4214b Mon Sep 17 00:00:00 2001 From: Aditi Killedar Date: Sat, 26 Oct 2024 20:46:49 -0400 Subject: [PATCH 05/16] Update App.tsx --- src/App.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 27736ba3..4d6e1a1f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -40,6 +40,9 @@ import ViewSubmissions from "pages/Assignments/ViewSubmissions"; import ViewScores from "pages/Assignments/ViewScores"; import ViewReports from "pages/Assignments/ViewReports"; import ViewDelayedJobs from "pages/Assignments/ViewDelayedJobs"; + +import StudentTaskHome from "./pages/StudentTasks/StudentTaskHome"; + function App() { const router = createBrowserRouter([ { @@ -50,6 +53,10 @@ function App() { { index: true, element: } /> }, { path: "login", element: }, { path: "logout", element: } /> }, + { + path: "taskhome", + element: } />, + }, // Add the ViewTeamGrades route { path: "view-team-grades", @@ -192,11 +199,11 @@ function App() { }, { path: "reviews", - element: , + element: , }, { path: "email_the_author", - element: , + element: , }, // Fixed the missing comma and added an opening curly brace { From 88ebc2b9ef6b71a65f52175ff6242cc9e28d2f58 Mon Sep 17 00:00:00 2001 From: sphurthy Date: Sat, 26 Oct 2024 22:17:26 -0400 Subject: [PATCH 06/16] typescript error resolved --- .../StudentTasks/StudentTasksBox.module.css | 52 +++++++++++++-- src/pages/StudentTasks/StudentTasksBox.tsx | 66 +++++++++++++------ 2 files changed, 92 insertions(+), 26 deletions(-) diff --git a/src/pages/StudentTasks/StudentTasksBox.module.css b/src/pages/StudentTasks/StudentTasksBox.module.css index fa9f33a4..20f0ecb2 100644 --- a/src/pages/StudentTasks/StudentTasksBox.module.css +++ b/src/pages/StudentTasks/StudentTasksBox.module.css @@ -1,12 +1,52 @@ /* Main content area that grows to fill the space */ -.mainContent { +/* .mainContent { flex-grow: 1; overflow: hidden; - /* In case the content is too wide */ -} + +} */ /* Styling for the page header */ -.header { +/* .header { margin-bottom: 20px; - /* Space below the header */ -} \ No newline at end of file + +} */ +/* StudentTasksBox.module.css */ + +/* StudentTasksBox.module.css */ + +/* StudentTasksBox.module.css */ + +/* StudentTasksBox.module.css */ + +/* StudentTasksBox.module.css */ + +.container { + display: flex; + flex-direction: column; /* Stack elements vertically */ + align-items: flex-start; + gap: 16px; +} + +.infoBox { + width: 250px; + padding: 16px; + background-color: #f9f9f9; + border: 1px solid #ddd; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.tableContainer { + flex: 1; /* Ensures table takes up remaining width */ +} + +.teamedStudents { + margin-top: 16px; /* Space above the teamed students section */ + padding: 8px; + background-color: #f1f1f1; + border-radius: 8px; + font-size: 1rem; +} + + + diff --git a/src/pages/StudentTasks/StudentTasksBox.tsx b/src/pages/StudentTasks/StudentTasksBox.tsx index a910f7bd..5d66a1ee 100644 --- a/src/pages/StudentTasks/StudentTasksBox.tsx +++ b/src/pages/StudentTasks/StudentTasksBox.tsx @@ -1,48 +1,74 @@ -import React from 'react' -import styles from './StudentTasksBox.module.css' +import React from 'react'; +import styles from './StudentTasksBox.module.css'; type Revision = { name: string; dueDate: string; -} -type StudentsTeamedWith = { - [semester: string]: string[]; }; -type dueTask = {}; + +type DueTask = {}; // Adjust this type as needed interface StudentTasksBoxProps { - participantTasks: dueTask; // might be wrong + participantTasks: DueTask; revisions: Revision[]; studentsTeamedWith: StudentsTeamedWith; } const getDaysLeft = (dueString: string) => { - // calc number days left till due date const today: Date = new Date(); const dueDate: Date = new Date(dueString); const timeToDueDate = dueDate.getTime() - today.getTime(); - const daysLeftTillDueDate = Math.ceil(timeToDueDate / (1000 * 60 * 60 * 24)); - if (daysLeftTillDueDate < 0) { return 0 } - else { return daysLeftTillDueDate } + return Math.ceil(timeToDueDate / (1000 * 60 * 60 * 24)); +}; + +type StudentsTeamedWith = { + [semester: string]: string[]; }; const StudentTasksBox: React.FC = ({ participantTasks, revisions, studentsTeamedWith }) => { - // calc total number of students teamed up with + // Calculate total number of students teamed up with by iterating over each semester let totalStudents = 0; for (const semester in studentsTeamedWith) { - totalStudents = totalStudents + studentsTeamedWith[semester].length; + // Add the number of students in each semester to the total count + totalStudents += studentsTeamedWith[semester].length; } - // calc number of revisions remaining - const pendingRevisions = revisions.filter(revisions => getDaysLeft(revisions.dueDate) > 0); + // Calculate the number of revisions that are still pending (i.e., due date is in the future) + const pendingRevisions = revisions.filter(revision => getDaysLeft(revision.dueDate) > 0); return ( -
-

Due Tasks: {participantTasks}

-

Revisions: {revisions.join(", ")}

-

Total Students Teamed With: {totalStudents}

+
+
+

Task Summary

+

Due Tasks: {String(participantTasks)}

+

Revisions: {pendingRevisions.map(revision => revision.name).join(", ")}

{/* Display only pending revisions */} +
+
+ {/* Render your table here */} + {/* Example: */} +
+ + + + + + + + {/* Assuming participantTasks is an array, replace this with actual data */} + {/* Example placeholder */} + + + + + +
TaskDue Date
Task 12024-10-31
+
+ {/* This div should be below the tableContainer */} +
+

Total Students Teamed With: {totalStudents}

+
); }; -export default StudentTasksBox; \ No newline at end of file +export default StudentTasksBox; From 19860c912fe6822fd7861540c8971dd341e8e431 Mon Sep 17 00:00:00 2001 From: Kruthi Rajeshwar Date: Sun, 27 Oct 2024 11:19:07 -0400 Subject: [PATCH 07/16] Drop downs added --- src/pages/StudentTasks/StudentTaskHome.tsx | 41 +++++++- .../StudentTasks/StudentTasks.module.css | 94 ++++++++++++++++++- 2 files changed, 130 insertions(+), 5 deletions(-) diff --git a/src/pages/StudentTasks/StudentTaskHome.tsx b/src/pages/StudentTasks/StudentTaskHome.tsx index 87777063..959d7796 100644 --- a/src/pages/StudentTasks/StudentTaskHome.tsx +++ b/src/pages/StudentTasks/StudentTaskHome.tsx @@ -32,6 +32,11 @@ const StudentTasksHome: React.FC = () => { const [tasks, setTasks] = useState([]); const dueTasks = testData.dueTasks; const studentsTeamedWith = testData.studentsTeamedWith; + const [filteredTasks, setFilteredTasks] = useState([]); + + const [assignmentFilter, setAssignmentFilter] = useState(''); + const [courseFilter, setCourseFilter] = useState(''); + const [topicFilter, setTopicFilter] = useState(''); function togglePublishingRights(id: number): void { throw new Error('Function not implemented.'); @@ -52,8 +57,18 @@ const StudentTasksHome: React.FC = () => { })); setTasks(mappedTasks); + setFilteredTasks(mappedTasks); }, [participantTasks]); + useEffect(() => { + const filtered = tasks.filter((task) => + (assignmentFilter ? task.assignment === assignmentFilter : true) && + (courseFilter ? task.course === courseFilter : true) && + (topicFilter ? task.topic === topicFilter : true) + ); + setFilteredTasks(filtered); + }, [assignmentFilter, courseFilter, topicFilter, tasks]); + return (

Assignments

@@ -69,9 +84,27 @@ const StudentTasksHome: React.FC = () => { - - - + + + + + + {} @@ -86,7 +119,7 @@ const StudentTasksHome: React.FC = () => { - {tasks.map((task) => ( + {filteredTasks.map((task) => ( diff --git a/src/pages/StudentTasks/StudentTasks.module.css b/src/pages/StudentTasks/StudentTasks.module.css index 00145676..976a8483 100644 --- a/src/pages/StudentTasks/StudentTasks.module.css +++ b/src/pages/StudentTasks/StudentTasks.module.css @@ -3,4 +3,96 @@ width: 250px; margin-right: 20px; padding-top: 20px; -} \ No newline at end of file +} +/* Styles for the assignments table */ +.tasksTable { + width: 100%; + border-collapse: collapse; /* Ensures no extra spacing between table borders */ + margin-top: 1rem; + font-size: 14px; /* Adjust font size */ +} + +.tasksTable th, .tasksTable td { + border: 1px solid #ccc; /* Adds a light gray border around cells */ + padding: 10px 15px; /* Adds padding for better readability */ + text-align: left; /* Align text to the left */ + vertical-align: middle; /* Centers content vertically */ +} + +/* Only apply flex to headers containing dropdowns */ +.tasksTable th.dropdown-header { + display: flex; + align-items: center; /* Centers text and dropdown vertically */ + justify-content: space-between; /* Keeps text and dropdown aligned in row */ +} + +.tasksTable th.dropdown-header select { + margin-left: 5px; /* Adds space between header text and dropdown */ + padding: 5px; /* Adds padding inside the dropdown */ + font-size: 12px; /* Smaller font size for dropdowns */ + vertical-align: middle; /* Aligns dropdown with text */ + min-width: 100px; /* Ensures dropdowns have consistent width */ +} + +.tasksTable th img, .tasksTable td img { + margin-left: 5px; /* Adds space between text and info icon */ + vertical-align: middle; +} + +.tasksTable .centerCheckbox { + text-align: center; /* Center-aligns checkboxes */ +} + +.tasksTable td a { + color: #007acc; /* Adds color to links */ + text-decoration: none; /* Removes underline */ +} + +.tasksTable td a:hover { + text-decoration: underline; /* Adds underline on hover for better UX */ +} + +/* Sidebar styling */ +.sidebar { + width: 250px; + padding: 15px; + border-right: 1px solid #ccc; +} + +/* Main content styling */ +.mainContent { + padding: 15px; + flex: 1; +} + +/* Footer link styling */ +.footerLink { + color: #007acc; + text-decoration: none; + margin-right: 10px; +} + +.footerLink:hover { + text-decoration: underline; +} + +/* General layout adjustments */ +.assignments-page { + display: flex; + flex-direction: column; + align-items: center; +} + +.pageLayout { + display: flex; + width: 90%; /* Adjusts the width to center on page */ + max-width: 1200px; + margin: 0 auto; +} + +.footer { + text-align: center; + margin-top: 20px; + padding: 10px 0; +} + From 2eb2a583c227446a2086e1a5a067b1403430f752 Mon Sep 17 00:00:00 2001 From: Kruthi Rajeshwar Date: Sun, 27 Oct 2024 11:27:49 -0400 Subject: [PATCH 08/16] CSS file updated --- src/pages/StudentTasks/StudentTaskHome.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/StudentTasks/StudentTaskHome.tsx b/src/pages/StudentTasks/StudentTaskHome.tsx index 959d7796..90d9b32d 100644 --- a/src/pages/StudentTasks/StudentTaskHome.tsx +++ b/src/pages/StudentTasks/StudentTaskHome.tsx @@ -155,4 +155,4 @@ const StudentTasksHome: React.FC = () => { ); }; -export default StudentTasksHome; \ No newline at end of file +export default StudentTasksHome; From a2ab2d0b88766d733d018e90336fe2becfbf32bc Mon Sep 17 00:00:00 2001 From: Kruthi Rajeshwar Date: Sun, 27 Oct 2024 19:08:53 -0400 Subject: [PATCH 09/16] Drop down added for current stage --- src/pages/StudentTasks/StudentTaskHome.tsx | 26 ++++++++++++++----- .../StudentTasks/StudentTasks.module.css | 2 +- 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/src/pages/StudentTasks/StudentTaskHome.tsx b/src/pages/StudentTasks/StudentTaskHome.tsx index 90d9b32d..eeac2340 100644 --- a/src/pages/StudentTasks/StudentTaskHome.tsx +++ b/src/pages/StudentTasks/StudentTaskHome.tsx @@ -37,6 +37,7 @@ const StudentTasksHome: React.FC = () => { const [assignmentFilter, setAssignmentFilter] = useState(''); const [courseFilter, setCourseFilter] = useState(''); const [topicFilter, setTopicFilter] = useState(''); + const [currentstageFilter, setCurrentStageFilter] = useState(''); function togglePublishingRights(id: number): void { throw new Error('Function not implemented.'); @@ -64,10 +65,11 @@ const StudentTasksHome: React.FC = () => { const filtered = tasks.filter((task) => (assignmentFilter ? task.assignment === assignmentFilter : true) && (courseFilter ? task.course === courseFilter : true) && - (topicFilter ? task.topic === topicFilter : true) + (topicFilter ? task.topic === topicFilter : true) && + (currentstageFilter ? task.topic == currentstageFilter : true) ); setFilteredTasks(filtered); - }, [assignmentFilter, courseFilter, topicFilter, tasks]); + }, [assignmentFilter, courseFilter, topicFilter, currentstageFilter , tasks]); return (
@@ -84,30 +86,40 @@ const StudentTasksHome: React.FC = () => {
AssignmentCourseTopicAssignmentCourseTopic Current Stage Review GradeBadges
{task.assignment} {task.course}
- + + + + + + + - {} + @@ -152,7 +152,7 @@ const StudentTasksHome: React.FC = () => { {} @@ -169,7 +169,12 @@ const StudentTasksHome: React.FC = () => {
AssignmentAssignment - CourseCourse - TopicTopic - Current StageCurrent Stage + + Review GradeBadgesBadges Stage Deadline Info diff --git a/src/pages/StudentTasks/StudentTasks.module.css b/src/pages/StudentTasks/StudentTasks.module.css index 976a8483..026329d5 100644 --- a/src/pages/StudentTasks/StudentTasks.module.css +++ b/src/pages/StudentTasks/StudentTasks.module.css @@ -22,7 +22,7 @@ /* Only apply flex to headers containing dropdowns */ .tasksTable th.dropdown-header { display: flex; - align-items: center; /* Centers text and dropdown vertically */ + align-items: flex-start; /* Centers text and dropdown vertically */ justify-content: space-between; /* Keeps text and dropdown aligned in row */ } From cfbefef0741bcbaf3a05b28e23baad358e3b7a85 Mon Sep 17 00:00:00 2001 From: Aditi Killedar Date: Sun, 27 Oct 2024 19:15:59 -0400 Subject: [PATCH 10/16] added "studentTeamedWith" under table moved the logic from Box to the Homepage --- src/assets/icons/info.png | Bin 0 -> 477 bytes src/pages/StudentTasks/StudentTaskHome.tsx | 61 +++++++++----- .../StudentTasks/StudentTasks.module.css | 78 ++++++++++++------ .../StudentTasks/StudentTasksBox.module.css | 17 ++-- src/pages/StudentTasks/StudentTasksBox.tsx | 15 ++++ 5 files changed, 121 insertions(+), 50 deletions(-) create mode 100644 src/assets/icons/info.png diff --git a/src/assets/icons/info.png b/src/assets/icons/info.png new file mode 100644 index 0000000000000000000000000000000000000000..358c0b1bba4335f0b20c88172a6800d79b1ea4d3 GIT binary patch literal 477 zcmV<30V4j1P)^nB2j50f{2HLNJKNOGpqs zg(eFL2!bx%x;BbGQBU9x7+si6MjGBgGfq!WT;@SRc(1yur@E>Fla4%413JJ1@GUdH z+tQ5BzpxIx0D;Gzfwgf0XMlYxz%{T9ECDmJ60igGEWeh{dJzWy0qUMZM%$Ecn8aI_ zF!-{?&jDRvAUg#XExlqTsk(yat(w;(!QW$Q{~;|zL;Mqvi%U?mYHpXMEB+iP$}Ys6 zSbkaHM*K!xf{sM&wP{|9E717IA&|vkOIqJGXlN^jtD-VSf)!v0jDS@ { const navigate = useNavigate(); const auth = useSelector((state: RootState) => state.authentication) + type StudentsTeamedWith = { + [semester: string]: string[]; + }; + // states to hold tasks const taskRevisions = testData.revisions; const participantTasks = testData.participantTasks; const [tasks, setTasks] = useState([]); const dueTasks = testData.dueTasks; - const studentsTeamedWith = testData.studentsTeamedWith; + const studentsTeamedWith: StudentsTeamedWith = testData.studentsTeamedWith; const [filteredTasks, setFilteredTasks] = useState([]); const [assignmentFilter, setAssignmentFilter] = useState(''); @@ -42,6 +46,14 @@ const StudentTasksHome: React.FC = () => { throw new Error('Function not implemented.'); } + let totalStudents = 0; + let allStudents: string[] = []; + for (const semester in studentsTeamedWith) { + // Add the number of students in each semester to the total count + totalStudents += studentsTeamedWith[semester].length; + allStudents = allStudents.concat(studentsTeamedWith[semester]); + } + useEffect(() => { // Map the data from participationTasks to the tasks state const mappedTasks = participantTasks.map(task => ({ @@ -61,7 +73,7 @@ const StudentTasksHome: React.FC = () => { }, [participantTasks]); useEffect(() => { - const filtered = tasks.filter((task) => + const filtered = tasks.filter((task) => (assignmentFilter ? task.assignment === assignmentFilter : true) && (courseFilter ? task.course === courseFilter : true) && (topicFilter ? task.topic === topicFilter : true) @@ -73,38 +85,38 @@ const StudentTasksHome: React.FC = () => {

Assignments

- +
+ + {Array.from(new Set(tasks.map(task => task.assignment))).map(assignment => ( + + ))} + + + {Array.from(new Set(tasks.map(task => task.course))).map(course => ( + + ))} + + + {Array.from(new Set(tasks.map(task => task.topic))).map(topic => ( + + ))} + {} @@ -114,6 +126,7 @@ const StudentTasksHome: React.FC = () => { @@ -144,6 +157,16 @@ const StudentTasksHome: React.FC = () => {
Assignment Course Topic Current Stage Review GradeBadges Publishing Rights + Info
+ +
+ +
+

Total Students Teamed With: {totalStudents}

+
    + {allStudents.map((student, index) => ( +
  • {student}
    • + ))} +
{/* Footer section */} diff --git a/src/pages/StudentTasks/StudentTasks.module.css b/src/pages/StudentTasks/StudentTasks.module.css index 976a8483..c2b8890b 100644 --- a/src/pages/StudentTasks/StudentTasks.module.css +++ b/src/pages/StudentTasks/StudentTasks.module.css @@ -1,55 +1,76 @@ /* Sidebar styling */ .sidebar { - width: 250px; - margin-right: 20px; + width: 450px; + margin-right: 50px; padding-top: 20px; } + /* Styles for the assignments table */ .tasksTable { width: 100%; - border-collapse: collapse; /* Ensures no extra spacing between table borders */ + border-collapse: collapse; + /* Ensures no extra spacing between table borders */ margin-top: 1rem; - font-size: 14px; /* Adjust font size */ + font-size: 14px; + /* Adjust font size */ } -.tasksTable th, .tasksTable td { - border: 1px solid #ccc; /* Adds a light gray border around cells */ - padding: 10px 15px; /* Adds padding for better readability */ - text-align: left; /* Align text to the left */ - vertical-align: middle; /* Centers content vertically */ +.tasksTable th, +.tasksTable td { + border: 1px solid #ccc; + /* Adds a light gray border around cells */ + padding: 10px 15px; + /* Adds padding for better readability */ + text-align: left; + /* Align text to the left */ + vertical-align: middle; + /* Centers content vertically */ } /* Only apply flex to headers containing dropdowns */ .tasksTable th.dropdown-header { display: flex; - align-items: center; /* Centers text and dropdown vertically */ - justify-content: space-between; /* Keeps text and dropdown aligned in row */ + align-items: center; + /* Centers text and dropdown vertically */ + justify-content: space-between; + /* Keeps text and dropdown aligned in row */ } .tasksTable th.dropdown-header select { - margin-left: 5px; /* Adds space between header text and dropdown */ - padding: 5px; /* Adds padding inside the dropdown */ - font-size: 12px; /* Smaller font size for dropdowns */ - vertical-align: middle; /* Aligns dropdown with text */ - min-width: 100px; /* Ensures dropdowns have consistent width */ + margin-left: 5px; + /* Adds space between header text and dropdown */ + padding: 5px; + /* Adds padding inside the dropdown */ + font-size: 12px; + /* Smaller font size for dropdowns */ + vertical-align: middle; + /* Aligns dropdown with text */ + min-width: 100px; + /* Ensures dropdowns have consistent width */ } -.tasksTable th img, .tasksTable td img { - margin-left: 5px; /* Adds space between text and info icon */ +.tasksTable th img, +.tasksTable td img { + margin-left: 5px; + /* Adds space between text and info icon */ vertical-align: middle; } .tasksTable .centerCheckbox { - text-align: center; /* Center-aligns checkboxes */ + text-align: center; + /* Center-aligns checkboxes */ } .tasksTable td a { - color: #007acc; /* Adds color to links */ - text-decoration: none; /* Removes underline */ + color: #007acc; + /* Adds color to links */ + text-decoration: none; + /* Removes underline */ } .tasksTable td a:hover { - text-decoration: underline; /* Adds underline on hover for better UX */ + text-decoration: underline; + /* Adds underline on hover for better UX */ } /* Sidebar styling */ @@ -85,7 +106,8 @@ .pageLayout { display: flex; - width: 90%; /* Adjusts the width to center on page */ + width: 90%; + /* Adjusts the width to center on page */ max-width: 1200px; margin: 0 auto; } @@ -96,3 +118,13 @@ padding: 10px 0; } + +.teamedStudents { + margin-top: 16px; + margin: auto; + /* Space above the teamed students section */ + padding: 30px; + background-color: #f1f1f1; + border-radius: 8px; + font-size: 1rem; +} \ No newline at end of file diff --git a/src/pages/StudentTasks/StudentTasksBox.module.css b/src/pages/StudentTasks/StudentTasksBox.module.css index 20f0ecb2..a2d3f233 100644 --- a/src/pages/StudentTasks/StudentTasksBox.module.css +++ b/src/pages/StudentTasks/StudentTasksBox.module.css @@ -22,13 +22,15 @@ .container { display: flex; - flex-direction: column; /* Stack elements vertically */ + flex-direction: column; + /* Stack elements vertically */ align-items: flex-start; gap: 16px; } .infoBox { - width: 250px; + position: sticky; + width: 200px; padding: 16px; background-color: #f9f9f9; border: 1px solid #ddd; @@ -37,16 +39,15 @@ } .tableContainer { - flex: 1; /* Ensures table takes up remaining width */ + flex: 1; + /* Ensures table takes up remaining width */ } .teamedStudents { - margin-top: 16px; /* Space above the teamed students section */ + margin-top: 16px; + /* Space above the teamed students section */ padding: 8px; background-color: #f1f1f1; border-radius: 8px; font-size: 1rem; -} - - - +} \ No newline at end of file diff --git a/src/pages/StudentTasks/StudentTasksBox.tsx b/src/pages/StudentTasks/StudentTasksBox.tsx index 5d66a1ee..0fec62f4 100644 --- a/src/pages/StudentTasks/StudentTasksBox.tsx +++ b/src/pages/StudentTasks/StudentTasksBox.tsx @@ -28,19 +28,29 @@ type StudentsTeamedWith = { const StudentTasksBox: React.FC = ({ participantTasks, revisions, studentsTeamedWith }) => { // Calculate total number of students teamed up with by iterating over each semester let totalStudents = 0; + let allStudents: string[] = []; for (const semester in studentsTeamedWith) { // Add the number of students in each semester to the total count totalStudents += studentsTeamedWith[semester].length; + allStudents = allStudents.concat(studentsTeamedWith[semester]); } // Calculate the number of revisions that are still pending (i.e., due date is in the future) const pendingRevisions = revisions.filter(revision => getDaysLeft(revision.dueDate) > 0); + console.log("participantTasks", participantTasks) + console.log("pendingRevisions", pendingRevisions) + return (

Task Summary

Due Tasks: {String(participantTasks)}

+
    + {/* {participantTasks.map((student, index) => ( +
  • {student}
    • + ))} */} +

Revisions: {pendingRevisions.map(revision => revision.name).join(", ")}

{/* Display only pending revisions */}
@@ -66,6 +76,11 @@ const StudentTasksBox: React.FC = ({ participantTasks, rev {/* This div should be below the tableContainer */}

Total Students Teamed With: {totalStudents}

+
    + {allStudents.map((student, index) => ( +
  • {student}
    • + ))} +
); From 64f59611cbd373901062c275d515701d85aeeb3a Mon Sep 17 00:00:00 2001 From: Aditi Killedar Date: Sun, 27 Oct 2024 21:10:57 -0400 Subject: [PATCH 11/16] added a legend (barebones) --- src/pages/StudentTasks/StudentTaskHome.tsx | 13 +++++++++---- src/pages/StudentTasks/StudentTasksBox.module.css | 9 --------- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/src/pages/StudentTasks/StudentTaskHome.tsx b/src/pages/StudentTasks/StudentTaskHome.tsx index 7b77e971..79e01433 100644 --- a/src/pages/StudentTasks/StudentTaskHome.tsx +++ b/src/pages/StudentTasks/StudentTaskHome.tsx @@ -134,12 +134,12 @@ const StudentTasksHome: React.FC = () => {
Badges Stage Deadline - Info + {/* Info */} Publishing Rights - Info + {/* Info */}
{task.currentStage} {task.reviewGrade === "N/A" ? "NA" : - Review Grade + (task.reviewGrade as any).comment || '' } {task.badges}
- +
+

Legend:

+ Stage Deadline: You can change 'Preferred Time Zone' in 'Profile' in the banner. + Publishing Rights: Grant publishing rights to make my work available to others over the Web" + Review Grade +
diff --git a/src/pages/StudentTasks/StudentTasksBox.module.css b/src/pages/StudentTasks/StudentTasksBox.module.css index a2d3f233..bc9e8104 100644 --- a/src/pages/StudentTasks/StudentTasksBox.module.css +++ b/src/pages/StudentTasks/StudentTasksBox.module.css @@ -41,13 +41,4 @@ .tableContainer { flex: 1; /* Ensures table takes up remaining width */ -} - -.teamedStudents { - margin-top: 16px; - /* Space above the teamed students section */ - padding: 8px; - background-color: #f1f1f1; - border-radius: 8px; - font-size: 1rem; } \ No newline at end of file From d6f8a9a6fd719ddc727c6528f8a7d93a22e339d0 Mon Sep 17 00:00:00 2001 From: Aditi Killedar Date: Sun, 27 Oct 2024 21:35:26 -0400 Subject: [PATCH 12/16] fixed due tasks/revisions in Box (data is not being read so it is showing as empty rn) --- src/pages/StudentTasks/StudentTasksBox.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pages/StudentTasks/StudentTasksBox.tsx b/src/pages/StudentTasks/StudentTasksBox.tsx index 0fec62f4..cd6d0265 100644 --- a/src/pages/StudentTasks/StudentTasksBox.tsx +++ b/src/pages/StudentTasks/StudentTasksBox.tsx @@ -39,7 +39,7 @@ const StudentTasksBox: React.FC = ({ participantTasks, rev const pendingRevisions = revisions.filter(revision => getDaysLeft(revision.dueDate) > 0); console.log("participantTasks", participantTasks) - console.log("pendingRevisions", pendingRevisions) + console.log("revisions", revisions) return (
@@ -50,8 +50,13 @@ const StudentTasksBox: React.FC = ({ participantTasks, rev {/* {participantTasks.map((student, index) => (
  • {student}
    • ))} */} +

    Revisions:

    +
      + {revisions.map((revision, index) => ( +
    • {revision.name}
      • + ))} +
    -

    Revisions: {pendingRevisions.map(revision => revision.name).join(", ")}

    {/* Display only pending revisions */}
    {/* Render your table here */} @@ -82,7 +87,7 @@ const StudentTasksBox: React.FC = ({ participantTasks, rev ))}
    -
    + ); }; From cb41f5e84ce93b9ef813225be813c3f523fd2712 Mon Sep 17 00:00:00 2001 From: Aditi Killedar Date: Mon, 28 Oct 2024 15:22:15 -0400 Subject: [PATCH 13/16] added rightSidebar, cleaned up title by formatting it to fit the box --- src/pages/StudentTasks/StudentTaskHome.tsx | 12 +++++++----- src/pages/StudentTasks/StudentTasks.module.css | 12 +++++++++++- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/pages/StudentTasks/StudentTaskHome.tsx b/src/pages/StudentTasks/StudentTaskHome.tsx index 79e01433..f3e447f6 100644 --- a/src/pages/StudentTasks/StudentTaskHome.tsx +++ b/src/pages/StudentTasks/StudentTaskHome.tsx @@ -85,9 +85,10 @@ const StudentTasksHome: React.FC = () => { return (
    -

    Assignments

    + {/*

    Assignments

    */}
    -
    +
    +

    Assignments

    {
    -
    +

    Legend:

    - Stage Deadline: You can change 'Preferred Time Zone' in 'Profile' in the banner. - Publishing Rights: Grant publishing rights to make my work available to others over the Web" + Stage Deadline: You can change 'Preferred Time Zone' in 'Profile' in the banner. +

    + Publishing Rights: Grant publishing rights to make my work available to others over the Web" Review Grade
    diff --git a/src/pages/StudentTasks/StudentTasks.module.css b/src/pages/StudentTasks/StudentTasks.module.css index f7ad378b..5356e6b8 100644 --- a/src/pages/StudentTasks/StudentTasks.module.css +++ b/src/pages/StudentTasks/StudentTasks.module.css @@ -74,12 +74,18 @@ } /* Sidebar styling */ -.sidebar { +.leftSidebar { width: 250px; padding: 15px; border-right: 1px solid #ccc; } +.rightSidebar { + width: 250px; + padding: 15px; + border-left: 1px solid #ccc; +} + /* Main content styling */ .mainContent { padding: 15px; @@ -104,6 +110,10 @@ align-items: center; } +.table-legend { + display: flex; +} + .pageLayout { display: flex; width: 90%; From 5fd339e6855225fc7a03dceb08f4666f77d460df Mon Sep 17 00:00:00 2001 From: Aditi Killedar Date: Mon, 28 Oct 2024 16:29:19 -0400 Subject: [PATCH 14/16] sidebar completed - added css to match original expertiza color scheme - separated revisions, due tasks and teammate information into separate boxes for clarity - touched up on the css for the legend of the table --- src/pages/StudentTasks/StudentTaskHome.tsx | 15 ++-- .../StudentTasks/StudentTasks.module.css | 10 ++- .../StudentTasks/StudentTasksBox.module.css | 62 ++++++------- src/pages/StudentTasks/StudentTasksBox.tsx | 87 ++++++++++--------- 4 files changed, 96 insertions(+), 78 deletions(-) diff --git a/src/pages/StudentTasks/StudentTaskHome.tsx b/src/pages/StudentTasks/StudentTaskHome.tsx index f3e447f6..6cd78234 100644 --- a/src/pages/StudentTasks/StudentTaskHome.tsx +++ b/src/pages/StudentTasks/StudentTaskHome.tsx @@ -33,6 +33,8 @@ const StudentTasksHome: React.FC = () => { // states to hold tasks const taskRevisions = testData.revisions; const participantTasks = testData.participantTasks; + console.log("participantTasks", participantTasks) + const [tasks, setTasks] = useState([]); const dueTasks = testData.dueTasks; const studentsTeamedWith: StudentsTeamedWith = testData.studentsTeamedWith; @@ -73,6 +75,8 @@ const StudentTasksHome: React.FC = () => { setFilteredTasks(mappedTasks); }, [participantTasks]); + console.log("after use effect:", participantTasks) + useEffect(() => { const filtered = tasks.filter((task) => (assignmentFilter ? task.assignment === assignmentFilter : true) && @@ -90,7 +94,7 @@ const StudentTasksHome: React.FC = () => {

    Assignments

    @@ -171,22 +175,23 @@ const StudentTasksHome: React.FC = () => {
    -

    Legend:

    +



    +

    Legend

    Stage Deadline: You can change 'Preferred Time Zone' in 'Profile' in the banner. -

    +



    Publishing Rights: Grant publishing rights to make my work available to others over the Web" Review Grade
    -
    + {/*

    Total Students Teamed With: {totalStudents}

      {allStudents.map((student, index) => (
    • {student}
      • ))}
    -
    +
    */} {/* Footer section */}
    diff --git a/src/pages/StudentTasks/StudentTasks.module.css b/src/pages/StudentTasks/StudentTasks.module.css index 5356e6b8..dc93978a 100644 --- a/src/pages/StudentTasks/StudentTasks.module.css +++ b/src/pages/StudentTasks/StudentTasks.module.css @@ -77,13 +77,19 @@ .leftSidebar { width: 250px; padding: 15px; - border-right: 1px solid #ccc; + background-color: antiquewhite; + border-right: 2px solid rgba(157, 27, 27, 0.267); + border-left: 2px solid rgba(157, 27, 27, 0.267); } .rightSidebar { + position: relative; + text-align: start; width: 250px; padding: 15px; - border-left: 1px solid #ccc; + border-left: 1px solid #e0b4b4; + border-right: 1px solid #e0b4b4; + background-color: rgba(250, 235, 215, 0.412); } /* Main content styling */ diff --git a/src/pages/StudentTasks/StudentTasksBox.module.css b/src/pages/StudentTasks/StudentTasksBox.module.css index bc9e8104..92e2169d 100644 --- a/src/pages/StudentTasks/StudentTasksBox.module.css +++ b/src/pages/StudentTasks/StudentTasksBox.module.css @@ -1,44 +1,46 @@ -/* Main content area that grows to fill the space */ -/* .mainContent { - flex-grow: 1; - overflow: hidden; - -} */ - -/* Styling for the page header */ -/* .header { - margin-bottom: 20px; - -} */ -/* StudentTasksBox.module.css */ - -/* StudentTasksBox.module.css */ - -/* StudentTasksBox.module.css */ - -/* StudentTasksBox.module.css */ - -/* StudentTasksBox.module.css */ - .container { display: flex; flex-direction: column; - /* Stack elements vertically */ align-items: flex-start; gap: 16px; + background-color: #fff8f0; + /* Light beige background */ + padding: 16px; + border-radius: 12px; } .infoBox { position: sticky; - width: 200px; + width: 100%; padding: 16px; - background-color: #f9f9f9; - border: 1px solid #ddd; + background-color: #fff; + border: 1px solid rgba(200, 50, 50, 0.2); + word-wrap: break-word; + /* Soft red */ border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + color: #5a5a5a; +} + +.infoBox p { + margin: 8px 0; + font-weight: bold; + color: #9d1b1b; + /* Deep red text for headers */ +} + +.infoBox ul { + padding-left: 20px; +} + +.teamedStudents { + margin-top: 12px; + font-size: 0.9rem; } -.tableContainer { - flex: 1; - /* Ensures table takes up remaining width */ +h2 { + font-size: 1.5rem; + color: #9d1b1b; + /* Deep red for headings */ + margin-bottom: 8px; } \ No newline at end of file diff --git a/src/pages/StudentTasks/StudentTasksBox.tsx b/src/pages/StudentTasks/StudentTasksBox.tsx index cd6d0265..25988190 100644 --- a/src/pages/StudentTasks/StudentTasksBox.tsx +++ b/src/pages/StudentTasks/StudentTasksBox.tsx @@ -6,10 +6,24 @@ type Revision = { dueDate: string; }; -type DueTask = {}; // Adjust this type as needed +type ReviewGrade = { + comment: string; +}; + +type Task = { + id: number; + assignment: string; + course: string; + topic: string; + currentStage: string; + reviewGrade: string | { comment: string }; + badges: string | boolean; + stageDeadline: string; + publishingRights: boolean; +}; interface StudentTasksBoxProps { - participantTasks: DueTask; + participantTasks: Task[]; revisions: Revision[]; studentsTeamedWith: StudentsTeamedWith; } @@ -38,57 +52,48 @@ const StudentTasksBox: React.FC = ({ participantTasks, rev // Calculate the number of revisions that are still pending (i.e., due date is in the future) const pendingRevisions = revisions.filter(revision => getDaysLeft(revision.dueDate) > 0); - console.log("participantTasks", participantTasks) - console.log("revisions", revisions) + const dueTasks = participantTasks.filter(task => getDaysLeft(task.stageDeadline) <= 0); + + console.log("participantTasks2", participantTasks) + // console.log("revisions", revisions) return (
    +

    Task Summary

    -

    Task Summary

    -

    Due Tasks: {String(participantTasks)}

    +

    Due:

      - {/* {participantTasks.map((student, index) => ( -
    • {student}
      • - ))} */} -

      Revisions:

      -
        - {revisions.map((revision, index) => ( -
      • {revision.name}
        • - ))} -
      + {dueTasks.map(task => ( +
    • + {task.assignment} ({task.course}) - Due: {task.stageDeadline} +
      • + ))}
    -
    - {/* Render your table here */} - {/* Example: */} -
    - - - - - - - - {/* Assuming participantTasks is an array, replace this with actual data */} - {/* Example placeholder */} - - - - - -
    TaskDue Date
    Task 12024-10-31
    -
    - {/* This div should be below the tableContainer */} -
    -

    Total Students Teamed With: {totalStudents}

    + + +
    +

    Revisions:

      - {allStudents.map((student, index) => ( -
    • {student}
      • + {revisions.map((revision, index) => ( +
    • {revision.name}
      • ))}
    -
    + +
    +
    +

    Total Students Teamed With: {totalStudents}

    +
      + {allStudents.map((student, index) => ( +
    • {student}
      • + ))} +
    +
    +
    +
    ); + }; export default StudentTasksBox; From 0292624c0761a075f6680d63d6e3e24c558e6e75 Mon Sep 17 00:00:00 2001 From: Aditi Killedar Date: Mon, 28 Oct 2024 16:53:48 -0400 Subject: [PATCH 15/16] adjusted css to make page more responsive --- .../StudentTasks/StudentTasks.module.css | 16 +++++-- .../StudentTasks/StudentTasksBox.module.css | 6 +++ src/pages/StudentTasks/StudentTasksBox.tsx | 42 +++++++++++++------ src/pages/StudentTasks/testData.json | 40 +++++++++--------- 4 files changed, 67 insertions(+), 37 deletions(-) diff --git a/src/pages/StudentTasks/StudentTasks.module.css b/src/pages/StudentTasks/StudentTasks.module.css index dc93978a..d64bef16 100644 --- a/src/pages/StudentTasks/StudentTasks.module.css +++ b/src/pages/StudentTasks/StudentTasks.module.css @@ -120,14 +120,22 @@ display: flex; } +/* .pageLayout { + display: flex; + width: 100%; + max-width: 98%; + margin: 10 auto; +} */ + .pageLayout { display: flex; - width: 90%; - /* Adjusts the width to center on page */ - max-width: 1200px; - margin: 0 auto; + flex-wrap: wrap; + /* Allows items to wrap to the next line */ + justify-content: space-between; + /* Distributes space between items */ } + .footer { text-align: center; margin-top: 20px; diff --git a/src/pages/StudentTasks/StudentTasksBox.module.css b/src/pages/StudentTasks/StudentTasksBox.module.css index 92e2169d..cda4a458 100644 --- a/src/pages/StudentTasks/StudentTasksBox.module.css +++ b/src/pages/StudentTasks/StudentTasksBox.module.css @@ -29,6 +29,12 @@ /* Deep red text for headers */ } +.infoBox h5 { + margin: 8px 0; + color: #c31f1f; + /* Deep red text for headers */ +} + .infoBox ul { padding-left: 20px; } diff --git a/src/pages/StudentTasks/StudentTasksBox.tsx b/src/pages/StudentTasks/StudentTasksBox.tsx index 25988190..2878bb56 100644 --- a/src/pages/StudentTasks/StudentTasksBox.tsx +++ b/src/pages/StudentTasks/StudentTasksBox.tsx @@ -52,28 +52,44 @@ const StudentTasksBox: React.FC = ({ participantTasks, rev // Calculate the number of revisions that are still pending (i.e., due date is in the future) const pendingRevisions = revisions.filter(revision => getDaysLeft(revision.dueDate) > 0); - const dueTasks = participantTasks.filter(task => getDaysLeft(task.stageDeadline) <= 0); + const dueTasks = participantTasks.filter(task => getDaysLeft(task.stageDeadline) > 0); + + // Group tasks by course + const tasksByCourse: { [key: string]: typeof participantTasks } = {}; + + dueTasks.forEach(task => { + const courseName = task.course; + + if (!tasksByCourse[courseName]) { + tasksByCourse[courseName] = []; + } + + tasksByCourse[courseName].push(task); + }); - console.log("participantTasks2", participantTasks) - // console.log("revisions", revisions) return (

    Task Summary

    -

    Due:

    -
      - {dueTasks.map(task => ( -
    • - {task.assignment} ({task.course}) - Due: {task.stageDeadline} -
      • - ))} -
    +
    Due:
    + {Object.entries(tasksByCourse).map(([course, tasks]) => ( +
    +

    {course}

    +
      + {tasks.map(task => ( +
    • + {task.assignment} - Due: {task.stageDeadline} +
      • + ))} +
    +
    + ))}
    -

    Revisions:

    +
    Revisions:
      {revisions.map((revision, index) => (
    • {revision.name}
      • @@ -83,7 +99,7 @@ const StudentTasksBox: React.FC = ({ participantTasks, rev
      -

      Total Students Teamed With: {totalStudents}

      +
      Total Students Teamed With: {totalStudents}
        {allStudents.map((student, index) => (
      • {student}
        • diff --git a/src/pages/StudentTasks/testData.json b/src/pages/StudentTasks/testData.json index 339e267c..d10bfd58 100644 --- a/src/pages/StudentTasks/testData.json +++ b/src/pages/StudentTasks/testData.json @@ -10,19 +10,19 @@ "comment": "40/40" }, "badges": false, - "stage_deadline": "2024-02-26 12:00:00 -0500", + "stage_deadline": "2024-10-15 12:00:00 -0500", "publishing_rights": true, "participant_id": 1 }, { "id": 2, "assignment": "Program 2", - "course": "CSC 517", + "course": "CSC 505", "topic": "Rails", "current_stage": "In progress", "review_grade": "N/A", "badges": false, - "stage_deadline": "2024-02-26 12:00:00 -0500", + "stage_deadline": "2024-11-01 12:00:00 -0500", "publishing_rights": false, "participant_id": 2 }, @@ -34,7 +34,7 @@ "current_stage": "In progress", "review_grade": "N/A", "badges": false, - "stage_deadline": "2024-02-26 12:00:00 -0500", + "stage_deadline": "2024-10-30 12:00:00 -0500", "publishing_rights": false, "participant_id": 1 }, @@ -46,19 +46,19 @@ "current_stage": "In progress", "review_grade": "120/120", "badges": false, - "stage_deadline": "2024-02-26 12:00:00 -0500", + "stage_deadline": "2024-11-05 12:00:00 -0500", "publishing_rights": true, "participant_id": 1 }, { "id": 5, - "assignment": "Program 5", - "course": "CSC 517", - "topic": "Reimplementation Frontend", + "assignment": "Greedy Algorithms", + "course": "CSC 505", + "topic": "Algorithm Basics", "current_stage": "Finished", "review_grade": "N/A", "badges": false, - "stage_deadline": "2024-02-26 12:00:00 -0500", + "stage_deadline": "2024-11-20 12:00:00 -0500", "publishing_rights": false, "participant_id": 1 }, @@ -70,7 +70,7 @@ "current_stage": "Finished", "review_grade": "N/A", "badges": false, - "stage_deadline": "2024-02-26 12:00:00 -0500", + "stage_deadline": "2024-11-15 12:00:00 -0500", "publishing_rights": false, "participant_id": 1 }, @@ -82,31 +82,31 @@ "current_stage": "Finished", "review_grade": "N/A", "badges": false, - "stage_deadline": "2024-02-26 12:00:00 -0500", + "stage_deadline": "2024-10-28 12:00:00 -0500", "publishing_rights": false, "participant_id": 1 }, { "id": 8, - "assignment": "Program 5", + "assignment": "Program 6", "course": "CSC 517", "topic": "Reimplementation Frontend", "current_stage": "Finished", "review_grade": "N/A", "badges": false, - "stage_deadline": "2024-02-26 12:00:00 -0500", + "stage_deadline": "2024-11-10 12:00:00 -0500", "publishing_rights": true, "participant_id": 1 }, { "id": 9, - "assignment": "Program 5", + "assignment": "Program 7", "course": "CSC 517", "topic": "Reimplementation Frontend", "current_stage": "Finished", "review_grade": "N/A", "badges": false, - "stage_deadline": "2024-02-26 12:00:00 -0500", + "stage_deadline": "2024-11-20 12:00:00 -0500", "publishing_rights": true, "participant_id": 1 } @@ -139,23 +139,23 @@ "revisions": [ { "name": "Program 1", - "dueDate": "2024-03-18" + "dueDate": "2024-10-05" }, { "name": "Program 2", - "dueDate": "2024-03-18" + "dueDate": "2024-10-15" }, { "name": "OSS project", - "dueDate": "2024-03-18" + "dueDate": "2024-11-01" }, { "name": "OSS project 2", - "dueDate": "2024-03-25" + "dueDate": "2024-11-10" }, { "name": "OSS project 3", - "dueDate": "2024-04-28" + "dueDate": "2024-11-20" } ], "studentsTeamedWith": { From aff6b2d9be16dca8435564d6830fd74a87b7aa50 Mon Sep 17 00:00:00 2001 From: sphurthy Date: Tue, 29 Oct 2024 11:04:20 -0400 Subject: [PATCH 16/16] made alignment changes to the table --- src/pages/StudentTasks/StudentTaskHome.tsx | 148 +++++++++++---------- 1 file changed, 75 insertions(+), 73 deletions(-) diff --git a/src/pages/StudentTasks/StudentTaskHome.tsx b/src/pages/StudentTasks/StudentTaskHome.tsx index 6cd78234..3a86e6df 100644 --- a/src/pages/StudentTasks/StudentTaskHome.tsx +++ b/src/pages/StudentTasks/StudentTaskHome.tsx @@ -100,79 +100,81 @@ const StudentTasksHome: React.FC = () => { />
      - - - - - - - - - - - - - - - {filteredTasks.map((task) => ( - - - - - - - {} - - - - ))} - -
      Assignment - - Course - - Topic - - Current Stage - - Review GradeBadges - Stage Deadline - {/* Info */} - - Publishing Rights - - {/* Info */} -
      {task.assignment}{task.course}{task.topic}{task.currentStage} - {task.reviewGrade === "N/A" ? "NA" : - (task.reviewGrade as any).comment || '' - } - {task.badges}{task.stageDeadline} - togglePublishingRights(task.id)} - /> -
      + + + + + + + + + + + + + + + {filteredTasks.map((task) => ( + + + + + + + {} + + + + ))} + +
      + Assignment + + + Course + + + Topic + + + Current Stage + + Review GradeBadges + Stage Deadline + + Publishing Rights +
      {task.assignment}{task.course}{task.topic}{task.currentStage} + {task.reviewGrade === "N/A" ? "NA" : + (task.reviewGrade as any).comment || '' + } + {task.badges}{task.stageDeadline} + togglePublishingRights(task.id)} + /> +
      +