mirror of
https://gitlab.aliens-lyon.fr/encartes/web-interface.git
synced 2026-03-18 15:11:04 +01:00
42 lines
3.1 KiB
Markdown
42 lines
3.1 KiB
Markdown
# ENcarteS - Web Interface
|
|
==========================
|
|
|
|
The interface is made with React and Material UI. It also uses Leaflet to display the map.
|
|
|
|
## Public Interface
|
|
|
|
The interface (`App`) is composed of three main parts: a top-bar (`TopBar`) featuring buttons to switch to dark theme and to show information about ENcarteS, the map (`Map`) on the left and a pannel on the right. This pannel displays a menu to change the current floor (`ChangeFloor`), a menu to search a room (`RoomResearch`) and information about the current room (`RoomInformation`). Information about a room that is currently selected can be edited in a modal window: it is possible to add and remove names and users of a room. The updates are not done directly: requests have to be validated by an administrator on the admin interface.
|
|
|
|
## Admin Interface
|
|
|
|
The admin interface is what administrators will see when managing the editing requests.
|
|
|
|
### Purpose
|
|
|
|
The objective of this interface is to have a buffer, where any edition to the database goes to, before being actually applied to the database.
|
|
When a regular user makes an edition on the public website, a JSON is sent to the database, telling it to add the edition to the buffer.
|
|
What the interface displays is the list of all editions the database holds at the time, and the admin can decide whether to apply each edition or not.
|
|
|
|
### Usage
|
|
|
|
Go to encartes.aliens-lyon.fr/admin , there you'll be able to see all the edition requests, if there are any. If there are none, the website will simply tell you "Aucune requête !".
|
|
If there are edition requests, the interface will display all of them and the meaningful information, mode, room ID, room name(s), and editing value.
|
|
The mode can be one of four things : add/remove a name to a room, or add/remove a user name to a room. For example an edition can be "add Amphi B to room of ID 4932".
|
|
Next to each edition, there will be a tick sign and a cross sign. Click the tick to accept, click the cross to deny.
|
|
|
|
### How it works
|
|
|
|
First, we get all the editions by using a Javascript fetch to call the API's "get_all_editions" function, which sends back a JSON containing a table of editions.
|
|
Each edition is a dictionnary, with the four keys being "mode", "placeId", "placeNames" and "editorValue".
|
|
|
|
We then display all these using a list of MUI Grid components to align them properly, each list item has 2 callback buttons (one to accept, the other to deny).
|
|
Both buttons will remove the edition from the database list, but also from the displayed list (using removeElement).
|
|
If the edition is accepted, we make a new call to the API with the right info to change the database. In both cases we use the API to remove the edition from the buffer.
|
|
|
|
### Things that can be improved
|
|
|
|
The page is fully functionnal but it isn't particularly beautiful. Everything is aligned yes, but it could be a bit better.
|
|
|
|
Currently there is no security preventing you from accessing the /admin page, as there is no authentication. Adding a way to authenticate users could be useful.
|
|
|
|
The page needs to be refreshed to see newer editions if you had the page already opened, but because of how the API works I don't think we can solve that. |