Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Very rough base implementation of file renaming

Browse source
This commit is contained in:
Dane Everitt 2016-10-01 14:34:18 -04:00
parent 3dbe89969e
commit d812e1a23c
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 287 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
resources/views/server/files/index.blade.php
View file

@ -23,6 +23,12 @@
Managing Files for: {{ $server->name }} Managing Files for: {{ $server->name }}
@endsection @endsection
@section('scripts')
@parent
{!! Theme::js('js/vendor/async/async.min.js') !!}
{!! Theme::js('js/vendor/lodash/lodash.js') !!}
@endsection
@section('content') @section('content')
<div class="col-md-12"> <div class="col-md-12">
<div class="row"> <div class="row">
@ -50,128 +56,21 @@
</div> </div>
</div> </div>
</div> </div>
<ul id="fileOptionMenu" class="dropdown-menu" role="menu" style="display:none" >
<li data-action="move"><a tabindex="-1" href="#"><i class="fa fa-arrow-right"></i> Move</a></li>
<li data-action="rename"><a tabindex="-1" href="#"><i class="fa fa-pencil-square-o"></i> Rename</a></li>
<li><a tabindex="-1" href="#"><i class="fa fa-file-archive-o"></i> Compress</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#"><i class="fa fa-download"></i> Download</a></li>
<li><a tabindex="-1" href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
</ul>
</div> </div>
<script src="{{ route('server.js', [$server->uuidShort, 'filemanager', 'index.js']) }}"></script>
<script src="{{ route('server.js', [$server->uuidShort, 'filemanager', 'actions.js']) }}"></script>
<script src="{{ route('server.js', [$server->uuidShort, 'filemanager', 'contextmenu.js']) }}"></script>
<script> <script>
$(document).ready(function () { $(window).load(function () {
$('.server-files').addClass('active'); $('.server-files').addClass('active');
}); });
$(window).load(function(){
var doneLoad = false;
// Show Loading Animation
function handleLoader (show) {
// Hide animation if no files displayed.
if ($('#load_files').height() < 5) { return; }
// Show Animation
if (show === true){
var height = $('#load_files').height();
var width = $('.ajax_loading_box').width();
var center_height = (height / 2) - 30;
var center_width = (width / 2) - 30;
$('#position_me').css({
'top': center_height,
'left': center_width,
'font-size': '60px'
});
$(".ajax_loading_box").css('height', (height + 5)).fadeIn();
} else {
$('.ajax_loading_box').fadeOut(100);
}
}
function reloadActions () {
reloadActionClick();
reloadActionDelete();
}
// Handle folder clicking to load new contents
function reloadActionClick () {
$('a.load_new').click(function (e) {
e.preventDefault();
window.history.pushState(null, null, $(this).attr('href'));
loadDirectoryContents($.urlParam('dir', $(this).attr('href')));
});
}
// Handle Deleting Files
function reloadActionDelete () {
$('[data-action="delete_file"]').click(function (e) {
e.preventDefault();
var clicked = $(this);
var deleteItemPath = $(this).attr('href');
swal({
type: 'warning',
title: '',
text: 'Are you sure you want to delete <code>' + clicked.data('name') + '</code>?',
html: true,
showCancelButton: true,
showConfirmButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true
}, function () {
$.ajax({
type: 'DELETE',
url: '{{ $node->scheme }}://{{ $node->fqdn }}:{{ $node->daemonListen }}/server/file/' + deleteItemPath,
headers: {
'X-Access-Token': '{{ $server->daemonSecret }}',
'X-Access-Server': '{{ $server->uuid }}'
}
}).done(function (data) {
clicked.parent().parent().parent().parent().fadeOut();
swal({
type: 'success',
title: 'File Deleted'
});
}).fail(function (jqXHR) {
console.error(jqXHR);
swal({
type: 'error',
title: 'Whoops!',
html: true,
text: 'An error occured while attempting to delete this file. Please try again.',
});
});
});
});
}
// Handle Loading Contents
function loadDirectoryContents (dir) {
handleLoader(true);
var outputContent;
var urlDirectory = (dir === null) ? '/' : dir;
$.ajax({
type: 'POST',
url: '{{ route('server.files.directory-list', $server->uuidShort) }}',
headers: { 'X-CSRF-Token': '{{ csrf_token() }}' },
data: { directory: urlDirectory }
}).done(function (data) {
handleLoader(false);
$("#load_files").slideUp(function () {
$("#load_files").html(data).slideDown();
$('[data-toggle="tooltip"]').tooltip();
$('#internal_alert').slideUp();
// Run Actions Again
reloadActions();
});
}).fail(function (jqXHR) {
$("#internal_alert").html('<div class="alert alert-danger">An error occured while attempting to process this request. Please try again.</div>').show();
console.log(jqXHR);
});
}
// Load on Initial Page Load
loadDirectoryContents($.urlParam('dir'));
});
</script> </script>
@endsection @endsection

34
resources/views/server/files/list.blade.php
View file

@ -18,57 +18,57 @@
{{-- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE --}} {{-- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE --}}
{{-- SOFTWARE. --}} {{-- SOFTWARE. --}}
<h4 class="nopad">/home/container{{ $directory['header'] }} &nbsp;<small><a href="/server/{{ $server->uuidShort }}/files/add/@if($directory['header'] !== '')?dir={{ $directory['header'] }}@endif" class="text-muted"><i class="fa fa-plus" data-toggle="tooltip" data-placement="top" title="Add New File(s)"></i></a></small></h4> <h4 class="nopad">/home/container{{ $directory['header'] }} &nbsp;<small><a href="/server/{{ $server->uuidShort }}/files/add/@if($directory['header'] !== '')?dir={{ $directory['header'] }}@endif" class="text-muted"><i class="fa fa-plus" data-toggle="tooltip" data-placement="top" title="Add New File(s)"></i></a></small></h4>
<table class="table table-striped table-bordered table-hover"> <table class="table table-striped table-bordered table-hover" id="file_listing">
<thead> <thead>
<tr> <tr>
<th style="width:2%;text-align:center;"></th> <th style="width:2%;text-align:center;"></th>
<th style="width:45%">File Name</th> <th style="width:45%">File Name</th>
<th style="width:15%">Size</th> <th style="width:15%">Size</th>
<th style="width:20%">Last Modified</th> <th style="width:20%">Last Modified</th>
<th style="width:20%;text-align:center;">Options</th> {{-- <th style="width:20%;text-align:center;">Options</th> --}}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@if (isset($directory['first']) && $directory['first'] === true) @if (isset($directory['first']) && $directory['first'] === true)
<tr> <tr>
<td><i class="fa fa-folder-open" style="margin-left: 0.859px;"></i></td> <td><i class="fa fa-folder-open" style="margin-left: 0.859px;"></i></td>
<td><a href="/server/{{ $server->uuidShort }}/files" class="load_new">&larr;</a></a></td> <td><a href="/server/{{ $server->uuidShort }}/files" data-action="directory-view">&larr;</a></a></td>
<td></td>
<td></td> <td></td>
<td></td> <td></td>
{{-- <td></td> --}}
</tr> </tr>
@endif @endif
@if (isset($directory['show']) && $directory['show'] === true) @if (isset($directory['show']) && $directory['show'] === true)
<tr> <tr>
<td><i class="fa fa-folder-open" style="margin-left: 0.859px;"></i></td> <td><i class="fa fa-folder-open" style="margin-left: 0.859px;"></i></td>
<td><a href="/server/{{ $server->uuidShort }}/files?dir={{ rawurlencode($directory['link']) }}" class="load_new">&larr; {{ $directory['link_show'] }}</a></a></td> <td><a href="/server/{{ $server->uuidShort }}/files?dir={{ rawurlencode($directory['link']) }}" data-action="directory-view">&larr; {{ $directory['link_show'] }}</a></a></td>
<td></td>
<td></td> <td></td>
<td></td> <td></td>
{{-- <td></td> --}}
</tr> </tr>
@endif @endif
@foreach ($folders as $folder) @foreach ($folders as $folder)
<tr> <tr class="align-middle" data-path="@if($folder['directory'] !== ''){{ rawurlencode($folder['directory']) }}/@endif{{ rawurlencode($folder['entry']) }}">
<td><i class="fa fa-folder-open" style="margin-left: 0.859px;"></i></td> <td data-identifier="type"><i class="fa fa-folder-open" style="margin-left: 0.859px;"></i></td>
<td><a href="/server/{{ $server->uuidShort }}/files?dir=/@if($folder['directory'] !== ''){{ rawurlencode($folder['directory']) }}/@endif{{ rawurlencode($folder['entry']) }}" class="load_new">{{ $folder['entry'] }}</a></td> <td data-identifier="name" data-hash="@if($folder['directory'] !== ''){{ rawurlencode($folder['directory']) }}/@endif{{ rawurlencode($folder['entry']) }}"><a href="/server/{{ $server->uuidShort }}/files" data-action="directory-view">{{ $folder['entry'] }}</a></td>
<td>{{ $folder['size'] }}</td> <td data-identifier="size">{{ $folder['size'] }}</td>
<td>{{ date('m/d/y H:i:s', $folder['date']) }}</td> <td data-identifier="modified">{{ date('m/d/y H:i:s', $folder['date']) }}</td>
<td style="text-align:center;"> {{-- <td class="text-center">
<div class="row" style="text-align:center;"> <div class="row" style="text-align:center;">
<div class="col-md-3 hidden-xs hidden-sm"></div> <div class="col-md-3 hidden-xs hidden-sm"></div>
<div class="col-md-3 hidden-xs hidden-sm"> <div class="col-md-3 hidden-xs hidden-sm">
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
@can('delete-files', $server) @can('delete-files', $server)
<a href="@if($folder['directory'] !== ''){{ rawurlencode($folder['directory']) }}/@endif{{ rawurlencode($folder['entry']) }}" data-action="delete_file" data-name="{{ $folder['entry'] }}"><span class="badge label-danger"><i class="fa fa-trash-o"></i></span></a> <a href="@if($folder['directory'] !== ''){{ rawurlencode($folder['directory']) }}/@endif{{ rawurlencode($folder['entry']) }}" data-action="delete_file" data-name="{{ $folder['entry'] }}"><button class="btn btn-danger btn-xxs"><i class="fa fa-trash-o"></i></button></a>
@endcan @endcan
</div> </div>
</div> </div>
</td> </td> --}}
</tr> </tr>
@endforeach @endforeach
@foreach ($files as $file) @foreach ($files as $file)
<tr> <tr class="align-middle">
<td><i class="fa fa-file-text" style="margin-left: 2px;"></i></td> <td><i class="fa fa-file-text" style="margin-left: 2px;"></i></td>
<td> <td>
@if(in_array($file['extension'], $extensions)) @if(in_array($file['extension'], $extensions))
@ -83,7 +83,7 @@
</td> </td>
<td>{{ $file['size'] }}</td> <td>{{ $file['size'] }}</td>
<td>{{ date('m/d/y H:i:s', $file['date']) }}</td> <td>{{ date('m/d/y H:i:s', $file['date']) }}</td>
<td style="text-align:center;"> {{-- <td style="text-align:center;">
<div class="row" style="text-align:center;"> <div class="row" style="text-align:center;">
<div class="col-md-3 hidden-xs hidden-sm"> <div class="col-md-3 hidden-xs hidden-sm">
</div> </div>
@ -98,7 +98,7 @@
@endcan @endcan
</div> </div>
</div> </div>
</td> </td> --}}
</tr> </tr>
@endforeach @endforeach
</tbody> </tbody>

69
resources/views/server/js/filemanager/actions.blade.php Normal file
View file

@ -0,0 +1,69 @@
"use strict";
// Copyright (c) 2015 - 2016 Dane Everitt <dane@daneeveritt.com>
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
class FileActions {
constructor() {
//
}
run() {
this.directoryClick();
this.rightClick();
}
rightClick() {
$('#file_listing > tbody').on('contextmenu', event => {
event.preventDefault();
const parent = $(event.target).parent();
$('#fileOptionMenu').appendTo('body');
$('#fileOptionMenu').data('invokedOn', $(event.target)).show().css({
position: 'absolute',
left: event.pageX,
top: event.pageY,
});
// Handle Events
var Context = new ContextMenuActions(parent);
$('#fileOptionMenu li[data-action="move"]').unbind().on('click', e => {
Context.move();
});
$('#fileOptionMenu li[data-action="rename"]').unbind().on('click', e => {
Context.rename();
});
$(window).click(() => {
$('#fileOptionMenu').hide();
});
});
}
directoryClick() {
$('a[data-action="directory-view"]').on('click', function (event) {
event.preventDefault();
window.location.hash = encodeURIComponent($(this).parent().data('hash') || '');
Files.list();
});
}
}
window.Actions = new FileActions;

90
resources/views/server/js/filemanager/contextmenu.blade.php Normal file
View file

@ -0,0 +1,90 @@
"use strict";
// Copyright (c) 2015 - 2016 Dane Everitt <dane@daneeveritt.com>
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
class ContextMenuActions {
constructor(element) {
this.element = element;
}
destroy() {
this.element = undefined;
}
move() {
alert($(this.element).data('path'));
}
rename() {
var desiredElement = $(this.element).find('td[data-identifier="name"]');
var linkElement = desiredElement.find('a');
var currentName = linkElement.html();
var editField = `<input class="form-control input-sm" type="text" value="${currentName}" />`;
desiredElement.find('a').remove();
desiredElement.html(editField);
const inputField = desiredElement.find('input');
inputField.focus();
inputField.on('blur keypress', e => {
// Save Field
if (e.type === 'blur' || (e.type === 'keypress' && e.which !== 13)) {
// Escape Key Pressed, don't save.
if (e.which === 27 || e.type === 'blur') {
desiredElement.html(linkElement);
inputField.remove();
}
return;
}
$.ajax({
type: 'POST',
headers: {
'X-Access-Token': '{{ $server->daemonSecret }}',
'X-Access-Server': '{{ $server->uuid }}'
},
contentType: 'application/json; charset=utf-8',
url: '{{ $node->scheme }}://{{ $node->fqdn }}:{{ $node->daemonListen }}/server/files/rename',
timeout: 10000,
data: JSON.stringify({
from: currentName,
to: inputField.val(),
}),
}).done(data => {
this.element.attr('data-path', inputField.val());
desiredElement.attr('data-hash', inputField.val());
desiredElement.html(linkElement.html(inputField.val()));
inputField.remove();
Actions.run();
}).fail(jqXHR => {
console.error(jqXHR);
var error = 'An error occured while trying to process this request.';
if (typeof jqXHR.responseJSON !== 'undefined' && typeof jqXHR.responseJSON.error !== 'undefined') {
error = jqXHR.responseJSON.error;
}
swal({
type: 'error',
title: '',
text: error,
});
});
});
}
}

91
resources/views/server/js/filemanager/index.blade.php Normal file
View file

@ -0,0 +1,91 @@
"use strict";
// Copyright (c) 2015 - 2016 Dane Everitt <dane@daneeveritt.com>
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
class FileManager {
constructor() {
this.list(this.decodeHash());
}
reload() {
$('[data-toggle="tooltip"]').tooltip();
}
list(path) {
if (_.isUndefined(path)) {
path = this.decodeHash();
}
this.loader(true);
$.ajax({
type: 'POST',
url: '{{ route('server.files.directory-list', $server->uuidShort) }}',
headers: {
'X-CSRF-Token': '{{ csrf_token() }}',
},
data: {
directory: path,
},
}).done(data => {
$('#load_files').slideUp().html(data).slideDown(() => {
Actions.run();
});
$('#internal_alert').slideUp();
}).fail(jqXHR => {
swal({
type: 'error',
title: 'File Error',
text: 'An error occured while attempting to process this request. Please try again.',
});
this.list('/');
console.log(jqXHR);
}).always(() => {
this.loader(false);
});
}
loader(show) {
if ($('#load_files').height() < 5) return;
if (show === true){
var height = $('#load_files').height();
var width = $('.ajax_loading_box').width();
var center_height = (height / 2) - 30;
var center_width = (width / 2) - 30;
$('#position_me').css({
'top': center_height,
'left': center_width,
'font-size': '60px'
});
$('.ajax_loading_box').css('height', (height + 5)).fadeIn();
} else {
$('.ajax_loading_box').fadeOut(100);
}
}
decodeHash() {
return decodeURIComponent(window.location.hash.substring(1));
}
}
window.Files = new FileManager;