Added Help Page

anwendung/src/components/CalenderView.jsx

@@ -270,7 +270,7 @@ export default function CalenderView(p) {
         if (e.button === 0) {
             if (!currentId.includes("e")) {
                 if (!currentId.includes("grab")) {
-                    if (!checkForElementAtRow(row + 2, currentColumnID)) {
+                    if (!checkForElementAtRow(row + 2, currentColumnID) && !checkForElementAtRow(row+1, currentColumnID)) {
                         if ((row - 1) / 4 >= 7 && (row + 2) / 4 <= 18) {
                             if(!grayedOut[currentColumnID]) {
                                 pushEntry(currentColumnID, row)

anwendung/src/components/HelpButton.jsx

@@ -0,0 +1,19 @@
+import Button from "@/components/Button";
+import {helpButton} from "@/components/Icons";
+import {useRouter} from "next/router";
+
+export default function HelpButton(p)
+{
+    const router = useRouter()
+
+    return (
+        <div style={{
+            position: "absolute",
+            bottom: 20,
+            right: 20,
+            borderRadius: 15
+        }} className={"box-shadow"}>
+            <Button width={40} height={40} color={"white"} icon={helpButton} onClick={() => router.push("/help")}/>
+        </div>
+    )
+}

anwendung/src/components/Icons.js

@@ -14,6 +14,6 @@ export const editItem = `<svg xmlns="http://www.w3.org/2000/svg" fill="black" cl
   <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
 </svg>`
 
-export const buttonBack = `<svg xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-arrow-return-left" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z"/>
+export const helpButton = `<svg xmlns="http://www.w3.org/2000/svg" fill="black" class="bi bi-question" viewBox="0 0 16 16">
+  <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
 </svg>`

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"}

anwendung/src/styles/helppage.css

@@ -0,0 +1,31 @@
+.help-line
+{
+    padding: 30px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 50px;
+}
+.text-form
+{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    height: 100%;
+
+}
+
+.text-form h1
+{
+    font-size: 30px;
+}
+.text-form p
+{
+    font-size: 20px;
+}
+
+.text-form h2
+{
+    font-size: 26px;
+}