WEBDIENSTE/YellowLabTools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add onclick property on the rules on dashboard

Browse Source
This commit is contained in:
Gaël Métais
2014-12-21 14:19:56 +01:00
parent 0862116a40
commit c1257afc4c
6 changed files with 94 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/css/dashboard.css
+36 -23
View File
@@ -51,7 +51,7 @@ h4 {
}
.notations {
display: table;
width: 90%;
width: 80%;
margin: 0 10%;
border-spacing: 1em;
}
@@ -63,21 +63,25 @@ h4 {
height: 2.5em;
vertical-align: middle;
}
.notations .notation {
.notations .category {
font-weight: bold;
text-align: center;
width: 20%;
}
.notations .criteria {
font-weight: normal;
width: 75%;
}
.notations .A,
.notations .B,
.notations .C,
.notations .D,
.notations .E,
.notations .F,
.notations .NA {
.notations .A.categoryScore,
.notations .B.categoryScore,
.notations .C.categoryScore,
.notations .D.categoryScore,
.notations .E.categoryScore,
.notations .F.categoryScore,
.notations .NA.categoryScore {
width: 2.5em;
max-width: 2.5em;
min-width: 2.5em;
font-size: 2em;
text-align: center;
border-radius: 0.5em;
@@ -95,6 +99,7 @@ h4 {
font-size: 1em;
color: transparent;
margin: 0 auto;
border-radius: 0.5em;
}
.notations .A {
/* green */
@@ -124,12 +129,18 @@ h4 {
/* Non applicable */
background: #CCC;
}
.notations .icon-eye {
color: #9c4274;
.notations .criteria .table {
width: 100%;
}
.notations .criteria .table > div:hover > div {
background: #F1C40F;
cursor: pointer;
}
.notations .criteria .table {
width: 75%;
.notations .criteria .table > div:hover > div.info {
background: #FFF;
}
.notations .criteria .table > div:hover > div.info .icon-question {
color: #F1C40F;
}
.notations .criteria .grade {
width: 10%;
@@ -141,23 +152,27 @@ h4 {
width: 70%;
}
.notations .criteria .result {
width: 20%;
width: 18%;
font-weight: bold;
white-space: nowrap;
text-align: center;
vertical-align: middle;
}
.notations .warning .label,
.notations .warning .result {
.notations .warning .result,
.notations .icon-warning {
color: #FF1919;
}
.notations .criteria .info {
width: 10%;
width: 2%;
text-align: center;
vertical-align: middle;
background: #FFF;
padding-left: 0.1em;
padding-right: 0.1em;
}
.notations .criteria .icon-question {
color: #f1c40f;
cursor: pointer;
color: transparent;
}
.timeline {
margin: 2em 0 5em;
@@ -363,8 +378,9 @@ input.textFilter {
color: #f1c40f;
cursor: pointer;
}
.table .details .icon-warning {
cursor: pointer;
.table .icon-warning {
display: inline-block;
width: 0.8em;
}
.detailsOverlay {
position: absolute;
@@ -417,9 +433,6 @@ input.textFilter {
.table > div > .startTime.domCreation {
background: #ffe0cc;
}
.table .icon-warning {
color: #e74c3c;
}
/**** NgModal popin (have a look inside bower_components) ****/
.ng-modal {
position: fixed;
front/src/js/app.js
+8
View File
@@ -29,6 +29,14 @@ yltApp.config(['$routeProvider', '$locationProvider',
templateUrl: 'front/views/dashboard.html',
controller: 'DashboardCtrl'
}).
when('/result/:runId/timeline', {
templateUrl: 'front/views/timeline.html',
controller: 'TimelineCtrl'
}).
when('/result/:runId/rule/:policy', {
templateUrl: 'front/views/rule.html',
controller: 'RuleCtrl'
}).
otherwise({
redirectTo: '/'
});
front/src/js/controllers/dashboardCtrl.js
+5 -1
View File
@@ -1,6 +1,6 @@
var dashboardCtrl = angular.module('dashboardCtrl', ['resultsFactory', 'menuService']);
dashboardCtrl.controller('DashboardCtrl', ['$scope', '$routeParams', 'Results', 'Menu', function($scope, $routeParams, Results, Menu) {
dashboardCtrl.controller('DashboardCtrl', ['$scope', '$routeParams', '$location', 'Results', 'Menu', function($scope, $routeParams, $location, Results, Menu) {
$scope.runId = $routeParams.runId;
$scope.Menu = Menu.setCurrentPage('dashboard', $scope.runId);
@@ -8,4 +8,8 @@ dashboardCtrl.controller('DashboardCtrl', ['$scope', '$routeParams', 'Results',
$scope.result = result;
console.log(result);
});
$scope.showRulePage = function(ruleName) {
$location.path('/result/' + $scope.runId + '/rule/' + ruleName);
};
}]);
front/src/less/dashboard.less
+30 -19
View File
@@ -67,7 +67,7 @@ h4 {
.notations {
display: table;
width: 90%;
width: 80%;
margin: 0 10%;
border-spacing: 1em;
}
@@ -79,16 +79,20 @@ h4 {
height: 2.5em;
vertical-align: middle;
}
.notations .notation {
.notations .category {
font-weight: bold;
text-align: center;
width: 20%;
}
.notations .criteria {
font-weight: normal;
width: 75%;
}
.A, .B, .C, .D, .E, .F, .NA {
.notations & {
.notations &.categoryScore {
width: 2.5em;
max-width: 2.5em;
min-width: 2.5em;
font-size: 2em;
text-align: center;
border-radius: 0.5em;
@@ -100,6 +104,7 @@ h4 {
font-size: 1em;
color: transparent;
margin: 0 auto;
border-radius: 0.5em;
}
}
.notations .A {
@@ -130,13 +135,19 @@ h4 {
/* Non applicable */
background: #CCC;
}
.notations .icon-eye {
color: #9c4274;
cursor: pointer;
}
.notations .criteria .table {
width: 75%;
width: 100%;
> div:hover > div {
background: #F1C40F;
cursor: pointer;
&.info {
background: #FFF;
.icon-question {
color: #F1C40F;
}
}
}
}
.notations .criteria .grade {
width: 10%;
@@ -148,22 +159,25 @@ h4 {
width: 70%;
}
.notations .criteria .result {
width: 20%;
width: 18%;
font-weight: bold;
white-space: nowrap;
text-align: center;
vertical-align: middle;
}
.notations .warning .label, .notations .warning .result {
.notations .warning .label, .notations .warning .result, .notations .icon-warning {
color: #FF1919;
}
.notations .criteria .info {
width: 10%;
width: 2%;
text-align: center;
vertical-align: middle;
background: #FFF;
padding-left: 0.1em;
padding-right: 0.1em;
}
.notations .criteria .icon-question {
color: #f1c40f;
cursor: pointer;
color: transparent;
}
@@ -387,8 +401,9 @@ input.textFilter {
color: #f1c40f;
cursor: pointer;
}
.table .details .icon-warning {
cursor: pointer;
.table .icon-warning {
display: inline-block;
width: 0.8em;
}
.detailsOverlay {
@@ -443,10 +458,6 @@ input.textFilter {
background: @domCreationBg;
}
.table .icon-warning {
color: #e74c3c;
}
/**** NgModal popin (have a look inside bower_components) ****/
.ng-modal {
front/src/views/dashboard.html
+14 -5
View File
@@ -4,16 +4,25 @@
<div class="notations">
<div ng-repeat="category in result.scoreProfiles.generic.categories">
<grade score="category.categoryScore"></grade>
<div class="notation">{{category.label}}</div>
<grade score="category.categoryScore" class="categoryScore"></grade>
<div class="category">{{category.label}}</div>
<div class="criteria">
<div class="table">
<div ng-repeat="ruleName in category.rules" ng-init="rule = result.rules[ruleName]" ng-class="{'warning': rule.abnormal}">
<div class="table" title="Click to see details">
<div ng-repeat="ruleName in category.rules"
ng-init="rule = result.rules[ruleName]"
ng-class="{'warning': rule.abnormal}"
ng-click="showRulePage(ruleName)">
<div class="grade">
<grade score="rule.score"></grade>
</div>
<div class="label">{{rule.policy.label}}</div>
<div class="result">{{rule.value}}</div>
<div class="result">
{{rule.value}}
<span ng-if="rule.abnormal" class="icon-warning"></span>
<span ng-if="rule.abnormalityScore <= -100" class="icon-warning"></span>
<span ng-if="rule.abnormalityScore <= -300" class="icon-warning"></span>
</div>
<div class="info"><span class="icon-question"></span></div>
</div>
</div>
</div>
lib/server/controllers/frontController.js
+1 -1
View File
@@ -4,7 +4,7 @@ var express = require('express');
var FrontController = function(app) {
'use strict';
var routes = ['/', '/about', '/result/:runId', '/queue/:runId'];
var routes = ['/', '/about', '/result/:runId', '/result/:runId/timeline', '/result/:runId/rule/:policy', '/queue/:runId'];
routes.forEach(function(route) {
app.get(route, function(req, res) {