Commit 2dcdc622 authored by Davide Vernassa's avatar Davide Vernassa
Browse files

html widget and widget menu update

parent 3f10a652
......@@ -17,62 +17,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<li gridster-item="ngModel" id="w{{ngModel.id}}" ng-cloak ng-class="{'topPosition' : widExp || gridsterItem.gridster.isMobile, 'hasCrossNavigation':ngModel.cross.cross.enable, 'expandedWidget':widExp, 'fixedLeft':ngModel.type === 'selection'}" ng-mouseleave="closeWidgetActionButtons()"
action-button-position-handler widget-x-position=ngModel.col action-button-class-container="widgetActionButton">
<div ng-show="widgetSpinner" layout-fill style='position:absolute;z-index: 500;background:rgba(0,0,0, 0.3);'>
<md-progress-circular md-mode='indeterminate' style='top:50%;left:50%;margin-left:-25px;' ></md-progress-circular>
</div>
<md-card class="placedWidget flexCard" ng-style="borderShadowStyle" ng-class="['shadowedBox' ? extendedStyle.shadows : '', 'editWidgetMode' ? cockpitModule_properties.EDIT_MODE : '',widgetClass]" layout="column" layout-fill>
<md-card-title ng-style="extendedStyle.title" layout="row" layout-align="start center" ng-show="extendedStyle.titles">
<md-toolbar class="widgetToolbar" layout="row" layout-align="start center">
<div class="md-toolbar-tools" ng-class="{'dragCursor': (cockpitModule_properties.EDIT_MODE && !widExp),'draggableToolbar':editingWidgetName!=true}" layout="row">
<!-- span class="md-headline editWidgetNameSpan " ng-style="extendedStyle.title" ng-show="editingWidgetName!=true">{{ngModel.content.name | i18n | parameter_fill}}</span-->
<span flex ng-style="extendedStyle.title.font" ng-if="extendedStyle.title.label">{{extendedStyle.title.label | i18n | parameter_fill}}</span>
<span flex ng-style="extendedStyle.title.font" ng-if="!extendedStyle.title.label">New Widget</span>
</div>
</md-toolbar>
</md-card-title>
<div layout="column" class="viewModeMenu" ng-if="(!cockpitModule_template.configuration.hideUserMenu && !cockpitModule_properties.EDIT_MODE) || widExp" layout-align="end center">
<md-button class="md-icon-button floatingFilter" ng-if="ngModel.type == 'table' && activeSearch && !cockpitModule_properties.EDIT_MODE" ng-click="resetSearch();$event.stopPropagation();">
<md-tooltip md-direction="bottom" md-delay="1000">Filtered table, click to reset search</md-tooltip>
<md-icon md-font-icon="fa fa-filter fa-stack-1x"></md-icon>
<md-icon md-font-icon="fa fa-ban fa-stack-2x ban"></md-icon>
</md-button>
<!--md-button class="md-icon-button " ng-if="ngModel.type == 'selection' || ngModel.type == 'selector'" ng-click="clearAllSelectionsAndRefresh();$event.stopPropagation();">
<md-tooltip md-direction="top" md-delay="1000">Clear selection</md-tooltip>
<md-icon md-font-icon="fa fa-eraser"></md-icon>
</md-button-->
<md-button class="md-icon-button " ng-click="expandWidget();$event.stopPropagation();" >
<md-tooltip md-direction="bottom" ng-if="!widExp" md-delay="1000">{{::translate.load("sbi.cockpit.editor.widget.widgeteditorgenericconfpanel.expandall")}}</md-tooltip>
<md-tooltip md-direction="bottom" ng-if="widExp" md-delay="1000">{{::translate.load("sbi.cockpit.editor.widget.widgeteditorgenericconfpanel.collapse")}}</md-tooltip>
<md-icon md-font-icon="fa" ng-class="{'fa-compress':widExp ,' fa-expand':!widExp }"></md-icon>
</md-button>
<md-button class="md-icon-button " ng-if="ngModel.type == 'table' && !cockpitModule_properties.EDIT_MODE && !widExp" ng-class="{'activeSearch':activeSearch}" ng-click="openSearchBar($event);$event.stopPropagation();">
<md-tooltip md-direction="bottom" md-delay="1000">{{::translate.load("sbi.cockpit.editor.widget.widgeteditorgenericconfpanel.search")}}</md-tooltip>
<md-icon md-font-icon="fa fa-search"></md-icon>
</md-button>
<md-button class="md-icon-button " ng-class="{'activeSearch':activeSearch}" ng-click="showChartTypes($event);$event.stopPropagation();" ng-if="ngModel.type == 'chart' && !cockpitModule_properties.EDIT_MODE">
<md-tooltip md-direction="bottom" md-delay="1000">{{::translate.load("sbi.cockpit.editor.widget.widgeteditorgenericconfpanel.chartType")}}</md-tooltip>
<md-icon md-font-icon="fa fa-bar-chart"></md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="unselectable button" ng-if="enterpriseEdition && cliccable==true && ngModel.type=='chart' && (ngModel.content.chartTemplate.CHART.type.toLowerCase()=='treemap' || ngModel.content.chartTemplate.CHART.type.toLowerCase()=='line' || ngModel.content.chartTemplate.CHART.type.toLowerCase()=='bar' || ngModel.content.chartTemplate.CHART.type.toLowerCase()=='pie')" ng-click="ngModel.cliccable=!ngModel.cliccable;$event.stopPropagation();" ng-init="ngModel.cliccable=ngModel.cliccable==undefined? true : ngModel.cliccable">
<md-tooltip md-direction="top" md-delay="1000" ng-show="ngModel.cliccable">
{{::translate.load("sbi.cockpit.editor.widget.widgeteditorgenericconfpanel.description.cliccable")}}
</md-tooltip>
<md-tooltip md-direction="top" md-delay="1000" ng-show="!ngModel.cliccable">
{{::translate.load("sbi.cockpit.editor.widget.widgeteditorgenericconfpanel.description.notcliccable")}}
</md-tooltip>
<md-icon md-font-icon="fa fa-mouse-pointer" ng-show="ngModel.cliccable"></md-icon>
<md-icon md-font-icon="fa fa-filter" ng-show="!ngModel.cliccable"></md-icon>
</md-button>
</div>
<md-fab-speed-dial md-open="ngModel.menuOpened" md-direction="down" class="showActionButtonHandler md-scale" ng-class="{'noMouse':ngModel.menuOpened==true}" ng-if="!widExp && !( cockpitModule_template.configuration.hideUserMenu && !cockpitModule_properties.EDIT_MODE)">
<md-fab-speed-dial md-open="ngModel.menuOpened" md-direction="down" class="showActionButtonHandler md-scale" ng-class="{'noMouse':ngModel.menuOpened==true}" ng-if="!widExp && !( cockpitModule_template.configuration.hideUserMenu && !cockpitModule_properties.EDIT_MODE)">
<md-fab-trigger ng-if="cockpitModule_properties.EDIT_MODE">
<div class="md-button md-icon-button menuOnTopButton" aria-label="show menu" ng-class="{'dragCursor':ngModel.menuOpened && cockpitModule_properties.EDIT_MODE,'draggableToolbar':ngModel.menuOpened && cockpitModule_properties.EDIT_MODE}">
<md-icon md-font-icon="fa fa-ellipsis-v" ng-if="!ngModel.menuOpened || !cockpitModule_properties.EDIT_MODE"></md-icon>
......@@ -81,7 +27,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</md-fab-trigger>
<md-fab-actions>
<md-button class="md-icon-button " aria-label="expand button" ng-if="cockpitModule_properties.EDIT_MODE" ng-click="expandWidget();$event.stopPropagation();" >
<md-tooltip md-direction="top" md-delay="1000">{{::translate.load("sbi.cockpit.editor.widget.widgeteditorgenericconfpanel.expandall")}}</md-tooltip>
<md-icon md-font-icon="fa" ng-class="{'fa-compress':widExp ,' fa-expand':!widExp }"></md-icon>
......@@ -165,9 +111,65 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<md-icon md-font-icon="fa fa-magic" ></md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
<div ng-show="widgetSpinner" layout-fill style='position:absolute;z-index: 500;background:rgba(0,0,0, 0.3);'>
<md-progress-circular md-mode='indeterminate' style='top:50%;left:50%;margin-left:-25px;' ></md-progress-circular>
</div>
<md-card class="placedWidget flexCard" ng-style="borderShadowStyle" ng-class="{'shadowedBox': extendedStyle.shadows, 'editWidgetMode':cockpitModule_properties.EDIT_MODE}" layout="column" layout-fill>
<md-card-title ng-style="extendedStyle.title" layout="row" layout-align="start center" ng-show="extendedStyle.titles">
<md-toolbar class="widgetToolbar" layout="row" layout-align="start center">
<div class="md-toolbar-tools" ng-class="{'dragCursor': (cockpitModule_properties.EDIT_MODE && !widExp),'draggableToolbar':editingWidgetName!=true}" layout="row">
<!-- span class="md-headline editWidgetNameSpan " ng-style="extendedStyle.title" ng-show="editingWidgetName!=true">{{ngModel.content.name | i18n | parameter_fill}}</span-->
<span flex ng-style="extendedStyle.title.font" ng-if="extendedStyle.title.label">{{extendedStyle.title.label | i18n | parameter_fill}}</span>
<span flex ng-style="extendedStyle.title.font" ng-if="!extendedStyle.title.label">New Widget</span>
</div>
</md-toolbar>
</md-card-title>
<div layout="column" class="viewModeMenu" ng-if="(!cockpitModule_template.configuration.hideUserMenu && !cockpitModule_properties.EDIT_MODE) || widExp" layout-align="end center">
<md-button class="md-icon-button floatingFilter" ng-if="ngModel.type == 'table' && activeSearch && !cockpitModule_properties.EDIT_MODE" ng-click="resetSearch();$event.stopPropagation();">
<md-tooltip md-direction="bottom" md-delay="1000">Filtered table, click to reset search</md-tooltip>
<md-icon md-font-icon="fa fa-filter fa-stack-1x"></md-icon>
<md-icon md-font-icon="fa fa-ban fa-stack-2x ban"></md-icon>
</md-button>
<!--md-button class="md-icon-button " ng-if="ngModel.type == 'selection' || ngModel.type == 'selector'" ng-click="clearAllSelectionsAndRefresh();$event.stopPropagation();">
<md-tooltip md-direction="top" md-delay="1000">Clear selection</md-tooltip>
<md-icon md-font-icon="fa fa-eraser"></md-icon>
</md-button-->
<md-button class="md-icon-button " ng-click="expandWidget();$event.stopPropagation();" >
<md-tooltip md-direction="bottom" ng-if="!widExp" md-delay="1000">{{::translate.load("sbi.cockpit.editor.widget.widgeteditorgenericconfpanel.expandall")}}</md-tooltip>
<md-tooltip md-direction="bottom" ng-if="widExp" md-delay="1000">{{::translate.load("sbi.cockpit.editor.widget.widgeteditorgenericconfpanel.collapse")}}</md-tooltip>
<md-icon md-font-icon="fa" ng-class="{'fa-compress':widExp ,' fa-expand':!widExp }"></md-icon>
</md-button>
<md-button class="md-icon-button " ng-if="ngModel.type == 'table' && !cockpitModule_properties.EDIT_MODE && !widExp" ng-class="{'activeSearch':activeSearch}" ng-click="openSearchBar($event);$event.stopPropagation();">
<md-tooltip md-direction="bottom" md-delay="1000">{{::translate.load("sbi.cockpit.editor.widget.widgeteditorgenericconfpanel.search")}}</md-tooltip>
<md-icon md-font-icon="fa fa-search"></md-icon>
</md-button>
<md-button class="md-icon-button " ng-class="{'activeSearch':activeSearch}" ng-click="showChartTypes($event);$event.stopPropagation();" ng-if="ngModel.type == 'chart' && !cockpitModule_properties.EDIT_MODE">
<md-tooltip md-direction="bottom" md-delay="1000">{{::translate.load("sbi.cockpit.editor.widget.widgeteditorgenericconfpanel.chartType")}}</md-tooltip>
<md-icon md-font-icon="fa fa-bar-chart"></md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="unselectable button" ng-if="enterpriseEdition && cliccable==true && ngModel.type=='chart' && (ngModel.content.chartTemplate.CHART.type.toLowerCase()=='treemap' || ngModel.content.chartTemplate.CHART.type.toLowerCase()=='line' || ngModel.content.chartTemplate.CHART.type.toLowerCase()=='bar' || ngModel.content.chartTemplate.CHART.type.toLowerCase()=='pie')" ng-click="ngModel.cliccable=!ngModel.cliccable;$event.stopPropagation();" ng-init="ngModel.cliccable=ngModel.cliccable==undefined? true : ngModel.cliccable">
<md-tooltip md-direction="top" md-delay="1000" ng-show="ngModel.cliccable">
{{::translate.load("sbi.cockpit.editor.widget.widgeteditorgenericconfpanel.description.cliccable")}}
</md-tooltip>
<md-tooltip md-direction="top" md-delay="1000" ng-show="!ngModel.cliccable">
{{::translate.load("sbi.cockpit.editor.widget.widgeteditorgenericconfpanel.description.notcliccable")}}
</md-tooltip>
<md-icon md-font-icon="fa fa-mouse-pointer" ng-show="ngModel.cliccable"></md-icon>
<md-icon md-font-icon="fa fa-filter" ng-show="!ngModel.cliccable"></md-icon>
</md-button>
</div>
</div>
<md-card-content flex="" layout="column" class="noPadding" id="{{ngModel.id}}" layout-fill>
......
......@@ -25,7 +25,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
compile: function (tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, element, attrs, ctrl, transclud) {
scope.showWidgetSpinner();
},
post: function postLink(scope, element, attrs, ctrl, transclud) {
element.ready(function () {
......@@ -58,8 +58,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
$scope.columnRegex = /(?:\[kn-column=[\'\"]{1}([a-zA-Z0-9\_\-]+)[\'\"]{1}(?:\s+row=[\'\"]{1}(\d*)[\'\"]{1})?\])/g;
$scope.paramsRegex = /(?:\[kn-parameter=[\'\"]{1}([a-zA-Z0-9\_\-]+)[\'\"]{1}\])/g;
$scope.repeatIndexRegex = /\[kn-repeat-index\]/g;
$scope.gt = /(\<.*["].*)(>)(.*["].*\>)/g;
$scope.lt = /(\<.*["].*)(<)(.*["].*\>)/g;
$scope.gt = /(\<.*kn-.*=["].*)(>)(.*["].*\>)/g;
$scope.lt = /(\<.*kn-.*=["].*)(<)(.*["].*\>)/g;
$scope.refresh = function(element,width,height, datasetRecords,nature) {}
......@@ -68,6 +68,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
* If there is a selected dataset the function calls the data rest service.
*/
$scope.reinit = function(){
$scope.showWidgetSpinner();
if($scope.ngModel.datasetId){
sbiModule_restServices.restToRootProject();
var dataset = cockpitModule_datasetServices.getDatasetById($scope.ngModel.datasetId);
......@@ -110,7 +111,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
});
}else {
$scope.trustedCss = $sce.trustAsHtml('<style>'+$scope.ngModel.cssToRender+'</style>');
$scope.trustedHtml = $sce.trustAsHtml($scope.parsedHtml);
$scope.trustedHtml = $sce.trustAsHtml($scope.ngModel.htmlToRender);
$scope.hideWidgetSpinner();
}
}
......@@ -126,7 +128,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
$scope.parseHtmlFunctions = function(rawHtml){
return $q(function(resolve, reject) {
var parser = new DOMParser()
var parsedHtml = parser.parseFromString(rawHtml, "text/xml");
var parsedHtml = parser.parseFromString(rawHtml, "text/html");
var allElements = parsedHtml.getElementsByTagName('*');
var i=0;
......@@ -156,23 +158,38 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
}
} i++;
} while (i<allElements.length);
for (var j = 0, n = allElements.length; j < n; j++){
var j = 0;
var nodesNumber = allElements.length;
do {
if (allElements[j] && allElements[j].hasAttribute("kn-if")){
var condition = allElements[j].getAttribute("kn-if").replace($scope.columnRegex, $scope.replacer);
var condition = allElements[j].getAttribute("kn-if").replace($scope.columnRegex, $scope.ifConditionReplacer);
if(eval(condition)){
allElements[j].removeAttribute("kn-if");
}else{
allElements[j].parentNode.removeChild(allElements[j]);
j--;
}
}
}
resolve(parsedHtml)
j++;
} while (j<nodesNumber);
resolve(parsedHtml)
})
}
$scope.ifConditionReplacer = function(match, p1, p2){
if($scope.htmlDataset.rows[p2||0] && $scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1)]){
p1 = typeof($scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1)]) == 'string' ? '\''+$scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1)]+'\'' : $scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1)];
}else {
p1 = 'null';
}
return p1;
}
$scope.replacer = function(match, p1, p2) {
p1=$scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1)]
p1=$scope.htmlDataset.rows[p2||0] && $scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1)] ? $scope.htmlDataset.rows[p2||0][$scope.getColumnFromName(p1)] : 'null';
return p1;
}
$scope.paramsReplacer = function(match, p1){
......@@ -269,6 +286,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
};
$scope.saveConfiguration=function(){
mdPanelRef.close();
angular.copy($scope.newModel,model);
finishEdit.resolve();
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment