Difference between revisions of "TheSimulators"

From mn/ifi/inf5750
Jump to: navigation, search
 
(21 intermediate revisions by 3 users not shown)
Line 5: Line 5:
 
Link to the repository: https://github.com/fredlh/TheSimulators (Private)
 
Link to the repository: https://github.com/fredlh/TheSimulators (Private)
 
== Milestones ==
 
== Milestones ==
 +
 +
We have divided the project into a couple of main tasks:
 +
* Create a basic app with a working map [Complete]
 +
* A search bar which is able to retrieve info from the DHIS2 api [Complete]
 +
* A side bar for viewing and filtering search results [Complete]
 +
* Able to draw and view organisation units on the map [Complete]
 +
* Able to edit and delete organisation units [Complete]
 +
* General options [Complete]
 +
* Organisation Unit Levels management [Complete]
 +
* Organisation Unit Groups management [Complete]
 +
* Able to add organisation units [Complete]
 +
 
== Summary of requirements ==
 
== Summary of requirements ==
 
'''Health Facility Registry'''
 
'''Health Facility Registry'''
Line 13: Line 25:
  
 
Place names with coordinates for the whole world can be found using MapZen
 
Place names with coordinates for the whole world can be found using MapZen
 +
 +
=== Requirements ===
 +
Search
 +
* Search for an organisation unit by name and ID
 +
* Have advanced options such as searching for a specific level
 +
Map
 +
* All organisation units should be drawn on the map
 +
* A user should be able to click on a organisation unit and view its info
 +
* Able to traverse the organisation unit hierarchy
 +
Side bar
 +
* A list which gets filled with the results from a search
 +
* Here it should be possible to see information of an organisation unit, edit the info, delete it or further filter the results
 +
General options
 +
* A user should be able to edit general options like auto-zoom on search, color of the organisation units of the map and such
 +
Organisation Units
 +
* A user should be able to add an organisation unit, either as a polygon or marker in a user-friendly way
 +
Organisation Unit Levels
 +
* A user should be able to view, edit, delete and add organisation unit levels
 +
Organisation Unit Groups
 +
* A user should be able to view, edit, delete and add organisation unit groups
 +
* A user should be able to add and remove groups to an organisation unit
 +
 +
== Architecture ==
 +
 +
===== Technologies used =====
 +
* Angular 2
 +
* Typescript
 +
* LESS/CSS, HTML, jQuery
 +
* Leaflet and OpenStreetMap
 +
* Node & npm
 +
* Webpack
 +
 +
'''Open source projects used'''
 +
* angular2-leaflet-starter
 +
* ng2-accordion
 +
* angular-2-dropdown-multiselect
 +
* leaflet-draw
  
 
== Time schedule ==
 
== Time schedule ==
 +
We haven't decided a specific time schedule, but everyone tries to work whenever they can.
 +
 
== How we are dividing tasks within the group ==
 
== How we are dividing tasks within the group ==
 +
During the initial development, everyone works together.
 +
 +
After the main parts are complete, we plan to divide the remaining tasks within the group.
 +
 
== Screenshots and screen flows ==
 
== Screenshots and screen flows ==
<strong>File:Design.png</strong>
+
The main target is to keep the website as simple and neat as possible.
 +
 
 +
That is why we intend to show a large map as a main panel and a menu sidebar on the left side. There will be a search bar over the map with advanced search options.
 +
 
 +
We thought of having a list on the left side and it will also be dynamic, ie if we click over an area (district) on the map,  there will be shown hospitals and clinics and other related things.
 +
 
 +
A simple design is illustrated below.
 +
 
 +
{| class="wikitable"
 +
|[[File:Initial view new.png|left|frameless]]
 +
|Initial view, before any searches have been performed.
 +
 
 +
On top there is a search bar, an advanced search button and an advanced view toggle.
 +
 
 +
When a search is performed, a side bar will open on he left side
 +
|-
 +
|[[File:After search new.png|left|frameless]]
 +
|After a search have been performed, the resulting organisation units are populated
 +
on the map and in the side bar. The side bar will expand in order to show the data.
 +
|-
 +
|[[File:On select.png|left|frameless]]
 +
|Clicking on an organisation unit, either on the map or on the side bar, highlights the
 +
organisation unit on the map and expands it in the side bar to show its information.
 +
 
 +
The side bar is also automatically scrolled to the organisation unit.
 +
|-
 +
|[[File:Advanced.png|left|frameless]]
 +
|By using advanced options one can limit the search to individual levels.
 +
|-
 +
|[[File:Filter.png|left|frameless]]
 +
|A filter can be applied on the search, giving even more filter options
 +
|-
 +
|[[File:Children.png|left|frameless]]
 +
|If you either double-click on the map, or click "Children" in the side bar, the view will change to that organisation units children.
 +
A back button will appear in the side bar, giving the user the option to return to the previous view.
 +
|-
 +
|[[File:On edit.png|left|frameless]]
 +
|By clicking "Edit" on an organisation unit, you will get the option to edit its info
 +
|-
 +
|[[File:On unit edit.png|left|frameless]]
 +
|If you click on "Draw org unit", you will enter edit-mode and be able to edit, add and delete polygons
 +
|-
 +
|[[File:Add.png|left|frameless]]
 +
|The user can add new organisation units, either as polygon or marker.
 +
|-
 +
|[[File:Levels.png|left|frameless]]
 +
|The user can open the organisation unit levels management. Here the user can view info, edit, delete and add new ones.
 +
The application will automatically retrieve an updated version.
 +
|-
 +
|[[File:Groups.png|left|frameless]]
 +
|The user can open the organisation unit groups management. Here the user can view info, edit, delete and add new ones.
 +
Here the user can remove and add groups to an organisation unit.
 +
|}
 +
 
 +
Initial design thoughts
 +
 
 +
[[:File:Design.png]]
  
 
== Documented learning during project ==
 
== Documented learning during project ==
 +
None of us knew much about HTML, CSS and Javascript prior to the project, so everyone have learned much.
 +
 +
Everything we've done during the project has been learnt then.
 +
 
== Suggested improvements to the API ==
 
== Suggested improvements to the API ==
 +
During development, we've had some problems with the API.
 +
* Organisation Unit Groups
 +
** No easy to find documentation on the relation between Organisation Units and Organisation Unit Groups.
 +
** Have to find out yourself that to add or remove a group from an organisation unit, you need to edit the organisation unit group.
 +
* Organisation Unit Levels
 +
** Why is Organisation Unit Levels only a reference/lookup-table, while Organisation Unit Groups contain every organisation Unit of its group?
 +
** Why can there be for example an Organisation Unit with level 5, while there are only Level 1 - 4 in Organisation Unit Levels?
 +
* Delete Organisation Units
 +
** If you try to delete an Organisation Unit which is premade, you can an error that it references "Data value", which isn't exactly clear as there is no "Data value" attributt in an Organisation Unit
 +
* Parent of an Organisation Unit
 +
** Why is it an object instead of a string? From what we can see, there can only be a single parent.
 +
** If there is no parent, why not have an object with an empty id, rather than undefined? Would require less checking
 +
* No documentation
 +
** Found no documentation explaining where one could find the symbols for the Organisation Unit Groups
 +
If we were to come up with any suggestions, it would be to improve the points above.

Latest revision as of 15:46, 22 November 2016

 Group members

  • Fredrik Lund Henriksen
  • Rune Jensen
  • Asif khan

Link to the repository: https://github.com/fredlh/TheSimulators (Private)

Milestones

We have divided the project into a couple of main tasks:

  • Create a basic app with a working map [Complete]
  • A search bar which is able to retrieve info from the DHIS2 api [Complete]
  • A side bar for viewing and filtering search results [Complete]
  • Able to draw and view organisation units on the map [Complete]
  • Able to edit and delete organisation units [Complete]
  • General options [Complete]
  • Organisation Unit Levels management [Complete]
  • Organisation Unit Groups management [Complete]
  • Able to add organisation units [Complete]

Summary of requirements

Health Facility Registry

App providing an interface to the health facilities in a country (e.g. the Sierra Leone or Trainingland demo databases). The add should make it possible to search and list organisation units and see these in a map, along with relevant details regarding each facility such as type, the district it belongs to etc.

Some inspiration can be found in the Kenya Master Health Facility List

Place names with coordinates for the whole world can be found using MapZen

Requirements

Search

  • Search for an organisation unit by name and ID
  • Have advanced options such as searching for a specific level

Map

  • All organisation units should be drawn on the map
  • A user should be able to click on a organisation unit and view its info
  • Able to traverse the organisation unit hierarchy

Side bar

  • A list which gets filled with the results from a search
  • Here it should be possible to see information of an organisation unit, edit the info, delete it or further filter the results

General options

  • A user should be able to edit general options like auto-zoom on search, color of the organisation units of the map and such

Organisation Units

  • A user should be able to add an organisation unit, either as a polygon or marker in a user-friendly way

Organisation Unit Levels

  • A user should be able to view, edit, delete and add organisation unit levels

Organisation Unit Groups

  • A user should be able to view, edit, delete and add organisation unit groups
  • A user should be able to add and remove groups to an organisation unit

Architecture

Technologies used
  • Angular 2
  • Typescript
  • LESS/CSS, HTML, jQuery
  • Leaflet and OpenStreetMap
  • Node & npm
  • Webpack

Open source projects used

  • angular2-leaflet-starter
  • ng2-accordion
  • angular-2-dropdown-multiselect
  • leaflet-draw

Time schedule

We haven't decided a specific time schedule, but everyone tries to work whenever they can.

How we are dividing tasks within the group

During the initial development, everyone works together.

After the main parts are complete, we plan to divide the remaining tasks within the group.

Screenshots and screen flows

The main target is to keep the website as simple and neat as possible.

That is why we intend to show a large map as a main panel and a menu sidebar on the left side. There will be a search bar over the map with advanced search options.

We thought of having a list on the left side and it will also be dynamic, ie if we click over an area (district) on the map, there will be shown hospitals and clinics and other related things.

A simple design is illustrated below.

Initial view new.png
Initial view, before any searches have been performed.

On top there is a search bar, an advanced search button and an advanced view toggle.

When a search is performed, a side bar will open on he left side

After search new.png
After a search have been performed, the resulting organisation units are populated

on the map and in the side bar. The side bar will expand in order to show the data.

On select.png
Clicking on an organisation unit, either on the map or on the side bar, highlights the

organisation unit on the map and expands it in the side bar to show its information.

The side bar is also automatically scrolled to the organisation unit.

Advanced.png
By using advanced options one can limit the search to individual levels.
Filter.png
A filter can be applied on the search, giving even more filter options
Children.png
If you either double-click on the map, or click "Children" in the side bar, the view will change to that organisation units children.

A back button will appear in the side bar, giving the user the option to return to the previous view.

On edit.png
By clicking "Edit" on an organisation unit, you will get the option to edit its info
On unit edit.png
If you click on "Draw org unit", you will enter edit-mode and be able to edit, add and delete polygons
Add.png
The user can add new organisation units, either as polygon or marker.
Levels.png
The user can open the organisation unit levels management. Here the user can view info, edit, delete and add new ones.

The application will automatically retrieve an updated version.

Groups.png
The user can open the organisation unit groups management. Here the user can view info, edit, delete and add new ones.

Here the user can remove and add groups to an organisation unit.

Initial design thoughts

File:Design.png

Documented learning during project

None of us knew much about HTML, CSS and Javascript prior to the project, so everyone have learned much.

Everything we've done during the project has been learnt then.

Suggested improvements to the API 

During development, we've had some problems with the API.

  • Organisation Unit Groups
    • No easy to find documentation on the relation between Organisation Units and Organisation Unit Groups.
    • Have to find out yourself that to add or remove a group from an organisation unit, you need to edit the organisation unit group.
  • Organisation Unit Levels
    • Why is Organisation Unit Levels only a reference/lookup-table, while Organisation Unit Groups contain every organisation Unit of its group?
    • Why can there be for example an Organisation Unit with level 5, while there are only Level 1 - 4 in Organisation Unit Levels?
  • Delete Organisation Units
    • If you try to delete an Organisation Unit which is premade, you can an error that it references "Data value", which isn't exactly clear as there is no "Data value" attributt in an Organisation Unit
  • Parent of an Organisation Unit
    • Why is it an object instead of a string? From what we can see, there can only be a single parent.
    • If there is no parent, why not have an object with an empty id, rather than undefined? Would require less checking
  • No documentation
    • Found no documentation explaining where one could find the symbols for the Organisation Unit Groups

If we were to come up with any suggestions, it would be to improve the points above.