238 lines
7.9 KiB
Cheetah
238 lines
7.9 KiB
Cheetah
{{ define "content" }}
|
|
<style>
|
|
.breadcrumb:before {
|
|
content: '/';
|
|
}
|
|
#notifications {
|
|
top: 20px;
|
|
right: 30px;
|
|
position: fixed;
|
|
z-index: 2
|
|
}
|
|
</style>
|
|
|
|
<nav class="nav-extended">
|
|
<div class="nav-wrapper container">
|
|
<a href="/buckets/{{$.BucketName}}" class="brand-logo center"><i class="material-icons">folder_open</i>{{ .BucketName }}</a>
|
|
{{ if not .Objects }}
|
|
<ul class="right">
|
|
<li>
|
|
<a class="waves-effect waves-light btn" href="#" onclick="deleteBucket({{ .BucketName }})">
|
|
Delete <i class="material-icons right">delete</i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<div class="nav-wrapper container">
|
|
<a href="/buckets" class="breadcrumb"><i class="material-icons">arrow_back</i> buckets </a>
|
|
{{ $url := printf "/buckets/%s/" $.BucketName }}
|
|
<a href="{{ $url }}" class="breadcrumb">{{ $.BucketName }}</a>
|
|
|
|
{{ range $index, $path := .Paths }}
|
|
{{ $url = printf "%s%s/" $url $path }}
|
|
<a href="{{ $url }}" class="breadcrumb">{{ $path }}</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="section" style="margin: 10px; position: relative;">
|
|
{{ if .Objects }}
|
|
<table class="striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Key</th>
|
|
<th>Size</th>
|
|
<th>Owner</th>
|
|
<th>Last Modified</th>
|
|
<th style="min-width:165px;"></th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{{ range $index, $object := .Objects }}
|
|
<tr>
|
|
<td
|
|
{{ if $object.IsFolder }}
|
|
onclick="location.href='/buckets/{{ $.BucketName }}/{{ $object.Key }}'"}
|
|
style="cursor:pointer;"
|
|
{{ end }}>
|
|
<i class="material-icons">{{ $object.Icon }}</i> {{ $object.DisplayName }}
|
|
</td>
|
|
<td>{{ $object.Size }} bytes</td>
|
|
<td>{{ $object.Owner }}</td>
|
|
<td>{{ $object.LastModified }}</td>
|
|
<td>
|
|
{{ if not $object.IsFolder }}
|
|
<button class="dropdown-trigger waves-effect waves-teal btn" data-target="actions-dropdown-{{ $index }}">
|
|
Actions <i class="material-icons right">arrow_drop_down</i>
|
|
</button>
|
|
<!-- Dropdown Structure -->
|
|
<ul id="actions-dropdown-{{ $index }}" class="dropdown-content">
|
|
<li><a target="_blank" href="/api/buckets/{{ $.BucketName }}/objects/{{ $object.Key }}">Download</a></li>
|
|
{{- if $.AllowDelete }}
|
|
<li><a href="#" onclick="deleteObject({{ $.BucketName }}, {{ $object.Key }})">Delete</a></li>
|
|
{{- end }}
|
|
</ul>
|
|
{{ end }}
|
|
</td>
|
|
</tr>
|
|
{{ end }}
|
|
</tbody>
|
|
</table>
|
|
{{ end }}
|
|
|
|
{{ if not .Objects }}
|
|
<p style="text-align:center;margin-top:2em;color:gray;">No objects in <strong>{{ .BucketName }}/{{ .CurrentPath }}</strong> yet</p>
|
|
{{ end }}
|
|
|
|
<div id="notifications">
|
|
<div id="notification-template" class="card" style="display: none;">
|
|
<div class="card-content" style="padding: 12px">
|
|
<span class="card-title">Uploading</span>
|
|
<p> I am a very simple card </p>
|
|
<div class="progress">
|
|
<div class="indeterminate"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fixed-action-btn">
|
|
<button type="button" class="btn-floating btn-large red tooltipped" id="upload-file-btn" data-position="top" data-tooltip="Upload files">
|
|
<i class="large material-icons">add</i>
|
|
</button>
|
|
|
|
<button type="button" class="btn-floating btn-large red tooltipped" id="upload-folder-btn" data-position="top" data-tooltip="Upload folder">
|
|
<i class="large material-icons">create_new_folder</i>
|
|
</button>
|
|
|
|
<button type="button" class="btn-floating btn-large red modal-trigger tooltipped" data-target="modal-create-folder" data-position="top" data-tooltip="Change path">
|
|
<i class="large material-icons">create</i>
|
|
</button>
|
|
</div>
|
|
|
|
<input type="file" id="upload-folder-input" webkitdirectory multiple style="display: none;">
|
|
<input type="file" id="upload-file-input" name="file" multiple style="display: none;">
|
|
|
|
<div id="modal-create-folder" class="modal">
|
|
<form id="create-folder-form" enctype="multipart/form-data">
|
|
|
|
<div class="modal-content">
|
|
<h4>Change directory path</h4>
|
|
<br>
|
|
<div class="row">
|
|
<div class="col s6">
|
|
<div class="input-field">
|
|
<input name="new-path" id="new-path" type="text">
|
|
<label for="new-path">Path</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="modal-close waves-effect waves-green btn-flat">Cancel</button>
|
|
<button type="submit" class="modal-close waves-effect waves-green btn">Create</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
function deleteObject(bucketName, objectName) {
|
|
$.ajax({
|
|
type: 'DELETE',
|
|
url: '/api/buckets/' + bucketName + '/objects/' + objectName,
|
|
success: function () { location.reload(); }
|
|
})
|
|
}
|
|
function deleteBucket(bucketName) {
|
|
$.ajax({
|
|
type: 'DELETE',
|
|
url: '/api/buckets/' + bucketName,
|
|
success: function () { window.location.replace('/buckets'); }
|
|
})
|
|
}
|
|
|
|
function handleUploadFiles(event) {
|
|
files = event.target.files
|
|
url = "/api/buckets/{{ .BucketName }}/objects"
|
|
uploadFiles(files, url);
|
|
}
|
|
|
|
function handleCreateFolder(event) {
|
|
event.preventDefault();
|
|
|
|
const form = event.target;
|
|
const formData = new FormData(form);
|
|
const newPath = formData.get("new-path")
|
|
|
|
let newHref = window.location.href + newPath
|
|
if(!newHref.endsWith("/")) {
|
|
newHref = newHref + "/"
|
|
}
|
|
|
|
window.location.href = newHref
|
|
}
|
|
|
|
function uploadFiles(files, url) {
|
|
uploadPromises = [];
|
|
for(file of files) {
|
|
uploadPromises.push(uploadFile(file, url));
|
|
}
|
|
Promise.all(uploadPromises).then(values => {
|
|
window.location.reload();
|
|
});
|
|
}
|
|
|
|
function uploadFile(file, url) {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
if( !!file.webkitRelativePath ) {
|
|
formData.append('path', "{{ .CurrentPath }}" + file.webkitRelativePath );
|
|
} else {
|
|
formData.append('path', "{{ .CurrentPath }}" + file.name );
|
|
}
|
|
|
|
const notification = createNotification(file.name);
|
|
notifications = document.getElementById('notifications');
|
|
notifications.appendChild(notification);
|
|
|
|
return fetch(url, {
|
|
method: "POST",
|
|
body: formData
|
|
}).then(response => {
|
|
notifications.removeChild(notification);
|
|
})
|
|
}
|
|
|
|
function createNotification(fileName) {
|
|
notificationTemplate = document.getElementById('notification-template');
|
|
notification = notificationTemplate.cloneNode(true);
|
|
notification.getElementsByTagName('p')[0].setHTML(fileName);
|
|
notification.removeAttribute("id");
|
|
notification.removeAttribute("style");
|
|
return notification;
|
|
}
|
|
|
|
window.onload = (event) => {
|
|
$('#create-folder-form').submit(handleCreateFolder)
|
|
|
|
uploadFolderInput = $('#upload-folder-input');
|
|
$('#upload-folder-btn').click(event => uploadFolderInput.click());
|
|
uploadFolderInput.change(handleUploadFiles);
|
|
|
|
uploadFileInput = $('#upload-file-input');
|
|
$('#upload-file-btn').click(event => uploadFileInput.click());
|
|
uploadFileInput.change(handleUploadFiles);
|
|
|
|
$(document).ready(function(){
|
|
$('.tooltipped').tooltip();
|
|
});
|
|
};
|
|
</script>
|
|
{{ end }}
|