jostreff/wireguard-ui
1
0
Fork 0
mirror of https://github.com/ngoduykhanh/wireguard-ui.git synced 2025-07-10 17:43:58 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

작업중 커밋

Browse source
This commit is contained in:
Kyeongdae Moon 2022-02-19 17:51:41 +09:00 • committed by ned3y2k
parent 4be3a65691
commit 6e87a96d34
10 changed files with 383 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

9
templates/base.html
View file

@ -128,6 +128,15 @@
</p>
</a>
</li>
<li class="nav-item">
<a href="/wake_on_lan_hosts" class="nav-link {{if eq .baseData.Active "wake_on_lan_hosts" }}active{{end}}">
<i class="nav-icon fas fa-solid fa-power-off"></i>
<p>
Wake On Lan Hosts
</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->

171
templates/wake_on_lan_hosts.html Normal file
View file

@ -0,0 +1,171 @@
{{define "title"}}
Wake On Lan Hosts
{{end}}
{{define "top_css"}}
{{end}}
{{define "username"}}
{{ .username }}
{{end}}
{{define "page_title"}}
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">&times;</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>
<!-- /.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>
</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>
{{end}}