portal/templates/servicedirectory.html

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