Difference between revisions of "Simonandbears"

From mn/ifi/inf5750
Jump to: navigation, search
(Project details)
 
(5 intermediate revisions by one other user not shown)
Line 6: Line 6:
 
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.
 
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 ===
+
'''Architecture'''
 +
 
 
Webapp built with AngularJS framework. We use [http://materializecss.com/ Materialize] for the layout instead of Bootstrap. Angular Leaflet directive for loading and displaying a map, retrieve locations, and mapping location data.
 
Webapp built with AngularJS framework. We use [http://materializecss.com/ Materialize] for the layout instead of Bootstrap. Angular Leaflet directive for loading and displaying a map, retrieve locations, and mapping location data.
  
Line 26: Line 27:
 
Show understanding of DHIS2 web apps.  
 
Show understanding of DHIS2 web apps.  
  
==== What we have done ====
+
'''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 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.   
  
Line 34: Line 36:
 
First version up and running as DHIS2 web app.
 
First version up and running as DHIS2 web app.
  
==== 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. By default each page displays 50 units now, but we can change this later by sending extra parameters with our API calls.  
 
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.  
  
Line 48: Line 51:
 
Finished.
 
Finished.
  
==== What we have done ====
+
'''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.
 
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.
  
Line 58: Line 62:
 
Final delivery date. Presentations will be in mid December.
 
Final delivery date. Presentations will be in mid December.
  
==== What we have done ====
+
'''What we have done'''
 +
 
 
We added the functionality for displaying location markers of the search result. Also made it possible to drag the designated marker to a new location, and click on the marker to display the details about the selected organisation unit.  
 
We added the functionality for displaying location markers of the search result. Also made it possible to drag the designated marker to a new location, and click on the marker to display the details about the selected organisation unit.  
  
Line 66: Line 71:
 
'''Simon: '''General setup and layout and providing assistance where needed.
 
'''Simon: '''General setup and layout and providing assistance where needed.
  
'''Asbjørn: M'''ap
+
'''Asbjørn: '''Map
  
 
'''Torbjørn: '''Angular factories, Wiki
 
'''Torbjørn: '''Angular factories, Wiki
  
 
== Screenshots ==
 
== Screenshots ==
 
+
'''Milestone 1'''<gallery>
=== Milestone 1 ===
 
<gallery>
 
 
File:Simonandbears1.png
 
File:Simonandbears1.png
 
</gallery>Here you see the starting idea we had of the webapp layout.
 
</gallery>Here you see the starting idea we had of the webapp layout.
  
=== Milestone 2 ===
+
'''Milestone 2'''<gallery>
<gallery>
 
 
1list.jpg
 
1list.jpg
 
2-sab-searchfilter.jpg
 
2-sab-searchfilter.jpg
Line 89: Line 91:
 
5. Detailed view of list element (organisation unit) with edit button, 6. Edit already existing unit, with datepicker in front.     
 
5. Detailed view of list element (organisation unit) with edit button, 6. Edit already existing unit, with datepicker in front.     
  
=== Milestone 3 ===
+
'''Finished application'''<gallery>
Decided to put the screenshots in milestone 4 because there were not many visual changes to the app between these periods.
+
File: Simonandbears-fin-front1.jpg
 +
File: Simonandbears-fin-search2.jpg
 +
File: Simonandbears-fin-add3.jpg
 +
File: Simonandbears-fin-edit4.jpg
 +
</gallery>(From left to right) 1. List of organisation units, showing of a unit. 2. Filtering the list. 3. Add a new unit. 4. Edit a unit
 +
 
 +
== Learning notes ==
 +
We have gained a better understanding of how the DHIS2 operates and using angular. Specifically creating a web application which used the DHIS2 api to fetch data (in an angular factory) and then displayed the collected information in various ways. We also gained some knowledge of displaying a map and creating/adding the specific functionality.  
  
=== Milestone 4 ===
+
We also learned how material design should be implemented using Materialize (instead of Bootstrap).
Upload finished screens.
 
  
== Learning notes ==
+
== Fixes and improvements ==
AngularJS and all its "subsidiaries" i.e. - Factories, Leaflet directive, General setup and usage of Angular
+
These are just some improvements and small bugs we found, but didn't have time to implement or fix ourselves.
  
DHIS2 web api
+
'''Bugs'''
  
Materialize instead of bootstrap
+
Because of the way the searching functions, it sometimes displays the wrong results. If the user types too fast it might show the result for two searched characters, even though the user typed in three characters. This is due to the ajax calls used.
  
== Improvements ==
+
'''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.
+
Choosing the amount of organisation units displayed per page in the list. Also the bar showing pages could get an upgrade.
  
Longitude and Latitude in sample data, instead of coordination in a string
+
A "clear search" button would also be useful.
  
 
== Repository ==
 
== Repository ==

Latest revision as of 18:28, 12 December 2015


Project details

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.). One form is used to add new organisation units, and another one 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 Google Maps 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.

What we have done

We added the functionality for displaying location markers of the search result. Also made it possible to drag the designated marker to a new location, and click on the marker to display the details about the selected organisation unit.

We also did some bug fixes and improvements to the map functionality.

Tasks

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

Asbjørn: Map

Torbjørn: Angular factories, Wiki

Screenshots

Milestone 1Here you see the starting idea we had of the webapp layout. Milestone 2(From left to right) - 1. List view of the organisation units, 2. Search bar in use, 3. the ADD new unit form, 4. Searching (and finding) the newly added unit,

5. Detailed view of list element (organisation unit) with edit button, 6. Edit already existing unit, with datepicker in front.

Finished application(From left to right) 1. List of organisation units, showing of a unit. 2. Filtering the list. 3. Add a new unit. 4. Edit a unit

Learning notes

We have gained a better understanding of how the DHIS2 operates and using angular. Specifically creating a web application which used the DHIS2 api to fetch data (in an angular factory) and then displayed the collected information in various ways. We also gained some knowledge of displaying a map and creating/adding the specific functionality.

We also learned how material design should be implemented using Materialize (instead of Bootstrap).

Fixes and improvements

These are just some improvements and small bugs we found, but didn't have time to implement or fix ourselves.

Bugs

Because of the way the searching functions, it sometimes displays the wrong results. If the user types too fast it might show the result for two searched characters, even though the user typed in three characters. This is due to the ajax calls used.

Improvements

Choosing the amount of organisation units displayed per page in the list. Also the bar showing pages could get an upgrade.

A "clear search" button would also be useful.

Repository

Github

Download link

Download here.