Cleanup old code

Author: Alexandra Zwinger

src/components/ModuleProgressSettings.tsx

@@ -91,14 +91,15 @@ const ModuleProgressSettings: React.FC<ModalProps> = ({isOpen, onClose}) => {
 
     return (
         <div className="modal-overlay" onClick={onClose}>
-            <div className="modal-content min-w-[300px] w-[650px] max-w-[90%]" onClick={(e) => e.stopPropagation()}>
-                <p className="text-2xl font-bold text-white text-left mt-3 ml-3 mb-2">
+            <div className="modal-content p-8 min-w-[300px] w-[650px] overflow-y-scroll  max-h-[80%] max-w-[90%]"
+                 onClick={(e) => e.stopPropagation()}>
+                <p className="text-2xl font-bold text-white text-left sm:ml-3">
                     Lernfortschritt
                 </p>
                 {chapters.map((chapter) => (
                     <div key={chapter.id}>
-                        <div className="flex gap-4 items-center mt-2 ml-3 mb-4">
-                            <p className="text-xl text-white text-left">
+                        <div className="flex gap-4 items-center mt-2 sm:ml-3 mb-4">
+                            <p className="sm:text-xl text-lg text-white text-left">
                                 {chapter.title}
                             </p>
                             <button
@@ -109,7 +110,7 @@ const ModuleProgressSettings: React.FC<ModalProps> = ({isOpen, onClose}) => {
                                 x
                             </button>
                         </div>
-                        <div className="checkbox-group ml-8 mb-4">
+                        <div className="checkbox-group sm:ml-8 mb-4">
                             {chapter.checkboxes.map((checkbox) => (
                                 <div key={checkbox.id} className="checkbox-item w-[65%]">
                                     <input
@@ -150,7 +151,7 @@ const ModuleProgressSettings: React.FC<ModalProps> = ({isOpen, onClose}) => {
                             ))}
                         </div>
 
-                        <div className="add-checkbox-container">
+                        <div className="add-checkbox-container sm:ml-8">
                             <button
                                 className="add-checkbox-btn"
                                 onClick={() => addCheckbox(chapter.id)}
@@ -167,17 +168,17 @@ const ModuleProgressSettings: React.FC<ModalProps> = ({isOpen, onClose}) => {
                     </div>
                 ))}
 
-                <div className="mt-auto flex justify-end gap-4">
+                <div className="mt-auto flex justify-end items-center gap-4">
                     <CuteButton
                         onClick={onClose}
                         text={'Abbrechen'}
                         bgColor={"#598BB1"} textColor={"#ffffff"}
-                        classname={'text-base'}
+                        classname={'sm:text-base text-sm'}
                     />
                     <CuteButton
                         text={'Speichern'}
                         bgColor={"#56A095"} textColor={"#e8fcf6"}
-                        classname={'text-2xl'}
+                        classname={'sm:text-2xl text-lg'}
                     />
                 </div>
 

src/components/yourStudies/UserInfo.tsx

@@ -4,17 +4,13 @@ import {getMeetingsOfWeek} from "../../api/MeetingApi";
 import axiosInstance from "../../AxiosConfig";
 import {MeetingDto} from "../../dtos/MeetingDto";
 import ModuleProgressSettings from "../ModuleProgressSettings";
-
-const subjects = [
-    {name: "Algorithmen und Datenstrukturen", date: "17.02.2025", time: "10:30", room: "HQ.120", progress: 70},
-    {name: "Mathematik III", date: "29.01.2025", time: "08:30", room: "KA.046", progress: 50},
-    {name: "Mensch-Computer-Interaktion", date: "15.02.2025", time: "08:30", room: "HQ.120", progress: 40},
-    {name: "Software Engineering", date: "27.01.2025", time: "14:00", room: "KA.046", progress: 80},
-];
+import {ModuleDto} from "../../dtos/ModuleDto";
+import {getUser} from "../../api/UserApi";
 
 export default function UserInfo() {
     const [weeklyMeetings, setWeeklyMeetings] = useState<MeetingDto[]>([]);
     const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+    const [modules, setModules] = useState<ModuleDto[]>([]);
 
     const filterMeetingsForCurrentWeek = (meetings: MeetingDto[]) => {
         const currentDate = new Date();
@@ -26,6 +22,14 @@ export default function UserInfo() {
             return meetingDate >= startOfWeek && meetingDate <= endOfWeek;
         });
     };
+    const fetchUserInfo = async () => {
+        try {
+            const response = await getUser(axiosInstance);
+            setModules(response.modules);
+        } catch (error) {
+            console.error("Fehler beim Abrufen der UserDaten: " + error);
+        }
+    }
 
     const fetchMeetings = async () => {
         try {
@@ -38,6 +42,7 @@ export default function UserInfo() {
 
     useEffect(() => {
         fetchMeetings();
+        fetchUserInfo();
     }, []);
 
     const openModal = () => {
@@ -55,28 +60,27 @@ export default function UserInfo() {
 
                 <table className="w-full border-collapse hidden md:table">
                     <tbody>
-                    {subjects.map((subject, index) => (
+                    {modules.map((subject, index) => (
                         <tr key={index}>
                             <td className="px-1 py-1 text-[#9B9B9B]">{subject.name}</td>
-                            <td className="px-1 py-1 text-[#2AB19D]">{subject.date}</td>
-                            <td className="px-1 py-1 text-[#9B9B9B]">{subject.time}</td>
-                            <td className="px-1 py-1 text-[#9B9B9B]">{subject.room}</td>
+                            <td className="px-1 py-1 text-[#2AB19D]">DATE</td>
+                            <td className="px-1 py-1 text-[#9B9B9B]">TIME</td>
+                            <td className="px-1 py-1 text-[#9B9B9B]">ROOM</td>
                         </tr>
                     ))}
                     </tbody>
                 </table>
-
                 <div className="md:hidden space-y-4">
-                    {subjects.map((subject, index) => (
+                    {modules.map((subject, index) => (
                         <div key={index} className="p-3 shadow-sm">
                             <p className="text-[#9B9B9B]">
                                 {subject.name}
                             </p>
                             <p className="text-[#2AB19D] inline">
-                                {subject.date}
+                                DATE
                             </p>
                             <p className="text-[#9B9B9B] inline ml-2">
-                                {subject.time} {subject.room}
+                                TIME ROOM
                             </p>
                         </div>
                     ))}
@@ -124,11 +128,11 @@ export default function UserInfo() {
                 </div>
 
                 <p className="text-2xl font-bold text-white text-left mt-9 mb-6">Lernfortschritt</p>
-                {subjects.map((subject, index) => (
+                {modules.map((subject, index) => (
                     <div key={index} className="mb-6">
                         <p className="text-m text-[#9B9B9B]">{subject.name}</p>
                         <div onClick={openModal}>
-                            <ProgressBar progress={subject.progress}/>
+                            <ProgressBar progress={0.5}/>
                         </div>
                     </div>
                 ))}

src/pages/YourStudies.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import UserSettings from "../components/yourStudies/UserSettings";
 import UserInfo from "../components/yourStudies/UserInfo";
+import '../styles/Scrollbar.css';
 
 export default function YourStudies() {
     return (
         <div
-            className="flex lg:justify-between justify-start lg:flex-row flex-col overflow-y-scroll lg:items-start items-center lg:mt-12 mt-4 h-full">
+            className="flex lg:justify-between justify-start lg:flex-row scrollbar flex-col overflow-y-scroll lg:items-start items-center lg:mt-12 mt-4 h-full">
             <UserSettings/>
             <div className="lg:h-[90%] lg:w-[1px] w-[90%] min-h-[2px] bg-[#1C7E70]"></div>
             <UserInfo/>

src/styles/Calendar.css

@@ -14,4 +14,13 @@
 .fc-timegrid-slot-label {
     background-color: #165B51 !important;
     color: lightgray;
+}
+
+.fc-scroller::-webkit-scrollbar-thumb {
+    background-color: #050810;
+    border-radius: 4px;
+}
+
+.fc-scroller::-webkit-scrollbar {
+    background-color: #161821;
 }

src/styles/Modal.css

@@ -14,15 +14,21 @@
 
 .modal-content {
     background-color: #1C212C;
-    padding: 40px;
-    padding-bottom: 20px;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
     gap: 20px;
     z-index: 10000;
+}
 
+.modal-content::-webkit-scrollbar {
+    background-color: #1c212c;
+}
+
+.modal-content::-webkit-scrollbar-thumb {
+    background-color: #161821;
+    border-radius: 4px;
 }
 
 .checkbox-group {
@@ -58,7 +64,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background-color: transparent; 
+    background-color: transparent;
 }
 
 .checkbox-item {
@@ -71,6 +77,7 @@
     justify-content: space-between;
     gap: 10px;
     position: relative;
+    width: 100%;
 }
 
 .delete-btn {
@@ -86,7 +93,6 @@
     display: flex;
     align-items: center;
     gap: 10px;
-    margin-left: 20px; 
 }
 
 .add-checkbox-btn, .add-chapter-btn {
@@ -99,7 +105,7 @@
     height: 30px;
     border-radius: 4px;
     font-size: 16px;
-    display: inline-flex; 
+    display: inline-flex;
     align-items: center;
 }
 

src/styles/Scrollbar.css

@@ -0,0 +1,8 @@
+.scrollbar::-webkit-scrollbar {
+    background-color: #1c212c;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+    background-color: #161821;
+    border-radius: 4px;
+}