Blame view

controllets/datalet-selection-controllet/datalet-selection-controllet_2.html 3.6 KB
73bcce88   luigser   COMPONENTS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
  <!--

  @group ROUTETOPA Polymer Core Elements

  

  The `select-visualization-form-controllet` is a slider container of elements.

  Pass to this component an array of components, a data url(CKAN api uri) and a string with one or multiple query in JsonPath format(separated by spaces) and it'll show a

  slider with all components initialized with data and query attributes

  

  ### Code

  

  Example

  

  @class select-visualization-form-controllet

  

  -->

  <link rel="import" href="../../bower_components/polymer/polymer.html">

  <!--<link rel="import" href="../../bower_components/iron-ajax/iron-request.html">

  <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->

  

  <dom-module id="datalet-selection-controllet">

      <template>

          <!--<link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.paper.style.min.css">

          <link rel="stylesheet" href="../shared_js/bootstrap-toggle-master/css/bootstrap-toggle.min.css">-->

          <style>

              body {

                  font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;

                  font-size: 14px;

                  margin: 0;

                  padding: 24px;

                  -webkit-tap-highlight-color: rgba(0,0,0,0);

                  -webkit-touch-callout: none;

              }

  

              paper-input {

                  width: 80%;

              }

  

              paper-checkbox {

                  display: block;

                  margin-bottom: 40px;

              }

  

          </style>

  

          <!--<iron-ajax

                  auto

                  id="data_request"

                  url={{dataUrl}}

                  handle-as="json"

                  verbose="true"

                  on-response="this.handleResponseData"

                  debounce-duration="300">

          </iron-ajax>

  

          <iron-ajax

                  auto

                  url="http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list"

                  handle-as="json"

                  on-response="handleResponseDatalets"

                  debounce-duration="300">

          </iron-ajax>

  

          <iron-request id="xhr"></iron-request>-->

      </template>

  

      <script>

  

          DataletSelectionControllet = Polymer({

              is: 'datalet-selection-controllet',

              properties: {

                  /**

                   * It represent the data url from CKAN api

                   *

                   * @attribute dataUrl

                   * @type string

                   * @default 'null'

                   */

                  dataUrl: {

                      type: String,

                      value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",

                      observer: '_data_urlChanged'

                  },

                  /**

                   * It stores all tools available in WebComponent server

                   *

                   * @attribute tools

                   * @type array

                   * @default 'null'

                   */

                  tools:{

                     type: Array,

                     value: []

                  },

                  /**

                   * It stores all fields related to data retrieved from CKAN api url

                   *

                   * @attribute fields

                   * @type array

                   * @default 'null'

                   */

                  fields:{

                     type: Array,

                     value: []

                  },

                  fieldsMap: {

                      type: Map,

                      value: null

                  }

              }

          });

      </script>

  </dom-module>