Mirrored_Repos/crafty-4
1
0
Fork 0
mirror of https://gitlab.com/crafty-controller/crafty-4.git synced 2024-08-30 18:23:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'darthleo-jqueryui-integration' into 'dev'

Browse Source 
Better dashboard re-ordering

See merge request crafty-controller/crafty-commander!214
This commit is contained in:
Andrew 2022-03-19 01:48:24 +00:00
commit 20ea3c402d
5 changed files with 9915 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/classes/web/public_handler.py
View File

@ -42,7 +42,7 @@ class PublicHandler(BaseHandler):
'lang_page': helper.getLangPage(helper.get_setting('language')), 'lang_page': helper.getLangPage(helper.get_setting('language')),
'query': "" 'query': ""
} }
if (self.request.query): if self.request.query:
page_data['query'] = self.request.query page_data['query'] = self.request.query
# sensible defaults # sensible defaults
@ -66,7 +66,7 @@ class PublicHandler(BaseHandler):
# if we have no page, let's go to login # if we have no page, let's go to login
else: else:
if (self.request.query): if self.request.query:
self.redirect('/public/login?'+self.request.query) self.redirect('/public/login?'+self.request.query)
else: else:
self.redirect('/public/login') self.redirect('/public/login')
@ -90,13 +90,13 @@ class PublicHandler(BaseHandler):
'lang_page': helper.getLangPage(helper.get_setting('language')), 'lang_page': helper.getLangPage(helper.get_setting('language')),
'query': "" 'query': ""
} }
if (self.request.query): if self.request.query:
page_data['query'] = self.request.query page_data['query'] = self.request.query
if page == 'login': if page == 'login':
next_page = "/public/login" next_page = "/public/login"
if (self.request.query): if self.request.query:
next_page = '/public/login?'+self.request.query next_page = '/public/login?'+self.request.query
entered_username = bleach.clean(self.get_argument('username')) entered_username = bleach.clean(self.get_argument('username'))
@ -112,7 +112,7 @@ class PublicHandler(BaseHandler):
#self.clear_cookie("user") #self.clear_cookie("user")
#self.clear_cookie("user_data") #self.clear_cookie("user_data")
self.clear_cookie("token") self.clear_cookie("token")
if (self.request.query): if self.request.query:
self.redirect(f'/public/login?error_msg={error_msg}&{self.request.query}') self.redirect(f'/public/login?error_msg={error_msg}&{self.request.query}')
else: else:
self.redirect(f'/public/login?error_msg={error_msg}') self.redirect(f'/public/login?error_msg={error_msg}')
@ -124,7 +124,7 @@ class PublicHandler(BaseHandler):
#self.clear_cookie("user") #self.clear_cookie("user")
#self.clear_cookie("user_data") #self.clear_cookie("user_data")
self.clear_cookie("token") self.clear_cookie("token")
if (self.request.query): if self.request.query:
self.redirect(f'/public/login?error_msg={error_msg}&{self.request.query}') self.redirect(f'/public/login?error_msg={error_msg}&{self.request.query}')
else: else:
self.redirect(f'/public/login?error_msg={error_msg}') self.redirect(f'/public/login?error_msg={error_msg}')
@ -147,7 +147,7 @@ class PublicHandler(BaseHandler):
self.controller.management.add_to_audit_log(user_data.user_id, "Logged in", 0, self.get_remote_ip()) self.controller.management.add_to_audit_log(user_data.user_id, "Logged in", 0, self.get_remote_ip())
if (self.request.query_arguments.get('next')): if self.request.query_arguments.get('next'):
next_page = self.request.query_arguments.get('next')[0].decode() next_page = self.request.query_arguments.get('next')[0].decode()
else: else:
next_page = "/panel/dashboard" next_page = "/panel/dashboard"
@ -160,12 +160,12 @@ class PublicHandler(BaseHandler):
error_msg = "Inncorrect username or password. Please try again." error_msg = "Inncorrect username or password. Please try again."
# log this failed login attempt # log this failed login attempt
self.controller.management.add_to_audit_log(user_data.user_id, "Tried to log in", 0, self.get_remote_ip()) self.controller.management.add_to_audit_log(user_data.user_id, "Tried to log in", 0, self.get_remote_ip())
if (self.request.query): if self.request.query:
self.redirect(f'/public/login?error_msg={error_msg}&{self.request.query}') self.redirect(f'/public/login?error_msg={error_msg}&{self.request.query}')
else: else:
self.redirect(f'/public/login?error_msg={error_msg}') self.redirect(f'/public/login?error_msg={error_msg}')
else: else:
if (self.request.query): if self.request.query:
self.redirect('/public/login?'+self.request.query) self.redirect('/public/login?'+self.request.query)
else: else:
self.redirect('/public/login') self.redirect('/public/login')

178
app/frontend/static/assets/css/jquery-ui.css vendored Normal file
View File

@ -0,0 +1,178 @@
/*! jQuery UI - v1.13.1 - 2022-03-14
* http://jqueryui.com
* Includes: draggable.css, core.css, resizable.css, selectable.css, sortable.css
* Copyright jQuery Foundation and other contributors; Licensed MIT */
.ui-draggable-handle {
-ms-touch-action: none;
touch-action: none;
}
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.ui-helper-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.3;
text-decoration: none;
font-size: 100%;
list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
content: "";
display: table;
border-collapse: collapse;
}
.ui-helper-clearfix:after {
clear: both;
}
.ui-helper-zfix {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
-ms-filter: "alpha(opacity=0)"; /* support: IE8 */
}
.ui-front {
z-index: 100;
}
/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
cursor: default !important;
pointer-events: none;
}
/* Icons
----------------------------------*/
.ui-icon {
display: inline-block;
vertical-align: middle;
margin-top: -.25em;
position: relative;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
}
.ui-widget-icon-block {
left: 50%;
margin-left: -8px;
display: block;
}
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
-ms-touch-action: none;
touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0;
height: 100%;
}
.ui-resizable-se {
cursor: se-resize;
width: 12px;
height: 12px;
right: 1px;
bottom: 1px;
}
.ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
bottom: -5px;
}
.ui-resizable-nw {
cursor: nw-resize;
width: 9px;
height: 9px;
left: -5px;
top: -5px;
}
.ui-resizable-ne {
cursor: ne-resize;
width: 9px;
height: 9px;
right: -5px;
top: -5px;
}
.ui-selectable {
-ms-touch-action: none;
touch-action: none;
}
.ui-selectable-helper {
position: absolute;
z-index: 100;
border: 1px dotted black;
}
.ui-sortable-handle {
-ms-touch-action: none;
touch-action: none;
}

173
app/frontend/static/assets/css/jquery-ui.structure.css vendored Normal file
View File

@ -0,0 +1,173 @@
.ui-draggable-handle {
-ms-touch-action: none;
touch-action: none;
}
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.ui-helper-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.3;
text-decoration: none;
font-size: 100%;
list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
content: "";
display: table;
border-collapse: collapse;
}
.ui-helper-clearfix:after {
clear: both;
}
.ui-helper-zfix {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
-ms-filter: "alpha(opacity=0)"; /* support: IE8 */
}
.ui-front {
z-index: 100;
}
/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
cursor: default !important;
pointer-events: none;
}
/* Icons
----------------------------------*/
.ui-icon {
display: inline-block;
vertical-align: middle;
margin-top: -.25em;
position: relative;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
}
.ui-widget-icon-block {
left: 50%;
margin-left: -8px;
display: block;
}
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
-ms-touch-action: none;
touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0;
height: 100%;
}
.ui-resizable-se {
cursor: se-resize;
width: 12px;
height: 12px;
right: 1px;
bottom: 1px;
}
.ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
bottom: -5px;
}
.ui-resizable-nw {
cursor: nw-resize;
width: 9px;
height: 9px;
left: -5px;
top: -5px;
}
.ui-resizable-ne {
cursor: ne-resize;
width: 9px;
height: 9px;
right: -5px;
top: -5px;
}
.ui-selectable {
-ms-touch-action: none;
touch-action: none;
}
.ui-selectable-helper {
position: absolute;
z-index: 100;
border: 1px dotted black;
}
.ui-sortable-handle {
-ms-touch-action: none;
touch-action: none;
}

9447
app/frontend/static/assets/js/jquery-ui.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

218
app/frontend/templates/panel/dashboard.html
View File

@ -125,7 +125,7 @@
</thead> </thead>
<tbody> <tbody>
{% for server in data['servers'] %} {% for server in data['servers'] %}
<tr id="{{server['server_data']['server_id']}}" draggable="true" ondragstart="start()" ondragover="dragover()" ondragend="dragend()"> <tr id="{{server['server_data']['server_id']}}" draggable="true">
<td draggable="false"> <td draggable="false">
<i class="fas fa-server"></i> <i class="fas fa-server"></i>
<a draggable="false" href="/panel/server_detail?id={{server['server_data']['server_id']}}"> <a draggable="false" href="/panel/server_detail?id={{server['server_data']['server_id']}}">
@ -289,25 +289,26 @@
<script src="/static/assets/js/motd.js"></script> <script src="/static/assets/js/motd.js"></script>
<script> <script>
function display_motd() { function display_motd() {
var all_motds = Array.from(document.getElementsByClassName('input_motd')); let all_motds = Array.from(document.getElementsByClassName('input_motd'));
for (element of all_motds) { for (element of all_motds) {
initParser(element.id, element.id); initParser(element.id, element.id);
}; };
} }
$(document).ready(function () { $(document).ready(function() {
$('[data-toggle="popover"]').popover(); $('[data-toggle="popover"]').popover();
if ($(window).width() < 1000) { if ($(window).width() < 1000) {
$('.too_small').popover("show"); $('.too_small').popover("show");
} }
}); });
$(window).ready(function () {
$('body').click(function () { $(window).ready(function() {
$('body').click(function() {
$('.too_small').popover("hide"); $('.too_small').popover("hide");
}); });
}); });
$(window).resize(function () {
$(window).resize(function() {
// This will execute whenever the window is resized // This will execute whenever the window is resized
if ($(window).width() < 1000) { if ($(window).width() < 1000) {
$('.too_small').popover("show"); $('.too_small').popover("show");
@ -321,7 +322,7 @@
function send_command(server_id, command) { function send_command(server_id, command) {
/* this getCookie function is in base.html */ /* this getCookie function is in base.html */
var token = getCookie("_xsrf"); const token = getCookie("_xsrf");
$.ajax({ $.ajax({
type: "POST", type: "POST",
@ -341,7 +342,7 @@
function send_kill(server_id) { function send_kill(server_id) {
/* this getCookie function is in base.html */ /* this getCookie function is in base.html */
var token = getCookie("_xsrf"); const token = getCookie("_xsrf");
$.ajax({ $.ajax({
type: "POST", type: "POST",
@ -370,43 +371,27 @@
/* TODO Update each element */ /* TODO Update each element */
/* Update CPU */ /* Update CPU */
cpu_status = ""; cpu_status = "bg-danger";
if (server.cpu <= 33) if (server.cpu <= 33) {
{
cpu_status = "bg-success"; cpu_status = "bg-success";
} } else if (server.cpu > 33 && server.cpu <= 66) {
else if (server.cpu > 33 && server.cpu <= 66)
{
cpu_status = "bg-warning"; cpu_status = "bg-warning";
} }
else
{
cpu_status = "bg-danger";
}
server_cpu.innerHTML = `<div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="`+ server.cpu +`"><div class="progress-bar `+ cpu_status + `" role="progressbar" style="width: `+ server.cpu + `%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div>`+ server.cpu +`%`; server_cpu.innerHTML = `<div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="`+ server.cpu +`"><div class="progress-bar `+ cpu_status + `" role="progressbar" style="width: `+ server.cpu + `%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div>`+ server.cpu +`%`;
/* Update Memory */ /* Update Memory */
mem_status = ""; mem_status = "bg-danger";
total_mem = ""; total_mem = "0 MB";
if (server.mem_percent <= 33)
{ if (server.mem_percent <= 33) {
mem_status = "bg-success"; mem_status = "bg-success";
} else if (server.mem_percent > 33 && server.mem_percent <= 66) } else if (server.mem_percent > 33 && server.mem_percent <= 66) {
{
mem_status = "bg-warning"; mem_status = "bg-warning";
} }
else
{
mem_status = "bg-danger";
}
if (server.mem == 0) if (server.mem !== 0) {
{
total_mem = "0 MB";
}
else
{
total_mem = server.mem; total_mem = server.mem;
} }
@ -426,11 +411,11 @@
let servers = document.getElementsByClassName("server-player-totals"); let servers = document.getElementsByClassName("server-player-totals");
let all_total_players = 0; let all_total_players = 0;
let all_total_max_players = 0; let all_total_max_players = 0;
for(var i = 0; i < servers.length; i++){ for(let i = 0; i < servers.length; i++) {
try{ try {
all_total_players += parseInt(servers[i].getAttribute('data-players')); all_total_players += parseInt(servers[i].getAttribute('data-players'));
all_total_max_players += parseInt(servers[i].getAttribute('data-max')); all_total_max_players += parseInt(servers[i].getAttribute('data-max'));
}catch{ } catch {
console.log("Player totals are not of type int"); console.log("Player totals are not of type int");
} }
} }
@ -444,7 +429,7 @@
} }
/* Update Motd */ /* Update Motd */
var motd = ""; let motd = "";
if (server.desc) { if (server.desc) {
motd = `<span id="input_motd_` + server.id + `" class="input_motd">` + server.desc + `</span>`; motd = `<span id="input_motd_` + server.id + `" class="input_motd">` + server.desc + `</span>`;
server_infos = server_infos + '<div id="desc_id" style="word-wrap: break-word; max-width: 85px !important; overflow: auto;">' + motd + '</div>' + "<br />"; server_infos = server_infos + '<div id="desc_id" style="word-wrap: break-word; max-width: 85px !important; overflow: auto;">' + motd + '</div>' + "<br />";
@ -458,33 +443,32 @@
} }
/* Update Online Status */ /* Update Online Status */
var online_status = ""; let online_status = `<span class="text-warning"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', data['lang'])}}</span>`;
if (server.running) { if (server.running) {
online_status = `<span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online', data['lang'])}}</span>`; online_status = `<span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online', data['lang'])}}</span>`;
} }
else {
if (server.crashed){ if (server.crashed) {
online_status = `<span class="text-danger"><i class="fas fa-exclamation-triangle"></i> {{ translate('dashboard', 'crashed', data['lang'])}}</span>` online_status = `<span class="text-danger"><i class="fas fa-exclamation-triangle"></i> {{ translate('dashboard', 'crashed', data['lang'])}}</span>`
}else{
online_status = `<span class="text-warning"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', data['lang'])}}</span>`;
}
} }
server_online_status.innerHTML = online_status; server_online_status.innerHTML = online_status;
} }
function update_servers_status(data) { function update_servers_status(data) {
try{ try {
update_one_server_status(data[0]); update_one_server_status(data[0]);
}catch{ } catch (e) {
console.log ('Failed to update server stats', e)
} }
display_motd(); display_motd();
} }
$(document).ready(function () { $(document).ready(function() {
console.log('ready for JS!') console.log('ready for JS!')
$(".play_button").click(function () { $(".play_button").click(function() {
server_id = $(this).attr("data-id"); server_id = $(this).attr("data-id");
send_command(server_id, 'start_server'); send_command(server_id, 'start_server');
bootbox.alert({ bootbox.alert({
@ -494,7 +478,7 @@
}); });
}); });
$(".stop_button").click(function () { $(".stop_button").click(function() {
console.log("stopping server"); console.log("stopping server");
server_id = $(this).attr("data-id"); server_id = $(this).attr("data-id");
send_command(server_id, 'stop_server'); send_command(server_id, 'stop_server');
@ -505,7 +489,7 @@
}); });
}); });
$(".restart_button").click(function () { $(".restart_button").click(function() {
server_id = $(this).attr("data-id"); server_id = $(this).attr("data-id");
send_command(server_id, 'restart_server'); send_command(server_id, 'restart_server');
bootbox.alert({ bootbox.alert({
@ -514,7 +498,7 @@
message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> &nbsp; {% raw translate("dashboard", "bePatientRestart", data["lang"]) %} </div>' message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> &nbsp; {% raw translate("dashboard", "bePatientRestart", data["lang"]) %} </div>'
}); });
}); });
$(".kill_button").click(function () { $(".kill_button").click(function() {
server_id = $(this).attr("data-id"); server_id = $(this).attr("data-id");
bootbox.confirm({ bootbox.confirm({
message: "This will kill the server process and all it's subprocesses. Killing a process can potentially corrupt files. Only do this in extreme circumstances. Are you sure you would like to continue?", message: "This will kill the server process and all it's subprocesses. Killing a process can potentially corrupt files. Only do this in extreme circumstances. Are you sure you would like to continue?",
@ -528,16 +512,16 @@
className: 'btn-secondary' className: 'btn-secondary'
} }
}, },
callback: function (result) { callback: function(result) {
if (result) { if (result) {
send_kill(server_id); send_kill(server_id);
var dialog = bootbox.dialog({ let dialog = bootbox.dialog({
title: '{% raw translate("dashboard", "killing", data["lang"]) %}', title: '{% raw translate("dashboard", "killing", data["lang"]) %}',
message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>' message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
}); });
dialog.init(function () { dialog.init(function() {
setTimeout(function () { setTimeout(function() {
location.reload(); location.reload();
}, 15000); }, 15000);
}); });
@ -552,8 +536,8 @@
mem_percent = document.getElementById('mem_percent'); mem_percent = document.getElementById('mem_percent');
webSocket.on('update_host_stats', function (hostStats) { webSocket.on('update_host_stats', function(hostStats) {
var cpuDataTitle = `{% raw translate('dashboard', 'cpuCores', data['lang']) %}: ${hostStats.cpu_cores} <br /> {% raw translate("dashboard", "cpuCurFreq", data['lang']) %}: ${hostStats.cpu_cur_freq} <br /> {% raw translate("dashboard", "cpuMaxFreq", data['lang']) %}: ${hostStats.cpu_max_freq}`; let cpuDataTitle = `{% raw translate('dashboard', 'cpuCores', data['lang']) %}: ${hostStats.cpu_cores} <br /> {% raw translate("dashboard", "cpuCurFreq", data['lang']) %}: ${hostStats.cpu_cur_freq} <br /> {% raw translate("dashboard", "cpuMaxFreq", data['lang']) %}: ${hostStats.cpu_max_freq}`;
cpu_data.setAttribute('data-original-title', cpuDataTitle); cpu_data.setAttribute('data-original-title', cpuDataTitle);
cpu_usage.textContent = hostStats.cpu_usage; cpu_usage.textContent = hostStats.cpu_usage;
mem_usage.setAttribute('data-original-title', `{% raw translate("dashboard", "memUsage", data['lang']) %}: ${hostStats.mem_usage}`); mem_usage.setAttribute('data-original-title', `{% raw translate("dashboard", "memUsage", data['lang']) %}: ${hostStats.mem_usage}`);
@ -562,13 +546,13 @@
} }
if (webSocket) { if (webSocket) {
webSocket.on('send_start_reload', function () { webSocket.on('send_start_reload', function() {
location.reload() location.reload()
}); });
} }
if (webSocket) { if (webSocket) {
webSocket.on('update_button_status', function (updateButton) { webSocket.on('update_button_status', function(updateButton) {
let serverId = updateButton.server_id; let serverId = updateButton.server_id;
let message = updateButton.string; let message = updateButton.string;
let updating = updateButton.isUpdating; let updating = updateButton.isUpdating;
@ -587,7 +571,7 @@
webSocket.on('update_server_status', update_servers_status); webSocket.on('update_server_status', update_servers_status);
} }
$(".clone_button").click(function () { $(".clone_button").click(function() {
server_id = $(this).attr("data-id"); server_id = $(this).attr("data-id");
send_command(server_id, 'clone_server'); send_command(server_id, 'clone_server');
bootbox.alert({ bootbox.alert({
@ -599,46 +583,36 @@
}); });
</script> </script>
<script src="/static/assets/js/jquery-ui.js"></script>
<link rel="stylesheet" href="/static/assets/css/jquery-ui.css">
<link rel="stylesheet" href="/static/assets/css/jquery-ui.structure.css">
<script> <script>
var row;
function start(){ /* Search Bar */
row = event.target; $(document).ready(function() {
} let servers_table = $('#servers_table').DataTable({
function dragover(){ "ordering": false, // false to disable sorting (or any other option)
var e = event; "paging": false
e.preventDefault(); });
document.getElementById('first').setAttribute('draggable', false);
$('.dataTables_length').addClass('bs-select');
});
/* Search Bar End */
let children= Array.from(e.target.parentNode.parentNode.children); $(document).on("mousedown keyup click", function(event) {
const value = $('.dataTables_filter input').val();
if(children.indexOf(e.target.parentNode)>children.indexOf(row)) if ($("table#servers_table tbody").sortable("toArray").length > 1 && value === '') {
e.target.parentNode.after(row); $("table#servers_table tbody").sortable("enable");
else } else {
e.target.parentNode.before(row); $("table#servers_table tbody").sortable("disable");
}
function dragend(){
var id_string = '';
const table = document.querySelector("table");
for (const row of table.rows) {
if (row.getAttribute('id') != null){
if (id_string != ''){
id_string += ',' + String(row.getAttribute('id'));
}else{
id_string +=String(row.getAttribute('id'));
}
}
}
console.log(id_string)
if($('#servers_table').find('input[type=search]').length == 0){
sendOrder(id_string)
}else{
console.log("Will not reorder when servers are filtered")
}
} }
});
$(document).ready(function() {
function sendOrder(id_string) { function sendOrder(id_string) {
var token = getCookie("_xsrf") const token = getCookie("_xsrf")
$.ajax({ $.ajax({
type: "POST", type: "POST",
headers: {'X-XSRFToken': token}, headers: {'X-XSRFToken': token},
@ -646,34 +620,46 @@
data: { data: {
order: id_string, order: id_string,
}, },
success: function(data){ success: function(data) {
console.log("got response:"); console.log("got response:");
console.log(data); console.log(data);
}, },
}); });
} }
$(document).ready(function () {
var servers_table = $('#servers_table').DataTable({ // Inits the sortable
"ordering": false, // false to disable sorting (or any other option) $("table#servers_table tbody")
"paging": false .sortable({
items: '> tr',
cursor: "move",
axis: "y",
revert: true,
forcePlaceholderSize: true,
placeholder:'table-placeholder',
deactivate: function(event, ui) {
// Gets the list of ids in the server list as an array,
// and joins the elements with an [,] and sends to the server.
const ids = $("table#servers_table tbody").sortable("toArray").join();
try {
sendOrder(ids);
} catch {
console.log("Search is actively supressing order change")
}
},
}); });
document.getElementById('first').setAttribute('draggable', false);
$('.dataTables_length').addClass('bs-select'); // Give the table an actual width so the draggable does't collapse when dragged
$("table#servers_table")
.children()
.find("td")
.each(function () {
$(this).css("width", "").css("width", $(this).outerWidth());
}); });
$(document).mousedown(function( event ) {
let value = $('.dataTables_filter input').val() // Fixes the appearance of a scrollbar when a user tries to drag an item too low
if(value === ''){ $("div#servers_table_wrapper").css({ overflow: "hidden" });
const table = document.querySelector("table"); });
for (const row of table.rows) {
row.setAttribute('draggable', true)
}
}else{
const table = document.querySelector("table");
for (const row of table.rows) {
row.setAttribute('draggable', false)
}
}
} );
</script> </script>
{% end %} {% end %}