doc: overview.png

This commit is contained in:
Johannes Lötzsch 2022-03-17 00:23:43 +01:00
parent b16c522975
commit 02596b3aad
8 changed files with 21 additions and 19 deletions

View File

@ -1,5 +1,7 @@
This repository contains tools for NGOs, organizing private hosting. This repository contains tools for NGOs, organizing private hosting.
![](./docs/user-guide/graphics/overview.png)
## Import of existing datasets ## Import of existing datasets
- [x] https://mission-lifeline.de/unterkunft-bereitstellen/ - [x] https://mission-lifeline.de/unterkunft-bereitstellen/

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View File

Before

Width:  |  Height:  |  Size: 8.0 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

View File

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

View File

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

View File

@ -6,24 +6,21 @@
Die Authentifizierung/Login ist zweistufig, als Erstes wirst du nach deinem Organisations-Login gefragt. Die Authentifizierung/Login ist zweistufig, als Erstes wirst du nach deinem Organisations-Login gefragt.
![](../graphics/org_password.png) ![](./graphics/org_password.png)
Danach siehst du einen minimalen Dialog, welcher dich nach deinen Benutzer-spezifischen Login-Credentials fragt. Danach siehst du einen minimalen Dialog, welcher dich nach deinen Benutzer-spezifischen Login-Credentials fragt.
![](../graphics/user_password.png) ![](./graphics/user_password.png)
## Nach Einträgen Suchen
- Prinzipiell ist der Kopf jeder Spalte interaktiv. Durch schreiben in den Spalten Kopf können Suchkriterien zusammen gestellt werden.
Die Suchergebnisse werden dann direkt in der Tabelle darunter dargestellt.
### Navigation der UI ### Navigation der UI
![](./graphics/overview.png)
- **Struktur:** Auf der unteren Hälfte der Oberfläche ist eine Karte, wo die Orte der Wohnungen eingetragen sind. - **Struktur:** Auf der unteren Hälfte der Oberfläche ist eine Karte, wo die Orte der Wohnungen eingetragen sind.
- **Tabelle zu klein:** Die Platzaufteilung von Kante und Tabelle kann angepasst werden, indem man mit der Maus die Grenze zwischen Karte und Tabelle verschiebt. - **Tabelle zu klein:** Die Platzaufteilung von Kante und Tabelle kann angepasst werden, indem man mit der Maus die Grenze zwischen Karte und Tabelle verschiebt.
**In der Tabelle navigieren** Nach klicken in die Tabelle, kann diese durch die Cursor-Tasten (Pfeiltasten) verschoben werden. - **In der Tabelle navigieren** Nach klicken in die Tabelle, kann diese durch die Cursor-Tasten (Pfeiltasten) verschoben werden.
<!-- <!--
@ -33,7 +30,10 @@ Es wird, dass die Wohnung in dem jeweiligen grauen Kreis ist. Bei genauen Ortsan
### Suchen und Sortieren ### Suchen und Sortieren
![](../graphics/table.png) - Prinzipiell ist der Kopf jeder Spalte interaktiv. Durch schreiben in den Spalten Kopf können Suchkriterien zusammen gestellt werden.
Die Suchergebnisse werden dann direkt in der Tabelle darunter dargestellt.
![](./graphics/table.png)
- **Suche:** Die Tabelle kann nach den meisten Spalten gefiltert werden. Dafür einfach in der Zeile zwischen dem Tabellenkopf und der ersten Zeile mit Angeboten eingeben. Mit dem Filtersymbol das in dieser Zeile in - **Suche:** Die Tabelle kann nach den meisten Spalten gefiltert werden. Dafür einfach in der Zeile zwischen dem Tabellenkopf und der ersten Zeile mit Angeboten eingeben. Mit dem Filtersymbol das in dieser Zeile in
jeder Spalte ist, können weitere Optionen fürs Filtern ausgewählt werden. z.B. „enthält den eingegebenen Text“ oder „Spalten die angezeigt werden sollen, müssen einen Wert haben der mindestens so groß wie der eingegebene Wert ist“. Bei den meisten Spalten haben wir bereits eine sinnvolle Vorauswahl. jeder Spalte ist, können weitere Optionen fürs Filtern ausgewählt werden. z.B. „enthält den eingegebenen Text“ oder „Spalten die angezeigt werden sollen, müssen einen Wert haben der mindestens so groß wie der eingegebene Wert ist“. Bei den meisten Spalten haben wir bereits eine sinnvolle Vorauswahl.
@ -42,7 +42,7 @@ jeder Spalte ist, können weitere Optionen fürs Filtern ausgewählt werden. z.B
- **Filter anpassen:** Die Filtermethode für einen Spaltenkopf ist in den meisten Fällen die Gleichheit oder Beinhaltet. Diese kann aber auch verändert werden durch die Trichter-Symbol (siehe Bild). - **Filter anpassen:** Die Filtermethode für einen Spaltenkopf ist in den meisten Fällen die Gleichheit oder Beinhaltet. Diese kann aber auch verändert werden durch die Trichter-Symbol (siehe Bild).
![](../graphics/city_column.png) ![](./graphics/city_column.png)
- **Filter/Suche Zurücksetzen:** F5 lädt die Seite neu und setzt somit alle Filter zurück. - **Filter/Suche Zurücksetzen:** F5 lädt die Seite neu und setzt somit alle Filter zurück.

View File

@ -6,19 +6,16 @@
The authentication/login is two-step process, first you will be asked for your organisation login. The authentication/login is two-step process, first you will be asked for your organisation login.
![](../graphics/org_password.png) ![](./graphics/org_password.png)
After that you will see a minimal dialogue asking you for your user-specific login credentials. After that you will see a minimal dialogue asking you for your user-specific login credentials.
![](../graphics/user_password.png) ![](./graphics/user_password.png)
## Search for entries
- In principle, the header of each column is interactive. Search criteria can be compiled by writing in the columns header.
The search results are then displayed directly in the table below.
### Navigation of the UI ### Navigation of the UI
![](./graphics/overview.png)
- **Structure:** On the lower half of the interface is a map, where the locations of the flats are displayed. - **Structure:** On the lower half of the interface is a map, where the locations of the flats are displayed.
- **Table too small:** There is a handle at the edge between the map and the table, allowing to resize the division of space used for the table and the map. - **Table too small:** There is a handle at the edge between the map and the table, allowing to resize the division of space used for the table and the map.
@ -33,7 +30,10 @@ It becomes that the flat is in the respective grey circle. For exact locations,
### Search and sort ### Search and sort
![](../graphics/table.png) - In principle, the header of each column is interactive. Search criteria can be compiled by writing in the columns header.
The search results are then displayed directly in the table below.
![](./graphics/table.png)
- **Search:** The table can be filtered by most columns. To do this, simply type in the line between the table header and the first line with offers. With the filter symbol that is in this line in - **Search:** The table can be filtered by most columns. To do this, simply type in the line between the table header and the first line with offers. With the filter symbol that is in this line in
for example "contains the entered text" or "columns that should be displayed must have a value that is at least as large as the entered value". For most columns we already have a reasonable preselection. for example "contains the entered text" or "columns that should be displayed must have a value that is at least as large as the entered value". For most columns we already have a reasonable preselection.
@ -43,7 +43,7 @@ It becomes that the flat is in the respective grey circle. For exact locations,
- **Customise filter:** The filter method for a column header is in most cases equality or contains. However, this can also be changed by using the funnel icon (see image). - **Customise filter:** The filter method for a column header is in most cases equality or contains. However, this can also be changed by using the funnel icon (see image).
![](../graphics/city_column.png) ![](./graphics/city_column.png)
- **Reset filter/search:** F5 reloads the page and resets all filters. - **Reset filter/search:** F5 reloads the page and resets all filters.