Skip to content

Commit b32c2a5

Browse files
pythonzmpythonzm
committed
update terminal.html
1 parent 562a4cf commit b32c2a5

File tree

1 file changed

+163
-163
lines changed

1 file changed

+163
-163
lines changed

‎templates/fort/terminal.html‎

100755100644
Lines changed: 163 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -1,164 +1,164 @@
1-
{% load staticfiles %}
2-
<!DOCTYPE html>
3-
<html lang="en">
4-
<head>
5-
<meta charset="UTF-8">
6-
<title>{{ fort_username }}@{{ server_ip }}</title>
7-
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
8-
<link rel="shortcut icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
9-
<link rel="icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
10-
<link rel="stylesheet" href="{% static 'AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css' %}">
11-
<link href="{% static 'bootstrap-fileinput/css/fileinput.min.css' %}" media="all" rel="stylesheet" type="text/css"/>
12-
<link href="{% static 'css/xterm.css' %}" rel="stylesheet" type="text/css"/>
13-
<link rel="stylesheet" href="{% static 'jquery-confirm/dist/jquery-confirm.min.css' %}">
14-
<style>
15-
@media screen and (max-width: 750px) {
16-
.main-header {
17-
display: none;
18-
}
19-
}
20-
</style>
21-
</head>
22-
<body>
23-
<div class="wrapper">
24-
<header class="main-header">
25-
<nav class="navbar navbar-light" style="background-color: #e3f2fd; margin-bottom: 0">
26-
<a class="navbar-brand">当前使用账号为： {{ fort_username }}@{{ server_ip }} </a>
27-
<form class="form-inline" enctype="multipart/form-data">
28-
<div class="input-group" style="margin-top: 10px;margin-left: 200px;">
29-
<input type="file" id="upload_file" class="file" name="upload_file" multiple required>
30-
</div>
31-
32-
<input class="form-control mr-sm-2" type="search" id="download_file" name="download_file"
33-
placeholder="请输入要下载文件的全路径" aria-label="Search"
34-
style="width: 20%;margin-top: 10px;margin-left: 20px;">
35-
<button class="btn btn-outline-success my-2 my-sm-0 download_file" type="button"
36-
style="margin-top: 10px;">下载
37-
</button>
38-
</form>
39-
</nav>
40-
</header>
41-
<div class="content-wrapper">
42-
<section class="content container-fluid">
43-
<div class="row">
44-
<!--dataTable-->
45-
<div class="col-xs-12">
46-
<!-- /.box -->`
47-
<div class="box" style="margin-top: -15px;">
48-
<div class="box-body">
49-
<div id="terms"></div>
50-
</div>
51-
<!-- /.box-body -->
52-
</div>
53-
<!-- /.box -->
54-
</div>
55-
</div>
56-
</section>
57-
</div>
58-
</div>
59-
</body>
60-
61-
<script src="{% static 'AdminLTE/bower_components/jquery/dist/jquery.min.js' %}"></script>
62-
<script src="{% static 'AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
63-
<script src="{% static 'bootstrap-fileinput/js/fileinput.min.js' %}"></script>
64-
<script src="{% static 'js/xterm.js' %}"></script>
65-
<script src="{% static 'jquery-confirm/dist/jquery-confirm.min.js' %}"></script>
66-
<script>
67-
let cols = get_term_size().cols;
68-
let rows = get_term_size().rows;
69-
let ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
70-
let socket = new WebSocket(ws_scheme + '://' + window.location.host + '/ws/fortssh/{{ server_id }}/{{ fort_user_id }}/?remote_ip={{ remote_ip }}' + '&width=' + cols + '&height=' + rows);
71-
72-
let term = new Terminal({
73-
screenKeys: true,
74-
useStyle: true,
75-
cursorBlink: true,
76-
cols: cols,
77-
rows: rows
78-
});
79-
80-
81-
socket.onopen = function () {
82-
// $("#terms").css("height", document.documentElement.clientHeight - $('.main-header').height());
83-
term.open(document.getElementById('terms'), true);
84-
// term.fit();
85-
};
86-
87-
term.on('data', function (data) {
88-
socket.send(data);
89-
});
90-
91-
socket.onmessage = function (msg) {
92-
term.write(msg.data);
93-
94-
};
95-
socket.onerror = function () {
96-
document.getElementById('terms').innerHTML = '<h3>连接失败！请查看日志！</h3>';
97-
};
98-
socket.onclose = function () {
99-
// pass
100-
};
101-
102-
function get_term_size() {
103-
let init_width = 10;
104-
let init_height = 20;
105-
106-
let windows_width = $(window).width();
107-
let windows_height = document.documentElement.clientHeight - $('.main-header').height();
108-
109-
return {
110-
cols: Math.floor(windows_width / init_width),
111-
rows: Math.floor(windows_height / init_height),
112-
}
113-
}
114-
115-
116-
$("#upload_file").fileinput({
117-
language: 'zh',
118-
showUpload: true,
119-
dropZoneEnabled: false,
120-
msgPlaceholder: '上传文件...',
121-
showPreview: false,
122-
showCaption: true,
123-
maxFileSize: 1024 * 1024 * 1024 * 2,
124-
maxFileCount: 10,
125-
uploadUrl: '/fort/terminal/{{ server_id }}/{{ fort_user_id }}/',
126-
mergeAjaxCallbacks: true,
127-
ajaxSettings: {
128-
headers: {'X-CSRFToken': '{{ csrf_token }}'},
129-
success: function (response) {
130-
$.alert({
131-
title: 'Tips',
132-
type: 'green',
133-
content: response.msg,
134-
})
135-
},
136-
error: function (response) {
137-
$.alert({
138-
title: 'Tips',
139-
type: 'red',
140-
content: response.msg,
141-
})
142-
},
143-
},
144-
browseLabel: '浏览文件',
145-
removeLabel: '清空',
146-
uploadLabel: '上传'
147-
});
148-
149-
$('.download_file').on('click', function () {
150-
let download_file = $('#download_file').val();
151-
152-
if (download_file.length !== 0) {
153-
location.href = '/fort/terminal/' + {{ server_id }} +'/' + {{ fort_user_id }} +'/?download_file=' + download_file
154-
} else {
155-
$.alert({
156-
title: 'Tips',
157-
type: 'red',
158-
content: "文件名不能为空！",
159-
})
160-
}
161-
});
162-
</script>
163-
1+
{% load staticfiles %}
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>{{ fort_username }}@{{ server_ip }}</title>
7+
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
8+
<link rel="shortcut icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
9+
<link rel="icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
10+
<link rel="stylesheet" href="{% static 'AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css' %}">
11+
<link href="{% static 'bootstrap-fileinput/css/fileinput.min.css' %}" media="all" rel="stylesheet" type="text/css"/>
12+
<link href="{% static 'css/xterm.css' %}" rel="stylesheet" type="text/css"/>
13+
<link rel="stylesheet" href="{% static 'jquery-confirm/dist/jquery-confirm.min.css' %}">
14+
<style>
15+
@media screen and (max-width: 750px) {
16+
.main-header {
17+
display: none;
18+
}
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<div class="wrapper">
24+
<header class="main-header">
25+
<nav class="navbar navbar-light" style="background-color: #e3f2fd; margin-bottom: 0">
26+
<a class="navbar-brand">当前使用账号为： {{ fort_username }}@{{ server_ip }} </a>
27+
<form class="form-inline" enctype="multipart/form-data">
28+
<div class="input-group" style="margin-top: 10px;margin-left: 200px;">
29+
<input type="file" id="upload_file" class="file" name="upload_file" multiple required>
30+
</div>
31+
32+
<input class="form-control mr-sm-2" type="search" id="download_file" name="download_file"
33+
placeholder="请输入要下载文件的全路径" aria-label="Search"
34+
style="width: 20%;margin-top: 10px;margin-left: 20px;">
35+
<button class="btn btn-outline-success my-2 my-sm-0 download_file" type="button"
36+
style="margin-top: 10px;">下载
37+
</button>
38+
</form>
39+
</nav>
40+
</header>
41+
<div class="content-wrapper">
42+
<section class="content container-fluid">
43+
<div class="row">
44+
<!--dataTable-->
45+
<div class="col-xs-12">
46+
<!-- /.box -->`
47+
<div class="box" style="margin-top: -15px;">
48+
<div class="box-body">
49+
<div id="terms"></div>
50+
</div>
51+
<!-- /.box-body -->
52+
</div>
53+
<!-- /.box -->
54+
</div>
55+
</div>
56+
</section>
57+
</div>
58+
</div>
59+
</body>
60+
61+
<script src="{% static 'AdminLTE/bower_components/jquery/dist/jquery.min.js' %}"></script>
62+
<script src="{% static 'AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
63+
<script src="{% static 'bootstrap-fileinput/js/fileinput.min.js' %}"></script>
64+
<script src="{% static 'js/xterm.js' %}"></script>
65+
<script src="{% static 'jquery-confirm/dist/jquery-confirm.min.js' %}"></script>
66+
<script>
67+
let cols = get_term_size().cols;
68+
let rows = get_term_size().rows;
69+
let ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
70+
let socket = new WebSocket(ws_scheme + '://' + window.location.host + '/ws/fortssh/{{ server_id }}/{{ fort_user_id }}/?remote_ip={{ remote_ip }}' + '&width=' + cols + '&height=' + rows);
71+
72+
let term = new Terminal({
73+
screenKeys: true,
74+
useStyle: true,
75+
cursorBlink: true,
76+
cols: cols,
77+
rows: rows
78+
});
79+
80+
81+
socket.onopen = function () {
82+
// $("#terms").css("height", document.documentElement.clientHeight - $('.main-header').height());
83+
term.open(document.getElementById('terms'), true);
84+
// term.fit();
85+
};
86+
87+
term.on('data', function (data) {
88+
socket.send(data);
89+
});
90+
91+
socket.onmessage = function (msg) {
92+
term.write(msg.data);
93+
94+
};
95+
socket.onerror = function () {
96+
document.getElementById('terms').innerHTML = '<h3>连接失败！请查看日志！</h3>';
97+
};
98+
socket.onclose = function () {
99+
// pass
100+
};
101+
102+
function get_term_size() {
103+
let init_width = 10;
104+
let init_height = 20;
105+
106+
let windows_width = $(window).width();
107+
let windows_height = document.documentElement.clientHeight - $('.main-header').height();
108+
109+
return {
110+
cols: Math.floor(windows_width / init_width),
111+
rows: Math.floor(windows_height / init_height),
112+
}
113+
}
114+
115+
116+
$("#upload_file").fileinput({
117+
language: 'zh',
118+
showUpload: true,
119+
dropZoneEnabled: false,
120+
msgPlaceholder: '上传文件...',
121+
showPreview: false,
122+
showCaption: true,
123+
maxFileSize: 1024 * 1024 * 1024 * 2,
124+
maxFileCount: 10,
125+
uploadUrl: '/fort/terminal/{{ server_id }}/{{ fort_user_id }}/',
126+
mergeAjaxCallbacks: true,
127+
ajaxSettings: {
128+
headers: {'X-CSRFToken': '{{ csrf_token }}'},
129+
success: function (response) {
130+
$.alert({
131+
title: 'Tips',
132+
type: 'green',
133+
content: response.msg,
134+
})
135+
},
136+
error: function (response) {
137+
$.alert({
138+
title: 'Tips',
139+
type: 'red',
140+
content: response.msg,
141+
})
142+
},
143+
},
144+
browseLabel: '浏览文件',
145+
removeLabel: '清空',
146+
uploadLabel: '上传'
147+
});
148+
149+
$('.download_file').on('click', function () {
150+
let download_file = $('#download_file').val();
151+
152+
if (download_file.length !== 0) {
153+
location.href = '/fort/terminal/' + {{ server_id }} +'/' + {{ fort_user_id }} +'/?download_file=' + download_file
154+
} else {
155+
$.alert({
156+
title: 'Tips',
157+
type: 'red',
158+
content: "文件名不能为空！",
159+
})
160+
}
161+
});
162+
</script>
163+
164164
</html>

0 commit comments

Comments
 (0)