mirror of
https://github.com/ngoduykhanh/wireguard-ui.git
synced 2025-07-10 17:43:58 +03:00
Add Wake On Lan Feature
This commit is contained in:
ned3y2k
parent
7988015983
commit
9d5fc3f72b
9 changed files with 374 additions and 322 deletions
|
|
@ -1,171 +1,123 @@
|
|||
{{define "title"}}
|
||||
Wake On Lan Hosts
|
||||
Wake On Lan Hosts
|
||||
{{end}}
|
||||
|
||||
{{define "top_css"}}
|
||||
{{end}}
|
||||
|
||||
{{define "username"}}
|
||||
{{ .username }}
|
||||
{{ .username }}
|
||||
{{end}}
|
||||
|
||||
{{define "page_title"}}
|
||||
Wake On Lan Hosts
|
||||
Wake On Lan Hosts
|
||||
{{end}}
|
||||
|
||||
{{define "page_content"}}
|
||||
|
||||
<div class="modal fade" id="modal_wake_on_lan_host">
|
||||
<!-- MacAddress string `json:"MacAddress"`-->
|
||||
<!-- Name string `json:"Name"`-->
|
||||
<!-- LatestIPAddress string `json:"LatestIPAddress"`-->
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">New Wake On Lan Host</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<div class="modal fade" id="modal_wake_on_lan_host">
|
||||
<!-- MacAddress string `json:"MacAddress"`-->
|
||||
<!-- Name string `json:"Name"`-->
|
||||
<!-- LatestIPAddress string `json:"LatestIPAddress"`-->
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">New Wake On Lan Host</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<form name="frm_wake_on_lan_host" id="frm_wake_on_lan_host">
|
||||
<div class="modal-body">
|
||||
<input type="hidden" id="frm_wake_on_lan_host_old_mac_address" name="old_mac_address">
|
||||
<div class="form-group">
|
||||
<label for="frm_wake_on_lan_host_name" class="control-label">Name</label>
|
||||
<input type="text" class="form-control" id="frm_wake_on_lan_host_name" name="name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="frm_wake_on_lan_host_mac_address" class="control-label">Mac Address</label>
|
||||
<input type="text" class="form-control" id="frm_wake_on_lan_host_mac_address"
|
||||
name="mac_address">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer justify-content-between">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<form name="frm_wake_on_lan_host" id="frm_wake_on_lan_host">
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="modal_remove_wake_on_lan_host">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content bg-danger">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Remove</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="hidden" id="frm_wake_on_lan_host_old_mac_address" name="old_mac_address">
|
||||
<div class="form-group">
|
||||
<label for="frm_wake_on_lan_host_name" class="control-label">Name</label>
|
||||
<input type="text" class="form-control" id="frm_wake_on_lan_host_name" name="name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="frm_wake_on_lan_host_mac_address" class="control-label">Mac Address</label>
|
||||
<input type="text" class="form-control" id="frm_wake_on_lan_host_mac_address" name="mac_address">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer justify-content-between">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
{{ if .error }}
|
||||
<div class="alert alert-warning" role="alert">{{.error}}</div>
|
||||
{{ end}}
|
||||
|
||||
<div class="row">
|
||||
{{ range $idx, $host := .hosts }}
|
||||
{{- /*gotype: github.com/ngoduykhanh/wireguard-ui/model.WakeOnLanHost*/ -}}
|
||||
<div class="col-sm-4" id="{{.MacAddress}}">
|
||||
<div class="info-box">
|
||||
<div class="info-box-content">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-outline-success btn-sm" data-mac-address="{{ .MacAddress }}">Wake On</button>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm btn_modify_wake_on_lan_host" data-toggle="modal" data-target="#modal_wake_on_lan_host" data-name="{{ .Name }}" data-mac-address="{{ .MacAddress }}">Edit</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal" data-target="#modal_remove_wake_on_lan_host" data-mac-address="{{ .MacAddress }}">Remove</button>
|
||||
</div>
|
||||
<hr>
|
||||
<span class="info-box-text"><i class="fas fa-address-card"></i> {{ .Name }}</span>
|
||||
<span class="info-box-text"><i class="fas fa-ethernet"></i> {{ .MacAddress }}</span>
|
||||
<span class="info-box-text"><i class="fas fa-ethernet"></i>
|
||||
{{ if .LatestUsed }}
|
||||
{{ .LatestUsed }}
|
||||
{{ else }}
|
||||
Unused
|
||||
{{ end }}
|
||||
</span>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-dark" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-outline-dark" id="remove_wake_on_host_confirm">Apply</button>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<!-- /.modal-content -->
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
{{ if .error }}
|
||||
<div class="alert alert-warning" role="alert">{{.error}}</div>
|
||||
{{ end}}
|
||||
|
||||
<div class="row">
|
||||
{{ range $idx, $host := .hosts }}
|
||||
{{- /*gotype: github.com/ngoduykhanh/wireguard-ui/model.WakeOnLanHost*/ -}}
|
||||
<div class="col-sm-4" id="{{ $host.ResolveResourceName }}">
|
||||
<div class="info-box">
|
||||
<div class="info-box-content">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-outline-success btn-sm"
|
||||
data-mac-address="{{ .MacAddress }}">Wake On
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-outline-primary btn-sm btn_modify_wake_on_lan_host"
|
||||
data-toggle="modal" data-target="#modal_wake_on_lan_host"
|
||||
data-name="{{ .Name }}" data-mac-address="{{ .MacAddress }}">Edit
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
|
||||
data-target="#modal_remove_wake_on_lan_host"
|
||||
data-mac-address="{{ .MacAddress }}">Remove
|
||||
</button>
|
||||
</div>
|
||||
<hr>
|
||||
<span class="info-box-text"><i class="fas fa-address-card"></i> <span class="name">{{ .Name }}</span></span>
|
||||
<span class="info-box-text"><i class="fas fa-ethernet"></i> <span class="mac-address">{{ .MacAddress }}</span></span>
|
||||
<span class="info-box-text"><i class="fas fa-clock"></i>
|
||||
<span class="latest-used">
|
||||
{{ if .LatestUsed }}
|
||||
{{ .LatestUsed }}
|
||||
{{ else }}
|
||||
Unused
|
||||
{{ end }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{end}}
|
||||
{{define "bottom_js"}}
|
||||
<script>
|
||||
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);
|
||||
|
||||
// https://jqueryvalidation.org/
|
||||
let $modal = $("#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');
|
||||
|
||||
$('#btn_new_wake_on_lan_host').click(function() {
|
||||
alert(1);
|
||||
// FIXME modal 초기화
|
||||
});
|
||||
$('.btn_modify_wake_on_lan_host').each(function () {
|
||||
let $btn = $(this);
|
||||
$btn.click(function () {
|
||||
console.log($btn.data('mac-address'), $btn.data('name'));
|
||||
// FIXME MODAL Data데이터삽입
|
||||
});
|
||||
});
|
||||
$modal.on('shown.bs.modal', function (e) {});
|
||||
|
||||
$("#frm_wake_on_lan_host").validate({
|
||||
submitHandler: function() {
|
||||
let data = {
|
||||
name: $name.val(),
|
||||
mac_address: $macAddress.val(),
|
||||
old_mac_address: $oldMacAddress.val()
|
||||
};
|
||||
$.ajax({
|
||||
cache: false,
|
||||
method: 'POST',
|
||||
url: '/wake_on_lan_host',
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data),
|
||||
success: function(response) {
|
||||
// FIXME 화면에 동적으로 추가 하는 코드 추가
|
||||
$modal.modal('hide');
|
||||
toastr.success('Wake on Lan Host Save successfully');
|
||||
},
|
||||
error: function(jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
toastr.error(responseJson['message']);
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
},
|
||||
rules: {
|
||||
name: {
|
||||
required: true,
|
||||
},
|
||||
mac_address: {
|
||||
required: 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, errorClass, validClass) {
|
||||
$(element).addClass('is-invalid');
|
||||
},
|
||||
unhighlight: function (element, errorClass, validClass) {
|
||||
$(element).removeClass('is-invalid');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
<script src="/static/custom/js/wake_on_lan_hosts.js"></script>
|
||||
{{end}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue