mirror of
https://gitlab.com/crafty-controller/crafty-4.git
synced 2024-08-30 18:23:09 +00:00
Start working on the file explorer UI. W.I.P. 🚧
This commit is contained in:
LukasDoesDev
parent
99b04dbca1
commit
0ac3f15b8b
@ -59,6 +59,12 @@ class PanelHandler(BaseHandler):
|
|||||||
elif page == 'contribute':
|
elif page == 'contribute':
|
||||||
template = "panel/contribute.html"
|
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":
|
elif page == "remove_server":
|
||||||
server_id = self.get_argument('id', None)
|
server_id = self.get_argument('id', None)
|
||||||
server_data = controller.get_server_data(server_id)
|
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 %}
|
||||||
Loading…
Reference in New Issue
Block a user