dataset page and wait datalet

pina
1 parent 339d682e
Showing 3 changed files with 129 additions and 13 deletions
datalets/base-ajax-json-jsonpath-datalet/static/js/AjaxJsonJsonPathBehavior.js
datalets/base-datalet/base-datalet.html
datalets/base-datalet/static/images/spin.svg
@@ -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
@@ -98,7 +98,7 @@ var AjaxJsonJsonPathBehavior = {
      *
      * @method selectData
      */
-    selectData : function(){
+    selectData : function() {
         this.data = [];
@@ -107,17 +107,27 @@ var AjaxJsonJsonPathBehavior = {
         this._component.fields = JSON.parse(this._component.fields);
-        for(var i=0;i < this._component.fields.length; i++){
+        for (var i = 0; i < this._component.fields.length; i++) {
             var query = "$";
             var query_elements = this._component.fields[i].split(',');
-            for(var j=0; j < query_elements.length;j++){
+            for (var j = 0; j < query_elements.length; j++) {
                 query += "['" + query_elements[j] + "']";
-                if(this.isFieldArray(query_elements.slice(0,j+1))){
+                if (this.isFieldArray(query_elements.slice(0, j + 1))) {
                     query += "[*]";
                 }
             }
-            this.data.push({name : query_elements[query_elements.length - 1], data : jsonPath(this.properties.json_results.value, query)});
+            this.data.push({
+                name: query_elements[query_elements.length - 1],
+                data: jsonPath(this.properties.json_results.value, query)
+            });
         }
-    }
+        this.deleteWaitImage();
+    },
+    /**
+     * Delete a image after loading a datalet
+     */
+    deleteWaitImage : function() {
+        $("img[src$='spin.svg']").remove();
+    }
 };
 \ No newline at end of file
@@ -72,13 +72,27 @@ Example :
                 height:32px;
                 width: 32px;
             }
+            #image_spin {
+                height:32px;
+                width: 32px;
+                position: relative;
+                center: center;
+                width: 100%;
+             }
+
         </style>
+        <div id="base_datalet_imgWaitDatalet">
+                <img id="image_spin" src="static/images/spin.svg">
+
+        </div>
+
         <div id="base_datalet_container">
             <b>Source: </b><span id="domain"></span>
+            <b>  </b><span id="domainPage"></span>
             <div id="base_datalet_rtp">
-                <div id="rtp">Powered by Route-to-PA</div>
-                <div><a href="http://routetopa.eu/"><img id="rtpalogo" src="static/images/rtpalogo.png"></a></div>
+                <div id="rtp">Powered by ROUTE-TO-PA</div>
+                <div><a href="http://www.routetopa.eu/"><img id="rtpalogo" src="static/images/rtpalogo.png" ></a></div>
             </div>
         </div>
@@ -92,19 +106,51 @@ Example :
     <script>
         BaseDatalet = Polymer({
             is: 'base-datalet',
-
+            objectDatalet: {
+                /**
+                 * It contains the json data from async xhr call returned from core-ajax core component
+                 *
+                 * @attribute json_resultDatalet
+                 * @type object
+                 * @default 'null'.
+                 */
+                json_resultDatalet: {
+                    type: Object,
+                    value: {}
+                }
+            },
             /**
              * It is called after the element�s template has been stamped and all elements inside the element�s local
              * DOM have been configured (with values bound from parents, deserialized attributes, or else default values)
              * and had their ready method called.
              *
-             * Extract the dataset domain from the entire URL and set the text content of the datalet footer.
-             *
+             * Extract
+             *   1) the dataset domain
+             *   2) the page of a datalet
+             *   from the entire URL and set the text content of the datalet footer.
              * @method ready
-             *
              */
             ready: function(){
+                var urlDatalet;
                 if(this.dataUrl != undefined){
+
+                    urlSource =  this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
+
+                    var apiIdResource = "resource_show?id=";
+
+                    //Resourceid of a datalet
+                    var query = this.dataUrl.substring(this.dataUrl.indexOf("?"), this.dataUrl.length);
+                    var params  = this.decomponeQueryString(query);
+                    resultIdDatalet = params["resource_id"];
+
+                    //cKan organized with or not catalog
+                    queryInitial = this.dataUrl.substring(0,  this.dataUrl.indexOf("api"));
+                    queryFinal = this.dataUrl.substring(this.dataUrl.indexOf("api"),  this.dataUrl.indexOf("datastore_search"));
+
+                    urlDatalet = queryInitial +  queryFinal + apiIdResource + resultIdDatalet;
+
+                    this.requestDataletData(urlDatalet);
+                    //String  source to define for Issy
                     this.$.domain.textContent = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
                 }
             },
@@ -113,7 +159,66 @@ Example :
              */
             setDomain: function(url){
                 this.$.domain.textContent = url;
+            },
+            /**
+             * Get the (key, value)  query string parameters
+             **/
+            decomponeQueryString: function (querystring) {
+            // remove any preceding url and split
+            querystring = querystring.substring(querystring.indexOf('?')+1).split('&');
+            var params = {}, pair, d = decodeURIComponent;
+            // march and parse
+            for (var i = querystring.length - 1; i >= 0; i--) {
+                pair = querystring[i].split('=');
+                params[d(pair[0])] = d(pair[1]);
+            }
+            return params;
+            },
+            /**
+             * Make an AJAX call to the dataset URL to retrieve package_id
+             *
+             * @method urlDatalet
+             */
+            requestDataletData: function(urlDatalet){
+                var comp = this;
+                $.ajax({
+                    url: urlDatalet, //url con package
+                    dataType: "json",
+                    success: function(e){
+                        comp.handleDataletResponse(e);
+                    }
+                });
+            },
+            /**
+             * Called when core-ajax component receive the json data from called url.
+             *
+             * @method handleResponse
+             */
+            handleDataletResponse: function(e) {
+                this.objectDatalet.json_resultDatalet.value = e;
+
+                //packageId of a give datalet
+                packageIdDatalet = this.objectDatalet.json_resultDatalet.value.result.package_id;
+                resourceId = this.objectDatalet.json_resultDatalet.value.result.id;
+
+                //url complete of download
+                urlDatasetDownload = this.objectDatalet.json_resultDatalet.value.result.url;
+
+                if(this.dataUrl != undefined){
+                    //static url
+                    lastStringResourceId =  this.dataUrl.split("/")[5];
+                    resourceId  = lastStringResourceId.split('=')[1];
+                    var urlDatalet = this.dataUrl.split("/")[0]+ "//" + this.dataUrl.split("/")[2]  + "/dataset/" + packageIdDatalet +"/resource/" +resourceId;
+
+                    urlDatalet = urlDatasetDownload.replace(/\/download\/.*/, '');
+                    urlSource =  this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
+
+                    //this.$.domain.textContent = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
+
+                    //this.$.domainPage.innerHTML = '<a href=' + urlSource +  ' target=' + "_blank>" + " urlSource" + '</a>';
+                    this.$.domainPage.innerHTML = '<a href=' + urlDatalet +  ' target=' + "_blank>" + " Dataset's page" + '</a>';
+                }
             }
         });
     </script>
+<?xml version="1.0" encoding="utf-8"?><svg width='198px' height='198px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-spin"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><g transform="translate(50 50)"><g transform="rotate(0) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(45) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.12s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.12s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(90) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.25s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.25s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(135) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.37s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.37s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(180) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.5s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.5s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(225) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.62s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.62s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(270) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.75s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.75s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(315) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.87s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.87s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g></g></svg>
 \ No newline at end of file