[[TOC]]
= SAFIRE GUI DESIGN =

== Design Norms ==
Why design norms? They are for simplifying the GUI design for optimizing the human computer interactions to: 
* interface with the system with zero complexity 
* know where they are at every step of each function
* present the information using a standard set of objects

Each of the GUI objects will comprise the following design and functional characteristics:
1. [http://eden.sahanafoundation.org/wiki/BluePrint/SAFIRE/GUIDesign#Dashboard Dashboard]
1. Report


=== Dashboard ===
* Upon login the user will be presented with the dashboard
* It has two main containers
   * Quick Nav with indicators and on-click to select the dataset (active incidents is the default dataset)
   * Two tabs with the table and map views for filtering the dataset
==== First "Quick Nav" container ====
A row with status ''Indicators'' that also serve as a ''Quick Nav'' control. They would vary for each of the EOC role specific dashboards: 
||= Role dashboard =||= incidents =||= resource request =||= dispatch =||= planning =||= logistics =||= admin & finance =||    
||Commander || Y || Y || Y || Y || Y || Y ||
||Operations || Y || Y || Y || || ||  ||
||Planning  || Y || Y || || Y || Y || Y ||
||Logistics || Y || || || || Y || ||
||Communication || Y || || || || || || 



==== Second <div> container ====
This container lays static below the first <div> container has two tabs: (1) ''Table view'' and (2) ''Map view''.
* The data displayed in the table and map view are:
   * based on the selected ''Quick Nav'' object
   * It will display the data based on the last set filters (both table or map)
* ''Table view'' is a listing of all the records with attribute specific filtering
* ''Map view'' is spatial representation of the records with zoom in & out functions for filtering
* The table and map view records synchronize during the filtering processed used by either tab (with an option to clear the filters)
* When a record is selected, it triggers navigation to a ''Profile'' representation of the record  

 
=== GUI Objects ===

The GUI design comprises the following objects
||= Object =||= Description =||
||1. Menu items ||role specific navbar menu items and the submenu hierarchy; typically itemized in the nav-bar ||
||2. Dashboard  ||role specific landing page (i.e. upon login direct user to the page). It can be a collection of one or more of the objects listed below. ||
||3. Profile || is a presentation of all the relevant information pertaining to a selected query record that might be presented using one or more of the objects listed below||
||4. Quick Nav  ||image or container to navigate to a particular EOC function: Operations, Planning, Logistics, Communication, Admin & Finance. ||
||5. Button     ||Strictly for CRUD only; i.e. standard Eden buttons ||
||6. Summary    ||summary box with either a paragraph or list (e.g. headline, title, status, priority, date information) ||
||7. Indicator  ||numbers, color-coding, chart, or other dynamic indicator (e.g. number of active incident reports) || 
||8. Table      ||table listing or the records with selected columns (i.e. standard Eden table). ||
||9. Map        ||map view of the geo-tagged information on a map (i.e. standard Eden map). ||