mvc: rework previous, unified look and feel

This commit is contained in:
Franco Fichtner 2018-02-28 19:56:38 +00:00
parent 9ff52058e1
commit 49fbd936d8
3 changed files with 41 additions and 26 deletions

View File

@ -35,7 +35,7 @@
formatTokenizersUI();
$('.selectpicker').selectpicker('refresh');
// request service status on load and update status box
updateServiceControlUI("proxy", "processing-dialog");
updateServiceControlUI('proxy');
});
/*************************************************************************************************************
@ -165,8 +165,7 @@
draggable: true
});
} else {
// request service status after successful save and update status box
updateServiceControlUI("proxy", "processing-dialog");
updateServiceControlUI('proxy');
}
});
});
@ -265,4 +264,3 @@
</div>
{{ partial("layout_partials/base_dialog",['fields':formDialogEditBlacklist,'id':'DialogEditBlacklist','label':lang._('Edit blacklist')])}}
{{ partial("layout_partials/base_dialog_processing") }}

View File

@ -264,6 +264,20 @@
</footer>
</main>
<!-- dialog "wait for (service) action" -->
<div class="modal fade" id="OPNsenseStdWaitDialog" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p><strong>{{ lang._('Please wait...') }}</strong></p>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%"></div>
</div>
</div>
</div>
</div>
</div>
<!-- bootstrap script -->
<script src="/ui/js/bootstrap.min.js"></script>
<script src="/ui/js/bootstrap-select.min.js"></script>

View File

@ -136,8 +136,8 @@ function mapDataToFormUI(data_get_map) {
/**
* update service status buttons in user interface
*/
function updateServiceStatusUI(status) {
function updateServiceStatusUI(status)
{
var status_html = '<span class="label label-opnsense label-opnsense-sm ';
if (status == "running") {
@ -153,38 +153,41 @@ function updateServiceStatusUI(status) {
$('#service_status_container').html(status_html);
}
function updateServiceControlUI(serviceName, processingDialog)
/**
* operate service status buttons in user interface
*/
function updateServiceControlUI(serviceName)
{
ajaxCall(url="/api/" + serviceName + "/service/status", sendData={}, callback=function(data,status) {
var status_html = '';
var status_html = '<span class="label label-opnsense label-opnsense-sm ';
var status_icon = '';
var buttons = '';
if (data['status'] == "running") {
status_html += 'btn-success' ;
status_html += 'label-success';
status_icon = 'play';
buttons += '<span id="restartService" class="btn btn-sm btn-default"><i class="fa fa-refresh fa-fw"></i></span> ';
buttons += '<span id="stopService" class="btn btn-sm btn-default"><i class="fa fa-stop fa-fw"></span>';
} else if (data['status'] == "stopped") {
status_html += 'btn-danger' ;
status_html += 'label-danger';
status_icon = 'stop';
buttons += '<span id="startService" class="btn btn-sm btn-default"><i class="fa fa-play fa-fw"></i></span>';
} else {
status_html += 'hidden';
}
var buttons = '<span id="startService" class="btn ' + status_html + ' glyphicon glyphicon-play"></span>';
buttons += '<span id="restartService" class="btn btn-default srv_status_act glyphicon glyphicon-refresh"></span>';
buttons += '<span id="stopService" class="btn btn-default srv_status_act glyphicon glyphicon-stop"></span>';
$('#service_status_container').html(buttons);
status_html += '"><i class="fa fa-' + status_icon + ' fa-fw"/></span>';
$('#service_status_container').html(status_html + " " + buttons);
var commands = ["start", "restart", "stop"];
commands.forEach(function(command) {
$("#" + command + "Service").click(function(){
if (processingDialog !== undefined) {
$('#' + processingDialog).modal('show');
}
$('#OPNsenseStdWaitDialog').modal('show');
ajaxCall(url="/api/" + serviceName + "/service/" + command, sendData={},callback=function(data,status) {
if (processingDialog !== undefined) {
$('#' + processingDialog).modal('hide');
}
$('#OPNsenseStdWaitDialog').modal('hide');
ajaxCall(url="/api/" + serviceName + "/service/status", sendData={}, callback=function(data,status) {
$("#startService").removeClass("btn-danger").removeClass("btn-success");
if (data['status'] == "running") {
$("#startService").addClass("btn-success");
} else if (data['status'] == "stopped") {
$("#startService").addClass("btn-danger");
}
updateServiceControlUI(serviceName);
});
});
});