Help (#410)

* chore: create help pages routes * chore: added base layout and header for help * chore: startup sidebar menu * chore: basic sidebar * chore: basic vitepress setup * chore: make buttons on startpage work with i18n * chore: start student help nl * chore: cleanup capitals * chore: student help page nl * chore: finished first draft of help for students * chore: lint fix * chore:teacher join command * chore: fix linter * fix: little fixes * fix: en translations * chore: small cleanup * chore: add scafolding for other types of users their help pages * chore: refactor to cleanup for other types of help pages * chore: add teacher help page (wip) * chore: add assistant help page (WIP) * chore: add poetry.lock * fix: little cleanup * fix: assistants help --------- Co-authored-by: Bram Meir <[email protected]>
SELab-2 · May 10, 2024 · c46cd7c · c46cd7c
1 parent ced2428
commit c46cd7c
Show file tree

Hide file tree

Showing 41 changed files with 2,359 additions and 1,280 deletions.
diff --git a/docs/assets/assistant/en/course-create-button.png b/docs/assets/assistant/en/course-create-button.png
diff --git a/docs/assets/assistant/en/modus-change.png b/docs/assets/assistant/en/modus-change.png
diff --git a/docs/assets/assistant/en/private-course-button.png b/docs/assets/assistant/en/private-course-button.png
diff --git a/docs/assets/assistant/nl/course-create-button.png b/docs/assets/assistant/nl/course-create-button.png
diff --git a/docs/assets/assistant/nl/modus-change.png b/docs/assets/assistant/nl/modus-change.png
diff --git a/docs/assets/assistant/nl/private-course-button.png b/docs/assets/assistant/nl/private-course-button.png
diff --git a/docs/assets/modus-change.png b/docs/assets/modus-change.png
diff --git a/docs/assets/en/group-join.png → docs/assets/student/en/group-join.png b/docs/assets/en/group-join.png → docs/assets/student/en/group-join.png
diff --git a/docs/assets/en/group-leave.png → docs/assets/student/en/group-leave.png b/docs/assets/en/group-leave.png → docs/assets/student/en/group-leave.png
diff --git a/docs/assets/en/join-course.png → docs/assets/student/en/join-course.png b/docs/assets/en/join-course.png → docs/assets/student/en/join-course.png
diff --git a/docs/assets/student/en/lang-change.png b/docs/assets/student/en/lang-change.png
diff --git a/docs/assets/en/leave-course.png → docs/assets/student/en/leave-course.png b/docs/assets/en/leave-course.png → docs/assets/student/en/leave-course.png
diff --git a/docs/assets/student/en/logout-button.png b/docs/assets/student/en/logout-button.png
diff --git a/docs/assets/student/en/project-card.png b/docs/assets/student/en/project-card.png
diff --git a/docs/assets/student/en/project-list.png b/docs/assets/student/en/project-list.png
diff --git a/docs/assets/student/modus-change.png b/docs/assets/student/modus-change.png
diff --git a/docs/assets/nl/group-join.png → docs/assets/student/nl/group-join.png b/docs/assets/nl/group-join.png → docs/assets/student/nl/group-join.png
diff --git a/docs/assets/nl/group-leave.png → docs/assets/student/nl/group-leave.png b/docs/assets/nl/group-leave.png → docs/assets/student/nl/group-leave.png
diff --git a/docs/assets/nl/join-course.png → docs/assets/student/nl/join-course.png b/docs/assets/nl/join-course.png → docs/assets/student/nl/join-course.png
diff --git a/docs/assets/student/nl/lang-change.png b/docs/assets/student/nl/lang-change.png
diff --git a/docs/assets/nl/leave-course.png → docs/assets/student/nl/leave-course.png b/docs/assets/nl/leave-course.png → docs/assets/student/nl/leave-course.png
diff --git a/docs/assets/student/nl/logout-button.png b/docs/assets/student/nl/logout-button.png
diff --git a/docs/assets/student/nl/project-card.png b/docs/assets/student/nl/project-card.png
diff --git a/docs/assets/student/nl/project-list.png b/docs/assets/student/nl/project-list.png
diff --git a/docs/assets/teacher/course-share-button.png b/docs/assets/teacher/course-share-button.png
diff --git a/docs/assets/teacher/en/course-create-button.png b/docs/assets/teacher/en/course-create-button.png
diff --git a/docs/assets/teacher/en/modus-change.png b/docs/assets/teacher/en/modus-change.png
diff --git a/docs/assets/teacher/en/private-course-button.png b/docs/assets/teacher/en/private-course-button.png
diff --git a/docs/assets/teacher/nl/course-create-button.png b/docs/assets/teacher/nl/course-create-button.png
diff --git a/docs/assets/teacher/nl/modus-change.png b/docs/assets/teacher/nl/modus-change.png
diff --git a/docs/assets/teacher/nl/private-course-button.png b/docs/assets/teacher/nl/private-course-button.png
diff --git a/docs/en/admin-examples.md b/docs/en/admin-examples.md
@@ -0,0 +1,25 @@
+# Admin Help Page
+
+This page describes how to interact with Ypovoli as a admin.
+
+## Login/Logout
+
+**Login**
+
+- On the login page, there is a button with the text "UGent login".
+
+![login button](../assets/login-button.png)
+- Click on this button. You will be redirected to the UGent login page.
+- Select the desired account and follow the login steps. You will be redirected to the dashboard.
+
+**Logout**
+
+- Click on your name in the navigation bar.
+
+![logout button](../assets/en/logout-button.png)
+
+## Change Language
+
+- Click on the arrow next to EN at the top of the navigation bar and select the desired language.
+
+![language choice button](../assets/en/lang-change.png)
diff --git a/docs/en/assistant-examples.md b/docs/en/assistant-examples.md
@@ -0,0 +1,101 @@
+# Assistant Help Page
+
+This page describes how to interact with Ypovoli as an assistant.
+
+## Login/Logout
+
+**Login**
+
+- On the login page, there is a button with the text "UGent login".
+
+![login button](../assets/login-button.png)
+- Click on this button. You will be redirected to the UGent login page.
+- Select the desired account and follow the login steps. You will be redirected to the dashboard.
+
+**Logout**
+
+- Click on your name in the navigation bar.
+
+![logout button](../assets/en/logout-button.png)
+
+## Change Language
+
+- Click on the arrow next to EN at the top of the navigation bar and select the desired language.
+
+![language choice button](../assets/en/lang-change.png)
+
+## Change Mode
+
+::: danger Caution!
+- Only possible if the user has multiple roles like student, teacher, assistant, or admin.
+:::
+
+- Click on the arrow next to the currently selected role at the top of the navigation bar.
+- Choose the new role with which you want to view the page.
+
+![mode choice button](../assets/assistant/en/modus-change.png)
+
+## Course Details
+- Click on "Dashboard" in the navigation bar.
+- Scroll down to the "My Courses" section.
+- Click on the details button next to the desired course.
+
+![course card](../assets/course-card.png)
+
+::: tip
+- If you want to view a course from a previous academic year, select the correct year in the academic year selector.
+:::
+
+## Creating a Project
+
+- Option 1:
+    - Click on "Dashboard" in the navigation bar.
+    - Click on "Create new project".
+- Option 2:
+    - Click on "Calendar" in the navigation bar.
+    - Click on "Create new project".
+- Option 3:
+    - Go to the detail page of a course (see [Course Details](#course-details)).
+    - Scroll to "Current Projects".
+    - Click on the + button.
+
+## Viewing Projects
+
+![projects list](../assets/en/project-list.png)
+
+- Option 1:
+  - Click on "Dashboard" in the navigation bar.
+  - At the top of the page, there is a "Current Projects" section.
+  ::: info
+  - Here are all the projects with a deadline within the next 7 days on the left and all projects on the right.
+  - Use the toggle button at the top to view projects with expired deadlines.
+  :::
+- Option 2:
+  - Click on "Calendar" in the navigation bar.
+  - On the calendar, an indication of the number of deadlines on a specific day is given using a red circle.
+  - Select a day with projects and click on the desired project.
+- Option 3:
+  - Click on "Dashboard" in the navigation bar.
+  - Scroll to the "My Courses" section.
+  - Click on the course of the desired project.
+  - Under the "Current Projects" section, you will see all projects for this specific course.
+- Option 4:
+  - Click on "Projects" in the navigation bar.
+  - You will see an overview of all your projects.
+
+::: info Project Card Explanation
+<!-- TODO maybe add a photo and indicate with numbers -->
+![project card](../assets/en/project-card.png)
+
+The card is divided as follows:
+- Name of the associated course.
+- Brief description of this course.
+- Start date and deadline of the project.
+- Progress bar of all students, including the number of submissions and the number of groups.
+- Status of the tests performed for these submissions.
+:::
+
+## Searching for Course Instructors
+- Go to the detail page of the course (see [Course Details](#course-details)).
+- Scroll to the "Instructors Linked to This Course" section.
+- Here you will find a list of the instructors for this course.
diff --git a/docs/en/student-examples.md b/docs/en/student-examples.md
@@ -34,13 +34,13 @@ This page describes how to interact with Ypovoli as a student.
 - Click on the arrow next to the currently selected role at the top of the navigation bar.
 - Choose the new role with which you want to view the page.
 
-![mode choice button](../assets/modus-change.png)
+![mode choice button](../assets/student/modus-change.png)
 
 ## Enroll in/Leave Course
 
 <div style="display: flex; align-items: center;">
-    <img src="../assets/en/join-course.png" alt="course enroll button" style="width: auto; height: auto; margin-right: 10px;">
-    <img src="../assets/en/leave-course.png" alt="course leave button" style="width: auto; height: auto;">
+    <img src="../assets/student/en/join-course.png" alt="course enroll button" style="width: auto; height: auto; margin-right: 10px;">
+    <img src="../assets/student/en/leave-course.png" alt="course leave button" style="width: auto; height: auto;">
 </div>
 
 **Enroll**
@@ -117,13 +117,13 @@ This page describes how to interact with Ypovoli as a student.
 
   **Join**
 
-  ![group join](../assets/en/group-join.png)
+  ![group join](../assets/student/en/group-join.png)
 - Go to the detail page for the chosen project.
 - Click on the chosen group and click on "Choose group".
 - You are successfully enrolled in this group.
 
 **Leave**
-  ![group leave](../assets/en/group-leave.png)
+  ![group leave](../assets/student/en/group-leave.png)
 - Go to the project detail page.
 - Click on leave group.
 

diff --git a/docs/en/teacher-examples.md b/docs/en/teacher-examples.md
@@ -0,0 +1,124 @@
+# Teacher Help Page
+
+This page describes how to interact with Ypovoli as a teacher.
+
+## Login/Logout
+
+**Login**
+
+- On the login page, there is a button with the text "UGent login".
+
+![login button](../assets/login-button.png)
+- Click on this button. You will be redirected to the UGent login page.
+- Select the desired account and follow the login steps. You will be redirected to the dashboard.
+
+**Logout**
+
+- Click on your name in the navigation bar.
+
+![logout button](../assets/en/logout-button.png)
+
+## Change Language
+
+- Click on the arrow next to EN at the top of the navigation bar and select the desired language.
+
+![language choice button](../assets/en/lang-change.png)
+
+## Change Mode
+
+::: danger Caution!
+- Only possible if the user has multiple roles like student, teacher, assistant, or admin.
+:::
+
+- Click on the arrow next to the currently selected role at the top of the navigation bar.
+- Choose the new role with which you want to view the page.
+
+![mode choice button](../assets/teacher/en/modus-change.png)
+
+## Creating a Course
+- Click on "Dashboard" in the navigation bar.
+- Scroll down to the "My Courses" section.
+- Click on the + button.
+
+![course creation button](../assets/teacher/en/course-create-button.png)
+
+:::info
+If you only want to make your course available via an invitation link, you can do so using this button.
+![private course button](../assets/teacher/en/private-course-button.png)
+
+:::danger
+- Activate this link via the share button (maximum validity is 28 days).
+<div style="display: flex; align-items: center;">
+    <img src="../assets/teacher/course-share-button.png" alt="course share button" style="width: auto; height: 75px; margin-right: 10px;">
+</div>
+:::
+
+## Course Details
+- Click on "Dashboard" in the navigation bar.
+- Scroll down to the "My Courses" section.
+- Click on the details button next to the desired course.
+
+![course card](../assets/course-card.png)
+
+::: tip
+- If you want to view a course from a previous academic year, select the correct year in the academic year selector.
+:::
+
+## Creating a Project
+
+- Option 1:
+    - Click on "Dashboard" in the navigation bar.
+    - Click on "Create new project".
+- Option 2:
+    - Click on "Calendar" in the navigation bar.
+    - Click on "Create new project".
+- Option 3:
+    - Go to the detail page of a course (see [Course Details](#course-details)).
+    - Scroll to "Current Projects".
+    - Click on the + button.
+
+## Viewing Projects
+
+![projects list](../assets/en/project-list.png)
+
+- Option 1:
+  - Click on "Dashboard" in the navigation bar.
+  - At the top of the page, there is a "Current Projects" section.
+  ::: info
+  - Here are all the projects with a deadline within the next 7 days on the left and all projects on the right.
+  - Use the toggle button at the top to view projects with expired deadlines.
+  :::
+- Option 2:
+  - Click on "Calendar" in the navigation bar.
+  - On the calendar, an indication of the number of deadlines on a specific day is given using a red circle.
+  - Select a day with projects and click on the desired project.
+- Option 3:
+  - Click on "Dashboard" in the navigation bar.
+  - Scroll to the "My Courses" section.
+  - Click on the course of the desired project.
+  - Under the "Current Projects" section, you will see all projects for this specific course.
+- Option 4:
+  - Click on "Projects" in the navigation bar.
+  - You will see an overview of all your projects.
+
+::: info Project Card Explanation
+<!-- TODO maybe add a photo and indicate with numbers -->
+![project card](../assets/en/project-card.png)
+
+The card is divided as follows:
+- Name of the associated course.
+- Brief description of this course.
+- Start date and deadline of the project.
+- Progress bar of all students, including the number of submissions and the number of groups.
+- Status of the tests performed for these submissions.
+:::
+
+## Searching and Editing Course Instructors
+- Go to the detail page of the course (see [Course Details](#course-details)).
+- Scroll to the "Instructors Linked to This Course" section.
+- Here you will find a list of the instructors for this course.
+
+::: info
+- Via the edit button, you can add/remove instructors to/from this course.
+- Via the trash can icon, you can remove instructors from this course (only if there is more than one remaining instructor).
+:::
diff --git a/docs/nl/admin-examples.md b/docs/nl/admin-examples.md
@@ -0,0 +1,25 @@
+# Admin help pagina
+
+Deze pagina beschrijft hoe u als administrator met Ypovoli interageert.
+
+## Login/Logout
+
+**Login**
+
+- Op de login pagina staat een knop met tekst UGent login.
+
+![login knop](../assets/login-button.png)
+- Druk op deze knop. U wordt doorverwezen naar de UGent inlogpagina.
+- Selecteer het gewenste account en volg de login stappen. U wordt doorverwezen naar het dashboard.
+
+**Logout**
+
+- Druk op uw naam in de navigatiebalk.
+
+![logout knop](../assets/nl/logout-button.png)
+
+## Taal veranderen
+
+- Druk bovenaan in de navigatiebalk op het pijltje naast NL en selecteer de gewenste taal.
+
+![taal keuze knop](../assets/nl/lang-change.png)