controllets/datalet-selection-controllet/datalet-selection-controllet.html

<link rel="import" href="../../bower_components/polymer/polymer.html" />
<link rel="import" href="../../bower_components/paper-material/paper-material.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-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/paper-input/paper-textarea.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="../items-vslider-controllet/items-vslider-controllet.html" />
<script src="../../../DEEPCLIENT/js/deepClient.js"></script>
<dom-module id="datalet-selection-controllet">
    <template>
        <style is="custom-style">
            :host {
            --paper-dropdown-menu-icon: {
                 color: #2196F3;
             };
            }
            #datalet_selection_container {
                display: flex;
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
                margin-top: 8px;
            }
            #datalet_selection_inputs {
                position: relative;
                height: 100vh;
                margin-left: 32px;
                /*width: 344px;*/
                min-width: 258px;
            }
            #datalet_selection_labels {
                position: relative;
                height: 100vh;
                margin-left: 32px;
                /*width: 344px;*/
                min-width: 258px;
            }
            #datalet_selection_column {
                position: relative;
                width: 100%;
                margin-left: 32px;
            }
            #datalet_selection_datalet {
                position: relative;
                height: 100vh;
                width: 100%;
                /*margin-left: 32px;*/
                /*margin-top: 32px;*/
                /*margin-bottom: 32px;*/
            }
            #datalet_selection_comment{
                width: 100%;
                /*height: 112px;*/
                margin-bottom: 32px;
            }
            #datalet_selection_datalet_placeholder {
                padding: 16px;
            }
            .inputs{
                position: relative;
                /*margin-left: 16px;*/
                /*margin-right: 16px;*/
            }
            /*.input_name{*/
                /*height: 16px;*/
                /*padding: 16px;*/
                /*/!*background-color: #B6B6B6;*!/*/
                /*background-color: #2196F3;*/
                /*color: #FFFFFF;*/
                /*font-weight: 700;*/
            /*}*/
            .input_header{
                height: 32px;
                padding-top: 16px;
                /*padding: 16px;*/
                background-color: #B6B6B6;
                text-align: center;
                font-weight: 700;
            }
            .info_button {
                /*background-color: red;*/
                position: absolute;
                top: 18px;
                right: 0px;
            }
            paper-input {
                display: inline-block;
                height: 48px;
                /*padding: 0px 8px;*/
                width: 210px;
                padding-left: 8px;
                padding-bottom: 8px;
                --paper-input-container-focus-color: #2196F3;
            }
            paper-input.base_input {
                width: 242px;
            }
            paper-textarea {
                /*height: 48px;*/
                /*padding: 0px 8px;*/
                width: 242px;
                padding-left: 8px;
                padding-bottom: 4px;
                --paper-input-container-focus-color: #2196F3;
            }
            #datalet_selection_comment paper-input {
                padding-bottom: 0px;
                width: calc(100% - 16px);
            }
            paper-dropdown-menu {
                /*display: inline-block;*/
                height: 48px;
                width: 210px;;
                /*padding: 0px 8px;*/
                padding-left: 8px;
                padding-bottom: 8px;
                --paper-input-container-focus-color: #2196F3;
            }
            paper-item.iron-selected {
                background-color: #2196F3;
                color: #FFFFFF;
            }
            paper-icon-button {
                /*display: inline-block;*/
                color: #2196F3;
                /*color: #FFFFFF;*/
                --paper-icon-button-ink-color: #2196F3;
                margin: 0px;
                /*padding: 0px;*/
            }
            paper-button {
                /*display: block;*/
                position: absolute;
                bottom: 16px;
                right: 11px;
                height: 48px;
                width: 172px;
                background-color: #00BCD4;
                color: white;
                font-weight: 700;
                padding: 16px;
            }
            paper-button:hover {
                background-color: #00AABF;
                box-shadow: 0px 8px 12px #888;
                -webkit-box-shadow: 0px 8px 12px #888;
                -moz-box-shadow: 0px 8px 12px #888;
            }
            paper-button[disabled] {
                background-color: #B6B6B6;
            }
            #dialog_info_input {
                border: 2px solid #2196F3;
                background-color: #E0E0E0;
                min-width: 248px;
            }
        </style>
        <iron-ajax id="selectedDatalet_request" on-response="_handleSelectedDatalet"></iron-ajax>
        <div id="datalet_selection_container">
            <items-vslider-controllet id="vslider" datalets-list-url={{dataletsListUrl}} preselected-datalet={{preselectedDatalet}}></items-vslider-controllet>
            <paper-material id="datalet_selection_inputs" elevation="5">
                <div class="input_header"><span data-l10n-id="inputs"></span></div>
                <template is="dom-repeat" items="{{inputs}}" index-as="ddl_index">
                    <div class="inputs">
                        <paper-dropdown-menu id={{ddl_index}} label={{item.name}}>
                            <paper-menu class="dropdown-content">
                                <template is="dom-repeat" items={{fields}}>
                                    <paper-item id={{index}} on-tap="_addInput">{{item}}</paper-item>
                                </template>
                            </paper-menu>
                        </paper-dropdown-menu>
                        <div class="info_button">
                            <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
                        </div>
                    </div>
                </template>
            </paper-material>
            <paper-material id="datalet_selection_labels" elevation="5">
                <div class="input_header"><span data-l10n-id="baseInfo"></span></div>
                <div class="inputs">
                    <paper-input maxlength="32" label="title" class="base_input"></paper-input>
                </div>
                <div class="inputs">
                    <paper-textarea maxlength="100" label="description" class="base_input"></paper-textarea>
                </div>
                <div class="input_header"><span data-l10n-id="layouts"></span></div>
                <template is="dom-repeat" items="{{labels}}" index-as="index">
                    <div class="inputs">
                        <paper-input label={{item.name}}></paper-input>
                        <div class="info_button">
                            <paper-icon-button id="info_button" on-click="_showInfo" icon="info-outline" title="{{item.name}} info"></paper-icon-button>
                        </div>
                    </div>
                </template>
            </paper-material>
            <div id="datalet_selection_column">
                <!--<template is="dom-if" if={{modify}}>-->
                    <!--<paper-material id="datalet_selection_comment" elevation="5">-->
                        <!--<div class="input_header"><span data-l10n-id="comment"></span></div>-->
                        <!--<paper-textarea id="comment" no-label-float maxlength="100" label="comment (max 100 characters)"></paper-textarea>-->
                    <!--</paper-material>-->
                <!--</template>-->
                <paper-material id="datalet_selection_datalet" elevation="5">
                    <div class="input_header"><span data-l10n-id="dataletPreview"></span></div>
                    <div id="datalet_selection_datalet_placeholder"></div>
                </paper-material>
                <paper-button id="add_button" disabled raised on-click="_addDatalet"><span data-l10n-id="addDatalet"></span></paper-button>
            </div>
            <paper-dialog id="dialog_info_input">
                <h2 id="dialog_name"></h2>
                <p id="dialog_description"></p>
            </paper-dialog>
        </div>
    </template>
    <script>
        Polymer({
            is : 'datalet-selection-controllet',
            properties : {
                deepUrl : {
                    type : String,
                    value : undefined
                },
                dataletsListUrl : {
                    type : String,
                    value : undefined
                },
                selectedDatalet : {
                    type  : String,
                    value : undefined
                },
                preselectedDatalet : {
                    type  : String,
                    value : undefined
                },
                loadPreview : {
                    type :  Boolean,
                    value : false
                },
                type : {
                    type : String,
                    value : undefined
                },
                inputs : {
                    type : Array,
                    value : []
                },
                labels : {
                    type : Array,
                    value : []
                },
                fields : {
                    type : Array,
                    value : []
                },
                selectedFields : {
                    type : Array,
                    value : []
                },
                dataletPreset : {
                    type  : Object,
                    value : []
                },
//                selectableFields : {
//                    type : Array,
//                    value : []
//                },
                dataUrl : {
                    type  : String,
                    value : undefined
                },
                params:{
                    type: Object,
                    value: undefined
                },
                modify : {
                    type  : Boolean,
                    value : false
                }
            },
            listeners: {
                'items-vslider-controllet_selected-datalet': '_selectDatalet',
//                'tree-view-controllet_selected-fields': '_updateSelectedFields'
                'change': '_paramsChanged'
            },
            ready : function() {//console.log(this.dataletPreset);
                this._resize();
                $(this.$.datalet_selection_inputs).perfectScrollbar();
                $(this.$.datalet_selection_labels).perfectScrollbar();
                $(this.$.datalet_selection_datalet).perfectScrollbar();
                this.params = {'data-url' : this.dataUrl};
                //this.modify = true;//da eliminare in futuro
                if(this.preselectedDatalet){
                    this.modify = true;
                    this._preselectDatalet();
                    this.preselectedDatalet = undefined;
                }
            },
            attached : function() {
                this._resize();
                var that = this;
                window.addEventListener("resize", function() { that._resize(); });
                this._translate();
            },
            setFields : function(fields) {
                this.fields = fields;
            },
            reset : function() {
                this.selectedDatalet = undefined;
                this.inputs = [];
                this.labels = [];
                this.$.datalet_selection_datalet_placeholder.innerHTML = "";
            },
            _translate : function(){
//                document.l10n.formatValue('commentLabel').then(s => $("#comment")[0].setAttribute("label", s));
                if(this.modify)
                    document.l10n.formatValue('modifyDatalet').then(s => this.$.add_button.innerText = s);
            },
            _selectDatalet : function(e){
                this.$.add_button.setAttribute("disabled", "true");
                this.selectedDatalet = e.detail.datalet;
                this.$.datalet_selection_datalet_placeholder.innerHTML = "";
                if(!this.selectedDatalet){
                    this.type = undefined;
                    this.inputs = [];
                    this.labels = [];
                    this.loadPreview = false;
                }
                else{
                    this.$.selectedDatalet_request.url = this.deepUrl + e.detail.datalet + "-datalet";
                    this.$.selectedDatalet_request.generateRequest();
                }
            },
            _preselectDatalet : function() {
                this.selectedDatalet = this.preselectedDatalet;
                this.selectedFields = this._copy(this.fields);
                var inputs = document.getElementsByTagName("paper-dropdown-menu");
                for(var i=0; i < inputs.length; i++)
                    $(inputs[i]).find("paper-menu")[0].select(i);
               //set info labels options
                var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
                for (var i = 0; i < labels.length; i++)
                    labels[i].value = this.dataletPreset[labels[i].label];
                var labels = this.$.datalet_selection_labels.querySelectorAll("paper-input");
                for (var i = 0; i < labels.length; i++)
                    labels[i].value = this.dataletPreset[labels[i].label];
                this._loadDatalet(this.selectedFields);
            },
            _handleSelectedDatalet : function(e){
                if(this.type != e.detail.response.type) {
                    this.inputs = [];
                    this.labels = [];
                    var inputs = e.detail.response.idm.inputs.input;
                    if (inputs.constructor == Object) {//not Array && inputs.input.selection == "*"
                        var name = inputs.name;
                        var description = inputs.description;
                        var selection = inputs.selection;
                        inputs = [];
                        for (var i in this.fields)
                            inputs.push({name: name + " " + i, description: description, selection: selection});
                    }
                    this.async(function(){
                        this.type = e.detail.response.type;
                        this.inputs = inputs;
                        this.labels = e.detail.response.idm.inputs.layouts.input;
                        this.selectedFields = new Array(inputs.length);
                    },0);
                    this.loadPreview = false;
                }
                else if (this.loadPreview)
                    this._loadDatalet(this.selectedFields);
            },
            _addInput : function(e){
                var selectedFields = this._copy(this.selectedFields);
                var index = $(e.target).parents("paper-dropdown-menu")[0].id;
                selectedFields[index] = e.target.innerHTML.trim();
                this.selectedFields = this._copy(selectedFields);
                var load = true;
                if(this.inputs[0].selection == "*"){
                    var temp = [];
                    for (var i = 0; i < selectedFields.length; i++)
                        if(selectedFields[i])
                           temp.push(selectedFields[i]);
                    selectedFields = temp;
                }
                else {
                    for (var i = 0; i < selectedFields.length; i++)
                        if (!selectedFields[i]) {
                            load = false;
                            break;
                        }
                }
                if(load){
                    this.loadPreview = true
                    this._loadDatalet(selectedFields);
                }
            },
            _updateParams : function(){
                var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
                this.params[labels[0].label] = labels[0].value;
                if(!labels[0].value)
                    this.params[labels[0].label] = "";
                var labels = this.$.datalet_selection_labels.querySelectorAll("paper-input");
                for (var i = 0; i < labels.length; i++)
                    this.params[labels[i].label] = labels[i].value;
            },
            _paramsChanged : function(){
                this._updateParams();
                if(this.$.datalet_selection_datalet_placeholder.children[1])
                    this.$.datalet_selection_datalet_placeholder.children[1].behavior.setParameters(this.params);
            },
            _loadDatalet : function(selectedFields){
                this._updateParams();
                var dataletParams ={
                    component   : this.selectedDatalet+"-datalet",
                    params      : this.params,
                    fields      : selectedFields,
                    placeHolder : this.$.datalet_selection_datalet_placeholder
                };
                ComponentService.deep_url = this.deepUrl;
                ComponentService.getComponent(dataletParams);
                this.async(function(){this.$.add_button.removeAttribute("disabled");}, 1111);
            },
            _addDatalet : function(){
                var selectedFields = [];
                for (var i = 0; i < this.selectedFields.length; i++)
                    if(this.selectedFields[i])
                        selectedFields.push(this.selectedFields[i]);
                console.log(this.params);
                var data = {
                    dataUrl : this.dataUrl,
                    params :  this.params,
                    fields :  selectedFields,
                    datalet : this.selectedDatalet+"-datalet",
//                    comment : "",//DEPRECATED!!!
                    staticData : JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)
                }
                this.fire('data-sevc-controllet.dataletCreated', {data : data});
            },
            _showInfo : function(e){
                var t = e.target;
                if(t.tagName.indexOf("IRON-ICON") != -1)
                    t = $(e.target).parents("paper-icon-button")[0];
                var name = t.getAttribute("title").replace(" info", "");
                var dataset = $.grep(this.inputs, function(e){ return e.name == name; })[0];
                if(!dataset)
                    dataset = $.grep(this.labels, function(e){ return e.name == name; })[0];
                this.$.dialog_name.innerHTML = dataset.name;
//                this.$.dialog_description.innerHTML = dataset.description;
                document.l10n.formatValue(dataset.description).then(s => this.$.dialog_description.innerHTML = s);
                this.$.dialog_info_input.open();
                var pos = t.getBoundingClientRect();
                $("#dialog_info_input").css("top", pos.top - 4);
                $("#dialog_info_input").css("left", pos.left - 4);
            },
            _copy : function(o) {
                var out, v, key;
                out = Array.isArray(o) ? new Array(o.length) : {};
                for (key in o) {
                    v = o[key];
                    out[key] = (typeof v === "object") ? this._copy(v) : v;
                }
                return out;
            },
            _resize : function(){
                var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
                h = h - 64 - 8; //height with page scroller
                $("#items_vslider_container").height(h);//vslider controllet
                $("#datalet_selection_inputs").height(h);
                $("#datalet_selection_labels").height(h);
//                if(this.modify)
//                    $("#datalet_selection_datalet").height(h-128);
//                else
                    $("#datalet_selection_datalet").height(h);
            }
        });
    </script>
</dom-module>