Merge pull request #317 from SELab-2/documentation/feature/manual

Documentatie: Handleiding

README.md

@@ -25,4 +25,5 @@ Software Engineering Lab II (2022 - 2023)
 
 ## Documentatie
 
-Er is documentatie te vinden op [GitHub Wiki](https://github.com/SELab-2/Dr-Trottoir-1/wiki), alsook in [`/api/README.md`](https://github.com/SELab-2/Dr-Trottoir-1/api/README.md) en [`./server/README.md`](https://github.com/SELab-2/Dr-Trottoir-1/server/README.md).
+Elk van bovenstaande mappen bevat een `README.md` file die documentatie over dat onderwerp aanbiedt.
+De handleiding van de applicatie is [hier](docs/manual/manual_home.md) terug te vinden.

docs/README.md

@@ -1,3 +1,3 @@
 # Documentatie
-
-Documentatie omtrent dit project kan terug gevonden worden op de [wiki](https://github.com/SELab-2/Dr-Trottoir-1/wiki).
+Alle belangrijke mappen in dit project hebben een `README.md` bestand waarin documentatie over hun map staat.
+De handleiding van de applicatie is [hier](manual/manual_home.md) terug te vinden.

docs/manual/README.md

@@ -0,0 +1,32 @@
+# Manual
+
+Deze map bevat alles omtrent de handleiding.
+
+## Structuur handleiding
+De handleiding heeft een [hoofdpagina](./manual_home.md).
+Hieruit kan men doorlinken naar de gebruikerspagina's: `docs/manual/users`.
+Deze pagina's bevatten nuttige beschrijvingen voor de verschillende gebruikers en
+linken op hun beurt door naar de handleidingen voor elke pagina van de applicatie: `docs/manual/pages`.
+
+## Afbeeldingen
+### Weergeven
+De handleiding bevat afbeeldingen om de gebruiker door middel van illustraties op weg te helpen.
+Deze afbeeldingen zijn in `docs/manual/assets` terug te vinden. Gebruik voor het toevoegen
+van een afbeelding in de handleiding de volgende template:
+
+```markdown
+|          Titel afbeelding           |
+|:-----------------------------------:|
+| ![](relatief/path/naar/afbeelding.) |
+```
+Voor kleine afbeeldingen kunnen er indien gewenst 2 naast elkaar geplaatst worden
+door de markdown tabel uit te breiden in de breedte.
+
+### Maken
+Soms kan het nuttig zijn om annotaties aan een afbeelding toe te voegen. Bijvoorbeeld nummers
+toevoegen aan knoppen om zo een stappenplan te verduidelijken voor een actie. In de tekst horende
+bij de afbeelding kan men dan verwijzen naar deze nummers.
+
+- Op Linux gebruiken we [Annotator](https://github.com/phase1geo/Annotator) omdat het eenvoudig
+en snel werkt.
+- Op Windows is hierover nog geen beslissing gemaakt. Vul deze README dan zeker aan.

docs/manual/manual_home.md

@@ -0,0 +1,17 @@
+# Handleiding
+Welkom bij de gebruikershandleiding van de Dr-Trottoir-1 softwareapplicatie.
+In deze handleiding kan u alles omtrent het gebruik van de softwareapplicatie voor
+elk type gebruiker terugvinden.
+
+## Gebruikers
+Voor het gebruik van de applicatie wordt er onderscheid gemaakt tussen verschillende types van gebruikers.
+Elk type gebruiker heeft meer of minder machtigingen zodat ze elk in staat zijn hun taken uit te voeren.
+
+- [**Student**](users/student.md): Gebruiker die afval ophaalt.
+- [**Superstudent**](users/superstudent.md): Gebruiker die op studenten toeziet.
+- [**Syndicus**](users/syndicus.md): Eigenaar van een gebouw.
+- [**Admin**](users/admin.md): Administrator gebruiker.
+
+
+
+

docs/manual/navbar.md

@@ -0,0 +1,20 @@
+# Navigatiebalk
+Een gebruiker kan snel en eenvoudig door de applicatie navigeren door van de navigatiebalk gebruik te maken.
+Naargelang het type gebruiker zal u meer of minder opties hebben in de navigatiebalk.
+
+## Openen en sluiten
+### Student
+De navigatiebalk kan de student openen door op het hamburgermenu (☰) te klikken en sluiten door naast de
+openstaande navigatiebalk te klikken.
+
+|          Open navigatie          |          Sluit navigatie          |
+|:--------------------------------:|:---------------------------------:|
+| ![](assets/student_open_nav.jpg) | ![](assets/student_close_nav.jpg) |
+
+### Superstudent, Syndicus, Admin
+De superstudent, syndicus en admin kunnen de navigatie balk openen door op het hamburgermenu (☰) te klikken.
+Om de navigatie balk te sluiten, klikt men simpelweg nogmaals op het hamburgermenu (☰).
+
+|        Open / sluit navigatie        |
+|:------------------------------------:|
+| ![](assets/nav_other_open_close.jpg) |

docs/manual/pages/account/account.md

@@ -0,0 +1,32 @@
+# Accountpagina
+
+|           Account pagina            |                   Account pagina                    |
+|:-----------------------------------:|:---------------------------------------------------:|
+| ![](../../assets/account_stats.png) | ![](../../assets/account_persoonlijke_gegevens.png) |
+
+Een [student](../../users/student.md), [administrators](../../users/admin.md), [superstudenten](../../users/superstudent.md) en [syndici](../../users/syndicus.md) kan zijn persoonlijke informatie op deze pagina terugvinden. (email,telefoonnummer,adres)
+
+## Hoe bereiken
+
+Elke gebruiker kan zijn eigen accountpagina vinden door in de navbar op zijn eigen naam te klikken.
+De administrator en superstudent kunnen de verschillende gebruikers vinden door in [gebruikers](../administration/gebruikers.md) op een naam te klikken.
+
+## Workflow
+
+Bij het openen van die pagina wordt alle informatie getoond over de gebruiker. Als men deze wil wijzigen kan men op de knop [Bewerk account](update_account.md)(1) klikken.
+
+
+## Gebruikers
+
+### Studenten (mobiel)
+
+Voor [studenten](../../users/student.md) zal de pagina meestal op een kleiner scherm gebruikt worden.
+Hiervoor voorzien we in plaats van de grote `Bewerk Account` knop een kleinere knop met een potlood in.
+
+## superstudent
+
+Een [superstudent](../../users/superstudent.md) kan ook de statistieken van andere gebruikers bekijken.
+
+### Admin
+
+De [administrator](../../users/admin.md) gaat ook zijn verschillende rollen kunnen zien.

docs/manual/pages/account/login.md

@@ -0,0 +1,25 @@
+# Login
+Voordat u de applicatie kan gebruiken, moet u eerst ingelogd zijn.
+
+## Nog geen account
+
+Indien u nog niet over een account beschikt, kan u er een aanvragen.
+Na het klikken op de `Contacteer ons` link zal er een popup verschijnen met de contactgegevens van
+een Dr. Trottoir medewerker. Hiernaar kan u uw account-aanvraag doorsturen.
+
+|       Account aanvragen       |
+|:-----------------------------:|
+| ![](../../assets/no_account.jpg) |
+
+## Inloggen
+Als u beschikt over uw accountgegevens kan u inloggen met de volgende 4 stappen:
+1. Geef uw e-mailadres op in het daarvoor voorziene invoerveld.
+2. Geef uw wachtwoord op in het daarvoor voorziene wachtwoordveld.
+3. Indien u uw wachtwoord wilt lezen, kan u op het oog icoon (👁) klikken. Klik nogmaals
+op het oog icoon om uw wachtwoord opnieuw te verbergen.
+4. Eenmaal u uw logingegevens correct heeft ingevoerd, kan u inloggen door op de `Login`
+knop te duwen.
+
+|            Inloggen            |
+|:------------------------------:|
+| ![](../../assets/login_steps.jpg) |

docs/manual/pages/account/update_account.md

@@ -0,0 +1,33 @@
+# Account bewerken
+
+
+|       Account bewerken pagina        |
+|:------------------------------------:|
+| ![](../../assets/update_account.png) |
+
+Een [student](../../users/student.md), [administrators](../../users/admin.md),[superstudenten](../../users/superstudent.md) en [syndici](../../users/syndicus.md) kan zijn persoonlijke informatie op deze pagina veranderen. (email,telefoonnummer,adres, wachtwoord)
+
+
+## Hoe bereiken
+
+De account-bewerkingspagina kan gevonden worden door in de [accountpagina](account.md) op `Bewerk Account` te klikken.
+
+## Workflow
+
+Bij het openen ziet de gebruiker de huidige persoonlijke informatie.
+Deze velden kunnen gewijzigd worden door in het veld de waarde aan te passen.
+
+1. Als men de veranderde waarden toch niet wil opslaan, kan men op `Annuleer aanpassingen` klikken.
+
+2. Als u de wijzigingen wilt opslaan, kan u op de knop `Sla op` klikken.
+
+## Gebruikers
+
+### Studenten (mobiel)
+
+Voor [studenten](../../users/student.md) zal de pagina meestal op een kleiner scherm gebruikt worden.
+Hiervoor voorzien we in plaats van de grote `Annuleer aanpassingen` knop een kleinere knop met een kruis in.
+
+### Administrators
+
+De [administrator](../../users/admin.md) gaat ook zijn rollen kunnen veranderen.

docs/manual/pages/administration/email-sjablonen.md

@@ -0,0 +1,34 @@
+# E-mail sjablonen
+Bij het sturen van een mail naar een syndicus (op een [andere pagina](../contact/contact_syndicus.md)) kunnen vooraf geschreven
+sjablonen van e-mails gebruikt worden. Op die manier moeten superstudenten en admins niet elke keer een gelijkaardige
+mail opstellen. Het enige dat ze bij de sjablonen nog moeten doen, is het aanpassen van specifieke
+variabelen, zoals namen, adressen ...
+
+De sjablonen kunnen enkel door superstudenten en administratoren aangemaakt worden.
+
+## Workflow
+Bij het openen van de pagina worden alle bestaande e-mail sjablonen opgelijst.
+Hierbij kan je een sjabloon aanpassen (optie 1), deze verwijderen (optie 2)
+of een nieuwe aanmaken (optie 3).
+De naam van het sjabloon geeft meer informatie over de inhoud van de mail.
+
+
+|            Overzicht van e-mail sjablonen            |
+|:----------------------------------------------------:|
+| ![](../../assets/administration/email_templates.jpg) |
+
+Als een gebruiker een sjabloon wil bewerken of toevoegen, wordt hij doorverwezen naar een andere pagina, hieronder afgebeeld.
+1. Bij het opstellen van een sjabloon kunnen verschillende variabelen gebruikt worden.
+Voordat de e-mail dan [gestuurd wordt](../contact/contact_syndicus.md),
+moet de superstudent/admin deze variabelen nog vervangen door de bijhorende waarden.
+2. In dit veld wordt de naam van het sjabloon bijgehouden zodat de inhoud ervan meteen duidelijk is.
+Hierin worden geen variabelen gebruikt, dit is louter ter informatie voor de superstudent/admin.
+3. Hier wordt het onderwerp van de e-mail geplaatst en deze mag wel variabelen bevatten.
+4. Ook de inhoud van de mail mag variabelen bevatten.
+
+Bij het aanpassen van een sjabloon worden al deze velden
+reeds ingevuld en kan de superstudent/admin kleine wijzigingen aanbrengen.
+
+|             E-mail sjabloon bewerken/aanmaken             |
+|:---------------------------------------------------------:|
+| ![](../../assets/administration/email_template_nieuw.jpg) |

docs/manual/pages/administration/gebouwen.md

@@ -0,0 +1,35 @@
+# Gebouwen
+
+Op deze pagina kan u een oplijsting terugvinden van alle gebouwen.
+
+|           Gebouwen pagina            |
+| :----------------------------------: |
+| ![](../../assets/gebouwen.png) |
+
+## 1. Zoekbalk
+
+Je kunt een bepaalde naam zoeken met behulp van de zoekbalk die zich boven de tabel bevindt.(1)
+
+## 2. Sorteren per type
+
+Bovenaan de tabel is er een hoofding die de tabel in 3 kolommen opsplitst.
+Door op het pijltje naast de titel van elke kolom te klikken, zal u de tabel
+sorteren volgens die kolom (2).
+
+-   Syndicus: De naam van de gebruiker die syndicus is van het gebouw.
+-   Gebouw: De naam van het gebouw.
+-   Adres: Het adres van het gebouw.
+
+## 3. Nieuwe gebouw aanmaken
+
+Om een nieuw gebouw aan te maken, klikt u op de `nieuw gebouw`(3) knop. Dit zal u doorsturen
+naar de pagina om een [nieuw gebouw](../create/create_gebouwen.md) aan te maken.
+
+## 4. Verborgen gebouwen
+
+Aan de rechterkant bevindt zich een selectievak(4) waarmee je ook de verwijderde gebouwen kunt bekijken. Echter, dit selectievak is alleen zichtbaar als je als admin ingelogd bent.
+
+## 5. Klikken op een rij
+
+Wanneer u op een rij klikt, zal u doorgestuurd worden naar de [gebouwpagina](../detail/gebouw.md)
+van de gebruiker.

docs/manual/pages/administration/gebruikers.md

@@ -0,0 +1,25 @@
+# Gebruikers
+
+Op deze pagina kan u een oplijsting terugvinden van alle gebruikers.
+
+|                Gebruikers pagina                |
+|:-----------------------------------------------:|
+| ![](../../assets/administration/gebruikers.jpg) |
+
+## 1. Sorteren per type
+Bovenaan is er een hoofding die de tabel in 4 kolommen opsplitst.
+Door op het pijltje naast de titel van elke kolom te klikken, zal u de tabel
+sorteren volgens die kolom.
+
+- Naam: De naam van de gebruiker.
+- Student: Geeft aan of de gebruiker al dan niet een student is.
+- Superstudent: Geeft aan of de gebruiker al dan niet een superstudent is.
+- Admin: Geeft aan of de gebruiker al dan niet een administrator is.
+
+## 2. Klikken op een rij
+Wanneer u op een rij klikt, zal u doorgestuurd worden naar de [accountpagina](../account/account.md)
+van de gebruiker. Daar kan u ook de statistieken van de gebruiker terugvinden.
+
+## 3. Nieuwe gebruiker aanmaken
+Om een nieuwe gebruiker aan te maken, klikt u op de `nieuwe gebruiker` knop. Deze zal u doorsturen
+naar de pagina om een [nieuwe gebruiker](../create/create_gebruikers.md) aan te maken.

docs/manual/pages/administration/rondes.md

@@ -0,0 +1,30 @@
+# Rondes
+
+Op deze pagina kan u een oplijsting terugvinden van alle rondes.
+
+|            Ronde pagina            |
+| :--------------------------------: |
+| ![](../../assets/rondes.png) |
+
+## 1. Zoekbalk
+
+Je kunt een bepaalde naam zoeken met behulp van de zoekbalk die zich boven de tabel bevindt.(1)
+
+## 2. Sorteren per type
+
+Bovenaan de tabel is er een hoofding die de tabel in 2 kolommen opsplitst.
+Door op het pijltje naast de titel van elke kolom te klikken, zal u de tabel
+sorteren volgens die kolom.(2)
+
+-   Naam: De naam van de ronde.
+-   Gebouwen: Het aantal gebouwen in een ronde.
+
+## 3. Klikken op een rij
+
+Wanneer u op een rij klikt, zal u doorgestuurd worden naar de [rondepagina](../detail/ronde.md)
+van de gebruiker.
+
+## 4. Nieuwe ronde aanmaken
+
+Om een nieuwe ronde aan te maken, klikt u op de `nieuwe ronde maken` (3) knop. Dit zal u doorsturen
+naar de pagina om een [nieuwe ronde maken](../create/create_gebouwen.md) aan te maken.

docs/manual/pages/contact/contact_syndicus.md

@@ -0,0 +1,24 @@
+# Contact
+Het is mogelijk dat een syndicus gecontacteerd moet worden over zijn gebouw.
+In dit geval kan een mail opgesteld en gestuurd worden via de site zelf.
+Om dit gebruiksvriendelijker te maken, kunnen sjablonen van mails gebruikt worden.
+Hierbij is de mail grotendeels al geschreven en moeten slechts enkele specifieke aspecten aangepast worden zoals namen van gebouwen, syndicus ...
+Deze sjablonen kunnen via een [andere pagina](../administration/email-sjablonen.md) toegevoegd worden.
+
+Enkel superstudenten en administrators hebben toegang tot deze pagina.
+Studenten kunnen dus zelf geen mails versturen,
+maar kunnen enkel opmerkingen toevoegen tijdens het uitvoeren van hun ronde.
+
+## Werking
+1. Door een specifiek gebouw aan te duiden, wordt de mail automatisch naar de juiste syndicus gestuurd.
+   Het e-mailadres van de syndicus moet dus niet meer apart opgezocht worden.
+2. Hierbij kan een thema gekozen worden die een sjabloon e-mail invult in de velden van het onderwerp (3) en de inhoud (5).
+3. Het onderwerp wordt automatisch ingevuld bij het selecteren van een sjabloon, maar kan handmatig aangepast worden.
+4. Er kunnen meerdere bestanden als bijlage toegevoegd worden.
+5. Ook de inhoud van de mail wordt automatisch opgesteld bij het gebruiken van een sjabloon.
+   Hierbij moeten echter nog enkele variabelen zelf ingevuld worden zoals de naam van het gebouw, de syndicus ...
+
+
+|       Mail sturen naar syndicus        |
+|:--------------------------------------:|
+| ![](../../assets/contact_syndicus.jpg) |

docs/manual/pages/create/create_afval.md

@@ -0,0 +1,45 @@
+### Afval toevoegen
+
+Een [superstudent](../../users/superstudent.md) of een [admin](../../users/admin.md) kan op deze pagina afval toevoegen aan een gebouw.
+
+|                Nieuw schema                |
+|:------------------------------------------:|
+| ![](../../assets/garbage_creation_1.jpg)   |
+
+
+### 1. Beschrijving van de actie
+Geef op welke taak er precies moet gebeuren: afval buitenzetten, containers binnen zetten...
+
+### 2. Frequentie
+Taken kunnen eenmalig, wekelijks, tweewekelijks of maandelijks gebeuren.
+
+### 3 en 4. Start- en einddatum
+Geef een start- en einddatum op.
+De startdatum bepaalt op welke dag van de week de taak moet uitgevoerd worden.
+Wanneer bijvoorbeeld de frequentie ``wekelijks`` is aangeduid, met als start- en einddatum
+respectievelijk 1 en 20 juni 2023, zal de taak gepland worden op donderdag 1, 8, en 15 juni 2023.
+
+### 5. Starttijd
+Geef op om welk uur de taak uitgevoerd moet worden.
+
+### 6. Tijdelijk toevoegen
+Wanneer u op de knop ``tijdelijk toevoegen`` drukt, wordt de taak toegevoegd aan het voorlopig schema.
+U kan op dit moment dus nog taken toevoegen of verwijderen.
+
+### 7. Alles verwijderen
+De knop ``alles verwijderen`` verwijdert de volledige voorlopige planning.
+U kan ook elk element afzonderlijk verwijderen door op het kruisje te drukken
+van de taak die u wenst te verwijderen.
+
+### 8. Voorlopig schema
+Hier ziet u een duidelijker overzicht van de taken die aan het voorlopig schema zijn toegevoegd,
+samen met de reeds ingeplande taken voor dit gebouw. U kunt deze filteren op datum.
+De taken met de tag ``new`` zijn degene die u net aan het voorlopig schema heeft toegevoegd.
+
+
+|                      Nieuw schema                       |
+|:-------------------------------------------------------:|
+| ![](../../assets/garbage_creation_2.jpg) |
+
+### 9. Inplannen
+Wanneer u op de knop ``inplannen`` drukt, plant u het voorlopig schema in.