From ecd11d7c070d489ab79a01e933a82f110c3e603d Mon Sep 17 00:00:00 2001 From: Jae Young Ahn Date: Tue, 22 Apr 2025 12:05:41 -0700 Subject: [PATCH] modified assignment page --- src/pages/AssignmentPage.jsx | 154 +++++++++++----- src/scss/components/_assignment.scss | 254 ++++++++++++++++++--------- 2 files changed, 282 insertions(+), 126 deletions(-) diff --git a/src/pages/AssignmentPage.jsx b/src/pages/AssignmentPage.jsx index 2f24da7..5bd8855 100644 --- a/src/pages/AssignmentPage.jsx +++ b/src/pages/AssignmentPage.jsx @@ -2,6 +2,10 @@ import React, { useState } from "react"; import "../scss/components/_assignment.scss"; const AssignmentPage = () => { + const [studentName, setStudentName] = useState(""); + const [campID, setCampID] = useState(""); + const [programID, setProgramID] = useState(""); + const [password, setPassword] = useState(""); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [file, setFile] = useState(null); @@ -9,34 +13,54 @@ const AssignmentPage = () => { const [showModal, setShowModal] = useState(false); const [editingIndex, setEditingIndex] = useState(null); - const handleSubmit = async (e) => { + const resetForm = () => { + setStudentName(""); + setCampID(""); + setProgramID(""); + setPassword(""); + setTitle(""); + setDescription(""); + setFile(null); + setEditingIndex(null); + }; + + const handleSubmit = (e) => { e.preventDefault(); - const formData = new FormData(); - formData.append("title", title); - formData.append("description", description); - formData.append("file", file); + const newProject = { + studentName, + campID, + programID, + title, + description, + fileName: file ? file.name : null, + }; - try { - const res = await fetch("/api/assignments", { - method: "POST", - body: formData, - }); - - if (res.ok) { - alert("Successfully Uploaded!"); - setProjects([...projects, { title, description }]); - setTitle(""); - setDescription(""); - setFile(null); - setShowModal(false); - } else { - alert("Fail Uploading!"); - } - } catch (err) { - console.error(err); - alert("Server Error!"); + if (editingIndex !== null) { + // Edit mode: update the project at the index + const updatedProjects = [...projects]; + updatedProjects[editingIndex] = newProject; + setProjects(updatedProjects); + } else { + // New submission + setProjects([...projects, newProject]); } + + alert(editingIndex !== null ? "Assignment updated!" : "Assignment submitted!"); + resetForm(); + setShowModal(false); + }; + + const handleEdit = (index) => { + const project = projects[index]; + setStudentName(project.studentName); + setCampID(project.campID); + setProgramID(project.programID); + setTitle(project.title); + setDescription(project.description); + setFile(null); // File can't be set again for editing, usually. You could add note about this. + setEditingIndex(index); + setShowModal(true); }; const handleDelete = (index) => { @@ -47,13 +71,53 @@ const AssignmentPage = () => { return (

📘 Assignments

- + {showModal && (

{editingIndex !== null ? "Edit Assignment" : "New Assignment"}

-
+ +
+ + setStudentName(e.target.value)} + required + /> +
+ +
+ + setCampID(e.target.value)} + required + /> +
+ +
+ + setProgramID(e.target.value)} + required + /> +
+ +
+ + setPassword(e.target.value)} + required + /> +
+
{
- + setFile(e.target.files[0])} - required />
- + - -
- ))} +

📋 Projects

+ {projects.map((project, index) => ( +
+
+ Student Name: {project.studentName} | CampID: {project.campID} | ProgramID: {project.programID}
+

{project.title}

+

{project.description}

+ {project.fileName && ( +

Uploaded File: {project.fileName}

+ )} + +
+ + + +
+
+ ))} +
+
); }; diff --git a/src/scss/components/_assignment.scss b/src/scss/components/_assignment.scss index 42a5298..30b3856 100644 --- a/src/scss/components/_assignment.scss +++ b/src/scss/components/_assignment.scss @@ -45,106 +45,190 @@ } .project-list { - margin-top: 30px; - + margin-top: 2rem; + .project-item { - border: 1px solid #ddd; - padding: 12px; - margin-bottom: 10px; - border-radius: 6px; - background-color: #f9f9f9; - - h4 { - margin: 0 0 5px 0; - } - - button { - margin-right: 10px; - padding: 6px 10px; - border: none; - border-radius: 4px; - cursor: pointer; - - &:first-of-type { - background-color: #ffa500; - color: white; - - &:hover { - background-color: #e59400; - } + background: #ffffff; + border: 1px solid #e0e0e0; + border-radius: 12px; + padding: 1.5rem; + margin-bottom: 1.5rem; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); + transition: transform 0.2s ease, box-shadow 0.2s ease; + + // &:hover { + // transform: translateY(-2px); + // box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); + // } + + .project-meta { + justify-content: space-between; + align-items: center; + margin-bottom: 0.75rem; + flex-wrap: wrap; + + strong { + color: #34495e; } - - &:last-of-type { - background-color: #e74c3c; - color: white; - + } + + h4 { + margin: 0.5rem 0; + font-size: 1.2rem; + color: #2d3436; + } + + p { + margin: 0.25rem 0; + color: #555; + line-height: 1.4; + + strong { + color: #2d3436; + } + } + + .action-buttons { + display: flex; + gap: 0.5rem; + margin-top: 0.75rem; + + button { + background-color: #f4f4f4; + border: 1px solid #ddd; + border-radius: 6px; + padding: 0.4rem 0.8rem; + cursor: pointer; + font-size: 0.9rem; + transition: background-color 0.2s ease; + &:hover { - background-color: #c0392b; + background-color: #e9ecef; + } + + &:nth-child(1) { + color: #2c3e50; + } + + &:nth-child(2) { + color: #c0392b; + } + + &:nth-child(3) { + color: #16a085; } } } } } + .modal-overlay { position: fixed; top: 0; left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; - - .modal { - background: white; - padding: 20px; - border-radius: 10px; - width: 300px; - - h3 { - margin-bottom: 10px; - } - - input, - textarea { - width: 100%; - margin-bottom: 10px; - padding: 8px; - border: 1px solid #ccc; - border-radius: 4px; - } - - .modal-buttons { - display: flex; - justify-content: space-between; - - button { - padding: 6px 12px; - border: none; - border-radius: 4px; - cursor: pointer; - - &:first-of-type { - background-color: #28a745; - color: white; - - &:hover { - background-color: #218838; - } - } - - &:last-of-type { - background-color: #6c757d; - color: white; - - &:hover { - background-color: #5a6268; - } - } - } - } + z-index: 1000; + } + + .modal { + background: #fff; + padding: 2rem; + border-radius: 12px; + max-width: 500px; + width: 100%; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); + animation: fadeIn 0.3s ease; + } + + .modal h3 { + margin-bottom: 1rem; + font-size: 1.5rem; + font-weight: 600; + color: #333; + } + + .modal form > div { + margin-bottom: 1rem; + } + + .modal label { + display: block; + font-size: 0.9rem; + font-weight: 500; + margin-bottom: 0.4rem; + color: #555; + } + + .modal input[type="text"], + .modal input[type="password"], + .modal input[type="file"], + .modal textarea { + width: 100%; + padding: 0.6rem 0.8rem; + border: 1px solid #ccc; + border-radius: 6px; + font-size: 0.95rem; + transition: border-color 0.2s ease; + + &:focus { + border-color: #007bff; + outline: none; } } -} + + .modal textarea { + resize: vertical; + min-height: 80px; + } + + .modal-buttons { + display: flex; + justify-content: flex-end; + gap: 1rem; + margin-top: 1.5rem; + } + + .modal-buttons button { + padding: 0.6rem 1.2rem; + font-size: 0.95rem; + border: none; + border-radius: 6px; + cursor: pointer; + transition: background 0.2s ease; + } + + .modal-buttons button[type="submit"] { + background-color: #ff4b2b; + color: #fff; + + &:hover { + background-color: #FF2600; + } + } + + .modal-buttons button[type="button"] { + background-color: #e0e0e0; + color: #333; + + &:hover { + background-color: #cfcfcf; + } + } + + @keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } + } +} \ No newline at end of file