mirror of
https://gitlab.com/crafty-controller/crafty-4.git
synced 2024-08-30 18:23:09 +00:00
Merge branch 'issue_6' into 'dev'
Fix Issue 6 See merge request crafty-controller/crafty-commander!12
This commit is contained in:
Phillip Tarrant
commit
d97712b174
@ -59,6 +59,12 @@ class PanelHandler(BaseHandler):
|
||||
elif page == 'contribute':
|
||||
template = "panel/contribute.html"
|
||||
|
||||
elif page == 'file_edit':
|
||||
template = "panel/file_edit.html"
|
||||
|
||||
elif page == 'files_menu':
|
||||
template = "panel/files_menu.html"
|
||||
|
||||
elif page == "remove_server":
|
||||
server_id = self.get_argument('id', None)
|
||||
server_data = controller.get_server_data(server_id)
|
||||
|
||||
190
app/frontend/templates/panel/file_edit.html
Normal file
190
app/frontend/templates/panel/file_edit.html
Normal file
@ -0,0 +1,190 @@
|
||||
{% extends ../base.html %}
|
||||
|
||||
{% block meta %}
|
||||
<!-- <meta http-equiv="refresh" content="60">-->
|
||||
{% end %}
|
||||
|
||||
{% block title %}Crafty Controller - Editing File -< name >- in server -< server name >- (-< server path id >-){% 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">
|
||||
Editing File -< name >- in server -< server name >- (-< server path id >-)
|
||||
<br />
|
||||
<small>Path: -< file location relative to server directory >-</small>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Page Title Header Ends-->
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-sm-12 grid-margin">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<a href="/" class="btn btn-link btn-outline-primary" style="position: relative;top: -1rem">
|
||||
<i class="fas fa-arrow-left"></i> Back
|
||||
</a>
|
||||
|
||||
<h3 id="file_warn"></h3>
|
||||
|
||||
<div id="editor">-< file_contents >-</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- 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>
|
||||
|
||||
let editor = ace.edit('editor');
|
||||
editor.setTheme('ace/theme/dracula');
|
||||
|
||||
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: /^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'
|
||||
}
|
||||
];
|
||||
|
||||
let fileName = '-< file_name >-.txt';
|
||||
|
||||
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 = 'Warning: This is not a supported language';
|
||||
}
|
||||
|
||||
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 = 'Warning: This is not a supported language';
|
||||
} else {
|
||||
document
|
||||
.querySelector('#file_warn')
|
||||
.innerText = '';
|
||||
|
||||
console.log(aceMode || 'ace/mode/text');
|
||||
editor.session.setMode(aceMode || 'ace/mode/text');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function save() {
|
||||
let text = editor.session.getValue();
|
||||
// Use AJAX or something
|
||||
alert(text);
|
||||
}
|
||||
|
||||
</script>
|
||||
{% end %}
|
||||
112
app/frontend/templates/panel/files_menu.html
Normal file
112
app/frontend/templates/panel/files_menu.html
Normal file
@ -0,0 +1,112 @@
|
||||
{% extends ../base.html %}
|
||||
|
||||
{% block meta %}
|
||||
<!-- <meta http-equiv="refresh" content="60">-->
|
||||
{% end %}
|
||||
|
||||
{% block title %}Crafty Controller - Looking at files in server -< server name >- (-< server path id >-){% 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">
|
||||
Looking at files in server -< server name >- (-< server path id >-)
|
||||
<br />
|
||||
<small>Path: -< location relative to server directory >-</small>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Page Title Header Ends-->
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-sm-12 grid-margin">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
||||
<ul class="files-list list-group">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center"
|
||||
style="background-color: var(--dark) !important;">
|
||||
<a href="/panel/file_edit?path=-< file location relative to server directory >-" class="text-white">-< name >-</a>
|
||||
<span>
|
||||
<a href="/panel/file_edit?path=-< file location relative to server directory >-" class="mx-1 btn btn-dark">Edit</a>
|
||||
<button onclick="alert('will make a modal')" class="mx-1 btn btn-dark">Rename</button>
|
||||
<button onclick="alert('will make a confirmation modal')" class="mx-1 btn btn-danger">Delete</button>
|
||||
<span style="margin-left: 0.3rem;width: 5rem;display: inline-block;">
|
||||
<span class="badge badge-primary badge-pill">File</span>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center"
|
||||
style="background-color: var(--dark) !important;">
|
||||
<a href="/panel/files_menu?path=-< location relative to server directory >-" class="text-white">-< name >-</a>
|
||||
<span>
|
||||
<a href="/panel/files_menu?path=-< location relative to server directory >-" class="mx-1 btn btn-dark">Open</a>
|
||||
<button onclick="alert('will make a modal')" class="mx-1 btn btn-dark">Rename</button>
|
||||
<button onclick="alert('will make a confirmation modal')" class="mx-1 btn btn-danger">Delete</button>
|
||||
<span style="margin-left: 0.3rem;width: 5rem;display: inline-block;">
|
||||
<span class="badge badge-primary badge-pill">Folder</span>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<!--
|
||||
|
||||
File:
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center"
|
||||
style="background-color: var(--dark) !important;">
|
||||
<a href="/panel/file_edit?path=-< file location relative to server directory >-" class="text-white">-< name >-</a>
|
||||
<span>
|
||||
<a href="/panel/file_edit?path=-< file location relative to server directory >-" class="mx-1 btn btn-dark">Edit</a>
|
||||
<button onclick="alert('will make a modal')" class="mx-1 btn btn-dark">Rename</button>
|
||||
<button onclick="alert('will make a confirmation modal')" class="mx-1 btn btn-danger">Delete</button>
|
||||
<span style="margin-left: 0.3rem;width: 5rem;display: inline-block;">
|
||||
<span class="badge badge-primary badge-pill">File</span>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
Folder:
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center"
|
||||
style="background-color: var(--dark) !important;">
|
||||
<a href="/panel/files_menu?path=-< location relative to server directory >-" class="text-white">-< name >-</a>
|
||||
<span>
|
||||
<a href="/panel/files_menu?path=-< location relative to server directory >-" class="mx-1 btn btn-dark">Open</a>
|
||||
<button onclick="alert('will make a modal')" class="mx-1 btn btn-dark">Rename</button>
|
||||
<button onclick="alert('will make a confirmation modal')" class="mx-1 btn btn-danger">Delete</button>
|
||||
<span style="margin-left: 0.3rem;width: 5rem;display: inline-block;">
|
||||
<span class="badge badge-primary badge-pill">Folder</span>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
-->
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- content-wrapper ends -->
|
||||
|
||||
{% end %}
|
||||
|
||||
{% block js %}
|
||||
|
||||
<script>
|
||||
|
||||
// empty for now
|
||||
|
||||
</script>
|
||||
|
||||
{% end %}
|
||||
@ -72,13 +72,21 @@
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="server_command" name="server_command" placeholder="Enter your server command" autofocus="">
|
||||
<div style="gap: 0.5rem;" class="input-group flex-wrap">
|
||||
<input style="min-width: 10rem;" type="text" class="form-control" id="server_command" name="server_command" placeholder="Enter your server command" autofocus="">
|
||||
<span class="input-group-btn ml-5">
|
||||
<input type="hidden" value="" id="last_command"/>
|
||||
<button id="submit" class="btn btn-sm btn-info" type="button">Send Command</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0">
|
||||
<button onclick="send_command(server_id, 'start_server');" id="start-btn" style="max-width: 7rem;" class="btn btn-primary m-1 flex-grow-1">Start</button>
|
||||
<button onclick="send_command(server_id, 'restart_server');" id="restart-btn" style="max-width: 7rem;" class="btn btn-outline-primary m-1 flex-grow-1">Restart</button>
|
||||
<button onclick="send_command(server_id, 'stop_server');" id="stop-btn" style="max-width: 7rem;" class="btn btn-danger m-1 flex-grow-1">Stop</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -96,6 +104,44 @@
|
||||
|
||||
{% block js %}
|
||||
<script>
|
||||
|
||||
function send_command (server_id, command){
|
||||
<!-- this getCookie function is in base.html-->
|
||||
var token = getCookie("_xsrf");
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
headers: {'X-XSRFToken': token},
|
||||
url: '/server/command?command=' + command + '&id=' + server_id,
|
||||
success: function(data){
|
||||
console.log("got response:");
|
||||
console.log(data);
|
||||
setTimeout(function(){ location.reload(); }, 10000);
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Convert running to lower case (example: 'True' converts to 'true') and
|
||||
// then to boolean via JSON.parse()
|
||||
let online = JSON.parse('{{ data['server_stats'][0]['running'] }}'.toLowerCase());
|
||||
|
||||
let startBtn = document.querySelector('#start-btn');
|
||||
let restartBtn = document.querySelector('#restart-btn');
|
||||
let stopBtn = document.querySelector('#stop-btn');
|
||||
|
||||
if (online) {
|
||||
startBtn.setAttribute('disabled', 'disabled');
|
||||
restartBtn.removeAttribute('disabled');
|
||||
stopBtn.removeAttribute('disabled');
|
||||
} else {
|
||||
startBtn.removeAttribute('disabled');
|
||||
restartBtn.setAttribute('disabled', 'disabled');
|
||||
stopBtn.setAttribute('disabled', 'disabled');
|
||||
}
|
||||
|
||||
let server_id = '{{ data['server_stats'][0]['server_id']['server_id'] }}';
|
||||
|
||||
function get_server_log(){
|
||||
if( !$("#stop_scroll").is(':checked')){
|
||||
$.ajax({
|
||||
|
||||
@ -26,26 +26,50 @@
|
||||
<div class="row w-100">
|
||||
<div class="col-lg-4 mx-auto">
|
||||
|
||||
<div class="auto-form-wrapper">
|
||||
<div class="auto-form-wrapper login-modal">
|
||||
<div class="text-center">
|
||||
<img src="/static/assets/images/logo_long.jpg">
|
||||
</div>
|
||||
<style>
|
||||
.login-modal {
|
||||
border-radius: 0.4rem !important;
|
||||
box-shadow: 0 8px 12px 0 hsla(0, 0%, 0%, 0.2) !important;
|
||||
}
|
||||
.login-text-input {
|
||||
border: none !important;
|
||||
background-color: hsl(234, 30%, 45%);
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.login-text-input:hover,
|
||||
.login-text-input:focus {
|
||||
background-color: hsl(234, 30%, 39%) !important;
|
||||
}
|
||||
.login-input {
|
||||
border-radius: 0.4rem !important;
|
||||
box-shadow: 0 8px 12px 0 hsla(0, 0%, 0%, 0.2);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.login-input:hover,
|
||||
.login-input:focus {
|
||||
box-shadow: 0 12px 16px 0 hsla(0, 0%, 0%, 0.4);
|
||||
}
|
||||
</style>
|
||||
<form action="/public/login" method="post">
|
||||
{% raw xsrf_form_html() %}
|
||||
<div class="form-group">
|
||||
<label class="label">Username</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="username" name="username" id="username" required="true">
|
||||
<input type="text" class="form-control login-text-input login-input" placeholder="username" name="username" id="username" required="true">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="label">Password</label>
|
||||
<div class="input-group">
|
||||
<input type="password" class="form-control" placeholder="" name="password" id="password" required="true">
|
||||
<input type="password" class="form-control login-text-input login-input" placeholder="" name="password" id="password" required="true">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button class="btn btn-primary submit-btn btn-block">Login</button>
|
||||
<button class="login-input btn btn-primary submit-btn btn-block">Login</button>
|
||||
</div>
|
||||
<div class="form-group d-flex justify-content-between">
|
||||
<div class="form-check form-check-flat mt-0">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user