docklet/web/templates/base_AdminLTE.html

395 lines
13 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
2017-02-17 16:27:31 +08:00
<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>
2016-08-10 16:45:46 +08:00
<!-- 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">
2017-02-17 16:27:31 +08:00
<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="/cloud/"><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>
2017-02-17 16:27:31 +08:00
<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">
2017-02-17 16:27:31 +08:00
<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>&copy;&nbsp;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;
2016-08-02 16:30:17 +08:00
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);
2016-08-02 16:30:17 +08:00
var isRead = notify.isRead;
createDate = createDate.replace(/-/g,'/');
var from = new Date(createDate).getTime();
var delta = now - from;
if(delta <= 604800000) {
cnt ++;
}
2016-08-02 16:30:17 +08:00
if(isRead == 0){
unread ++;
}
}
$('#notificationIcon').find('span').remove();
$('#notificationList').empty();
2016-08-02 16:30:17 +08:00
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);
2016-08-02 16:30:17 +08:00
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);
}
}
2016-06-07 12:25:40 +08:00
$(document).ready(function(){
$.ajax(ajaxCfg);
var refresh = setInterval(function(){
$.ajax(ajaxCfg);
}, 10000);
});
2016-06-07 12:25:40 +08:00
</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>