Difference between revisions of "Simonandbears"

From mn/ifi/inf5750
Jump to: navigation, search
Line 33: Line 33:
  
 
==== What we have done ====
 
==== 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 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. By default each page displays 50 units now, but we can change this later by sending extra parameters with our API calls.  
  
 
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.  
 
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.  

Revision as of 19:11, 5 December 2015


Managing Organisation Units

Webapp for DHIS2 for managing organisation units. A user should be able to view and filter through a list of organisation units and click to see detailed information about each unit, all in one page. The user should also be able to edit and add organisation units. We will use a map to display the location of the different selected 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)

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)

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. By default each page displays 50 units now, but we can change this later by sending extra parameters with our API calls.

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)

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 assistance where needed.

Asbjørn: Map

Torbjørn: Angular factories, Wiki

Screenshots

Milestone 1

Milestone 2

Milestone 3

Some screenshots of the entire page w/ map, markers and search.

Milestone 4

Upload when we decide we're done, if necessary.

Learning notes

AngularJS and all its "subsidiaries" i.e. - Factories, Leaflet directive, General setup and usage of Angular

DHIS2 web api

Materialize instead of bootstrap

Improvements

These are just proposed improvements we thought could be useful for making developing simpler for us, but we can't be sure if there are reasons for the api to behave this way.

Better sample data? Locations (middle of the ocean? only few units have coords) etc.

Longitude and Latitude in sample data, instead of coordination in a string

Repository

Github

Download link

what do you mean? hm