Merge pull request #151 from MikoyChinese/theme-mdui [skip ci]

Fix viewpassword and Add Network Traffic Statistics in service page.

Co-authored-by: MikoyChinese <22676744+MikoyChinese@users.noreply.github.com>
This commit is contained in:
naiba 2022-01-10 13:25:45 +02:00 committed by GitHub
commit 4949b390e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 91 additions and 55 deletions

View File

@ -251,21 +251,25 @@
} else { } else {
ns.live = true ns.live = true
if (statusCards.showCard) { if (statusCards.showCard) {
if (infoTooltip[ns.ID]) {
var disk = statusCards.formatByteSize(ns.State.DiskUsed) + '/' + statusCards.formatByteSize(ns.Host.DiskTotal); var disk = statusCards.formatByteSize(ns.State.DiskUsed) + '/' + statusCards.formatByteSize(ns.Host.DiskTotal);
var upTime = statusCards.secondToDate(ns.State.Uptime); var upTime = statusCards.secondToDate(ns.State.Uptime);
var content = var content =
`System: ${ns.Host.Platform}-${ns.Host.PlatformVersion}[${ns.Host.Arch}] `System: ${ns.Host.Platform}-${ns.Host.PlatformVersion}[${ns.Host.Arch}]
CPU: ${ns.Host.CPU} CPU: ${ns.Host.CPU}
Disk: ${disk} Disk: ${disk}
Online: ${upTime} Online: ${upTime}
Version: ${ns.Host.Version}`; Version: ${ns.Host.Version}`;
if (infoTooltip[ns.ID]) {infoTooltip[ns.ID].$element[0].innerText = content;} infoTooltip[ns.ID].$element[0].innerText = content;
}
else { else {
if (document.getElementById(`info-${ns.ID}`)) infoTooltip[ns.ID] = new mdui.Tooltip(`#info-${ns.ID}`, {}) if (document.getElementById(`info-${ns.ID}`)) infoTooltip[ns.ID] = new mdui.Tooltip(`#info-${ns.ID}`, {});
} }
if (memTooltip[ns.ID]) {
var content = `${statusCards.formatByteSize(ns.State.MemUsed)}/${statusCards.formatByteSize(ns.Host.MemTotal)}`; var content = `${statusCards.formatByteSize(ns.State.MemUsed)}/${statusCards.formatByteSize(ns.Host.MemTotal)}`;
if (memTooltip[ns.ID]) {memTooltip[ns.ID].$element[0].innerText = content;} memTooltip[ns.ID].$element[0].innerText = content;
}
else { else {
if (document.getElementById(`mem-${ns.ID}`)) memTooltip[ns.ID] = new mdui.Tooltip(`#mem-${ns.ID}`, {}); if (document.getElementById(`mem-${ns.ID}`)) memTooltip[ns.ID] = new mdui.Tooltip(`#mem-${ns.ID}`, {});
} }

View File

@ -72,6 +72,45 @@
</tbody> </tbody>
</table> </table>
</div> </div>
{{if .CycleTransferStats}}
<h2 class="mdui-m-t-5 mdui-text-center">Network Traffic Statistics</h2>
<div class="mdui-table-fluid">
<table class="mdui-table mdui-table-hoverable">
<thead>
<tr>
<th class="mdui-text-center">ID</th>
<th class="mdui-text-center">Rule</th>
<th class="mdui-text-center">Sever</th>
<th class="mdui-text-center">Date From</th>
<th class="mdui-text-center">Date To</th>
<th class="mdui-text-center">MAX</th>
<th class="mdui-text-center">MIN</th>
<th class="mdui-text-center">Check Next</th>
<th class="mdui-text-center">Usage</th>
</tr>
</thead>
<tbody>
{{range $id, $stats := .CycleTransferStats}}
{{range $innerId, $transfer := $stats.Transfer}}
<tr>
<td class="mdui-text-center">{{$id}}</td>
<td class="mdui-text-center">{{$stats.Name}}</td>
<td class="mdui-text-center">{{index $stats.ServerName $innerId}}</td>
<td class="mdui-text-center">{{$stats.From|tf}}</td>
<td class="mdui-text-center">{{$stats.To|tf}}</td>
<td class="mdui-text-center">{{$stats.Max|bf}}</td>
<td class="mdui-text-center">{{$stats.Min|bf}}</td>
<td class="mdui-text-center">{{(index $stats.NextUpdate $innerId)|sft}}</td>
<td class="mdui-text-center">{{$transfer|bf}}</td>
</tr>
{{end}}
{{end}}
</tbody>
</table>
</div>
{{end}}
</div> </div>
{{template "theme-mdui/footer" .}} {{template "theme-mdui/footer" .}}

View File

@ -17,18 +17,30 @@
<body> <body>
<div class="mdui-container" id="container"> <div class="mdui-container" id="container">
<div class="mdui-dialog mdui-dialog-prompt mdui-dialog-open">
<div class="mdui-dialog-title">验证查看密码</div>
<div class="mdui-dialog-content">
<div class="mdui-textfield">
<i class="mdui-icon material-icons">lock</i>
<label class="mdui-textfield-label">密码</label>
<input class="mdui-textfield-input" type="password" id="password">
</div>
</div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple mdui-text-color-primary" id="confimBtn">验证</button>
</div>
</div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/mdui@1.0.2/dist/js/mdui.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mdui@1.0.2/dist/js/mdui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script> <script>
var content = '<div class="mdui-textfield">' + var $input = mdui.$('#container').find('.mdui-textfield-input');
'<i class="mdui-icon material-icons">lock</i>' + var $dialog = new mdui.Dialog(mdui.$('.mdui-dialog'));
'<label class="mdui-textfield-label">密码</label>' + var onConfirm = async function() {
'<input class="mdui-textfield-input" type="password">' + var pwd = $input.val();
'</div>';
var onConfirm = async function(pwd) {
const res = await fetch("/view-password", { const res = await fetch("/view-password", {
method: 'POST', method: 'POST',
headers: {'Content-Type': 'application/json'}, headers: {'Content-Type': 'application/json'},
@ -39,49 +51,30 @@
if (res.redirected) { if (res.redirected) {
window.location.href = res.url; window.location.href = res.url;
} else { } else {
window.location.reload();
mdui.snackbar({ mdui.snackbar({
message: '密码错误', message: '密码错误',
position: 'top', position: 'top',
timeout: 2000,
}); });
mdui.mutation(); mdui.mutation();
}
}
};
var onConfirmClick = function (dialog) {
var value = dialog.$element.find('.mdui-textfield-input').val();
onConfirm(value, dialog);
};
var checkPwd = mdui.dialog({
title: '验证查看密码',
content: content,
buttons: [
{
text: '验证',
bold: false,
onClick: onConfirmClick,
}
],
cssClass: 'mdui-dialog-prompt',
modal: true,
onOpen: function (dialog) {
var $input = dialog.$element.find('.mdui-textfield-input');
mdui.updateTextFields($input);
$input[0].focus(); $input[0].focus();
}
}
};
mdui.updateTextFields($input);
$input.on('keydown', function (event) { $input.on('keydown', function (event) {
if (event.keyCode === 13) { if (event.keyCode === 13) {
var value = dialog.$element.find('.mdui-textfield-input').val(); var value = $input.val();
onConfirm(value, dialog); onConfirm(value);
return false; return false;
} }
return; return;
}); });
}, document.getElementById('confimBtn').addEventListener('click', onConfirm);
});
$('#container').add(checkPwd); $dialog.open();
$input[0].focus();
mdui.mutation(); mdui.mutation();
</script> </script>
</body> </body>