1. Der Linke Bereich beinhaltet die Teilnehmer Liste, die Switch Funktion zum Moderator, die Uhrzeit und unten die Buttons Settings und Leave Room. Hier können wieder die Einstellungen angepasst oder der Raum verlassen werden. \
@@ -202,7 +202,9 @@ Hier sollen bei einer Präsentation zum Beispiel später auch die Folien angezei
- Im linken Tab befindet sich der Gruppenchat. Dieser bietet eine Echtzeit-Kommunikationsmöglichkeit zwischen den Nutzern im selben Raum.
- Der mittlere Bereich ist für den File Upload. Hier können Dokumente hochgeladen werden.
- Der rechte Bereich soll die Möglichkeit bietet, sich während einem Call/ Meeting/ Vorlesung Notizen zu machen und diese später als .txt Datei zu downloaden oder im Chat mit anderen Teilnehmern zu teilen. Des Weiteren soll hier die Möglichkeit bestehen, auch Dokumente hochzuladen. Hierbei ist wichtig zu erwähnen, dass für den Tab Notizen, die Funktionalität noch nicht implementiert ist. 
- Der rechte Bereich soll die Möglichkeit bietet, sich während einem Call/ Meeting/ Vorlesung Notizen zu machen und diese später als .txt Datei zu downloaden oder im Chat mit anderen Teilnehmern zu teilen. Des Weiteren soll hier die Möglichkeit bestehen, auch Dokumente hochzuladen. Hierbei ist wichtig zu erwähnen, dass für den Tab Notizen, die Funktionalität noch nicht implementiert ist.
@@ -225,9 +227,9 @@ Für das Design wurde eine Vielzahl von UI-Komponenten genutzt, um eine ansprech
**Menubar**: Menubars werden genutzt, um Navigationsoptionen bereitzustellen. 
**Resizable**: Die Resizable-Komponente ermöglicht es, bestimmte UI-Elemente in der Größe anzupassen, um die Anpassbarkeit zu verbessern.
**Resizable**: Die Resizable-Komponente ermöglicht es, bestimmte UI-Elemente in der Größe anzupassen, um die Anpassbarkeit zu verbessern.
**Scroll-Area**: Scroll-Area-Komponenten werden eingesetzt, um Inhalte darzustellen, die größer sind als der verfügbare Anzeigebereich.
**Scroll-Area**: Scroll-Area-Komponenten werden eingesetzt, um Inhalte darzustellen, die größer sind als der verfügbare Anzeigebereich.
**Separator**: Separator-Komponenten werden genutzt, um visuelle Trennlinien zwischen verschiedenen Elementen in der Benutzeroberfläche zu erstellen.
...
...
@@ -249,7 +251,7 @@ Während der Entwicklung traten mehrere Herausforderungen auf, die zu einer Anpa
Der ursprüngliche Plan sah vor, das alte Backend auszugliedern. Jedoch konnte trotz enger Zusammenarbeit mit Raphael der Loadbalancer nicht zum Laufen gebracht werden. Es traten Probleme bei der Einbindung des “ezMCU” auf (siehe Screenshot). Statt nutzbarer Daten wurden HTML-Codeabschnitte gerendert und an das Frontend geschickt. Sprich das ezMCU konnte nicht richtig verwendet werden. Deshalb konnte auch zum Beispiel die Funktion zur Steuerung von Audio nicht implementiert werden. \
**Neue Ansatz:** Es wurde beschlossen, das alte Frontend aus dem Backend auszugliedern und die Backend-Antworten entsprechend anzupassen.
**Neue Ansatz:** Es wurde beschlossen, das alte Frontend aus dem Backend auszugliedern und die Backend-Antworten entsprechend anzupassen.
#### Socket.io
...
...
@@ -264,7 +266,7 @@ Ein weiteres Problem bestand in der Socket.io-Verbindung zwischen dem neuen Fron
#### API-Calls
API-Calls vom neuen Frontend aus waren nicht möglich. Nach viel Recherche und der Integration von axios im Frontend, wurde schnell das Cross-Origin Ressource Sharing als Übeltäter ausfindig gemacht.
API-Calls vom neuen Frontend aus waren nicht möglich. Nach viel Recherche und der Integration von axios im Frontend, wurde schnell das Cross-Origin Ressource Sharing als Übeltäter ausfindig gemacht.
**Neuer Ansatz:**
...
...
@@ -272,11 +274,11 @@ Integration einer CORS-Library und das explizite whitelisting des Frontends.
### Frontend
Das Accelerator-Frontend wird durch ein neues Frontend mit aktueller Technologie ersetzt. Dafür wurde React im Verbund mit TypeScript ausgemacht. Dies hatte nun zur Folge, dass die meiste Logik, die im Accelerator zum Einsatz kam, nun nicht mehr verwendet werden kann, da diese auf jQuery basiert.
Das Accelerator-Frontend wird durch ein neues Frontend mit aktueller Technologie ersetzt. Dafür wurde React im Verbund mit TypeScript ausgemacht. Dies hatte nun zur Folge, dass die meiste Logik, die im Accelerator zum Einsatz kam, nun nicht mehr verwendet werden kann, da diese auf jQuery basiert.
Die Länge der bisherigen Frontend-Dateien erreichten bis zu 2500 Zeilen Code. Zudem existierte eine große index.html, die den gesamten statischen HTML-Code Accelerators in sich vereinte. Diese Abschnitte wurden dann von variablen HTML-Code vervollständigt, je nach Datenlage und Server-Antworten.
</div>**Neuer Ansatz:**
</div>\*\*Neuer Ansatz:\*\*
Grundlegende Funktionen konnten für den neuen Techstack übersetzt und integriert werden. Eine 1:1 Integration der bisherigen Dateien war leider nicht möglich, weshalb eine Migration durchgeführt wurde. Da diese für alle Funktionen in einer kurzen Zeitspanne nicht umsetzbar sind, wurde sich auf die grundlegensten Funktionen beschränkt.
