<!DOCTYPE HTML>
<html>
<head>
<#include "/adminPage/common.html"/>
<style type="text/css">
.layui-form-label {
	width: 150px;
}

.layui-input-block {
	margin-left: 180px;
}

.path {
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #CFFFBF;
	max-width: 100px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.value {
	display: inline-block;
	margin-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #BFDFFF;
	max-width: 300px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.liteBtn {
	width: 100px;
}

.blk {
	display: inline-block;
	width: 105px;
	text-align: right;
}

.blk2 {
	display: inline-block;
	width: 40px;
}

.descr{
	color: teal;
}

.layui-icon {
	cursor: pointer;
}

.blue {
	font-weight: bolder;
}

.short {
	width: 120px;
}

.long {
	width: 300px;
	display: inline-block;
}

#paramList td {
	padding-left: 5px !important;
	padding-right: 5px !important;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	height: 110px;
}
</style>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">

		<#include "/adminPage/header.html"/>
		<#include "/adminPage/menu.html"/>

		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 15px">
				<fieldset class="layui-elem-field layui-field-title">
					<legend>${menuStr.server}</legend>
				</fieldset>

				<form action="${ctx}/adminPage/server" id="searchForm" method="post">
					<div class="layui-form">
						<div class="layui-inline">
							<button type="button" class="layui-btn layui-btn-normal" onclick="add()">${serverStr.add}</button>
						</div>
						<div class="layui-inline">
							<button type="button" class="layui-btn layui-input-inline" onclick="openImport()">${serverStr.importServer}</button>
						</div>

						<div class="layui-inline">
							<button type="button" class="layui-btn layui-btn-normal" onclick="testPort()">${serverStr.testPort}</button>
						</div>

						<div class="layui-inline">
							<input type="text" name="keywords" class="layui-input" value="${keywords}">
						</div>

						<button type="button" class="layui-btn" onclick="search()">${commonStr.search}</button>


						<input type="hidden" name="sort" id="sort" value="${sort}">
						<input type="hidden" name="direction" id="direction" value="${direction}">
						<input type="hidden" name="curr" value="${page.curr}">
						<input type="hidden" name="limit" value="${page.limit}">
					</div>

					<table class="layui-table layui-form">
						<thead>
							<tr>
								<th>
									${serverStr.transpondType}
									<i class="layui-icon ${(direction=='desc'&&sort=='proxyType')?string('layui-icon-down','layui-icon-up')} ${(sort=='proxyType')?string('blue','')}" id="proxyTypeSort"
										onclick="sort('proxyTypeSort')"></i>
								</th>
								<th>
									${serverStr.listen}
									<i class="layui-icon ${(direction=='desc'&&sort=='listen')?string('layui-icon-down','layui-icon-up')} ${(sort=='listen')?string('blue','')}" id="listenSort" onclick="sort('listenSort')"></i>
								</th>
								<th>
									${serverStr.serverName}
									<i class="layui-icon ${(direction=='desc'&&sort=='serverName')?string('layui-icon-down','layui-icon-up')} ${(sort=='serverName')?string('blue','')}" id="serverNameSort"
										onclick="sort('serverNameSort')"></i>
								</th>
								<th>${serverStr.ssl}</th>
								<th>${serverStr.sslOption}</th>
								<th>${serverStr.proxyTarget}</th>
								<th>${serverStr.status}</th>

								<th style="width: 200px;">${serverStr.descr}</th>
								<th>${commonStr.operation}</th>
							</tr>
						</thead>
						<tbody>
							<#list page.records as ext>
							<tr>
								<td>
									<#if ext.server.proxyType==0>http</#if>
									<#if ext.server.proxyType==1>TCP</#if>
									<#if ext.server.proxyType==2>UDP</#if>
								</td>
								<td>
									${ext.server.listen}
									<#if ext.server.def==1>default</#if>
								</td>
								<td>	
									
									<#if ext.server.serverName==''>${serverStr.all}</#if>
									<#if ext.server.serverName!=''>${ext.server.serverName}</#if>
									
								</td>
								<td>
									<span class="descr">
									<#if ext.server.ssl==0>${commonStr.no}</#if>
									<#if ext.server.ssl==1>${commonStr.yes}</#if>
									</span>
								</td>
								<td>
									<#if ext.server.ssl==1> 
										<span class="blk">${serverStr.httpToHttps}：</span> 
										<span class="descr">
										<#if ext.server.rewrite==0>${commonStr.no}</#if> 
										<#if ext.server.rewrite==1>${commonStr.yes}</#if> 
										</span>
										<br>
										<span class="blk">${serverStr.http2}：</span> 
										<span class="descr">
										<#if ext.server.http2==0>${commonStr.no}</#if> 
										<#if ext.server.http2==1>${commonStr.yes}</#if> 
										</span>
									</#if>
								</td>


								<td>${ext.locationStr}</td>

								<td>
									<input type="checkbox" name="enable" lay-filter="enable" value="${ext.server.id}" lay-text="ON|OFF" lay-skin="switch"${(ext.server.enable)?string('checked','')}>
								</td>

								<td>
									${ext.server.descr}
									<a href="javascript:editDescr('${ext.server.id}','${ext.server.descr}')" style="color: blue; text-decoration: underline;">${commonStr.edit}</a>
								</td>


								<td>
									<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="preview('${ext.server.id}','server')">${commonStr.preview}</button>
									
									<button type="button" class="layui-btn layui-btn-sm" onclick="edit('${ext.server.id}', false)">${commonStr.edit}</button>
									<button type="button" class="layui-btn layui-btn-sm" onclick="clone('${ext.server.id}')">${commonStr.clone}</button>
									<button type="button" class="layui-btn layui-btn-danger layui-btn-sm" onclick="del('${ext.server.id}')">${commonStr.del}</button>

								</td>
							</tr>
							</#list>
						</tbody>
					</table>
					<div id="pageInfo"></div>
				</form>
			</div>
		</div>
	</div>

	<div style="height: 0px; width: 0px; overflow: hidden;">
		<!-- 弹出框 -->
		<div class="layui-form" id="windowDiv" style="padding: 15px; display: none">
			<form id="addForm">
				<input type="hidden" id="id" name="id">

				<div class="layui-container">
					<div class="layui-row">
						<div class="layui-col-md4">
							<div class="layui-form-item">
								<label class="layui-form-label">${serverStr.transpondType}</label>
								<div class="layui-input-inline">
									<select name="proxyType" id="proxyType" lay-filter="proxyType">
										<option value="0">http</option>
										<option value="1">TCP</option>
										<option value="2">UDP</option>
									</select>
								</div>
							</div>


							<div class="layui-form-item">
								<label class="layui-form-label">
									${serverStr.listen}
									<span class="red">*</span>
								</label>
								<div class="layui-input-inline">
									<input type="text" name="ip" id="ip" class="layui-input" style="width: 125px; display: inline-block;" placeholder="${serverStr.ipDefault}">
									<input type="text" name="listen" id="listen" style="width: 60px; display: inline-block;" class="layui-input" placeholder="${serverStr.port}">
									<input type="checkbox" name="def" id="def" title="${serverStr.default}" lay-skin="primary">
								</div>
							</div>

							<div class="proxyHttp">
								<div class="layui-form-item">
									<label class="layui-form-label">${serverStr.serverName}</label>
									<div class="layui-input-inline">
										<input type="text" name="serverName" id="serverName" class="layui-input" placeholder="${serverStr.example}: www.baidu.com">
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">${serverStr.ssl}</label>
									<div class="layui-input-inline">
										<select name="ssl" id="ssl" lay-filter="ssl">
											<option value="0">${commonStr.no}</option>
											<option value="1">${commonStr.yes}</option>
										</select>
									</div>
								</div>
							</div>
							
							
							<div class="layui-form-item">
								<label class="layui-form-label">${serverStr.pass}</label>
								<div class="layui-input-inline">
									<select name="passwordId" id="passwordId" >
										<option value="">--${serverStr.noPass}--</option>
										<#list passwordList as password>
											<option value="${password.id}">${password.name}</option>
										</#list>
									</select>
								</div>
							</div>
						</div>

						<div class="layui-col-md8">
							<div class="layui-form-item">
								<div class="proxyTcp">
									<label class="layui-form-label">${serverStr.toUpstream}</label>
									<div class="layui-input-inline">
										<select name="proxyUpstreamId" id="proxyUpstreamId">
											<#list upstreamTcpList as upstream>
											<option value="${upstream.id}">${upstream.name}</option>
											</#list>

											<#if upstreamTcpSize==0>
											<option value="">${serverStr.noUpstream}</option>
											</#if>
										</select>
									</div>
								</div>

								<div class="pemDiv proxyHttp">
									<div class="proxyHttp">
										<label class="layui-form-label">&nbsp;</label>
										<div class="layui-input-block">
											<button type="button" class="layui-btn layui-btn-normal" onclick="selectCert()">${serverStr.selectCert}</button>
											<div class="layui-form-mid layui-word-aux"></div>
										</div>
									</div>
								</div>
							</div>


							<div class="layui-form-item pemDiv proxyHttp" style="margin-bottom: 0px;">
								<label class="layui-form-label">${serverStr.pemPath}</label>
								<div class="layui-input-block">
									<button type="button" class="layui-btn layui-btn-sm liteBtn" id="pemBtn">${serverStr.uploadPem}</button>

									<button type="button" class="layui-btn layui-btn-sm layui-btn-normal liteBtn" onclick="selectPem()">${commonStr.selectPath}</button>

									<input type="hidden" name="pem" id="pem" class="layui-input">
									<div class="layui-form-mid layui-word-aux ellipsis" id="pemPath"></div>

								</div>
							</div>
							<div class="layui-form-item pemDiv proxyHttp" style="margin-bottom: 5px;">
								<label class="layui-form-label">${serverStr.keyPath}</label>
								<div class="layui-input-block">
									<button type="button" class="layui-btn layui-btn-sm liteBtn" id="keyBtn">${serverStr.uploadKey}</button>

									<button type="button" class="layui-btn layui-btn-sm layui-btn-normal liteBtn" onclick="selectKey()">${commonStr.selectPath}</button>

									<input type="hidden" name="key" id="key" class="layui-input">
									<div class="layui-form-mid layui-word-aux ellipsis" id="keyPath"></div>
								</div>
							</div>

							<div class="layui-form-item pemDiv proxyHttp">

								<label class="layui-form-label">${serverStr.http2}</label>
								<div class="layui-input-inline" style="width: 100px;">
									<select name="http2" id="http2">
										<option value="1">${commonStr.yes}</option>
										<option value="0">${commonStr.no}</option>
									</select>
								</div>
							</div>

							<div class="layui-form-item pemDiv proxyHttp">
								<label class="layui-form-label">${serverStr.protocols}</label>

								<div class="layui-input-inline" style="width: 400px;">
									<input type="checkbox" class="protocols" id="TLSv1" lay-skin="primary" value="TLSv1" title="TLSv1">
									<input type="checkbox" class="protocols" id="TLSv1_1" lay-skin="primary" value="TLSv1.1" title="TLSv1.1">
									<input type="checkbox" class="protocols" id="TLSv1_2" lay-skin="primary" value="TLSv1.2" title="TLSv1.2">
									<input type="checkbox" class="protocols" id="TLSv1_3" lay-skin="primary" value="TLSv1.3" title="TLSv1.3">
								</div>
							</div>
							
							<div class="layui-form-item pemDiv proxyHttp">
								<label class="layui-form-label">${serverStr.httpToHttps}</label>
								<div class="layui-input-inline" style="width: 100px;">
									<select name="rewrite" id="rewrite" lay-filter="rewrite">
										<option value="1">${commonStr.yes}</option>
										<option value="0">${commonStr.no}</option>
									</select>
								</div>
								
								<div  id="rewriteListenDiv">
									<label class="layui-form-label" style="width: 80px;">${serverStr.rewriteListen}</label>
									<div class="layui-input-inline">
										<input type="text" name="rewriteIp" id="rewriteIp" class="layui-input" style="width: 125px; display: inline-block;" placeholder="${serverStr.ipDefault}">
										<input type="text" name="rewriteListen" id="rewriteListen" style="width: 60px; display: inline-block;" class="layui-input" placeholder="${serverStr.port}">
									</div>
								</div>
							</div>
							
						</div>
					</div>
				</div>

				<div class="layui-form-item">
					<button type="button" class="layui-btn layui-btn-sm" style="margin-left: 195px;" onclick="serverParam()">${serverStr.extParm}</button>
					<textarea style="display: none;" id="serverParamJson" name="serverParamJson"></textarea>
				</div>

				<div class="layui-form-item">
					<button type="button" class="layui-btn layui-btn-sm layui-btn-normal proxyHttp" onclick="addItem()">${serverStr.addLocation}</button>
				</div>

				<div class="layui-form-item proxyHttp">
					<table class="layui-table">
						<thead>
							<tr>
								<th>${serverStr.listenPath}</th>
								<th>${serverStr.proxyType}</th>
								<th style="width: 550px;">${serverStr.proxyTarget}</th>
								<th>${commonStr.operation}</th>
							</tr>
						</thead>
						<tbody id="itemList" class="itemList">

						</tbody>
					</table>
				</div>


				<div class="layui-form-item">
					<button type="button" class="layui-btn layui-btn-normal" onclick="addOver()">${commonStr.submit}</button>
					<button type="button" class="layui-btn" onclick="layer.closeAll()">${commonStr.close}</button>
				</div>
			</form>
		</div>

		<div id="paramJsonDiv" style="display: none; padding: 15px;">
			<div class="layui-form-item">
				<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="addParam()">${serverStr.addParm}</button>

				<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="selectTemplate('paramList')">${serverStr.addTemplate}</button>
				<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="selectTemplateAsParam('paramList')">${serverStr.addTemplateAsParam}</button>
		
			</div>
			<div class="layui-form-item">
				<input type="hidden" id="targertId">
				<table class="layui-table">
					<thead>
						<tr>
							<th>${commonStr.name}</th>
							<th>${commonStr.value}</th>
							<th style="width: 170px;">${commonStr.operation}</th>
						</tr>
					</thead>
					<tbody id="paramList">

					</tbody>
				</table>
			</div>

			<div class="layui-form-item">
				<button type="button" class="layui-btn layui-btn-normal" onclick="addParamOver()">${commonStr.submit}</button>
				<button type="button" class="layui-btn" onclick="layer.close(paramIndex)">${commonStr.close}</button>
			</div>
		</div>

		<div id="upstreamSelect" style="display: none;">
			<div class="layui-inline" style="width: 150px;">
				<select name="upstreamId">

					<#list upstreamList as upstream>
					<option value="${upstream.id}">${upstream.name}</option>
					</#list>

					<#if upstreamSize==0>
					<option value="">${serverStr.noUpstream}</option>
					</#if>
				</select>
			</div>
			<div class="layui-inline" style="width: 150px;">
				<input type="text" name="upstreamPath" class="layui-input" placeholder="${serverStr.extPathTips}">
			</div>
		</div>

		<div id="certDiv" style="padding: 15px; display: none">
			<div class="layui-form">
				<div class="layui-form-item">
					<label class="layui-form-label">${serverStr.selectCert}</label>
					<div class="layui-input-inline">
						<select name="certId" id="certId">
							<#list certList as cert>
							<option value="${cert.id}">${cert.domain}</option>
							</#list>
						</select>
					</div>
				</div>

				<div class="layui-form-item">
					<button type="button" class="layui-btn layui-btn-normal" onclick="selectCertOver()">${commonStr.submit}</button>
					<button type="button" class="layui-btn" onclick="layer.close(certIndex)">${commonStr.close}</button>
				</div>
			</div>
		</div>
		<!-- 选择导入文件弹出框 -->
		<div class="layui-form" id="importDiv" style="padding: 15px; display: none">

			<div class="layui-form-item">
				<div class="layui-input-inline" style="width: 400px;">
					<div class="layui-form-mid layui-word-aux">${serverStr.importMsg}</div>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-inline">
					<input type="text" id="nginxPath" name="nginxPath" class="layui-input" placeholder="${commonStr.filePath}">
				</div>

				<div class="layui-input-inline">
					<i class="layui-icon layui-icon-export" onclick="selectRootCustom('nginxPath')"></i>
				</div>
			</div>


			<div class="layui-form-item">
				<button type="button" class="layui-btn layui-btn-normal" onclick="importServer()">${serverStr.importServer}</button>
				<button type="button" class="layui-btn" onclick="layer.close(importIndex)">${commonStr.close}</button>
			</div>
		</div>


		<div class="layui-form" id="descrDiv" style="padding: 15px; display: none">
			<input type="hidden" id="serverId" name="serverId">
			<div class="layui-form-item">
				<div class="layui-input-inline" style="width: 100%">
					<textarea type="text" id="descr" name="descr" class="layui-textarea">
					
					</textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<button type="button" class="layui-btn layui-btn-normal" onclick="editDescrOver()">${commonStr.ok}</button>
				<button type="button" class="layui-btn" onclick="layer.closeAll()">${commonStr.close}</button>
			</div>
		</div>
		
	</div>

	<#include '/adminPage/script.html'/>
	<#include '/adminPage/select_root.html'/>
	<#include '/adminPage/select_template.html'/>
	<#include '/adminPage/select_preview.html'/>
	<script src="${ctx}/js/adminPage/server/index.js?v=${jsrandom}" type="text/javascript"></script>
</body>


</html>