144 lines
6.1 KiB
HTML
144 lines
6.1 KiB
HTML
<%
|
|
-- Copyright (C) 2018-2020 Lienol <lawlienol@gmail.com>
|
|
%>
|
|
<script src="<%=resource%>/vue.min.js"></script>
|
|
<fieldset class="cbi-section cbi-tblsection" id="users_table">
|
|
<h3>{{title}}</h3>
|
|
<div class="cbi-section-descr"></div>
|
|
<table class="table cbi-section-table" style="">
|
|
<tr class="tr cbi-section-table-titles anonymous">
|
|
<th class="th cbi-section-table-cell" style="width:5%">启用</th>
|
|
<th class="th cbi-section-table-cell" style="width:10%">备注</th>
|
|
<th class="th cbi-section-table-cell" style="width:10%">端口</th>
|
|
<th class="th cbi-section-table-cell" style="width:10%">禁止端口</th>
|
|
<th class="th cbi-section-table-cell" style="width:10%">设备数限制</th>
|
|
<th class="th cbi-section-table-cell" style="width:10%">单线程限速</th>
|
|
<th class="th cbi-section-table-cell" style="width:10%">总限速</th>
|
|
<th class="th cbi-section-table-cell" style="width:10%">已用流量</th>
|
|
<th class="th cbi-section-table-cell" style="width:10%">可用流量</th>
|
|
<!-- <th class="th cbi-section-table-cell" style="width:10%">SSR链接</th> -->
|
|
<th class="th cbi-section-table-cell cbi-section-actions"></th>
|
|
</tr>
|
|
<template v-for="user in users">
|
|
<tr class="tr cbi-section-table-row cbi-rowstyle-1">
|
|
<td class="td cbi-value-field" data-name="enable" data-title="启用">
|
|
<input type="hidden" :id="'ssr_mudb_server_' + user.port + '.enable'" :name="'ssr_mudb_server_' + user.port + '.enable'" :value="user.enable">
|
|
<input type="checkbox" :value="user.enable" @click="check_enable(user, $event)" :checked="user.enable == 1">
|
|
</td>
|
|
|
|
<td class="td cbi-value-field" data-name="remarks" data-title="备注">{{user.user}}</td>
|
|
<td class="td cbi-value-field" data-name="port" data-title="端口">{{user.port}}</td>
|
|
<td class="td cbi-value-field" data-name="forbidden_port" data-title="禁止端口">{{user.forbidden_port == '' ? '无' : user.forbidden_port}}</td>
|
|
<td class="td cbi-value-field" data-name="device_limit" data-title="设备数限制">{{user.protocol_param}}</td>
|
|
<td class="td cbi-value-field" data-name="speed_limit_per_con" data-title="单线程限速">{{user.speed_limit_per_con == '0' ? '无' : user.speed_limit_per_con + ' Kb/s'}}</td>
|
|
<td class="td cbi-value-field" data-name="speed_limit_per_user" data-title="总限速">{{user.speed_limit_per_user == '0' ? '无' : user.speed_limit_per_user + ' Kb/s'}}</td>
|
|
<td class="td cbi-value-field" data-name="used_total_traffic" data-title="已用流量">{{byte_format(user.u + user.d)}}</td>
|
|
<td class="td cbi-value-field" data-name="transfer_enable" data-title="可用流量">{{byte_format(user.transfer_enable)}}</td>
|
|
<!-- <td class="td cbi-value-field" data-name="ssr_link" data-title="SSR链接"><a href="#" @click="get_link(user)">获取</a></td> -->
|
|
|
|
<td class="td cbi-section-table-cell nowrap cbi-section-actions">
|
|
<div>
|
|
<input class="cbi-button cbi-button-remove" type="button" @click="clear_transfer(user)" value="清空流量">
|
|
<input class="cbi-button cbi-button-edit" type="button" value="编辑" :onclick="'location.href=\'/cgi-bin/luci/admin/vpn/ssr_mudb_server/user/' + user.port + '\''">
|
|
<input class="cbi-button cbi-button-remove" type="button" @click="remove(user)" value="删除">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
<div class="cbi-section-create cbi-tblsection-create">
|
|
<input class="cbi-button cbi-button-add" type="button" value="添加" :onclick="'location.href=\'/cgi-bin/luci/admin/vpn/ssr_mudb_server/user\''">
|
|
</div>
|
|
<fieldset class="cbi-section" id="_log_fieldset">
|
|
<legend>日志</legend>
|
|
<input class="cbi-button cbi-input-remove" type="button" @click="clear_log()" value="清空日志">
|
|
<textarea id="log_textarea" class="cbi-input-textarea" style="width: 100%;margin-top: 10px;" rows="20" wrap="off" readonly="readonly"></textarea>
|
|
</fieldset>
|
|
</fieldset>
|
|
|
|
<script>
|
|
var api_url = '<%=luci.dispatcher.build_url("admin", "vpn", "ssr_mudb_server")%>'
|
|
var vue = new Vue({
|
|
el: '#users_table',
|
|
data: {
|
|
title: '用户管理',
|
|
users: []
|
|
},
|
|
methods: {
|
|
clear_log: function() {
|
|
XHR.get(api_url + "/clear_log", null,
|
|
function (x, result) {
|
|
if (x.status == 200) {
|
|
var log_textarea = document.getElementById('log_textarea');
|
|
log_textarea.innerHTML = "";
|
|
log_textarea.scrollTop = log_textarea.scrollHeight;
|
|
}
|
|
}
|
|
)
|
|
},
|
|
check_enable: function(user, e) {
|
|
if (e.currentTarget.checked == true) {
|
|
document.getElementById("ssr_mudb_server_" + user.port + ".enable").value = "1";
|
|
} else {
|
|
document.getElementById("ssr_mudb_server_" + user.port + ".enable").value = "0";
|
|
}
|
|
},
|
|
get_link: function(user) {
|
|
XHR.get(api_url + "/get_link", { port : user.port },
|
|
function(x, result) {
|
|
if(x && x.status == 200)
|
|
alert(result.link);
|
|
}
|
|
)
|
|
},
|
|
clear_transfer: function(user) {
|
|
if (confirm('确认清空“' + user.user + '”的使用流量吗？') == true) {
|
|
XHR.get(api_url + "/clear_traffic", { port: user.port },
|
|
function(x, result) {
|
|
if(x && x.status == 200)
|
|
window.location.replace(window.location.href);
|
|
}
|
|
)
|
|
}
|
|
},
|
|
remove: function(user) {
|
|
if (confirm('确认删除“' + user.user + '”吗？') == true) {
|
|
XHR.get(api_url + "/remove_user", { port: user.port },
|
|
function(x, result) {
|
|
if(x && x.status == 200)
|
|
window.location.replace(window.location.href);
|
|
}
|
|
)
|
|
}
|
|
},
|
|
byte_format: function(byte) {
|
|
var suff = [ "B", "KB", "MB", "GB", "TB" ];
|
|
for (var i = 0; i < suff.length; i++) {
|
|
if (byte > 1024 && i < suff.length) {
|
|
byte = (byte / 1024).toFixed(2);
|
|
} else {
|
|
return byte + " " + suff[i];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
XHR.get(api_url + "/user_list", null,
|
|
function (x, result) {
|
|
if (x.status == 200) {
|
|
vue.users = result;
|
|
}
|
|
}
|
|
)
|
|
|
|
XHR.poll(2, api_url + "/get_log", null,
|
|
function (x, result) {
|
|
if (x.status == 200) {
|
|
var log_textarea = document.getElementById('log_textarea');
|
|
log_textarea.innerHTML = x.responseText;
|
|
log_textarea.scrollTop = log_textarea.scrollHeight;
|
|
}
|
|
}
|
|
)
|
|
</script> |