1 {% extends "layout_wide.html" %}
4 <div class="container">
6 <div class="col-md-12">
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>
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">
22 <!-- <table class="table" id="appservices-tab">
29 <th>Brief Description</th>
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">
44 <th>Brief Description</th>
55 $(document).ready(function() {
59 $('.nav-tabs a').click(function (e) {
62 // id = $(this).attr('href').substr(1);
63 // if (!(id in loadedTabs)) {
67 // loadedTabs[id] = true;
80 url: "{{ servdirurl }}appservices/",
81 success: function(data, status, jqXHR){
83 function createToggle(name){
85 var icon = $('p#name-' + name + ' span');
86 icon.toggleClass("glyphicon-chevron-down");
87 var el = $('p#expandable-' + name);
88 if(!el.is(':animated')){
94 $.each(data, function(i, item){
98 if(item.name.toLowerCase().indexOf("santander") >= 0){
99 imgsrc = "smartsantander.png";
100 } else if(item.name.toLowerCase().indexOf("hadoop") >= 0){
101 imgsrc = "hadoop.png";
102 } else if(item.name.toLowerCase().indexOf("openstack") >= 0){
103 imgsrc = "openstack.png";
106 var row = $('<div class="row">').append(
107 $('<div>').addClass("col-md-3 portfolio-item").append(
108 $('<a href="' + item.APILink + '">').append(
109 $('<img>').attr('src', "{{ STATIC_URL }}img/servicedirectory/" + imgsrc)
112 $('<div>').addClass("col-md-6 portfolio-item").append(
113 $('<p id="name-' + item.name.replace(/ /g,'') + '">').append(
114 $('<span class="glyphicon glyphicon-chevron-right">'), " " + item.name),
115 $('<p>').text(item.briefDescription),
116 $('<p>').text("Provider: " + item.provider),
117 $('<p>').append('Endpoint: <a href="' + item.endPoint + '">' + item.endPoint + "</a>"),
118 $('<p id="expandable-' + item.name.replace(/ /g,'') + '">').text(item.fullDescription).hide(),
119 $('<p id="expandable-' + item.name.replace(/ /g,'') + '">').text("Protocol: " + item.protocol).hide(),
120 $('<p id="expandable-' + item.name.replace(/ /g,'') + '">')
121 .append('API documentation: <a href="' + item.APILink + '">' + item.APILink + "</a>").hide()
124 $('#appservices-tab').append(row);
125 $('p#name-' + item.name.replace(/ /g,'')).click(createToggle(item.name.replace(/ /g,'')));
129 $("div#appservices-tab-loaded").css("display","block");
130 $("div#appservices-tab-loading").css("display","none");
132 error: function(jqXHR, status){
133 console.log("ERROR: " + status);
141 url: "{{ servdirurl }}fedservices/",
142 success: function(data, status, jqXHR){
143 // console.log(data);
144 $.each(data, function(i, item){
146 var tr = $('<tr>').append(
147 $('<td>').text(item.name),
148 $('<td>').text(item.briefDescription),
149 $('<td>').append('<a href="' + item.endPoint + '">' + item.endPoint + "</a>")
151 $("#fedservices-tab > tbody:last").append(tr);
155 $("div#fedservices-tab-loaded").css("display","block");
156 $("div#fedservices-tab-loading").css("display","none");
158 error: function(jqXHR, status){
159 console.log("ERROR: " + status);
165 }); // end document.ready