|
|
@@ -16,98 +16,12 @@ export class DashRowCtrl {
|
|
|
/** @ngInject */
|
|
|
constructor(private $scope, private $rootScope, private $timeout) {
|
|
|
this.row.title = this.row.title || 'Row title';
|
|
|
-
|
|
|
- if (this.row.isNew) {
|
|
|
- this.dropView = 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- onDrop(panelId, dropTarget) {
|
|
|
- var dragObject;
|
|
|
-
|
|
|
- // if string it's a panel type
|
|
|
- if (_.isString(panelId)) {
|
|
|
- // setup new panel
|
|
|
- dragObject = {
|
|
|
- row: this.row,
|
|
|
- panel: {
|
|
|
- title: config.new_panel_title,
|
|
|
- type: panelId,
|
|
|
- id: this.dashboard.getNextPanelId(),
|
|
|
- isNew: true,
|
|
|
- },
|
|
|
- };
|
|
|
- } else {
|
|
|
- dragObject = this.dashboard.getPanelInfoById(panelId);
|
|
|
- }
|
|
|
-
|
|
|
- if (dropTarget) {
|
|
|
- dropTarget = this.dashboard.getPanelInfoById(dropTarget.id);
|
|
|
- // if draging new panel onto existing panel split it
|
|
|
- if (dragObject.panel.isNew) {
|
|
|
- dragObject.panel.span = dropTarget.panel.span = dropTarget.panel.span/2;
|
|
|
- // insert after
|
|
|
- dropTarget.row.panels.splice(dropTarget.index+1, 0, dragObject.panel);
|
|
|
- } else if (this.row === dragObject.row) {
|
|
|
- // just move element
|
|
|
- this.row.movePanel(dragObject.index, dropTarget.index);
|
|
|
- } else {
|
|
|
- // split drop target space
|
|
|
- dragObject.panel.span = dropTarget.panel.span = dropTarget.panel.span/2;
|
|
|
- // insert after
|
|
|
- dropTarget.row.panels.splice(dropTarget.index+1, 0, dragObject.panel);
|
|
|
- // remove from source row
|
|
|
- dragObject.row.removePanel(dragObject.panel, false);
|
|
|
- }
|
|
|
- } else {
|
|
|
- dragObject.panel.span = 12 - this.row.span;
|
|
|
- this.row.panels.push(dragObject.panel);
|
|
|
-
|
|
|
- // if not new remove from source row
|
|
|
- if (!dragObject.panel.isNew) {
|
|
|
- dragObject.row.removePanel(dragObject.panel, false);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- this.dropView = 0;
|
|
|
- this.row.panelSpanChanged();
|
|
|
- this.$timeout(() => {
|
|
|
- this.$rootScope.$broadcast('render');
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- setHeight(height) {
|
|
|
- this.row.height = height;
|
|
|
- this.$scope.$broadcast('render');
|
|
|
- }
|
|
|
-
|
|
|
- moveRow(direction) {
|
|
|
- var rowsList = this.dashboard.rows;
|
|
|
- var rowIndex = _.indexOf(rowsList, this.row);
|
|
|
- var newIndex = rowIndex + direction;
|
|
|
-
|
|
|
- if (newIndex >= 0 && newIndex <= (rowsList.length - 1)) {
|
|
|
- _.move(rowsList, rowIndex, newIndex);
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
toggleCollapse() {
|
|
|
- this.closeDropView();
|
|
|
this.row.collapse = !this.row.collapse;
|
|
|
}
|
|
|
|
|
|
- onMenuAddPanel() {
|
|
|
- this.dropView = 1;
|
|
|
- }
|
|
|
-
|
|
|
- onMenuRowOptions() {
|
|
|
- this.dropView = 2;
|
|
|
- }
|
|
|
-
|
|
|
- closeDropView() {
|
|
|
- this.dropView = 0;
|
|
|
- }
|
|
|
-
|
|
|
onMenuDeleteRow() {
|
|
|
this.dashboard.removeRow(this.row);
|
|
|
}
|
|
|
@@ -127,116 +41,8 @@ coreModule.directive('dashRow', function($rootScope) {
|
|
|
link: function(scope, element) {
|
|
|
scope.$watchGroup(['ctrl.row.collapse', 'ctrl.row.height'], function() {
|
|
|
element.toggleClass('dash-row--collapse', scope.ctrl.row.collapse);
|
|
|
- element.find('.panels-wrapper').css({minHeight: scope.ctrl.row.collapse ? '5px' : scope.ctrl.row.height});
|
|
|
});
|
|
|
-
|
|
|
- $rootScope.onAppEvent('panel-fullscreen-enter', function(evt, info) {
|
|
|
- var hasPanel = _.find(scope.ctrl.row.panels, {id: info.panelId});
|
|
|
- if (!hasPanel) {
|
|
|
- element.hide();
|
|
|
- }
|
|
|
- }, scope);
|
|
|
-
|
|
|
- $rootScope.onAppEvent('panel-fullscreen-exit', function() {
|
|
|
- element.show();
|
|
|
- }, scope);
|
|
|
- }
|
|
|
- };
|
|
|
-});
|
|
|
-
|
|
|
-coreModule.directive('panelWidth', function($rootScope) {
|
|
|
- return function(scope, element) {
|
|
|
- var fullscreen = false;
|
|
|
-
|
|
|
- function updateWidth() {
|
|
|
- if (!fullscreen) {
|
|
|
- element[0].style.width = ((scope.panel.span / 1.2) * 10) + '%';
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- $rootScope.onAppEvent('panel-fullscreen-enter', function(evt, info) {
|
|
|
- fullscreen = true;
|
|
|
-
|
|
|
- if (scope.panel.id !== info.panelId) {
|
|
|
- element.hide();
|
|
|
- } else {
|
|
|
- element[0].style.width = '100%';
|
|
|
- }
|
|
|
- }, scope);
|
|
|
-
|
|
|
- $rootScope.onAppEvent('panel-fullscreen-exit', function(evt, info) {
|
|
|
- fullscreen = false;
|
|
|
-
|
|
|
- if (scope.panel.id !== info.panelId) {
|
|
|
- element.show();
|
|
|
- }
|
|
|
-
|
|
|
- updateWidth();
|
|
|
- }, scope);
|
|
|
-
|
|
|
- scope.$watch('panel.span', updateWidth);
|
|
|
-
|
|
|
- if (fullscreen) {
|
|
|
- element.hide();
|
|
|
}
|
|
|
};
|
|
|
});
|
|
|
|
|
|
-
|
|
|
-coreModule.directive('panelDropZone', function($timeout) {
|
|
|
- return function(scope, element) {
|
|
|
- var row = scope.ctrl.row;
|
|
|
- var dashboard = scope.ctrl.dashboard;
|
|
|
- var indrag = false;
|
|
|
- var textEl = element.find('.panel-drop-zone-text');
|
|
|
-
|
|
|
- function showPanel(span, text) {
|
|
|
- element.find('.panel-container').css('height', row.height);
|
|
|
- element[0].style.width = ((span / 1.2) * 10) + '%';
|
|
|
- textEl.text(text);
|
|
|
- element.show();
|
|
|
- }
|
|
|
-
|
|
|
- function hidePanel() {
|
|
|
- element.hide();
|
|
|
- }
|
|
|
-
|
|
|
- function updateState() {
|
|
|
- if (row.panels.length === 0 && indrag === false) {
|
|
|
- return showPanel(12, 'Empty Space');
|
|
|
- }
|
|
|
-
|
|
|
- var dropZoneSpan = 12 - row.span;
|
|
|
- if (dropZoneSpan > 0) {
|
|
|
- if (indrag) {
|
|
|
- return showPanel(dropZoneSpan, 'Drop Here');
|
|
|
- } else {
|
|
|
- return showPanel(dropZoneSpan, 'Empty Space');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- if (indrag === true) {
|
|
|
- if (dropZoneSpan > 1) {
|
|
|
- return showPanel(dropZoneSpan, 'Drop Here');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- hidePanel();
|
|
|
- }
|
|
|
-
|
|
|
- row.events.on('span-changed', updateState, scope);
|
|
|
-
|
|
|
- scope.$on("ANGULAR_DRAG_START", function() {
|
|
|
- indrag = true;
|
|
|
- updateState();
|
|
|
- });
|
|
|
-
|
|
|
- scope.$on("ANGULAR_DRAG_END", function() {
|
|
|
- indrag = false;
|
|
|
- updateState();
|
|
|
- });
|
|
|
-
|
|
|
- updateState();
|
|
|
- };
|
|
|
-});
|
|
|
-
|
Torkel Ödegaard