webui: Facelift for alert templates, also added bootgrid (#7041)

* webui: facelift for alert templates, also converted the custom code to bootgrid

* Update alert_template.inc.php

removed var = action line, no longer needed.
This commit is contained in:
Aldemir Akpinar
2017-07-19 01:54:14 +03:00
committed by Neil Lathwood
parent 3b2c42009b
commit 3ca39c810d
4 changed files with 69 additions and 96 deletions

View File

@@ -100,11 +100,9 @@ foreach ($operators as $operator) {
$('#alert-template').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var template_id = button.data('template_id');
var action = button.data('template_action');
var template_id = $('#template_id').val();
if(action == 'edit') {
$('#template_id').val(template_id);
if(template_id != null && template_id != '') {
$('#create-template').text('Update template');
$.ajax({
type: "POST",

View File

@@ -56,8 +56,7 @@ foreach (dbFetchRows("SELECT `id`,`rule`,`name` FROM `alert_rules`", array()) as
<script>
$('#attach-alert-template').on('show.bs.modal', function(e) {
template_id = $(e.relatedTarget).data('template_id');
$("#template_id").val(template_id);
var template_id = $('#template_id').val();
$.ajax({
type: "POST",
url: "ajax_form.php",
@@ -76,6 +75,7 @@ $('#attach-alert-template').on('show.bs.modal', function(e) {
$('#attach-alert-template').on('hide.bs.modal', function(e) {
$('#rules_list').val([]);
$('template_id').val('');
});
$('#alert-template-attach').click('', function(event) {
@@ -96,11 +96,11 @@ $('#alert-template-attach').click('', function(event) {
$("#message").html('<div class="alert alert-info">'+msg+'</div>');
$("#attach-alert-template").modal('hide');
} else {
$('#template_error').html('<div class="alert alert-info">'+msg+'</div>');
$('#template_error').html('<div class="alert alert-danger">'+msg+'</div>');
}
},
error: function() {
$("#template_error").html('<div class="alert alert-info">The alert rules could not be attached to this template.</div>');
$("#template_error").html('<div class="alert alert-danger">The alert rules could not be attached to this template.</div>');
}
});
});

View File

@@ -40,10 +40,6 @@ if (is_admin() === false) {
</div>
<script>
$('#confirm-delete-alert-template').on('show.bs.modal', function(event) {
template_id = $(event.relatedTarget).data('template_id');
$("#template_id").val(template_id);
});
$('#alert-template-removal').click('', function(event) {
event.preventDefault();
@@ -55,16 +51,20 @@ $('#alert-template-removal').click('', function(event) {
dataType: "html",
success: function(msg) {
if(msg.indexOf("ERROR:") <= -1) {
$("#row_"+template_id).remove();
$('[data-row-id="'+template_id+'"]').remove();
}
$("#template_id").val('');
$("#message").html('<div class="alert alert-info">'+msg+'</div>');
$("#confirm-delete-alert-template").modal('hide');
},
error: function() {
$("#message").html('<div class="alert alert-info">The alert template could not be deleted.</div>');
$("#message").html('<div class="alert alert-danger">The alert template could not be deleted.</div>');
$("#confirm-delete-alert-template").modal('hide');
}
});
});
$('#confirm-delete-alert-template').on('hide.bs.modal', function(event) {
$('#template_id').val('');
});
</script>

View File

@@ -14,92 +14,67 @@ require_once 'includes/modal/alert_template.inc.php';
require_once 'includes/modal/delete_alert_template.inc.php';
require_once 'includes/modal/attach_alert_template.inc.php';
?>
<form method="post" action="" id="result_form">
<div class="table-responsive">
<table id="templatetable" class="table table-hover table-condensed" width="100%">
<thead>
<tr>
<th data-column-id="id" data-searchable="false" data-identifier="true" data-type="numeric">#</th>
<th data-column-id="templatename">Name</th>
<th data-column-id="actions" data-searchable="false" data-formatter="commands">Action</th>
</tr>
</thead>
<tbody>
<?php
if (isset($_POST['results_amount']) && $_POST['results_amount'] > 0) {
$results = $_POST['results'];
} else {
$results = 50;
}
echo '<div class="table-responsive">
<table class="table table-hover table-condensed" width="100%">
<tr>
<th>#</th>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td colspan="2">';
if ($_SESSION['userlevel'] >= '10') {
echo '<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#alert-template" data-template_id="">Create new alert template</button>';
}
echo '</td>
<td><select name="results" id="results" class="form-control input-sm" onChange="updateResults(this);">';
$result_options = array(
'10',
'50',
'100',
'250',
'500',
'1000',
'5000',
);
foreach ($result_options as $option) {
echo "<option value='$option'";
if ($results == $option) {
echo ' selected';
}
echo ">$option</option>";
}
echo '</select></td>';
$count_query = 'SELECT COUNT(id)';
$full_query = 'SELECT *';
$query = ' FROM `alert_templates`';
$count_query = $count_query.$query;
$count = dbFetchCell($count_query, $param);
if (!isset($_POST['page_number']) && $_POST['page_number'] < 1) {
$page_number = 1;
} else {
$page_number = $_POST['page_number'];
}
$start = (($page_number - 1) * $results);
$full_query = $full_query.$query." LIMIT $start,$results";
$full_query = "SELECT id, name from alert_templates";
foreach (dbFetchRows($full_query, $param) as $template) {
echo '<tr id="row_'.$template['id'].'">
<td>#' . $template['id'] . '</td>
echo '<tr data-row-id="'.$template['id'].'">
<td>'.$template['id'].'</td>
<td>'.$template['name'].'</td>
<td>';
if ($_SESSION['userlevel'] >= '10') {
echo "<div class='btn-group btn-group-sm' role='group'>";
echo "<button type='button' class='btn btn-primary btn-sm' data-toggle='modal' data-target='#alert-template' data-template_id='".$template['id']."' data-template_action='edit' name='edit-alert-template'><i class='fa fa-lg fa-pencil' aria-hidden='true'></i></button> ";
echo "<button type='button' class='btn btn-danger btn-sm' data-toggle='modal' data-target='#confirm-delete-alert-template' data-template_id='".$template['id']."' name='delete-alert-template'><i class='fa fa-lg fa-trash' aria-hidden='true'></i></button> ";
echo "<button type='button' class='btn btn-warning btn-sm' data-toggle='modal' data-target='#attach-alert-template' data-template_id='".$template['id']."' name='attach-alert-template'><i class='fa fa-th-list' aria-hidden='true'></i></button>";
echo "</div>";
}
echo ' </td>
<td></td>
</tr>';
}
if (($count % $results) > 0) {
echo ' <tr>
<td colspan="2" align="center">'.generate_pagination($count, $results, $page_number).'</td>
</tr>';
}
?>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
var grid = $('#templatetable').bootgrid({
rowCount: [50, 100, 250, -1],
templates: {
header: '<div id="{{ctx.id}}" class="{{css.header}}"> \
<div class="row"> \
<?php if ($_SESSION['userlevel'] >= '10') { ?>
<div class="col-sm-8 actionBar"> \
<span class="pull-left"> \
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#alert-template" data-template_id="">Create new alert template</button> \
</span> \
</div> \
<div class="col-sm-4 actionBar"><p class="{{css.search}}"></p><p class="{{css.actions}}"></p></div></div></div>'
<?php } else { ?>
<div class="actionBar"><p class="{{css.search}}"></p><p class="{{css.actions}}"></p></div></div></div>'
echo '</table>
<input type="hidden" name="page_number" id="page_number" value="'.$page_number.'">
<input type="hidden" name="results_amount" id="results_amount" value="'.$results.'">
</form>
</div>';
<?php } ?>
},
formatters: {
"commands": function(column, row) {
var response = "<button type=\"button\" class=\"btn btn-xs btn-primary command-edit\" data-toggle='modal' data-target='#alert-template' data-template_id=\"" + row.id + "\" data-template_action='edit' name='edit-alert-template'><i class=\"fa fa-pencil\" aria-hidden=\"true\"></i></button> " + "<button type=\"button\" class=\"btn btn-xs btn-danger command-delete\" data-toggle=\"modal\" data-target='#confirm-delete-alert-template' data-template_id=\"" + row.id + "\" name='delete-alert-template'><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i></button> " + "<button type='button' class='btn btn-warning btn-xs command-attach' data-toggle='modal' data-target='#attach-alert-template' data-template_id='" + row.id + "' name='attach-alert-template'><i class='fa fa-th-list' aria-hidden='true'></i></button>";
return response;
}
},
}).on("loaded.rs.jquery.bootgrid", function() {
/* Executes after data is loaded and rendered */
grid.find(".command-edit").on("click", function(e) {
$('#template_id').val($(this).data("template_id"));
$("#alert-template").modal('show');
}).end().find(".command-delete").on("click", function(e) {
$('#template_id').val($(this).data("template_id"));
$('#confirm-delete-alert-template').modal('show');
}).end().find(".command-attach").on("click", function(e) {
$('#template_id').val($(this).data("template_id"));
$('#attach-alert-template').modal('show');
});
});
});
</script>