title-desciption datalet

Renato De Donato
1 parent adb9f560
Showing 8 changed files with 85 additions and 40 deletions
controllets/data-sevc-controllet/data-sevc-controllet.html
controllets/data-sevc-controllet/demo/index.html
controllets/datalet-selection-controllet/datalet-selection-controllet.html
controllets/datalet-selection-controllet/demo/index.html
datalets/base-datalet/base-datalet.html
datalets/treemap-datalet/treemap-datalet.html
locales/en.l20n
locales/it.l20n
@@ -118,10 +118,6 @@
                     this.dataUrl = this.dataletPreset["data-url"];
                 }
-//                var languageLink = document.createElement("link");
-//                languageLink.rel = "localization";
-//                languageLink.href = "../../../locales/it.l20n";
-//                document.getElementsByTagName("head")[0].appendChild(languageLink);
             },
             _updateSlider : function(e){
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
     <!--&lt;!&ndash;<meta name="defaultLanguage" content="en">&ndash;&gt;-->
-    <!--<meta name="availableLanguages" content="en, it">-->
+    <meta name="availableLanguages" content="en, it">
     <!--&lt;!&ndash;<link rel="localization" href="../../../locales/{locale}.l20n">&ndash;&gt;-->
     <link rel="localization" href="../../../locales/it.l20n">
     <!--<script defer src="../../../bower_components/l20n/dist/compat/web/l20n.min.js"></script>-->
@@ -11,6 +11,7 @@
 <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">
@@ -111,7 +112,7 @@
                 right: 0px;
             }
-            paper-textarea {
+            paper-input {
                 display: inline-block;
                 height: 48px;
                 /*padding: 0px 8px;*/
@@ -121,7 +122,20 @@
                 --paper-input-container-focus-color: #2196F3;
             }
-            #datalet_selection_comment paper-textarea {
+            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);
             }
@@ -166,6 +180,10 @@
             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] {
@@ -175,7 +193,7 @@
             #dialog_info_input {
                 border: 2px solid #2196F3;
                 background-color: #E0E0E0;
-                min-width: 256px;
+                min-width: 248px;
             }
         </style>
@@ -184,7 +202,6 @@
         <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">
@@ -204,10 +221,21 @@
             </paper-material>
             <paper-material id="datalet_selection_labels" elevation="5">
-                <div class="input_header"><span data-l10n-id="labels"></span></div>
+                <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-textarea label={{item.name}}></paper-textarea>
+                        <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>
@@ -219,10 +247,10 @@
             <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>
+                    <!--<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">
@@ -350,12 +378,6 @@
                 this._translate();
             },
-            _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);
-            },
-
             setFields : function(fields) {
                 this.fields = fields;
             },
@@ -367,6 +389,12 @@
                 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");
@@ -395,6 +423,8 @@
                 for(var i=0; i < inputs.length; i++)
                     $(inputs[i]).find("paper-menu")[0].select(i);
+               //set info labels options
+
                 this._loadDatalet(this.selectedFields);
             },
@@ -463,17 +493,19 @@
             _loadDatalet : function(selectedFields){
 //                var params = {'data-url' : this.dataUrl};
-                var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
+                var labels = this.$.datalet_selection_labels.querySelectorAll("paper-input");
                 for (var i = 0; i < labels.length; i++) {
                     if (labels[i].innerHTML.trim() != "") {
                         this.params[labels[i].label] = labels[i].value;
                     }
                 }
-                console.log(this.selectedDatalet);
-                console.log(this.params);
-                console.log(selectedFields);
-                console.log(this.dataUrl);
+                var labels = this.$.datalet_selection_labels.querySelectorAll("paper-textarea");
+                for (var i = 0; i < labels.length; i++) {
+                    if (labels[i].innerHTML.trim() != "") {
+                        this.params[labels[i].label] = labels[i].value;
+                    }
+                }
                 var dataletParams ={
                     component   : this.selectedDatalet+"-datalet",
@@ -495,16 +527,18 @@
                     if(this.selectedFields[i])
                         selectedFields.push(this.selectedFields[i]);
+//                console.log(this.params);
+
                 var data = {
                     dataUrl : this.dataUrl,
                     params :  this.params,
-//                    params :  {'data-url' : this.dataUrl},
                     fields :  selectedFields,
                     datalet : this.selectedDatalet+"-datalet",
-                    comment : this.$.comment.value,
+//                    comment : "",//DEPRECATED!!!
                     staticData : JSON.stringify(this.$.datalet_selection_datalet_placeholder.children[1].behavior.data)
                 }
+//                console.log(data);
                 this.fire('data-sevc-controllet.dataletCreated', {data : data});
             },
@@ -549,9 +583,9 @@
                 $("#datalet_selection_inputs").height(h);
                 $("#datalet_selection_labels").height(h);
 //                if(this.modify)
-                    $("#datalet_selection_datalet").height(h-128);
+//                    $("#datalet_selection_datalet").height(h-128);
 //                else
-//                    $("#datalet_selection_datalet").height(h);
+                    $("#datalet_selection_datalet").height(h);
             }
         });
@@ -8,10 +8,8 @@
     <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
     <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
-    <!--<meta name="defaultLanguage" content="en-EN">-->
-    <meta name="availableLanguages" content="en-EN, it-IT">
-    <!--<link rel="localization" href="../../../locales/{locale}.l20n">-->
-    <link rel="localization" href="../../../locales/it-IT.l20n">
+    <meta name="availableLanguages" content="en, it">
+    <link rel="localization" href="../../../locales/it.l20n">
     <script defer src="../../../bower_components/l20n/dist/compat/web/l20n.min.js"></script>
     <link rel="import" href="../datalet-selection-controllet.html" />
@@ -115,6 +115,21 @@ Example :
     <script>
         BaseDatalet = Polymer({
             is: 'base-datalet',
+
+            properties: {
+
+                title : {
+                    type : String,
+                    value : undefined
+                },
+
+                description : {
+                    type : String,
+                    value : undefined
+                }
+
+            },
+
             objectDatalet: {
                 /**
                  * It contains the json data from async xhr call returned from core-ajax core component
@@ -2,7 +2,7 @@
 @license
     The MIT License (MIT)
-    Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
+    Copyright (c) 2015 Dipartimento di Informatica - Universitï¿½ di Salerno - Italy
     Permission is hereby granted, free of charge, to any person obtaining a copy
     of this software and associated documentation files (the "Software"), to deal
@@ -122,7 +122,7 @@ Example:
             transformData: function(e)
             {
                 var treemapData = [];
-                TreemapBehavior.map.name = this._component.name;
+                TreemapBehavior.map.name = this._component.title;
                 if(this.data.length > 1) {
                     for (i = 0; i < this.data.length; i++) {
@@ -177,7 +177,7 @@ Example:
                 curchild.value = value;
             },
-            presentData: function(){
+            presentData: function(){console.log(TreemapBehavior.map.name);
                 //build(this.map, "treemap_placeholder");
                 build(this.map, this._component.$.treemap_placeholder);
             }
@@ -195,7 +195,7 @@ Example:
                  * @type String
                  * @default ''
                  */
-                name: {
+                title: {
                     type: String,
                     value: ""
                 },
@@ -13,7 +13,8 @@
 <selectedUrl "Selected url">
 <inputs "INPUTS">
-<labels "LABELS / OPTIONS">
+<layouts "LABELS / OPTIONS">
+<baseInfo "BASE INFO">
 <comment "COMMENT">
 <commentLabel "comment (max 100 characters)">
 <dataletPreview "DATALET PREVIEW">
@@ -13,7 +13,8 @@
 <selectedUrl "Url selezionato">
 <inputs "INPUT">
-<labels "ETICHETTE / OPZIONI">
+<layouts "ETICHETTE / OPZIONI">
+<baseInfo "INFORMAZIONI DI BASE">
 <comment "COMMENTO">
 <commentLabel "commento (massimo 100 caratteri)">
 <dataletPreview "ANTEPRIMA DATALET">