mirror of
https://github.com/arnaucube/darkID-prototype.git
synced 2026-02-06 19:06:43 +01:00
added stats view to frontend
This commit is contained in:
arnaucode
@@ -10,11 +10,13 @@ angular.module('app', [
|
||||
'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": "^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;
|
||||
}
|
||||
|
||||
BIN
clientApp/GUI/fonts/Blanka/Blanka-Regular.otf
Normal file
BIN
clientApp/GUI/fonts/Blanka/Blanka-Regular.otf
Normal file
Binary file not shown.
15
clientApp/GUI/fonts/Blanka/Please Read This.rtf
Normal file
15
clientApp/GUI/fonts/Blanka/Please Read This.rtf
Normal file
@@ -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}
|
||||
BIN
clientApp/GUI/fonts/Elianto/Elianto-Regular.otf
Normal file
BIN
clientApp/GUI/fonts/Elianto/Elianto-Regular.otf
Normal file
Binary file not shown.
BIN
clientApp/GUI/fonts/Elianto/Elianto-Regular.ttf
Normal file
BIN
clientApp/GUI/fonts/Elianto/Elianto-Regular.ttf
Normal file
Binary file not shown.
@@ -8,6 +8,12 @@
|
||||
|
||||
<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 @@
|
||||
|
||||
<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 @@ Works for both browser and electron with the same code -->
|
||||
<!-- 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 @@ Works for both browser and electron with the same code -->
|
||||
<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>
|
||||
<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>-->
|
||||
<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 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>
|
||||
<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 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>
|
||||
</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">
|
||||
|
||||
39
clientApp/GUI/views/stats/stats.html
Normal file
39
clientApp/GUI/views/stats/stats.html
Normal file
@@ -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>
|
||||
136
clientApp/GUI/views/stats/stats.js
Normal file
136
clientApp/GUI/views/stats/stats.js
Normal file
@@ -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]);
|
||||
}
|
||||
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user