[[TOC]]
= SAFIRE GUI DESIGN =

[https://sites.google.com/view/safire-wirefram WIRE-FRAME] - the dimensions, layout, and colors should not be replicated and should be changed in the actual developments.

Objective of the GUI design specifications are 
* optimizing the HCI to: simplify navigation, find what you need, know what you are doing 
* build interfaces to foster zero complexity 
* CRUD the information using a standard set of objects uniform across all GUIs 

=== Normative GUI Objects ===

The GUI design comprises the following objects
||= Object =||= Description =||
||[wiki:BluePrint/SAFIRE/GUIDesign#Menu Menu] ||role specific navbar menu items and the submenu hierarchy; typically itemized in the nav-bar ||
||[wiki:BluePrint/SAFIRE/GUIDesign#Dashboard 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. ||
||[wiki:BluePrint/SAFIRE/GUIDesign#Profile 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 ||
||[wiki:BluePrint/SAFIRE/GUIDesign#QuickNav Quick Nav] ||image icon or container to navigate to a particular EOC function: Operations, Planning, Logistics, Communication, Admin & Finance. ||
||Button     ||Strictly for controlling CRUD functions only; i.e. standard Eden buttons ||
||Summary    ||summary box with either a paragraph or list (e.g. headline, title, status, priority, date information) ||
||Indicator  ||numbers, color-coding, chart, or other dynamic indicator (e.g. number of active incident reports) || 
||Table      ||table listing or the records with selected columns (i.e. standard Eden table). ||
||Map        ||map view of the geo-tagged information on a map (i.e. standard Eden map). ||
||Feeds      ||other data feeds such as photos, video streams, social media streams, chat window between EOC and Site, || 



==== Menu ====
* Menu items are displayed based on the user's role and privileges

Table provides a higher level design of the roles specific menu items; it will be revised at the time of development
||= Role =||= Menu item =||= sub menu items =||
||IT & Sys Admin || All || All ||
||Commander ||Administration ||Manage Users ||
||Operations ||Administration ||Manage Users ||
||Planning ||Administration ||Manage Users ||
||Logistics ||Administration ||Manage Users ||
||Communication ||Administration ||Manage Users ||

==== Dashboard ====
* Upon login the user will be presented with the dashboard
* It has two main containers
1. Quick Nav with: 
   a. ''Indicators'' with statistics to realize where are the workloads and bottlenecks in the EOC workflows
   a. on-click to select the dataset for the table and map data
   a. Incidents will be the default dataset 
1. Two tabs with the table and map views for filtering the dataset
   a. By default, the Incident data is displayed
   a. when user selects another operation or entity that data is diplayed
   a. tabs will try to remember the last applied filter option, even if user changes between datasets
===== 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 "Filter" 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  

 
==== Profile ====
* Upon selecting a record from the table or map view the user is be presented with the information
* Depending on the information (or queried dataset) it can have a combination of any of the following sub containers:
   * ''Summary'' of the key pieces of information (e.g. title, headline, area description) to confirm that the selected record
   * ''Map'' indicating the origin or the area pertaining to the information (zoom in on the area)
   * ''Table'' listing of all related entities (e.g. related to an incident are: dispatched resources, SitReps, etc)
   * ''Feeds'' photos, videos, social media, other content feeds from the response team
   * Qualifying elements such as identifiers, dates, and author information

Table contains GUI specific information container details  
||= GUI =||= Summary =||= Map =||= Table =||= Feeds =||= Qualifiers =||
||Report ||event type, event title, incident title, incident type, reporting person details, incident details ||Location of the incident, address, geocodes,  ||NONE ||NONE ||event id, incident id, authored datetime, authored by, updated by, update datetime, ||
||Incident ||event type, event title, incident title, incident type, incident state, incident commander details, ||Location of the incident, address, geocodes, (e.g. to help response teams get to location) ||response resources (dispatch) who & what is dispatched & pending, ||image gallery, video stream, social media posts ||event id, incident id, reported datetime, reported by, authored by, authored datetime, updated by, update datetime, ||
||Plan ||event title, incident title, SOP type, plan state, incident commander details, ||nearest available resources (goods and personnel) ||listing of tasks, allocated resources, and expected: start datetime, end datetime, duration ||NONE ||event id, event type, incident id, incident type, plan id, plan type, SOP id, SOP type, planned datetime, planned by, updated datetime, updated by ||
||Track ||event title, incident title, logistic state, incident commander details,  ||sources, destinations, path, track, address, geocodes, ||resources, quantity, source, destination, ETD, ETA, responsible, contact details ||track updates ||event id, event type, incident id, incident type, logistic id, logistic type (if any), plan id(s), planned datetime, planned by, tracked datetime, tracked by, updated datetime, updated by ||
||Sitrep ||Sitrep header information || NONE ||Listing of all report types in chronological order ||NONE ||event id, event type, incident id, incident type, authored datetime, authored  by, updated datetime, updated by ||

==== Quick Nav ====
* Quick Nav objects, displayed in a dashboard, are specif to the function ([wiki:BluePrint/SAFIRE/GUIDesign#FirstQuickNavcontainer see table])
* it is either an image icon or a container that displays the function title and statistics on the operational status.
* present function specific status statistics inside the container:
   * Operations - counts of incident reports with status = created, dispatched, responding, contained, closed
   * Planning - counts of incident plans with status = queued, planning, planned, approved, completed
   * Logistics - counts of logistics activities with status = requested, planned, approved, in-transit, delivered, completed 
   * Communication - counts of Sitreps with status = started, authoring, completed, approved, published
   * Admin & Finance - counts of admin & finance tasks with status = requested, work-in-progress, completed, approved, closed
* On-click navigate to the function specific ''Table view''

==== next ====