github/natpass
4
0
Fork 0
mirror of https://github.com/lwch/natpass.git synced 2024-04-21 12:41:54 +00:00
Code Issues Projects Releases Wiki Activity

实现terminal页面

Browse Source
This commit is contained in:
lwch
2021-10-14 14:44:26 +08:00
parent 72fadcc727
commit 93b583dd83
6 changed files with 72 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/dashboard/css/index.css
View File
html/dashboard/files.html
+3 -2
View File
@@ -1,7 +1,7 @@
{{define "all"}}
{{template "header" .}}
<link rel="stylesheet" href="/css/index.css" />
<script src="/js/index.js"></script>
<!-- <link rel="stylesheet" href="/css/index.css" />
<script src="/js/index.js"></script> -->
{{template "aside" .}}
<script>aside.active_files();</script>
<div class="content-wrapper">
@@ -19,6 +19,7 @@
<!-- header -->
<section class="content">
<div class="container-fluid">
暂未实现
</div>
<!-- container -->
</section>
html/dashboard/index.html
-1
View File
@@ -1,6 +1,5 @@
{{define "all"}}
{{template "header" .}}
<link rel="stylesheet" href="/css/index.css" />
<script src="/js/index.js"></script>
{{template "aside" .}}
<script>aside.active_dashboard();</script>
html/dashboard/js/index.js
+7 -2
View File
@@ -31,10 +31,15 @@ var page = {
recv_packet += link.recv_packet;
});
var op = '';
if (tunnel.type == 'reverse') {
switch (tunnel.type) {
case 'reverse':
op = `
<a href="http://${location.hostname}:${tunnel.port}" target="_blank">http</a>
<a href="https://${location.hostname}:${tunnel.port}" target="_blank">https</a>`
<a href="https://${location.hostname}:${tunnel.port}" target="_blank">https</a>`;
break;
case 'shell':
op = `<a href="http://${location.host}/terminal.html?name=${tunnel.name}">连接</a>`;
break;
}
var str = `
<tr>
html/dashboard/js/terminal.js
+47
View File
@@ -0,0 +1,47 @@
var page = {
init: function() {
page.load();
$('#connect').click(page.connect);
},
load: function() {
$.get('/api/tunnels', function(ret) {
$('#terms').empty();
$.each(ret, function(_, tunnel) {
if (tunnel.type != 'shell') {
return;
}
$('#terms').append($(`<option value="${tunnel.port}">${tunnel.name}</option>`));
});
});
},
connect: function() {
$('#tabs>.nav-item>.active').removeClass('active');
$('#tab-content>.active').removeClass('show').removeClass('active');
var idx = page.idx;
var str = `
<li class="nav-item">
<button class="nav-link active" type="button">
shell - [${$('#terms option:selected').text()}]
</button>
</li>`;
var obj = $(str);
obj.click(function() {
var $this = $(this);
$('#tabs>.nav-item>.active').removeClass('active');
$this.find('button').addClass('active');
$('#tab-content>.active').removeClass('show').removeClass('active');
$('#tab-'+idx).addClass('show').addClass('active');
});
$('#tabs').append(obj);
var str = `
<div class="tab-pane fade show active" id="tab-${idx}">
<iframe src="http://${location.hostname}:${$('#terms').val()}"
style="width:100%;min-height:500px"></iframe>
</div>`;
var obj = $(str);
$('#tab-content').append(obj);
page.idx++;
},
idx: 0
};
$(document).ready(page.init);
html/dashboard/terminal.html
+15 -2
View File
@@ -1,7 +1,6 @@
{{define "all"}}
{{template "header" .}}
<link rel="stylesheet" href="/css/index.css" />
<script src="/js/index.js"></script>
<script src="/js/terminal.js"></script>
{{template "aside" .}}
<script>aside.active_terminal();</script>
<div class="content-wrapper">
@@ -19,6 +18,20 @@
<!-- header -->
<section class="content">
<div class="container-fluid">
<div class="row"><div class="col-12">
<div class="input-group mb-3">
<select id="terms" class="form-select"></select>
<div class="input-group-append">
<button id="connect" class="btn btn-primary" type="button">连接</button>
</div>
</div>
</div></div>
<!-- header -->
<div class="row"><div class="col-12">
<ul class="nav nav-tabs" id="tabs"></ul>
<div class="tab-content" id="tab-content"></div>
</div></div>
<!-- body -->
</div>
<!-- container -->
</section>