mirror of
https://github.com/ngoduykhanh/wireguard-ui.git
synced 2025-05-23 00:15:19 +03:00
Implements Wake On Lan and management features (#164)
This commit is contained in:
ned3y2k
GitHub
parent
037a6c56d3
commit
0224e1f137
12 changed files with 638 additions and 21 deletions
196
custom/js/wake_on_lan_hosts.js
Normal file
196
custom/js/wake_on_lan_hosts.js
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
const wake_on_lan_new_template = '<div class="col-sm-4" id="{{ .Id }}">\n' +
|
||||
'\t<div class="info-box">\n' +
|
||||
'\t\t<div class="info-box-content">\n' +
|
||||
'\t\t\t<div class="btn-group">\n' +
|
||||
'\t\t\t\t<button type="button" class="btn btn-outline-success btn-sm"\n' +
|
||||
'\t\t\t\t\t\tdata-mac-address="{{ .MacAddress }}">Wake On\n' +
|
||||
'\t\t\t\t</button>\n' +
|
||||
'\t\t\t\t<button type="button"\n' +
|
||||
'\t\t\t\t\t\tclass="btn btn-outline-primary btn-sm btn_modify_wake_on_lan_host"\n' +
|
||||
'\t\t\t\t\t\tdata-toggle="modal" data-target="#modal_wake_on_lan_host"\n' +
|
||||
'\t\t\t\t\t\tdata-name="{{ .Name }}" data-mac-address="{{ .MacAddress }}">Edit\n' +
|
||||
'\t\t\t\t</button>\n' +
|
||||
'\t\t\t\t<button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"\n' +
|
||||
'\t\t\t\t\t\tdata-target="#modal_remove_wake_on_lan_host"\n' +
|
||||
'\t\t\t\t\t\tdata-mac-address="{{ .MacAddress }}">Remove\n' +
|
||||
'\t\t\t\t</button>\n' +
|
||||
'\t\t\t</div>\n' +
|
||||
'\t\t\t<hr>\n' +
|
||||
'\t\t\t<span class="info-box-text"><i class="fas fa-address-card"></i> <span class="name">{{ .Name }}</span></span>\n' +
|
||||
'\t\t\t<span class="info-box-text"><i class="fas fa-ethernet"></i> <span class="mac-address">{{ .MacAddress }}</span></span>\n' +
|
||||
'\t\t\t<span class="info-box-text"><i class="fas fa-clock"></i> <span class="latest-used">Unused</span></span>\n' +
|
||||
'\t\t</div>\n' +
|
||||
'\t</div>\n' +
|
||||
'</div>';
|
||||
|
||||
jQuery(function ($) {
|
||||
$.validator.addMethod('mac', function (value, element) {
|
||||
return this.optional(element) || /^([0-9A-F]{2}[:]){5}([0-9A-F]{2})$/.test(value);
|
||||
}, 'Please enter a valid MAC Address.(uppercase letters and numbers, : only) ex: 00:AB:12:EF:DD:AA');
|
||||
});
|
||||
|
||||
jQuery.each(["put", "delete"], function (i, method) {
|
||||
jQuery[method] = function (url, data, callback, type) {
|
||||
if (jQuery.isFunction(data)) {
|
||||
type = type || callback;
|
||||
callback = data;
|
||||
data = undefined;
|
||||
}
|
||||
|
||||
return jQuery.ajax({
|
||||
url: url,
|
||||
type: method,
|
||||
dataType: type,
|
||||
data: data,
|
||||
success: callback
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
jQuery(function ($) {
|
||||
let newHostHtml = '<div class="col-sm-2 offset-md-4" style=" text-align: right;"><button style="" id="btn_new_wake_on_lan_host" type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#modal_wake_on_lan_host"><i class="nav-icon fas fa-plus"></i> New Host</button></div>';
|
||||
$('h1').parents(".row").append(newHostHtml);
|
||||
});
|
||||
|
||||
jQuery(function ($) {
|
||||
$('.btn-outline-success').click(function () {
|
||||
const $this = $(this);
|
||||
$.put('/wake_on_lan_host/' + $this.data('mac-address'), function (result) {
|
||||
$this.parents('.info-box').find('.latest-used').text(prettyDateTime(result));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
jQuery(function ($) {
|
||||
let $modal_remove_wake_on_lan_host = $('#modal_remove_wake_on_lan_host');
|
||||
let $remove_client_confirm = $('#remove_wake_on_host_confirm');
|
||||
|
||||
$modal_remove_wake_on_lan_host.on('show.bs.modal', function (event) {
|
||||
const $btn = $(event.relatedTarget);
|
||||
const $modal = $(this);
|
||||
|
||||
const $editBtn = $btn.parents('.btn-group').find('.btn_modify_wake_on_lan_host');
|
||||
$modal.find('.modal-body').text("You are about to remove Wake On Lan Host " + $editBtn.data('name'));
|
||||
$remove_client_confirm.val($editBtn.data('mac-address'));
|
||||
})
|
||||
|
||||
$remove_client_confirm.click(function () {
|
||||
const macAddress = $remove_client_confirm.val().replaceAll(":", "-");
|
||||
$.delete('/wake_on_lan_host/' + macAddress);
|
||||
$('#' + macAddress).remove();
|
||||
|
||||
$modal_remove_wake_on_lan_host.modal('hide');
|
||||
});
|
||||
});
|
||||
|
||||
jQuery(function ($) {
|
||||
$('.latest-used').each(function () {
|
||||
const $this = $(this);
|
||||
$this.text(prettyDateTime($this.text().trim()));
|
||||
});
|
||||
});
|
||||
|
||||
jQuery(function ($) {
|
||||
let $modal_wake_on_lan_host = $("#modal_wake_on_lan_host");
|
||||
let $name = $('#frm_wake_on_lan_host_name');
|
||||
let $macAddress = $('#frm_wake_on_lan_host_mac_address');
|
||||
let $oldMacAddress = $('#frm_wake_on_lan_host_old_mac_address');
|
||||
let $contentRow = $('.content .row');
|
||||
let $frm_wake_on_lan_host = $("#frm_wake_on_lan_host");
|
||||
|
||||
// https://jqueryvalidation.org/
|
||||
let validator = $frm_wake_on_lan_host.validate({
|
||||
submitHandler: function () {
|
||||
let data = {
|
||||
name: $name.val(),
|
||||
mac_address: $macAddress.val().toUpperCase(),
|
||||
old_mac_address: $oldMacAddress.val().toUpperCase()
|
||||
};
|
||||
$.ajax({
|
||||
cache: false,
|
||||
method: 'POST',
|
||||
url: '/wake_on_lan_host',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data),
|
||||
success: function (response) {
|
||||
/** @type {string} */
|
||||
let oldMacAddress = $oldMacAddress.val().toUpperCase();
|
||||
|
||||
if (oldMacAddress != '') {
|
||||
let macAddress = response.MacAddress;
|
||||
let name = response.Name;
|
||||
|
||||
let $container = $('#' + oldMacAddress.replaceAll(":", "-"));
|
||||
if (macAddress != oldMacAddress) {
|
||||
$container.attr('id', macAddress.replaceAll(":", "-"));
|
||||
$container.find('.mac-address').text(macAddress);
|
||||
$container.find('[data-mac-address]').data('mac-address', macAddress);
|
||||
}
|
||||
|
||||
$container.find('.name').text(name);
|
||||
$container.find('[data-name]').data('name', name);
|
||||
} else {
|
||||
const $template = $(
|
||||
wake_on_lan_new_template
|
||||
.replace(/{{ .Id }}/g, response.MacAddress.replaceAll(":", "-").toUpperCase())
|
||||
.replace(/{{ .MacAddress }}/g, response.MacAddress.toUpperCase())
|
||||
.replace(/{{ .Name }}/g, response.Name)
|
||||
);
|
||||
|
||||
$contentRow.append($template);
|
||||
}
|
||||
$modal_wake_on_lan_host.modal('hide');
|
||||
toastr.success('Wake on Lan Host Save successfully');
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
toastr.error(responseJson['message']);
|
||||
|
||||
if (typeof (console) != 'undefined')
|
||||
console.log(exception);
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
},
|
||||
rules: {
|
||||
name: {
|
||||
required: true,
|
||||
},
|
||||
mac_address: {
|
||||
required: true,
|
||||
mac: true,
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
name: {
|
||||
required: "Please enter a name"
|
||||
},
|
||||
mac_address: {
|
||||
required: "Please enter a Mac Address"
|
||||
}
|
||||
},
|
||||
errorElement: 'span',
|
||||
errorPlacement: function (error, element) {
|
||||
error.addClass('invalid-feedback');
|
||||
element.closest('.form-group').append(error);
|
||||
},
|
||||
highlight: function (element) {
|
||||
$(element).addClass('is-invalid');
|
||||
},
|
||||
unhighlight: function (element) {
|
||||
$(element).removeClass('is-invalid');
|
||||
}
|
||||
});
|
||||
|
||||
$modal_wake_on_lan_host.on('show.bs.modal', function (e) {
|
||||
const $btn = $(e.relatedTarget);
|
||||
validator.resetForm();
|
||||
$macAddress.removeClass('is-invalid');
|
||||
|
||||
$name.val($btn.data('name'));
|
||||
$macAddress.val($btn.data('mac-address'));
|
||||
$oldMacAddress.val($btn.data('mac-address'));
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue