Merge branch 'main' of https://github.com/ProjektAdLer/2D_3D_AdLer

package.json

@@ -15,6 +15,7 @@
     "elkjs": "^0.8.2",
     "h5p-standalone": "^3.5.1",
     "history": "^5.3.0",
+    "i18next": "^22.5.1",
     "inversify": "^6.0.1",
     "inversify-react": "^1.0.2",
     "jest-extended": "^4.0.2",
@@ -23,6 +24,7 @@
     "react": "^18.2.0",
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^12.3.1",
     "react-pdf": "^6.2.2",
     "react-router-dom": "^6.3.0",
     "reactflow": "^11.5.6",

src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/SideBar.tsx

@@ -14,11 +14,13 @@ import { AdLerUIComponent } from "src/Components/Core/Types/ReactTypes";
 import tailwindMerge from "../../../Utils/TailwindMerge";
 import HelpDeskButton from "~ReactComponents/GeneralComponents/HelpDeskButton/HelpDeskButton";
 import HelpDeskModal from "~ReactComponents/GeneralComponents/HelpDeskModal/HelpDeskModal";
+import { useTranslation } from "react-i18next";
 
 export default function SideBar({ className }: AdLerUIComponent) {
   const [, controller] = useBuilder<SideBarViewModel, SideBarController>(
     BUILDER_TYPES.IMenuBarBuilder
   );
+  const { t } = useTranslation();
   return (
     <CustomDropdown
       className={tailwindMerge(className, "w-20")}
@@ -42,7 +44,7 @@ export default function SideBar({ className }: AdLerUIComponent) {
             <img src={spaceIcon} alt="" />
           </StyledButton>
           <p className="pl-2 text-sm font-bold lg:text-xl text-adlerdarkblue text-outline">
-            Lernraum-Menü
+            {t("sidebar_learningSpaceMenu", { ns: "learningSpace" })}
           </p>
         </div>
 
@@ -51,7 +53,7 @@ export default function SideBar({ className }: AdLerUIComponent) {
             <img src={worldIcon} alt="" />
           </StyledButton>
           <p className="pl-2 text-sm font-bold lg:text-xl text-adlerdarkblue text-outline">
-            Lernwelt-Menü
+            {t("sidebar_learningWorldMenu", { ns: "learningSpace" })}
           </p>
         </div>
 
@@ -60,21 +62,21 @@ export default function SideBar({ className }: AdLerUIComponent) {
             <img src={engineLogo} alt="" />
           </StyledButton>
           <p className="pl-2 text-sm font-bold lg:text-xl text-adlerdarkblue text-outline">
-            Hauptmenü
+            {t("sidebar_mainMenu", { ns: "learningSpace" })}
           </p>
         </div>
 
         <div className="flex flex-row items-center">
           <FullscreenSwitch />
           <p className="pl-2 text-sm font-bold lg:text-xl text-adlerdarkblue text-outline">
-            Vollbild
+            {t("sidebar_fullScreen", { ns: "learningSpace" })}
           </p>
         </div>
         <div className="flex flex-row items-center">
           <HelpDeskButton />
           <HelpDeskModal />
           <p className="pl-2 text-sm font-bold lg:text-xl text-adlerdarkblue text-outline">
-            Hilfe-Fenster
+            {t("sidebar_help", { ns: "learningSpace" })}
           </p>
         </div>
       </StyledContainer>

src/Components/Core/Presentation/React/ReactRelated/ReactEntryPoint/App.tsx

@@ -11,6 +11,7 @@ import IGetLoginStatusUseCase from "src/Components/Core/Application/UseCases/Get
 import USECASE_TYPES from "~DependencyInjection/UseCases/USECASE_TYPES";
 import InternetLossModal from "~ReactComponents/GeneralComponents/InternetLossModal/InternetLossModal";
 import LoadingScreen from "~ReactComponents/GeneralComponents/LoadingScreen/LoadingScreen";
+import "src/localize/i18next-config";
 
 export interface IAppProps {}
 

src/Components/Core/Presentation/React/ReactRelated/ReactEntryPoint/WelcomePage.tsx

@@ -4,8 +4,10 @@ import LearningWorldMenuButton from "~ReactComponents/WelcomePage/LearningWorldM
 import logo from "../../../../../../Assets/icons/00-engine-logo/adler-engine-logo.svg";
 import HelpDeskButton from "~ReactComponents/GeneralComponents/HelpDeskButton/HelpDeskButton";
 import HelpDeskModal from "~ReactComponents/GeneralComponents/HelpDeskModal/HelpDeskModal";
+import { useTranslation } from "react-i18next";
 
 export default function WelcomePage() {
+  const { t } = useTranslation();
   return (
     <div className="grid h-[100svh] grid-cols-5 grid-rows-6 p-6 bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto">
       <LoginComponent className="z-10 col-start-1 row-start-1 portrait:self-start portrait:justify-self-start" />
@@ -14,7 +16,7 @@ export default function WelcomePage() {
       <HelpDeskModal />
 
       <h1 className="self-end p-2 text-lg font-extrabold rounded-lg portrait:text-2xl portrait:row-start-1 portrait:row-span-1 portrait:col-start-1 portrait:col-span-5 landscape:col-span-2 landscape:col-start-4 landscape:row-start-1 text-adlerdarkblue lg:landscape:col-span-3 lg:landscape:col-start-2 xl:landscape:col-start-1 xl:landscape:col-span-5 lg:landscape:row-start-1 lg:p-5 justify-self-center lg:text-4xl 2xl:text-8xl">
-        Willkommen bei AdLer!
+        {t("start_welcome", { ns: "menu" })}
       </h1>
 
       <LearningWorldMenuButton className="self-center gap-4 m-1 portrait:row-start-5 portrait:col-start-1 portrait:col-span-5 landscape:col-span-2 landscape:col-start-4 landscape:row-span-3 landscape:row-start-3 justify-self-center w-fit h-fit lg:landscape:col-span-3 lg:landscape:self-start lg:landscape:col-start-2 lg:landscape:row-start-6" />
@@ -28,9 +30,7 @@ export default function WelcomePage() {
       </div>
 
       <p className="self-end p-2 text-xs text-center rounded-lg portrait:row-start-6 portrait:col-start-1 portrait:col-span-5 portrait:text-xs landscape:col-span-5 landscape:col-start-1 landscape:row-start-6 text-adlerdarkblue lg:text-md lg:font-semibold font-regular justify-self-center lg:landscape:row-start-6">
-        © Projekt AdLer, Technische Hochschule Aschaffenburg, Hochschule für
-        angewandte Wissenschaften Kempten, ZFH - Zentrum für Fernstudien im
-        Hochschulverbund
+        {t("start_copyright", { ns: "menu" })}
       </p>
     </div>
   );

src/Components/Core/Presentation/React/WelcomePage/LearningWorldMenuButton/LearningWorldMenuButtonView.tsx

@@ -10,6 +10,7 @@ import USECASE_TYPES from "~DependencyInjection/UseCases/USECASE_TYPES";
 import { useEffect } from "react";
 import { AdLerUIComponent } from "src/Components/Core/Types/ReactTypes";
 import tailwindMerge from "../../../Utils/TailwindMerge";
+import { useTranslation } from "react-i18next";
 
 export default function LearningWorldMenuButton({
   className,
@@ -21,6 +22,8 @@ export default function LearningWorldMenuButton({
     USECASE_TYPES.IGetLoginStatusUseCase
   );
 
+  const { t } = useTranslation();
+
   const [userLoggedIn, setUserLoggedIn] = useObservable<boolean>(
     viewModel?.userLoggedIn
   );
@@ -36,7 +39,7 @@ export default function LearningWorldMenuButton({
       disabled={!userLoggedIn}
       onClick={() => history.push("/worldmenu")}
     >
-      Gehe zum Lernwelt Menü
+      {t("start_learningWorldButton", { ns: "menu" })}
     </StyledButton>
   );
 }

src/localize/de/coreMenu.json

@@ -0,0 +1,5 @@
+{
+  "start_welcome": "Willkommen bei AdLer!",
+  "start_learningWorldButton": "Gehe zum Lernwelt Menü",
+  "start_copyright": "© Projekt AdLer, Technische Hochschule Aschaffenburg, Hochschule für angewandte Wissenschaften Kempten, ZFH - Zentrum für Fernstudien im Hochschulverbund"
+}

src/localize/de/learningSpace.json

@@ -0,0 +1,7 @@
+{
+  "sidebar_learningSpaceMenu": "Lernraum-Menü",
+  "sidebar_learningWorldMenu": "Lernwelt-Menü",
+  "sidebar_mainMenu": "Hauptmenü",
+  "sidebar_fullScreen": "Vollbild",
+  "sidebar_help": "Hilfe-Fenster"
+}

src/localize/en/coreMenu.json

@@ -0,0 +1,5 @@
+{
+  "start_welcome": "Welcome to AdLer!",
+  "start_learningWorldButton": "Go to Learning World menu",
+  "start_copyright": "© Project AdLer, University of Applied Sciences Aschaffenburg, University of Applied Sciences Kempten, ZFH - Zentrum für Fernstudien in university association"
+}

src/localize/en/learningSpace.json

@@ -0,0 +1,7 @@
+{
+  "sidebar_learningSpaceMenu": "Learning space menu",
+  "sidebar_learningWorldMenu": "Learning world menu",
+  "sidebar_mainMenu": "Main menu",
+  "sidebar_fullScreen": "Fullscreen",
+  "sidebar_help": "Help"
+}