add page to show statistics for Message to the Romans

client/app/index.html

@@ -160,6 +160,7 @@ <h2>We're sorry, it seems like your browser is out of date.</h2>
     <script src="scripts/controllers/music.js"></script>
     <script src="scripts/controllers/playlist.js"></script>
     <script src="scripts/controllers/groupgoal.js"></script>
+    <script src="scripts/controllers/statistics.js"></script>
     <script src="scripts/controllers/apk.js"></script>
     <script src="scripts/controllers/downloadinfo.js"></script>
     <script src="scripts/controllers/speeches.js"></script>

client/app/scripts/app.js

@@ -146,6 +146,11 @@ angular.module('bmmApp', [
         controller: 'DownloadInfoCtrl',
         resolve: { '_initData': ['_init', function(_init) { return _init.promise(); }]}
       })
+      .when('/romans-statistics', {
+        templateUrl: 'views/pages/statistics.html',
+        controller: 'StatisticsCtrl',
+        resolve: { '_initData': ['_init', function(_init) { return _init.promise(); }]}
+      })
       .otherwise({
         redirectTo: '/welcome'
       });

client/app/scripts/controllers/statistics.js

@@ -0,0 +1,38 @@
+'use strict';
+
+angular.module('bmmApp')
+  .controller('StatisticsCtrl', function (
+    $scope,
+    $rootScope,
+    $routeParams,
+    $timeout,
+    $location,
+    $window,
+    _api,
+    _track,
+    _init
+  ) {
+    $scope.load = true;
+    $scope.data = null;
+
+    $(window).off('scrollBottom');
+
+    var load = function() {
+      _api.churchStatisticsGet($routeParams.secret).done(function (data) {
+        console.log("data", data);
+        $scope.data = data;
+        console.log("data", data);
+        $scope.load = false;
+      });
+    };
+    load();
+
+    // This is a workaround to fix the scroll problem (#5317 in VSTS)
+    $scope.setMinHeight = function() {
+      $('body').find('div.frontend').css('min-height', '1000px');
+    };
+    $scope.removeMinHeight = function() {
+      $('body').find('div.frontend').css('min-height', 'initial');
+    };
+
+  });

client/app/views/pages/statistics.html

@@ -0,0 +1,56 @@
+
+<div ng-show="!load">
+  <h3>Message to the Romans</h3>
+  <h4>Statistikk for {{data.church_name}}</h4>
+
+  <table class="table-element">
+    <tr style="background-color: lightgrey">
+      <th></th>
+      <th ng-show="!data.limit_to_youth">U18</th>
+      <th ng-show="!data.limit_to_youth">19 - 25</th>
+      <th ng-show="!data.limit_to_youth">26 - 35</th>
+      <th>13 - 35</th>
+    </tr>
+    <tr style="color: #999">
+      <td>Har en personlig konto hos BMM</td>
+      <td ng-show="!data.limit_to_youth">{{data.has_bmm_account_percent_u18 | number : 1}}%</td>
+      <td ng-show="!data.limit_to_youth">{{data.has_bmm_account_percent19to25 | number : 1}}%</td>
+      <td ng-show="!data.limit_to_youth">{{data.has_bmm_account_percent26to35 | number : 1}}%</td>
+      <td>{{data.has_bmm_account_percent_youth | number : 1}}%</td>
+    </tr>
+    <tr>
+      <td>Hørt på minst 1 episode</td>
+      <td ng-show="!data.limit_to_youth">{{data.percent_u18 | number : 1}}%</td>
+      <td ng-show="!data.limit_to_youth">{{data.percent19to25 | number : 1}}%</td>
+      <td ng-show="!data.limit_to_youth">{{data.percent26to35 | number : 1}}%</td>
+      <td>{{data.percent_youth | number : 1}}%</td>
+    </tr>
+    <tr>
+      <td>Hørt på alle episoder fra siste uken</td>
+      <td ng-show="!data.limit_to_youth">{{data.last_week_percent_u18 | number : 1}}%</td>
+      <td ng-show="!data.limit_to_youth">{{data.last_week_percent19to25 | number : 1}}%</td>
+      <td ng-show="!data.limit_to_youth">{{data.last_week_percent26to35 | number : 1}}%</td>
+      <td>{{data.last_week_percent_youth | number : 1}}%</td>
+    </tr>
+
+    <tr>
+      <td>Hørt på alle episoder fra og med 12. februar</td>
+      <td ng-show="!data.limit_to_youth">{{data.since_february12_percent_u18 | number : 1}}%</td>
+      <td ng-show="!data.limit_to_youth">{{data.since_february12_percent19to25 | number : 1}}%</td>
+      <td ng-show="!data.limit_to_youth">{{data.since_february12_percent26to35 | number : 1}}%</td>
+      <td>{{data.since_february12_percent_youth | number : 1}}%</td>
+    </tr>
+    <tr>
+      <td>Hørt på alle episoder så langt</td>
+      <td ng-show="!data.limit_to_youth">{{data.on_track_percent_u18 | number : 1}}%</td>
+      <td ng-show="!data.limit_to_youth">{{data.on_track_percent19to25 | number : 1}}%</td>
+      <td ng-show="!data.limit_to_youth">{{data.on_track_percent26to35 | number : 1}}%</td>
+      <td>{{data.on_track_percent_youth | number : 1}}%</td>
+    </tr>
+  </table>
+
+</div>
+
+<div ng-show="load" style="margin-top: 2em">
+  <img ng-src="fallback_images/gif/load.gif">
+</div>

common/app/scripts/services/_api.js

@@ -1054,6 +1054,13 @@ angular.module('bmmLibApp')
     })
   };
 
+  factory.churchStatisticsGet = function() {
+    return factory.addToQueue({
+      method: 'GET',
+      url: serverUrl + 'statistics/project/church/'
+    })
+  };
+
   factory.trackListOverview = function(type, options) {
     return factory.addToQueue({
       method: 'GET',

common/app/styles/_main.scss

@@ -23,9 +23,10 @@
 @import "partials/popup.scss";
 @import "partials/options.scss";
 @import "partials/size-detector.scss";
+@import "partials/table.scss";
 
 //DIRECTIVES
 @import "directives/videoslider.scss";
 @import "directives/albumslider.scss";
 @import "directives/treeview.scss";
-@import "directives/playlist.scss";
+@import "directives/playlist.scss";

common/app/styles/partials/_table.scss

@@ -0,0 +1,26 @@
+.table-element{
+}
+
+.table-element th {
+  background-color: #ddd;
+  white-space: nowrap;
+}
+
+.table-element tr td:first-child,
+.table-element tr td:last-child
+{
+  background-color: #eee;
+}
+
+.table-element tr td {
+  text-align: right;
+}
+
+.table-element tr td:first-child {
+  text-align: left;
+}
+
+.table-element th,
+.table-element td {
+  padding: 4px 12px;
+}