Simonandbears

From mn/ifi/inf5750
Revision as of 17:22, 5 December 2015 by Torbjonh@uio.no (talk | contribs)

Jump to: navigation, search


Project details

Webapp for DHIS2 for managing organization units. A user should be able to view and filter organizational units, and also see detailed information about an organizational unit, all in one page. The user should also be able to edit and add organizational units. We will use a map to display the location of the organizational units, and the user should be able to click the map to add a new unit with coordinates.

Architecture

Webapp built with AngularJS framework. We use Materialize for the layout instead of Bootstrap. Angular Leaflet directive for loading and displaying a map, retrieve locations, and mapping location data.

Group members

Simon Jespersen - simonje@ifi.uio.no

Asbjørn Thom - asbjort@ifi.uio.no

Torbjørn N. Høiland - torbjonh@ifi.uio.no

Requirements

The app will fetch a list of organisation units from DHIS2. A user should be able to view, edit and add these units. There will be functionality for searching and filtering of the organisation units. The user will be able to view the location of an organisation unit on a map and add new units by clicking at the specific location (on the map). When searching for an organisation unit, the results will be displayed on the map. When the user clicks on an already existing organisation unit on the map the page should display detailed information about, and be able to edit, the selected organisation unit.

Schedule

Milestone 1 (08.11.15)

Expected

Document features and architecture on Wiki:

Show understanding of DHIS2 web apps.

What we have done

We made a mockup of the application layout (see Screenshots: Milestone 1) and set up the project in git. The group began researching on the different tools and frameworks (see Project details: Architecture) which was to be used throughout the project. It was decided to go with tabs, instead of separate windows, for the viewing and editing of organisation units.

We then started by creating the webapp with the proposed layout. Then the directive, which was to handle and display the organisation units, was created. The webapp could now fetch, using the controller, organisation units (from DHIS2 Demo) and display these in a list.

Milestone 2 (22.11.15)

Expected

First version up and running as DHIS2 web app.

What we have done

We started by solving some file structure and project setup problems. The project required us to use angular factories, but since we were already using the controller for this purpose, moving the functionality was bound to create some merge conflicts. These were solved (although not without some heavy sighs) and the factory was now doing the DHIS2 api calls as intended. The factory now put all the organisation units loaded into the list, but as we noticed - this would be a rather long list. We then added the paging functionality, which split this list into 27 pages. The amount of organisation units displayed per page was still rather long, but it was an improvement.

We then added the loading of detailed information about the selected organisation unit. When the user clicks on the unit (s)he wants to see more information about, the webapp gets the ID of the selected unit and loads the details, which is then added into the, now expanded, list element. Now it was time to implement the adding and editing of organisation units.

The ADD tab was then made active and a form element was implemented. Here we gave the user different information to fill in (name, description, location etc.). The form is used to add new organisation units, but also to edit already existing ones. The editing is done with the "edit" button in the lower right corner of the collapsible list element. The detailed information that already exists of the selected organisation unit is filled into the form and the user can edit or add new information.

We also began testing with Angular Google Maps (see this) and trying to get this to display the different organisation units.

Filtering and searching were implemented. We did this with a watcher on the search bar. When the user then typed some characters these where used as parameters for the filtering of the loaded organisation units.

Milestone 3 (04.12.15)

Expected

Finished.

What we have done

Added required fields and validation on the ADD/EDIT tabs. This was to ensure the fields (name, location, etc.) that are required to be filled, were filled before the creation of the organisation unit.

Search and filter were only being used when something was being typed in the search bar, meaning the user couldn't filter organisation units based on the group and levels from the dropdown menus. This was because they were used as parameters in the search function, which weren't called until a change occurred in the search bar. This was changed to actually filter based on the dropdown menus, without there being a need for changes on the search bar.

We had some problems using the Google Map and getting it to display markers correctly. It was then decided to try the Angular Leaflet directive for the map instead (see this). This directive was simple and soon up and running while being sufficient in displaying each newly added marker.

Delivery (11.12.15)

Final delivery date. Presentations will be in mid December.

Tasks

Simon: General setup and layout and providing assists where needed.

Asbjørn: Google maps

Torbjørn: Angular factories, Wiki

Screenshots

Milestone 1

Milestone 2

Learning notes

Improvements

Repository

Github

Download link