Commit cd9f822e930c7d4f027c1cad40346f05e42e95ac
1 parent
20799010
split 1st step
Showing
2 changed files
with
794 additions
and
28 deletions
controllets/select-dataset-controllet/select-dataset-controllet.html
| @@ -135,6 +135,11 @@ | @@ -135,6 +135,11 @@ | ||
| 135 | background-color: #E0E0E0; | 135 | background-color: #E0E0E0; |
| 136 | } | 136 | } |
| 137 | 137 | ||
| 138 | + .item.expanded { | ||
| 139 | + /*border: 2px solid #2196F3;*/ | ||
| 140 | + border-color: #2196F3; | ||
| 141 | + } | ||
| 142 | + | ||
| 138 | .pad { | 143 | .pad { |
| 139 | @apply(--layout-flex); | 144 | @apply(--layout-flex); |
| 140 | /*@apply(--layout-vertical);*/ | 145 | /*@apply(--layout-vertical);*/ |
| @@ -171,15 +176,37 @@ | @@ -171,15 +176,37 @@ | ||
| 171 | width: calc(100% - 8px); | 176 | width: calc(100% - 8px); |
| 172 | } | 177 | } |
| 173 | 178 | ||
| 174 | - #select_dataset_container #list_container { | ||
| 175 | - /*height: calc(100% - 244px);*/ | ||
| 176 | - /*width: calc(100% - 8px);*/ | 179 | + #select_dataset_container #list_info { |
| 180 | + display: flex; | ||
| 177 | height: calc(100% - 48px); | 181 | height: calc(100% - 48px); |
| 178 | - width: 100%; | ||
| 179 | - border: 4px solid #B6B6B6; | ||
| 180 | - border-top: 0px; | ||
| 181 | - border-bottom: 0px; | 182 | + width: calc(100% + 8px);/*bad*/ |
| 183 | + } | ||
| 184 | + | ||
| 185 | + #select_dataset_container #list_container { | ||
| 182 | position: relative; | 186 | position: relative; |
| 187 | + height: 100%; | ||
| 188 | + width: 50%; | ||
| 189 | + border-left: 4px solid #B6B6B6;; | ||
| 190 | + } | ||
| 191 | + | ||
| 192 | + #select_dataset_container #info_container { | ||
| 193 | + position: relative; | ||
| 194 | + height: 100%; | ||
| 195 | + width: 50%; | ||
| 196 | + border-right: 4px solid #B6B6B6; | ||
| 197 | + | ||
| 198 | + /*background-color: red;*/ | ||
| 199 | + } | ||
| 200 | + | ||
| 201 | + #select_dataset_container #info { | ||
| 202 | + position: relative; | ||
| 203 | + height: calc(100% - 56px); | ||
| 204 | + width: calc(100% - 56px); | ||
| 205 | + padding: 11px; | ||
| 206 | + border: 1px solid #B6B6B6; | ||
| 207 | + border-radius: 4px; | ||
| 208 | + background-color: #E0E0E0; | ||
| 209 | + margin: 16px; | ||
| 183 | } | 210 | } |
| 184 | 211 | ||
| 185 | #select_dataset_container #treemap_container { | 212 | #select_dataset_container #treemap_container { |
| @@ -303,30 +330,32 @@ | @@ -303,30 +330,32 @@ | ||
| 303 | <neon-animated-pages id="neon_container" selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation"> | 330 | <neon-animated-pages id="neon_container" selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation"> |
| 304 | 331 | ||
| 305 | <neon-animatable> | 332 | <neon-animatable> |
| 306 | - <div id="list_container"> | ||
| 307 | - <iron-list id="list" items="{{shownDatasets}}" selection-enabled><!--multi-selection--> | ||
| 308 | - <template> | ||
| 309 | - <div> | ||
| 310 | - <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};"> | ||
| 311 | - <!--<div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl">--> | ||
| 312 | - <span style="display:none;">{{item.url}}</span> | ||
| 313 | - <div class="pad"> | ||
| 314 | - <div class="primary">{{item.resource_name}}</div> | ||
| 315 | - <!--<div class="shortText" style="display:none;">{{item.url}}</div>--> | ||
| 316 | - <div class="longText"> | ||
| 317 | - <template is="dom-repeat" items="{{_stringToArray(item.metas)}}" as="mata"> | ||
| 318 | - <b>{{mata.name}}:</b> | ||
| 319 | - <span inner-h-t-m-l="{{mata.value}}"></span> <br> | ||
| 320 | - </template> | 333 | + <div id="list_info"> |
| 334 | + <div id="list_container"> | ||
| 335 | + <iron-list id="list" items="{{shownDatasets}}" selection-enabled> | ||
| 336 | + <template> | ||
| 337 | + <div> | ||
| 338 | + <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};"> | ||
| 339 | + <span style="display:none;">{{item.url}}</span> | ||
| 340 | + <div class="pad"> | ||
| 341 | + <div class="primary">{{item.resource_name}}</div> | ||
| 342 | + <!--<div class="longText">--> | ||
| 343 | + <!--<template is="dom-repeat" items="{{_stringToArray(item.metas)}}" as="mata">--> | ||
| 344 | + <!--<b>{{mata.name}}:</b>--> | ||
| 345 | + <!--<span inner-h-t-m-l="{{mata.value}}"></span> <br>--> | ||
| 346 | + <!--</template>--> | ||
| 347 | + <!--</div>--> | ||
| 321 | </div> | 348 | </div> |
| 349 | + <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon> | ||
| 322 | </div> | 350 | </div> |
| 323 | - <!--<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>--> | ||
| 324 | - <!--<iron-icon icon="bookmark" style$="color: {{_getColorForItem(item)}};"></iron-icon>--> | ||
| 325 | - <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon> | ||
| 326 | </div> | 351 | </div> |
| 327 | - </div> | ||
| 328 | - </template> | ||
| 329 | - </iron-list> | 352 | + </template> |
| 353 | + </iron-list> | ||
| 354 | + </div> | ||
| 355 | + <div id="info_container"> | ||
| 356 | + <div id="info"> | ||
| 357 | + </div> | ||
| 358 | + </div> | ||
| 330 | </div> | 359 | </div> |
| 331 | 360 | ||
| 332 | <div id="footer_list"> | 361 | <div id="footer_list"> |
| @@ -422,6 +451,7 @@ | @@ -422,6 +451,7 @@ | ||
| 422 | 451 | ||
| 423 | ready : function() { | 452 | ready : function() { |
| 424 | $(this.$.list_container).perfectScrollbar(); | 453 | $(this.$.list_container).perfectScrollbar(); |
| 454 | + $(this.$.info).perfectScrollbar(); | ||
| 425 | 455 | ||
| 426 | // this.$.selected_url.invalid = true; | 456 | // this.$.selected_url.invalid = true; |
| 427 | }, | 457 | }, |
| @@ -667,6 +697,13 @@ | @@ -667,6 +697,13 @@ | ||
| 667 | _selectDataUrl : function(){ | 697 | _selectDataUrl : function(){ |
| 668 | this.async(function () { | 698 | this.async(function () { |
| 669 | if(this.$.list.selectedItem) { | 699 | if(this.$.list.selectedItem) { |
| 700 | + | ||
| 701 | + var metas = JSON.parse(this.$.list.selectedItem.metas); | ||
| 702 | + var html = ""; | ||
| 703 | + for(var i in metas) | ||
| 704 | + html += "<b>" + i + ":</b> " + metas[i] + "<br>"; | ||
| 705 | + this.$.info.innerHTML = html; | ||
| 706 | + | ||
| 670 | var url = this.$.list.selectedItem.url; | 707 | var url = this.$.list.selectedItem.url; |
| 671 | 708 | ||
| 672 | // Check if CKAN | 709 | // Check if CKAN |
| @@ -692,6 +729,7 @@ | @@ -692,6 +729,7 @@ | ||
| 692 | } | 729 | } |
| 693 | else { | 730 | else { |
| 694 | this.dataUrl = ""; | 731 | this.dataUrl = ""; |
| 732 | + this.$.info.innerHTML = ""; | ||
| 695 | } | 733 | } |
| 696 | }, 0); | 734 | }, 0); |
| 697 | }, | 735 | }, |
controllets/select-dataset-controllet/select-dataset-controllet_purelist.html
0 → 100755
| 1 | +<link rel="import" href="../../bower_components/polymer/polymer.html"> | ||
| 2 | + | ||
| 3 | +<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html"> | ||
| 4 | +<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html"> | ||
| 5 | + | ||
| 6 | +<link rel="import" href="../../bower_components/neon-animation/neon-animation.html"> | ||
| 7 | +<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html"> | ||
| 8 | +<link rel="import" href="../../bower_components/neon-animation/neon-animations.html"> | ||
| 9 | + | ||
| 10 | +<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html"> | ||
| 11 | +<!--<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">--> | ||
| 12 | +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"> | ||
| 13 | +<link rel="import" href="../../bower_components/paper-styles/color.html"> | ||
| 14 | +<link rel="import" href="../../bower_components/paper-styles/typography.html"> | ||
| 15 | +<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"> | ||
| 16 | +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"> | ||
| 17 | +<link rel="import" href="../../bower_components/iron-image/iron-image.html"> | ||
| 18 | +<link rel="import" href="../../bower_components/iron-list/iron-list.html"> | ||
| 19 | + | ||
| 20 | +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> | ||
| 21 | +<link rel="import" href="../../bower_components/paper-menu/paper-menu.html"> | ||
| 22 | +<link rel="import" href="../../bower_components/paper-item/paper-item.html"> | ||
| 23 | + | ||
| 24 | +<link rel="import" href="../../bower_components/paper-input/paper-input.html"> | ||
| 25 | + | ||
| 26 | +<link rel="import" href="../../bower_components/paper-input/paper-textarea.html"> | ||
| 27 | + | ||
| 28 | +<link rel="import" href="../../bower_components/paper-material/paper-material.html" /> | ||
| 29 | + | ||
| 30 | +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"> | ||
| 31 | +<link rel="import" href="../../bower_components/iron-icons/hardware-icons.html"> | ||
| 32 | +<!--<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">--> | ||
| 33 | + | ||
| 34 | +<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html"> | ||
| 35 | + | ||
| 36 | +<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html"> | ||
| 37 | + | ||
| 38 | +<dom-module id="select-dataset-controllet"> | ||
| 39 | + <template> | ||
| 40 | + <style> | ||
| 41 | + :host { | ||
| 42 | + --paper-dropdown-menu-icon: { | ||
| 43 | + color: #000000; | ||
| 44 | + }; | ||
| 45 | + --paper-dropdown-menu-ripple: { | ||
| 46 | + color: #FFFFFF; | ||
| 47 | + }; | ||
| 48 | + /*--paper-tab-ink: {*/ | ||
| 49 | + /*color: #FFFFFF;*/ | ||
| 50 | + /*};*/ | ||
| 51 | + } | ||
| 52 | + | ||
| 53 | + iron-list { | ||
| 54 | + --iron-list-items-container: { | ||
| 55 | + margin:16px 16px 8px 16px; | ||
| 56 | + }; | ||
| 57 | + } | ||
| 58 | + | ||
| 59 | + paper-textarea { | ||
| 60 | + width: 100%; | ||
| 61 | + --paper-input-container-focus-color: #2196F3; | ||
| 62 | + } | ||
| 63 | + | ||
| 64 | + paper-input { | ||
| 65 | + --paper-input-container-focus-color: #2196F3; | ||
| 66 | + } | ||
| 67 | + paper-dropdown-menu { | ||
| 68 | + width: 100%; | ||
| 69 | + --paper-input-container-focus-color: #2196F3; | ||
| 70 | + } | ||
| 71 | + | ||
| 72 | + paper-item.iron-selected { | ||
| 73 | + background-color: #2196F3; | ||
| 74 | + color: #FFFFFF; | ||
| 75 | + } | ||
| 76 | + | ||
| 77 | + paper-checkbox { | ||
| 78 | + height: 24px; | ||
| 79 | + /*margin-top: 8px*/ | ||
| 80 | + --paper-checkbox-checked-color: #2196F3; | ||
| 81 | + --paper-checkbox-checked-ink-color: #FFFFFF; | ||
| 82 | + --paper-checkbox-unchecked-color: #000000; | ||
| 83 | + --paper-checkbox-unchecked-ink-color: #FFFFFF; | ||
| 84 | + --paper-checkbox-label-color: #000000; | ||
| 85 | + } | ||
| 86 | + | ||
| 87 | + paper-icon-button{ | ||
| 88 | + height: 48px; | ||
| 89 | + width: 48px; | ||
| 90 | + padding: 0px; | ||
| 91 | + --paper-icon-button-ink-color: #FFFFFF; | ||
| 92 | + } | ||
| 93 | + | ||
| 94 | + paper-icon-button:hover{ | ||
| 95 | + color: #2196F3; | ||
| 96 | + } | ||
| 97 | + | ||
| 98 | + paper-icon-button[disabled]{ | ||
| 99 | + color: #B6B6B6; | ||
| 100 | + } | ||
| 101 | + | ||
| 102 | + paper-icon-button.clear { | ||
| 103 | + width: 24px; | ||
| 104 | + height: 24px; | ||
| 105 | + padding: 0px 4px; | ||
| 106 | + color: #F44336; | ||
| 107 | + --paper-icon-button-ink-color: #FFFFFF; | ||
| 108 | + } | ||
| 109 | + | ||
| 110 | + paper-tabs { | ||
| 111 | + font-weight: bold; | ||
| 112 | + } | ||
| 113 | + | ||
| 114 | + paper-tab { | ||
| 115 | + transition: all 1.0s; | ||
| 116 | + } | ||
| 117 | + | ||
| 118 | + paper-tab.iron-selected { | ||
| 119 | + background-color: #2196F3; | ||
| 120 | + color: #FFFFFF; | ||
| 121 | + } | ||
| 122 | + | ||
| 123 | + paper-tab:not(.iron-selected):hover { | ||
| 124 | + color: #2196F3; | ||
| 125 | + } | ||
| 126 | + | ||
| 127 | + .item { | ||
| 128 | + /*@apply(--layout-horizontal);*/ | ||
| 129 | + display: flex; | ||
| 130 | + padding: 11px; | ||
| 131 | + border: 1px solid #B6B6B6; | ||
| 132 | + border-radius: 4px; | ||
| 133 | + cursor: pointer; | ||
| 134 | + margin-bottom: 8px; | ||
| 135 | + background-color: #E0E0E0; | ||
| 136 | + } | ||
| 137 | + | ||
| 138 | + .pad { | ||
| 139 | + @apply(--layout-flex); | ||
| 140 | + /*@apply(--layout-vertical);*/ | ||
| 141 | + } | ||
| 142 | + | ||
| 143 | + .primary { | ||
| 144 | + font-weight: bold; | ||
| 145 | + } | ||
| 146 | + | ||
| 147 | + .item.expanded .primary { | ||
| 148 | + color: #2196F3; | ||
| 149 | + } | ||
| 150 | + | ||
| 151 | + .longText { | ||
| 152 | + display: none; | ||
| 153 | + } | ||
| 154 | + | ||
| 155 | + .item.expanded .longText { | ||
| 156 | + display: block; | ||
| 157 | + } | ||
| 158 | + | ||
| 159 | + #select_dataset_container { | ||
| 160 | + margin-top: 8px; | ||
| 161 | + } | ||
| 162 | + | ||
| 163 | + #select_dataset_container * { | ||
| 164 | + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; | ||
| 165 | + font-size: 16px; | ||
| 166 | + line-height: 24px; | ||
| 167 | + } | ||
| 168 | + | ||
| 169 | + #select_dataset_container #neon_container { | ||
| 170 | + height: calc(100% - 172px); | ||
| 171 | + width: calc(100% - 8px); | ||
| 172 | + } | ||
| 173 | + | ||
| 174 | + #select_dataset_container #list_container { | ||
| 175 | + /*height: calc(100% - 244px);*/ | ||
| 176 | + /*width: calc(100% - 8px);*/ | ||
| 177 | + height: calc(100% - 48px); | ||
| 178 | + width: 100%; | ||
| 179 | + border: 4px solid #B6B6B6; | ||
| 180 | + border-top: 0px; | ||
| 181 | + border-bottom: 0px; | ||
| 182 | + position: relative; | ||
| 183 | + } | ||
| 184 | + | ||
| 185 | + #select_dataset_container #treemap_container { | ||
| 186 | + /*height: calc(100% - 244px);*/ | ||
| 187 | + /*width: calc(100% - 8px);*/ | ||
| 188 | + height: calc(100% - 48px); | ||
| 189 | + width: 100%; | ||
| 190 | + border: 4px solid #B6B6B6; | ||
| 191 | + border-top: 0px; | ||
| 192 | + border-bottom: 0px; | ||
| 193 | + position: relative; | ||
| 194 | + } | ||
| 195 | + | ||
| 196 | + #select_dataset_container #header { | ||
| 197 | + position: relative; | ||
| 198 | + z-index: 1; | ||
| 199 | + -webkit-box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4); | ||
| 200 | + -moz-box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4); | ||
| 201 | + box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4); | ||
| 202 | + | ||
| 203 | + background-color: #B6B6B6; | ||
| 204 | + display: flex; | ||
| 205 | + padding: 0px 4px; | ||
| 206 | + } | ||
| 207 | + | ||
| 208 | + #select_dataset_container #footer_list { | ||
| 209 | + position: relative; | ||
| 210 | + z-index: 1; | ||
| 211 | + -webkit-box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4); | ||
| 212 | + -moz-box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4); | ||
| 213 | + box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4); | ||
| 214 | + } | ||
| 215 | + | ||
| 216 | + .noshadow { | ||
| 217 | + -webkit-box-shadow: none !important; | ||
| 218 | + -moz-box-shadow: none !important; | ||
| 219 | + box-shadow: none !important; | ||
| 220 | + } | ||
| 221 | + | ||
| 222 | + #select_dataset_container #footer_list, | ||
| 223 | + #select_dataset_container #footer_treemap { | ||
| 224 | + width: 100%; | ||
| 225 | + background-color: #B6B6B6; | ||
| 226 | + display: flex; | ||
| 227 | + padding: 0px 4px; | ||
| 228 | + } | ||
| 229 | + | ||
| 230 | + #select_dataset_container #url { | ||
| 231 | + height: 76px;/*100*/ | ||
| 232 | + border: 4px solid #B6B6B6; | ||
| 233 | + border-top: 0px; | ||
| 234 | + padding: 0px 16px; | ||
| 235 | + margin-top: -4px; | ||
| 236 | + } | ||
| 237 | + | ||
| 238 | + #header .header_block { | ||
| 239 | + width: 20%; | ||
| 240 | + height: 40px; | ||
| 241 | + padding: 4px 16px 4px 16px; | ||
| 242 | + } | ||
| 243 | + | ||
| 244 | + /*.header_block:nth-child(2), .header_block:nth-child(3), .header_block:nth-child(3), .header_block:nth-child(4){*/ | ||
| 245 | + /*visibility: hidden;*/ | ||
| 246 | + /*}*/ | ||
| 247 | + | ||
| 248 | + #header .header_block:nth-child(4) { | ||
| 249 | + text-align: center; | ||
| 250 | + } | ||
| 251 | + | ||
| 252 | + .footer_block { | ||
| 253 | + width: calc((100% - 0px) / 3); | ||
| 254 | + height: 24px; | ||
| 255 | + padding: 12px 8px 12px 8px; | ||
| 256 | + text-align: center; | ||
| 257 | + } | ||
| 258 | + | ||
| 259 | + .footer_block:nth-child(2) { | ||
| 260 | + height: 48px; | ||
| 261 | + padding: 0px 8px; | ||
| 262 | + } | ||
| 263 | + | ||
| 264 | + #suggested_div { | ||
| 265 | + visibility: hidden; | ||
| 266 | + } | ||
| 267 | + </style> | ||
| 268 | + | ||
| 269 | + <paper-material id="select_dataset_container" elevation="5"> | ||
| 270 | + | ||
| 271 | + <paper-tabs selected="{{selected}}" no-bar> | ||
| 272 | + <paper-tab noink on-tap="_refreshList"><span id="listView"></span></paper-tab> | ||
| 273 | + <!--<paper-tab noink ><span id="listView"></span></paper-tab>--> | ||
| 274 | + <paper-tab on-tap="_noShadow" noink><span id="treeMapView"></span></paper-tab> | ||
| 275 | + </paper-tabs> | ||
| 276 | + | ||
| 277 | + <div id="header"> | ||
| 278 | + <div class="header_block"> | ||
| 279 | + <paper-dropdown-menu id="ddl_provider" label="" no-label-float> | ||
| 280 | + <paper-menu class="dropdown-content" selected="0"> | ||
| 281 | + <paper-item id="0" on-tap="_filter"></paper-item> | ||
| 282 | + <template is="dom-repeat" items={{_toArray(providers)}} as="provider"> | ||
| 283 | + <!--<paper-item id={{provider.value.id}} style$="background: {{_getProviderColor(provider.value.id)}};">{{provider.value.title}}</paper-item>--> | ||
| 284 | + <paper-item id={{provider.value.id}} on-tap="_filter">{{provider.value.title}}</paper-item> | ||
| 285 | + </template> | ||
| 286 | + </paper-menu> | ||
| 287 | + </paper-dropdown-menu> | ||
| 288 | + </div> | ||
| 289 | + <div class="header_block"> | ||
| 290 | + </div> | ||
| 291 | + <div class="header_block"> | ||
| 292 | + </div> | ||
| 293 | + <div class="header_block"> | ||
| 294 | + </div> | ||
| 295 | + <div class="header_block"> | ||
| 296 | + <paper-input id="datasets_filter" value={{filter}} no-label-float label=""> | ||
| 297 | + <iron-icon class="search" icon="search" prefix></iron-icon> | ||
| 298 | + <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" tabindex="0"></paper-icon-button> | ||
| 299 | + </paper-input> | ||
| 300 | + </div> | ||
| 301 | + </div> | ||
| 302 | + | ||
| 303 | + <neon-animated-pages id="neon_container" selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation"> | ||
| 304 | + | ||
| 305 | + <neon-animatable> | ||
| 306 | + <div id="list_container"> | ||
| 307 | + <iron-list id="list" items="{{shownDatasets}}" selection-enabled><!--multi-selection--> | ||
| 308 | + <template> | ||
| 309 | + <div> | ||
| 310 | + <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};"> | ||
| 311 | + <!--<div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl">--> | ||
| 312 | + <span style="display:none;">{{item.url}}</span> | ||
| 313 | + <div class="pad"> | ||
| 314 | + <div class="primary">{{item.resource_name}}</div> | ||
| 315 | + <!--<div class="shortText" style="display:none;">{{item.url}}</div>--> | ||
| 316 | + <div class="longText"> | ||
| 317 | + <template is="dom-repeat" items="{{_stringToArray(item.metas)}}" as="mata"> | ||
| 318 | + <b>{{mata.name}}:</b> | ||
| 319 | + <span inner-h-t-m-l="{{mata.value}}"></span> <br> | ||
| 320 | + </template> | ||
| 321 | + </div> | ||
| 322 | + </div> | ||
| 323 | + <!--<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>--> | ||
| 324 | + <!--<iron-icon icon="bookmark" style$="color: {{_getColorForItem(item)}};"></iron-icon>--> | ||
| 325 | + <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon> | ||
| 326 | + </div> | ||
| 327 | + </div> | ||
| 328 | + </template> | ||
| 329 | + </iron-list> | ||
| 330 | + </div> | ||
| 331 | + | ||
| 332 | + <div id="footer_list"> | ||
| 333 | + <div class="footer_block"><span id="showing"></span> {{shownPrev}} <span id="to"></span> {{shownNext}} <span id="of"></span> {{length}} <span id="datasets"></span></div> | ||
| 334 | + <div class="footer_block"> | ||
| 335 | + <paper-icon-button id="slider_chevron_left" class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button> | ||
| 336 | + <paper-icon-button id="slider_chevron_right" class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button> | ||
| 337 | + </div> | ||
| 338 | + <div id="suggested_div" class="footer_block"> | ||
| 339 | + <!--<template is="dom-if" if={{suggestedDatasets}}>--> | ||
| 340 | + <paper-checkbox checked on-change="showSuggested"><span id="suggested_datasets"></span></paper-checkbox> | ||
| 341 | + <!--</template>--> | ||
| 342 | + </div> | ||
| 343 | + </div> | ||
| 344 | + </neon-animatable> | ||
| 345 | + | ||
| 346 | + <neon-animatable> | ||
| 347 | + <div id="treemap_container"></div> | ||
| 348 | + | ||
| 349 | + <div id="footer_treemap"> | ||
| 350 | + <div class="footer_block"><span id="showing2"></span> {{tLength}} <span id="datasets2"></span></div> | ||
| 351 | + <div class="footer_block"></div> | ||
| 352 | + <div class="footer_block"></div> | ||
| 353 | + </div> | ||
| 354 | + </neon-animatable> | ||
| 355 | + | ||
| 356 | + </neon-animated-pages> | ||
| 357 | + | ||
| 358 | + <div id="url"> | ||
| 359 | + <paper-textarea id="selected_url" label="" value={{dataUrl}} error-message={{errorMessage}}></paper-textarea> | ||
| 360 | + </div> | ||
| 361 | + | ||
| 362 | + </paper-material> | ||
| 363 | + | ||
| 364 | + </template> | ||
| 365 | + | ||
| 366 | + <script> | ||
| 367 | + HTMLImports.whenReady(function() { | ||
| 368 | + Polymer({ | ||
| 369 | + is: 'select-dataset-controllet', | ||
| 370 | + properties: { | ||
| 371 | + datasets: { | ||
| 372 | + type: Object, | ||
| 373 | + value: undefined | ||
| 374 | + }, | ||
| 375 | + filteredDatasets : { | ||
| 376 | + type : Array, | ||
| 377 | + value : undefined | ||
| 378 | + }, | ||
| 379 | + shownDatasets : { | ||
| 380 | + type : Array, | ||
| 381 | + value : undefined | ||
| 382 | + }, | ||
| 383 | + suggestedDatasets : { | ||
| 384 | + type : Array, | ||
| 385 | + value : undefined | ||
| 386 | + }, | ||
| 387 | + | ||
| 388 | + providers : { | ||
| 389 | + type : Array, | ||
| 390 | + value : undefined | ||
| 391 | + }, | ||
| 392 | + dataUrl : { | ||
| 393 | + type : String, | ||
| 394 | + value : undefined, | ||
| 395 | + observer : '_fireDataUrl' | ||
| 396 | + }, | ||
| 397 | + filter : { | ||
| 398 | + type : String, | ||
| 399 | + value : "", | ||
| 400 | + observer : '_filter' | ||
| 401 | + }, | ||
| 402 | + selected : { | ||
| 403 | + type : Number, | ||
| 404 | + value : 0 | ||
| 405 | + }, | ||
| 406 | + prev : {type : Number, value : undefined}, | ||
| 407 | + next : {type : Number, value : undefined}, | ||
| 408 | + shownPrev : {type : Number, value : undefined}, | ||
| 409 | + shownNext : {type : Number, value : undefined}, | ||
| 410 | + length : {type : Number, value : undefined}, | ||
| 411 | + tLength : {type : Number, computed : 'treemapLength(length)'}, | ||
| 412 | + step : {type : Number, value : 20}, | ||
| 413 | + colors : { | ||
| 414 | + type : Array, | ||
| 415 | + value : ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"] | ||
| 416 | + } | ||
| 417 | + }, | ||
| 418 | + | ||
| 419 | + listeners: { | ||
| 420 | + 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap' | ||
| 421 | + }, | ||
| 422 | + | ||
| 423 | + ready : function() { | ||
| 424 | + $(this.$.list_container).perfectScrollbar(); | ||
| 425 | + | ||
| 426 | +// this.$.selected_url.invalid = true; | ||
| 427 | + }, | ||
| 428 | + | ||
| 429 | + attached: function() { | ||
| 430 | + this._resize(); | ||
| 431 | + var that = this; | ||
| 432 | + window.addEventListener("resize", function() { that._resize(); that._loadTreeMap();}); | ||
| 433 | + | ||
| 434 | + this.providers = this.datasets["result"]["providers"]; | ||
| 435 | + this.datasets = this.datasets["result"]["datasets"]; | ||
| 436 | + | ||
| 437 | + if(this.suggestedDatasets) { | ||
| 438 | + this.tempDatasets = this.datasets; | ||
| 439 | + this.datasets = this.suggestedDatasets.concat(this.datasets); | ||
| 440 | + this.$.suggested_div.style.visibility = "visible"; | ||
| 441 | + } | ||
| 442 | + | ||
| 443 | + this.filteredDatasets = this.datasets; | ||
| 444 | + | ||
| 445 | + this.prev = 1; | ||
| 446 | + this.next = this.step; | ||
| 447 | + this.length = this.filteredDatasets.length; | ||
| 448 | + | ||
| 449 | + this.shownPrev = Math.min(this.prev, this.length); | ||
| 450 | + this.shownNext = Math.min(this.next, this.length); | ||
| 451 | + this.shownDatasets = this.filteredDatasets.slice(this.prev-1, this.next); | ||
| 452 | + | ||
| 453 | + this.$.list.scrollTarget = this.ownerDocument.documentElement; | ||
| 454 | + | ||
| 455 | + this._translate(); | ||
| 456 | + | ||
| 457 | + this._loadTreeMap(); | ||
| 458 | + }, | ||
| 459 | + | ||
| 460 | + _translate : function(){ | ||
| 461 | + this.$.listView.innerHTML = ln["listView_" + ln["localization"]]; | ||
| 462 | + this.$.treeMapView.innerHTML = ln["treeMapView_" + ln["localization"]]; | ||
| 463 | + | ||
| 464 | + this.$.ddl_provider.setAttribute("label", ln["provider_" + ln["localization"]]); | ||
| 465 | + this.$.datasets_filter.setAttribute("label", ln["search_" + ln["localization"]]); | ||
| 466 | + | ||
| 467 | + this.$.suggested_datasets.innerHTML = ln["suggestedDatasets_" + ln["localization"]]; | ||
| 468 | + | ||
| 469 | + this.$.showing.innerHTML = ln["showing_" + ln["localization"]]; | ||
| 470 | + this.$.showing2.innerHTML = ln["showing_" + ln["localization"]]; | ||
| 471 | + this.$.to.innerHTML = ln["to_" + ln["localization"]]; | ||
| 472 | + this.$.of.innerHTML = ln["of_" + ln["localization"]]; | ||
| 473 | + this.$.datasets.innerHTML = ln["datasets_" + ln["localization"]]; | ||
| 474 | + this.$.datasets2.innerHTML = ln["datasets_" + ln["localization"]]; | ||
| 475 | + | ||
| 476 | + this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]); | ||
| 477 | + this.errorMessage = ln["wrongUrl_" + ln["localization"]]; | ||
| 478 | + }, | ||
| 479 | + | ||
| 480 | + showSuggested : function(e) { | ||
| 481 | + if(e.target.checked) | ||
| 482 | + this.datasets = this.suggestedDatasets.concat(this.tempDatasets); | ||
| 483 | + else | ||
| 484 | + this.datasets = this.tempDatasets; | ||
| 485 | + this._filter(); | ||
| 486 | + }, | ||
| 487 | + | ||
| 488 | + _loadTreeMap : function(){ | ||
| 489 | + var h = $("#neon_container").height() - 48; | ||
| 490 | + var w = $("#neon_container").width(); | ||
| 491 | + | ||
| 492 | + var data = JSON.stringify({result : {providers: this.providers, datasets: this.filteredDatasets}}).replace(/'/g, ""); | ||
| 493 | + | ||
| 494 | + if(this.filteredDatasets.length > 0) | ||
| 495 | + this.$.treemap_container.innerHTML = "<datasetexplorer-datalet data='"+data+"' width=\""+w+"\" height=\""+h+"\" fields='[\"result,datasets,provider_name\",\"result,datasets,organization_name\",\"result,datasets,package_name\",\"result,datasets,resource_name\",\"result,datasets,url\",\"result,datasets,w\",\"result,datasets,metas\"]'></datasetexplorer-datalet>"; | ||
| 496 | + else | ||
| 497 | + this.$.treemap_container.innerHTML = ""; | ||
| 498 | + }, | ||
| 499 | + | ||
| 500 | + _filter : function() { | ||
| 501 | + if(this.filteredDatasets) { | ||
| 502 | + this.async(function () { | ||
| 503 | + var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem; | ||
| 504 | + var name = ddl_provider.innerHTML.trim(); | ||
| 505 | + var id = this._getIdByProviderName(name); | ||
| 506 | + this.prev = 1; | ||
| 507 | + this.next = this.step; | ||
| 508 | + if (id) { | ||
| 509 | + //filtered by provider name | ||
| 510 | + this.filteredDatasets = this.datasets.filter(function (el) { | ||
| 511 | + return el.provider_name == "p:" + id; | ||
| 512 | + }); | ||
| 513 | + } | ||
| 514 | + else { | ||
| 515 | + this.filteredDatasets = this.datasets; | ||
| 516 | + } | ||
| 517 | + | ||
| 518 | + //filtered by filter | ||
| 519 | + var filter = this.filter; | ||
| 520 | + this.filteredDatasets = this.filteredDatasets.filter(function (el) { | ||
| 521 | + return el.resource_name.toLowerCase().indexOf(filter.toLowerCase()) > -1; | ||
| 522 | + }); | ||
| 523 | + | ||
| 524 | + this.length = this.filteredDatasets.length; | ||
| 525 | + | ||
| 526 | + this.shownPrev = Math.min(this.prev, this.length); | ||
| 527 | + this.shownNext = Math.min(this.next, this.length); | ||
| 528 | + this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next); | ||
| 529 | + | ||
| 530 | + $("#list_container").animate({scrollTop: 0}, 0); | ||
| 531 | + | ||
| 532 | + this._loadTreeMap(); | ||
| 533 | + }, 0); | ||
| 534 | + } | ||
| 535 | + }, | ||
| 536 | + | ||
| 537 | + _refreshList : function() { | ||
| 538 | + this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next); | ||
| 539 | + this.$.header.className = this.$.header.className.replace(" noshadow", ""); | ||
| 540 | + }, | ||
| 541 | + | ||
| 542 | + _noShadow : function() { | ||
| 543 | + console.log(this.$.header); | ||
| 544 | + this.$.header.className += " noshadow"; | ||
| 545 | + }, | ||
| 546 | + | ||
| 547 | + _clearInput : function() { | ||
| 548 | + this.$.datasets_filter.value = ""; | ||
| 549 | + }, | ||
| 550 | + | ||
| 551 | + _getIdByProviderName : function(name) { | ||
| 552 | + for(var id in this.providers) { | ||
| 553 | + if (this.providers[id].title == name) | ||
| 554 | + return this.providers[id].id; | ||
| 555 | + } | ||
| 556 | + }, | ||
| 557 | + | ||
| 558 | +// iconForItem: function(item) { | ||
| 559 | +// return item ? (item.integer < 50 ? 'star-border' : 'info-outline') : ''; | ||
| 560 | +// }, | ||
| 561 | + | ||
| 562 | + treemapLength : function(length) { | ||
| 563 | + var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem; | ||
| 564 | + var name = ddl_provider.innerHTML.trim(); | ||
| 565 | + var id = this._getIdByProviderName(name); | ||
| 566 | + | ||
| 567 | + if(this.suggestedDatasets && !id) | ||
| 568 | + return Math.max(length - this.suggestedDatasets.length, 0); | ||
| 569 | + return length; | ||
| 570 | + }, | ||
| 571 | + | ||
| 572 | + _getColorForIcon : function(item) { | ||
| 573 | + var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem; | ||
| 574 | + var name = ddl_provider.innerHTML.trim(); | ||
| 575 | + var id = this._getIdByProviderName(name); | ||
| 576 | + if (id) { | ||
| 577 | + return this.colors[0]; | ||
| 578 | + } | ||
| 579 | + if(!item.provider_name) { | ||
| 580 | + return "#00BCD4"; | ||
| 581 | + } | ||
| 582 | + var id = item.provider_name.substring(2, item.provider_name.length); | ||
| 583 | + var i = this.getProviderById(id) % this.colors.length; | ||
| 584 | + return this.colors[i]; | ||
| 585 | + }, | ||
| 586 | + | ||
| 587 | + _getColorForItem : function(item) { | ||
| 588 | +// var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem; | ||
| 589 | +// var name = ddl_provider.innerHTML.trim(); | ||
| 590 | +// var id = this._getIdByProviderName(name); | ||
| 591 | +// if (id) { | ||
| 592 | +// return this.colors[0]; | ||
| 593 | +// } | ||
| 594 | + if(!item.provider_name) { | ||
| 595 | + return "#FFEB3B"; | ||
| 596 | + } | ||
| 597 | +// var id = item.provider_name.substring(2, item.provider_name.length); | ||
| 598 | +// var i = this.getProviderById(id) % this.colors.length; | ||
| 599 | +// return this.colors[i]; | ||
| 600 | + }, | ||
| 601 | + | ||
| 602 | + _getIconForItem : function(item) { | ||
| 603 | + return item.provider_name ? 'bookmark' : 'star'; | ||
| 604 | + }, | ||
| 605 | + | ||
| 606 | +// _getProviderColor: function(id) { | ||
| 607 | +// var i = this.getProviderById(id) % this.colors.length; | ||
| 608 | +// return this.colors[i]; | ||
| 609 | +// }, | ||
| 610 | + | ||
| 611 | + getClassForItem: function(selected) { | ||
| 612 | + return selected ? 'item expanded' : 'item'; | ||
| 613 | + }, | ||
| 614 | + | ||
| 615 | + getProviderById: function(providerId) { | ||
| 616 | + var i = 0; | ||
| 617 | + for(var id in this.providers){ | ||
| 618 | + if(this.providers[id].id == providerId) | ||
| 619 | + return i; | ||
| 620 | + i++; | ||
| 621 | + } | ||
| 622 | + }, | ||
| 623 | + | ||
| 624 | + _onPrevClick : function(){ | ||
| 625 | + if(this.prev != 1) { | ||
| 626 | + this.prev -= this.step; | ||
| 627 | + this.next -= this.step; | ||
| 628 | + | ||
| 629 | + this.shownPrev = Math.min(this.prev, this.length); | ||
| 630 | + this.shownNext = Math.min(this.next, this.length); | ||
| 631 | + this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next); | ||
| 632 | + } | ||
| 633 | + $("#list_container").animate({ scrollTop: 0}, 0); | ||
| 634 | + }, | ||
| 635 | + | ||
| 636 | + _onNextClick : function(){ | ||
| 637 | + if(this.next < this.length) { | ||
| 638 | + this.prev += this.step; | ||
| 639 | + this.next += this.step; | ||
| 640 | + | ||
| 641 | + this.shownPrev = Math.min(this.prev, this.length); | ||
| 642 | + this.shownNext = Math.min(this.next, this.length); | ||
| 643 | + this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next); | ||
| 644 | + } | ||
| 645 | + $("#list_container").animate({ scrollTop: 0}, 0); | ||
| 646 | + }, | ||
| 647 | + | ||
| 648 | + _stringToArray: function(obj) { | ||
| 649 | + obj = JSON.parse(obj); | ||
| 650 | + return Object.keys(obj).map(function(key) { | ||
| 651 | + return { | ||
| 652 | + name: key, | ||
| 653 | + value: obj[key] | ||
| 654 | + }; | ||
| 655 | + }); | ||
| 656 | + }, | ||
| 657 | + | ||
| 658 | + _toArray: function(obj) { | ||
| 659 | + return Object.keys(obj).map(function(key) { | ||
| 660 | + return { | ||
| 661 | + name: key, | ||
| 662 | + value: obj[key] | ||
| 663 | + }; | ||
| 664 | + }); | ||
| 665 | + }, | ||
| 666 | + | ||
| 667 | + _selectDataUrl : function(){ | ||
| 668 | + this.async(function () { | ||
| 669 | + if(this.$.list.selectedItem) { | ||
| 670 | + var url = this.$.list.selectedItem.url; | ||
| 671 | + | ||
| 672 | + // Check if CKAN | ||
| 673 | + var strDatasetPos = url.indexOf('/dataset/'); | ||
| 674 | + var strResourcePos = (strDatasetPos >= 0) ? url.indexOf('/resource/') : -1; | ||
| 675 | + if (strDatasetPos >= 0 && strResourcePos > strDatasetPos) { | ||
| 676 | + var urlSegment1 = url.substring(0, strDatasetPos); | ||
| 677 | + var urlResourceEnd = url.indexOf('/', strResourcePos + 10); | ||
| 678 | + var resourceId = url.substring(strResourcePos + 10, urlResourceEnd); | ||
| 679 | + url = urlSegment1 + "/api/action/datastore_search?resource_id=" + resourceId; | ||
| 680 | + } | ||
| 681 | + | ||
| 682 | + // Check if OPENDATASOFT | ||
| 683 | + var strExploreDatasetPos = url.indexOf('/explore/dataset/'); | ||
| 684 | + if (strExploreDatasetPos >= 0) { | ||
| 685 | + var urlSegment1 = url.substring(0, strExploreDatasetPos); | ||
| 686 | + var datasetEnd = url.indexOf(strExploreDatasetPos + 17, '/'); | ||
| 687 | + var datasetId = url.substring(strExploreDatasetPos + 17, datasetEnd >= 0 ? datasetEnd : url.length); | ||
| 688 | + url = urlSegment1 + '/api/records/1.0/search?dataset=' + datasetId; | ||
| 689 | + } | ||
| 690 | + | ||
| 691 | + this.dataUrl = this._addlimitUrl(url); | ||
| 692 | + } | ||
| 693 | + else { | ||
| 694 | + this.dataUrl = ""; | ||
| 695 | + } | ||
| 696 | + }, 0); | ||
| 697 | + }, | ||
| 698 | + | ||
| 699 | + _selectDataUrl_treeMap : function(e) { | ||
| 700 | + this.dataUrl = this._addlimitUrl(e.detail.url); | ||
| 701 | + }, | ||
| 702 | + | ||
| 703 | + _fireDataUrl : function(){ | ||
| 704 | + this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl}); | ||
| 705 | + }, | ||
| 706 | + | ||
| 707 | + _addlimitUrl : function(url){ | ||
| 708 | + //CKAN --> action no limit | ||
| 709 | + if((url.indexOf("api/action") > -1) && !(url.indexOf("limit") > -1)) | ||
| 710 | + { | ||
| 711 | + url += "&limit=99999"; | ||
| 712 | + } | ||
| 713 | + //OpenDataSoft --> action no limit | ||
| 714 | + if((url.indexOf("api/records") > -1) && !(url.indexOf("rows") > -1)){ | ||
| 715 | + url += "&rows=10000"; | ||
| 716 | + } | ||
| 717 | + return url; | ||
| 718 | + }, | ||
| 719 | + | ||
| 720 | + _resize : function(){ | ||
| 721 | + var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16; | ||
| 722 | + h = h - 64 - 8; //height with page scroller | ||
| 723 | + $("#select_dataset_container").height(h); | ||
| 724 | + } | ||
| 725 | + }); | ||
| 726 | + }); | ||
| 727 | + </script> | ||
| 728 | +</dom-module> | ||
| 0 | \ No newline at end of file | 729 | \ No newline at end of file |