portal/templates/servicedirectory.html

   1 {% extends "layout_wide.html" %}
   2
   3 {% block content %}
   4 <div class="container">
   5         <div class="row">
   6                 <div class="col-md-12">
   7                     <br />
   8                         <ul class="nav nav-tabs nav-section-mod">
   9                                 <li class="active"><a href="#appservices"> Application Services </a></li>
  10                                 <li><a href="#fedservices"> Federation Services </a></li>
  11                         </ul>
  12             </div>
  13         </div>
  14 </div>
  15 <div class="container tab-content">
  16         <div class="tab-pane active row" id="appservices">
  17                 <div class="col-md-12">
  18                         <div id="appservices-tab-loading"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading Services" /></div>
  19                     <div id="appservices-tab-loaded" style="display:none;">
  20             <div class="container" id="appservices-tab">
  21
  22                         <!-- <table class="table" id="appservices-tab">
  23                         <tr>
  24                             <th>Name</th>
  25                             <th>Provider</th>
  26                             <th>Endpoint URL</th>
  27                             <th>Protocol</th>
  28                             <th>Basic API</th>
  29                             <th>Brief Description</th>
  30                         </tr>
  31                     </table> -->
  32               </div>
  33                     </div>
  34            </div>
  35         </div>
  36
  37         <div class="tab-pane row" id="fedservices" data-authority="{{user_details.parent_authority}}">
  38                 <div class="col-md-12">
  39                         <div id="fedservices-tab-loading"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading Services" /></div>
  40                                 <div id="fedservices-tab-loaded" style="display:none;">
  41                                 <table class="table" id="fedservices-tab">
  42                                         <tr>
  43                                         <th>Name</th>
  44                                         <th>Brief Description</th>
  45                                         <th>URL</th>
  46                                         </tr>
  47                                 </table>
  48                              </div>
  49                 </div>
  50         </div>
  51 </div>
  52
  53 <script>
  54
  55 $(document).ready(function() {
  56
  57 loadedTabs = [];
  58
  59   $('.nav-tabs a').click(function (e) {
  60     e.preventDefault();
  61     $(this).tab('show');
  62     // id = $(this).attr('href').substr(1);
  63     // if (!(id in loadedTabs)) {
  64     //   switch(id) {
  65     //     case 'users':
  66     //       //loadUsers();
  67     //       loadedTabs[id] = true;
  68     //     break;
  69     //   }
  70     // }
  71
  72   });
  73
  74     {% if person %}
  75
  76         $.ajax({
  77             type: "GET",
  78             dataType: "json",
  79             async: "false",
  80             url: "{{ servdirurl }}appservices/",
  81             success: function(data, status, jqXHR){
  82
  83                   function createToggle(name){
  84                       return function(){
  85                         var icon = $('p#name-' + name + ' span');
  86                         icon.toggleClass("glyphicon-chevron-down");
  87                         var el = $('p#expandable-' + name);
  88                         if(!el.is(':animated')){
  89                           $(el).toggle(300);
  90                         }
  91                       }
  92                     }
  93
  94                   $.each(data, function(i, item){
  95
  96                     var imgsrc;
  97
  98                         /*
  99                     if(item.name.toLowerCase().indexOf("santander") >= 0){
 100                       imgsrc = "{{ STATIC_URL }}img/servicedirectory/smartsantander.png";
 101                     } else if(item.name.toLowerCase().indexOf("hadoop") >= 0){
 102                       imgsrc = "{{ STATIC_URL }}img/servicedirectory/hadoop.png";
 103                     } else if(item.name.toLowerCase().indexOf("openstack") >= 0){
 104                       imgsrc = "{{ STATIC_URL }}img/servicedirectory/openstack.png";
 105                     }
 106                         */
 107
 108                     var row = $('<div class="row">').append(
 109                       $('<div>').addClass("col-md-3 portfolio-item").append(
 110                         $('<a href="' + item.APILink + '">').append(
 111                           $('<img>').attr('src', item.iconURL)
 112                         )
 113                      ),
 114                       $('<div>').addClass("col-md-6 portfolio-item").append(
 115                         $('<p id="name-' + item.name.replace(/ /g,'') + '">').append(
 116                           $('<span class="glyphicon glyphicon-chevron-right">'), " " + item.name),
 117                         $('<p>').text(item.briefDescription),
 118                         $('<p>').text("Provider: " + item.provider),
 119                         $('<p>').append('Endpoint: <a href="' + item.endPoint + '">' + item.endPoint + "</a>"),
 120                         $('<p id="expandable-' + item.name.replace(/ /g,'') + '">').text(item.fullDescription).hide(),
 121                         $('<p id="expandable-' + item.name.replace(/ /g,'') + '">').text("Protocol: " + item.protocol).hide(),
 122                         $('<p id="expandable-' + item.name.replace(/ /g,'') + '">')
 123                               .append('API documentation: <a href="' + item.APILink + '">' + item.APILink + "</a>").hide()
 124                       )
 125                     );
 126                     $('#appservices-tab').append(row);
 127                     $('p#name-' + item.name.replace(/ /g,'')).click(createToggle(item.name.replace(/ /g,'')));
 128                 });
 129
 130
 131                 $("div#appservices-tab-loaded").css("display","block");
 132                 $("div#appservices-tab-loading").css("display","none");
 133             },
 134             error: function(jqXHR, status){
 135                 console.log("ERROR: " + status);
 136             }
 137         });
 138
 139         $.ajax({
 140             type: "GET",
 141             dataType: "json",
 142             async: "false",
 143             url: "{{ servdirurl }}fedservices/",
 144             success: function(data, status, jqXHR){
 145                 // console.log(data);
 146                 $.each(data, function(i, item){
 147                     console.log(item);
 148                     var tr = $('<tr>').append(
 149                         $('<td>').text(item.name),
 150                         $('<td>').text(item.briefDescription),
 151                         $('<td>').append('<a href="' + item.endPoint + '">' + item.endPoint + "</a>")
 152                     );
 153                     $("#fedservices-tab > tbody:last").append(tr);
 154                 });
 155
 156
 157                 $("div#fedservices-tab-loaded").css("display","block");
 158                 $("div#fedservices-tab-loading").css("display","none");
 159             },
 160             error: function(jqXHR, status){
 161                 console.log("ERROR: " + status);
 162             }
 163         });
 164
 165    {% endif %}
 166
 167 }); // end document.ready
 168 </script>
 169 {% endblock %}