From: Loic Baron <loic.baron@lip6.fr>
Date: Tue, 18 Mar 2014 18:23:17 +0000 (+0100)
Subject: templates: generic and onelab are different
X-Git-Tag: myslice-1.1~189
X-Git-Url: http://git.onelab.eu/?a=commitdiff_plain;h=0ba7a93b8243093455dbdb1217e478b813a1ebab;p=unfold.git

templates: generic and onelab are different
---

diff --git a/portal/templates/_widget-login-manager.html b/portal/templates/_widget-login-manager.html
new file mode 100644
index 00000000..7c5f170e
--- /dev/null
+++ b/portal/templates/_widget-login-manager.html
@@ -0,0 +1,26 @@
+<div class="well">
+	{% if state %}
+	<span class="help-block">{{ state }}</span>
+	{% endif %}
+	<form action="/login/" method="post" role="form">
+	  {% csrf_token %}
+	  {% if next %}
+	  <input type="hidden" name="next" value="{{ next }}" />
+	  {% endif %}
+	<div class="form-group">
+    	<label for="username">Email address / Username</label>
+    	<input type="email" class="form-control" name="username" placeholder="Enter Email / username">
+  	</div>
+  	<div class="form-group">
+    	<label for="password">Password</label>
+    	<input type="password" class="form-control" name="password" placeholder="Password">
+	</div>
+	<div class="login-submit">
+		<input class="btn btn-default" type="submit" value="Sign In" />
+		<span class="lost-password">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="/portal/pass_reset/">Can't access your account?</a></span>
+	</div>
+	<div class="login-signup">
+		<a href="/portal/register">Try</a>, <a href="/portal/register">Sign Up</a> or <a href="/portal/join">Join</a>
+	</div>
+	</form>
+</div>
diff --git a/portal/templates/_widget-login-user.html b/portal/templates/_widget-login-user.html
new file mode 100644
index 00000000..9e248875
--- /dev/null
+++ b/portal/templates/_widget-login-user.html
@@ -0,0 +1,26 @@
+<div class="well login-widget">
+	{% if state %}
+	<span class="help-block">{{ state }}</span>
+	{% endif %}
+	<form action="/login/" method="post" role="form">
+	  {% csrf_token %}
+	  {% if next %}
+	  <input type="hidden" name="next" value="{{ next }}" />
+	  {% endif %}
+	<div class="form-group">
+    	<label for="username">Email address / Username</label>
+    	<input type="email" class="form-control" name="username" placeholder="Enter Email / username">
+  	</div>
+  	<div class="form-group">
+    	<label for="password">Password</label>
+    	<input type="password" class="form-control" name="password" placeholder="Password">
+	</div>
+	<div class="login-submit">
+		<input class="btn btn-default" type="submit" value="Sign In" />
+		<span class="lost-password">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="/portal/pass_reset/">Can't access your account?</a></span>
+	</div>
+	<div class="login-signup">
+		<a href="/portal/register">Try</a> or <a href="/portal/register">Sign Up</a>
+	</div>
+	</form>
+</div>
diff --git a/portal/templates/_widget-slice-sections.html b/portal/templates/_widget-slice-sections.html
new file mode 100644
index 00000000..bf64b8d8
--- /dev/null
+++ b/portal/templates/_widget-slice-sections.html
@@ -0,0 +1,33 @@
+{% if section == "resources" %}
+<ul class="nav nav-tabs nav-section">
+	<li><a href="/slice/{{ slice }}#info"><img src="{{ STATIC_URL }}icons/slices-xs.png" alt="About MySlice" /> {{ slice }}</a></li>
+	<li><a href="/slice/{{ slice }}#testbeds">Testbeds</a></li>
+	<li class="active"><a class="link" href="/resources/{{ slice }}">Resources</a></li>
+	<li><a href="/slice/{{ slice }}#users">Users</a></li>
+	<li><a href="/slice/{{ slice }}#experiment">Statistics</a></li>
+	<li><a href="/slice/{{ slice }}#experiment">Measurements</a></li>
+	<li><a href="/slice/{{ slice }}#experiment" data-toggle="tab">Experiment</a></li>
+</ul>
+{% else %}
+<ul class="nav nav-tabs nav-section">
+	<li class="active"><a href="#info"><img src="{{ STATIC_URL }}icons/slices-xs.png" alt="About MySlice" /> {{ slice }}</a></li>
+	<li class="testbeds"><a href="#testbeds">Testbeds</a></li>
+	<li><a class="link" href="/resources/{{ slice }}">Resources</a></li>
+	<li class="users"><a href="#users">Users</a></li>
+	<li class="statistics"><a href="#experiment">Statistics</a></li>
+	<li class="measurements"><a href="#experiment">Measurements</a></li>
+	<li class="experiment"><a href="#experiment" data-toggle="tab">Experiment</a></li>
+</ul>
+<script>
+$(document).ready(function() {
+	$('.nav-tabs a').click(function (e) {
+		if ($(this).hasClass('link')) return;
+  		e.preventDefault();
+  		$(this).tab('show');
+    	var id = $(this).attr('href').substr(1);    	
+    	$("#" + id).load('/' + id + '/{{ slice }}/');
+	});
+	$('div#info').load('/info/{{ slice }}/');
+});
+</script>
+{% endif %}
\ No newline at end of file
diff --git a/portal/templates/about.html b/portal/templates/about.html
index 578561b5..4736ae66 100644
--- a/portal/templates/about.html
+++ b/portal/templates/about.html
@@ -22,7 +22,7 @@
 	across the world, interconnected through the Slice-based Facility Architecture (SFA) and annotated by the TopHat measurement system.
 	</p>
 	<p>
-	Our framework is built with standard programming tools (php and javascript for the front-end and python for the back-end) 
+	Our framework is built with standard programming tools (python and javascript for the front-end and python for the back-end) 
 	and has a modular structure based on the concept of plugins for implementing different core functionalities (query editing, 
 	data display, and resource allocation).
 	</p>
@@ -37,8 +37,8 @@
 	 your public key to <a href="mailto:support@myslice.info">support@myslice.info</a>. 
 	</p>
 	<p>
-		Go to the <a href ="http://myslice.info">MySlice web site</a> or the <a href ="http://onelab.eu">OneLab public web site</a>
-	</p>
+		Go to the <a href ="http://myslice.info">MySlice web site</a>	
+    </p>
 	</div>
 </div>
 
diff --git a/portal/templates/institution.html b/portal/templates/institution.html
index f7c81876..7a84e9b2 100644
--- a/portal/templates/institution.html
+++ b/portal/templates/institution.html
@@ -21,11 +21,7 @@
 	  	<div class="col-md-12">
 		  	<div id="authority-tab-loading"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading Authority" /></div>
 		    <div id="authority-tab-loaded" style="display:none;">
-		        <div id="authority-data" style="float:left; width:50%;"></div>
-		        <div id="onelab_membership" style="float:right; width:50%;">
-		            <img src="{{ STATIC_URL }}img/onelab-logo.png" alt="" /><br>
-		            <div id="onelab-data"></div>
-		        </div>
+		        <div id="authority-data"></div>
 		    </div>
 	   </div>
 	</div>
@@ -74,44 +70,6 @@
                 authority_row = "<img src='{{ STATIC_URL }}img/institutions/{{user_details.parent_authority}}.gif' alt='' /><br>";
                 authority_row += "<br>";
                 authority_row += "<b>authority:</b> "+val.authority_hrn+"<br>";
-                authority_row += "<br>";
-                authority_row += "<b>"+val.name+"</b><br>";
-                authority_row += "<br>";
-                authority_row += "<b>Address:</b> "+val.address+"<br>";
-                authority_row += "<b>City:</b> "+val.postcode+" "+val.city+"<br>";
-                authority_row += "<br>";
-                authority_row += "<b>Country:</b> "+val.country+"<br>";
-                authority_row += "<br>";
-                authority_row += "<br>";
-                authority_row += "<h2>Contacts</h2>";
-                authority_row += "<b>Legal:</b> ";
-                /*
-
-                TODO: find a way to express JSON correctly given the constrains: CSV / JSON
-
-                legal = jQuery.parseJSON(val.legal);
-                if($.isArray(legal)){
-                    $.each(legal, function(k,v){
-                        authority_row += k+" "+v+"<br>";
-                    });
-                }else{
-                */
-                    authority_row += val.legal+"<br>";
-                //}
-                authority_row += "<br>";
-                authority_row += "<b>Scientific:</b> ";
-                /*
-                scientific = jQuery.parseJSON(val.scientific);
-                if($.isArray(scientific)){
-                    $.each(scientific, function(v){
-                        authority_row += v+", ";
-                    });
-                }else{
-                */
-                    authority_row += val.scientific+"<br>";
-                //}
-                onelab_membership = "<b>Status: </b>"+val.onelab_membership;
-                onelab_data.push(onelab_membership);
                 authority_data.push(authority_row);
             });
             $("div#authority-data").html(authority_data.join( "" ));
diff --git a/portal/templates/onelab/onelab__widget-topmenu.html b/portal/templates/onelab/onelab__widget-topmenu.html
index da834ace..4ed429ad 100644
--- a/portal/templates/onelab/onelab__widget-topmenu.html
+++ b/portal/templates/onelab/onelab__widget-topmenu.html
@@ -27,7 +27,7 @@
        				SLICES <span class="caret"></span>
     			</a>
 				
-				<div class="dropdown-menu">
+				<div class="dropdown-menu" style="z-index:99;">
 						<ul>
 							<li><a href="/portal/slice_request/">Request Slice</a></li>
 							<li><a href="/slice/ple.upmc.agent3/">ple.upmc.agent3</a></li>
diff --git a/portal/templates/onelab/onelab_base.html b/portal/templates/onelab/onelab_base.html
new file mode 100644
index 00000000..85139519
--- /dev/null
+++ b/portal/templates/onelab/onelab_base.html
@@ -0,0 +1,43 @@
+{# This is required by insert_above #}{% insert_handler %}<!DOCTYPE html>
+<html lang="en"><head>
+<title>OneLab - {{ section }}</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="shortcut icon" href="/static/img/myslice-icon.png">
+{# This is where insert_str will end up #}{% media_container prelude %}
+{% include 'messages-transient-header.html' %}
+<script type="text/javascript"> {# raw js code - use {% insert prelude_js %} ... {% endinsert %} #} {% container prelude_js %}</script>
+<script src="{{ STATIC_URL }}js/jquery.dataTables.min.js"></script>
+<script src="{{ STATIC_URL }}js/bootstrap.datatables.js"></script>
+<script src="{{ STATIC_URL }}js/myslice.js"></script>
+<script src="{{ STATIC_URL }}js/myslice-ui.js"></script>
+<style type="text/css">{# In case we need to add raw css code #}{% container prelude_css %}</style>
+{{ header_prelude }}
+{% block head %} {% endblock head %}
+{# let's add these ones no matter what #}
+{% insert_str prelude "js/jquery.min.js" %}
+{% insert_str prelude "js/jquery.html5storage.min.js" %}
+{% insert_str prelude "js/messages-runtime.js" %}
+{% insert_str prelude "js/class.js" %}
+{% insert_str prelude "js/plugin-helper.js" %}
+{% insert_str prelude "js/mustache.js" %}
+{% insert_str prelude "js/plugin.js" %}
+{% insert_str prelude "js/manifold.js" %}
+{% insert_str prelude "css/manifold.css" %}
+{% insert_str prelude "css/plugin.css" %}
+{% insert_str prelude "js/bootstrap.js" %}
+{% insert_str prelude "css/bootstrap.css" %}
+{% insert_str prelude "css/topmenu.css" %}
+{% insert_str prelude "js/logout.js" %}
+<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/{{ theme }}.css">
+</head>
+<body>
+{% block container %}
+  	{% block topmenu %}
+  	{% include theme|add:"__widget-topmenu.html" %}
+  	{% endblock topmenu %}
+	{% include 'messages-transient.html' %}
+	{% block base_content %}
+	{% endblock %}
+{% endblock container %}
+</body>
+</html>
diff --git a/portal/templates/onelab/onelab_institution.html b/portal/templates/onelab/onelab_institution.html
new file mode 100644
index 00000000..f7c81876
--- /dev/null
+++ b/portal/templates/onelab/onelab_institution.html
@@ -0,0 +1,197 @@
+{% extends "layout_wide.html" %}
+
+{% block head %} 
+<script type="text/javascript" src="{{STATIC_URL}}/js/institution.js"></script>
+{% endblock head %}
+
+{% block content %}
+<div class="container">
+	<div class="row">
+		<div class="col-md-12">
+			<ul class="nav nav-tabs nav-section">
+				<li class="active"><a href="#info"><img src="{{ STATIC_URL }}icons/authority-xs.png" alt="Institution" /> Institution {{user_details.parent_authority}}</a></li>
+				<li><a href="#users">Users</a></li>
+				<li><a href="#slices">Slices</a></li>
+			</ul>
+	    </div>
+	</div>
+</div>
+<div class="container tab-content">
+	<div class="tab-pane active row" id="info">
+	  	<div class="col-md-12">
+		  	<div id="authority-tab-loading"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading Authority" /></div>
+		    <div id="authority-tab-loaded" style="display:none;">
+		        <div id="authority-data" style="float:left; width:50%;"></div>
+		        <div id="onelab_membership" style="float:right; width:50%;">
+		            <img src="{{ STATIC_URL }}img/onelab-logo.png" alt="" /><br>
+		            <div id="onelab-data"></div>
+		        </div>
+		    </div>
+	   </div>
+	</div>
+	
+	<div class="tab-pane row" id="users" data-authority="{{user_details.parent_authority}}">
+		<div class="col-md-12">
+			<table class="table"><tr><td><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading Slices" /></td></tr></table>
+			<div>
+				<button id="deleteusers" type="button" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span> Delete Users</button>
+			</div>
+		</div>
+	</div>
+	<div class="tab-pane row" id="slices">
+	  	<button id="createslice" type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span> create slice</button>
+	    <div id="slice-tab-loading"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading Slices" /></div>
+	    <div id="slice-tab-loaded" style="display:none;">
+	        <table id="slice-tab">
+	            <tr>
+	                <th>+/-</th>
+	                <th>slice_hrn</th>
+	                <th>users</th>
+	                <th>url</th>
+	                <th>nodes</th>
+	                <th>expiration</th>
+	            </tr>
+	        </table>
+	        <br>
+	        <div>
+	            <button id="renewslices" type="button" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span> Renew Slices</button>
+	            <button id="deleteslices" type="button" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span> Delete Slices</button>
+	        </div>
+	    </div>
+	</div>
+</div>
+<script>
+    $(document).ready(function() {
+        {% if person %}
+        {% if user_details.parent_authority %}
+        
+        $.post("/rest/authority/",{'filters':{'authority_hrn':'{{user_details.parent_authority}}'}}, function( data ) {
+            var authority_data = [];
+            var onelab_data = [];
+			/* 'city','enabled','legal','longitude','onelab_membership','address','parent_authority','slice','user','country',
+            'tech','abbreviated_name','url','postcode','description','scientific','authority_hrn','latitude','name'	*/
+            $.each( data, function( key, val ) {
+                authority_row = "<img src='{{ STATIC_URL }}img/institutions/{{user_details.parent_authority}}.gif' alt='' /><br>";
+                authority_row += "<br>";
+                authority_row += "<b>authority:</b> "+val.authority_hrn+"<br>";
+                authority_row += "<br>";
+                authority_row += "<b>"+val.name+"</b><br>";
+                authority_row += "<br>";
+                authority_row += "<b>Address:</b> "+val.address+"<br>";
+                authority_row += "<b>City:</b> "+val.postcode+" "+val.city+"<br>";
+                authority_row += "<br>";
+                authority_row += "<b>Country:</b> "+val.country+"<br>";
+                authority_row += "<br>";
+                authority_row += "<br>";
+                authority_row += "<h2>Contacts</h2>";
+                authority_row += "<b>Legal:</b> ";
+                /*
+
+                TODO: find a way to express JSON correctly given the constrains: CSV / JSON
+
+                legal = jQuery.parseJSON(val.legal);
+                if($.isArray(legal)){
+                    $.each(legal, function(k,v){
+                        authority_row += k+" "+v+"<br>";
+                    });
+                }else{
+                */
+                    authority_row += val.legal+"<br>";
+                //}
+                authority_row += "<br>";
+                authority_row += "<b>Scientific:</b> ";
+                /*
+                scientific = jQuery.parseJSON(val.scientific);
+                if($.isArray(scientific)){
+                    $.each(scientific, function(v){
+                        authority_row += v+", ";
+                    });
+                }else{
+                */
+                    authority_row += val.scientific+"<br>";
+                //}
+                onelab_membership = "<b>Status: </b>"+val.onelab_membership;
+                onelab_data.push(onelab_membership);
+                authority_data.push(authority_row);
+            });
+            $("div#authority-data").html(authority_data.join( "" ));
+            $("div#onelab-data").html(onelab_data.join( "" ));
+            $("div#authority-tab-loaded").css("display","block");
+            $("div#authority-tab-loading").css("display","none");
+         });
+
+        $.post("/rest/slice/",{'filters':{'parent_authority':'{{user_details.parent_authority}}'}}, function( data ) {
+            var list_slices = [];
+            var table_slices = [];
+            /* "slice_hrn", "slice_description", "slice_type", "parent_authority", "created", "nodes", "slice_url", "slice_last_updated", "user", "slice_urn", "slice_expires" */
+            $.each( data, function( key, val ) {
+                list_slices.push( "<li><a href=\"portal/slice/"+val.slice_hrn+"\">" + val.slice_hrn + "</a></li>" );
+                if(val.nodes=="undefined" || val.nodes==null){
+                    nodes_length=0;
+                }else{
+                    nodes_length=val.nodes.length;
+                }
+
+                if(val.user=="undefined" || val.user==null){
+                    user_length=0;
+                }else{
+                    user_length=val.user.length;
+                }
+
+                if(val.slice_url=="undefined" || val.slice_url==null){
+                    slice_url="";
+                }else{
+                    slice_url="<a href='"+val.slice_url+"' target='_blank'>"+val.slice_url+"</a>";
+                }
+                
+                slice_row = "<tr id='"+val.slice_hrn+"'>";
+                slice_row += "<td><input type='checkbox' class='slice' id='"+val.slice_hrn+"'></td>";
+                slice_row += "<td><a href=\"/slice/"+val.slice_hrn+"\">" + val.slice_hrn + "</a></td>";
+                slice_row += "<td>"+user_length+"</td>";
+                slice_row += "<td>"+slice_url+"</td>";
+                slice_row += "<td>"+nodes_length+"</td>";
+                slice_row += "<td>"+val.slice_expires+"</td>";
+                slice_row += "</tr>";
+                table_slices.push(slice_row);
+                
+            });
+           
+            /* $("div#slice-list").html($( "<ul/>", { html: list_slices.join( "" ) })); */
+            $("table#slice-tab tr:last").after(table_slices.join( "" ));
+            $("div#slice-tab-loaded").css("display","block");
+            $("div#slice-tab-loading").css("display","none");
+        });
+		
+		
+        // $.post("/rest/user/",{'filters':{'parent_authority':'{{user_details.parent_authority}}'}}, function( data ) {
+            // var list_users = [];
+            // var table_users = [];
+			// /* Available fields
+			// user_gid, user_enabled, slices, pi_authorities, keys, parent_authority, user_first_name,
+			// user_urn, user_last_name, user_phone, user_hrn, user_email, user_type
+			// */
+            // $.each( data, function( key, val ) {
+                // list_users.push( "<li><a href=\"portal/user/"+val.user_email+"\">" + val.user_email + "</a></li>" );
+// 
+                // user_row = "<tr id='"+val.user_hrn+"'>";
+                // user_row += "<td><input type='checkbox' class='user' id='"+val.user_hrn+"'></td>";
+                // user_row += "<td>"+val.user_email+"</td>";
+                // user_row += "<td>"+val.user_hrn+"</td>";
+                // user_row += "<td>"+val.user_first_name+"</td>";
+                // user_row += "<td>"+val.user_last_name+"</td>";
+				// user_row += "<td>"+val.user_enabled+"</td>";
+                // user_row += "</tr>";
+                // table_users.push(user_row);
+//                 
+            // });
+            // $("table#user-tab tr:last").after(table_users.join( "" ));
+            // $("div#user-tab-loaded").css("display","block");
+            // $("div#user-tab-loading").css("display","none");
+         // });
+         {% endif %}
+         {% endif %}
+    });
+
+
+</script>
+{% endblock %}
diff --git a/portal/templates/onelab/onelab_slice-resource-view.html b/portal/templates/onelab/onelab_slice-resource-view.html
index 80c3fccd..8cb357b8 100644
--- a/portal/templates/onelab/onelab_slice-resource-view.html
+++ b/portal/templates/onelab/onelab_slice-resource-view.html
@@ -49,6 +49,7 @@
 			<ul class="nav nav-pills nav-resources">
 			  <li class="active"><a data-panel="resources" href="#">Resources</a></li>
 			  <li id="GoogleMap"><a data-panel="map" href="#">Map</a></li>
+			  <li id="Scheduler"><a data-panel="scheduler-tab" href="#">Scheduler</a></li>
 			  <li><a data-panel="pending" href="#">Pending</a></li>
 			  <li><a href="#"></a></li>
 			</ul>
@@ -60,6 +61,9 @@
 			</div>
 			<div id="map" class="panel" style="height:370px;display:none;">
                 {{map_resources}}
+			</div>
+			<div id="scheduler-tab" class="panel" style="height:370px;display:none;">
+                {{scheduler_leases}}
 			</div>
 			<div id="pending" class="panel" style="height:370px;display:none;">
                 {{pending_resources}}
diff --git a/portal/templates/slice-resource-view.html b/portal/templates/slice-resource-view.html
new file mode 100644
index 00000000..1c00cb8a
--- /dev/null
+++ b/portal/templates/slice-resource-view.html
@@ -0,0 +1,73 @@
+{% extends "layout_wide.html" %}
+
+{% block head %}
+<!-- <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1RUj824JAiHRVqgc2CSIg4CpKHhh84Lw&sensor=false"></script> -->
+<script src="{{ STATIC_URL }}js/onelab_slice-resource-view.js"></script>
+<script>
+	//myslice.slice = "{{ slice }}";
+</script>
+{% endblock %}
+
+{% block content %}
+	<div class="col-md-2">
+		<!-- <div id="select-platform" class="list-group"></div> -->
+        {{filter_testbeds}}
+
+		<!-- <ul class="list-group">
+		  <li class="list-group-item">Filter: CPU</li>
+		  <li class="list-group-item">Filter: Interface</li>
+		  <li class="list-group-item">...</li>
+		  <li class="list-group-item">...</li>
+		  <li class="list-group-item">...</li>
+		</ul> -->
+	
+	</div>
+	<div class="col-md-10" style="height:100%;">
+		<div class="row">
+		  	{% include theme|add:"_widget-slice-sections.html" %}
+		</div>
+		<!-- <div class="row slice-pending">
+			<ul class="nav nav-pills">
+				<li><a href="">Unreserved</a></li>
+				<li><a href="">Reserved</a></li>
+				<li><a href="">Pending<span class="badge" id="badge-pending" style="display:none;"></span></a></li>
+				<li>
+					<button type="button" class="btn btn-primary apply" id="ApplyPendind">Apply</button>
+					<button type="button" class="btn btn-default clear">Clear</button>
+				</li>
+				<li>
+					<div id="loading" style="display:none;"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading" /></div>
+				</li>
+			</ul>
+		</div> -->
+		<div class="row">
+			{% if msg %}
+			<div class="col-md-12"><p class="alert-success">{{ msg }}</p></div>
+			{% endif %}
+		</div>
+		<div class="row">
+			<ul class="nav nav-pills nav-resources">
+			  <li class="active"><a data-panel="resources" href="#">Resources</a></li>
+			  <li id="GoogleMap"><a data-panel="map" href="#">Map</a></li>
+			  <li id="Scheduler"><a data-panel="scheduler-tab" href="#">Scheduler</a></li>
+			  <li><a data-panel="pending" href="#">Pending</a></li>
+			  <li><a href="#"></a></li>
+			</ul>
+		</div>
+		<div class="row" style="height:100%;">
+			<div id="resources" class="panel">
+                {{list_resources}}
+				<!-- <table cellpadding="0" cellspacing="0" border="0" class="table" id="objectList"></table> -->
+			</div>
+			<div id="map" class="panel" style="height:370px;display:none;">
+                {{map_resources}}
+			</div>
+			<div id="scheduler-tab" class="panel" style="height:370px;display:none;">
+                {{scheduler_leases}}
+			</div>
+			<div id="pending" class="panel" style="height:370px;display:none;">
+                {{pending_resources}}
+			</div>
+		</div>
+	</div>
+{% endblock %}
diff --git a/portal/templates/slice-user-view.html b/portal/templates/slice-user-view.html
new file mode 100644
index 00000000..d1c87e10
--- /dev/null
+++ b/portal/templates/slice-user-view.html
@@ -0,0 +1,104 @@
+{% extends "layout_wide.html" %}
+
+
+{% block content %}
+	<div class="col-md-2">
+		<div id="select-platform" class="list-group">
+		</div>
+			
+		<ul class="list-group">
+		  <li class="list-group-item">Authority:<b> {{user_details.parent_authority}}</b>
+			<!--<select id="auth_list">
+  				<option value="ple.upmc">UPMC</option>
+  				<option value="ple.inria">INRIA</option>
+  				<option value="ple.nitos">NITOS</option>
+  				<option value="ple.iminds">iMinds</option>
+			</select> -->
+		  </li>
+		  <li class="list-group-item">Filter: slice</li>
+		  <li class="list-group-item">...</li>
+		  <li class="list-group-item">...</li>
+		  <li class="list-group-item">...</li>
+		</ul>
+	
+	</div>
+	<div class="col-md-10">
+		<div class="row">
+		  	{% include theme|add:"_widget-slice-sections.html" %}
+		</div>
+		<div class="row slice-pending">
+			<ul class="nav nav-pills">
+				<li><a href="">All users</a></li>
+				<li><a href="">Users in Slice</a></li>
+				<li><a href="">Pending<span class="badge">42</span></a></li>
+				<li>
+					<button type="button" class="btn btn-primary apply">Apply</button>
+					<button type="button" class="btn btn-default clear">Clear</button>
+				</li>
+			</ul>
+		</div>
+		<div class="row">
+			<ul class="nav nav-tabs">
+			  <li class="active"><a href="#">Users</a></li>
+			  <li><a href="#"></a></li>
+			  <li><a href="#"></a></li>
+			</ul>
+		</div>
+        	<div id="user-tab-loading"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading Useres" /></div>
+        	<div id="user-tab-loaded" style="display:none;">
+            	<table id="user-tab">
+                	<tr>
+                    	<th>+/-</th>
+                    	<th>Email</th>
+                    	<th>user_hrn</th>
+                    	<th>Enabled</th>
+                	</tr>
+            	</table>
+        	</div>
+<script>
+    $(document).ready(function() {
+		//var selectedValue = $( "#auth_list option:selected" ).val();    
+		//console.log(selectedValue);
+		//console.log("Name of the authority: " + "{{user_details.parent_authority}}");
+		//$("#auth_list").change(function(){
+			//selectedValue = $(this).find(":selected").val();
+			//console.log("the value you selected: " + selectedValue);
+        	$.post("/rest/user/",{'filters':{'parent_authority': "{{user_details.parent_authority}}"}}, function( data ) {
+            	var list_users = [];
+            	var table_users = [];
+				/* Available fields
+				user_gid, user_enabled, slices, pi_authorities, keys, parent_authority, user_first_name,
+			    user_urn, user_last_name, user_phone, user_hrn, user_email, user_type
+				*/
+            	$.each( data, function( key, val ) {
+                	list_users.push( "<li><a href=\"portal/user/"+val.user_email+"\">" + val.user_email + "</a></li>" );
+                	user_row = "<tr>";
+					// checking the box for the users that belong to the selected slice
+					var flag_checkbox = 0;
+					for(var data in val.slices) {
+    					var element = val.slices[data];
+						if (element == "{{slice}}"){
+							//console.log("the slice is: "+ element);	
+							flag_checkbox = 1;
+							user_row += "<td><input type='checkbox' checked='True'></td>";
+						}
+					}
+					if(flag_checkbox != 1){
+                		user_row += "<td><input type='checkbox'></td>";
+					}
+                	user_row += "<td>"+val.user_email+"</td>";
+                	user_row += "<td>"+val.user_hrn+"</td>";
+					user_row += "<td>"+val.user_enabled+"</td>";
+                	user_row += "</tr>";
+                	table_users.push(user_row);
+                
+            	});
+				$("table#user-tab tr:last").after(table_users.join( "" ));
+            	$("div#user-tab-loaded").css("display","block");
+            	$("div#user-tab-loading").css("display","none");
+         	});
+	//	});
+    });
+</script>
+
+{% endblock %}
diff --git a/portal/templates/slice-view.html b/portal/templates/slice-view.html
new file mode 100644
index 00000000..cf9ee7d8
--- /dev/null
+++ b/portal/templates/slice-view.html
@@ -0,0 +1,25 @@
+{% extends "layout_wide.html" %}
+
+{% block head %}
+
+{% endblock %}
+
+{% block content %}
+
+<div class="container">
+	<div class="row">
+		<div class="col-md-12">
+			{% include theme|add:"_widget-slice-sections.html" %}
+	    </div>
+	</div>
+</div>
+<div class="container-fluid tab-content">
+  <div class="tab-pane active row" id="info">...</div>
+  <div class="tab-pane row" id="testbeds">...</div>
+  <div class="tab-pane row" id="resources">...</div>
+  <div class="tab-pane row" id="users">...</div>
+  <div class="tab-pane row" id="statistics">...</div>
+  <div class="tab-pane row" id="measurements">...</div>
+  <div class="tab-pane row" id="experiment">...</div>
+</div> 	
+{% endblock %}