Adjust endpoints to backend

Alexandra Zwinger · Alexandra Zwinger · commit 098e9f44b816 · 2025-04-16T14:34:31.000+02:00
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,28 +3,28 @@ import {ThemeProvider} from "@mui/material/styles";
 import {Routes, Route} from "react-router-dom";
 import {customTheme} from "./customTheme";
 import React from "react";
-import Navbar from "./components/Navbar";
-//import {ReactKeycloakProvider} from '@react-keycloak/web'
+import Navbar from "./components/navbar/Navbar";
+import {ReactKeycloakProvider} from '@react-keycloak/web'
 
 import CalenderPage from './pages/CalendarPage';
 import Homepage from './pages/Homepage';
 import Settings from './pages/YourStudies';
 import Page404 from './pages/Page404';
 import Score from './pages/Score';
-/*import keycloak from "./Keycloak";*/
+import keycloak from "./Keycloak";
 
 function App() {
     return (
-        /*<ReactKeycloakProvider
+        <ReactKeycloakProvider
             authClient={keycloak}
-            initOptions={{ onLoad: 'login-required', checkLoginIframe: false }}
+            initOptions={{onLoad: 'login-required', checkLoginIframe: false}}
             onEvent={(event, error) => {
                 console.log(`Keycloak Event: ${event}`, error);
                 if (event === 'onAuthError') {
                     console.error('Authentication Error:', error);
                 }
             }}
-        >*/
+        >
             <ThemeProvider theme={customTheme}>
                 <CssBaseline/>
                 <GlobalStyles styles={{html: {WebkitFontSmoothing: "auto"}}}/>
@@ -39,7 +39,7 @@ function App() {
                     </Routes>
                 </div>
             </ThemeProvider>
-       /*</ReactKeycloakProvider>*/
+        </ReactKeycloakProvider>
     );
 }
 
diff --git a/src/AxiosConfig.tsx b/src/AxiosConfig.tsx
@@ -1,5 +1,5 @@
 import axios from 'axios';
-/*import keycloak from "./Keycloak";*/
+import keycloak from "./Keycloak";
 
 const axiosInstance = axios.create({
     baseURL: 'http://localhost:8080',
@@ -10,7 +10,7 @@ const axiosInstance = axios.create({
 });
 
 axiosInstance.interceptors.request.use(
-   /* async (config) => {
+    async (config) => {
         const token = keycloak.token;
         if (token) {
             config.headers['Authorization'] = `Bearer ${token}`;
@@ -19,7 +19,7 @@ axiosInstance.interceptors.request.use(
     },
     (error) => {
         return Promise.reject(error);
-    }*/
+    }
 );
 
 export default axiosInstance;
diff --git a/src/api/UserApi.tsx b/src/api/UserApi.tsx
@@ -1,8 +1,14 @@
 import {AxiosInstance} from "axios";
 import {Resources} from "../App";
 import {handleErrorResponse, handleSuccessResponse} from "./ErrorHandling";
+import {UserDto} from "../dtos/UserDto";
 
-export function getUser(axios: AxiosInstance) {
-    return axios.get(`${Resources.USER}`)
+export function getUser(axios: AxiosInstance): Promise<UserDto> {
+    return axios.get(Resources.USER)
+        .then(res => res.data[0], handleErrorResponse);
+}
+
+export function updateUsername(axios: AxiosInstance, name: string) {
+    return axios.post(Resources.USER, {username: name})
         .then(handleSuccessResponse, handleErrorResponse);
 }
diff --git a/src/components/CalendarComponent.tsx b/src/components/CalendarComponent.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import FullCalendar from '@fullcalendar/react';
 import timeGridPlugin from '@fullcalendar/timegrid';
-import Modal from './Modal';
+import MeetingDetails from './meeting/MeetingDetails';
 import {MeetingDto} from '../dtos/MeetingDto';
 import '../styles/Calendar.css';
 import {useTheme} from '@mui/material/styles';
@@ -10,11 +10,14 @@ import {getMeetings} from "../api/MeetingApi";
 import axiosInstance from "../AxiosConfig";
 import {CreateOrUpdateMeetingForm} from "../form/CreateOrUpdateMeetingForm";
 import {EventSourceInput} from '@fullcalendar/core';
+import {ChooseMeetingForm} from "../form/ChooseMeetingForm";
 
 export default function CalendarComponent(props: { isDialogOpen: boolean }) {
     const [selectedMeeting, setSelectedMeeting] = useState<MeetingDto | null>(null);
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [isMeetingFormOpen, setIsMeetingFormOpen] = useState(false);
+    const [isChooseMeetingOpen, setChooseMeetingOpen] = useState(false);
+    const [onlyThisMeeting, setOnlyThisMeeting] = useState(true);
     const [events, setEvents] = useState<MeetingDto[]>([]);
     const mdAndUp = useMediaQuery(useTheme().breakpoints.up('md'));
 
@@ -30,9 +33,10 @@ export default function CalendarComponent(props: { isDialogOpen: boolean }) {
     function mapMeetingsToEvents(meetings: MeetingDto[]): EventSourceInput {
         return meetings.map(meeting => ({
             id: meeting.id.toString(),
+            superId: meeting.superId.toString(),
             title: meeting.title,
-            start: new Date(meeting.date_from).toISOString(),
-            end: new Date(meeting.date_until).toISOString(),
+            start: new Date(meeting.dateFrom).toISOString(),
+            end: new Date(meeting.dateUntil).toISOString(),
             description: meeting.description,
             room: meeting.place,
             repeatable: meeting.repeatable,
@@ -41,7 +45,6 @@ export default function CalendarComponent(props: { isDialogOpen: boolean }) {
         }))
     }
 
-
     useEffect(() => {
         fetchMeetings();
     }, [props.isDialogOpen, isMeetingFormOpen]);
@@ -52,16 +55,19 @@ export default function CalendarComponent(props: { isDialogOpen: boolean }) {
         const title = event.title;
         const date_from = new Date(event.start).toLocaleString();
         const date_until = new Date(event.end).toLocaleString();
+        const superId = event.extendedProps?.superId || '';
         const description = event.extendedProps?.description || '';
         const place = event.extendedProps?.room || '';
         const repeatable = event.extendedProps?.repeatable || 'never';
         const creator = event.extendedProps?.creator || '';
         const member = event.extendedProps?.member || [];
+        console.log(event);
         setSelectedMeeting({
             id: id,
+            superId: superId,
             title,
-            date_from,
-            date_until,
+            dateFrom: date_from,
+            dateUntil: date_until,
             description,
             place,
             repeatable: repeatable,
@@ -106,18 +112,22 @@ export default function CalendarComponent(props: { isDialogOpen: boolean }) {
                 eventClick={Eventhandler}
             />
             {selectedMeeting && (
-                <Modal
+                <MeetingDetails
                     isOpen={isModalOpen}
                     meeting={selectedMeeting}
                     onClose={closeModal}
-                    setIsMeetingFormOpen={setIsMeetingFormOpen}
+                    openMeetingForm={() => setIsMeetingFormOpen(true)}
+                    openChooseMeetingModal={() => setChooseMeetingOpen(true)}
                 />
             )}
             {selectedMeeting && isMeetingFormOpen &&
                 <CreateOrUpdateMeetingForm open={true} onClose={() => setIsMeetingFormOpen(false)}
-                                           meeting={selectedMeeting}/>
+                                           meeting={selectedMeeting} onlyThisMeeting={onlyThisMeeting}/>
+            }
+            {isChooseMeetingOpen &&
+                <ChooseMeetingForm onClose={() => setChooseMeetingOpen(false)} setOnlyThisMeeting={setOnlyThisMeeting}
+                                   openMeetingForm={() => setIsMeetingFormOpen(true)}/>
             }
-
         </div>
     );
 }
diff --git a/src/components/CuteButton.tsx b/src/components/CuteButton.tsx
@@ -10,7 +10,6 @@ export function CuteButton(props: {
 }) {
     const className = `px-5 py-2 h-fit rounded-full transform transition-all duration-300` +
         `hover:scale-x-105 hover:scale-y-105 ${props.classname}`;
-    console.log(props.type);
     return (
         <button
             className={className}
diff --git a/src/components/ModuleProgressSettings.tsx b/src/components/ModuleProgressSettings.tsx
@@ -19,7 +19,7 @@ interface Chapter {
     checkboxes: Checkbox[];
 }
 
-const Modal: React.FC<ModalProps> = ({isOpen, onClose}) => {
+const ModuleProgressSettings: React.FC<ModalProps> = ({isOpen, onClose}) => {
     const [chapters, setChapters] = useState<Chapter[]>([
         {
             id: 1,
@@ -171,14 +171,12 @@ const Modal: React.FC<ModalProps> = ({isOpen, onClose}) => {
                     <CuteButton
                         onClick={onClose}
                         text={'Abbrechen'}
-                        textColor={'#CAE8FF'}
-                        bgColor={'#425E74'}
+                        bgColor={"#598BB1"} textColor={"#ffffff"}
                         classname={'text-base'}
                     />
                     <CuteButton
                         text={'Speichern'}
-                        textColor={'#e3f1ef'}
-                        bgColor={'#506D69'}
+                        bgColor={"#56A095"} textColor={"#e8fcf6"}
                         classname={'text-2xl'}
                     />
                 </div>
@@ -188,5 +186,4 @@ const Modal: React.FC<ModalProps> = ({isOpen, onClose}) => {
     );
 };
 
-export default Modal;
-
+export default ModuleProgressSettings;
diff --git a/src/components/meeting/MeetingDetails.tsx b/src/components/meeting/MeetingDetails.tsx
@@ -1,17 +1,26 @@
 import React from 'react';
-import '../styles/Modal.css';
-import {CuteButton} from "./CuteButton";
-import {CreateMeetingDto} from "../dtos/MeetingDto";
+import '../../styles/Modal.css';
+import {CuteButton} from "../CuteButton";
+import {CreateMeetingDto} from "../../dtos/MeetingDto";
 
 interface ModalProps {
     isOpen: boolean;
     meeting: CreateMeetingDto | null;
     onClose: () => void;
-    setIsMeetingFormOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    openMeetingForm: () => void;
+    openChooseMeetingModal: () => void;
 }
 
-const Modal: React.FC<ModalProps> = ({isOpen, meeting, onClose, setIsMeetingFormOpen}) => {
+const MeetingDetails: React.FC<ModalProps> = ({isOpen, meeting, onClose, openMeetingForm, openChooseMeetingModal}) => {
     if (!isOpen || !meeting) return null;
+
+    const updateMeeting = () => {
+        onClose();
+        if (meeting.repeatable !== "NEVER")
+            openChooseMeetingModal();
+        else
+            openMeetingForm();
+    }
     return (
         <div className="modal-overlay" onClick={onClose}>
             <div className="modal-content max-w-[90%] w-[450px]" onClick={(e) => e.stopPropagation()}>
@@ -20,10 +29,10 @@ const Modal: React.FC<ModalProps> = ({isOpen, meeting, onClose, setIsMeetingForm
 
                 <div className="flex flex-col gap-4 mb-4">
                     <p className="text-bs font-medium text-white">
-                        <strong className="text-[#CAE8FF] font-semibold">Start:</strong> {meeting.date_from}
+                        <strong className="text-[#CAE8FF] font-semibold">Start:</strong> {meeting.dateFrom}
                     </p>
                     <p className="text-bs font-medium text-white">
-                        <strong className="text-[#CAE8FF] font-semibold">Ende:</strong> {meeting.date_until}
+                        <strong className="text-[#CAE8FF] font-semibold">Ende:</strong> {meeting.dateUntil}
                     </p>
                     <p className="text-bs font-medium text-white">
                         <strong className="text-[#CAE8FF] font-semibold">Beschreibung:</strong> {meeting.description}
@@ -33,20 +42,16 @@ const Modal: React.FC<ModalProps> = ({isOpen, meeting, onClose, setIsMeetingForm
                     </p>
                 </div>
 
-                <div className="flex flex-row gap-4 mb-4 justify-end mt-auto">
+                <div className="flex flex-row gap-4 mb-4 justify-end mt-auto items-center">
                     <div>
-                        <CuteButton onClick={onClose} text={"Abbrechen"} textColor={"#CAE8FF"} bgColor={"#425E74"}
-                                    classname={"text-base"}/>
+                        <CuteButton onClick={onClose} text={"Abbrechen"} bgColor={"#598BB1"} textColor={"#e6ebfc"}
+                                    classname={"md:text-base text-sm"}/>
                     </div>
                     <div>
                         <CuteButton
-                            onClick={() => {
-                                onClose();
-                                setIsMeetingFormOpen(true)
-                            }}
-                            text={"Meeting Bearbeiten"} textColor={"#e3f1ef"}
-                            bgColor={"#506D69"}
-                            classname={"text-base"}/>
+                            onClick={updateMeeting}
+                            text={"Meeting Bearbeiten"} bgColor={"#56A095"} textColor={"#e8fcf6"}
+                            classname={"md:text-lg text-base"}/>
                     </div>
                 </div>
 
@@ -55,4 +60,4 @@ const Modal: React.FC<ModalProps> = ({isOpen, meeting, onClose, setIsMeetingForm
     );
 };
 
-export default Modal;
+export default MeetingDetails;
diff --git a/src/components/meeting/MeetingSearchResult.tsx b/src/components/meeting/MeetingSearchResult.tsx
@@ -1,21 +1,21 @@
-import {MeetingDto} from "../dtos/MeetingDto";
-import {CuteButton} from "./CuteButton";
+import {MeetingDto} from "../../dtos/MeetingDto";
+import {CuteButton} from "../CuteButton";
 import React from "react";
 
 export default function MeetingSearchResult(props: { meeting: MeetingDto }) {
     return (
         <div className="bg-[#333C4F] p-4 flex flex-col gap-4">
             <div>
                 <div className="text-white">
-                    {new Date(props.meeting.date_from).toLocaleString('de-DE', {
+                    {new Date(props.meeting.dateFrom).toLocaleString('de-DE', {
                         day: '2-digit',
                         month: '2-digit',
                         year: 'numeric',
                         hour: '2-digit',
                         minute: '2-digit',
                     })}
                     {" - "}
-                    {new Date(props.meeting.date_until).toLocaleString('de-DE', {
+                    {new Date(props.meeting.dateUntil).toLocaleString('de-DE', {
                         day: '2-digit',
                         month: '2-digit',
                         year: 'numeric',
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import "../styles/navbar.css";
-import pinguin from "../data/penguin-48226_1280.svg";
+import "../../styles/navbar.css";
+import pinguin from "../../data/penguin-48226_1280.svg";
 import {Link} from "react-router-dom";
 import {NavbarButtons} from "./NavbarButtons";
 
diff --git a/src/components/navbar/NavbarButtons.tsx b/src/components/navbar/NavbarButtons.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import "../styles/navbar.css";
+import "../../styles/navbar.css";
 import {NavbarComponent} from "./NavbarComponent";
 import {useLocation} from "react-router-dom";
 
diff --git a/src/components/navbar/NavbarComponent.tsx b/src/components/navbar/NavbarComponent.tsx
@@ -1,13 +1,13 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import {Link} from "react-router-dom";
 
 export function NavbarComponent(props: {
     text: string;
     path: string;
     isActive: boolean;
 }) {
     let className = "sm:p-2 hover:text-[#56A095] hover:font-bold focus:text-[#56A095] focus:font-bold";
-    if(props.isActive) {
+    if (props.isActive) {
         className += " text-[#56A095] font-bold";
     } else {
         className += " text-[#949494]";
diff --git a/src/dtos/MeetingDto.tsx b/src/dtos/MeetingDto.tsx
@@ -1,9 +1,12 @@
+import {ChangeType} from "../enum/ChangeType";
+
 export type MeetingDto = {
     id: number,
+    superId: number,
     title: string,
     description: string,
-    date_from: string,
-    date_until: string,
+    dateFrom: string,
+    dateUntil: string,
     repeatable: string,
     place: string,
     creator: string,
@@ -13,8 +16,9 @@ export type MeetingDto = {
 export type CreateMeetingDto = {
     title: string,
     description: string,
-    date_from: string,
-    date_until: string,
+    dateFrom: string,
+    dateUntil: string,
     repeatable: string,
-    place: string
+    place: string,
+    changeType?: ChangeType,
 }
diff --git a/src/dtos/UserDto.tsx b/src/dtos/UserDto.tsx
@@ -1,3 +1,4 @@
 export type UserDto = {
-    name: string;
+    username: string;
+    uuid: string;
 }
diff --git a/src/enum/ChangeType.tsx b/src/enum/ChangeType.tsx
@@ -0,0 +1,4 @@
+export enum ChangeType {
+    SERIES = "SERIES",
+    OCCURRENCE = "OCCURRENCE"
+}
diff --git a/src/form/ChooseMeetingForm.tsx b/src/form/ChooseMeetingForm.tsx
diff --git a/src/form/CreateOrUpdateMeetingForm.tsx b/src/form/CreateOrUpdateMeetingForm.tsx
diff --git a/src/form/SearchMeetingForm.tsx b/src/form/SearchMeetingForm.tsx
diff --git a/src/pages/CalendarPage.tsx b/src/pages/CalendarPage.tsx
diff --git a/src/pages/YourStudies.tsx b/src/pages/YourStudies.tsx
