add population UI

frontend/app-dashboard/css/side-panel.css

@@ -284,13 +284,18 @@ form label {
 }
 
 .box-count-left {
-    padding: 0 5px 5px 15px;
-    width: 180px;
+    padding: 0 2px 5px 5px;
+    width: 33%;
 }
 
 .box-count-right {
-    padding: 0 15px 5px 5px;
-    width: 170px;
+    padding: 0 5px 5px 2px;
+    width: 33%;
+}
+
+.box-count-middle {
+    padding: 0 2px 5px 2px;
+    width: 33%;
 }
 
 #building-count, #vulnerability-score, .score, #road-count, #vulnerability-score-road{

frontend/app-dashboard/dashboard.html

@@ -446,10 +446,13 @@
     <div id="chart-score-panel">
         <div class="col-lg-12 panel-title panel-sub-title" style="border-bottom: none !important; padding: 0 0 10px 0">
             <div class="col-lg-6 tab-active tab-title" tab-target="building">
-                <i class="fa fa-building-o" aria-hidden="true"></i> Buildings
+                <i class="fa fa-building-o" aria-hidden="true"></i><span class="tab-name"> Buildings</span>
             </div>
-            <div class="col-lg-6 tab-title" style="border-left: 1px solid #ddd" tab-target="road">
-                <i class="fa fa-road" aria-hidden="true"></i> Roads
+            <div class="col-lg-3 tab-title" style="border-left: 1px solid #ddd" tab-target="road">
+                <i class="fa fa-road" aria-hidden="true"></i><span class="tab-name" style="display: none"> Roads</span>
+            </div>
+            <div class="col-lg-3 tab-title" style="border-left: 1px solid #ddd" tab-target="population">
+                <i class="fa fa-users" aria-hidden="true"></i><span class="tab-name" style="display: none"> Population</span>
             </div>
         </div>
         <div class="tab-wrapper tab-building">
@@ -488,6 +491,24 @@
                 <canvas id="summary-chart-road" style="height: 350px"></canvas>
             </div>
         </div>
+        <div class="tab-wrapper tab-population" style="display: none">
+            <div class="col-lg-12">
+                <div class="col-lg-5 box-vulnerability">
+                    <div id="vulnerability-score-population">-</div>
+                    <div class="subtext">Vulnerability Score Total</div>
+                </div>
+                <div class="col-lg-5 box-building">
+                    <div id="population-count">-</div>
+                    <div class="subtext">Potentially affected population</div>
+                </div>
+            </div>
+            <div class="col-lg-12 panel-chart-population-residential" style="min-height: 250px">
+                <canvas id="summary-chart-population-residential" style="height: 50px"></canvas>
+            </div>
+            <div class="col-lg-12 panel-chart-population" style="min-height: 350px">
+                <canvas id="summary-chart-population" style="height: 350px"></canvas>
+            </div>
+        </div>
     </div>
     <div id="region-summary-panel" style="border-top: 1px solid #ddd; padding-bottom: 35px">
         </div>
@@ -501,7 +522,7 @@
 
 <script type="text/template" id="region-summary-panel-template">
     <tr>
-        <td class="text-center item-header" colspan="2">
+        <td class="text-center item-header" colspan="3">
             <button class="btn btn-arrow pull-right drilldown trigger-status-<%= trigger_status %>" data-region="<%= region %>" data-region-id="<%= id %>" data-region-trigger-status="<%= trigger_status %>"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button>
             <%= name %>
         </td>
@@ -513,12 +534,18 @@
                 <div class="subtext">Potentially affected buildings</div>
             </div>
         </td>
-        <td class="box-count-right">
+        <td class="box-count-middle">
             <div class="box-count" data-road-region-id="<%= id %>">
                 <div class="score"><%= flooded_road_count %></div>
                 <div class="subtext">Potentially affected roads</div>
             </div>
         </td>
+        <td class="box-count-right">
+            <div class="box-count">
+                <div class="score"><%= flooded_population_count %></div>
+                <div class="subtext">Potentially affected population</div>
+            </div>
+        </td>
     </tr>
 </script>
 

frontend/app-dashboard/js/model/population_district_summary.js

@@ -0,0 +1,20 @@
+define([
+    'backbone',
+    'moment'
+], function (Backbone) {
+
+    const PopulationDistrictSummary = Backbone.Model.extend({
+        urlRoot: postgresUrl + 'mv_flood_event_population_district_summary',
+        url: function () {
+            return `${this.urlRoot}?id=eq.${this.id}`
+        }
+    });
+
+    return Backbone.Collection.extend({
+        model: PopulationDistrictSummary,
+        urlRoot: postgresUrl + 'mv_flood_event_population_district_summary',
+        url: function () {
+            return this.urlRoot;
+        }
+    });
+});

frontend/app-dashboard/js/model/population_sub_district_summary.js

@@ -0,0 +1,20 @@
+define([
+    'backbone',
+    'moment'
+], function (Backbone) {
+
+    const PopulationSubDistrictSummary = Backbone.Model.extend({
+        urlRoot: postgresUrl + 'mv_flood_event_population_sub_district_summary',
+        url: function () {
+            return `${this.urlRoot}?id=eq.${this.id}`
+        }
+    });
+
+    return Backbone.Collection.extend({
+        model: PopulationSubDistrictSummary,
+        urlRoot: postgresUrl + 'mv_flood_event_population_sub_district_summary',
+        url: function () {
+            return this.urlRoot;
+        }
+    });
+});

frontend/app-dashboard/js/model/population_village_summary.js

@@ -0,0 +1,20 @@
+define([
+    'backbone',
+    'moment'
+], function (Backbone) {
+
+    const PopulationVillageSummary = Backbone.Model.extend({
+        urlRoot: postgresUrl + 'mv_flood_event_population_village_summary',
+        url: function () {
+            return `${this.urlRoot}?id=eq.${this.id}`
+        }
+    });
+
+    return Backbone.Collection.extend({
+        model: PopulationVillageSummary,
+        urlRoot: postgresUrl + 'mv_flood_event_population_village_summary',
+        url: function () {
+            return this.urlRoot;
+        }
+    });
+});