width: 1% !important; | width: 1% !important; | ||||
} | } | ||||
#row-main { | |||||
margin-top: -12px; | |||||
margin-bottom: -12px; | |||||
display: flex; | |||||
flex-wrap: wrap; | |||||
/* necessary to hide collapsed sidebar */ | |||||
overflow-x: hidden; | |||||
} | |||||
@media (min-width: 992px) { | |||||
#content > div { | |||||
display: flex; | |||||
} | |||||
} | |||||
#content { | |||||
transition: width 0.3s ease; | |||||
} | |||||
#content label { | #content label { | ||||
font-weight: normal; | font-weight: normal; | ||||
} | } | ||||
.sidebar { | |||||
padding: 8px; | |||||
background-color: #ffe; | |||||
transition: margin 0.3s ease; | |||||
} | |||||
.sidebar > div.table-responsive { | |||||
max-height: 610px; | |||||
background-color: white; | |||||
} | |||||
.collapsed { | |||||
/* hide it for small displays */ | |||||
display: none; | |||||
} | |||||
@media (min-width: 992px) { | |||||
.collapsed { | |||||
display: block; | |||||
} | |||||
#sidebar-left.collapsed { | |||||
/* same width as sidebar */ | |||||
margin-left: -25%; | |||||
} | |||||
#sidebar-right.collapsed { | |||||
/* same width as sidebar */ | |||||
margin-right: -25%; | |||||
} | |||||
} | |||||
.sidebar-nav { | |||||
width: 20px; | |||||
border-bottom: none; | |||||
} | |||||
#sidebar-tab-left > a, | |||||
#sidebar-tab-right > a { | |||||
background-color: #ffe; | |||||
padding-top: 0; | |||||
padding-bottom: 0; | |||||
margin-left: 12px; | |||||
margin-right: 12px; | |||||
} | |||||
#sidebar-tab-left { | |||||
transform: rotate(180deg); | |||||
} | |||||
#sidebar-tab-text-left { | |||||
transform: rotate(180deg); | |||||
} | |||||
@media (min-width: 992px) { | |||||
.sidebar-nav { | |||||
margin-left: -2px; | |||||
margin-right: -2px; | |||||
} | |||||
#content { | |||||
border-left: 1px solid #ddd; | |||||
border-right: 1px solid #ddd; | |||||
} | |||||
#sidebar-tab-left { | |||||
transform: translateX(-50%) rotate(90deg) translate(50%, -50%); | |||||
} | |||||
#sidebar-tab-right { | |||||
float: right; | |||||
transform: translateX(50%) rotate(-90deg) translate(-50%, -50%); | |||||
} | |||||
} | |||||
@media (max-width: 991.98px) { | |||||
.sidebar-nav { | |||||
margin-top: -2px; | |||||
margin-bottom: -2px; | |||||
} | |||||
#content { | |||||
border-top: 1px solid #ddd; | |||||
border-bottom: 1px solid #ddd; | |||||
} | |||||
#sidebar-tab-right { | |||||
bottom: 0; | |||||
right: 0; | |||||
} | |||||
} |
</div> | </div> | ||||
<div class="widget-content"> | <div class="widget-content"> | ||||
<div class="row" id="row-main"> | <div class="row" id="row-main"> | ||||
<div class="col-xs-12" id="content"> | |||||
<div class="col-md-3 sidebar" id="sidebar-left"> | |||||
<div class="nopadding table-responsive"> | |||||
<table class="table table-condensed small table-striped table-hover table-bordered" id="selectorsTable-extractors"> | |||||
<thead><tr><th>Name</th><th>Description</th></tr></thead> | |||||
<tbody/> | |||||
</table> | |||||
</div> | |||||
</div> | |||||
<div class="col-md-6 col-xs-12" id="content"> | |||||
<div class="row"> | |||||
<ul class="nav nav-tabs sidebar-nav"> | |||||
<li class="active text-nowrap" id="sidebar-tab-left"> | |||||
<a><div id="sidebar-tab-text-left">↕ List of extractors</div></a> | |||||
</li> | |||||
</ul> | |||||
<div class="col-xs-12"> | |||||
<form class="col-xs-12"> | <form class="col-xs-12"> | ||||
<div class="form-group row"> | <div class="form-group row"> | ||||
<div class="form-group"> | <div class="form-group"> | ||||
<textarea class="form-control" id="selectorsResArea" rows="5" readonly></textarea> | <textarea class="form-control" id="selectorsResArea" rows="5" readonly></textarea> | ||||
</div> | </div> | ||||
</form> | </form> | ||||
</div> | |||||
<ul class="nav nav-tabs sidebar-nav"> | |||||
<li class="active text-nowrap" id="sidebar-tab-right"> | |||||
<a>↕ List of transforms</a> | |||||
</li> | |||||
</ul> | |||||
</div> | |||||
</div> | |||||
<div class="col-md-3 sidebar" id="sidebar-right"> | |||||
<div class="nopadding table-responsive"> | |||||
<table class="table table-condensed small table-striped table-hover table-bordered" id="selectorsTable-transforms"> | |||||
<thead><tr><th>Name</th><th>Description</th></tr></thead> | |||||
<tbody/> | |||||
</table> | |||||
</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> |
$('#selSrv [value="' + e.name + '"]').prop("disabled", true); | $('#selSrv [value="' + e.name + '"]').prop("disabled", true); | ||||
} | } | ||||
}); | }); | ||||
tab_selectors.checkSelectors(ui); | |||||
tab_selectors.displayUI(ui); | |||||
}, | }, | ||||
errorMessage: "Cannot get server status", | errorMessage: "Cannot get server status", | ||||
server: "All SERVERS" | server: "All SERVERS" |
}); | }); | ||||
} | } | ||||
ui.checkSelectors = function (rspamd) { | |||||
function checkSelectors(rspamd) { | |||||
function toggle_form_group_class(remove, add) { | function toggle_form_group_class(remove, add) { | ||||
var icon = { | var icon = { | ||||
error: "remove", | error: "remove", | ||||
$("#selector-feedback-icon").hide(); | $("#selector-feedback-icon").hide(); | ||||
enable_disable_check_btn(); | enable_disable_check_btn(); | ||||
} | } | ||||
} | |||||
function buildLists(rspamd) { | |||||
function build_table_from_json(json, table_id) { | |||||
Object.keys(json).forEach(function (key) { | |||||
var td = $("<td/>"); | |||||
var tr = $("<tr/>") | |||||
.append(td.clone().html("<code>" + key + "</code>")) | |||||
.append(td.clone().html(json[key].description)); | |||||
$(table_id + " tbody").append(tr); | |||||
}); | |||||
} | |||||
function getList(list) { | |||||
rspamd.query("plugins/selectors/list_" + list, { | |||||
method: "GET", | |||||
success: function (neighbours_status) { | |||||
var json = neighbours_status[0].data; | |||||
build_table_from_json(json, "#selectorsTable-" + list); | |||||
}, | |||||
server: get_server(rspamd) | |||||
}); | |||||
} | |||||
getList("extractors"); | |||||
getList("transforms"); | |||||
} | |||||
ui.displayUI = function (rspamd) { | |||||
buildLists(rspamd); | |||||
checkSelectors(rspamd); | |||||
}; | }; | ||||
ui.setup = function (rspamd) { | ui.setup = function (rspamd) { | ||||
function toggleSidebar(side) { | |||||
$("#sidebar-" + side).toggleClass("collapsed"); | |||||
var contentClass = "col-md-6"; | |||||
var openSidebarsCount = $("#sidebar-left").hasClass("collapsed") + | |||||
$("#sidebar-right").hasClass("collapsed"); | |||||
switch (openSidebarsCount) { | |||||
case 1: | |||||
contentClass = "col-md-9"; | |||||
break; | |||||
case 2: | |||||
contentClass = "col-md-12"; | |||||
break; | |||||
default: | |||||
} | |||||
$("#content").removeClass("col-md-12 col-md-9 col-md-6") | |||||
.addClass(contentClass); | |||||
} | |||||
$("#sidebar-tab-left>a").click(function () { | |||||
toggleSidebar("left"); | |||||
return false; | |||||
}); | |||||
$("#sidebar-tab-right>a").click(function () { | |||||
toggleSidebar("right"); | |||||
return false; | |||||
}); | |||||
$("#selectorsMsgClean").on("click", function () { | $("#selectorsMsgClean").on("click", function () { | ||||
$("#selectorsChkMsgBtn").attr("disabled", true); | $("#selectorsChkMsgBtn").attr("disabled", true); | ||||
$("#selectorsMsgArea").val(""); | $("#selectorsMsgArea").val(""); | ||||
}); | }); | ||||
$("#selectorsClean").on("click", function () { | $("#selectorsClean").on("click", function () { | ||||
$("#selectorsSelArea").val(""); | $("#selectorsSelArea").val(""); | ||||
ui.checkSelectors(rspamd); | |||||
checkSelectors(rspamd); | |||||
return false; | return false; | ||||
}); | }); | ||||
$("#selectorsChkMsgBtn").on("click", function () { | $("#selectorsChkMsgBtn").on("click", function () { | ||||
enable_disable_check_btn(); | enable_disable_check_btn(); | ||||
}); | }); | ||||
$("#selectorsSelArea").on("input", function () { | $("#selectorsSelArea").on("input", function () { | ||||
ui.checkSelectors(rspamd); | |||||
checkSelectors(rspamd); | |||||
}); | }); | ||||
}; | }; | ||||