Skip to content

Commit 0083fd9

Browse files
author
Alexandra Zwinger
committed
Remove CSS files
1 parent 88e23bd commit 0083fd9

File tree

10 files changed

+202
-372
lines changed

10 files changed

+202
-372
lines changed

‎src/components/Modal.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import '../styles/Modal.css';
2+
3+
export default function Modal(props: { children: React.ReactNode, onClose?: () => void }) {
4+
return (
5+
<div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-[9999]"
6+
onClick={props.onClose}>
7+
<div
8+
className="bg-[#1C212C] rounded-lg shadow-[0_2px_10px_rgba(0,0,0,0.1)] flex flex-col gap-5 z-[10000] max-w-[90%] w-[700px] relative p-7 overflow-y-auto max-h-[90vh] custom-scrollbar"
9+
onClick={(e) => e.stopPropagation()}>
10+
{props.children}
11+
</div>
12+
</div>
13+
)
14+
}

‎src/components/ModuleProgressSettings.tsx‎

Lines changed: 94 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import React, {useState, useEffect} from 'react';
1+
import React, {useState} from 'react';
22
import '../styles/Modal.css';
33
import {CuteButton} from './CuteButton';
44
import {Chapter, UserModule} from "../dtos/ModuleDto";
55
import axiosInstance from "../AxiosConfig";
66
import {updateUserModules} from "../api/UserApi";
7+
import Modal from "./Modal";
78

89
interface ModalProps {
910
onClose: () => void;
@@ -13,16 +14,6 @@ interface ModalProps {
1314

1415
const ModuleProgressSettings: React.FC<ModalProps> = ({onClose, module, allUserModules}) => {
1516
const [chapters, setChapters] = useState<Chapter[]>(module.chapter);
16-
const [progress, setProgress] = useState<number>(0);
17-
18-
// Berechne den Fortschritt (in %) bei jedem Ändern der Checkboxen
19-
useEffect(() => {
20-
const allBoxes = chapters.flatMap(ch => ch.checkbox);
21-
const total = allBoxes.length;
22-
const checkedCount = allBoxes.filter(box => box.checked).length;
23-
const percent = total > 0 ? Math.round((checkedCount / total) * 100) : 0;
24-
setProgress(percent);
25-
}, [chapters]);
2617

2718
const clickCheckbox = (chapterId: number, checkboxId: string) => {
2819
setChapters((prevChapters) =>
@@ -103,110 +94,104 @@ const ModuleProgressSettings: React.FC<ModalProps> = ({onClose, module, allUserM
10394
}
10495

10596
return (
106-
<div className="modal-overlay" onClick={onClose}>
107-
<div className="modal-content border-8 border-[#1C212C] p-8 min-w-[300px] w-[650px] overflow-y-scroll max-h-[80%] max-w-[90%]"
108-
onClick={(e) => e.stopPropagation()}>
109-
<p className="text-2xl font-bold text-white text-left sm:ml-3">
110-
Lernfortschritt
111-
</p>
112-
113-
{/* Progress-Bar
114-
<div className="progress-container sm:ml-3 mb-6">
115-
<div className="progress-bar" style={{width: `${progress}%`}}/>
116-
<span className="text-white text-sm ml-2">{progress}%</span>
117-
</div>
118-
*/}
119-
{chapters.map((chapter) => (
120-
<div key={chapter.id}>
121-
<div className="flex gap-4 items-center mt-2 sm:ml-3 mb-2">
122-
<p className="sm:text-xl text-lg text-white text-left">
123-
{chapter.title}
124-
</p>
125-
<button
126-
className="delete-btn"
127-
onClick={() => deleteChapter(chapter.id)}
128-
>
129-
x
130-
</button>
131-
</div>
132-
<div className="checkbox-group sm:ml-8 mb-4">
133-
{chapter.checkbox.map((checkbox) => (
134-
<div key={checkbox.id} className="checkbox-item w-[65%]">
135-
<input
136-
type="checkbox"
137-
className={"min-w-[30px]"}
138-
checked={checkbox.checked}
139-
onChange={() => clickCheckbox(chapter.id, checkbox.id)}
140-
/>
141-
<input
142-
type="text"
143-
className={"flex-grow px-2"}
144-
value={checkbox.title}
145-
onChange={(e) => {
146-
const newText = e.target.value;
147-
setChapters((prevChapters) =>
148-
prevChapters.map((ch) =>
149-
ch.id === chapter.id
150-
? {
151-
...ch,
152-
checkbox: ch.checkbox.map((c) =>
153-
c.id === checkbox.id
154-
? {...c, title: newText}
155-
: c
156-
),
157-
}
158-
: ch
159-
)
160-
);
161-
}}
162-
/>
163-
<button
164-
className="delete-btn"
165-
onClick={() => deleteCheckbox(chapter.id, checkbox.id)}
166-
>
167-
x
168-
</button>
169-
</div>
170-
))}
171-
</div>
172-
173-
<div className="add-checkbox-container sm:ml-8">
174-
<button
175-
className="add-checkbox-btn"
176-
onClick={() => addCheckbox(chapter.id)}
177-
>
178-
+
179-
</button>
180-
<label className="text-white">Checkbox </label>
181-
182-
</div>
97+
<Modal onClose={onClose}>
98+
<p className="text-2xl font-bold text-white text-left sm:ml-3">
99+
Lernfortschritt
100+
</p>
101+
{chapters.map((chapter) => (
102+
<div key={chapter.id}>
103+
<div className="flex gap-4 items-center mt-2 sm:ml-3 mb-2">
104+
<p className="sm:text-xl text-lg text-white text-left">
105+
{chapter.title}
106+
</p>
107+
<button
108+
className="bg-transparent text-white border-none text-sm cursor-pointer p-0"
109+
onClick={() => deleteChapter(chapter.id)}
110+
>
111+
x
112+
</button>
113+
</div>
114+
<div className="flex flex-col items-start gap-2 sm:ml-8 mb-4">
115+
{chapter.checkbox.map((checkbox) => (
116+
<div key={checkbox.id}
117+
className="mb-2.5 p-2 bg-transparent rounded flex items-center justify-between gap-2.5 relative w-full">
118+
<input
119+
type="checkbox"
120+
className="min-w-[30px] appearance-none w-[30px] h-[30px] bg-[#465370] rounded cursor-pointer inline-block relative
121+
checked:after:content-['✔'] checked:after:text-[#2EF6D9] checked:after:text-[50px] checked:after:absolute checked:after:top-1/2
122+
checked:after:left-1/2 checked:after:transform checked:after:-translate-x-1/2 checked:after:-translate-y-1/2"
123+
checked={checkbox.checked}
124+
onChange={() => clickCheckbox(chapter.id, checkbox.id)}
125+
/>
126+
<input
127+
type="text"
128+
className={"flex-grow px-2"}
129+
value={checkbox.title}
130+
onChange={(e) => {
131+
const newText = e.target.value;
132+
setChapters((prevChapters) =>
133+
prevChapters.map((ch) =>
134+
ch.id === chapter.id
135+
? {
136+
...ch,
137+
checkbox: ch.checkbox.map((c) =>
138+
c.id === checkbox.id
139+
? {...c, title: newText}
140+
: c
141+
),
142+
}
143+
: ch
144+
)
145+
);
146+
}}
147+
/>
148+
<button
149+
className="bg-transparent text-white border-none text-sm cursor-pointer p-0"
150+
onClick={() => deleteCheckbox(chapter.id, checkbox.id)}
151+
>
152+
x
153+
</button>
154+
</div>
155+
))}
183156
</div>
184-
))}
185157

186-
<div className="add-checkbox-container sm:ml-8">
187-
<button className="add-chapter-btn" onClick={addChapter}>
188-
+
189-
</button>
190-
<label className="text-white">Kapitel </label>
191-
</div>
158+
<div className="flex items-center gap-2.5 text-white sm:ml-8">
159+
<button
160+
className="bg-[#2EF6D9] text-white cursor-pointer p-2 w-[30px] h-[30px] rounded text-base inline-flex items-center justify-center"
161+
onClick={() => addCheckbox(chapter.id)}
162+
>
163+
+
164+
</button>
165+
<label className="text-white">Checkbox </label>
192166

193-
<div className="mt-auto flex justify-end items-center gap-4">
194-
<CuteButton
195-
onClick={onClose}
196-
text={'Abbrechen'}
197-
bgColor={"#598BB1"} textColor={"#ffffff"}
198-
classname={'sm:text-base text-sm'}
199-
/>
200-
<CuteButton
201-
text={'Speichern'}
202-
bgColor={"#56A095"} textColor={"#e8fcf6"}
203-
classname={'sm:text-2xl text-lg'}
204-
onClick={saveProgress}
205-
/>
167+
</div>
206168
</div>
169+
))}
170+
171+
<div className="flex items-center gap-2.5 text-white sm:ml-8">
172+
<button
173+
className="bg-[#2EF6D9] text-white cursor-pointer p-2 w-[30px] h-[30px] rounded text-base inline-flex items-center justify-center"
174+
onClick={addChapter}>
175+
+
176+
</button>
177+
<label className="text-white">Kapitel </label>
178+
</div>
207179

180+
<div className="mt-auto flex justify-end items-center gap-4">
181+
<CuteButton
182+
onClick={onClose}
183+
text={'Abbrechen'}
184+
bgColor={"#598BB1"} textColor={"#ffffff"}
185+
classname={'sm:text-base text-sm'}
186+
/>
187+
<CuteButton
188+
text={'Speichern'}
189+
bgColor={"#56A095"} textColor={"#e8fcf6"}
190+
classname={'sm:text-2xl text-lg'}
191+
onClick={saveProgress}
192+
/>
208193
</div>
209-
</div>
194+
</Modal>
210195
);
211196
};
212197

‎src/components/meeting/ExamDateModal.tsx‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react';
22
import '../../styles/Modal.css';
33
import {CuteButton} from '../CuteButton';
44
import {UserModule} from '../../dtos/ModuleDto';
5+
import Modal from "../Modal";
56

67
interface Props {
78
isOpen: boolean;
@@ -25,35 +26,33 @@ export default function ExamDateModal({isOpen, modules, onClose, onSubmit}: Prop
2526
if (!isOpen) return null;
2627

2728
return (
28-
<div className="modal-overlay" onClick={onClose}>
29-
<div className="modal-content max-w-[90%] w-[500px] p-7 relative" onClick={e => e.stopPropagation()}>
30-
<button onClick={onClose} className="absolute top-4 right-4 text-white text-2xl hover:text-red-400">×
31-
</button>
32-
<h2 className="text-2xl font-bold text-white mb-4">Prüfungstermin hinzufügen</h2>
33-
<div className="flex flex-col gap-4 mb-4">
34-
<select value={pick.name}
35-
onChange={e => {
36-
const selectedModule = modules.find(m => m.name === e.target.value);
37-
if (selectedModule)
38-
setPick(selectedModule);
39-
}}
40-
className="p-2 rounded bg-[#475370] text-white">
41-
{modules.map(m => <option key={m.name}>{m.name}</option>)}
42-
</select>
43-
<input type="date" value={day} onChange={e => setDay(e.target.value)}
44-
className="p-2 rounded bg-[#475370] text-white"/>
45-
<input type="time" value={hour} onChange={e => setHour(e.target.value)}
46-
className="p-2 rounded bg-[#475370] text-white"/>
47-
<input type="text" placeholder="Raum" value={loc} onChange={e => setLoc(e.target.value)}
48-
className="p-2 rounded bg-[#475370] text-white"/>
49-
</div>
50-
<div className="flex items-center w-full gap-2">
51-
<CuteButton onClick={onClose} text="Abbrechen" bgColor="#598BB1" textColor="#e6ebfc"
52-
classname="xl:text-base text-sm ml-auto"/>
53-
<CuteButton onClick={() => onSubmit(pick.name, day, hour, loc)} text="Speichern" bgColor="#56A095"
54-
textColor="#e8fcf6" classname="xl:text-xl text-base"/>
55-
</div>
29+
<Modal onClose={onClose}>
30+
<button onClick={onClose} className="absolute top-4 right-4 text-white text-2xl hover:text-red-400">×
31+
</button>
32+
<h2 className="text-2xl font-bold text-white mb-4">Prüfungstermin hinzufügen</h2>
33+
<div className="flex flex-col gap-4 mb-4">
34+
<select value={pick.name}
35+
onChange={e => {
36+
const selectedModule = modules.find(m => m.name === e.target.value);
37+
if (selectedModule)
38+
setPick(selectedModule);
39+
}}
40+
className="p-2 rounded bg-[#475370] text-white">
41+
{modules.map(m => <option key={m.name}>{m.name}</option>)}
42+
</select>
43+
<input type="date" value={day} onChange={e => setDay(e.target.value)}
44+
className="p-2 rounded bg-[#475370] text-white"/>
45+
<input type="time" value={hour} onChange={e => setHour(e.target.value)}
46+
className="p-2 rounded bg-[#475370] text-white"/>
47+
<input type="text" placeholder="Raum" value={loc} onChange={e => setLoc(e.target.value)}
48+
className="p-2 rounded bg-[#475370] text-white"/>
5649
</div>
57-
</div>
50+
<div className="flex items-center w-full gap-2">
51+
<CuteButton onClick={onClose} text="Abbrechen" bgColor="#598BB1" textColor="#e6ebfc"
52+
classname="xl:text-base text-sm ml-auto"/>
53+
<CuteButton onClick={() => onSubmit(pick.name, day, hour, loc)} text="Speichern" bgColor="#56A095"
54+
textColor="#e8fcf6" classname="xl:text-xl text-base"/>
55+
</div>
56+
</Modal>
5857
);
5958
}

0 commit comments

Comments
 (0)