WebCompDev / COMPONENTS

Commit 256ece27d45878825428ee3df1e2781bf871977d

Authored by Renato De Donato
1 parent 0242ec8c

new controllet

Inline Side-by-side
Showing 40 changed files with 4321 additions and 1141 deletions
alasql-utility/alasql-utility.js
  View file @256ece2
1 1 function alasql_QUERY (data, fields, filters, aggregators, orders) {
2   - if(fields.length == 0)
  2 + if(fields && fields.length == 0)
3 3 return [];
4 4  
5   - var _fields = _addParenthesis(fields);
  5 + return alasql(alasql_QUERY_string(fields, filters, aggregators, orders), [data]);
  6 +}
  7 +
  8 +function alasql_QUERY_string (fields, filters, aggregators, orders) {
6 9  
7   - var select = _alasql_SELECT(_fields);
  10 + if(fields) {
  11 + var _fields = _addParenthesis(fields);
  12 + var select = _alasql_SELECT(_fields);
  13 + }
8 14  
9 15 var where = "";
10 16 if(filters && filters.length) {
... ... @@ -28,7 +34,7 @@ function alasql_QUERY (data, fields, filters, aggregators, orders) {
28 34  
29 35 var query = select + " FROM ?" + where + " " + groupBy + " " + orderBy;
30 36  
31   - return alasql(query, [data]);
  37 + return query;
32 38 }
33 39  
34 40 function _alasql_SELECT (fields) {
... ... @@ -44,16 +50,19 @@ function _alasql_SELECT (fields) {
44 50 }
45 51  
46 52 function _alasql_WHERE (filters) {
47   - var where = " WHERE ";
48   - var logicalOperator;
  53 + //var logicalOperator;
  54 + //
  55 + ///*DEPRECATED*/if(filters[0].logicalOperator == undefined) {
  56 + // logicalOperator = "AND"
  57 + //}
  58 + //else {
  59 + // logicalOperator = filters[0].logicalOperator;
  60 + // filters = filters.slice(1);
  61 + //}
49 62  
50   - /*DEPRECATED*/if(filters[0].logicalOperator == undefined) {
51   - logicalOperator = "AND"
52   - }
53   - else {
54   - logicalOperator = filters[0].logicalOperator;
55   - filters = filters.slice(1);
56   - }
  63 + var where = " WHERE ";
  64 + var logicalOperator = filters[0].logicalOperator;
  65 + filters = filters.slice(1);
57 66  
58 67 for (var i=0; i < filters.length; i++)
59 68 filters[i]["field"] = _normalizeField(filters[i]["field"]);
... ... @@ -87,7 +96,8 @@ function _alasql_GROUPBY (aggregators) {
87 96 groupBy += aggregators[i]["field"] + ", ";
88 97 }
89 98 else
90   - select += aggregators[i]["operation"] + "(" + aggregators[i]["field"] + ") as " + aggregators[i]["field"] + ", ";
  99 + //select += aggregators[i]["operation"] + "(" + aggregators[i]["field"] + ") as " + aggregators[i]["field"] + ", ";
  100 + select += aggregators[i]["operation"] + "(" + aggregators[i]["field"] + "), ";
91 101 }
92 102  
93 103 return [select.slice(0, -2), groupBy.slice(0, -2)];
... ... @@ -118,7 +128,7 @@ function _normalizeField (field) {
118 128 return "[" + field + "]";
119 129 }
120 130  
121   -function alasql_transformData (data, fields, truncate) {
  131 +function alasql_transformData (data, fields, round) {
122 132 if(!data || data.length == 0)
123 133 return [];
124 134  
... ... @@ -129,11 +139,11 @@ function alasql_transformData (data, fields, truncate) {
129 139 var field = fields[i];
130 140 var values = [];
131 141  
132   - for (var i in data) {
133   - var v = data[i][field];
134   - if(truncate)
  142 + for (var j in data) {
  143 + var v = data[j][field];
  144 + if(round)
135 145 if(!isNaN(v) && v % 1 != 0)
136   - v = Math.floor(v * 100) / 100;
  146 + v = Math.round(v * 1000000) / 1000000;
137 147 values.push(v);
138 148 }
139 149  
... ...
controllets/aggregators-controllet/aggregators-controllet.html 0 → 100755
  View file @256ece2
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html" />
  2 +
  3 +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
  4 +<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
  5 +<link rel="import" href="../../bower_components/paper-item/paper-item.html">
  6 +
  7 +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
  8 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
  9 +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
  10 +
  11 +<link rel="import" href="../../bower_components/paper-button/paper-button.html">
  12 +
  13 +<dom-module id="aggregators-controllet">
  14 +
  15 + <template>
  16 +
  17 + <style is="custom-style">
  18 +
  19 + #aggregators_container {
  20 + height: 100%;
  21 + width: 100%;
  22 + position: relative;
  23 + }
  24 +
  25 + #aggregators_container * {
  26 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  27 + font-size: 16px;
  28 + line-height: 24px;
  29 + }
  30 +
  31 + paper-dropdown-menu {
  32 + width: 100%;
  33 + --paper-input-container-focus-color: #2196F3;
  34 + }
  35 +
  36 + :host {
  37 + --paper-dropdown-menu-icon: {
  38 + color: #2196F3;
  39 + };
  40 + }
  41 +
  42 + paper-item {
  43 + min-width: 128px;
  44 + white-space: nowrap;
  45 + }
  46 +
  47 + paper-item.iron-selected {
  48 + background-color: #2196F3;
  49 + color: #FFFFFF;
  50 + }
  51 +
  52 + paper-input {
  53 + width: 100%;
  54 + --paper-input-container-focus-color: #2196F3;
  55 + }
  56 +
  57 + paper-button {
  58 + position: absolute;
  59 + bottom: 0;
  60 + right: 0;
  61 + margin: 0 8px 8px 0;
  62 + height: 48px;
  63 + padding: 12px;
  64 + color: #FFFFFF;
  65 + background: #2196F3;
  66 + font-weight: 700;
  67 +
  68 + min-width: 216px;
  69 + }
  70 +
  71 + paper-button.disabled {
  72 + background-color: #B6B6B6;
  73 + }
  74 +
  75 + iron-icon[icon=group-work] {
  76 + height: 32px;
  77 + width: 32px;
  78 + color: #FFFFFF;
  79 + margin-top: -4px;
  80 + }
  81 +
  82 + paper-button:hover {
  83 + box-shadow: 0px 8px 12px #888;
  84 + -webkit-box-shadow: 0px 8px 12px #888;
  85 + -moz-box-shadow: 0px 8px 12px #888;
  86 + }
  87 +
  88 + paper-icon-button {
  89 + padding: 4px;
  90 + }
  91 +
  92 + paper-icon-button.add {
  93 + color: #2196F3;
  94 + --paper-icon-button-ink-color: #2196F3;
  95 + }
  96 +
  97 + paper-icon-button.cancel {
  98 + color: #F44336;
  99 + --paper-icon-button-ink-color: #F44336;
  100 + }
  101 +
  102 + #aggregators_container .row {
  103 + display: flex;
  104 + height: 60px;
  105 + width: 100%;
  106 + }
  107 +
  108 + #aggregators_container .ddl_container {
  109 + display: flex;
  110 + height: 60px;
  111 + width: 25%;
  112 + padding: 0px 8px;
  113 + }
  114 +
  115 + #aggregators_container .add_container {
  116 + height: 40px;
  117 + width: 40px;
  118 + padding: 10px 0px;
  119 + }
  120 +
  121 + #aggregators_container .row2 {
  122 + display: flex;
  123 + height: 48px;
  124 + width: 100%;
  125 + }
  126 +
  127 + #aggregators_container .row2 .highlighted {
  128 + color: #2196F3;
  129 + font-weight: 700;
  130 + }
  131 +
  132 + #aggregators_container .aggregator {
  133 + height: 24px;
  134 + width: calc(75% - 16px);
  135 + padding: 12px 8px;
  136 + }
  137 +
  138 + #aggregators_container .remove_container {
  139 + height: 40px;
  140 + width: 40px;
  141 + padding: 4px 8px;
  142 + }
  143 +
  144 + </style>
  145 +
  146 + <div id="aggregators_container">
  147 +
  148 + <div class="row">
  149 + <div class="ddl_container">
  150 + <paper-dropdown-menu id="aggregator_groupby" label="GROUP BY">
  151 + <paper-menu id="aggregator_groupby_menu" class="dropdown-content">
  152 + <template is="dom-repeat" items={{selectedFields}}>
  153 + <paper-item id={{index}}>{{item}}</paper-item>
  154 + </template>
  155 + </paper-menu>
  156 + </paper-dropdown-menu>
  157 + </div>
  158 +
  159 + <div class="ddl_container"></div>
  160 + <div class="ddl_container"></div>
  161 +
  162 + <div class="ddl_container">
  163 + <div class="add_container">
  164 + <paper-icon-button on-click="_addGroupBy" icon="add-circle" class="add"></paper-icon-button>
  165 + </div>
  166 + </div>
  167 + </div>
  168 +
  169 + <div class="row">
  170 + <div class="ddl_container">
  171 + <paper-dropdown-menu id="aggregator_calculate" label="CALCULATE">
  172 + <paper-menu id="aggregator_calculate_menu" class="dropdown-content">
  173 + <template is="dom-repeat" items={{operations}}>
  174 + <paper-item id={{index}}>{{_getOperationlName(item)}}</paper-item>
  175 + </template>
  176 + </paper-menu>
  177 + </paper-dropdown-menu>
  178 + </div>
  179 + <div class="ddl_container">
  180 + <paper-dropdown-menu id="aggregator_field" label="Field">
  181 + <paper-menu id="aggregator_field_menu" class="dropdown-content">
  182 + <template is="dom-repeat" items={{selectedFields}}>
  183 + <paper-item id={{index}}>{{item}}</paper-item>
  184 + </template>
  185 + </paper-menu>
  186 + </paper-dropdown-menu>
  187 + </div>
  188 +
  189 + <div class="ddl_container"></div>
  190 +
  191 + <div class="ddl_container">
  192 + <div class="add_container">
  193 + <paper-icon-button on-click="_addCalculate" icon="add-circle" class="add"></paper-icon-button>
  194 + </div>
  195 + </div>
  196 + </div>
  197 +
  198 + <template is="dom-repeat" items={{aggregators}}>
  199 + <div class="row2">
  200 + <div class="aggregator">
  201 + <span class="highlighted">{{_calculate(item.operation)}} {{_getOperationlName(item.operation)}}</span> {{item.field}}
  202 + </div>
  203 + <div class="remove_container">
  204 + <paper-icon-button on-click="_deleteAggregator" icon="cancel" class="cancel"></paper-icon-button>
  205 + </div>
  206 + </div>
  207 + </template>
  208 +
  209 + <paper-button id="disable_aggregators" raised on-click="_disableAggregators"><iron-icon icon="group-work"></iron-icon>&nbsp; <span id="disable_enable"></span></paper-button>
  210 +
  211 + </div>
  212 +
  213 + </template>
  214 +
  215 + <script>
  216 +
  217 + Polymer({
  218 +
  219 + is : 'aggregators-controllet',
  220 +
  221 + properties : {
  222 +
  223 + fields : {
  224 + type : Array,
  225 + value : []
  226 + },
  227 +
  228 + selectedFields : {
  229 + type : Array,
  230 + value : []
  231 + },
  232 +
  233 + operations : {
  234 + type : Array,
  235 + value : ["COUNT", "SUM", "MIN", "MAX", "AVG", "FIRST", "LAST"]
  236 + },
  237 +
  238 + aggregators : {
  239 + type : Array,
  240 + value : []
  241 + }
  242 +
  243 + },
  244 +
  245 + ready : function() {
  246 + $(this.$.aggregators_container).perfectScrollbar();
  247 + },
  248 +
  249 + attached : function() {
  250 + this._translate();
  251 + },
  252 +
  253 + setFields : function(fields) {
  254 + this.fields = this._copy(fields);
  255 + },
  256 +
  257 + setSelectedFields : function(selectedFields) {
  258 + this.selectedFields = this._copy(selectedFields);
  259 + },
  260 +
  261 + setAggregators : function(aggregators) {
  262 + if(aggregators && aggregators.length > 0) {
  263 + this.aggregators = this._copy(aggregators);
  264 + this._fire();
  265 + }
  266 + },
  267 +
  268 + getAggregators : function() {
  269 + if(this.aggregators.length > 0 && this.aggregators[0].operation == "GROUP BY")
  270 + return this.aggregators;
  271 + return [];
  272 + },
  273 +
  274 + reset : function() {
  275 + this.fields = [];
  276 + this.selectedFields = [];
  277 + this.aggregators = [];
  278 + },
  279 +
  280 + _translate : function() {
  281 + this.$.aggregator_groupby.setAttribute("label", ln["GROUP BY_" + ln["localization"]]);
  282 + this.$.aggregator_calculate.setAttribute("label", ln["CALCULATE_" + ln["localization"]]);
  283 + this.$.aggregator_field.setAttribute("label", ln["aggregatorField_" + ln["localization"]]);
  284 +
  285 + this.$.disable_enable.innerHTML = ln["disableGroupBy_" + ln["localization"]];
  286 + },
  287 +
  288 + _calculate: function(operation) {
  289 + if(operation.indexOf("GROUP BY") > -1)
  290 + return "";
  291 + return ln["Calculate_" + ln["localization"]] + " ";
  292 + },
  293 +
  294 + _getOperationlName: function(operation) {
  295 + return ln[operation + "_" + ln["localization"]];
  296 + },
  297 +
  298 + _fire : function() {
  299 + this.$.disable_enable.innerHTML = ln["disableGroupBy_" + ln["localization"]];
  300 + this.$.disable_aggregators.className = this.$.disable_aggregators.className.replace(" disabled", "");
  301 +
  302 + if(this.aggregators.length > 0 && this.aggregators[0].operation == "GROUP BY")
  303 + this.fire('aggregators-controllet_aggregators', {aggregators: this.aggregators});
  304 + else
  305 + this.fire('aggregators-controllet_aggregators', {aggregators: []});
  306 + },
  307 +
  308 + _addGroupBy : function() {
  309 + if (this.$.aggregator_groupby_menu.selectedItem) {
  310 + var field = this.$.aggregator_groupby.value;
  311 +
  312 + this.aggregators.unshift({"field": field, "operation": "GROUP BY"});//insert as last GB
  313 +
  314 + this.$.aggregator_groupby_menu.select(-1);
  315 +
  316 + this._fire();
  317 +
  318 + this._renderAggregators();
  319 + }
  320 + },
  321 +
  322 + _addCalculate : function() {
  323 + if (this.$.aggregator_calculate_menu.selectedItem && this.$.aggregator_field.selectedItem) {
  324 + var field = this.$.aggregator_field.value;
  325 + var id = this.$.aggregator_calculate.selectedItem.id;
  326 + var operation = this.operations[id];
  327 +
  328 + this.aggregators.push({"field": field, "operation": operation});
  329 +
  330 + this.$.aggregator_field_menu.select(-1);
  331 + this.$.aggregator_calculate_menu.select(-1);
  332 +
  333 + this._fire();
  334 +
  335 + this._renderAggregators();
  336 + }
  337 + },
  338 +
  339 + _deleteAggregator : function(e) {
  340 + var index = e.model.index;
  341 +
  342 + this.aggregators.splice(index, 1);
  343 +
  344 + this._fire();
  345 +
  346 + this._renderAggregators();
  347 + },
  348 +
  349 +// _addAggregator : function() {
  350 +// if (this.$.aggregator_operation_menu.selectedItem && this.$.aggregator_field.selectedItem) {
  351 +// var field = this.$.aggregator_field.value;
  352 +// var id = this.$.aggregator_operation.selectedItem.id;
  353 +// var operation = this.operations[id];
  354 +//
  355 +// this.aggregators.push({"field": field, "operation": operation});
  356 +//
  357 +// this.$.aggregator_field_menu.select(-1);
  358 +// this.$.aggregator_operation_menu.select(-1);
  359 +//
  360 +// this._fire();
  361 +//
  362 +// this._renderAggregators();
  363 +// }
  364 +// },
  365 +//
  366 +// _deleteAggregator : function(e) {
  367 +// var index = e.model.index;
  368 +//
  369 +// this.aggregators.splice(index, 1);
  370 +//
  371 +// this._fire();
  372 +//
  373 +// this._renderAggregators();
  374 +// },
  375 +
  376 + _renderAggregators : function() {
  377 + var aggregators = this._copy(this.aggregators);
  378 + this.aggregators = [];
  379 + this.async(function() {
  380 + this.aggregators = aggregators;
  381 + }, 0);
  382 + },
  383 +
  384 + _disableAggregators : function() {
  385 + var classes = this.$.disable_aggregators.className;
  386 + if (classes.indexOf("disabled") > -1) {
  387 + this._fire();
  388 + }
  389 + else {
  390 + this.$.disable_enable.innerHTML = ln["enableGroupBy_" + ln["localization"]];
  391 + this.$.disable_aggregators.className = classes + " disabled";
  392 + this.fire('aggregators-controllet_aggregators', {aggregators: []});
  393 + }
  394 + },
  395 +
  396 + _copy : function(o) {
  397 + var out, v, key;
  398 + out = Array.isArray(o) ? [] : {};
  399 + for (key in o) {
  400 + v = o[key];
  401 + out[key] = (typeof v === "object") ? this._copy(v) : v;
  402 + }
  403 + return out;
  404 + }
  405 +
  406 + });
  407 +
  408 + </script>
  409 +
  410 +</dom-module>
0 411 \ No newline at end of file
... ...
controllets/aggregators-controllet/demo/index.html 0 → 100755
  View file @256ece2
  1 +<html>
  2 +
  3 +<head>
  4 + <script src="../../shared_js/jquery-1.11.2.min.js"></script>
  5 +
  6 + <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  7 +
  8 + <link rel="import" href="../aggregators-controllet.html"/>
  9 +
  10 + <script src="../../../locales/controllet_ln.js"></script>
  11 +
  12 + <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  13 + <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  14 +</head>
  15 +
  16 +<body>
  17 +
  18 + <style>
  19 +
  20 + .container {
  21 + height: 400px;
  22 + width: 1200px;
  23 + /*width: 400px;*/
  24 + position: relative;
  25 + top: 100px;
  26 + left:300px;
  27 + }
  28 +
  29 + </style>
  30 +
  31 + <div class="container">
  32 + <aggregators-controllet id="aggregators_controllet"></aggregators-controllet>
  33 + </div>
  34 +
  35 + <script>
  36 + ln["localization"] = "en";
  37 +
  38 + var fields = ["aaa","bbb", "ccc", "ddd", "eee", "fff"];
  39 + var selectedFields = ["ccc","aaa", "eee"];
  40 +
  41 +// var aggregators_controllet = document.getElementById('aggregators_controllet');
  42 +
  43 + aggregators_controllet.setFields(fields);
  44 + aggregators_controllet.setSelectedFields(selectedFields);
  45 +
  46 +// aggregators_controllet.aggregators = [{logicalOperator: "OR"}, {field: "Lat", operation: "<=", value: "16"}, {field: "Long", operation: "!=", value: "32"}, {field: "Sbiricos", operation: "!=", value: "12AAA32+DAO"}];
  47 +// filters_controllet.logicalOperator = "or";
  48 +
  49 +// var filters = filters_controllet.getFilters();
  50 +//
  51 +// console.log(filters);
  52 +
  53 + </script>
  54 +
  55 +</body>
  56 +
  57 +</html>
0 58 \ No newline at end of file
... ...
controllets/data-sevc-controllet/co-datalets-creator-controllet.html
  View file @256ece2
... ... @@ -41,7 +41,8 @@
41 41 listeners : {
42 42 'page-slider-controllet_selected' : '_updateSlider',
43 43 'select-fields-controllet_selected-fields' : '_allowThirdStep',
44   - 'filters-controllet_filters': '_allowThirdStep'
  44 + 'filters-controllet_filters': '_allowThirdStep',
  45 + 'aggregators-controllet_aggregators': '_allowThirdStep'
45 46 },
46 47  
47 48 properties : {
... ... @@ -104,13 +105,15 @@
104 105  
105 106 _allowThirdStep : function(){
106 107 this.$.slider.chevronRight(false);
107   - var fields = this.$.select_data.getSelectedFields();
  108 + var selectedFields = this.$.select_data.getSelectedFields();
108 109 var filters = this.$.select_data.getFilters();
  110 + var aggregators = this.$.select_data.getAggregators();
109 111 var data = this.$.select_data.getData();
110   - if(fields.length > 0) {
  112 + if(selectedFields.length > 0) {
111 113 this.$.select_visualization.init();
112   - this.$.select_visualization.setFields(fields);
  114 + this.$.select_visualization.setSelectedFields(selectedFields);
113 115 this.$.select_visualization.setFilters(filters);
  116 + this.$.select_visualization.setAggregators(aggregators);
114 117 this.$.select_visualization.setData(data);
115 118 this.$.slider.chevronRight(true);
116 119 }
... ...
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @256ece2
... ... @@ -50,6 +50,7 @@
50 50 'dataset-selection-controllet_data-url' : '_allowSecondStep',
51 51 'select-fields-controllet_selected-fields' : '_allowThirdStep',
52 52 'filters-controllet_filters': '_allowThirdStep',
  53 + 'aggregators-controllet_aggregators': '_allowThirdStep',
53 54 'data-ready': '_dataReady'
54 55 },
55 56  
... ... @@ -138,13 +139,15 @@
138 139  
139 140 _allowThirdStep : function(){
140 141 this.$.slider.chevronRight(false);
141   - var fields = this.$.select_data.getSelectedFields();
  142 + var selectedFields = this.$.select_data.getSelectedFields();
142 143 var filters = this.$.select_data.getFilters();
  144 + var aggregators = this.$.select_data.getAggregators();
143 145 var data = this.$.select_data.getData();
144   - if(fields.length > 0) {
  146 + if(selectedFields.length > 0) {
145 147 this.$.select_visualization.init();
146   - this.$.select_visualization.setFields(fields);
  148 + this.$.select_visualization.setSelectedFields(selectedFields);
147 149 this.$.select_visualization.setFilters(filters);
  150 + this.$.select_visualization.setAggregators(aggregators);
148 151 this.$.select_visualization.setData(data);
149 152 this.$.slider.chevronRight(true);
150 153 }
... ...
controllets/datalet-preview-controllet/datalet-preview-controllet.html 0 → 100644
  View file @256ece2
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html" />
  2 +
  3 +<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  4 +
  5 +<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
  6 +<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
  7 +
  8 +<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">
  9 +<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
  10 +<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
  11 +
  12 +<dom-module id="datalet-preview-controllet">
  13 +
  14 + <template>
  15 +
  16 + <style is="custom-style">
  17 + #preview_container {
  18 + height: 100%;
  19 + width: 100%;
  20 + }
  21 +
  22 + #preview_container * {
  23 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  24 + font-size: 16px;
  25 + line-height: 24px;
  26 + }
  27 +
  28 + #preview_container #neon_container {
  29 + height: calc(100% - 48px);
  30 + width: 100%;
  31 + }
  32 +
  33 + #preview_container #preview, #preview_container #info {
  34 + position: relative;
  35 + height: calc(100% - 32px);
  36 + width: calc(100% - 32px);
  37 + padding: 16px;
  38 + }
  39 +
  40 + #preview_container #info_container {
  41 + display: flex;
  42 + flex-direction: row;
  43 + }
  44 +
  45 + #preview_container #datalet_img{
  46 + min-height: 124px;
  47 + width: 124px;
  48 + position:relative;
  49 + }
  50 +
  51 + #preview_container img{
  52 + max-width: 124px;
  53 + position: absolute;
  54 + top: 0;
  55 + bottom: 0;
  56 + margin: auto;
  57 + }
  58 +
  59 + #preview_container #datalet_base_info {
  60 + width: calc(100% - 124px - 16px);
  61 + margin-left: 16px;
  62 + }
  63 +
  64 + #preview_container #datalet_name{
  65 + font-size: 32px;
  66 + line-height: 48px;
  67 + color: #2196F3;
  68 + }
  69 +
  70 + #preview_container #datalet_description{
  71 + }
  72 +
  73 + #preview_container #datalet_inputs{
  74 + margin-top: 16px;
  75 + }
  76 +
  77 + #preview_container .input_label {
  78 + color: #2196F3;
  79 + font-weight: 700;
  80 + }
  81 +
  82 + #preview_container ul {
  83 + list-style-type: disc;
  84 + }
  85 +
  86 + #preview_container li {
  87 + font-weight: 700;
  88 + }
  89 +
  90 + paper-tabs {
  91 + background: #B6B6B6;
  92 + --paper-tabs-selection-bar-color: #2196F3;
  93 + }
  94 +
  95 + paper-tab {
  96 + --paper-tab-ink: #2196F3;
  97 + }
  98 +
  99 + paper-tab.iron-selected {
  100 + font-weight: 700;
  101 + }
  102 +
  103 + paper-tab:hover {
  104 + color: #2196F3;
  105 + }
  106 +
  107 + </style>
  108 +
  109 + <paper-material id="preview_container" elevation="5">
  110 +
  111 + <paper-tabs selected="{{tabIndex}}">
  112 + <paper-tab><span id="previewTab"></span></paper-tab>
  113 + <paper-tab><span id="infoTab"></span></paper-tab>
  114 + </paper-tabs>
  115 +
  116 + <neon-animated-pages id="neon_container" selected="{{_getNeonIndex(tabIndex)}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
  117 +
  118 + <neon-animatable>
  119 + <div id="preview">
  120 +
  121 + </div>
  122 + </neon-animatable>
  123 +
  124 + <neon-animatable>
  125 + <div id="info">
  126 + <div id="info_container">
  127 + <div id="datalet_img">
  128 + <img src="{{dataletImg}}">
  129 + </div>
  130 + <div id="datalet_base_info">
  131 + <div id="datalet_name">
  132 + {{dataletName}}
  133 + </div>
  134 + <div id="datalet_description">
  135 + {{dataletDescription}}
  136 + </div>
  137 + </div>
  138 + </div>
  139 + <div id="datalet_inputs">
  140 + <span id="inputs" class="input_label"></span>
  141 + <ul>
  142 + <template is="dom-repeat" items="{{inputs}}">
  143 + <li>{{_getInputName(item.name)}}</li>
  144 + {{_getInputDescription(item.name)}}
  145 + </template>
  146 + </ul>
  147 + <span id="options" class="input_label"></span>
  148 + <ul>
  149 + <template is="dom-repeat" items="{{options}}">
  150 + <li>{{_getInputName(item.name)}}</li>
  151 + {{_getInputDescription(item.name)}}
  152 + </template>
  153 + </ul>
  154 + </div>
  155 + </div>
  156 + </neon-animatable>
  157 +
  158 + </neon-animated-pages>
  159 +
  160 + </paper-material>
  161 +
  162 + </template>
  163 +
  164 + <script>
  165 +
  166 + Polymer({
  167 +
  168 + is : 'datalet-preview-controllet',
  169 +
  170 + properties : {
  171 +
  172 + deepUrl : {
  173 + type : String,
  174 + value : undefined
  175 + },
  176 +
  177 + tabIndex: {
  178 + type: Number,
  179 + value: 0
  180 + }
  181 +
  182 + },
  183 +
  184 + ready : function() {
  185 + $(this.$.preview).perfectScrollbar();
  186 + $(this.$.info).perfectScrollbar();
  187 + },
  188 +
  189 + attached : function() {
  190 + this._translate();
  191 + },
  192 +
  193 + _translate : function(){
  194 + this.$.previewTab.innerHTML = ln["previewTab_" + ln["localization"]];
  195 + this.$.infoTab.innerHTML = ln["infoTab_" + ln["localization"]];
  196 + },
  197 +
  198 + loadDatalet : function(dataletParams){
  199 + this._setTabindex(0);
  200 +
  201 + dataletParams.placeHolder = this.$.preview;
  202 +
  203 + ComponentService.deep_url = this.deepUrl;
  204 + ComponentService.getComponent(dataletParams);
  205 + },
  206 +
  207 + eraseDatalet : function(){
  208 + this.$.preview.innerHTML = "";
  209 + },
  210 +
  211 + loadInfo : function(selectedDatalet){
  212 + this._setTabindex(1);
  213 +
  214 + this.dataletImg = (selectedDatalet.bridge_link + selectedDatalet.component_link).replace("html", "png");
  215 + this.dataletName = this._getChartName(selectedDatalet.name.replace("-datalet", ""));
  216 + this.dataletDescription = this._getChartName(selectedDatalet.name.replace("-datalet", "Description"));
  217 +
  218 + var inputs = selectedDatalet.idm.inputs.input;
  219 + var options = [];
  220 + if(selectedDatalet.idm.inputs.layouts)
  221 + options = selectedDatalet.idm.inputs.layouts.input;
  222 +
  223 + if(!(inputs instanceof Array))
  224 + inputs = [inputs];
  225 +
  226 + if(!(options instanceof Array))
  227 + options = [options];
  228 +
  229 + this.inputs = inputs;
  230 + this.options = options;
  231 +
  232 + this.$.inputs.innerHTML = ln["inputs_" + ln["localization"]];
  233 + if(this.options.length > 0)
  234 + this.$.options.innerHTML = ln["options_" + ln["localization"]];
  235 + else
  236 + this.$.options.innerHTML = "";
  237 + },
  238 +
  239 + eraseInfo : function(){
  240 + this.dataletImg = "";
  241 + this.dataletName = "";
  242 + this.dataletDescription = "";
  243 +
  244 + this.inputs = [];
  245 + this.options = [];
  246 +
  247 + this.$.inputs.innerHTML = "";
  248 + this.$.options.innerHTML = "";
  249 + },
  250 +
  251 + _getChartName: function(key) {
  252 + return ln[key + "_" +ln["localization"]];
  253 + },
  254 +
  255 +// _getInputRichName : function(item) {
  256 +// var name = ln[item.name + "_" +ln["localization"]];
  257 +// if(item.type != "TEXT")
  258 +// name += " [" + item.type + "]";
  259 +// if(item.selection == "?")
  260 +// name += " [OPT]";
  261 +// return name;
  262 +// },
  263 +
  264 + _getInputName : function(name) {
  265 + return ln[name + "_" +ln["localization"]];
  266 + },
  267 +
  268 + _getInputDescription : function(name) {
  269 + return ln[name + "Description_" +ln["localization"]];
  270 + },
  271 +
  272 + _setTabindex : function(tabIndex) {
  273 + this.debounce('_filter', function () {
  274 + this.tabIndex = -1;
  275 + this.tabIndex = tabIndex;
  276 + }, 0);
  277 + },
  278 +
  279 + _getNeonIndex : function(tabIndex){
  280 + if(tabIndex == -1)
  281 + return 0;
  282 + return tabIndex;
  283 + }
  284 +
  285 + });
  286 +
  287 + </script>
  288 +
  289 +</dom-module>
0 290 \ No newline at end of file
... ...
controllets/datalet-preview-controllet/index/index.html 0 → 100644
  View file @256ece2
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title></title>
  6 +</head>
  7 +<body>
  8 +
  9 +</body>
  10 +</html>
0 11 \ No newline at end of file
... ...
controllets/datalets-modifier-controllet/datalets-modifier-controllet.html
  View file @256ece2
... ... @@ -42,6 +42,7 @@
42 42 'page-slider-controllet_selected' : '_updateSlider',
43 43 'select-fields-controllet_selected-fields' : '_allowThirdStep',
44 44 'filters-controllet_filters': '_allowThirdStep',
  45 + 'aggregators-controllet_aggregators': '_allowThirdStep',
45 46 'data-ready': '_preselect'
46 47 },
47 48  
... ... @@ -96,6 +97,8 @@
96 97 _preselect : function(){
97 98 this.$.select_data.setSelectedFields(this.selectedFields);
98 99 this.$.select_data.setFilters(JSON.parse(this.dataletPreset["filters"]));
  100 + this.$.select_data.setAggregators(JSON.parse(this.dataletPreset["aggregators"]));
  101 +// this.$.select_visualization.preselect();
99 102 },
100 103  
101 104 _updateSlider : function(e){
... ... @@ -114,23 +117,27 @@
114 117  
115 118 this.$.slider.chevronLeft(true);
116 119 this.$.slider.chevronRight("invisible");
117   -
118   - /**/this.$.select_visualization.show();//resize
  120 +
  121 + this.$.select_visualization.preselect();
119 122 }
120 123 },
121 124  
122 125 _allowThirdStep : function(){
123   - this.$.slider.chevronRight(false);
124   - var fields = this.$.select_data.getSelectedFields();
125   - var filters = this.$.select_data.getFilters();
126   - var data = this.$.select_data.getData();
127   - if(fields.length > 0) {
128   - this.$.select_visualization.init();
129   - this.$.select_visualization.setFields(fields);
130   - this.$.select_visualization.setFilters(filters);
131   - this.$.select_visualization.setData(data);
132   - this.$.slider.chevronRight(true);
133   - }
  126 +// this.debounce('_allowThirdStep', function () { console.log("_allowThirdStep");
  127 + this.$.slider.chevronRight(false);
  128 + var selectedFields = this.$.select_data.getSelectedFields();
  129 + var filters = this.$.select_data.getFilters();
  130 + var aggregators = this.$.select_data.getAggregators();
  131 + var data = this.$.select_data.getData();
  132 + if(selectedFields.length > 0) {
  133 + this.$.select_visualization.init();
  134 + this.$.select_visualization.setSelectedFields(selectedFields);
  135 + this.$.select_visualization.setFilters(filters);
  136 + this.$.select_visualization.setAggregators(aggregators);
  137 + this.$.select_visualization.setData(data);
  138 + this.$.slider.chevronRight(true);
  139 + }
  140 +// }, 300);
134 141 }
135 142  
136 143 });
... ...
controllets/expert-query-controllet/demo/index.html 0 → 100755
  View file @256ece2
  1 +<html>
  2 +
  3 +<head>
  4 + <script src="../../shared_js/jquery-1.11.2.min.js"></script>
  5 +
  6 + <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  7 +
  8 + <link rel="import" href="../expert-query-controllet.html"/>
  9 +
  10 + <script src="../../../locales/controllet_ln.js"></script>
  11 +
  12 + <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  13 + <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  14 +</head>
  15 +
  16 +<body>
  17 +
  18 + <style>
  19 +
  20 + .container {
  21 + height: 400px;
  22 + width: 1200px;
  23 + position: relative;
  24 + top: 100px;
  25 + left:300px;
  26 + }
  27 +
  28 + </style>
  29 +
  30 + <div class="container">
  31 + <expert-query-controllet id="query"></expert-query-controllet>
  32 + </div>
  33 +
  34 + <script>
  35 + ln["localization"] = "en";
  36 +
  37 + var fields = ["aaa","bbb", "ccc", "ddd", "eee", "fff"];
  38 + var selectedFields = ["ccc","aaa", "eee"];
  39 +
  40 +// query.setFields(fields);
  41 +// query.setSelectedFields(selectedFields);
  42 + </script>
  43 +
  44 +</body>
  45 +
  46 +</html>
0 47 \ No newline at end of file
... ...
controllets/expert-query-controllet/expert-query-controllet.html 0 → 100755
  View file @256ece2
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html" />
  2 +
  3 +<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  4 +
  5 +<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
  6 +<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
  7 +
  8 +<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">
  9 +<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
  10 +<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
  11 +
  12 +<link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">
  13 +
  14 +<link rel="import" href="../filters-controllet/filters-controllet.html" />
  15 +<link rel="import" href="../aggregators-controllet/aggregators-controllet.html" />
  16 +
  17 +<script type="text/javascript" src="../../alasql-utility/alasql.min.js"></script>
  18 +<script type="text/javascript" src="../../alasql-utility/alasql-utility.js"></script>
  19 +
  20 +<dom-module id="expert-query-controllet">
  21 +
  22 + <template>
  23 +
  24 + <style is="custom-style">
  25 +
  26 + #expert_container {
  27 + display: none;
  28 + height: 100%;
  29 + width: 100%;
  30 + }
  31 +
  32 + #expert_container * {
  33 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  34 + font-size: 16px;
  35 + line-height: 24px;
  36 + }
  37 +
  38 + #expert_container #neon_container {
  39 + height: calc(100% - 48px);
  40 + width: 100%;
  41 + }
  42 +
  43 + #header_open {
  44 + display: flex;
  45 + /*background: #B6B6B6;*/
  46 + /*border: 1px solid #b6b6b6;*/
  47 + /*height: 46px;*/
  48 + }
  49 +
  50 + #expert_container paper-tabs {
  51 + /*height: 46px;*/
  52 + width: calc(100% - 48px);
  53 + }
  54 +
  55 + #expert_container #query_container {
  56 + padding: 28px 8px 0px 8px;
  57 + }
  58 +
  59 + #expert_container_close {
  60 + height: 48px;
  61 + width: 100%;
  62 +
  63 + display: flex;
  64 + }
  65 +
  66 + #expert_container_close * {
  67 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  68 + font-size: 16px;
  69 + line-height: 24px;
  70 + }
  71 +
  72 + #expert_container_close #header_close {
  73 + height: 24px;
  74 + width: calc(100% - 384px);
  75 + padding: 12px 0px;
  76 + text-align: center;
  77 + font-weight: 700;
  78 +
  79 + color: #00BCD4;
  80 + background: #FFFFFF;
  81 + cursor: pointer;
  82 + }
  83 +
  84 + #expert_container_close #space {
  85 + width: 192px;
  86 + }
  87 +
  88 + paper-tooltip {
  89 + --paper-tooltip-background: black;
  90 + }
  91 +
  92 + paper-tooltip p {
  93 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  94 + font-size: 16px;
  95 + line-height: 24px;
  96 +
  97 + margin: 0;
  98 + padding: 0;
  99 + }
  100 +
  101 + paper-icon-button {
  102 + height: 48px;
  103 + width: 48px;
  104 + padding: 8px;
  105 + color: #2196F3;
  106 + --paper-icon-button-ink-color: #2196F3;
  107 + }
  108 +
  109 + paper-icon-button.disabled{
  110 + color: #B6B6B6;
  111 + }
  112 +
  113 + paper-icon-button[icon=fullscreen],
  114 + paper-icon-button[icon=fullscreen-exit] {
  115 + height: 48px;
  116 + width: 48px;
  117 + padding: 8px;
  118 + color: #00BCD4;
  119 + --paper-icon-button-ink-color: #00BCD4;
  120 + }
  121 +
  122 + paper-icon-button[icon=fullscreen] {
  123 + margin-left: 48px;
  124 + }
  125 +
  126 + paper-tabs {
  127 + background: #B6B6B6;
  128 + --paper-tabs-selection-bar-color: #2196F3;
  129 + }
  130 +
  131 + paper-tab {
  132 + --paper-tab-ink: #2196F3;
  133 + }
  134 +
  135 + paper-tab.iron-selected {
  136 + font-weight: 700;
  137 + }
  138 +
  139 + /*paper-tab:not(.iron-selected):hover {*/
  140 + /*color: #2196F3;*/
  141 + /*}*/
  142 +
  143 + paper-tab:hover {
  144 + color: #2196F3;
  145 + }
  146 +
  147 + </style>
  148 +
  149 + <paper-material id="expert_container_close" elevation="5">
  150 + <div id="space"></div>
  151 +
  152 + <div id="header_close" on-click="_fullscreen"><span id="expert"></span></div>
  153 +
  154 + <paper-icon-button id="disable_filters" class=" disabled" icon="filter-list" on-click="_disableFilters"></paper-icon-button>
  155 + <paper-icon-button id="disable_aggregators" class=" disabled" icon="group-work" on-click="_disableAggregators"></paper-icon-button>
  156 + <paper-icon-button icon="fullscreen" on-click="_fullscreen"></paper-icon-button>
  157 + </paper-material>
  158 +
  159 + <paper-tooltip for="disable_filters" offset="12" position="top"><p><span id="tooltip_filters"></span></p></paper-tooltip>
  160 + <paper-tooltip for="disable_aggregators" offset="12" position="top"><p><span id="tooltip_aggregators"></span></p></paper-tooltip>
  161 +
  162 + <paper-material id="expert_container" elevation="5">
  163 +
  164 + <div id="header_open">
  165 + <paper-tabs selected="{{tabIndex}}">
  166 + <paper-tab><span id="filtersTab"></span></paper-tab>
  167 + <paper-tab><span id="groupByTab"></span></paper-tab>
  168 + <paper-tab><span id="queryTab"></span></paper-tab>
  169 + </paper-tabs>
  170 +
  171 + <paper-icon-button icon="fullscreen-exit" on-click="_fullscreenExit"></paper-icon-button>
  172 + </div>
  173 +
  174 + <neon-animated-pages id="neon_container" selected="{{tabIndex}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
  175 +
  176 + <neon-animatable>
  177 + <filters-controllet id="filters"></filters-controllet>
  178 + </neon-animatable>
  179 +
  180 + <neon-animatable>
  181 + <aggregators-controllet id="aggregators"></aggregators-controllet>
  182 + </neon-animatable>
  183 +
  184 + <neon-animatable>
  185 + <div id="query_container"></div>
  186 + </neon-animatable>
  187 +
  188 + </neon-animated-pages>
  189 +
  190 +
  191 + </paper-material>
  192 +
  193 + </template>
  194 +
  195 + <script>
  196 +
  197 + Polymer({
  198 +
  199 + is : 'expert-query-controllet',
  200 +
  201 + properties : {
  202 +
  203 + tabIndex: {
  204 + type: Number,
  205 + value: -1
  206 + },
  207 +
  208 + fields : {
  209 + type : Array,
  210 + value : []
  211 + },
  212 +
  213 + selectedFields : {
  214 + type : Array,
  215 + value : []
  216 + },
  217 +
  218 + filters : {
  219 + type : Array,
  220 + value : []
  221 + },
  222 +
  223 + aggregators : {
  224 + type : Array,
  225 + value : []
  226 + }
  227 +
  228 + },
  229 +
  230 + listeners: {
  231 + 'filters-controllet_filters': '_updateFilters',
  232 + 'aggregators-controllet_aggregators': '_updateAggregators'
  233 + },
  234 +
  235 + ready : function() {
  236 + },
  237 +
  238 + attached : function() {
  239 + this._translate();
  240 + },
  241 +
  242 + setFields : function(fields) {
  243 + this.fields = fields;
  244 +
  245 + this.$.filters.setFields(fields);
  246 + this.$.aggregators.setFields(fields);
  247 + },
  248 +
  249 + setSelectedFields : function(selectedFields) {
  250 + this.selectedFields = selectedFields;
  251 +
  252 + this.$.filters.setSelectedFields(selectedFields);
  253 + this.$.aggregators.setSelectedFields(selectedFields);
  254 +
  255 + this._updateQuery();
  256 + },
  257 +
  258 + setFilters : function(filters) {
  259 + this.async(function() {
  260 + this.$.filters.setFilters(filters);
  261 + }, 0);
  262 + },
  263 +
  264 + setAggregators : function(aggregators) {
  265 + this.async(function() {
  266 + this.$.aggregators.setAggregators(aggregators);
  267 + }, 0);
  268 + },
  269 +
  270 + reset : function() {
  271 + this.$.filters.reset();
  272 + this.$.aggregators.reset();
  273 + this.fields = [];
  274 + this.selectedFields = [];
  275 + this.filters = [];
  276 + this.aggregators = [];
  277 +// this.query = "";
  278 + },
  279 +
  280 + _translate : function() {
  281 + this.$.expert.innerHTML = ln["expert_" + ln["localization"]];
  282 + this.$.filtersTab.innerHTML = ln["filters_" + ln["localization"]];
  283 + this.$.groupByTab.innerHTML = ln["groupBy_" + ln["localization"]];
  284 + this.$.queryTab.innerHTML = ln["query_" + ln["localization"]];
  285 + this.$.tooltip_filters.innerHTML = ln["enableFilters_" + ln["localization"]];
  286 + this.$.tooltip_aggregators.innerHTML = ln["enableGroupBy_" + ln["localization"]];
  287 + },
  288 +
  289 + _fullscreen : function() {
  290 + this.$.expert_container_close.style.display = "none";
  291 + this.$.expert_container.style.display = "block";
  292 +
  293 + if(this.tabIndex == -1)
  294 + this.tabIndex = 0;
  295 +
  296 + this.fire('expert-controllet_show', {show: true});
  297 + },
  298 +
  299 + _fullscreenExit : function() {
  300 + this.$.expert_container_close.style.display = "flex";
  301 + this.$.expert_container.style.display = "none";
  302 +
  303 + this.fire('expert-controllet_show', {show: false});
  304 + },
  305 +
  306 + _updateFilters : function(e) {
  307 + this.filters = e.detail.filters;
  308 + this._updateQuery();
  309 + this._disableFiltersIcon(e.detail.filters);
  310 + },
  311 +
  312 + _disableFilters : function() {
  313 + this.$.filters._disableFilters();
  314 + },
  315 +
  316 + _disableFiltersIcon : function(filters) {
  317 + var classes = this.$.disable_filters.className;
  318 + if (filters.length > 1) {
  319 + this.$.disable_filters.className = classes.replace(" disabled", "");
  320 + this.$.tooltip_filters.innerHTML = ln["disableFilters_" + ln["localization"]];
  321 + }
  322 + else if (classes.indexOf("disabled") == -1) {
  323 + this.$.disable_filters.className = classes + " disabled";
  324 + this.$.tooltip_filters.innerHTML = ln["enableFilters_" + ln["localization"]];
  325 + }
  326 + },
  327 +
  328 + _updateAggregators : function(e) {
  329 + this.aggregators = e.detail.aggregators;
  330 + this._updateQuery();
  331 + this._disableAggregatorsIcon(e.detail.aggregators);
  332 + },
  333 +
  334 + _disableAggregators : function() {
  335 + this.$.aggregators._disableAggregators();
  336 + },
  337 +
  338 + _disableAggregatorsIcon : function(aggregators) {
  339 + var classes = this.$.disable_aggregators.className;
  340 + if (aggregators.length > 0) {
  341 + this.$.disable_aggregators.className = classes.replace(" disabled", "");
  342 + this.$.tooltip_aggregators.innerHTML = ln["disableGroupBy_" + ln["localization"]];
  343 + }
  344 + else if (classes.indexOf("disabled") == -1) {
  345 + this.$.disable_aggregators.className = classes + " disabled";
  346 + this.$.tooltip_aggregators.innerHTML = ln["enableGroupBy_" + ln["localization"]];
  347 + }
  348 + },
  349 +
  350 + _updateQuery : function() {
  351 + if(this.selectedFields.length)
  352 + this.$.query_container.innerHTML = alasql_QUERY_string(this.selectedFields, this.filters, this.aggregators, null)
  353 + .replace('SELECT', '<span style="color:#2196F3; font-weight: 700;">SELECT</span>')
  354 +// .replace('FROM ?', '<br><br><span style="color:#2196F3; font-weight: 700;">FROM</span> dataset')
  355 + .replace('FROM ?', '')
  356 + .replace('WHERE', '<br><br><span style="color:#2196F3; font-weight: 700;">WHERE</span>')
  357 + .replace('GROUP BY', '<br><br><span style="color:#2196F3; font-weight: 700;">GROUP BY</span>')
  358 + .replace(/\[/g, '')
  359 + .replace(/\]/g, '');
  360 + else
  361 + this.$.query_container.innerHTML = "";
  362 + }
  363 +
  364 + });
  365 +
  366 + </script>
  367 +
  368 +</dom-module>
0 369 \ No newline at end of file
... ...
controllets/filters-controllet/filters-controllet.html
  View file @256ece2
1 1 <link rel="import" href="../../bower_components/polymer/polymer.html" />
2 2  
3   -<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
4   -
5 3 <link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
6 4 <link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
7 5 <link rel="import" href="../../bower_components/paper-item/paper-item.html">
... ... @@ -19,8 +17,9 @@
19 17 <style is="custom-style">
20 18  
21 19 #filters_container {
22   - height: 48px;
  20 + height: 100%;
23 21 width: 100%;
  22 + position: relative;
24 23 }
25 24  
26 25 #filters_container * {
... ... @@ -29,37 +28,6 @@
29 28 line-height: 24px;
30 29 }
31 30  
32   - #filters_container #header {
33   - height: 32px;
34   - padding-top: 16px;
35   - text-align: center;
36   - font-weight: 700;
37   -
38   - background: #FFFFFF;
39   - color: #00BCD4;
40   - cursor: pointer;
41   - }
42   -
43   - #filters_container #header.hide{
44   - color: #00BCD4;
45   - background: #FFFFFF;
46   - }
47   -
48   - /*#filters_container #header.hide:hover{*/
49   - /*}*/
50   -
51   - #filters_container #header.show{
52   - color: #000000;
53   - background: #B6B6B6;
54   - }
55   -
56   - #filters_container #panel {
57   - display: none;
58   - position: relative;
59   - height: calc(100% - 48px);
60   - background: #FFFFFF;
61   - }
62   -
63 31 paper-dropdown-menu {
64 32 width: 100%;
65 33 --paper-input-container-focus-color: #2196F3;
... ... @@ -87,11 +55,34 @@
87 55 }
88 56  
89 57 paper-button {
90   - margin: 0px;
91   - height: 44px;
  58 + margin: 0;
  59 + height: 48px;
  60 + padding: 12px;
92 61 color: #FFFFFF;
93 62 background: #2196F3;
94 63 font-weight: 700;
  64 +
  65 + min-width: 96px;
  66 + }
  67 +
  68 + paper-button#disable_filters {
  69 + position: absolute;
  70 + bottom: 0;
  71 + right: 0;
  72 + margin: 0 8px 8px 0;
  73 +
  74 + min-width: 192px;
  75 + }
  76 +
  77 + paper-button#disable_filters.disabled {
  78 + background-color: #B6B6B6;
  79 + }
  80 +
  81 + iron-icon[icon=filter-list] {
  82 + height: 32px;
  83 + width: 32px;
  84 + color: #FFFFFF;
  85 + margin-top: -4px;
95 86 }
96 87  
97 88 paper-button:hover {
... ... @@ -138,7 +129,8 @@
138 129 height: 44px;
139 130 width: calc(100% - 40px);
140 131 padding: 8px 0px;
141   - text-align: right;
  132 + /*text-align: right;*/
  133 + text-align: center;
142 134 }
143 135  
144 136 #filters_container .row2 {
... ... @@ -147,7 +139,7 @@
147 139 width: 100%;
148 140 }
149 141  
150   - #filters_container .row2 .highlighted {
  142 + .highlighted {
151 143 color: #2196F3;
152 144 font-weight: 700;
153 145 }
... ... @@ -162,16 +154,11 @@
162 154 height: 40px;
163 155 width: 40px;
164 156 padding: 4px 8px;
165   -
166 157 }
167 158  
168 159 </style>
169 160  
170   - <paper-material id="filters_container" elevation="5">
171   -
172   - <div id="header" class="hide" on-click="_showFiltersPanel"><span id="filters"><span id="addFilters"></span></span></div>
173   -
174   - <div id="panel">
  161 + <div id="filters_container">
175 162  
176 163 <div class="row">
177 164 <div class="ddl_container">
... ... @@ -209,7 +196,7 @@
209 196 <template is="dom-if" if="{{index}}"><!--excludes logicalOperator-->
210 197 <div class="row2">
211 198 <div class="filter">
212   - {{item.field}}&nbsp;&nbsp;&nbsp;<span class="highlighted">{{_getOperationlName(item.operation)}}</span>&nbsp;&nbsp;&nbsp;"{{item.value}}"&nbsp;&nbsp;&nbsp;<span class="highlighted">{{_getLogicalOperator(index)}}</span>
  199 + {{item.field}} <span class="highlighted">{{_getOperationlName(item.operation)}}</span> "{{item.value}}" <span class="highlighted">{{_getLogicalOperator(index)}}</span>
213 200 </div>
214 201 <div class="remove_container">
215 202 <paper-icon-button on-click="_deleteFilter" icon="cancel" class="cancel"></paper-icon-button>
... ... @@ -218,9 +205,9 @@
218 205 </template>
219 206 </template>
220 207  
221   - </div>
  208 + <paper-button id="disable_filters" raised on-click="_disableFilters"><iron-icon icon="filter-list"></iron-icon>&nbsp; <span id="disable_enable"></span></paper-button>
222 209  
223   - </paper-material>
  210 + </div>
224 211  
225 212 </template>
226 213  
... ... @@ -245,18 +232,12 @@
245 232 filters : {
246 233 type : Array,
247 234 value : [{logicalOperator: "AND"}]
248   - },
249   -
250   - show : {
251   - type : Boolean,
252   - value : false
253 235 }
254 236  
255 237 },
256 238  
257 239 ready : function() {
258   - $(this.$.panel).perfectScrollbar();
259   -// this._showFiltersPanel();gi
  240 + $(this.$.filters_container).perfectScrollbar();
260 241 this.logicalOperator = "AND";
261 242 },
262 243  
... ... @@ -266,7 +247,10 @@
266 247  
267 248 setFields : function(fields) {
268 249 this.fields = this._copy(fields);
269   - this.fields = fields;
  250 + },
  251 +
  252 + setSelectedFields : function(selectedFields) {
  253 + this.selectedFields = this._copy(selectedFields);
270 254 },
271 255  
272 256 setFilters : function(filters) {
... ... @@ -283,43 +267,26 @@
283 267  
284 268 reset : function() {
285 269 this.fields = [];
  270 + this.selectedFields = [];
286 271 this.filters = [{logicalOperator: "AND"}];
287 272 },
288 273  
289 274 _translate : function() {
290   - this.$.addFilters.innerHTML = ln["expertAddFilters_" + ln["localization"]];
291 275 this.$.filter_field.setAttribute("label", ln["filterField_" + ln["localization"]]);
292 276 this.$.filter_operation.setAttribute("label", ln["filterOperation_" + ln["localization"]]);
293 277 this.$.filter_value.setAttribute("label", ln["filterValue_" + ln["localization"]]);
  278 +
  279 + this.$.disable_enable.innerHTML = ln["disableFilters_" + ln["localization"]];
294 280 },
295 281  
296 282 _fieldName : function(field) {
297 283 return field.substring(field.lastIndexOf(",")+1, field.length);
298 284 },
299 285  
300   - _showFiltersPanel : function() {
301   -// ? filter class hiddend & hover:
302   -
303   - if(!this.show) {
304   - this.$.filters_container.style.height = "100%";
305   - $(this.$.header).removeClass("hide");
306   - $(this.$.header).addClass("show");
307   - this.$.panel.style.display = "block";
308   -
309   - }
310   - else {
311   - this.$.filters_container.style.height = "48px";
312   - $(this.$.header).removeClass("show");
313   - $(this.$.header).addClass("hide");
314   - this.$.panel.style.display = "none";
315   - }
316   -
317   - this.fire('filters-controllet_show', {show: this.show});
318   -
319   - this.show = !this.show;
320   - },
321   -
322 286 _fire : function() {
  287 + this.$.disable_enable.innerHTML = ln["disableFilters_" + ln["localization"]];
  288 + this.$.disable_filters.className = this.$.disable_filters.className.replace(" disabled", "");
  289 +
323 290 if (this.filters.length > 1)
324 291 this.fire('filters-controllet_filters', {filters: this.filters});
325 292 else
... ... @@ -331,13 +298,8 @@
331 298 var field = this.$.filter_field.value;
332 299 var id = this.$.filter_operation.selectedItem.id;
333 300 var operation = this.operations[id];
334   -// var operation = this.$.filter_operation.value;
335 301 var value = this.$.filter_value.value;
336 302  
337   -// var filters = this.filters;
338   -// filters.push({"field": field, "operation": operation, "value": value});
339   -// this.filters = filters;
340   -
341 303 this.filters.push({"field": field, "operation": operation, "value": value});
342 304  
343 305 this.$.filter_field_menu.select(-1);
... ... @@ -353,10 +315,6 @@
353 315 _deleteFilter : function(e) {
354 316 var index = e.model.index;
355 317  
356   -// var filters = this.filters;
357   -// filters.splice(index, 1);
358   -// this.filters = this._copy(filters);
359   -
360 318 this.filters.splice(index, 1);
361 319  
362 320 this._fire();
... ... @@ -366,28 +324,8 @@
366 324  
367 325 _getOperationlName: function(operation) {
368 326 return ln[operation + "_" + ln["localization"]];
369   -// if(operation.indexOf("not") > -1)
370   -// return ln["notContains_" + ln["localization"]];
371   -// if(operation.indexOf("contains") > -1)
372   -// return ln["contains_" + ln["localization"]];
373   -// if(operation.indexOf("start") > -1)
374   -// return ln["start_" + ln["localization"]];
375   -// if(operation.indexOf("ends") > -1)
376   -// return ln["ends_" + ln["localization"]];
377   -// return operation;
378 327 },
379 328  
380   -// _changeLogicalOperator : function() {
381   -// if(this.logicalOperator == "AND")
382   -// this.logicalOperator = "OR";
383   -// else
384   -// this.logicalOperator = "AND";
385   -//
386   -// this._fire();
387   -//
388   -// this._renderFilters();
389   -// },
390   -
391 329 _changeLogicalOperator : function() {
392 330 if(this.logicalOperator == "AND")
393 331 this.logicalOperator = "OR";
... ... @@ -416,6 +354,20 @@
416 354 return this.filters[0].logicalOperator;
417 355 },
418 356  
  357 + _disableFilters : function() {
  358 + var classes = this.$.disable_filters.className;
  359 + if (classes.indexOf("disabled") > -1) {
  360 +// this.$.disable_enable.innerHTML = ln["disableFilters_" + ln["localization"]];
  361 +// this.$.disable_filters.className = classes.replace(" disabled", "");
  362 + this._fire();
  363 + }
  364 + else {
  365 + this.$.disable_enable.innerHTML = ln["enableFilters_" + ln["localization"]];
  366 + this.$.disable_filters.className = classes + " disabled";
  367 + this.fire('filters-controllet_filters', {filters: []});
  368 + }
  369 + },
  370 +
419 371 _copy : function(o) {
420 372 var out, v, key;
421 373 out = Array.isArray(o) ? [] : {};
... ...
controllets/filters-controllet/filters-controllet_old.html 0 → 100755
  View file @256ece2
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html" />
  2 +
  3 +<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  4 +
  5 +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
  6 +<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
  7 +<link rel="import" href="../../bower_components/paper-item/paper-item.html">
  8 +
  9 +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
  10 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
  11 +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
  12 +
  13 +<link rel="import" href="../../bower_components/paper-button/paper-button.html">
  14 +
  15 +<dom-module id="filters-controllet">
  16 +
  17 + <template>
  18 +
  19 + <style is="custom-style">
  20 +
  21 + #filters_container {
  22 + height: 48px;
  23 + width: 100%;
  24