Spinner included globally in base.html - used in validate requests
[unfold.git] / portal / templates / fed4fire / fed4fire_institution.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                          <div class="breadcrumbs">
12                 {% if project %}
13                                 Management &nbsp;>&nbsp; Project: <span id="authority_name">{{user_details.parent_authority}}</span>
14                 {% else %}
15                                 Management &nbsp;>&nbsp; Institution: <span id="authority_name">{{user_details.parent_authority}}</span>
16                 {% endif %}
17                          </div>
18                 </div>
19         </div>
20 </div>
21 <div class="container">
22         <div class="row">
23                 <div class="col-md-12">
24                         <ul class="nav nav-tabs nav-section">
25                                 <li class="active"><a href="#about">About</a></li>
26                                 <li><a href="#users">Users</a></li>
27                 {% if not project %}
28                                 <li><a href="#projects">Projects</a></li>
29                 {% endif %}
30                                 <li><a href="#slices">Slices</a></li>
31                                 <li><a href="#requests">Requests</a></li>
32                         </ul>
33             </div>
34         </div>
35 </div>
36 <div class="container tab-content">
37         <div class="tab-pane active row" id="about">
38         <div class="col-md-12 el">
39         <h2>{{user_details.parent_authority}}</h2>
40         </div>
41         </div>
42         
43         <div class="tab-pane row" id="users" data-authority="{{user_details.parent_authority}}">
44                 <div class="col-md-12 el">
45                         <div id="user-tab-loading"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading Slices" /></div>
46                                 <div id="user-tab-loaded" style="display:none;">
47                                 <table id="user-tab" class="table">
48                                         <tr>
49                                         <th>+/-</th>
50                             {% if not project %}
51                                         <th>Email</th>
52                             {% endif %}
53                                         <th>User hrn</th>
54                             <!--
55                                         <th>First name</th>
56                                         <th>Last name</th>
57                                         <th>Enabled</th>
58                             -->
59                                         </tr>
60                                 </table>
61                                 
62                         </div>
63                         {%if  pi %}     
64                         <div>
65                 {% if project %}
66                                 <button id="removepi" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Remove from project</button>
67                 {% else %}
68                                 <button id="makepi" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-up"></span> Upgrade to PI</button>
69                                 <button id="removepi" type="button" class="btn"><span class="glyphicon glyphicon-arrow-down"></span> Downgrade to  user</button>
70                                 <button id="deleteusers" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Delete selected users</button>
71                 {% endif %}
72                         </div>
73                         {% endif %}
74                 </div>
75         </div>
76
77     {% if not project %}
78         <div class="tab-pane row" id="projects" data-authority="{{user_details.parent_authority}}">
79                 <div class="col-md-12 el">
80                         <div id="project-tab-loading"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading Projects" /></div>
81                                 <div id="project-tab-loaded" style="display:none;">
82                                 <table id="project-tab" class="table">
83                                         <tr>
84                                         <th>+/-</th>
85                                         <th>Project hrn</th>
86                                         </tr>
87                                 </table>
88                                 
89                         </div>
90                         <div>
91                 {% if  pi %}
92                         <button id="createproject" type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span> Create project</button>
93                         <button id="deleteprojects" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Delete selected projects</button>
94                         {% else %}
95                         <button id="createproject" type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span> Request project</button>
96                         {% endif %}
97                         </div>
98                 </div>
99         </div>
100    {% endif %}
101         <div class="tab-pane row" id="slices">
102                 <div class="col-md-12 el">
103             <div id="slice-tab-loading"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading Slices" /></div>
104             <div id="slice-tab-loaded" style="display:none;">
105                 <table id="slice-tab" class="table">
106                     <tr>
107                         <th>+/-</th>
108                         <th>Slice hrn</th>
109                         <th>Users</th>
110                         <th>Url</th>
111                         <!-- <th>nodes</th> -->
112                         <th>Creation</th>
113                     </tr>
114                 </table>                        
115             </div>
116         <div>
117                 {% if pi %}
118                         <button id="createslice" type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span> Create slice</button>
119             <button id="renewslices" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-refresh"></span> Renew Slices</button>
120             <button id="deleteslices" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Delete Slices</button>
121                         {% else %}
122                         <button id="createslice" type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span> Request slice</button>
123                         {% endif %}
124         </div>
125            </div>
126         </div>
127         <div class="tab-pane row" id="requests">
128         <div id="spinner" style="padding-top:40px; padding-left:40px;"/>
129         </div>
130 </div>
131 <script>
132 $(document).ready(function() {
133     {% if person %}
134     {% if user_details.parent_authority %}
135         $('#spinner').spin();
136         
137         $.post("/rest/myslice:slice/",{'fields':['slice_hrn','users','url','slice_date_created'],'filters':{'parent_authority':'{{user_details.parent_authority}}'}}, function( data ) {
138             var list_slices = [];
139             var table_slices = [];
140             /* "slice_hrn", "slice_description", "slice_type", "parent_authority", "created", "nodes", "slice_url", "slice_last_updated", "users", "slice_urn", "slice_expires" */
141             $.each( data, function( key, val ) {
142                 list_slices.push( "<li><a href=\"portal/slice/"+val.slice_hrn+"\">" + val.slice_hrn + "</a></li>" );
143                 if(val.nodes=="undefined" || val.nodes==null){
144                     nodes_length=0;
145                 }else{
146                     nodes_length=val.nodes.length;
147                 }
148                 //console.log(val);
149                 if(val.users=="undefined" || val.users==null){
150                     users_length=0;
151                 }else{
152                     users_length=val.users.length;
153                 }
154
155                 if(val.url=="undefined" || val.url==null){
156                     slice_url="";
157                 }else{
158                     slice_url="<a href='"+val.url+"' target='_blank'>"+val.url+"</a>";
159                 }
160                 
161                 slice_row = "<tr id='"+val.slice_hrn+"'>";
162                 slice_row += "<td><input type='checkbox' class='slice' id='"+val.slice_hrn+"'></td>";
163
164                 // filter links to slices, only those that the user has credentials for
165                 s = myslice.user.slices;
166                 if(s.length > 0 && $.inArray(val.slice_hrn, myslice.user.slices)!=-1){
167                     slice_row += "<td><a href='/slice/"+val.slice_hrn+"'>" + val.slice_hrn + "</a></td>";
168                 }else{
169                     slice_row += "<td>" + val.slice_hrn + "</td>";
170                 }
171                 slice_row += "<td>"+users_length+"</td>";
172                 slice_row += "<td>"+slice_url+"</td>";
173                 //slice_row += "<td>"+nodes_length+"</td>";
174                 slice_row += "<td>"+val.slice_date_created+"</td>";
175                 slice_row += "</tr>";
176                 table_slices.push(slice_row);
177                 
178             });
179            
180             /* $("div#slice-list").html($( "<ul/>", { html: list_slices.join( "" ) })); */
181             $("table#slice-tab tr:last").after(table_slices.join( "" ));
182             $("div#slice-tab-loaded").css("display","block");
183             $("div#slice-tab-loading").css("display","none");
184         });
185                 
186         {% if project %}
187                 $.post("/rest/myslice:authority/",{'fields':['pi_users'],'filters':{'authority_hrn':'{{user_details.parent_authority}}'}}, function( data ) {
188            
189             var table_users = [];
190             $.each( data[0].pi_users, function( key, val ) {
191                 //console.log(val);
192                 user_row = "<tr id='"+val+"'>";
193                 user_row += "<td><input type='checkbox' class='user' id='"+val+"'></td>";
194                 user_row += "<td>"+val+"</td>";
195                 user_row += "</tr>";
196                 table_users.push(user_row);
197             });
198             $("table#user-tab tr:last").after(table_users.join( "" ));
199             $("div#user-tab-loaded").css("display","block");
200             $("div#user-tab-loading").css("display","none");
201
202         });
203         {% else %}
204         $.post("/rest/myslice:user/",{'filters':{'parent_authority':'{{user_details.parent_authority}}'}}, function( data ) {
205             var list_users = [];
206             var table_users = [];
207                     /* Available fields
208                     user_gid, user_enabled, slices, pi_authorities, keys, parent_authority, user_first_name,
209                     user_urn, user_last_name, user_phone, user_hrn, user_email, user_type
210                     */
211             $.each( data, function( key, val ) {
212                 list_users.push( "<li><a href=\"portal/user/"+val.user_email+"\">" + val.user_email + "</a></li>" );
213                 user_row = "<tr id='"+val.user_hrn+"'>";
214                 user_row += "<td><input type='checkbox' class='user' id='"+val.user_hrn+"' data-email='"+val.user_email+"'></td>";
215                 user_row += "<td>"+val.user_email+"</td>";
216                 user_row += "<td>"+val.user_hrn+"</td>";
217                 /*
218                 user_row += "<td>"+val.user_first_name+"</td>";
219                 user_row += "<td>"+val.user_last_name+"</td>";
220                             user_row += "<td>"+val.user_enabled+"</td>";
221                 */
222                 user_row += "</tr>";
223                 table_users.push(user_row);
224             });
225             $("table#user-tab tr:last").after(table_users.join( "" ));
226             $("div#user-tab-loaded").css("display","block");
227             $("div#user-tab-loading").css("display","none");
228         });
229                 $.post("/rest/myslice:authority/",{'fields':['authority_hrn','pi_users'],'filters':{'authority_hrn':'CONTAINS{{user_details.parent_authority}}'}}, function( data ) {
230            
231             var table_projects = [];
232             $.each( data, function( key, val ) {
233                 console.log(val);
234                 project_row = "<tr id='"+val.authority_hrn+"'>";
235                 project_row += "<td><input type='checkbox' class='project' id='"+val.authority_hrn+"'></td>";
236
237                 // filter links to projects, only those that the user has credentials for
238                 p = myslice.projects;
239                 if(p.length > 0 && $.inArray(val.authority_hrn, p)!=-1){
240                     project_row += "<td><a href='/portal/project/"+val.authority_hrn+"'>"+val.authority_hrn+"</a></td>";
241                 }else{
242                     project_row += "<td>"+val.authority_hrn+"</td>";
243                 }
244                 project_row += "</tr>";
245                 table_projects.push(project_row);
246             });
247             $("table#project-tab tr:last").after(table_projects.join( "" ));
248             $("div#project-tab-loaded").css("display","block");
249             $("div#project-tab-loading").css("display","none");
250
251         });
252
253         {% endif %}
254     {% endif %}
255     {% endif %}
256
257 }); // End document.ready
258
259 $(document).ready(function() {
260         $('.nav-tabs a').click(function (e) {
261                 e.preventDefault();
262                 $(this).tab('show');
263         var id = $(this).attr('href').substr(1);
264         if ((id == 'requests')){
265                 $("#" + id).load('/management/' + id);
266         }
267         /*
268         if ((id == 'requests') || (id == 'about'))
269                 $("#" + id).load('/management/' + id);
270         */
271         });
272         var hash = window.location.hash;
273         if (hash) {
274                 $('.nav-tabs a[href='+hash+']').click();
275         } else {
276                 $('.nav-tabs a[href=#about]').click();
277         }
278 });
279
280 //upgrade users to PI
281 $(document).ready(function() {
282     $('button#makepi').click(function() {
283         var flag = false;
284         var pi_users = [];
285         $.post("/rest/myslice:authority/",{'filters':{'authority_hrn': '{{user_details.parent_authority}}'}}, function( data ) {
286             pi_users = data[0]["pi_users"];
287             $('input:checkbox.user').each(function (index) {
288                 if(this.checked){
289                     var record_id = this.id;
290                     pi_users.push(record_id)
291                     flag = true;                
292                 }
293             });
294             if(flag == true){
295                 $.post("/update/myslice:authority/",{'filters':{'authority_hrn':'{{user_details.parent_authority}}'},'params':{'pi_users':pi_users}}, function(data) {
296                     if(data.success){
297                         mysliceAlert('Success: User rights added to: {{user_details.parent_authority}}','success', true);
298                     }else{
299                         mysliceAlert('Rest Error for: '+data.error,'warning', true);
300                         //alert("Rest Error for "+record_id+": "+data.error);
301                     }
302                 });
303             }
304         });
305     });
306 });
307 //downgrade to user [in projects:remove from project]
308 $(document).ready(function() {
309     $('button#removepi').click(function() {
310         var flag = false;
311         var pi_users = [];
312         $.post("/rest/myslice:authority/",{'filters':{'authority_hrn': '{{user_details.parent_authority}}'}}, function( data ) {
313             pi_users = data[0]["pi_users"];
314                         // http://stackoverflow.com/questions/9792927/javascript-array-search-and-remove-string
315             $('input:checkbox.user').each(function (index) {
316                 if(this.checked){
317                     var record_id = this.id;
318                                         for (var i=pi_users.length-1; i>=0; i--) {
319                                         if (pi_users[i] === record_id) {
320                                                 pi_users.splice(i, 1);
321                                         }
322                                         }
323                     flag = true;                
324                 }
325             });
326             if(flag == true){
327                 $.post("/update/myslice:authority/",{'filters':{'authority_hrn':'{{user_details.parent_authority}}'},'params':{'pi_users':pi_users}}, function(data) {
328                     if(data.success){
329                         mysliceAlert('Success: User rights removed from: {{user_details.parent_authority}}','success', true);
330                         {% if project %}
331                         // remove the user from the list of pis of the project displayed
332                         $('input:checkbox.user').each(function (index) {
333                            if(this.checked){
334                                var record_id = this.id;
335                                $('tr[id="'+record_id+'"]').fadeOut("slow");
336                                $('tr[id="'+record_id+'"]').remove();
337                             }
338
339                         });
340                         {% endif %}
341                     }else{
342                         mysliceAlert('Rest Error for: '+data.error,'warning', true);
343                         //alert("Rest Error for "+record_id+": "+data.error);
344                     }
345                 });
346             }
347         });
348     });
349 });
350
351
352
353 </script>
354 {% endblock %}