Added Help Page

anwendung/src/pages/_app.js

@@ -1,5 +1,6 @@
 import '@/styles/globals.css'
 import '@/styles/calendarSideBar.css'
+import '@/styles/helppage.css'
 
 export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />

anwendung/src/pages/help.js

@@ -0,0 +1,97 @@
+import Background from "@/components/Background";
+import Back from "@/components/Back";
+import {useRouter} from "next/router";
+import screen1 from "@/images/screen1.png"
+import screen2 from "@/images/screen2.png"
+import screen3 from "@/images/screen3.png"
+import screen4 from "@/images/screen4.png"
+import screen5 from "@/images/screen5.png"
+import screen6 from "@/images/screen6.png"
+import screen7 from "@/images/screen7.png"
+
+export default function Help(p)
+{
+    const router = useRouter()
+
+    return (
+        <div>
+
+            <div className={"help-line"}>
+                <img src={screen1.src}/>
+                <div className={"text-form"}>
+                    <h1>Die Monats-Seiten-Leiste</h1>
+                    <p>- Hier kannst du sehen in welchem Monat du dich aktuell befindest (blau hinterlegt).</p>
+                    <p>- Durch einen Links-Klick auf eine Monatskacheln kannst du direkt an den Anfang dieses Monats springen</p>
+                </div>
+            </div>
+
+            <div className={"help-line"}>
+                <img src={screen2.src}/>
+                <div className={"text-form"}>
+                    <h1>Die Planungs-Ansicht</h1>
+                    <p>- Hier siehst du alle deine Termine in grün (bzw. gelb bei Warnungen) und von anderen Dozenten in grau</p>
+                    <p>- Durch einen Links-Klick kannst du eine neue Vorlesung an einem Tag erstellen</p>
+                    <p>- Durch Halten der dunkleren Leisten kannst du die Zeiten des Termins anpassen</p>
+                    <p>- Durch Rechts-Klick kannst du eine Vorlesung löschen</p>
+                    <p>- Durch Klicken auf die Pfeiltasten oben kannst du die Woche wechseln</p>
+                    <p>- Bitte beachte, dass du Vorlesungen nur zwischen den beiden Roten linien erstellen kannst</p>
+                    <p>- Ausgegraute Tage liegen nicht im Semester, hier kannst du nicht planen</p>
+                </div>
+            </div>
+
+            <div className={"help-line"}>
+                <img src={screen3.src}/>
+                <div className={"text-form"}>
+                    <h1>Die Warnungs-Ansicht</h1>
+                    <p>- Sollte ein Termin gelb erscheinen kannst du hier sehen woran das liegt</p>
+                    <p>- Warnung sind empfohlene Verbesserungsverschläge aber müssen nicht zwangshaft beachtet werden</p>
+                    <p>- Sollte hier "Okay" für einen Tag stehen ist alles perfekt</p>
+                </div>
+            </div>
+
+            <div className={"help-line"}>
+                <img src={screen5.src}/>
+                <div className={"text-form"}>
+                    <h1>Der Login</h1>
+                    <p>- Hier kannst du dich mit deiner Email und deinem Passwort einloggen</p>
+                </div>
+            </div>
+
+            <div className={"help-line"}>
+                <img src={screen4.src}/>
+                <div className={"text-form"}>
+                    <h1>Der Logout</h1>
+                    <p>- Über diesen Button kannst du dich ausloggen</p>
+                    <p>- Loggst du dich nicht selbst aus, wirst du nach 2 Stunden automatisch ausgeloggt</p>
+                </div>
+            </div>
+
+            <div className={"help-line"}>
+                <img src={screen6.src}/>
+                <div className={"text-form"}>
+                    <h1>Das Dashboard</h1>
+                    <h2>Für Admins:</h2>
+                    <p>- Über den "+" Knopf kannst du ein neues Semester erstellen</p>
+                    <p>- Über den Stift kannst du ein bestehendes Semester editieren</p>
+                    <p>- Über den Mülleimer kannst du ein bestehndes Semester löschen</p>
+                    <h2>Für Dozenten (und Admins):</h2>
+                    <p>- Hier siehst du deine Semester mit den jeweiligen Modulen</p>
+                    <p>- Sollte ein Semester bei dir Ausgegraut sein, wurdest du für dieses schon gewählt aber noch nicht freigeschalten</p>
+                    <p>- Duch einen Links-Klick auf ein weises Semester kann in die Planungsübersicht gewechselt werden</p>
+                </div>
+            </div>
+
+            <div className={"help-line"}>
+                <img src={screen7.src}/>
+                <div className={"text-form"}>
+                    <h1>Semester erstellen / bearbeiten</h1>
+                    <p>- Hier kannst du alle daten wie Name, Start- und Endzeitpunkt eines Semesters eintragen</p>
+                    <p>- Du kannst einen Dozenten "wählen" d.h. er soll in diesem Semester dozieren</p>
+                    <p>- Jedem Dozenten kannst du ein Modul zuordnen, welches er dozieren soll</p>
+                    <p>- Sobald du die Schaltfläche "Freischalten" aktiviert hast, kann der Dozent mit der eigenständigen Planung beginnen.</p>
+                    <p>- Jeder genannte Schritt, insbesondere der Letzte kann auch nachträglich im Bearbeitungsmodus ausgeführt werden</p>
+                </div>
+            </div>
+        </div>
+    )
+}

anwendung/src/pages/index.js

@@ -3,6 +3,7 @@ import React, {useEffect, useState} from "react";
 import Login from "@/components/Login";
 import Background from "@/components/Background";
 import {useRouter} from "next/router";
+import HelpButton from "@/components/HelpButton";
 
 
 const inter = Inter({subsets: ['latin']})
@@ -25,6 +26,7 @@ export default function Home(p) {
 
         <div className={"normal-centered"}>
             <Background/>
+            <HelpButton/>
             <h1 style={{
                 fontSize: 40,
                 fontWeight: "bold",

anwendung/src/pages/planning.js

@@ -4,6 +4,7 @@ import Logout from "@/components/Logout";
 import Back from "@/components/Back";
 import BasicDateCalendar from "@/components/CalendarSideBar";
 import {useRouter} from "next/router";
+import HelpButton from "@/components/HelpButton";
 
 
 export default function planning(p)
@@ -14,6 +15,7 @@ export default function planning(p)
         <div className={"normal-centered"}>
             <Logout/>
             <Back onClick={() => router.back()}/>
+            <HelpButton/>
             <Background/>
             <CalenderView/>
           </div>

anwendung/src/pages/semesteroverview.js

@@ -7,6 +7,7 @@ import PopUp from "@/components/PopUp";
 import Background from "@/components/Background";
 import Logout from "@/components/Logout";
 import {baseURL} from "@/components/Constants";
+import HelpButton from "@/components/HelpButton";
 
 export default function SemesterOverview(p)
 {
@@ -102,6 +103,7 @@ export default function SemesterOverview(p)
     return (
         <div className={"semester-overview"}>
             <Logout/>
+            <HelpButton/>
             <Background/>
             {
                 entries.map(e => (<SemesterTile text={e.name} onClick={(f) => onClickSemester(e, f)} onButtonDeleteClick={() => {

anwendung/src/pages/semesteroverviewLecturer.js

@@ -8,6 +8,7 @@ import Background from "@/components/Background";
 import Logout from "@/components/Logout";
 import {baseURL} from "@/components/Constants"
 import Back from "@/components/Back";
+import HelpButton from "@/components/HelpButton";
 
 export default function SemesteroverviewLecturer(p) {
     function getModules() {
@@ -61,6 +62,7 @@ export default function SemesteroverviewLecturer(p) {
         <div className={"semester-overview"}>
             <Logout/>
             <Background/>
+            <HelpButton/>
             {entries.map((e, index) => (
                 <SemesterTile
                     editable = {false} text={semesterNames[index]} text2={e.name} onClick={(f) => onClickSemester(e, f)} color={e.activated==1?"#ffffff":"#aaaaaa"}