SGH / COMPONENTS

<!--
@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/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/paper-toast/paper-toast.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">
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <style is="custom-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-dialog {
                position: fixed;
                top: 16px;
                right: 16px;
                width: 400px;
                height: 400px;
            }*/

            html /deep/ paper-dialog { /*::shadow #datalet_dialog_content*/
                /*position: fixed;
                top: 25%;
                left: 25%;
                bottom: 25%;
                right: 25%;
                margin: 0px;*/
                width: 90%;
                height: 95%;
            }

            /*Toggle style*/
            input.toggle {
                max-height: 0;
                max-width: 0;
                opacity: 0;
            }
            input.toggle + label {
                display: block;
                position: relative;
                box-shadow: inset 0 0 0px 1px #d5d5d5;
                text-indent: -5000px;
                height: 30px;
                width: 50px;
                border-radius: 15px;
            }

            input.toggle + label:before {
                content: "";
                position: absolute;
                display: block;
                height: 30px;
                width: 30px;
                top: 0;
                left: 0;
                border-radius: 15px;
                background: rgba(19, 191, 17, 0);
                -moz-transition: .25s ease-in-out;
                -webkit-transition: .25s ease-in-out;
                transition: .25s ease-in-out;
            }

            input.toggle + label:after {
                content: "";
                position: absolute;
                display: block;
                height: 30px;
                width: 30px;
                top: 0;
                left: 0px;
                border-radius: 15px;
                background: white;
                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .2);
                -moz-transition: .25s ease-in-out;
                -webkit-transition: .25s ease-in-out;
                transition: .25s ease-in-out;
            }
            input.toggle:checked + label:before {
                width: 50px;
                background: rgba(19, 191, 17, 1);
            }

            input.toggle:checked + label:after {
                left: 20px;
                box-shadow: inset 0 0 0 1px rgba(19, 191, 17, 1), 0 2px 4px rgba(0, 0, 0, .2);
            }

            /deep/ #fields_order_placeholder { list-style-type: none; margin: 0; padding: 0; width: 60%; }
            /deep/ #fields_order_placeholder li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
            /deep/ html>body #fields_order_placeholder li { height: 1.5em; line-height: 1.2em; }
            /deep/ .ui-state-highlight { height: 1.5em; line-height: 1.2em; }

        </style>

        <iron-ajax
                auto
                id="data_request"
                url={{dataUrl}}
                handle-as="json"
                verbose="true"
                on-response="handleResponseData"
                debounce-duration="300">
        </iron-ajax>

        <iron-ajax
                id="datales_list_request"
                auto
                url={{dataletsListUrl}}
                handle-as="json"
                on-response="handleResponseDatalets"
                debounce-duration="300">
        </iron-ajax>

        <div id="modals">
        </div>

        <paper-dialog id="datalet_dialog" modal="true" transition="core-transition-center" closeAttribute="close">
           <h2>Datalets preview</h2>
           <paper-dialog-scrollable id="datalet_dialog_content">
           </paper-dialog-scrollable>
           <div class="buttons">
              <paper-button dialog-dismiss>Close</paper-button>
           </div>
        </paper-dialog>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Data source</h3>
            </div>
            <div class="panel-body">
                <section>
                    <paper-input id="data_url" label="CKAN api data url" floatingLabel value="{{dataUrl}}"></paper-input>
                </section>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Selection data fileds to visualize</h3>
            </div>
            <div class="panel-body">
                <section>
                    <div class="horizontal center-justified layout">
                        <div id="fields_placeholder" class="horizontal-section">
                        </div>
                    </div>
                </section>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Selection fileds order</h3>
            </div>
            <div class="panel-body">
                <section>
                    <div class="horizontal center-justified layout">
                        <ul id="fields_order_placeholder">
                        </ul>
                    </div>
                </section>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Visualization tools selection</h3>
            </div>
            <div class="panel-body">
                <div id="datalets_menu" class="layout">
                    <label for="datalets_selector">Available Datalets list:</label>
                    <select class="form-control" id="datalets_selector">
                    </select>
                </div>
            </div>
        </div>

        <section>
            <paper-button on-click="goto" raised>Go to visualization</paper-button>
        </section>
        <paper-toast id="message" text=""></paper-toast>
        <content></content>
    </template>

    <script src="../shared_js/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
    <script src="../shared_js/bootstrap-toggle-master/js/bootstrap-toggle.min.js"></script>
    <script src="../shared_js/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>

    <script src="../../../DEEPCLIENT/js/deepClient.js"></script>

    <script>

        DataletSelectionControllet = Polymer({
            is: 'datalet-selection-controllet',
            listeners: {
                'tap' : 'clickHandler'
            },
            hostAttributes: {
                dataUrl: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",
                deepUrl: "http://service.routetopa.eu/WebComponentsDEV/DEEP/",
                dataletsListUrl: "http://service.routetopa.eu/WebComponentsDEV/DEEP/datalets-list"
            },
            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: '_dataUrlChanged'
                },
                /**
                 * It represent the DEEP url to get information about the datalets
                 *
                 * @attribute deepUrl
                 * @type string
                 * @default 'null'
                 */
                deepUrl: {
                    type: String,
                    value: "http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50"
                },
                /**
                 * 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_order:{
                   type: String,
                   value: []
                },
                fieldsMap: {
                    type: Map,
                    value: null
                },
                datalet_query:{
                    type: String,
                    value: ""
                }
            },
            /**
             * data-url member changed watcher. It's called when dataUrl changes its value
             *
             * @method dataUrlChanged
             */
            _dataUrlChanged: function(newValue, oldValue){
                this.$.data_request.generateRequest();
            },
            createFieldsContainer: function(id, heading){
                var panelDefault       = document.createElement('div');
                panelDefault.className = 'panel panel-default';
                var panelHeading       = document. createElement('div');
                panelHeading.className = 'panel-heading';
                panelHeading.innerHTML = heading;
                var panelBody          = document. createElement('div');
                panelBody.className    = 'panel-body';
                panelBody.id           = id;
                var fieldPanel         = document.createElement('div');
                fieldPanel.className   = 'panel-body';

                panelBody.appendChild(fieldPanel);
                panelDefault.appendChild(panelHeading);
                panelDefault.appendChild(panelBody);

                return panelDefault;
            },
            createCustomStyledToggle: function(id, label){
                return '<div class="wrapper">'
                       + '<input id="'+ id +'" type="checkbox" class="toggle">'
                       + '<label for="'+ id +'">'+ label +'</label>'
                       + label
                       + '</div>';

            },
            /**
             * Callback to parse the data requested when dataUrl change its value
             *
             * @method handleResponseData
             */
            handleResponseData: function(e){
                //crete root node and insert it in to shadow dom
                var mainPanel = this.createFieldsContainer("root", "Data fields");
                this.$.fields_placeholder.innerHTML = "";
                this.$.fields_placeholder.appendChild(mainPanel);
                this.fieldsMap = new Map;
                this.fieldsMap["root"] = mainPanel;
                //call recursive analyze function for current json to get all fields user can select
                this.analyzeObject(new Array("root"), null, e.detail.response);
            },
            analyzeObject: function(parent_list, curr_field, object) {
                if(curr_field != null){
                    if(object == null) object = "";

                    if(object.constructor == Array){//Deal with flat array case
                        if(object[0].constructor != Object){
                            this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.createCustomStyledToggle(parent_list.toString(), curr_field);
                            return;
                        }
                    }
                    if(object.constructor == Array || object.constructor == Object){
                        var panel = this.createFieldsContainer(curr_field, parent_list[parent_list.length - 1]);
                        this.fieldsMap[curr_field] = panel;
                        this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].appendChild(this.fieldsMap[curr_field]);
                    }else{
                        //CUSTOM STYLED TOGGLE
                        this.fieldsMap[parent_list[parent_list.length - 2]].childNodes[1].childNodes[0].innerHTML += this.createCustomStyledToggle(parent_list.toString(), curr_field);
                    }
                }
                if(object.constructor == Array || object.constructor == Object) {
                    var obj = (object.constructor == Array) ? object[0] : object;
                    if(Object.prototype.toString.call(obj) === '[object String]') return;//Deal with flat array case
                    for (var field in obj) {
                        var parents = new Array();
                        parent_list.every(function (element, index, array) {
                            parents.push(element);
                            return true;
                        });
                        parents.push(field);
                        this.analyzeObject(parents, field, obj[field]);
                    }
                }
            },
            /**
             * Callback to parse the components response object
             *
             * @method handleResponseComponents
             */
            handleResponseDatalets: function(e){
                html = "";
                for(var i=0;i < e.detail.response.length;i++){
                    html += '<option value="' + e.detail.response[i] + '"' + ((i==0) ? ' selected>' : '>') + e.detail.response[i] + '</option>';
                }
                $(this.$.datalets_selector).append(html);
            },
            /**
             * Callback called when "Go to visualization" button is pressed
             *
             * @method handleResponseComponents
             */
            goto: function(){
                var fields = Polymer.dom(this.$.fields_order_placeholder).querySelectorAll('li');
                this.fields_order = "";
                for(var i=0;i<fields.length;i++){
                    this.fields_order += fields[i].id + ",";
                }
                this.fields_order = this.fields_order.substring(0, this.fields_order.length - 1);


                var cbs = Polymer.dom(this.$.fields_placeholder).querySelectorAll('input[type=checkbox]:checked');
                this.datalet_query = "";

                if(cbs.length == 0){
                    this.$.message.text = "No fields selected.";
                    this.$.message.show();
                    return;
                }

                var fields = Array();
                for(var i=0;i<cbs.length;i++){
                    fields.push(cbs[i].id.replace("root,", ""));
                }

                var datalet_params ={
                    component   : this.$.datalets_selector.options[this.$.datalets_selector.selectedIndex].text,
                    params      :{
                        'data-url' : this.dataUrl,
                        'fields-order' : this.fields_order
                    },
                    fields      : fields,
                    placeHolder : this.$.datalet_dialog_content
                };
                ComponentService.deep_url = this.deepUrl;
                ComponentService.getComponent(datalet_params);

                document.getElementById("datalet_dialog").open();
            },
            clickHandler : function(e){
               if(!e.target.control) {
                   if (e.target.className == 'toggle') {
                       (this.$.fields_order_placeholder).innerHTML = "";
                       var cbs = Polymer.dom(this.$.fields_placeholder).querySelectorAll('input[type=checkbox]:checked');
                       for(var i=0;i<cbs.length;i++) {
                           var fields = cbs[i].id.split(',');
                           var ele = document.createElement('li');
                           ele.className = "ui-state-default";
                           ele.id        = i;
                           ele.innerHTML = fields[fields.length -1];
                           (this.$.fields_order_placeholder).appendChild(ele);
                       }
                   }
               }
            },
            ready: function(){
                $(this.$.fields_order_placeholder).sortable({
                    placeholder: "ui-state-highlight"
                });
                $(this.$.fields_order_placeholder).disableSelection();
            }
        });
    </script>
</dom-module>