controllets/data-sevc-controllet/data-sevc-controllet.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
            <link rel="import" href="../../bower_components/paper-styles/color.html">

            <link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
            <link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
            <link rel="import" href="../../bower_components/neon-animation/neon-animations.html">

            <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
            <link rel="import" href="../../bower_components/paper-input/paper-input.html">
            <link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
            <link rel="import" href="../../bower_components/paper-button/paper-button.html">
            <link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
            <link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
            <link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
            <link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
            <link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
            <link rel="import" href="../../bower_components/paper-item/paper-item.html">
            <link rel="import" href="../../bower_components/paper-toast/paper-toast.html">


            <link rel="import" href="../items-slider-controllet/items-slider-controllet.html">
            <link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html">
            <link rel="import" href="../treeview-controllet/treeview-controllet.html">


            <dom-module id="data-sevc-controllet">
            <template>
             <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
            <link rel="stylesheet" href="static/css/reset.css">

            <style is="custom-style">

            ::content body {
                font-family: 'Roboto', sans-serif;
            }

            .flexchild
            {
            @apply(--layout-flex);
            }

            .flex2child
            {
            @apply(--layout-flex-2);
            }

            .avatar
            {
                display: inline-block;
                height: 2em;
                width: 2em;
                border-radius: 50%;
                background: var(--paper-blue-500);
                color: white;
                line-height: 2em;
                font-size: 1.87em;
                text-align: center;
            }

            .title
            {
                position: relative;
                top: 0.60vh;
                margin-left: 20px;
            }

            .big
            {
                font-size: 1.37em;
                color: var(--google-grey-500);
            }

            .medium
            {
                font-size: 1em;
                padding-bottom: 0.5em;
                color : #000000;
                font-weight: bold;
            }

            .small
            {
                font-size: 0.8em;
                padding-top: 10px;
                color: var(--paper-blue-500);
                font-weight: bold;
            }

            paper-input
            {
                width: 80%;
            }

            paper-dropdown-menu
            {
                text-align: left;
                margin: auto;
                width: 100%;
            }

            ::content paper-menu-button
            {
                display: block;
                width: 100%;
            }

            #visualization_slider_area
            {
                min-width: 670px;
                min-height: 180px;
            }

            #fields_mapping_area
            {
                min-width: 670px;
                min-height: 180px;
            }

            #datalet_placeholder
            {
                height: 360px;
                min-height: 360px;

            }

            .datalet_right_container
            {
                width: 100vh;
            }

            .field-mapping-card
            {
                width: 50%;
                float: left;
            }

            .toolbar_button
            {
                --iron-icon-height: 32px;
                --iron-icon-width: 32px;
            }

            #finish_button
            {
                --iron-icon-height: 32px;
                --iron-icon-width: 32px;
                color: var(--paper-blue-500);
            }

            .area_container
            {
                overflow: hidden;
                margin : 0.8em;
                padding : 0.8em;
                border-width: 1em;
                border-radius: 0.125rem;
                box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25);
            }

            #fields_placeholder{
                width: 40%;
                height: 75vh;
                position: relative;
                float: left;
                overflow: auto;
            }

            #table_fields_container{
                height: 75vh;
                width: 55%;
                position: relative;
                float: left;
                overflow: auto;
            }

            paper-tabs, paper-toolbar
            {
                background-color:  var(--paper-blue-500);
                color: #ffffff;
                box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
            }

            paper-toolbar paper-tabs
            {
                box-shadow: none;
                --paper-tabs-selection-bar-color : var(--google-gray-500);
            }

            paper-tabs[noink][no-bar] paper-tab.iron-selected
            {
                background-color: var(--google-gray-500);
            }

            paper-tabs[align-bottom]
            {
                box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);
            }

            #idm_fields_main_container{
                position: relative;
                height: 50vh;
            }

            #selected_fields_main_container{
                position: relative;
                height: 50vh;
            }

            paper-menu{
                width: 100%;
            }

        </style>

        <iron-ajax
                auto
                id="data_request"
                url={{dataUrl}}
                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>

        <iron-ajax
                id="selected_datalet_request"
                url={{deepUrl}}
                verbose="true"
                on-response="handleSelectedDatalet"
                debounce-duration="300">
        </iron-ajax>

        <content>

            <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">

                <neon-animatable>

                    <div class="vertical justified layout">

                        <div class="horizontal layout">
                            <div class="avatar" style="margin-left:15px">1</div>
                            <div class="title flex">
                                <div id="toolbar_title" class="big">Dataset source</div>
                                <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
                            </div>
                            <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
                        </div>

                        <div class="area_container">
                            <paper-tabs selected="{{DatasourceTabSelected}}">
                                <paper-tab>Select data source</paper-tab>
                                <paper-tab>Most popular</paper-tab>
                                <paper-tab>Search</paper-tab>
                            </paper-tabs>
                            <iron-pages selected="{{DatasourceTabSelected}}">
                                <div>
                                    <div class="card-content">
                                        <paper-dropdown-menu id="datasets-sources" label="Available datasets">
                                            <paper-menu class="dropdown-content">
                                                <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index">
                                                    <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset}}</paper-item>
                                                </template>
                                            </paper-menu>
                                        </paper-dropdown-menu>
                                    </div>

                                    <div><img src="static/images/or.png" style="position: relative;left: 50%;padding-top:20px"></div>

                                    <div class="card-content">
                                        <paper-textarea id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea>
                                    </div>


                                </div>
                                <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
                                <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div>
                            </iron-pages>
                        </div>

                    </div>

                </neon-animatable>

                <neon-animatable>

                    <div class="vertical justified layout">

                        <div class="horizontal layout">
                            <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>
                            <div class="avatar">2</div>
                            <div class="title flex">
                                <div id="toolbar_title" class="big">Dataset source</div>
                                <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div>
                            </div>
                            <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
                        </div>

                        <div class="horizontal layout">

                            <div id="fields_placeholder" class="area_container flexchild" style="min-width:300px">
                                <treeview-controllet id="fields_treeview"></treeview-controllet>
                            </div>

                            <div id="table_fields_container" class="area_container flex2child">
                                <div id="table_component_place_holder"></div>
                            </div>

                        </div>

                    </div>

                </neon-animatable>

                <neon-animatable style="height:100vh">

                    <div class="vertical justified layout">

                        <div class="horizontal layout">
                            <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>
                            <div class="avatar">3</div>
                            <div class="title flex">
                                <div id="toolbar_title" class="big">Data mapping</div>
                                <div id="toolbar_description" class="small">Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need</div>
                            </div>
                            <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button>
                        </div>


                        <div class="horizontal layout">

                            <div class="">
                                <div id="visualization_slider_area" class="area_container"></div>
                                <div id="fields_mapping_area" class="area_container">

                                    <div id="selected_fields_main_container" class="field-mapping-card">
                                        <div class="title">
                                            <div class="medium">Selected fields</div>
                                        </div>
                                        <div id="selected_fields_container" class="area_container"></div>
                                    </div>

                                    <div id="idm_fields_main_container" class="field-mapping-card">
                                        <div class="title">
                                            <div class="medium">Datalet fields</div>
                                        </div>
                                        <div id="datalet_idm_fields_container" class="area_container"></div>
                                    </div>
                                </div>
                            </div>

                            <div id="datalet_placeholder" style="min-width: 43%;"></div>


                        </div>

                    </div>

                </neon-animatable>

            </neon-animated-pages>

            <paper-toast id="message" text=""></paper-toast>

        </content>
    </template>

    <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
    <script src="../../../DEEPCLIENT/js/deepClient.js"></script>

    <script>

        var datasetsPrato = {
            names:[
                'Consuntivo entrate 2009',
                'Consuntivo entrate 2010',
                'Consuntivo entrate 2011',
                'Consuntivo entrate 2012',
                'Consuntivo entrate 2014'
            ],
            urls: [
                'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f&limit=10000',
                'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda&limit=10000',
                'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89&limit=10000',
                'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee&limit=10000',
                'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a&limit=10000'
            ]
        }

        var datasetsGroeningen = {
            names:[
                'Vestigingen register gemeente Groningen',
                'Woonruimte gemeente Groningen'
            ],
            urls: [
                'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd&limit=10000',
                'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f&limit=10000'
            ]
        }

        var datasetsDublin = {
            names:[
                'SDCC Traffic Cameras',
                'Derelict Site Register',
                'Dublin City Council Commencement Notices',
                'Dublin City Council Planning Applications',
                'Dun Laoghaire-Rathdown County Council Planning Application 2008-2014',
                'Fingal Council Planning Applications for last 7 years',
                'Planning Register',
                'Fingal Development Plan 2011-2017 Record of Protected Structures'
            ],
            urls: [
                'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=10000',
                'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc&limit=10000',
                'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075&limit=10000',
                'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e&limit=10000',
                'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff&limit=10000',
                'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441&limit=10000',
                'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d&limit=10000',
                'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6&limit=10000',
            ]
        }

        var AvailableDatasets = [datasetsPrato, datasetsGroeningen, datasetsDublin]


        Polymer({

            is : 'data-sevc-controllet',

            listeners : {
                'items-slider-controllet_item-selected' : '_dataletSelected',
                'draggable-element-controllet_content-dragged' : '_fieldsMapped',
                'treeview-controllet-fileds-selected' : '_fieldsSelected'
            },

            properties : {

                entryAnimation : {
                    type  : String,
                    value : ""
                },

                exitAnimation  : {
                    type  : String,
                    value : ""
                },

                selected       : {
                    type  : Number,
                    value : 0
                },

                /**
                 * 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 : ""
                },

                organization : {
                    type : Number,
                    value : 2
                },

                datalet_query : {
                    type : String,
                    value : ""
                },

                datalets_list : {
                    type : Array ,
                    value : []
                },

                selected_datalet : {
                    type : String,
                    value : ""
                },

                selected_fields : {
                    type : Array,
                    value : []
                },

                DatasourceTabSelected : {
                    type : Number,
                    value : 0
                },

                datasets :
                {
                    type : Array,
                    value : AvailableDatasets[0].names
                },

                datasets_urls :
                {
                    type : Array,
                    value :AvailableDatasets[0].urls
                }

            },

            ready : function(){

                this.datasets = AvailableDatasets[this.organization].names;
                this.datasets_urls = AvailableDatasets[this.organization].urls;

                $(this.$.fields_placeholder).perfectScrollbar();
                $(this.$.selected_fields_main_container).perfectScrollbar();
                $(this.$.idm_fields_main_container).perfectScrollbar();
                $(this.$.table_fields_container).perfectScrollbar();

            },

            /**
             * Callback to parse the data requested when dataUrl change its value
             *
             * @method handleResponseData
             */
            handleResponseData : function(e){

                this.$.fields_treeview.init(e.detail.response);

            },

            /**
             * Callback to parse the components response object
             *
             * @method handleResponseDatalets
             */
            handleResponseDatalets : function(e){
                this.datalets_list = new Array();
                for(var i=0;i < e.detail.response.length;i++){
                    var datalet_info = { name : e.detail.response[i].name ,
                                         image : e.detail.response[i].url + e.detail.response[i].name + ".png"
                    };

                    this.datalets_list.push(datalet_info);
                }

                this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' +
                                                             '\'></items-slider-controllet>';
            },

            handleSelectedDatalet : function(e){

               var response = e.detail.response;
               this.$.datalet_idm_fields_container.innerHTML = "";

               if(response.idm.inputs.input.constructor == Object) {
                   var input = response.idm.inputs.input;
                   if(input.selection == "*") {
                       var input_selected_fields = Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet');
                       for (var j = 0; j < input_selected_fields.length; j++) {
                           this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" heading="Field ' + (j + 1) + '"  description="' + input.description + '" number="' + (j + 1) + '"></draggable-element-controllet><br>';
                       }
                   }
               }else{
                   for(var i =0; i < response.idm.inputs.input.length; i++){
                       var input = response.idm.inputs.input[i];
                       this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" id="' + input.name + '" heading="' + input.name + '"  description="' + input.description + '" number="' + (i + 1) + '"></draggable-element-controllet><br>';
                   }
               }

            },

            validateCurrentPass : function(next_selected_pass){

                switch(next_selected_pass){
                    case 0:
                        return true;
                    case 1:
                        if(this.$.data_url.value == ""){
                            this.$.message.text = "You have to select a dataset to access to pass 2.";
                            this.$.message.show();
                            return false;
                        }else{
                            return true;
                        }

                    case 2:
                        if(Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet') == 0){
                            this.$.message.text = "You have to select a set of fields to access to pass 3.";
                            this.$.message.show();
                            return false;
                        }else{
                            return true;
                        }
                }

            },

            _onPrevClick : function() {
                if(!this.validateCurrentPass(this.selected === 0 ? 0 : (this.selected - 1))) return;

                this.entryAnimation = 'slide-from-left-animation';
                this.exitAnimation  = 'slide-right-animation';
                this.selected = this.selected === 0 ? 0 : (this.selected - 1);
            },

            _onNextClick : function() {

                if(!this.validateCurrentPass(this.selected === 2 ? 2 : (this.selected + 1))) return;

                this.entryAnimation = 'slide-from-right-animation';
                this.exitAnimation  = 'slide-left-animation';
                this.selected = this.selected === 2 ? 2 : (this.selected + 1);
            },

            _datasourceSelected : function(e){

               this.$.data_url.value = this.datasets_urls[parseInt(e.target.id)];
            },

            _dataUrlChanged : function(newValue, oldValue){
                this.$.data_request.generateRequest();
            },

            _dataletSelected : function(e){
                this.selected_datalet = e.detail.datalet;
                this.$.selected_datalet_request.url = this.deepUrl + e.detail.datalet;
                this.$.selected_datalet_request.generateRequest();

            },

            _fieldsSelected : function(e){

                 this.$.selected_fields_container.innerHTML = "";
                 for(var i=0;i<e.detail.fields.length;i++) {
                    this.$.selected_fields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] +
                                                                                                 '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] +
                                                                  '"></draggable-element-controllet><br>';
                 }

                 var place_holder = (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]];

                 var table_params ={
                     component   : "datatable-datalet",
                     params      :{
                        'data-url' : this.dataUrl
                     },
                     fields      : e.detail.fields,
                     placeHolder :  this.$.table_component_place_holder
                 };

                 ComponentService.deep_url = this.deepUrl;
                 ComponentService.getComponent(table_params);

            },

            _fieldsMapped : function(e){

                var input_mapped_fields = Polymer.dom(this.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]');
                this.selected_fields = Array();

                for (var i = 0; i < input_mapped_fields.length; i++) {
                    if (input_mapped_fields[i].value != "") {
                        this.selected_fields.push(input_mapped_fields[i].value);
                    }
                }

                var datalet_params ={
                    component   : this.selected_datalet,
                    params      :{
                        'data-url' : this.dataUrl
                    },
                    fields      : this.selected_fields,
                    placeHolder : this.$.datalet_placeholder
                };


                ComponentService.deep_url = this.deepUrl;
                ComponentService.getComponent(datalet_params);

            },

            _handleDatasourceDragOver : function(e){
                this.$.data_url.value = "";
            },

            _onFinish : function(e){

                if(this.selected_fields.length == 0 || this.selected_datalet == ""){
                    this.$.message.text = "You have to map the selected fields with datalets fields(by dragging) and select a datalet to export a new visualization.";
                    this.$.message.show();
                    return;
                }

                var data = {
                    dataUrl : this.dataUrl,
                    fields : this.selected_fields,
                    datalet : this.selected_datalet
                }

                this.fire('data-sevc-controllet.dataletCreated', {data : data});

            }

        });

    </script>

</dom-module>