@@ -10,11 +10,13 @@ 'ngMessages',
     'angularBootstrapMaterial',
     'ui.bootstrap',
     'toastr',
+    'chart.js',
     'app.navbar',
     'app.main',
     'app.signup',
     'app.login',
-    'app.id'
+    'app.id',
+    'app.stats'
 ]).
 config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
         $locationProvider.hashPrefix('!');

@@ -13,6 +13,7 @@ "angular-bootstrap-material": "abm#^0.1.4",
     "angular-bootstrap": "^2.5.0",
     "components-font-awesome": "^4.7.0",
     "angular-toastr": "^2.1.1",
-    "cssMaterialColors": "*"
+    "cssMaterialColors": "*",
+    "angular-chart.js": "^1.1.1"
   }
 }

@@ -1,14 +1,32 @@
+/*@font-face {
+    font-family: Elianto;
+    src: url('../fonts/Elianto/Elianto-Regular.otf');
+}*/
+
 body {
     /*background: #15191e!important;*/
     background: #000000!important;
     color: #ffffff!important;
+    font-family: 'Open Sans', sans-serif!important;
 }
+
 .card {
-    /*background: #1f262d!important;*/
+    background: #1f262d!important;
     /*background: #15191e!important;
     color: #ffffff!important;*/
     /*border: 1px solid #ffffff!important;*/
-
     background: #000000!important;
     color: #ffffff!important;
 }
+
+h1, h2, h3, h4, h5, h6 {
+    /*font-family: 'Raleway', sans-serif!important;*/
+    font-family: 'Overpass Mono', monospace!important;
+}
+
+.navbar-brand, .card-title {
+    font-family: 'Overpass Mono', monospace!important;
+}
+.btn {
+    font-family: 'Overpass Mono', monospace!important;
+}

@@ -0,0 +1,15 @@
+{\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190
+{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
+{\colortbl;\red255\green255\blue255;}
+\paperw11900\paperh16840\margl1440\margr1440\vieww10800\viewh8400\viewkind0
+\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural
+
+\f0\fs24 \cf0 Thanks for downloading BLANKA FONT !\
+\
+You can use it for free and commercial.\
+\
+Feedbacks are welcome !\
+\
+\'97\
+Emmeran RICHARD.\
+www.emmeranrichard.fr}

@@ -8,6 +8,12 @@ <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="icon" type="image/png" href="img/darkID-logo-black.png">
 
+    <!-- Fonts -->
+    <!-- in development I use googlefonts to go faster, but for the final app, I'll use downloaded fonts -->
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Overpass+Mono:700|Raleway:700" rel="stylesheet">
+
+
+
     <link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.min.css">
 
     <link rel="stylesheet" href="css/own.css">
@@ -18,7 +24,7 @@ </head>
 
 <body ng-app="webapp">
     <div ng-include="'views/navbar.html'"></div>
-    <br><br><br>
+    <br><br><br><br>
     <div ng-view></div>
 
 
@@ -48,6 +54,10 @@
     <!-- jQuery for Bootstrap -->
     <script src="bower_components/jquery/dist/jquery.min.js"></script>
 
+    <!-- Angular Chart -->
+    <script src="bower_components/chart.js/dist/Chart.min.js"></script>
+    <script src="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>
+
     <!-- toastr -->
     <link rel="stylesheet" type="text/css" href="bower_components/angular-toastr/dist/angular-toastr.css" />
     <script type="text/javascript" src="bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script>
@@ -59,6 +69,7 @@ <script src="views/main/main.js"></script>
     <script src="views/signup/signup.js"></script>
     <script src="views/login/login.js"></script>
     <script src="views/id/id.js"></script>
+    <script src="views/stats/stats.js"></script>
 
 
 <!-- ELECTRON

@@ -4,44 +4,46 @@ <div class="col-sm-2">
 
         </div>
         <div class="col-sm-8">
-            <div class="card">
-                <div class="card-body">
-                    <div ng-click="newID()" class="btn btn-raised pull-right c_o_pink300">Create new ID</div>
-                    <h4 class="card-title">
+            <div ng-click="newID()" class="btn btn-raised pull-right c_o_pink300">Create new ID</div>
+            <h4 class="card-title">
                         My IDs
                     </h4>
-                    <div class="card" ng-repeat="id in ids" style="overflow-x:hidden;">
-                        <div class="card-body">
-                            <h4>{{id.id}}</h4>
-                                <span class="pull-right">{{id.date | date: "dd.MM.y, HH:mm:ss"}}h</span>
+            <div class="card" ng-repeat="id in ids" style="overflow-x:hidden;">
+                <div class="card-body">
+                    <h4>{{id.id}}</h4>
+                    <span class="pull-right">{{id.date | date: "dd.MM.y, HH:mm:ss"}}h</span>
 
-                                <span class="badge c_o_red300" ng-show="!id.verified">Not verified</span>
-                                <span class="badge c_o_green300" ng-show="id.verified">Verified</span>
-                                <span class="badge c_o_orange300" ng-show="!id.unblindedsig">Not signed</span>
-                                <span class="badge c_o_blue300" ng-show="id.unblindedsig">Signed</span>
-                                <span class="badge c_o_deepPurple300" ng-show="id.blockchainref">in Blockchain</span>
-                            <div class="row">
-                                <div class="col-sm-6">
-                                    <div ng-click="clientApp('blindandsendtosign', id.id)" ng-show="!id.unblindedsig" class="btn btn-raised btn-sm c_o_cyan300">Send to serverIDsigner</div>
-                                    <div ng-click="clientApp('addtoblockchain', id.id)" ng-show="id.unblindedsig && !id.blockchainref" class="btn btn-raised btn-sm c_o_deepPurple300">Add to blockchain</div>
-                                    <a ng-href="#!/id/{{id.id}}" ng-show="id.blockchainref" class="btn btn-raised btn-sm c_o_green300">Use ID</a>
-                                </div>
-                                <div class="col-sm-6">
-                                    <!--<div ng-click="verify(id.id)"  ng-show="!id.verified"class="btn btn-sm btn-raised c_o_deepPurple300 pull-right">Verify</div>-->
-
-                                    <div ng-click="clientApp('delete', id.id)" class="btn btn-raised pull-right btn-sm c_o_red300">
-                                        <i title="Delete" class="fa fa-trash fa-1x"></i>
-                                    </div>
-                                </div>
+                    <span class="badge c_o_red300" ng-show="!id.verified">Not verified</span>
+                    <span class="badge c_o_green300" ng-show="id.verified">Verified</span>
+                    <span class="badge c_o_orange300" ng-show="!id.unblindedsig">Not signed</span>
+                    <span class="badge c_o_blue300" ng-show="id.unblindedsig">Signed</span>
+                    <span class="badge c_o_deepPurple300" ng-show="id.blockchainref">in Blockchain</span>
+                    <div class="row">
+                        <div class="col-sm-6">
+                            <div ng-click="clientApp('blindandsendtosign', id.id)" ng-show="!id.unblindedsig" class="btn btn-raised btn-sm c_o_cyan300">
+                                Send to serverIDsigner
                             </div>
+                            <div ng-click="clientApp('addtoblockchain', id.id)" ng-show="id.unblindedsig && !id.blockchainref" class="btn btn-raised btn-sm c_o_deepPurple300">
+                                <i title="" class="fa fa-chain"></i> Add to blockchain
+                            </div>
+                            <a ng-href="#!/id/{{id.id}}" ng-show="id.blockchainref" class="btn btn-raised btn-sm c_o_green300">
+                                        Use ID
+                                    </a>
                         </div>
-                    </div>
+                        <div class="col-sm-6">
+                            <!--<div ng-click="verify(id.id)"  ng-show="!id.verified"class="btn btn-sm btn-raised c_o_deepPurple300 pull-right">Verify</div>-->
 
-                    <div class="row">
-                        <div class="progress progress-striped" ng-show="generatingID">
-                          <div class="progress-bar progress-bar-success active" style="width: 100%"></div>
+                            <div ng-click="clientApp('delete', id.id)" class="btn btn-raised pull-right btn-sm c_o_red300">
+                                <i title="Delete" class="fa fa-trash fa-1x"></i>
+                            </div>
                         </div>
                     </div>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="progress progress-striped" ng-show="generatingID">
+                    <div class="progress-bar progress-bar-success active" style="width: 100%"></div>
                 </div>
             </div>
         </div>

@@ -8,7 +8,10 @@ <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
                 <a class="navbar-brand" href="#!/" title="darkID">
-                    <img src="img/darkID-logo-white.png" style="width:30px;height:30px;display:inline;" alt=""> <b>darkID</b>
+                    <img src="img/darkID-logo-white.png" style="width:30px;height:30px;display:inline;" alt=""> darkID
+                </a>
+                <a class="navbar-brand" href="#!/stats" title="Stats">
+                    Stats
                 </a>
             </div>
             <div class="navbar-collapse collapse navbar-responsive-collapse">

@@ -0,0 +1,39 @@
+<div class="container">
+    <div class="row">
+        <div class="col-sm-2">
+
+        </div>
+        <div class="col-sm-8">
+            <h4 class="card-title">
+                Stats
+            </h4>
+            <div class="card">
+                <div class="card-body">
+                    <div class="row">
+                        <canvas id="line" class="chart chart-line" chart-data="chart1.data"
+                        chart-labels="chart1.labels"
+                        chart-colors="chart1.colours">
+                        </canvas>
+                    </div>
+                    <div class="row">
+                        <canvas id="line" class="chart chart-pie" chart-data="chart2.data"
+                        chart-labels="chart2.labels"
+                        chart-colors="chart2.colours">
+                        </canvas>
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="progress progress-striped" ng-show="generatingID">
+                    <div class="progress-bar progress-bar-success active" style="width: 100%"></div>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-2">
+
+        </div>
+
+    </div>
+</div>

@@ -0,0 +1,136 @@
+'use strict';
+
+angular.module('app.stats', ['ngRoute'])
+
+    .config(['$routeProvider', function($routeProvider) {
+        $routeProvider.when('/stats', {
+            templateUrl: 'views/stats/stats.html',
+            controller: 'StatsCtrl'
+        });
+    }])
+
+    .controller('StatsCtrl', function($scope, $rootScope, $http, $filter) {
+
+        $rootScope.server = JSON.parse(localStorage.getItem("darkID_server"));
+
+        $scope.generatingID = false;
+        $scope.ids = [];
+        $http.get(clientapi + 'ids')
+            .then(function(data) {
+                console.log('data success');
+                console.log(data);
+                $scope.ids = data.data;
+                $scope.idsToChart();
+            }, function(data) {
+                console.log('data error');
+            });
+
+        $scope.newID = function() {
+            $scope.generatingID = true;
+            $http.get(clientapi + 'newid')
+                .then(function(data) {
+                    console.log('data success');
+                    console.log(data);
+                    $scope.ids = data.data;
+                    $scope.generatingID = false;
+
+                }, function(data) {
+                    console.log('data error');
+                });
+        };
+
+        $scope.blindAndSendToSign = function(id) {
+            $http.get(clientapi + 'blindandsendtosign/' + id)
+                .then(function(data) {
+                    console.log('data success');
+                    console.log(data);
+                    $scope.ids = data.data;
+
+                }, function(data) {
+                    console.log('data error');
+                });
+        };
+        $scope.verify = function(id) {
+            $http.get(clientapi + 'verify/' + id)
+                .then(function(data) {
+                    console.log('data success');
+                    console.log(data);
+                    $scope.ids = data.data;
+
+                }, function(data) {
+                    console.log('data error');
+                });
+        };
+        $scope.clientApp = function(route, param) {
+            $http.get(clientapi + route + '/' + param)
+                .then(function(data) {
+                    console.log('data success');
+                    console.log(data);
+                    $scope.ids = data.data;
+
+                }, function(data) {
+                    console.log('data error');
+                });
+        };
+
+        //chartjs
+        $scope.chart1 = {
+            colours: ['#4DD0E1', '#9575CD', '#F06292', '#FFF176'],
+            labels: [],
+            data: []
+        };
+        $scope.chart2 = {
+            colours: ['#4DD0E1', '#9575CD', '#F06292', '#FFF176'],
+            labels: [],
+            data: []
+        };
+        $scope.idsToChart = function() {
+            //chart1
+            var dictionary = {};
+            var ids = $scope.ids;
+            for(var i=0; i<ids.length; i++) {
+                var day = $filter('date')(ids[i].date, 'dd.MM.y, HH:mm');
+                if(dictionary[day]==undefined) {
+                    dictionary[day] = 1
+                } else {
+                    dictionary[day]++;
+                }
+            }
+            console.log(dictionary);
+            for(var key in dictionary) {
+                $scope.chart1.labels.push(key);
+                $scope.chart1.data.push(dictionary[key]);
+            }
+
+
+            //chart2
+            var dictionary = {};
+            for(var i=0; i<ids.length; i++) {
+                if(ids[i].blockchainref) {
+                    if(dictionary['in blockchain']==undefined) {
+                        dictionary['in blockchain'] = 1
+                    } else {
+                        dictionary['in blockchain']++;
+                    }
+                } else if(ids[i].unblindedsig) {
+                    if(dictionary['signed']==undefined) {
+                        dictionary['signed'] = 1
+                    } else {
+                        dictionary['signed']++;
+                    }
+                } else {
+                    if(dictionary['unsigned']==undefined) {
+                        dictionary['unsigned'] = 1
+                    } else {
+                        dictionary['unsigned']++;
+                    }
+                }
+            }
+            console.log(dictionary);
+            for(var key in dictionary) {
+                $scope.chart2.labels.push(key);
+                $scope.chart2.data.push(dictionary[key]);
+            }
+
+        };
+    });