Initial Frontend Refactoring Guidelines and Ideas

20180107

• replace material css fonts with font awesome
• update used contrib

Table Reports

/healthsites-table-reports

• remove modal form row click
• add redirect to Feature Details Page event on row click

Feature Details

/feature-by-uuid/[uuid - 3b61ff63-76a4-4f76-a6ad-2c70e26c8a6a]

• accessed from Table Reports Feature Page, on table row click

• shows feature details

• add base markup / layout [x]

• add line chart [x]

• make line chart responsive[]

• add map [x]

• make map responsive [x]

• add feature marker to map [x]

• marker is draggable [x]

• add form []

• add css

Dashboard

• New index page /

• Add navigation bar

• Add basic Layout with panels

• Add Donut Chart

• Bind Donut Chart to Data

• Add groups count panel

• Add items count panel

---

• Remove unused client side libraries, includes and code [x]
• Move all client side code to heathsites/ [x]
• Begin namespacing globals -> WB [x]
• Fix errors from moving files [x]
• Add base Url, view and template for the Report Table [x]

General:

1. IE 11 must be supported
2. no build process in this initial phaze
3. focus on functional javascript part (logic not visual)
4. use jQuery for visual stuff, use vanilla for everything else

• discuss replacing jQuery with vanilla (2nd - 3rd iteration)

1. move hardcoded lists, objects to config objects(e.g. assessment types) [x]
2. remove unused functions, modules and libraries [x]
3. move away from global scope
   • use namespaces [x]
   • create main js module (namespace) named hcid [x]

Markup:

1. for styling use scss / CSS, avoid using inline CSS
2. replace majority of backend partial templates with dynamic js
   1. *.html template files in template folders
   2. replace only partial templates (small / one liner)
   3. leave form templates intact (for now)
   4. main template view should return prepared template

---

Navigation Bar

+------+------+----+-----+----+---------+---------+
| Logo | Home | Wb | Rep |    | Profile | Log out |
+------+------+----+-----+----+---------+---------+

• home [link]
• waterboard [link]
• reports [link]
• profile [dropdown]
  • update profile [link]
  • change password [link]
  • admin page [link]
• logout [link]

Collapsible SideBar

Dashboard

+---------------------------------------+
| <             Dashboard     [rst all] |
+---------------------------------------+
|                   |  header     [btn] |
|                   +-------------------+
|     info          |                   |
|                   | line chart        |
|                   |                   |
+-------------------+-------------------+
|  cntry      [btn] |  captor     [btn] |
+-------------------+-------------------+
|                   |                   |
| pie chart         | pie chart         |
|                   |                   |
+-------------------+-------------------+
|  [drop]   [search by neame]     [btn] |
+-------------------+-------------------+
|                                       |
|                 line chart            |
|                                       |
+-------------------+-------------------+

Charts

Chart Holder With Header and Action Button

Leaflet Map

• zoom in button
• zoom out button
• Circle Drawing Tool
• Polygon Drawing Tool
• Line Drawing Tool
• Icons
• layer selector

Accordion Form and Form Fields