Difference between revisions of "IDLE"

From mn/ifi/inf5750
Jump to: navigation, search
(Added product description with feature list)
(Moved architecture to product description)
Line 1: Line 1:
== Group members ==
+
== Group Members ==
 
* Vebjørn Kvisli (vebjorkv@ifi.uio.no)
 
* Vebjørn Kvisli (vebjorkv@ifi.uio.no)
 
* Halvard Hella Kværna (halvarhk@ifi.uio.no)
 
* Halvard Hella Kværna (halvarhk@ifi.uio.no)
Line 7: Line 7:
 
We have chosen the assignment '''Master Facility List.'''
 
We have chosen the assignment '''Master Facility List.'''
  
== Product description ==
+
== Product Description ==
 
The final product will be a React-based DHIS2 app where the main feature will be browsing facilities and get information about them.  
 
The final product will be a React-based DHIS2 app where the main feature will be browsing facilities and get information about them.  
  
 
=== Features ===
 
=== Features ===
 
+
App/
==== App/ ====
 
 
* Home page / Welcome page
 
* Home page / Welcome page
 
+
App/facilities
==== App/facilities ====
 
 
* A List of all facilities with the option to filter and search to get specific results.  
 
* A List of all facilities with the option to filter and search to get specific results.  
 
* A form with several input fields where the user can filter and search for specific facilities.
 
* A form with several input fields where the user can filter and search for specific facilities.
 
* A map where the user can see the location of facilities searched for. The map will have the ability to show one, all or a subset of facilities.
 
* A map where the user can see the location of facilities searched for. The map will have the ability to show one, all or a subset of facilities.
 
+
App/maps
==== App/maps ====
 
 
* An information box with detailed information about one specific facility.
 
* An information box with detailed information about one specific facility.
 
* A map showing the location of that specific facility.
 
* A map showing the location of that specific facility.
 
* A link that opens up a dialog window where the user can write suggestions for changes to the facility.
 
* A link that opens up a dialog window where the user can write suggestions for changes to the facility.
 +
 +
=== Architecture ===
 +
The application is primarily based on the '''React''' framework. The different visual elements in the app is created as React Components, with the help of HTML and CSS.
 +
 +
==== Packages ====
 +
Within React we also use several additional packages defined as dependencies in the package-file of our application, both for visual and functional elements:
 +
* bootstrap
 +
* google-maps
 +
* react
 +
* react-bootstrap
 +
* react-bootstrap-dialog
 +
* react-dom
 +
* react-icons
 +
* react-router-dom
 +
* react-scripts
 +
* react-select
 +
* react-toggle
 +
* react-transition-group
 +
* reactstrap
  
 
== Timeline for Development ==
 
== Timeline for Development ==
Line 57: Line 73:
 
* Clean up and release
 
* Clean up and release
  
== Architecture ==
+
== Git Project Repository ==
The application is primarily based on the '''React''' framework. The different visual elements in the app is created as React Components, with the help of HTML and CSS.
 
 
 
Within React we also use several additional packages defined as dependencies in the package-file of our application, both for visual and functional elements:
 
* bootstrap
 
* google-maps
 
* react
 
* react-bootstrap
 
* react-bootstrap-dialog
 
* react-dom
 
* react-icons
 
* react-router-dom
 
* react-scripts
 
* react-select
 
* react-toggle
 
* react-transition-group
 
* reactstrap
 
 
 
== Git repository ==
 
 
https://github.uio.no/MFLD2/MFLD2
 
https://github.uio.no/MFLD2/MFLD2

Revision as of 13:43, 9 November 2017

Group Members

  • Vebjørn Kvisli (vebjorkv@ifi.uio.no)
  • Halvard Hella Kværna (halvarhk@ifi.uio.no)
  • Andreas Hauge Standal (andrhst@ifi.uio.no)

Assignment

We have chosen the assignment Master Facility List.

Product Description

The final product will be a React-based DHIS2 app where the main feature will be browsing facilities and get information about them.

Features

App/

  • Home page / Welcome page

App/facilities

  • A List of all facilities with the option to filter and search to get specific results.
  • A form with several input fields where the user can filter and search for specific facilities.
  • A map where the user can see the location of facilities searched for. The map will have the ability to show one, all or a subset of facilities.

App/maps

  • An information box with detailed information about one specific facility.
  • A map showing the location of that specific facility.
  • A link that opens up a dialog window where the user can write suggestions for changes to the facility.

Architecture

The application is primarily based on the React framework. The different visual elements in the app is created as React Components, with the help of HTML and CSS.

Packages

Within React we also use several additional packages defined as dependencies in the package-file of our application, both for visual and functional elements:

  • bootstrap
  • google-maps
  • react
  • react-bootstrap
  • react-bootstrap-dialog
  • react-dom
  • react-icons
  • react-router-dom
  • react-scripts
  • react-select
  • react-toggle
  • react-transition-group
  • reactstrap

Timeline for Development

Week 42

  • Created our first React app.
  • Created an organization and repository on GitHub.
  • Fetched our first data from the api using fetch().
  • Created a simple layout for the Master Facility List (MFL) with a navigation bar, search option boxes and a result page.
  • Added some styling with css and React Bootstrap.

Week 43

  • Improved navigation bar style
  • Improved overall layout style
  • Added support for string matching of user-input for organizatons to get relevant organizations.
  • Added toggle button for advanced search user inputs.
  • Added routing of navigation bar buttons.

Week 44

  • Linked search boxes to their respective functions to fetch and print the correct data.

Plans for week 45

  • Integrate google maps or a similar map function to display the organizations using their coordinates.
  • Evaluate the best method for filtering data, either during fetch()-call, or afterwards using JS (a mix might be required for more advanced searches).
  • Figure out the best way to do paging when there are many results.

Plans for week 46

  • Add functionality for feedback and user suggestions.
  • Continue development of dynamically updating search fields.
  • Continue adding functionality and link everything together.

Plans for week 47

  • Clean up and release

Git Project Repository

https://github.uio.no/MFLD2/MFLD2