smeserver-manager-AdminLTE/root/usr/share/smanager/themes/AdminLTE/templates/layouts/default.html.ep

376 lines
12 KiB
Plaintext

<!DOCTYPE html>
<!--
Main format for the AdminLTE (https://adminlte.io/docs/3.1/) 3.1 Server manager 2 page.
Derived from the AdminLTE starter page: https://adminlte.io/themes/v3/starter.html
brianr@bjsystems.co.uk
To Do (24Apr2021)
1. Breadcrumb trail on right of info bar.
2. Remove heading from content
3. Make active menu entry highlight - DONE
4. Reduced logo for when left sidebar is "just" visible - DONE
5. Icons/ Short form for menu items when left sidebar is "just" visible.
6. Add dark mode - STARTED - nneds a lot more work!
7. Enhance Login button - DONE
8. Forgotten Password on login screen
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= $title %></title>
<!-- Google Font: Source Sans Pro -->
%= stylesheet "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"
<!-- Font Awesome Icons -->
%= stylesheet "/plugins/fontawesome-free/css/all.css"
<!-- Theme style -->
%= stylesheet "/dist/css/adminlte.css"
%= stylesheet "/css/adminlte-menu.css"
%= stylesheet "/css/adminlte-header-and-footer.css"
%= stylesheet "/css/adminlte-content.css"
%= content_for 'head_contrib'
%= include 'partials/_js_imports'
%= include 'common_js'
%= content_for 'refresh'
</head>
<body class="hold-transition sidebar-mini layout-boxed ">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav col-sm-10">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="/smanager" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="mailto:info:koozali.org" class="nav-link">Contact</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="/server-manager" class="nav-link">Prev-SM</a>
</li>
<li id="swttheme" class="nav-item d-none d-sm-inline-block">
% if (scalar @{SrvMngr::theme_list( $c )} > 1) {
%= include 'partials/_swt_theme'
% }
</li>
<li id = "swtsize" class="nav-item d-none d-sm-inline-block">
% param 'fontsize'=>'text-md' unless 'fontsize';
%=label_for fontsize=>'Font size:'
%=select_field fontsize=>[['very small'=>'text-xs'],['small'=>'text-sm'],['medium'=>'text-md'],['large'=>'text-lg'],['very large'=>'text-xl']],onchange=>"SetFontSize()",id=>"fontsizeid"
</li>
<li id = "darkmodeswt" class="nav-item d-none d-sm-inline-block">
%# param 'darkmodeswtcheck'=>0 unless 'darkmodeswtcheck';
%=label_for darkmodeswtcheck=>'Dark Mode:'
%=check_box darkmodeswtcheck=>0, onchange=>"SetDarkMode();", id=>"darkmodeswtid"
</li>
<li class="nav-item d-none d-sm-inline-block">
% if ( not defined $c->session->{lang} ) {
% SrvMngr::init_session ( $c );
% }
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-light-primary elevation-4">
<!-- Brand Logo -->
<a href="/smanager" class="brand-link logo-switch">
<img src="img/smeserver_login.jpg" alt="Koozali Logo" class="brand-image-xl elevation-3 logo-xl" style="opacity: .9;max-height:none;height:auto;">
<img src="img/smeserver_login-xs.jpg" alt="Koozali Logo" class="brand-image-xs elevation-3 logo-xs" style="opacity: .9;max-height:none;height:auto;">
<!--
<span class="brand-text font-weight-light">Server Manager II</span>
-->
</a>
<!-- Sidebar -->
<div class="sidebar float-left">
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item">
%= include 'partials/_nav_menu'
</li>
<li class="nav-item">
% if ( $c->is_logged_in ) {
%= include 'partials/_user_menu'
% }
</li>
<li class="nav-item">
% if ( $c->is_admin ) {
%= include 'partials/_navig2'
% }
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-5">
<b><%= session 'SystemName' %>@<%= session 'DomainName' %></b>
</div>
<div id="h2e23" class="col-sm-3">
% if ( not defined $c->session->{username} ) {
<a class="button" target="_parent" href="login"><b>Login</b></a>
% } else {
<a class="button" target="_parent" href="/smanager/logout"><b><%= $c->session->{username} %> Logout</b></a>
% }
</div>
<div class="col-sm-4">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item active"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">L1</a></li>
<li class="breadcrumb-item"><a href="#">L2</a></li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-12">
%= include 'partials/_info'
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-12">
% if (flash 'success') {
<br><div class=success>
%= "Success: ".$c->render_to_string(inline => flash 'success')
</div>
% }
% if ( flash 'warning' ) {
<br><div class=sme-warning>
%= "Warning: ".$c->render_to_string(inline => flash 'warning')
</div>
%}
% if ( flash 'error' ) {
<br><div class=sme-error>
%= "Error: ".$c->render_to_string(inline => flash 'error')
</div>
%}
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div><!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
% my $content = content('module');
%= $content;
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
<div class="p-3">
<h5>Title</h5>
<p>Sidebar content</p>
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="sm2-footer float-left d-none d-sm-inline">
%= include 'partials/_footer'
<span class="adminlte-version"></span>
%= `rpm -q smeserver-manager`;
&nbsp;
%= `rpm -q smeserver-manager-AdminLTE`;
</div>
<!-- Default to the left
<strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
-->
</footer>
</div>
<!-- ./wrapper -->
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
%= javascript "/plugins/jquery/jquery.min.js"
<!-- Bootstrap 4 -->
%= javascript "/plugins/bootstrap/js/bootstrap.bundle.min.js"
<!-- AdminLTE App -->
%= javascript "/dist/js/adminlte.min.js"
<!-- Breadcrumbs
%= javascript "/js/jquery-bootstrap-breadcrumb.js"
-->
<!--
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
-->
<!-- SME specific scripts -->
%= include 'common_js'
%= content 'js_swapClass'
%= content 'js_togglePassword'
<script>
$(document).ready(function() {
const classSelector = 'adminlte-version';
const versionType = 'full'; // 'full' OR true;
for (var i = 0, max = document.styleSheets.length; i < max; i++) {
if (document.styleSheets[i].href == null) continue;
if ((document.styleSheets[i].href).includes("adminlte")) {
$.ajax({
url: document.styleSheets[i].href,
dataType: "text",
success: function(cssText) {
const searchReg = /AdminLTE v([0-9.]{0,})/;
const result = cssText.match(searchReg);
if (result != null){ $(`.${classSelector}`).text(result[versionType == 'full' ? 0 : 1]);}
}
});
}
}
/* Overload the sme classes with those from AdminLTE */
$(".sme-error").addClass("card card-danger card-body");
$(".sme-warning").addClass("card card-warning card-body");
$(".success").addClass("card card-success card-body");
$(".sme-success").addClass("card card-success card-body");
$("table.sme-border").addClass("table table-striped" );
//$("table.table-sort").DataTable();
$(".dataTables_length").addClass("bs-select");
$("#footer").addClass("card card-info card-body");
$(".module").addClass("card card-info card-body");
$(".central").addClass("card card-info card-body");
$(".review-panel table").addClass("table");
$(".module h1").addClass("card-header");
//$(".module h2").addClass("card-subtitle");
$(".menu-cell").addClass("nav-item");
$(".item").addClass("nav-link");
$(".infobar").addClass("row");
$(".label").addClass("float-left");
$(".action").addClass("float-right btn btn-primary");
$("#h2l1").addClass("row");
$("#h2e22").addClass("float-right");
$("#h2e23").addClass("float-right");
$("#h2e12").addClass("float-right");
//table sort icon
$(".column-sort").addClass("fa fa-sort");
/*Dark mode changes*/
var mode = localStorage.getItem('darkmode');
var myselect = document.getElementById("darkmodeswtid");
if (mode == "") {myselect.checked = false;}
else {myselect.checked = true;}
$("#darkmodeswtid").val(mode).change();
/* Sort out font size */
var fontsize = localStorage.getItem('fontsize');
if (fontsize == ""){fontsize = 'text-md'}
$("#fontsizeid").val(fontsize).change();
var url = window.location;
// for sidebar menu entirely but not cover treeview - not yet working...
//
$('.nav-link').filter(function() {
return this.href == url;
}).parent().addClass('active');
/*
var options = "";
var breadcrumb = $('.breadcrumb').breadcrumb(options);
breadcrumb.push('Level');
breadcrumb.pop();
*/
});
function SetFontSize(){
var myselect = document.getElementById("fontsizeid");
var textclass = myselect.options[myselect.selectedIndex].value;
$("body").removeClass('text-xs text-sm text-md text-lg text-xl').addClass(textclass);
localStorage.setItem('fontsize',textclass);
};
function SetDarkMode(){
var myselect = document.getElementById("darkmodeswtid");
var mode = '';
if (myselect.checked) {mode = "dark-mode";}
$("body").removeClass('dark-mode').addClass(mode);
localStorage.setItem('darkmode',mode);
};
(function ($) {
$.fn.replaceClass = function (pFromClass, pToClass) {
return this.removeClass(pFromClass).addClass(pToClass);
};
}(jQuery));
/** add active class and stay opened when selected */
// for treeview - not currently used. (but I may do!!)
$('ul.treeview-menu a').filter(function() {
return this.href == url;
}).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active');
</script>
</body>
</html>