mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2024-11-06 16:00:28 +01:00
Hmmmm... What about SocketIO?
This commit is contained in:
parent
fcfd816cec
commit
84c9846f7b
@ -25,6 +25,8 @@ import ifcfg
|
|||||||
from flask import Flask, request, render_template, redirect, url_for, session, jsonify
|
from flask import Flask, request, render_template, redirect, url_for, session, jsonify
|
||||||
from flask_qrcode import QRcode
|
from flask_qrcode import QRcode
|
||||||
from icmplib import ping, traceroute
|
from icmplib import ping, traceroute
|
||||||
|
# TESTING
|
||||||
|
from flask_socketio import SocketIO
|
||||||
|
|
||||||
# Import other python files
|
# Import other python files
|
||||||
from util import regex_match, check_DNS, check_Allowed_IPs, check_remote_endpoint, \
|
from util import regex_match, check_DNS, check_Allowed_IPs, check_remote_endpoint, \
|
||||||
@ -49,7 +51,7 @@ app.secret_key = secrets.token_urlsafe(16)
|
|||||||
app.config['TEMPLATES_AUTO_RELOAD'] = True
|
app.config['TEMPLATES_AUTO_RELOAD'] = True
|
||||||
# Enable QR Code Generator
|
# Enable QR Code Generator
|
||||||
QRcode(app)
|
QRcode(app)
|
||||||
|
socketio = SocketIO(app)
|
||||||
|
|
||||||
# TODO: use class and object oriented programming
|
# TODO: use class and object oriented programming
|
||||||
|
|
||||||
@ -1001,17 +1003,26 @@ def configuration(config_name):
|
|||||||
|
|
||||||
|
|
||||||
# Get configuration details
|
# Get configuration details
|
||||||
@app.route('/get_config/<config_name>', methods=['GET'])
|
@socketio.on("get_config")
|
||||||
def get_conf(config_name):
|
# @app.route('/get_config/<config_name>', methods=['GET'])
|
||||||
|
def get_conf(data):
|
||||||
"""
|
"""
|
||||||
Get configuration setting of wireguard interface.
|
Get configuration setting of wireguard interface.
|
||||||
@param config_name: Name of WG interface
|
@param config_name: Name of WG interface
|
||||||
@type config_name: str
|
@type config_name: str
|
||||||
@return: TODO
|
@return: TODO
|
||||||
"""
|
"""
|
||||||
|
if getattr(g, 'db', None) is None:
|
||||||
|
g.db = connect_db()
|
||||||
|
g.cur = g.db.cursor()
|
||||||
|
print(data)
|
||||||
|
config_name = data['config']
|
||||||
|
print(config_name)
|
||||||
|
|
||||||
config_interface = read_conf_file_interface(config_name)
|
config_interface = read_conf_file_interface(config_name)
|
||||||
search = request.args.get('search')
|
search = data['search']
|
||||||
|
print(search)
|
||||||
|
# search = request.args.get('search')
|
||||||
if len(search) == 0:
|
if len(search) == 0:
|
||||||
search = ""
|
search = ""
|
||||||
search = urllib.parse.unquote(search)
|
search = urllib.parse.unquote(search)
|
||||||
@ -1042,7 +1053,8 @@ def get_conf(config_name):
|
|||||||
else:
|
else:
|
||||||
conf_data['checked'] = "checked"
|
conf_data['checked'] = "checked"
|
||||||
config.clear()
|
config.clear()
|
||||||
return jsonify(conf_data)
|
socketio.emit("get_config", conf_data, json=True)
|
||||||
|
# return jsonify(conf_data)
|
||||||
|
|
||||||
|
|
||||||
# Turn on / off a configuration
|
# Turn on / off a configuration
|
||||||
@ -1714,4 +1726,5 @@ if __name__ == "__main__":
|
|||||||
app_port = config.get("Server", "app_port")
|
app_port = config.get("Server", "app_port")
|
||||||
WG_CONF_PATH = config.get("Server", "wg_conf_path")
|
WG_CONF_PATH = config.get("Server", "wg_conf_path")
|
||||||
config.clear()
|
config.clear()
|
||||||
app.run(host=app_ip, debug=False, port=app_port)
|
socketio.run(app, host=app_ip, debug=False, port=app_port)
|
||||||
|
# app.run(host=app_ip, debug=False, port=app_port)
|
||||||
|
@ -338,14 +338,45 @@
|
|||||||
* Load Peers from server to configuration page
|
* Load Peers from server to configuration page
|
||||||
* @param searchString
|
* @param searchString
|
||||||
*/
|
*/
|
||||||
function loadPeers(searchString){
|
let time = 0;
|
||||||
startProgressBar();
|
let count = 0;
|
||||||
|
|
||||||
let d1 = new Date();
|
let d1 = new Date();
|
||||||
$.ajax({
|
function loadPeers(searchString){
|
||||||
method: "GET",
|
d1 = new Date();
|
||||||
url: `/get_config/${conf_name}?search=${encodeURIComponent(searchString)}`,
|
startProgressBar();
|
||||||
headers:{"Content-Type": "application/json"}
|
socket.emit('get_config', {"config": conf_name, "search": searchString});
|
||||||
}).done(function(response){
|
|
||||||
|
// let d1 = new Date();
|
||||||
|
// $.ajax({
|
||||||
|
// method: "GET",
|
||||||
|
// url: `/get_config/${conf_name}?search=${encodeURIComponent(searchString)}`,
|
||||||
|
// headers:{"Content-Type": "application/json"}
|
||||||
|
// }).done(function(response){
|
||||||
|
// removeNoResponding();
|
||||||
|
// peers = response.peer_data;
|
||||||
|
// configurationAlert(response);
|
||||||
|
// configurationHeader(response);
|
||||||
|
// configurationPeers(response);
|
||||||
|
// $(".dot.dot-running").attr("title","Peer Connected").tooltip();
|
||||||
|
// $(".dot.dot-stopped").attr("title","Peer Disconnected").tooltip();
|
||||||
|
// $("i[data-toggle='tooltip']").tooltip();
|
||||||
|
// endProgressBar();
|
||||||
|
// let d2 = new Date();
|
||||||
|
// let seconds = (d2 - d1);
|
||||||
|
// $("#peer_loading_time").html(`Peer Loading Time: ${seconds}ms`);
|
||||||
|
// }).fail(function(){
|
||||||
|
// noResponding();
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
function parsePeers(response){
|
||||||
|
let d2 = new Date();
|
||||||
|
let seconds = (d2 - d1);
|
||||||
|
time += seconds
|
||||||
|
count += 1
|
||||||
|
window.console.log(`Average time: ${time/count}ms`);
|
||||||
|
$("#peer_loading_time").html(`Peer Loading Time: ${seconds}ms`);
|
||||||
removeNoResponding();
|
removeNoResponding();
|
||||||
peers = response.peer_data;
|
peers = response.peer_data;
|
||||||
configurationAlert(response);
|
configurationAlert(response);
|
||||||
@ -355,12 +386,8 @@
|
|||||||
$(".dot.dot-stopped").attr("title","Peer Disconnected").tooltip();
|
$(".dot.dot-stopped").attr("title","Peer Disconnected").tooltip();
|
||||||
$("i[data-toggle='tooltip']").tooltip();
|
$("i[data-toggle='tooltip']").tooltip();
|
||||||
endProgressBar();
|
endProgressBar();
|
||||||
let d2 = new Date();
|
|
||||||
let seconds = (d2 - d1);
|
|
||||||
$("#peer_loading_time").html(`Peer Loading Time: ${seconds}ms`);
|
|
||||||
}).fail(function(){
|
|
||||||
noResponding();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -502,7 +529,7 @@
|
|||||||
loadPeers: (searchString) => { loadPeers(searchString); },
|
loadPeers: (searchString) => { loadPeers(searchString); },
|
||||||
addPeersByBulk: () => { addPeersByBulk(); },
|
addPeersByBulk: () => { addPeersByBulk(); },
|
||||||
deletePeers: (config, peers_ids) => { deletePeers(config, peers_ids); },
|
deletePeers: (config, peers_ids) => { deletePeers(config, peers_ids); },
|
||||||
|
parsePeers: (response) => { parsePeers(response); },
|
||||||
|
|
||||||
getAvailableIps: () => { getAvailableIps(); },
|
getAvailableIps: () => { getAvailableIps(); },
|
||||||
generateKeyPair: () => { generate_key(); },
|
generateKeyPair: () => { generate_key(); },
|
||||||
|
2
src/static/js/configuration.min.js
vendored
2
src/static/js/configuration.min.js
vendored
File diff suppressed because one or more lines are too long
@ -410,7 +410,7 @@
|
|||||||
{% include "tools.html" %}
|
{% include "tools.html" %}
|
||||||
</body>
|
</body>
|
||||||
{% include "footer.html" %}
|
{% include "footer.html" %}
|
||||||
<script src="{{ url_for('static',filename='js/wireguard.min.js') }}"></script>
|
<script src="https://cdn.socket.io/4.4.1/socket.io.min.js" integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H" crossorigin="anonymous"></script><script src="{{ url_for('static',filename='js/wireguard.min.js') }}"></script>
|
||||||
<script src="{{ url_for('static',filename='js/configuration.min.js') }}"></script>
|
<script src="{{ url_for('static',filename='js/configuration.min.js') }}"></script>
|
||||||
<script>
|
<script>
|
||||||
/* global peers */
|
/* global peers */
|
||||||
@ -419,8 +419,16 @@
|
|||||||
let conf_name = "{{ conf_data['name'] }}"
|
let conf_name = "{{ conf_data['name'] }}"
|
||||||
let peers = [];
|
let peers = [];
|
||||||
$(".sb-"+conf_name+"-url").addClass("active");
|
$(".sb-"+conf_name+"-url").addClass("active");
|
||||||
|
let socket = io();
|
||||||
$(function(){
|
$(function(){
|
||||||
|
socket.on('connect', function() {
|
||||||
configurations.loadPeers($('#search_peer_textbox').val());
|
configurations.loadPeers($('#search_peer_textbox').val());
|
||||||
});
|
});
|
||||||
|
socket.on('get_config', function(res){
|
||||||
|
window.console.log(res);
|
||||||
|
configurations.parsePeers(res);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue
Block a user