seaweedfs/weed/server/filer_ui/templates.go

196 lines
4.2 KiB
Go
Raw Normal View History

2016-07-18 08:28:24 +00:00
package master_ui
import (
2018-08-11 06:47:31 +00:00
"github.com/dustin/go-humanize"
"html/template"
2020-09-11 02:46:00 +00:00
"net/url"
"strings"
2016-07-18 08:28:24 +00:00
)
2020-09-11 02:46:00 +00:00
func printpath(parts ...string) string {
concat := strings.Join(parts, "")
escaped := url.PathEscape(concat)
return strings.ReplaceAll(escaped, "%2F", "/")
}
2018-08-11 06:47:31 +00:00
var funcMap = template.FuncMap{
"humanizeBytes": humanize.Bytes,
2020-09-11 02:46:00 +00:00
"printpath": printpath,
2018-08-11 06:47:31 +00:00
}
var StatusTpl = template.Must(template.New("status").Funcs(funcMap).Parse(`<!DOCTYPE html>
2016-07-18 08:28:24 +00:00
<html>
<head>
<title>SeaweedFS Filer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/seaweedfsstatic/bootstrap/3.3.1/css/bootstrap.min.css">
2018-08-20 01:42:40 +00:00
<style>
body { padding-bottom: 70px; }
2018-08-20 01:42:40 +00:00
#drop-area {
border: 1px transparent;
}
#drop-area.highlight {
border-color: purple;
border: 2px dashed #ccc;
}
.button {
display: inline-block;
padding: 2px;
background: #ccc;
cursor: pointer;
border-radius: 2px;
border: 1px solid #ccc;
float: right;
}
.button:hover {
background: #ddd;
}
#fileElem {
display: none;
}
.qrImage {
display: block;
margin-left: auto;
margin-right: auto;
}
2018-08-20 01:42:40 +00:00
</style>
2016-07-18 08:28:24 +00:00
</head>
<body>
<div class="container">
<div class="page-header">
<h1>
2018-12-17 08:31:23 +00:00
<a href="https://github.com/chrislusf/seaweedfs"><img src="/seaweedfsstatic/seaweed50x50.png"></img></a>
2016-07-18 08:28:24 +00:00
SeaweedFS Filer
</h1>
</div>
<div class="row">
2018-08-20 01:42:40 +00:00
<div>
2018-05-25 06:42:13 +00:00
{{ range $entry := .Breadcrumbs }}
2020-09-11 02:46:00 +00:00
<a href="{{ printpath $entry.Link }}" >
2018-05-25 06:42:13 +00:00
{{ $entry.Name }}
</a>
{{ end }}
2018-08-20 01:42:40 +00:00
<label class="button" for="fileElem">Upload</label>
</div>
2016-07-18 08:28:24 +00:00
</div>
2018-08-20 01:42:40 +00:00
<div class="row" id="drop-area">
<form class="upload-form">
<input type="file" id="fileElem" multiple onchange="handleFiles(this.files)">
2018-05-25 06:21:12 +00:00
<table width="90%">
2016-07-18 08:28:24 +00:00
{{$path := .Path }}
2018-05-14 06:56:16 +00:00
{{ range $entry_index, $entry := .Entries }}
2018-05-25 06:21:12 +00:00
<tr>
<td>
2018-05-14 06:56:16 +00:00
{{if $entry.IsDirectory}}
2018-10-08 04:42:57 +00:00
<img src="/seaweedfsstatic/images/folder.gif" width="20" height="23">
2020-09-11 02:46:00 +00:00
<a href="{{ printpath $path "/" $entry.Name "/"}}" >
2018-05-14 06:56:16 +00:00
{{ $entry.Name }}
</a>
{{else}}
2020-09-11 02:46:00 +00:00
<a href="{{ printpath $path "/" $entry.Name }}" >
2018-05-14 06:56:16 +00:00
{{ $entry.Name }}
</a>
{{end}}
2018-05-25 06:21:12 +00:00
</td>
2019-12-16 04:57:17 +00:00
<td align="right" nowrap>
2018-05-25 06:21:12 +00:00
{{if $entry.IsDirectory}}
{{else}}
2019-12-16 04:57:17 +00:00
{{ $entry.Mime }}&nbsp;
{{end}}
</td>
2019-12-16 04:57:17 +00:00
<td align="right" nowrap>
{{if $entry.IsDirectory}}
2018-05-25 06:21:12 +00:00
{{else}}
2019-12-16 04:57:17 +00:00
{{ $entry.Size | humanizeBytes }}&nbsp;
2018-05-25 06:21:12 +00:00
{{end}}
</td>
2019-12-16 04:57:17 +00:00
<td nowrap>
2018-05-25 06:21:12 +00:00
{{ $entry.Timestamp.Format "2006-01-02 15:04" }}
</td>
</tr>
2016-07-18 08:28:24 +00:00
{{ end }}
2018-05-25 06:21:12 +00:00
</table>
2018-08-20 01:42:40 +00:00
</form>
2016-07-18 08:28:24 +00:00
</div>
2018-05-05 21:41:40 +00:00
{{if .ShouldDisplayLoadMore}}
2016-07-18 08:28:24 +00:00
<div class="row">
2018-05-05 21:41:40 +00:00
<a href={{ print .Path "?limit=" .Limit "&lastFileName=" .LastFileName}} >
Load more
</a>
2016-07-18 08:28:24 +00:00
</div>
{{end}}
<br/>
<br/>
<div class="navbar navbar-fixed-bottom">
<img src="data:image/png;base64,{{.QrImage}}" class="qrImage" />
</div>
2016-07-18 08:28:24 +00:00
</div>
</body>
2018-08-20 01:42:40 +00:00
<script type="text/javascript">
// ************************ Drag and drop ***************** //
let dropArea = document.getElementById("drop-area")
// Prevent default drag behaviors
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
document.body.addEventListener(eventName, preventDefaults, false)
})
// Highlight drop area when item is dragged over it
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})
// Handle dropped files
dropArea.addEventListener('drop', handleDrop, false)
function preventDefaults (e) {
e.preventDefault()
e.stopPropagation()
}
function highlight(e) {
dropArea.classList.add('highlight')
}
function unhighlight(e) {
dropArea.classList.remove('highlight')
}
function handleDrop(e) {
var dt = e.dataTransfer
var files = dt.files
handleFiles(files)
}
function handleFiles(files) {
files = [...files]
files.forEach(uploadFile)
window.location.reload()
}
function uploadFile(file, i) {
var url = window.location.href
var xhr = new XMLHttpRequest()
var formData = new FormData()
xhr.open('POST', url, false)
2018-08-20 01:42:40 +00:00
formData.append('file', file)
xhr.send(formData)
}
</script>
2016-07-18 08:28:24 +00:00
</html>
`))