fernando/luos
1
0
Fork 0
Code Releases Activity

Dashboard responsiveness improvementes and solution to NDD-34

Browse Source
This commit is contained in:
Dante
2015-04-02 16:09:23 -04:00
parent 0efe9ceecf
commit 154388cb20
2 changed files with 102 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
workflow/engine/js/strategicDashboard/dashboard.js
View File

@@ -255,7 +255,7 @@
//Items by each type:
var proEffic = '<div class="col-lg-3 col-md-6 dashPro" id="proEfficItem" data-gs-min-width="3" data-gs-min-height="2" data-gs-max-height="2">\
<div class="proGreen panel panel-green grid-stack-item-content">\
<div class="proGreen panel panel-green grid-stack-item-content" style="min-width: 200px;">\
<a data-toggle="collapse" href="#efficiencyindex" aria-expanded="false" aria-controls="efficiencyindex">\
<div class="panel-heading">\
<div class="row">\
@@ -273,7 +273,7 @@
</div>';
var userEffic = '<div class="col-lg-3 col-md-6 dashUsr" id="userEfficItem" data-gs-min-width="3" data-gs-min-height="2" data-gs-max-height="2">\
<div class="proRed panel panel-red grid-stack-item-content">\
<div class="proRed panel panel-red grid-stack-item-content" style="min-width: 200px;">\
<a data-toggle="collapse" href="#userefficiency" aria-expanded="false" aria-controls="userefficiency">\
<div class="panel-heading">\
<div class="row">\
@@ -291,7 +291,7 @@
</div>';
var compCases = '<div class="col-lg-3 col-md-6" id="generalLowItem" data-gs-min-width="3" data-gs-min-height="2" data-gs-max-height="2">\
<div class="panel ie-panel panel-primary grid-stack-item-content">\
<div class="panel ie-panel panel-primary grid-stack-item-content" style="min-width: 200px;">\
<a data-toggle="collapse" href="#completedcases" aria-expanded="false" aria-controls="completedcases">\
<div class="panel-heading">\
<div class="row">\
@@ -312,7 +312,7 @@
</div>';
var numCases = '<div class="col-lg-3 col-md-6" id="generalGreatItem" data-gs-min-width="3" data-gs-min-height="2" data-gs-max-height="2">\
<div class="panel ie-panel panel-yellow grid-stack-item-content">\
<div class="panel ie-panel panel-yellow grid-stack-item-content" style="min-width: 200px;">\
<a data-toggle="collapse" href="#numbercases" aria-expanded="false" aria-controls="numbercases">\
<div class="panel-heading">\
<div class="row">\
@@ -333,11 +333,44 @@
</div>';
//Data by Indicator elements:
var proEfficDataGen = '<div class="process-div well" id="proEfficiencyData" data-gs-no-resize="true" style="height:auto;"><div class="panel-heading greenbg"><span id="proEfficTitle"> '+ G_STRING.ID_PRO_EFFICIENCY_INDEX +' </span></div><div class="text-center huge"><div class="col-xs-3 vcenter"><div id="proEfficIndex" class="green">26%</div><div class="small grey">'+ G_STRING.ID_EFFICIENCY_INDEX +'</div></div><div class="col-xs-3 vcenter"><div id="proEfficCost" class="red">$1813.50</div><div class="small grey">'+ G_STRING.ID_INEFFICIENCY_COST +'</div></div><div class="col-xs-6" id="proEfficGenGraph" style="width:500px;height:300px; margin-left:80px;"><img src="../dist/img/graph.png"/></div></div><div class="clearfix"></div></div>';
var proEfficDataGen = '<div class="process-div well" id="proEfficiencyData" data-gs-no-resize="true" style="clear:both;position:relative;height:auto;">\
<div class="panel-heading greenbg"><span id="proEfficTitle"> '+ G_STRING.ID_PRO_EFFICIENCY_INDEX +' </span></div>\
<div class="text-center huge">\
<div class="col-xs-3 vcenter">\
<div id="proEfficIndex" class="green">26%</div>\
<div class="small grey">'+ G_STRING.ID_EFFICIENCY_INDEX +'</div>\
</div>\
<div class="col-xs-3 vcenter">\
<div id="proEfficCost" class="red">$1813.50</div>\
<div class="small grey">'+ G_STRING.ID_INEFFICIENCY_COST +'</div>\
</div>\
<div class="col-xs-6" id="proEfficGenGraph" style="width:500px;height:300px; margin-left:80px;"><img src="../dist/img/graph.png" /></div>\
</div>\
<div class="clearfix"></div>\
</div>';
var proEfficData = '<div class="process-div well" id="proEfficiencyData" data-gs-no-resize="true"><div class="panel-heading greenbg"><ol class="breadcrumb"><li><a id="link" href="javascript:back();"><i class="fa fa-chevron-left fa-fw"></i><span id="proEfficTitle"> '+ G_STRING.ID_PRO_EFFICIENCY_INDEX +' </span></a></li><li id="proDetName">Process 1 name</li></ol></div><div class="text-center huge"><div class="col-xs-3 vcenter"><div id="proEfficIndex" class="green">26%</div><div class="small grey">'+ G_STRING.ID_EFFICIENCY_INDEX +'</div></div><div class="col-xs-3 vcenter"><div id="proEfficCost" class="red">$1813.50</div><div class="small grey">'+ G_STRING.ID_INEFFICIENCY_COST +'</div></div><div class="col-xs-6" id="proEfficGraph" style="width:570px; height:300px; margin-left:70px; "><img src="../dist/img/graph.png"/></div></div><div class="clearfix"></div></div>';
var proEfficData = '<div class="process-div well" id="proEfficiencyData" data-gs-no-resize="true" style="clear:both;position:relative;">\
<div class="panel-heading greenbg">\
<ol class="breadcrumb">\
<li><a id="link" href="javascript:back();"><i class="fa fa-chevron-left fa-fw"></i><span id="proEfficTitle"> '+ G_STRING.ID_PRO_EFFICIENCY_INDEX +' </span></a></li>\
<li id="proDetName">Process 1 name</li>\
</ol>\
</div>\
<div class="text-center huge">\
<div class="col-xs-3 vcenter">\
<div id="proEfficIndex" class="green">26%</div>\
<div class="small grey">'+ G_STRING.ID_EFFICIENCY_INDEX +'</div>\
</div>\
<div class="col-xs-3 vcenter">\
<div id="proEfficCost" class="red">$1813.50</div>\
<div class="small grey">'+ G_STRING.ID_INEFFICIENCY_COST +'</div>\
</div>\
<div class="col-xs-6" id="proEfficGraph" style="width:570px; height:300px; margin-left:70px; "><img src="../dist/img/graph.png" /></div>\
</div>\
<div class="clearfix"></div>\
</div>';
var proEfficDetail = '<div id="process" class="process-div well hideme" data-gs-no-resize="true">\
var proEfficDetail = '<div id="process" class="process-div well hideme" data-gs-no-resize="true" style="clear:both;position:relative;">\
<div class="col-lg-12 vcenter-task">\
<a href="#" class="process-button">\
<div class="col-xs-3 text-left title-process">\
@@ -402,11 +435,32 @@
</div>\
</div>';
var generalDataLow = '<div class="process-div well" data-gs-no-resize="true"><div class="panel-heading bluebg"><ol class="breadcrumb"><li id="generalLowTitle">'+ G_STRING.ID_COMPLETED_CASES +'</li></ol></div><div class="text-center huge"><div class="col-xs-6" id="generalGraph1" style="width:600px; height:300px;"><img src="../dist/img/graph.png"/></div><div class="col-xs-6" id="generalGraph2" style="width:600px; height:300px;margin-left:60px;"><img src="../dist/img/graph.png"/></div></div><div class="clearfix"></div></div>';
var generalDataLow = '<div class="process-div well" data-gs-no-resize="true" style="clear:both;position:relative;height:auto;">\
<div class="panel-heading bluebg">\
<ol class="breadcrumb">\
<li id="generalLowTitle">'+ G_STRING.ID_COMPLETED_CASES +'</li>\
</ol>\
</div>\
<div class="text-center huge">\
<div class="col-xs-6" id="generalGraph1" style="width:600px; height:300px;"><img src="../dist/img/graph.png" /></div>\
<div class="col-xs-6" id="generalGraph2" style="width:600px; height:300px;margin-left:60px;"><img src="../dist/img/graph.png" /></div>\
</div>\
<div class="clearfix"></div>\
</div>';
var generalDataGreat = ' <div class="process-div well" data-gs-no-resize="true"><div class="panel-heading yellowbg"><ol class="breadcrumb"><li id="generalGreatTitle">'+ G_STRING.ID_NUMBER_CASES +'</li></ol></div><div class="text-center huge"><div class="col-xs-6" id="generalGraph1" style="width:600px; height:300px;"><img src="../dist/img/graph.png"/></div><div class="col-xs-6" id="generalGraph2" style="width:600px; height:300px; margin-left:60px;"><img src="../dist/img/graph.png"/></div></div><div class="clearfix"></div></div>';
var generalDataGreat = '<div class="process-div well" data-gs-no-resize="true" style="clear:both;position:relative;height:auto;">\
<div class="panel-heading yellowbg">\
<ol class="breadcrumb">\
<li id="generalGreatTitle">'+ G_STRING.ID_NUMBER_CASES +'</li>\
</ol>\
</div>\
<div class="text-center huge">\
<div class="col-xs-6" id="generalGraph1" style="width:600px; height:300px;"><img src="../dist/img/graph.png" /></div>\
<div class="col-xs-6" id="generalGraph2" style="width:600px; height:300px; margin-left:60px;"><img src="../dist/img/graph.png" /></div>\
</div>\
<div class="clearfix"></div>\
</div>';
var oType;
var actualDashId;

66
workflow/engine/templates/strategicDashboard/viewDashboard.html
View File

@@ -56,37 +56,47 @@
<i class="fa fa-chevron-down fa-1x"></i>
</a>
<h4 id="titleH4" class="header-dashboard">{translate label="ID_MANAGERS_DASHBOARDS"}</h4>
<div class="pull-right dashboard-right">
<h5 class="pull-left">{translate label="ID_DASH_COMPARE_MONTH"}:</h5>
<button type="button" class="btn btn-compare btn-success pull-right btn-date">{translate label="ID_DASH_COMPARE"}</button>
<div class="pull-right dashboard-right container-fluid">
<select id="year" class="form-control pull-right ">
{literal}
<script>
now = new Date();
anio = now.getFullYear();
for(a=anio;a>=anio-7;a--){
document.write('<option value="'+a+'">'+a+'</option>');
}
</script>
{/literal}
</select>
<div class="row pull-left">
<div class="span4 pull-left">
<h5 class="pull-left">{translate label="ID_DASH_COMPARE_MONTH"}:</h5>
</div>
<select id="mounth" class="form-control pull-right ">
<option value="1">{translate label="ID_MONTH_ABB_1"}</option>
<option value="2">{translate label="ID_MONTH_ABB_2"}</option>
<option value="3">{translate label="ID_MONTH_ABB_3"}</option>
<option value="4">{translate label="ID_MONTH_ABB_4"}</option>
<option value="5">{translate label="ID_MONTH_ABB_5"}</option>
<option value="6">{translate label="ID_MONTH_ABB_6"}</option>
<option value="7">{translate label="ID_MONTH_ABB_7"}</option>
<option value="8">{translate label="ID_MONTH_ABB_8"}</option>
<option value="9">{translate label="ID_MONTH_ABB_9"}</option>
<option value="10">{translate label="ID_MONTH_ABB_10"}</option>
<option value="11">{translate label="ID_MONTH_ABB_11"}</option>
<option value="12">{translate label="ID_MONTH_ABB_12"}</option>
</select>
<div class="span4 pull-left">
<button type="button" class="btn btn-compare btn-success pull-right btn-date">{translate label="ID_DASH_COMPARE"}</button>
</div>
<div class="span4 pull-left">
<select id="year" class="form-control pull-right ">
{literal}
<script>
now = new Date();
anio = now.getFullYear();
for(a=anio;a>=anio-7;a--){
document.write('<option value="'+a+'">'+a+'</option>');
}
</script>
{/literal}
</select>
<select id="mounth" class="form-control pull-right ">
<option value="1">{translate label="ID_MONTH_ABB_1"}</option>
<option value="2">{translate label="ID_MONTH_ABB_2"}</option>
<option value="3">{translate label="ID_MONTH_ABB_3"}</option>
<option value="4">{translate label="ID_MONTH_ABB_4"}</option>
<option value="5">{translate label="ID_MONTH_ABB_5"}</option>
<option value="6">{translate label="ID_MONTH_ABB_6"}</option>
<option value="7">{translate label="ID_MONTH_ABB_7"}</option>
<option value="8">{translate label="ID_MONTH_ABB_8"}</option>
<option value="9">{translate label="ID_MONTH_ABB_9"}</option>
<option value="10">{translate label="ID_MONTH_ABB_10"}</option>
<option value="11">{translate label="ID_MONTH_ABB_11"}</option>
<option value="12">{translate label="ID_MONTH_ABB_12"}</option>
</select>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="collapse" id="collapseExample">