mirror of
https://gitlab.com/crafty-controller/crafty-4.git
synced 2025-02-08 08:09:03 +01:00
998 lines
33 KiB
HTML
998 lines
33 KiB
HTML
{% extends ../base.html %} {% block meta %} {% end %} {% block title %}Crafty
|
|
Controller - {{ translate('serverDetails', 'serverDetails', data['lang']) }}{%
|
|
end %} {% block content %}
|
|
|
|
<div class="content-wrapper">
|
|
<!-- Page Title Header Starts-->
|
|
<div class="row page-title-header">
|
|
<div class="col-12">
|
|
<div class="page-header">
|
|
<h4 class="page-title">
|
|
{{ translate('serverDetails', 'serverDetails', data['lang']) }} - {{
|
|
data['server_stats']['server_id']['server_name'] }}
|
|
<br />
|
|
<small>UUID: {{ data['server_stats']['server_id']['server_id'] }}</small>
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Page Title Header Ends-->
|
|
|
|
{% include "parts/details_stats.html" %}
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12 grid-margin">
|
|
<div class="card">
|
|
<div class="card-body pt-0">
|
|
<span class="d-none d-sm-block">
|
|
{% include "parts/server_controls_list.html %}
|
|
</span>
|
|
<span class="d-block d-sm-none">
|
|
{% include "parts/m_server_controls_list.html %}
|
|
</span>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 col-sm-12">
|
|
<noscript>
|
|
{{ translate('serverFiles', 'noscript', data['lang']) }}
|
|
</noscript>
|
|
<div id="files-tree-nav" class="overlay">
|
|
<!-- Button to close the overlay navigation -->
|
|
|
|
<!-- Overlay content -->
|
|
<div id="files-tree-nav-content" class="overlay-content">
|
|
<h4 id="context-title" class="overlay-title"></h4>
|
|
<span class="separator"></span>
|
|
<a onclick="createFileE(event)" href="javascript:void(0)" id="createFile" href="#">{{ translate('serverFiles', 'createFile', data['lang'])
|
|
}}</a>
|
|
<a onclick="createDirE(event)" href="javascript:void(0)" id="createDir" href="#">{{ translate('serverFiles', 'createDir', data['lang'])
|
|
}}</a>
|
|
<a onclick="renameItemE(event)" href="javascript:void(0)" id="renameItem" href="#">{{ translate('serverFiles', 'rename', data['lang']) }}</a>
|
|
<a onclick="uploadFilesE(event)" href="javascript:void(0)" id="upload" href="#">{{ translate('serverFiles', 'upload', data['lang']) }}</a>
|
|
<a onclick="unzipFilesE(event)" href="javascript:void(0)" id="unzip" href="#">{{ translate('serverFiles', 'unzip', data['lang']) }}</a>
|
|
<a onclick="downloadFileE(event)" href="javascript:void(0)" id="downloadFile" href="#">{{ translate('serverFiles', 'download', data['lang']) }}</a>
|
|
<a onclick="deleteFileE(event)" href="javascript:void(0)" id="deleteFile" href="#" class="text-danger">{{ translate('serverFiles', 'delete', data['lang']) }}</a>
|
|
<a onclick="deleteFileE(event)" href="javascript:void(0)" id="deleteDir" href="#" class="text-danger">{{ translate('serverFiles', 'delete', data['lang']) }}</a>
|
|
<a href="javascript:void(0)" class="closebtn" style="color: var(--info)" onclick="document.getElementById('files-tree-nav').style.display = 'none';">{{ translate('serverFiles', 'close', data['lang']) }}</a>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="tree-view">
|
|
<li>
|
|
<div id="root_dir" class="tree-ctx-item" data-path="{{ data['server_stats']['server_id']['path'] }}">
|
|
<span id="{{ data['server_stats']['server_id']['path'] }}span" class="files-tree-title tree-caret-down root-dir" data-path="{{ data['server_stats']['server_id']['path'] }}" onclick="getToggleMain(event)">
|
|
<i class="far fa-folder"></i>
|
|
<i class="far fa-folder-open"></i>
|
|
{{ translate('serverFiles', 'files', data['lang']) }}
|
|
</span>
|
|
</div>
|
|
<ul class="tree-nested d-block" id="files-tree">
|
|
<li>
|
|
<i class="fa fa-spin fa-spinner"></i>{{
|
|
translate('serverFiles', 'loadingRecords', data['lang'])
|
|
}}
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="editor_container" class="col-md-6 col-sm-12">
|
|
<br />
|
|
<br />
|
|
<div class="editorManager">
|
|
<h2 id="fileError"></h2>
|
|
<div id="editorParent">
|
|
{{ translate('serverFiles', 'editingFile', data['lang']) }}
|
|
<span id="editingFile"></span>
|
|
<div id="editor" onresize="editor.resize()" style="resize: both; width: 100%">
|
|
file_contents
|
|
</div>
|
|
<br />
|
|
</div>
|
|
{{ translate('serverFiles', 'keybindings', data['lang']) }}:
|
|
<div class="btn-group" role="group">
|
|
<button onclick="setKeyboard(event.target)" class="btn btn-primary" data-handler-name="null">
|
|
{{ translate('serverFiles', 'default', data['lang']) }}
|
|
</button>
|
|
<button onclick="setKeyboard(event.target)" class="btn btn-secondary" data-handler-name="ace/keyboard/vim">
|
|
Vim
|
|
</button>
|
|
<button onclick="setKeyboard(event.target)" class="btn btn-secondary" data-handler-name="ace/keyboard/emacs">
|
|
Emacs
|
|
</button>
|
|
<button onclick="setKeyboard(event.target)" class="btn btn-secondary" data-handler-name="ace/keyboard/sublime">
|
|
Sublime
|
|
</button>
|
|
<span class="d-none d-md-block"> <button class="btn btn-info" id="screen-size">
|
|
{{ translate('serverFiles', 'size', data['lang']) }}
|
|
</button></span>
|
|
</div>
|
|
<h3 id="file_warn"></h3>
|
|
<button class="btn btn-success" onclick="save()">
|
|
<i class="fas fa-save"></i> {{ translate('serverFiles',
|
|
'save', data['lang']) }}
|
|
</button>
|
|
<span class="text-success ml-2" id="save_status"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<link rel="stylesheet" href="/static/assets/css/partial/crafty-filemanager.css" />
|
|
<!-- content-wrapper ends -->
|
|
|
|
{% end %} {% block js %}
|
|
<script src="/static/assets/vendors/ace-builds/src-min/ace.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
<script>
|
|
const serverId = new URLSearchParams(document.location.search).get("id");
|
|
|
|
//used to get cookies from browser - this is part of tornados xsrf protection - it's for extra security
|
|
function getCookie(name) {
|
|
var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
|
|
return r ? r[1] : undefined;
|
|
}
|
|
|
|
let editor = ace.edit("editor");
|
|
editor.setTheme("ace/theme/dracula");
|
|
editor.session.setUseSoftTabs(true);
|
|
editor.commands.addCommand({
|
|
name: "saveFile",
|
|
bindKey: {
|
|
win: "Ctrl-S",
|
|
mac: "Command-S",
|
|
sender: "editor|cli",
|
|
},
|
|
exec: function (env, args, request) {
|
|
save();
|
|
},
|
|
});
|
|
|
|
// mouseup = css resize end
|
|
document.addEventListener("mouseup", function (e) {
|
|
editor.resize();
|
|
});
|
|
|
|
let extensionChanges = [
|
|
{
|
|
regex: /^js$/,
|
|
replaceWith: "ace/mode/javascript",
|
|
},
|
|
{
|
|
regex: /^py$/,
|
|
replaceWith: "ace/mode/python",
|
|
},
|
|
{
|
|
regex: /^html$/,
|
|
replaceWith: "ace/mode/html",
|
|
},
|
|
{
|
|
regex: /^yml$/,
|
|
replaceWith: "ace/mode/yaml",
|
|
},
|
|
{
|
|
regex: /^yaml$/,
|
|
replaceWith: "ace/mode/yaml",
|
|
},
|
|
{
|
|
regex: /^txt$/,
|
|
replaceWith: "ace/mode/text",
|
|
},
|
|
{
|
|
regex: /^json$/,
|
|
replaceWith: "ace/mode/json",
|
|
},
|
|
{
|
|
regex: /^java$/,
|
|
replaceWith: "ace/mode/java",
|
|
},
|
|
{
|
|
regex: /^cpp$/,
|
|
replaceWith: "ace/mode/c_cpp",
|
|
},
|
|
{
|
|
regex: /^c$/,
|
|
replaceWith: "ace/mode/c_cpp",
|
|
},
|
|
{
|
|
regex: /^css$/,
|
|
replaceWith: "ace/mode/css",
|
|
},
|
|
{
|
|
regex: /^scss$/,
|
|
replaceWith: "ace/mode/scss",
|
|
},
|
|
{
|
|
regex: /^sass$/,
|
|
replaceWith: "ace/mode/sass",
|
|
},
|
|
{
|
|
regex: /^lua$/,
|
|
replaceWith: "ace/mode/lua",
|
|
},
|
|
{
|
|
regex: /^php$/,
|
|
replaceWith: "ace/mode/php",
|
|
},
|
|
{
|
|
regex: /^ps1$/,
|
|
replaceWith: "ace/mode/powershell",
|
|
},
|
|
{
|
|
regex: /^svg$/,
|
|
replaceWith: "ace/mode/svg",
|
|
},
|
|
{
|
|
regex: /^sh$/,
|
|
replaceWith: "ace/mode/sh",
|
|
},
|
|
{
|
|
regex: /^xml$/,
|
|
replaceWith: "ace/mode/xml",
|
|
},
|
|
{
|
|
regex: /^ts$/,
|
|
replaceWith: "ace/mode/typescript",
|
|
},
|
|
{
|
|
regex: /^properties$/,
|
|
replaceWith: "ace/mode/properties",
|
|
},
|
|
{
|
|
regex: /^log$/,
|
|
replaceWith: "ace/mode/txt",
|
|
},
|
|
];
|
|
|
|
let path = "",
|
|
serverFileContent = "";
|
|
|
|
async function clickOnFile(event) {
|
|
const token = getCookie("_xsrf");
|
|
path = event.target.getAttribute("data-path");
|
|
let res = await fetch(`/api/v2/servers/${serverId}/files`, {
|
|
method: "POST",
|
|
headers: {
|
|
"X-XSRFToken": token,
|
|
},
|
|
body: JSON.stringify({ page: "files", path: path }),
|
|
});
|
|
let responseData = await res.json();
|
|
console.log(responseData);
|
|
if (responseData.status === "ok") {
|
|
console.log("Got File Contents From Server");
|
|
$("#editorParent").toggle(true); // show
|
|
$("#fileError").toggle(false); // hide
|
|
setFileName(event.target.innerText);
|
|
editor.session.setValue(responseData.data);
|
|
serverFileContent = responseData.data;
|
|
setSaveStatus(true);
|
|
} else {
|
|
bootbox.alert({
|
|
title: responseData.status,
|
|
message: responseData.error,
|
|
});
|
|
}
|
|
}
|
|
|
|
function setFileName(name) {
|
|
let fileName = name || "default.txt";
|
|
document.getElementById("editingFile").innerText = fileName;
|
|
|
|
if (fileName.match(".")) {
|
|
// The pop method removes and returns the last element.
|
|
setMode(fileName.split(".").pop().replace("ace/mode/", ""));
|
|
} else {
|
|
setMode("txt");
|
|
document.querySelector("#file_warn").innerText =
|
|
"{% raw translate('serverFiles', 'unsupportedLanguage', data['lang']) %}";
|
|
}
|
|
}
|
|
|
|
var onlongtouch;
|
|
var timer;
|
|
var touchduration = 500; //length of time we want the user to touch before we do something
|
|
const longtouch = new Event("longtouch");
|
|
|
|
function touchstart(event) {
|
|
if (!timer) {
|
|
timer = setTimeout(onlongtouch, touchduration, event);
|
|
}
|
|
}
|
|
|
|
function touchend(event) {
|
|
//stops short touches from firing the event
|
|
if (timer) {
|
|
clearTimeout(timer);
|
|
console.log("Timer: " + timer);
|
|
timer = null;
|
|
}
|
|
}
|
|
|
|
onlongtouch = function (e) {
|
|
console.log("iOS long touch detected!");
|
|
if (
|
|
[
|
|
"iPad Simulator",
|
|
"iPhone Simulator",
|
|
"iPod Simulator",
|
|
"iPad",
|
|
"iPhone",
|
|
"iPod",
|
|
].includes(navigator.platform) ||
|
|
// iPad on iOS 13 detection
|
|
(navigator.userAgent.includes("Mac") && "ontouchend" in document)
|
|
) {
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
var ctxmenuPath = e.target.getAttribute("data-path");
|
|
var ctxmenuName = e.target.getAttribute("data-name");
|
|
|
|
document.getElementById("context-title").innerHTML = ctxmenuName;
|
|
if (!ctxmenuPath) {
|
|
return;
|
|
}
|
|
$("#renameItem").show();
|
|
|
|
var isDir = e.target.classList.contains("files-tree-title");
|
|
$("#createFile").toggle(isDir);
|
|
$("#createDir").toggle(isDir);
|
|
$("#deleteDir").toggle(isDir);
|
|
$("#upload").toggle(isDir);
|
|
|
|
var isFile = e.target.classList.contains("tree-file");
|
|
$("#deleteFile").toggle(isFile);
|
|
$("#downloadFile").toggle(isFile);
|
|
|
|
if (e.target.classList.contains("root-dir")) {
|
|
$("#createFile").show();
|
|
$("#createDir").show();
|
|
$("#renameItem").hide();
|
|
$("#deleteDir").hide();
|
|
$("#deleteFile").hide();
|
|
$("#downloadFile").hide();
|
|
$("#upload").show();
|
|
}
|
|
if (e.target.textContent.endsWith(".zip")) {
|
|
$("#unzip").show();
|
|
} else {
|
|
$("#unzip").hide();
|
|
}
|
|
|
|
var clientX = e.layerX + 2;
|
|
var clientY = e.layerY + 5;
|
|
|
|
document
|
|
.getElementById("files-tree-nav-content")
|
|
.setAttribute("data-path", ctxmenuPath);
|
|
document
|
|
.getElementById("files-tree-nav-content")
|
|
.setAttribute("data-name", ctxmenuName);
|
|
document.getElementById("files-tree-nav").style.display = "flex";
|
|
document.getElementById("files-tree-nav").style.position = "fixed";
|
|
domRect = document
|
|
.getElementById("files-tree-nav")
|
|
.getBoundingClientRect();
|
|
sum = clientY + domRect["height"] - window.innerHeight;
|
|
if (domRect["height"] + clientY > window.innerHeight) {
|
|
clientY = clientY - sum;
|
|
}
|
|
document.getElementById("files-tree-nav").style.top = clientY + "px";
|
|
document.getElementById("files-tree-nav").style.left = clientX + "px";
|
|
timer = null;
|
|
}
|
|
};
|
|
/**
|
|
* @param {boolean} saved
|
|
*/
|
|
const setSaveStatus = (saved) => {
|
|
document.getElementById("save_status").innerHTML = `<i class="${saved ? "fa-solid fa-file-circle-check" : "fa-regular fa-file"
|
|
}"></i>`;
|
|
document.getElementById("save_status").style.color = saved
|
|
? "var(--success)"
|
|
: "var(--gray)";
|
|
};
|
|
["change", "undo", "redo"].forEach((event) =>
|
|
editor.on(event, (event) =>
|
|
setSaveStatus(serverFileContent === editor.session.getValue())
|
|
)
|
|
);
|
|
$("#screen-size").on("click", function (e) {
|
|
$("#editor_container").toggleClass(`col-md-6`);
|
|
});
|
|
setFileName();
|
|
$("#editorParent").toggle(false); // show
|
|
$("#fileError").toggle(false); // hide
|
|
editor.blur();
|
|
|
|
function setMode(extension) {
|
|
// if the extension matches with the RegEx it will return the replaceWith
|
|
// property. else it will return the one it has. defaults to the extension.
|
|
// this runs for each element in extensionChanges.
|
|
let aceMode = extensionChanges.reduce((output, element) => {
|
|
return extension.match(element.regex) ? element.replaceWith : output;
|
|
}, extension);
|
|
|
|
if (!aceMode.startsWith("ace/mode/")) {
|
|
document.querySelector("#file_warn").innerText =
|
|
"{% raw translate('serverFiles', 'unsupportedLanguage', data['lang']) %}";
|
|
} else {
|
|
document.querySelector("#file_warn").innerText = "";
|
|
|
|
console.log(aceMode || "ace/mode/text");
|
|
editor.session.setMode(aceMode || "ace/mode/text");
|
|
}
|
|
}
|
|
|
|
async function save() {
|
|
let text = editor.session.getValue();
|
|
|
|
const token = getCookie("_xsrf");
|
|
let res = await fetch(`/api/v2/servers/${serverId}/files`, {
|
|
method: "PATCH",
|
|
headers: {
|
|
"X-XSRFToken": token,
|
|
},
|
|
body: JSON.stringify({ path: path, contents: text }),
|
|
});
|
|
let responseData = await res.json();
|
|
if (responseData.status === "ok") {
|
|
serverFileContent = text;
|
|
setSaveStatus(true);
|
|
} else {
|
|
bootbox.alert({
|
|
title: responseData.status,
|
|
message: responseData.error,
|
|
});
|
|
}
|
|
}
|
|
|
|
async function createFile(parent, name, callback) {
|
|
const token = getCookie("_xsrf");
|
|
let res = await fetch(`/api/v2/servers/${serverId}/files/create/`, {
|
|
method: "PUT",
|
|
headers: {
|
|
"X-XSRFToken": token,
|
|
},
|
|
body: JSON.stringify({ parent: parent, name: name, directory: false }),
|
|
});
|
|
let responseData = await res.json();
|
|
if (responseData.status === "ok") {
|
|
getTreeView($("#root_dir").data("path"));
|
|
setTreeViewContext();
|
|
} else {
|
|
bootbox.alert({
|
|
title: responseData.status,
|
|
message: responseData.error,
|
|
});
|
|
}
|
|
}
|
|
|
|
async function createDir(parent, name, callback) {
|
|
const token = getCookie("_xsrf");
|
|
let res = await fetch(`/api/v2/servers/${serverId}/files/create/`, {
|
|
method: "PUT",
|
|
headers: {
|
|
"X-XSRFToken": token,
|
|
},
|
|
body: JSON.stringify({ parent: parent, name: name, directory: true }),
|
|
});
|
|
let responseData = await res.json();
|
|
if (responseData.status === "ok") {
|
|
getTreeView($("#root_dir").data("path"));
|
|
setTreeViewContext();
|
|
} else {
|
|
bootbox.alert({
|
|
title: responseData.status,
|
|
message: responseData.error,
|
|
});
|
|
}
|
|
}
|
|
|
|
async function renameItem(path, name, callback) {
|
|
const token = getCookie("_xsrf");
|
|
let res = await fetch(`/api/v2/servers/${serverId}/files/create/`, {
|
|
method: "PATCH",
|
|
headers: {
|
|
"X-XSRFToken": token,
|
|
},
|
|
body: JSON.stringify({ path: path, new_name: name }),
|
|
});
|
|
let responseData = await res.json();
|
|
if (responseData.status === "ok") {
|
|
getTreeView($("#root_dir").data("path"));
|
|
setTreeViewContext();
|
|
} else {
|
|
bootbox.alert({
|
|
title: responseData.status,
|
|
message: responseData.error,
|
|
});
|
|
}
|
|
}
|
|
|
|
async function deleteItem(path, el, callback) {
|
|
const token = getCookie("_xsrf");
|
|
let res = await fetch(`/api/v2/servers/${serverId}/files`, {
|
|
method: "DELETE",
|
|
headers: {
|
|
"X-XSRFToken": token,
|
|
},
|
|
body: JSON.stringify({ filename: path }),
|
|
});
|
|
let responseData = await res.json();
|
|
if (responseData.status === "ok") {
|
|
el = document.getElementById(path + "li");
|
|
$(el).remove();
|
|
document.getElementById("files-tree-nav").style.display = "none";
|
|
} else {
|
|
bootbox.alert({
|
|
title: responseData.status,
|
|
message: responseData.error,
|
|
});
|
|
}
|
|
}
|
|
|
|
async function unZip(path, callback) {
|
|
const token = getCookie("_xsrf");
|
|
let res = await fetch(`/api/v2/servers/${serverId}/files/zip/`, {
|
|
method: "POST",
|
|
headers: {
|
|
"X-XSRFToken": token,
|
|
},
|
|
body: JSON.stringify({ folder: path }),
|
|
});
|
|
let responseData = await res.json();
|
|
if (responseData.status === "ok") {
|
|
getTreeView($("#root_dir").data("path"));
|
|
setTreeViewContext();
|
|
} else {
|
|
bootbox.alert({
|
|
title: responseData.status,
|
|
message: responseData.error,
|
|
});
|
|
}
|
|
}
|
|
|
|
let uploadWaitDialog;
|
|
|
|
async function uploadFilesE(event) {
|
|
path = event.target.parentElement.getAttribute("data-path");
|
|
$(function () {
|
|
var uploadHtml =
|
|
"<div>" +
|
|
'<form id="upload_file" enctype="multipart/form-data">' +
|
|
"<label class='upload-area' style='width:100%;text-align:center;' for='files'>" +
|
|
"<i class='fa fa-cloud-upload fa-3x'></i>" +
|
|
"<br />" +
|
|
"{{translate('serverFiles', 'clickUpload', data['lang'])}}" +
|
|
"<input style='margin-left: 21%;' id='files' name='files' type='file' multiple='true'>" +
|
|
"</label></form>" +
|
|
"<br />" +
|
|
"<ul style='margin-left:5px !important;' id='fileList'></ul>" +
|
|
"</div><div class='clearfix'></div>";
|
|
bootbox.dialog({
|
|
message: uploadHtml,
|
|
title:
|
|
"{{ translate('serverFiles', 'uploadTitle', data['lang'])}}" + path,
|
|
buttons: {
|
|
success: {
|
|
label: "{{ translate('serverFiles', 'upload', data['lang']) }}",
|
|
className: "btn-default",
|
|
callback: async function () {
|
|
if ($("#files").get(0).files.length === 0) {
|
|
return hideUploadBox();
|
|
}
|
|
var height = files.files.length * 50;
|
|
|
|
var waitMessage =
|
|
'<p class="text-center mb-0">' +
|
|
'<i class="fa fa-spin fa-cog"></i> ' +
|
|
"{{ translate('serverFiles', 'waitUpload', data['lang']) }}" +
|
|
"<br>" +
|
|
"<strong>" +
|
|
"{{ translate('serverFiles', 'stayHere', data['lang']) }}" +
|
|
"</strong>" +
|
|
"</p>" +
|
|
'<div class="progress" id="upload-progress-bar-parent" style="height:' +
|
|
height +
|
|
'px; width:100%; display: block;">' +
|
|
"</div>";
|
|
files = document.getElementById("files");
|
|
uploadWaitDialog = bootbox.dialog({
|
|
message: waitMessage,
|
|
closeButton: false,
|
|
});
|
|
|
|
let nFiles = files.files.length;
|
|
const uploadPromises = [];
|
|
|
|
for (let i = 0; i < nFiles; i++) {
|
|
const file = files.files[i];
|
|
const progressHtml = `
|
|
<div style="width: 100%; min-width: 100%;">
|
|
${file.name}:
|
|
<br><div
|
|
id="upload-progress-bar-${i + 1}"
|
|
class="progress-bar progress-bar-striped progress-bar-animated"
|
|
role="progressbar"
|
|
style="width: 100%; height: 10px;"
|
|
aria-valuenow="0"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
></div>
|
|
</div><br>
|
|
`;
|
|
|
|
$("#upload-progress-bar-parent").append(progressHtml);
|
|
|
|
const uploadPromise = uploadFile(
|
|
"server_upload",
|
|
file,
|
|
path,
|
|
i,
|
|
(progress) => {
|
|
$(`#upload-progress-bar-${i + 1}`).attr(
|
|
"aria-valuenow",
|
|
progress
|
|
);
|
|
$(`#upload-progress-bar-${i + 1}`).css(
|
|
"width",
|
|
progress + "%"
|
|
);
|
|
}
|
|
);
|
|
uploadPromises.push(uploadPromise);
|
|
}
|
|
|
|
await Promise.all(uploadPromises);
|
|
setTimeout(() => {
|
|
hideUploadBox();
|
|
}, 2000);
|
|
},
|
|
},
|
|
},
|
|
});
|
|
});
|
|
}
|
|
|
|
async function calculateFileHash(file) {
|
|
const arrayBuffer = await file.arrayBuffer();
|
|
const hashBuffer = await crypto.subtle.digest("SHA-256", arrayBuffer);
|
|
const hashArray = Array.from(new Uint8Array(hashBuffer));
|
|
const hashHex = hashArray
|
|
.map((b) => b.toString(16).padStart(2, "0"))
|
|
.join("");
|
|
|
|
return hashHex;
|
|
}
|
|
|
|
function getDirView(event) {
|
|
let path = event.target.parentElement.getAttribute("data-path");
|
|
if (document.getElementById(path).classList.contains("clicked")) {
|
|
return;
|
|
} else {
|
|
getTreeView(path);
|
|
}
|
|
}
|
|
async function getTreeView(path) {
|
|
const token = getCookie("_xsrf");
|
|
let res = await fetch(`/api/v2/servers/${serverId}/files`, {
|
|
method: "POST",
|
|
headers: {
|
|
"X-XSRFToken": token,
|
|
},
|
|
body: JSON.stringify({ page: "files", path: path }),
|
|
});
|
|
let responseData = await res.json();
|
|
if (responseData.status === "ok") {
|
|
console.log(responseData);
|
|
process_tree_response(responseData);
|
|
} else {
|
|
bootbox.alert({
|
|
title: responseData.status,
|
|
message: responseData.error,
|
|
});
|
|
}
|
|
}
|
|
|
|
function process_tree_response(response) {
|
|
let path = response.data.root_path.path;
|
|
let text = ``;
|
|
if (!response.data.root_path.top) {
|
|
text = `<ul class="tree-nested d-block" id="${path}ul">`;
|
|
}
|
|
Object.entries(response.data).forEach(([key, value]) => {
|
|
if (key === "root_path" || key === "db_stats") {
|
|
//continue is not valid in for each. Return acts as a continue.
|
|
return;
|
|
}
|
|
let checked = "";
|
|
let dpath = value.path;
|
|
let filename = key;
|
|
if (value.dir) {
|
|
if (value.excluded) {
|
|
checked = "checked";
|
|
}
|
|
text += `<li class="tree-item" id="${dpath}li" data-path="${dpath}">
|
|
\n<div id="${dpath}" data-path="${dpath}" data-name="${filename}" class="tree-caret tree-ctx-item tree-folder">
|
|
<input type="checkbox" class="checkBoxClass d-none file-check" name="root_path" value="${dpath}" ${checked}>
|
|
<span id="${dpath}span" class="files-tree-title" data-path="${dpath}" data-name="${filename}" onclick="getDirView(event)">
|
|
<i style="color: var(--info);" class="far fa-folder"></i>
|
|
<i style="color: var(--info);" class="far fa-folder-open"></i>
|
|
${filename}
|
|
</span>
|
|
</input></div></li>`;
|
|
} else {
|
|
text += `<li
|
|
class="d-block tree-ctx-item tree-file"
|
|
data-path="${dpath}"
|
|
data-name="${filename}"
|
|
onclick="clickOnFile(event)" id="${dpath}li"><input type='checkbox' class="checkBoxClass d-none file-check" name='root_path' value="${dpath}" ${checked}><span style="margin-right: 6px;">
|
|
<i class="far fa-file"></i></span></input>${filename}</li>`;
|
|
}
|
|
});
|
|
if (!response.data.root_path.top) {
|
|
text += `</ul>`;
|
|
}
|
|
if (response.data.root_path.top) {
|
|
try {
|
|
document.getElementById("main-tree-div").innerHTML += text;
|
|
document
|
|
.getElementById("main-tree")
|
|
.parentElement.classList.add("clicked");
|
|
} catch {
|
|
document.getElementById("files-tree").innerHTML = text;
|
|
}
|
|
} else {
|
|
try {
|
|
document.getElementById(path + "span").classList.add("tree-caret-down");
|
|
document.getElementById(path).innerHTML += text;
|
|
document.getElementById(path).classList.add("clicked");
|
|
} catch {
|
|
console.log("Bad");
|
|
}
|
|
|
|
var toggler = document.getElementById(path + "span");
|
|
|
|
if (toggler.classList.contains("files-tree-title")) {
|
|
document
|
|
.getElementById(path + "span")
|
|
.addEventListener("click", function caretListener() {
|
|
document.getElementById(path + "ul").classList.toggle("d-block");
|
|
document
|
|
.getElementById(path + "span")
|
|
.classList.toggle("tree-caret-down");
|
|
});
|
|
}
|
|
}
|
|
setTimeout(function () {
|
|
setTreeViewContext();
|
|
}, 1000);
|
|
}
|
|
function getToggleMain(event) {
|
|
path = event.target.parentElement.getAttribute("data-path");
|
|
document.getElementById("files-tree").classList.toggle("d-block");
|
|
document.getElementById(path + "span").classList.toggle("tree-caret-down");
|
|
document.getElementById(path + "span").classList.toggle("tree-caret");
|
|
}
|
|
|
|
function setTreeViewContext() {
|
|
var treeItems = Array.from(
|
|
document.getElementsByClassName("tree-ctx-item")
|
|
);
|
|
|
|
treeItems.forEach((item) => {
|
|
if (
|
|
[
|
|
"iPad Simulator",
|
|
"iPhone Simulator",
|
|
"iPod Simulator",
|
|
"iPad",
|
|
"iPhone",
|
|
"iPod",
|
|
].includes(navigator.platform) ||
|
|
// iPad on iOS 13 detection
|
|
(navigator.userAgent.includes("Mac") && "ontouchend" in document)
|
|
) {
|
|
item.addEventListener("touchstart", touchstart, false);
|
|
item.addEventListener("touchend", touchend, false);
|
|
}
|
|
item.addEventListener("contextmenu", function contextListener(event) {
|
|
event.preventDefault();
|
|
var ctxmenuPath = event.target.getAttribute("data-path");
|
|
var ctxmenuName = event.target.getAttribute("data-name");
|
|
if (!ctxmenuPath) {
|
|
console.log({ "event.target": event.target, ctxmenuPath });
|
|
return;
|
|
}
|
|
$("#renameItem").show();
|
|
|
|
var isDir = event.target.classList.contains("files-tree-title");
|
|
$("#createFile").toggle(isDir);
|
|
$("#createDir").toggle(isDir);
|
|
$("#deleteDir").toggle(isDir);
|
|
$("#upload").toggle(isDir);
|
|
|
|
document.getElementById("context-title").innerHTML = ctxmenuName;
|
|
|
|
var isFile = event.target.classList.contains("tree-file");
|
|
$("#deleteFile").toggle(isFile);
|
|
$("#downloadFile").toggle(isFile);
|
|
|
|
if (event.target.classList.contains("root-dir")) {
|
|
$("#createFile").show();
|
|
$("#createDir").show();
|
|
$("#renameItem").hide();
|
|
$("#deleteDir").hide();
|
|
$("#deleteFile").hide();
|
|
$("#downloadFile").hide();
|
|
$("#upload").show();
|
|
}
|
|
if (event.target.textContent.endsWith(".zip")) {
|
|
$("#unzip").show();
|
|
} else {
|
|
$("#unzip").hide();
|
|
}
|
|
|
|
var clientX = event.clientX;
|
|
var clientY = event.clientY;
|
|
|
|
document
|
|
.getElementById("files-tree-nav-content")
|
|
.setAttribute("data-path", ctxmenuPath);
|
|
document
|
|
.getElementById("files-tree-nav-content")
|
|
.setAttribute("data-name", ctxmenuName);
|
|
document.getElementById("files-tree-nav").style.display = "flex";
|
|
document.getElementById("files-tree-nav").style.position = "fixed";
|
|
domRect = document
|
|
.getElementById("files-tree-nav")
|
|
.getBoundingClientRect();
|
|
sum = clientY + domRect["height"] - window.innerHeight;
|
|
if (domRect["height"] + clientY > window.innerHeight) {
|
|
clientY = clientY - sum;
|
|
}
|
|
document.getElementById("files-tree-nav").style.top = clientY + "px";
|
|
document.getElementById("files-tree-nav").style.left = clientX + "px";
|
|
});
|
|
});
|
|
}
|
|
|
|
document.addEventListener("click", function (e) {
|
|
let inside = e.target.closest("#files-tree-nav");
|
|
let contextMenu = document.getElementById("files-tree-nav");
|
|
if (!inside) {
|
|
contextMenu.setAttribute("style", "display:none");
|
|
} else {
|
|
contextMenu.setAttribute("style", "display:none");
|
|
}
|
|
});
|
|
|
|
if (webSocket) {
|
|
webSocket.on("close_upload_box", function (close_upload_box) {
|
|
hideUploadBox();
|
|
});
|
|
}
|
|
function hideUploadBox() {
|
|
if (!uploadWaitDialog) return;
|
|
uploadWaitDialog.modal("hide");
|
|
}
|
|
|
|
function createFileE(event) {
|
|
bootbox.prompt(
|
|
"{% raw translate('serverFiles', 'createFileQuestion', data['lang']) %}",
|
|
function (result) {
|
|
path = event.target.parentElement.getAttribute("data-path");
|
|
name = event.target.parentElement.getAttribute("data-name");
|
|
if (!result) return;
|
|
|
|
createFile(path, result, function () {
|
|
getTreeView();
|
|
document.getElementById("files-tree-nav").style.display = "none";
|
|
});
|
|
}
|
|
);
|
|
}
|
|
|
|
function createDirE(event) {
|
|
bootbox.prompt(
|
|
"{% raw translate('serverFiles', 'createDirQuestion', data['lang']) %}",
|
|
function (result) {
|
|
path = event.target.parentElement.getAttribute("data-path");
|
|
name = event.target.parentElement.getAttribute("data-name");
|
|
if (!result) return;
|
|
|
|
createDir(path, result, function () {
|
|
getTreeView();
|
|
document.getElementById("files-tree-nav").style.display = "none";
|
|
});
|
|
}
|
|
);
|
|
}
|
|
function downloadFileE(event) {
|
|
path = event.target.parentElement.getAttribute("data-path");
|
|
name = event.target.parentElement.getAttribute("data-name");
|
|
encoded_path = encodeURIComponent(path);
|
|
encoded_name = encodeURIComponent(name);
|
|
window.location.href = `/panel/download_file?id=${serverId}&path=${encoded_path}&name=${encoded_name}`;
|
|
}
|
|
|
|
function renameItemE(event) {
|
|
path = event.target.parentElement.getAttribute("data-path");
|
|
name = event.target.parentElement.getAttribute("data-name");
|
|
bootbox.prompt({
|
|
title:
|
|
"{% raw translate('serverFiles', 'renameItemQuestion', data['lang']) %}",
|
|
value: name,
|
|
callback: function (result) {
|
|
if (!result) return;
|
|
renameItem(path, result, function () {
|
|
getTreeView();
|
|
document.getElementById("files-tree-nav").style.display = "none";
|
|
});
|
|
},
|
|
});
|
|
}
|
|
function unzipFilesE(event) {
|
|
path = event.target.parentElement.getAttribute("data-path");
|
|
console.log(path);
|
|
unZip(path);
|
|
}
|
|
|
|
function deleteFileE(event) {
|
|
path = event.target.parentElement.getAttribute("data-path");
|
|
name = event.target.parentElement.getAttribute("data-name");
|
|
bootbox.confirm({
|
|
size: "",
|
|
title:
|
|
"{% raw translate('serverFiles', 'deleteItemQuestion', data['lang']) %}",
|
|
closeButton: false,
|
|
message:
|
|
"{% raw translate('serverFiles', 'deleteItemQuestionMessage', data['lang']) %}",
|
|
buttons: {
|
|
confirm: {
|
|
label: "{{ translate('serverFiles', 'yesDelete', data['lang']) }}",
|
|
className: "btn-danger",
|
|
},
|
|
cancel: {
|
|
label: "{{ translate('serverFiles', 'noDelete', data['lang']) }}",
|
|
className: "btn-link",
|
|
},
|
|
},
|
|
callback: function (result) {
|
|
if (!result) return;
|
|
deleteItem(path);
|
|
},
|
|
});
|
|
}
|
|
|
|
getTreeView($("#root_dir").data("path"));
|
|
setTreeViewContext();
|
|
|
|
function setKeyboard(target) {
|
|
var handlerName = target.getAttribute("data-handler-name");
|
|
if (handlerName == "null") handlerName = null;
|
|
editor.setKeyboardHandler(handlerName, () => {
|
|
if (handlerName == "ace/keyboard/vim") {
|
|
require("ace/keyboard/vim").Vim.defineEx("write", "w", function () {
|
|
save();
|
|
});
|
|
}
|
|
});
|
|
|
|
var nodes = target.parentNode.querySelectorAll("[data-handler-name]");
|
|
nodes.forEach((node) => {
|
|
node.classList.remove("btn-primary");
|
|
node.classList.add("btn-secondary");
|
|
});
|
|
|
|
target.classList.remove("btn-secondary");
|
|
target.classList.add("btn-primary");
|
|
}
|
|
</script>
|
|
<script src="../../static/assets/js/shared/upload.js"></script>
|
|
{% end %} |