x
/
bansho
Code Issues Proposed changes

Add actionbar following and refactoring 

Change-Id: I41f9d91d0f8efe86af8cce3c90c2058b1bf86445
This commit is contained in:
Thibault Cohen 2015-07-03 17:11:12 -04:00 committed by Vincent Fournier
parent 5a1d1eb218
commit ee84ad7c69
5 changed files with 141 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/sass/temporary.scss
View File

@ -294,6 +294,10 @@ div.ui-pnotify {
// Action bar
bansho-table-actionbar menu {
z-index: 988889;
}
input#filter__search {
border: none;
width: 100%;

7
app/components/config/config.json
View File

@ -38,6 +38,7 @@
"status_host_status"
]
},
"headerFollow": false,
"inputSource": {
"service": "surveilStatus",
"config": {
@ -78,6 +79,7 @@
"status_last_check"
]
},
"headerFollow": false,
"inputSource": {
"service": "surveilStatus",
"config": {
@ -125,6 +127,7 @@
"status_host_status"
]
},
"headerFollow": false,
"inputSource": {
"service": "surveilStatus",
"config": {
@ -161,6 +164,7 @@
"status_last_check"
]
},
"headerFollow": false,
"inputSource": {
"service": "surveilStatus",
"config": {
@ -206,6 +210,7 @@
"status_host_status"
]
},
"headerFollow": true,
"inputSource": {
"service": "surveilStatus",
"config": {
@ -244,6 +249,7 @@
"status_last_check"
]
},
"headerFollow": true,
"inputSource": {
"service": "surveilStatus",
"config": {
@ -285,6 +291,7 @@
"status_event_time"
]
},
"headerFollow": true,
"inputSource": {
"service": "surveilStatus",
"config": {

161
app/components/table/table.js
View File

@ -21,9 +21,125 @@ angular.module('bansho.table', ['bansho.surveil',
.value('tablesConfig', [])
.controller('TableCtrl', ['$scope', '$interval', '$window', 'surveilStatus', 'tablesConfig',
.service('headerFollow', ['$window', function ($window){
var isFollowing = false, staticHead, followingHead, actionBar = false, actionBarEl, staticActionBar,
staticActionBarYOffset, staticHeadYOffset, yThreshold, yOffset;
function enableFollowingMode() {
isFollowing = true;
setFollowingModeCss();
}
function setFollowingModeCss() {
// We need to show moving head
followingHead.css("display", "table-header-group");
// Resize thead col width
var thList = staticHead.children("tr").children("th");
angular.forEach(thList, function(th, key) {
$(followingHead.children("tr").children("th")[key]).css("width", $(th).css("width"));
});
// If we have an actionbar
if (actionBar) {
// Set actionbar css
staticActionBar.css("top", "0");
staticActionBar.css("position", "fixed");
if (followingHead.css("width") != "0px") {
staticActionBar.css("width", followingHead.css("width"));
}
// Set top css to moving head
followingHead.css("top", staticActionBar.css("height"));
}
}
function disableFollowingMode(){
isFollowing = false;
setStaticModeCss();
}
function setStaticModeCss(){
// We need to hide moving head
followingHead.css("display", "none");
// Resize thead col width
var thList = staticHead.children("tr").children("th");
angular.forEach(thList, function(th, key) {
$(followingHead.children("tr").children("th")[key]).css("width", "auto");
});
// If we have an actionbar
if (actionBar) {
// We need to fix moving actionbar
staticActionBar.css("position", "relative");
if (followingHead.css("width") != "0px") {
staticActionBar.css("width", "auto");
}
}
}
function calculateThreshold() {
// Get YThreshold
staticHeadYOffset = $(staticHead).position().top;
if (actionBar) {
yThreshold = Math.min(staticActionBarYOffset, staticHeadYOffset);
}
else {
yThreshold = staticHeadYOffset;
}
}
function scrollEvent() {
yOffset = $window.pageYOffset;
if (!isFollowing) {
// Get init data
staticHead = $("thead.static-thead");
followingHead = $(staticHead).parent().children("thead.moving-thead");
// Prepare action bar
if (actionBar) {
staticActionBar = actionBarEl.children("menu");
staticActionBarYOffset = $(staticActionBar).position().top;
}
calculateThreshold();
}
if (yOffset >= yThreshold){
enableFollowingMode();
}
else {
disableFollowingMode();
}
}
this.activate = function () {
// Handle header fixed
angular.element(document).ready(function () {
// Prepare action bar
actionBarEl = $("bansho-table-actionbar");
if (actionBarEl.length > 0) {
actionBar = true;
}
// Handle scroll event
angular.element(document).on("scroll", scrollEvent);
// Handle resize event
$($window).resize(function() {
if (isFollowing) {
setFollowingModeCss();
}
else {
setStaticModeCss();
}
});
});
};
this.deactivate = function () {
angular.element(document).off("scroll", scrollEvent);
};
}])
.controller('TableCtrl', ['$scope', '$interval', 'headerFollow', 'surveilStatus', 'tablesConfig',
'actionbarFilters', 'promisesManager', 'tableGlobalConfig',
function ($scope, $interval, $window, surveilStatus, tablesConfig, actionbarFilters, promisesManager, tableGlobalConfig) {
function ($scope, $interval, headerFollow, surveilStatus, tablesConfig, actionbarFilters, promisesManager, tableGlobalConfig) {
var requestFields = [],
conf = tablesConfig[tableGlobalConfig.nextTableIndex],
getData,
@ -34,41 +150,12 @@ angular.module('bansho.table', ['bansho.surveil',
surveilStatus: surveilStatus
};
if (conf.headerFollow) {
headerFollow.activate();
} else {
headerFollow.deactivate();
}
// Handle header fixed
angular.element(document).ready(function () {
// Get init data
var staticHead = angular.element(document.querySelector('thead.static-thead'));
var theadYOffset = $(staticHead).position().top;
var movingHead = $(staticHead).parent().children("thead.moving-thead");
// Handle scroll event
angular.element(document).bind("scroll", function() {
var winheight = $window.innerHeight;
var yoffset = $window.pageYOffset;
if (yoffset > theadYOffset){
// We need to show moving head
movingHead.css("display", "inherit");
// Resize thead col width
var thList = staticHead.children("tr").children("th");
angular.forEach(thList, function(th, key) {
$(movingHead.children("tr").children("th")[key]).css("width", $(th).css("width"));
});
}
else {
// We need to show moving head
movingHead.css("display", "none");
}
});
// Handle resize event
$($window).resize(function() {
// Resize thead col width
var thList = staticHead.children("tr").children("th");
angular.forEach(thList, function(th, key) {
$(movingHead.children("tr").children("th")[key]).css("width", $(th).css("width"));
});
});
});
$scope.cellsName = conf.cells.name;
@ -152,6 +239,7 @@ angular.module('bansho.table', ['bansho.surveil',
conf.isWrappable = JSON.parse(attrs.isWrappable);
conf.noRepeatCell = attrs.noRepeatCell;
conf.headerFollow = scope.$eval(attrs.headerFollow);
tableGlobalConfig.tableId = attrs.tableId;
scope.checkColumn = scope.$eval(attrs.checkColumn);
@ -209,6 +297,7 @@ angular.module('bansho.table', ['bansho.surveil',
this.IsWrappable = config.isWrappable;
this.ContainsActionBar = config.containsActionBar;
this.CheckColumn = config.checkColumn;
this.HeaderFollow = config.headerFollow;
this.NoRepeatCell = config.noRepeatCell;
})

4
app/templates/dashboard/dashboard.html
View File

@ -59,6 +59,7 @@
is-wrappable="{{dashboardTables[0].IsWrappable}}"
no-repeat-cell="{{dashboardTables[0].NoRepeatCell}}"
check-column="{{dashboardTables[0].CheckColumn}}"
header-follow="{{dashboardTables[0].HeaderFollow}}"
refresh-interval="{{dashboardRefreshInterval}}"
additionnal-query-fields="{{dashboardTables[0].additionnalQueryFields}}"
table-id="0"></bansho-table>
@ -85,6 +86,7 @@
is-wrappable="{{dashboardTables[1].IsWrappable}}"
no-repeat-cell="{{dashboardTables[1].NoRepeatCell}}"
check-column="{{dashboardTables[1].CheckColumn}}"
header-follow="{{dashboardTables[1].HeaderFollow}}"
refresh-interval="{{dashboardRefreshInterval}}"
additionnal-query-fields="{{dashboardTables[1].additionnalQueryFields}}"
table-id="1"></bansho-table>
@ -113,6 +115,7 @@
is-wrappable="{{dashboardTables[2].IsWrappable}}"
no-repeat-cell="{{dashboardTables[2].NoRepeatCell}}"
check-column="{{dashboardTables[2].CheckColumn}}"
header-follow="{{dashboardTables[2].HeaderFollow}}"
refresh-interval="{{dashboardRefreshInterval}}"
table-id="2"></bansho-table>
</span>
@ -137,6 +140,7 @@
is-wrappable="{{dashboardTables[3].IsWrappable}}"
no-repeat-cell="{{dashboardTables[3].NoRepeatCell}}"
check-column="{{dashboardTables[3].CheckColumn}}"
header-follow="{{dashboardTables[3].HeaderFollow}}"
refresh-interval="{{dashboardRefreshInterval}}"
table-id="3"></bansho-table>
</span>

1
app/templates/single_table/single_table.html
View File

@ -19,6 +19,7 @@
is-wrappable="{{tableConfig.IsWrappable}}"
check-column="{{tableConfig.CheckColumn}}"
no-repeat-cell="{{tableConfig.NoRepeatCell}}"
header-follow="{{tableConfig.HeaderFollow}}"
refresh-interval="{{singleTableRefreshInterval}}"
table-id="0"></bansho-table>