1 {% extends "layout_wide.html" %}
4 <!-- <script type="text/javascript" src="{{STATIC_URL}}/js/institution.js"></script> -->
8 <div class="container">
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>
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">
25 <!-- <table class="table" id="appservices-tab">
32 <th>Brief Description</th>
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">
47 <th>Brief Description</th>
58 $(document).ready(function() {
62 $('.nav-tabs a').click(function (e) {
65 // id = $(this).attr('href').substr(1);
66 // if (!(id in loadedTabs)) {
70 // loadedTabs[id] = true;
83 url: "{{ servdirurl }}appservices/",
84 success: function(data, status, jqXHR){
86 function createToggle(name){
88 var icon = $('p#name-' + name + ' span');
89 icon.toggleClass("glyphicon-chevron-down");
90 var el = $('p#expandable-' + name);
91 if(!el.is(':animated')){
97 $.each(data, function(i, item){
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";
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)
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()
127 $('#appservices-tab').append(row);
128 $('p#name-' + item.name.replace(/ /g,'')).click(createToggle(item.name.replace(/ /g,'')));
132 $("div#appservices-tab-loaded").css("display","block");
133 $("div#appservices-tab-loading").css("display","none");
135 error: function(jqXHR, status){
136 console.log("ERROR: " + status);
144 url: "{{ servdirurl }}fedservices/",
145 success: function(data, status, jqXHR){
146 // console.log(data);
147 $.each(data, function(i, 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>")
154 $("#fedservices-tab > tbody:last").append(tr);
158 $("div#fedservices-tab-loaded").css("display","block");
159 $("div#fedservices-tab-loading").css("display","none");
161 error: function(jqXHR, status){
162 console.log("ERROR: " + status);
168 }); // end document.ready