Difference between revisions of "(APE) Geolocation data entry"

From mn/ifi/inf5750
Jump to: navigation, search
(→‎Milestones)
(→‎Dividing tasks)
 
(21 intermediate revisions by 2 users not shown)
Line 14: Line 14:
 
*show a map of the current location of the user  
 
*show a map of the current location of the user  
 
*let users choose a location  
 
*let users choose a location  
−
*fill out a form for "inpatient morbidity and mortality"
+
*fill out a form for selected program and organization unit
 
*let users save the location and the filled out form  
 
*let users save the location and the filled out form  
 
*show all of the saved data on the map
 
*show all of the saved data on the map
  
−
= Dividing the project work =
+
= Dividing tasks =
  
−
...
+
These are the main tasks each member has done:
 +
 
 +
* Alexander: Map functions, get information about programs, org units and programstages
 +
* Peter: Event handling
 +
* Eivind: Webapp layout, popup input window and event table
  
 
= Design  =
 
= Design  =
  
−
== First view ==
+
== Initial page ==
−
 
 
−
[[Image:File1.jpg|400px|alt = first view image]]
 
−
 
 
−
This layout offers a map that contains all of the current events in this region. Hovering over an event marker gives us a box with information.
 
−
 
 
−
[[Image:File2.jpg|400px|alt = sketch image 2]]
 
  
−
In this layout, we have two buttons available toggle two modes of input of new events.  
+
[[Image:Geo_loc_init_v2.png|400px|alt = initial image]]
  
−
== First input mode ==
+
The image above shows the initial layout of the webapp.
 +
 +
[[Image:Geo_loc_choose.png|400px|alt = choose program and org unit]]
  
−
[[Image:File3.jpg|400px|alt = sketch image 3]]
+
The webapp contains a simple map and the option to choose the "program". This enables the option to select organizations that is available for the chosen program.
  
−
We can choose on the map where we want to make an event, and write the event information in a textbox there.
+
== List of events ==
  
−
== Second input mode ==
+
[[Image:Geo_loc_list_v2.png|400px|alt = event list]]
  
−
[[Image:File4.jpg|400px|alt = sketch image 4]]
+
If there are events at the organization, we retrieve a list of the events. The table containing the events has several functionalities tied to it:
 +
* A search function (top right).
 +
* Sort by column (in each column header).
 +
* Show different amount of events/records per page (top left).
 +
* Scroll through pages (bottom right).
  
−
We retrieve a list of all events in this region, and we get a button, which enables us to add a new event to our current location. The way we enter data is similar to the first input mode, with a textbox. The essential difference between the two modes is that in the first one we may choose which location to add the event. The first one only registers your current location.
+
== Markers on the map ==
  
−
[[Image:File5.jpg|400px|alt = sketch image 5]]  
+
[[Image:Geo_loc_marker.png|400px|alt = sketch image 4]]  
  
−
== When the screen is too small/input parameter too large ==
+
For events that contains location, a marker is shown on the map. The markers are clickable, and will contain information about the event.
−
 
 
−
When we cannot fit the textbox for adding event, we open a new window, which fills the screen with the input form. This works for both input modes.
 
−
 
 
−
[[Image:File6.jpg|400px|alt = sketch image 6]]
 
  
 
= Architecture<br>  =
 
= Architecture<br>  =
Line 59: Line 59:
  
 
Twitter Bootstrap is used for good and sensible default styling of elements as well as for some Javascript functionality, e.g. modal windows.
 
Twitter Bootstrap is used for good and sensible default styling of elements as well as for some Javascript functionality, e.g. modal windows.
 +
 +
dataTables is a plugin for Jquery that will make table handling a lot easier. It will automatically give us pagination, search feature, column sorting and function for retrieving row and column number of cell number which is beeing clicked, which is very handy.
  
 
The map will be delivered by Google's Map API, and the data from DHIS will be requested by ajax calls and returned as Json data, which will populate our map and tables.
 
The map will be delivered by Google's Map API, and the data from DHIS will be requested by ajax calls and returned as Json data, which will populate our map and tables.
Line 69: Line 71:
 
*CSS  
 
*CSS  
 
*JavaScript  
 
*JavaScript  
 +
*JQuery
 
*AJAX  
 
*AJAX  
 
*Json  
 
*Json  
 +
*Google Maps API
 
*Twitter Bootstrap — for good styling of elements  
 
*Twitter Bootstrap — for good styling of elements  
−
*JQuery
+
* dataTables — Plugin for Jquery for easier table handling
−
*Google Maps API
 
  
 
== Features  ==
 
== Features  ==
Line 85: Line 88:
 
*Stage 1: <strike>Write about features, design and architecture, research DHIS</strike>
 
*Stage 1: <strike>Write about features, design and architecture, research DHIS</strike>
 
*Stage 2: <strike>Implement frontend with dummy data</strike>
 
*Stage 2: <strike>Implement frontend with dummy data</strike>
−
*Stage 3: Link front end with DHIS through API calls
+
*Stage 3: <strike>Link front end with DHIS through API calls</strike>

Latest revision as of 23:14, 8 December 2013

Team

  • Alexander Eismont
  • Peter Ludvik Eidsvik
  • Eivind Lindbråten


Code: https://code.launchpad.net/~ape-inf5750

Features

Our Web and Mobile application will have the following features:

  • show a map of the current location of the user
  • let users choose a location
  • fill out a form for selected program and organization unit
  • let users save the location and the filled out form
  • show all of the saved data on the map

Dividing tasks

These are the main tasks each member has done:

  • Alexander: Map functions, get information about programs, org units and programstages
  • Peter: Event handling
  • Eivind: Webapp layout, popup input window and event table

Design

Initial page

alt = initial image

The image above shows the initial layout of the webapp.

alt = choose program and org unit

The webapp contains a simple map and the option to choose the "program". This enables the option to select organizations that is available for the chosen program.

List of events

alt = event list

If there are events at the organization, we retrieve a list of the events. The table containing the events has several functionalities tied to it:

  • A search function (top right).
  • Sort by column (in each column header).
  • Show different amount of events/records per page (top left).
  • Scroll through pages (bottom right).

Markers on the map

alt = sketch image 4

For events that contains location, a marker is shown on the map. The markers are clickable, and will contain information about the event.

Architecture

We will mainly rely on HTML/CSS and Jquery for this project. The Jquery framework will allow us to write code much faster and cleaner — we don't have to reinvent the weel each time we need a spesific function. Mainly for simple ajax calls and element selection. 

Twitter Bootstrap is used for good and sensible default styling of elements as well as for some Javascript functionality, e.g. modal windows.

dataTables is a plugin for Jquery that will make table handling a lot easier. It will automatically give us pagination, search feature, column sorting and function for retrieving row and column number of cell number which is beeing clicked, which is very handy.

The map will be delivered by Google's Map API, and the data from DHIS will be requested by ajax calls and returned as Json data, which will populate our map and tables.

We will try to make our site responsive so it will look great on mobile, tablet and desktop devices.

Technologies

  • HTML
  • CSS
  • JavaScript
  • JQuery
  • AJAX
  • Json
  • Google Maps API
  • Twitter Bootstrap — for good styling of elements
  • dataTables — Plugin for Jquery for easier table handling

Features

  • Android application — using Cordova
  • iPhone application — using Cordova
  • Responsive web design — targeted for mobile and desktop screens

Milestones

  • Stage 1: Write about features, design and architecture, research DHIS
  • Stage 2: Implement frontend with dummy data
  • Stage 3: Link front end with DHIS through API calls
Retrieved from "https://wiki.uio.no/mn/ifi/inf5750/index.php?title=(APE)_Geolocation_data_entry&oldid=977"