s3manager-web/web/template/bucket.html.tmpl
2023-07-20 17:32:28 +02:00

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 }}