cuchulufm/cuchulu/modules/admin2/templates/layout.phtml

210 lines
7.3 KiB
PHTML

<%
from cuchulu.modules.admin2.libraries.config import modules_admin, modules_admin_icons
from cuchulu.libraries.i18n import I18n
from cuchulu.libraries.sessionplugin import get_session
i18n=I18n('admin2')
dark_checked=""
dark_css=""
session=get_session()
if session.get('theme', '0')==True:
dark_checked='checked'
dark_css='dark'
lang_selected=session['lang']
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>${title}</title>
<link href="${make_media_url('css/admin.css', 'admin2')}" rel="stylesheet" />
<link href="${make_media_url('css/responsive-nav.css', 'admin2')}" rel="stylesheet" />
<link href="${make_media_url('css/tooltipster.bundle.min.css', 'admin2')}" rel="stylesheet" />
<!--<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> -->
<%block name="extra_css">
</%block>
<script language="Javascript" src="${make_media_url('js/jquery-3.7.1.min.js', 'admin2')}"></script>
<script language="Javascript" src="${make_media_url('js/responsive-nav.min.js', 'admin2')}"></script>
<script language="Javascript" src="${make_media_url('js/tooltipster.bundle.min.js', 'admin2')}"></script>
${load_js()|n}
<%block name="extra_js">
</%block>
<%block name="extra_header">
</%block>
</head>
<body class="${dark_css}">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="home" viewBox="0 0 16 16">
<path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
</symbol>
%for module_icon in modules_admin_icons.values():
${module_icon|n}
%endfor
</svg>
<div id="layer_loading"><div id="container_loading"><div class="lds-dual-ring"></div></div></div>
<div id="languages_general">
</div>
<div id="logout">
<%block name="logout"><a href="${url_for('admin_app.logout_admin')}"><i class="fa fa-power-off" aria-hidden="true"></i> Logout</a></%block>
</div>
<div id="center_body">
<div id="header">
<a href="#nav" id="toggle"><i class="fa fa-bars" aria-hidden="true"></i><span>Menu</span></a>
<%block name="title_admin"><span id="title_phango">Admin</span> <span id="title_framework">site!</span>
</%block>
<%block name="languages">
<div id="languages_general">
<%def name="select_lang(i18n, lang_selected)">${'choose_flag' if i18n==lang_selected else 'no_choose_flag'}</%def>
</%block>
% if lang_selected!=None:
% for i18n_lang in i18n.dict_i18n:
<a class="${select_lang(i18n_lang, lang_selected)}" href="${url_for('change_lang', lang=i18n_lang)}"><img src="${make_media_url('images/languages/'+i18n_lang+'.png', 'admin2')}" alt="${i18n_lang}"/></a>
% endfor
% endif
</div>
</div>
<div class="content_admin">
<nav id="menu" class="nav-collapse">
<ul>
<li class="menu_title"><%block name="applications"><i class="fa fa-gear" aria-hidden="true"></i>${_('Applications')}</li></%block>
% for module, arr_mod_v in modules_admin.items():
<li>
% if module in session['modules']:
% for mod_v in arr_mod_v:
% if len(mod_v)>2 and type(mod_v[2]).__name__=='str':
<div class="father_admin">
<svg class="bi me-2" width="16" height="16"><use xlink:href="#${mod_v[1]}"></use></svg>
% if type(mod_v[0]).__name__=='function':
${mod_v[0]()}
% else:
${mod_v[0]}
%endif
</div>
% else:
<a href="${url_for(module)}" class="${'selected_menu' if module==module_selected else ''}">
<svg class="bi me-2" width="16" height="16"><use xlink:href="#${mod_v[1]}"></use></svg>
% if type(mod_v[0]).__name__=='function':
${mod_v[0]()}
% else:
${mod_v[0]}
%endif
</a>
% endif
% endfor
% endif
</li>
% endfor
</ul>
</nav>
<div class="contents">
<h1>${title}</h1>
<div class="switch-btn">
<div class="switch-text">
${_('Dark theme')}
</div>
<div class="switch-slider">
<label class="switch">
<input type="checkbox" name="theme" value="1" id="theme" ${dark_checked}/>
<span class="slider round"></span>
</label>
</div>
</div>
<div class="content">
<%
flash=show_flash_message()
%>
% if flash!='':
<div class="flash">${flash}</div>
<script>setTimeout(function () { $(".flash").fadeOut(); }, 3000);</script>
% endif
<%block name="content">
</%block>
</div>
</div>
</div>
<div id="loading_ajax">
</div>
<script>
var navigation = responsiveNav(".nav-collapse", {customToggle: "#toggle"});
$('.tooltip').tooltipster({
animation: 'fade',
delay: 100,
trigger: 'click'
});
const slider = document.querySelector('input[name="theme"]');
slider.addEventListener("change", function () {
//Block button while send to ajax.
$(this).prop("disabled",true);
var dark='';
if (this.checked) {
document.body.classList.add("dark");
dark='1';
} else {
document.body.classList.remove("dark");
dark='0';
}
$.ajax({
url: "${url_for('admin_app.change_theme')}?theme="+dark,
type: 'GET',
data: {},
success: function (data) {
if(!data.error) {
console.log('Changed to dark in all pages');
}
else {
console.log('Cannot set dark theme in all pages!');
}
$(slider).prop("disabled",false);
},
error: function (data) {
alert('Error: '+data.status+' '+data.statusText);
$(slider).prop("disabled", false);
},
dataType: 'json'
});
});
$(document).ready(function () {
$('#layer_loading').hide();
});
</script>
<%block name="jscript_block">
</%block>
</body>
</html>