395 lines
13 KiB
HTML
395 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>{% block title %}Docklet | Workspace{% endblock %}</title>
|
|
<!-- Tell the browser to be responsive to screen width -->
|
|
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
|
<link rel="shortcut icon" href="/static/img/favicon.ico">
|
|
|
|
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Font Awesome -->
|
|
<link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
|
|
|
|
<!-- Ionicons -->
|
|
<link href="//cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
|
|
|
<link href="//cdn.bootcss.com/animate.css/3.5.1/animate.min.css" rel="stylesheet">
|
|
<link href="//cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
|
|
|
|
<!-- Theme style -->
|
|
|
|
<link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
|
|
|
|
<link rel="stylesheet" href="/static/dist/css/skins/skin-blue.min.css">
|
|
|
|
|
|
{%block css_src %}{% endblock %}
|
|
|
|
|
|
</head>
|
|
|
|
<body class="hold-transition skin-blue sidebar-mini">
|
|
<div class="wrapper">
|
|
|
|
<!-- Main Header -->
|
|
<header class="main-header">
|
|
|
|
<!-- Logo -->
|
|
<a href="" class="logo">
|
|
<!-- mini logo for sidebar mini 50x50 pixels -->
|
|
<span class="logo-mini"></span>
|
|
<!-- logo for regular state and mobile devices -->
|
|
<span class="logo-lg"><b>Docklet</b></span>
|
|
</a>
|
|
|
|
<!-- Header Navbar -->
|
|
<nav class="navbar navbar-static-top" role="navigation">
|
|
<!-- Sidebar toggle button-->
|
|
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
</a>
|
|
<!-- Navbar Right Menu -->
|
|
<div class="navbar-custom-menu">
|
|
<ul class="nav navbar-nav">
|
|
<!-- Messages: style can be found in dropdown.less-->
|
|
<li class="dropdown notifications-menu">
|
|
<a id='notificationIcon' href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="fa fa-bell-o"></i>
|
|
{# <span class="label label-warning">0</span>#}
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li id="notificationHeader" class="header">You have 0 notifications</li>
|
|
<li>
|
|
<!-- inner menu: contains the actual data -->
|
|
<ul id='notificationList' class="menu">
|
|
{# <li>#}
|
|
{# <a href="#">#}
|
|
{# <i class="fa fa-envelop"></i> Notification title#}
|
|
{# </a>#}
|
|
{# </li>#}
|
|
</ul>
|
|
</li>
|
|
<li class="footer"><a href="/notification/detail/all/">View all</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown user user-menu">
|
|
<!-- Menu Toggle Button -->
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<!-- The user image in the navbar-->
|
|
<img src="{{ mysession['avatar'] }}" class="user-image" alt="User Image">
|
|
<!-- hidden-xs hides the username on small devices so only the image appears. -->
|
|
<span class="hidden-xs">{{ mysession['nickname'] }}</span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<!-- The user image in the menu -->
|
|
<li class="user-header">
|
|
<img src="{{ mysession['avatar'] }}" class="img-circle" alt="User Image">
|
|
|
|
<p>
|
|
{{ mysession['nickname'] }}
|
|
<small>{{ mysession['description'] }}</small>
|
|
<small>{{ beans }} <img src="/static/img/bean.png" />
|
|
<a href="/beans/application/" class="btn btn-default btn-xs">Apply</a></small>
|
|
</p>
|
|
</li>
|
|
<!-- Menu Body -->
|
|
|
|
<!-- Menu Footer-->
|
|
<li class="user-footer" style="background-color:#e6e6e6">
|
|
<div class="pull-left">
|
|
<a href="/user/info/" class="btn btn-default btn-flat">Profile</a>
|
|
</div>
|
|
<div class="pull-right">
|
|
<a href="/logout/" class="btn btn-default btn-flat">Sign out</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<!-- Control Sidebar Toggle Button -->
|
|
<li>
|
|
<a href="/document/" target="_blank"><strong>Help</strong></a>
|
|
</li>
|
|
<li>
|
|
<a href="/logout/" ><strong>Logout</strong></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<!-- Left side column. contains the logo and sidebar -->
|
|
<aside class="main-sidebar">
|
|
|
|
<!-- sidebar: style can be found in sidebar.less -->
|
|
<section class="sidebar">
|
|
|
|
<!-- Sidebar user panel (optional) -->
|
|
<div class="user-panel">
|
|
<div class="pull-left image">
|
|
<img src="{{ mysession['avatar'] }}" class="img-circle" alt="User Image">
|
|
</div>
|
|
<div class="pull-left info">
|
|
<p>{{ mysession['nickname'] }}</p>
|
|
<!-- Status -->
|
|
<a href="#"><i class="fa fa-circle text-success"></i> {{ mysession['status']}}</a>
|
|
<!-- Beans -->
|
|
<a href="/beans/application/"><i><img src="/static/img/bean.png" /></i> {{ beans }}</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar Menu -->
|
|
<ul class="sidebar-menu">
|
|
<li class="header">USER OPERATIONS</li>
|
|
<!-- Optionally, you can add icons to the links -->
|
|
<li class="active" id="nav_Dashboard">
|
|
<a href="/dashboard/"><i class="fa fa-th-large"></i> <span class="nav-label">Workspace</span></a>
|
|
</li>
|
|
<li id="nav_Config">
|
|
<a href="/config/"><i class="fa fa-gears"></i> <span class="nav-label">Config</span></a>
|
|
</li>
|
|
|
|
<li id="nav_Status">
|
|
<a href='/vclusters/'><i class="fa fa-bar-chart"></i> <span class="nav-label">Status</span></a>
|
|
</li>
|
|
<li id="nav_History">
|
|
<a href='/history/'><i class="fa fa-history"></i> <span class="nav-label">History</span></a>
|
|
</li>
|
|
|
|
|
|
{% if mysession['usergroup'] == 'root' or mysession['usergroup'] == 'admin'%}
|
|
<li class="header">ADMIN OPERATIONS</li>
|
|
<li id="nav_Hosts">
|
|
<a href='/hosts/'><i class="fa fa-sitemap"></i> <span class="nav-label">Hosts</span></a>
|
|
</li>
|
|
<li id="user_List">
|
|
<a href='/user/list/'><i class="fa fa-users"></i> <span class="nav-label">Users</span></a>
|
|
</li>
|
|
<li id="nav_Notification">
|
|
<a href='/notification/'><i class="fa fa-envelope"></i> <span class="nav-label">Notifications</span></a>
|
|
</li>
|
|
<li id="settings">
|
|
<a href='/settings/'><i class="fa fa-user"></i> <span class="nav-label">Settings</span></a>
|
|
</li>
|
|
|
|
<li id="nav_Cloud">
|
|
<a href="#"><i class="fa fa-cloud"></i> <span class="nav-label">Cloud</span></a>
|
|
<li>
|
|
<li id="logs">
|
|
<a href='/logs/'><i class="fa fa-user"></i> <span class="nav-label">Logs</span></a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
</ul>
|
|
<!-- /.sidebar-menu -->
|
|
</section>
|
|
<!-- /.sidebar -->
|
|
</aside>
|
|
|
|
<!-- Content Wrapper. Contains page content -->
|
|
<div class="content-wrapper">
|
|
<!-- Content Header (Page header) -->
|
|
<section class="content-header">
|
|
<h1>
|
|
<strong>{% block panel_title %}Workspace{% endblock %}</strong>
|
|
</h1>
|
|
{% block panel_list %}
|
|
<ol class="breadcrumb">
|
|
<li>
|
|
<a href="/dashboard/"><i class="fa fa-dashboard"></i>Home</a>
|
|
</li>
|
|
<li class="active">
|
|
<strong>Workspace</strong>
|
|
</li>
|
|
</ol>
|
|
{% endblock %}
|
|
</section>
|
|
<!-- Main content -->
|
|
<section class="content">
|
|
|
|
{% block content %}
|
|
{% endblock %}
|
|
|
|
</section>
|
|
<!-- /.content -->
|
|
</div>
|
|
<!-- /.content-wrapper -->
|
|
|
|
<!-- Main Footer -->
|
|
<footer class="main-footer">
|
|
<!-- To the right -->
|
|
<div class="pull-right hidden-xs">
|
|
<i><a href="http://github.com/unias/docklet">Docklet {{ version }}</a></i>
|
|
</div>
|
|
<!-- Default to the left -->
|
|
<strong>Copyright</strong>© 2017 <a href="http://unias.github.io/docklet">UniAS</a>@<a href="http://www.sei.pku.edu.cn"> SEI, PKU</a>
|
|
|
|
</footer>
|
|
|
|
</div>
|
|
<!-- ./wrapper -->
|
|
|
|
<!-- REQUIRED JS SCRIPTS -->
|
|
|
|
<!-- jQuery 2.2.1 -->
|
|
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
|
|
<!-- Bootstrap 3.3.5 -->
|
|
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
|
<!-- AdminLTE App -->
|
|
<script src="/static/dist/js/app.min.js"></script>
|
|
|
|
<script src="//cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
|
|
<script src="//cdn.bootcss.com/jQuery-slimScroll/1.3.7/jquery.slimscroll.min.js"></script>
|
|
<script src="//cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
var pathname = window.location.pathname;
|
|
pathname = pathname.split(/\//);
|
|
if(pathname[1] != 'dashboard')
|
|
$("#nav_Dashboard").removeClass("active");
|
|
if(pathname[1] == 'vclusters')
|
|
$("#nav_Status").addClass("active");
|
|
else if(pathname[1] == 'hosts')
|
|
$("#nav_Hosts").addClass("active");
|
|
else if(pathname[1] == 'config')
|
|
$("#nav_Config").addClass("active");
|
|
else if(pathname[1] == 'history')
|
|
$("#nav_History").addClass("active");
|
|
else if(pathname[1] == 'user')
|
|
{
|
|
if (pathname[2] == 'list')
|
|
$("#user_List").addClass("active");
|
|
}
|
|
else if(pathname[1] == 'notification')
|
|
$("#nav_Notification").addClass('active');
|
|
else if(pathname[1] == 'admin')
|
|
$("#admin").addClass('active');
|
|
else if(pathname[1] == 'settings')
|
|
$("#settings").addClass('active');
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
var ajaxCfg = {
|
|
type : "post",
|
|
url : '/notification/query_self/',
|
|
dataType : "json",
|
|
data : {},
|
|
success : function(data) {
|
|
console.log(data);
|
|
var notifies = data.data;
|
|
var len = notifies.length;
|
|
var cnt = 0;
|
|
var unread = 0;
|
|
|
|
var now = new Date().getTime();
|
|
for(var t = 0; t < len; t++) {
|
|
var notify = notifies[t];
|
|
var createDate = notify.create_date.substring(0, 19);
|
|
var isRead = notify.isRead;
|
|
createDate = createDate.replace(/-/g,'/');
|
|
var from = new Date(createDate).getTime();
|
|
var delta = now - from;
|
|
if(delta <= 604800000) {
|
|
cnt ++;
|
|
}
|
|
if(isRead == 0){
|
|
unread ++;
|
|
}
|
|
}
|
|
|
|
$('#notificationIcon').find('span').remove();
|
|
$('#notificationList').empty();
|
|
|
|
if(unread != 0)
|
|
$("<span class=\"label label-warning\">"+unread+"</span>").appendTo($('#notificationIcon'));
|
|
|
|
$("#notificationHeader").html("You have " + len + " notifications, "+cnt+" in 1 week");
|
|
for(var i = 0; i < len; i++) {
|
|
notify = notifies[i];
|
|
console.log(notify);
|
|
var isRead = notify.isRead;
|
|
var a = $("<a href=\"/notification/detail/"+ notify.id +"/\"><i class=\"fa fa-envelope\"></i> "+ notify.title +"</a>")
|
|
var item = $("<li></li>");
|
|
item.append(a);
|
|
$("#notificationList").append(item);
|
|
}
|
|
|
|
},
|
|
error: function (xhr, type) {
|
|
console.log(xhr);
|
|
}
|
|
}
|
|
|
|
$(document).ready(function(){
|
|
$.ajax(ajaxCfg);
|
|
var refresh = setInterval(function(){
|
|
$.ajax(ajaxCfg);
|
|
}, 10000);
|
|
});
|
|
</script>
|
|
|
|
|
|
{% if mysession['status'] == 'init' %}
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
toastr.options = {
|
|
"closeButton": false,
|
|
"debug": true,
|
|
"progressBar": false,
|
|
"preventDuplicates": false,
|
|
"positionClass": "toast-top-left",
|
|
"onclick": function(){
|
|
window.location.href="/activate/";
|
|
},
|
|
"showDuration": "0",
|
|
"hideDuration": "0",
|
|
"timeOut": "0",
|
|
"extendedTimeOut": "0",
|
|
"showEasing": "swing",
|
|
"hideEasing": "linear",
|
|
"showMethod": "fadeIn",
|
|
"hideMethod": "fadeOut"
|
|
};
|
|
toastr.error("You are not activated. Click this notification to activate your account.");
|
|
});
|
|
</script>
|
|
|
|
{% endif %}
|
|
|
|
{% if mysession['status'] == 'applying' %}
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
toastr.options = {
|
|
"closeButton": false,
|
|
"debug": true,
|
|
"progressBar": false,
|
|
"preventDuplicates": false,
|
|
"positionClass": "toast-top-left",
|
|
"onclick": function(){
|
|
},
|
|
"showDuration": "0",
|
|
"hideDuration": "0",
|
|
"timeOut": "0",
|
|
"extendedTimeOut": "0",
|
|
"showEasing": "swing",
|
|
"hideEasing": "linear",
|
|
"showMethod": "fadeIn",
|
|
"hideMethod": "fadeOut"
|
|
};
|
|
toastr.warning("You applying is being checked.");
|
|
});
|
|
</script>
|
|
|
|
{% endif %}
|
|
|
|
|
|
{% block script_src %}
|
|
{% endblock %}
|
|
</body>
|
|
|
|
</html>
|