<%
-- 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>