Convert alert modals to blade (#11373)

This commit is contained in:
Jellyfrog
2020-04-03 16:52:42 +02:00
committed by GitHub
parent 217969e140
commit 0b5fcb58c8
3 changed files with 166 additions and 0 deletions

View File

@@ -0,0 +1,85 @@
<form class="form-horizontal">
@csrf
<div class="modal fade" id="alert_ack_modal" tabindex="-1" role="dialog" aria-labelledby="alert_notes" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h5 class="modal-title" id="alert_notes">@lang('Acknowledge Alert')</h5>
</div>
<div class="modal-body">
<div class='form-group'>
<label for='ack_msg' class='col-sm-4 col-md-3 control-label' title="@lang('Add a message to the acknowledgement')">@lang('(Un)Acknowledgement note:')</label>
<div class="col-sm-8 col-md-9">
<input type='text' id='ack_msg' name='ack_msg' class='form-control' autofocus>
</div>
</div>
<div class="form-group" id="ack_section">
<label for="ack_until_clear" class="col-sm-4 col-md-3 control-label" title="@lang('Acknowledge until alert clears')">@lang('Acknowledge until clear:')</label>
<div class="col-sm-8 col-md-9">
<input type='checkbox' name='ack_until_clear' id='ack_until_clear'>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-md-offset-3 col-sm-3 col-md-2">
<input type="hidden" id="ack_alert_id" name="ack_alert_id" value="">
<input type="hidden" id="ack_alert_state" name="ack_alert_state" value="">
<button class="btn btn-success" id="ack-alert" name="ack-alert">@lang('Ack alert')</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
@push('scripts')
<script type="text/javascript">
$('#alert_ack_modal').on('show.bs.modal', function() {
if ($("#ack_alert_state").val() == 2) {
var button_label = 'Un-acknowledge alert';
$('#ack_section').hide();
} else {
var button_label = 'Acknowledge alert';
$('#ack_section').show();
}
document.getElementById('ack-alert').innerText = button_label;
$("#ack_until_clear").bootstrapSwitch('state', {{ Config::get('alert.ack_until_clear') ? 'true' : 'false' }});
});
$("#ack-alert").click('', function(event) {
event.preventDefault();
var ack_alert_id = $("#ack_alert_id").val();
var ack_alert_note = $('#ack_msg').val();
var ack_alert_state = $("#ack_alert_state").val();
var ack_until_clear = $("#ack_until_clear").bootstrapSwitch('state');
$.ajax({
type: "POST",
url: "ajax_form.php",
dataType: "json",
data: {
type: "ack-alert",
alert_id: ack_alert_id,
state: ack_alert_state,
ack_msg: ack_alert_note,
ack_until_clear: ack_until_clear
},
success: function(data) {
if (data.status === "ok") {
toastr.success(data.message);
var $table = $('table.alerts');
var sortDictionary = $table.bootgrid("getSortDictionary");
$table.bootgrid('reload');
$table.bootgrid("sort", sortDictionary);
$("#alert_ack_modal").modal('hide');
} else {
toastr.error(data.message);
}
},
error: function() {
toastr.error(data.message);
}
});
});
</script>
@endpush

View File

@@ -0,0 +1,79 @@
<form>
@csrf
<div class="modal fade" id="alert_notes_modal" tabindex="-1" role="dialog" aria-labelledby="alert_notes" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h5 class="modal-title" id="alert_notes">@lang('Alert notes')</h5>
</div>
<div class="modal-body">
<div class="row">
<div class='col-sm-12'>
<div class="form-group">
<textarea class="form-control" id="note" name="note" rows="15"></textarea>
</div>
</div>
</div>
<div class="row">
<div class='col-sm-12'>
<div class="form-group">
<input type="hidden" id="alert_id" name="alert_id" value="">
<button class="btn btn-success" id="save-alert-notes" name="save-alert-notes">@lang('Save notes')</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
@push('scripts')
<script type="text/javascript">
$('#alert_notes_modal').on('show.bs.modal', function(event) {
var alert_id = $("#alert_id").val();
$.ajax({
type: "POST",
url: "ajax_form.php",
data: {
type: "alert-notes",
alert_id: alert_id,
sub_type: 'get_note'
},
dataType: "json",
success: function(data) {
$("#note").val(data.note);
}
});
});
$("#save-alert-notes").click('', function(event) {
event.preventDefault();
var alert_id = $("#alert_id").val();
var note = $("#note").val();
$.ajax({
type: "POST",
url: "ajax_form.php",
data: {
type: "alert-notes",
alert_id: alert_id,
sub_type: 'set_note',
note: note
},
dataType: "json",
success: function(data) {
if (data.status == 'ok') {
toastr.success(data.message);
$("#alert_notes_modal").modal('hide');
} else {
toastr.error(data.message);
}
},
error: function() {
toastr.error(data.message);
}
});
});
</script>
@endpush

View File

@@ -3,6 +3,8 @@
@section('title', __('Overview'))
@section('content')
@include('alerts.modals.ack')
@include('alerts.modals.notes')
@if (!$bare)
<div class="row">
<div class="col-md-6">