VNF_Catalogue/public/javascripts/search_results.js

   1 /*******************************************************************************\r
   2  * Copyright (c) 2017 Kumar Rishabh and others.\r
   3  *\r
   4  * All rights reserved. This program and the accompanying materials\r
   5  * are made available under the terms of the Apache License, Version 2.0\r
   6  * which accompanies this distribution, and is available at\r
   7  * http://www.apache.org/licenses/LICENSE-2.0\r
   8  *******************************************************************************/\r
   9 \r
  10 $(document).ready( function() {\r
  11         var search_result_string_1 = `\r
  12                 <div class = "container container-custom">\r
  13                 <div class="card card-shadow-custom horizontal">\r
  14                   <div class="row row-custom">\r
  15                     \r
  16                     <div class="col s5 card-title-div-custom">\r
  17                       <span class="card-title card-title-span-custom">\r
  18                         <a class="custom-href" href="/project_profile?vnf_id=%vnf_id%">%vnf_name%</a>\r
  19                       </span>\r
  20                     </div>\r
  21                     \r
  22                     <div class="col s5 card-title-div-custom">\r
  23                       <i class="material-icons">grade</i>\r
  24                       <span class="card-title">PenguinScore: 42</span>\r
  25                     </div>\r
  26                     \r
  27                     <div class="col s2 card-title-div-custom-right">\r
  28                       <form action="#">\r
  29                         <input id="search_result_1" type="checkbox" name="%vnf_name%"/>\r
  30                         <label for="search_result_1">Compare</label>\r
  31                       </form>\r
  32                     </div>\r
  33                     \r
  34                     <div class="col s4 card-image card-image-custom">\r
  35                       <img class="img-size card-image-picture-custom" src="/uploads/%photo_url%"/>\r
  36                     </div>\r
  37                     \r
  38                     <div class="col s8 card-stacked">\r
  39                       <div class="card-content">\r
  40                         <p>\r
  41                           <div class="collection collection-custom">\r
  42                             <a class="collection-item" href="#!">\r
  43                               <span>\r
  44                                 <i class="material-icons">code</i>                            \r
  45                                 Lines Of Code: %lines_of_code%\r
  46                               </span>\r
  47                             </a>\r
  48                             <a class="collection-item" href="#!">\r
  49                               <span>\r
  50                                 <i class="material-icons">person</i>\r
  51                                 Number of Developers: %no_of_developers%;\r
  52                               </span>\r
  53                             </a>\r
  54                             <a class="collection-item" href="#!">\r
  55                               <span>\r
  56                                 <i class="material-icons">star</i>\r
  57                                 Number of Stars: %no_of_stars%\r
  58                               </span>\r
  59                             </a>\r
  60                             <a class="collection-item" href="#!">\r
  61                               <span>\r
  62                                 <i class="material-icons">description</i>\r
  63                                 Number of Versions: %versions%\r
  64                               </span>\r
  65                             </a>\r
  66                           </div>\r
  67                         </p>\r
  68                       </div>\r
  69                       <div class="card-action">\r
  70                         Tags:\r
  71                     `;\r
  72     var search_result_string_2 = `\r
  73                         <div class="chip"><a class="a-custom" href="#!">tag1</a></div>\r
  74                         <div class="chip"><a class="a-custom" href="#!">Tag2</a></div>\r
  75                         <div class="chip"><a class="a-custom" href="#!">Tag3</a></div>\r
  76                         <div class="chip"><a class="a-custom" href="#!">Tag4</a></div>\r
  77                         <div class="chip"><a class="a-custom" href="#!">Tag5</a></div>\r
  78                 `;\r
  79         var search_result_string_3 = `\r
  80                         <a class="a-custom-more" href="/project_profile?vnf_id=%vnf_id%">\r
  81                           more\r
  82                         </a>\r
  83                       </div>\r
  84                     </div>\r
  85                     \r
  86                     <div class="divider"></div>\r
  87                     \r
  88                     <div class="card-action-custom col s12 card-action">\r
  89                       License: <a href="#">%license%</a>\r
  90                       Complexity: <a href="#">Atomic</a>\r
  91                       Activity: <a href="#">Medium</a>\r
  92                       OPNFV Indicator: <a href="#">%opnfv_indicator%</a>\r
  93                     </div>\r
  94                     \r
  95                   </div>\r
  96                 </div></div>\r
  97                 `;\r
  98 \r
  99         //var replace_search_result_string = function(search_result_string, \r
 100         var search_result = function(string1, string3, result) {\r
 101                 var string_replacement = {};\r
 102                 //alert(JSON.stringify(result));\r
 103                 \r
 104                 for (var k in result) {\r
 105                 if (result.hasOwnProperty(k)) {\r
 106                         string_replacement['%' + k + '%'] = result[k];\r
 107                         if(!string_replacement['%' + k + '%']) {\r
 108                                 string_replacement['%' + k + '%'] = -1;\r
 109                         }\r
 110                 }\r
 111         }\r
 112         //alert(JSON.stringify(string_replacement));\r
 113                 \r
 114                 string1 = string1.replace(/%\w+%/g, function(all) {\r
 115                         return string_replacement[all] || all;\r
 116                 });\r
 117 \r
 118                 for(index in string_replacement['%tags%']) {\r
 119                         string1 += '<div class="chip"><a class="a-custom" href="#!">';\r
 120                         string1 += string_replacement['%tags%'][index]['tag_name'];\r
 121                         string1 += '</a></div>';\r
 122                 }\r
 123 \r
 124                 string3 = string3.replace(/%\w+%/g, function(all) {\r
 125                         return string_replacement[all] || all;\r
 126                 });\r
 127 \r
 128                 return string1 + string3;\r
 129         };\r
 130 \r
 131 \r
 132 \r
 133         var QueryString = function () {\r
 134                 // This function is anonymous, is executed immediately and \r
 135                 // the return value is assigned to QueryString!\r
 136                 var query_string = {};\r
 137                 var query = window.location.search.substring(1);\r
 138                 var vars = query.split("&");\r
 139                 for (var i=0;i<vars.length;i++) {\r
 140         var pair = vars[i].split("=");\r
 141         // If first entry with this name\r
 142         if (typeof query_string[pair[0]] === "undefined") {\r
 143                 query_string[pair[0]] = decodeURIComponent(pair[1]);\r
 144                 // If second entry with this name\r
 145         } else if (typeof query_string[pair[0]] === "string") {\r
 146                 var arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ];\r
 147                 query_string[pair[0]] = arr;\r
 148         // If third or later entry with this name\r
 149         } else {\r
 150                         query_string[pair[0]].push(decodeURIComponent(pair[1]));\r
 151                 }\r
 152                 } \r
 153                 return query_string;\r
 154         };\r
 155 \r
 156         $('#pagination-long').materializePagination({\r
 157       align: 'center',\r
 158       lastPage:  5,\r
 159       firstPage:  1,\r
 160       urlParameter: 'page',\r
 161       useUrlParameter: true,\r
 162       onClickCallback: function(requestedPage){\r
 163                 var json_data = {};\r
 164                 json_data['tags'] = QueryString()['tags'];\r
 165                 json_data['page'] = requestedPage;\r
 166                         \r
 167                         console.log(json_data);\r
 168 \r
 169                         $.ajax({\r
 170                 url: '/search_projects_results',\r
 171                 type: 'post',\r
 172                 dataType: 'json',\r
 173                 data: json_data,\r
 174                 success: function(data) {\r
 175                         //alert(JSON.stringify(data));\r
 176                         html_string = '';\r
 177                         for(var result in data) {\r
 178                                 html_string += search_result(search_result_string_1, search_result_string_3, data[result]);\r
 179                         }\r
 180                         $('#content').html(html_string);\r
 181                     //Materialize.toast(data, 3000, 'rounded');\r
 182                 },\r
 183                 error: function (error) {\r
 184                         Materialize.toast('', 3000, 'rounded');\r
 185                 }\r
 186                 });\r
 187 \r
 188                 //window.location.href = '/search_projects?tags=' + parameters['tags'] + '&page=' + requestedPage;\r
 189                 //return false;\r
 190       }\r
 191         });\r
 192         \r
 193         /*$('#pagination-long').pagination({\r
 194       align: 'center',\r
 195       lastPage:  5,\r
 196       firstPage:  1,\r
 197       //urlParameter: 'page',\r
 198       useUrlParameter: false,\r
 199       onClickCallback: function(requestedPage){\r
 200                 var query_string = {};\r
 201                         var query = window.location.search.substring(1);\r
 202                         console.log(query);\r
 203                         var vars = query.split("&");\r
 204                         console.log(vars);\r
 205                         vars['page'] = requestedPage;\r
 206                         console.log(vars);\r
 207                         var parameters = QueryString();\r
 208                         \r
 209                         console.log(parameters);\r
 210 \r
 211 \r
 212                 window.location.href = '/search_projects?tags=' + parameters['tags'];\r
 213                 //return false;\r
 214       }\r
 215       var query_string = {};\r
 216                         var query = window.location.search.substring(1);\r
 217                         console.log(query);\r
 218                         var vars = query.split("&");\r
 219                         console.log(vars);\r
 220                         vars['page'] = requestedPage;\r
 221                         console.log(vars);\r
 222                         \r
 223         });*/\r
 224 \r
 225 \r
 226 \r
 227 });\r