Parts Implemented by Oğuz Kerem Tural¶
Main Area¶
Upon entering the application, user faces with this screen. It contains a navigation bar on top, a search box and two columns. Search box is not yet active. Still user can search each table from their singular views. From top navigation bar user can move across table views and login if it is not yet logged in. Also from right side column, user can be able to see latest changes on records have done by registered users.
Main screen of the application.
Navigation Bar¶
From this area users can move thorough table views of front area. Also from right corner, where a door symbol seen, user can login to the application. If user already logged in, it can enter management area using drop down menu which replaces login button after log in operation. Using drop down menu user can advance between management and front pages and sign out when it is needed.
Navigation bar before user logs in.
Navigation bar after user logs in
This menu will appears when user logs in, instead of login button.
User System¶
User system in application is very basic and an abstract system that aims to prevent anonymous changes could have been done to database records. Every registered user has right to add, update or delete records where as unregistered users can only view, search and filter the records. Both user login and register operations are done using an Auth API service that has been provided by application itself. For further information about API please reference to Developer Guide.
Login Using Interface¶
To login using interface, user should click the button provided in navigation bar’s top right corner with the door symbol on it. After click, a modal window will be shown which provides user name and password fields to user for log in operation.
Login modal screen.
If user enters wrong credentials, an error message will appear and warns user about wrong credentials.
The message that appears when user enters wrong credentials.
Management Area¶
Registered users have privileges to change the records that stored in database. After user logged in, it can redirect here using drop down user menu in navigation bar. In same way, it can go back to front area using drop down menu in navigation bar. In here user greeted with change history again. But difference between the main screen change log and manager screen change log is in manager screen user can be able to see all changes has been done from beginning of the application. User can move to the management areas for different tables from sidebar.
Manager main screen.
Sidebar¶
From this section, user can navigate through different tables easily. Active page will be highlighted.
Side navigation bar in management area.
People Records¶
In application each person stored in people table. From front view both unregistered and registered user can see the view front page.
Front view for people table.
User can search records that are listed in table. To search user should just type keywords into search box in right corner of the table. Also user can order tables by clicking the header of column whose elements would order the table accordingly. User can order table in ascending or descending order.
Searching in people table.
Also user can change number of elements that are shown in pages.
Number of elements that are going to shown in page.
From top button right next to title user can advance into management area. If user not logged in it would give an error and asks user to login.
Error that occurs when unregistered user tries to advance in manager area.
When user advances into management area, three button would appear in the bottom of the table. First of them is for adding operation, second of them is for update and the last one is for delete operation.
Buttons that appear in management area.
If operations are successful a success message will appear on top of the table, if not then an error message will appear.
Success message.
Error message.
Add Operation¶
User can add both person information and person type. Still be warned, person types cannot be deleted from database so add them wisely and only when its necessary.
From ‘’Add New Data’’ button, open drop down menu. After that user can select either to add new person or person type. When clicked the selected button, a modal which would provide inputs will appear.
- PS. If you are not using Chromium-based browser please enter the date in ISO format (YYYY-mm-dd).
Add person modal.
Add person type modal.
User should fill all necessary inputs. If it skips any of them a warning will appear and prevent user to send data.
User warning.
Update Operation¶
User can update records easily first selecting which record will be updated and then clicking ‘’Update Selected Row’’ button. Still, only one record can be updated at time. If user selects more record and hits the update button an error message different from other will be appear.
Error which appears when user select many records to update.
Selecting a row.
After selecting one record, user can hit update button. When user clicks the update button a modal which provides pre-filled inputs would appear. After that user can change any value as it would like.
Person update modal.
Delete Operation¶
User can delete multiple records at one time. User only needs to select which records to be deleted and hit the delete button. If operation successful the success message will appear and page will reload.
Penalty Records¶
In penalty records most of the table functionality are the same as people table since all tables derived from a generic table design. Hence, user can search, filter and move across table pages in same way. For those operations please refer to People Records.
Penalty records table.
Add Operation¶
When user clicks the ‘’Add New Data’’ button a drop down similar in people records will appear. From there user can add either a new penalty record or penalty type record.
- PS. Beware penalty type records cannot be deleted
- PPS. If user not using Chromium-based browser, it should enter the date in ISO format (YYYY-mm-dd).
Penalty add modal.
Penalty type add modal.
Update Operation¶
User can update one record at a time. If more rows selected, user will encounter with an error same as in people records. Again user should click ‘’Update Selected Row’’ button to reveal update modal which provides necessary inputs for operation.
Penalty update modal.
Delete Operation¶
User can delete selected rows. First it should select every rows that need to be deleted then it should hit ‘’Delete Selected Row(s)’’ button. If operation successful, success message will appear and page will be reloaded.
Popularity Records¶
Again in same fashion, popularity records also uses generic table view for user end. User can do all operations that can be done in people record. For further information please refer to People Records.
Popularity main screen.
Add Operation¶
When user clicks the ‘’Add New Data’’ button this time add modal directly appears and provides input for record. User should fill all necessary input or a warning will warn the user and prevent submitting info.
Popularity add modal.
Update Operation¶
Again in here, user can update one record at a time. If more rows selected, user will encounter with an error same as in people records. Again user should click ‘’Update Selected Row’’ button to reveal update modal which provides necessary inputs for operation.
Popularity update modal.
Delete Operation¶
User can delete selected rows. First it should select every rows that need to be deleted then it should hit ‘’Delete Selected Row(s)’’ button. If operation successful, success message will appear and page will be reloaded.
City Records¶
In city records, user again can do the same operations as described in people records section. For more information about that operations please refer to People Records. Additionally, user can see the location of city on map using ‘’Show Location’’ button. When user hits this button after selecting a city record, a extra modal which contains a map and a marker that show location will appear. Still, user can only see one location at a time. If it selects more an error will appear.
City main screen.
City location modal.
Add Operation¶
Again as it before, when user clicks ‘’Add New Data’’ button, a modal which provides necessary inputs for record will appear.
City add modal.
Update Operation¶
User can update one record at a time. If more rows selected, user will encounter with an error same as in people records. Again user should click ‘’Update Selected Row’’ button to reveal update modal which provides necessary inputs for operation.
City update modal.
Delete Operation¶
User can delete selected rows. First it should select every rows that need to be deleted then it should hit ‘’Delete Selected Row(s)’’ button. If operation successful, success message will appear and page will be reloaded.