Add new upload history page
This commit is contained in:
@@ -1,158 +0,0 @@
|
||||
{{define "history_cookies"}}<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{template "meta_tags" "Upload History"}}
|
||||
|
||||
<style>
|
||||
.file_button {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
height: 3.6em;
|
||||
margin: 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
background: var(--input_background);
|
||||
color: var(--body_text_color);
|
||||
word-break: break-all;
|
||||
text-align: left;
|
||||
line-height: 1.2em;
|
||||
display: inline-block;
|
||||
transition: box-shadow 0.3s, opacity 2s, background 0.2s;
|
||||
white-space: normal;
|
||||
text-overflow: ellipsis;
|
||||
text-decoration: none;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file_button:hover {
|
||||
text-decoration: none;
|
||||
background: var(--input_hover_background);
|
||||
}
|
||||
|
||||
.file_button>img {
|
||||
max-height: 100%;
|
||||
max-width: 25%;
|
||||
margin-right: 5px;
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.file_button>.file_button_title {
|
||||
color: var(--link_color);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{{template "page_top" .}}
|
||||
|
||||
<header>
|
||||
<h1>Upload History</h1>
|
||||
</header>
|
||||
<div id="page_content" class="page_content">
|
||||
<section>
|
||||
<p>
|
||||
Here are all files you have previously uploaded to pixeldrain using this computer.
|
||||
This data is saved locally in your web browser and gets updated every time you upload a file through your current browser.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div id="uploaded_files"></div>
|
||||
</div>
|
||||
{{template "page_bottom" .}}
|
||||
|
||||
<script>
|
||||
let apiEndpoint = '{{.APIEndpoint}}';
|
||||
function renderFileButton(apiURL, id, title, subtitle) {
|
||||
let btn = document.createElement("a")
|
||||
btn.classList = "file_button"
|
||||
btn.href = "/u/" + id
|
||||
btn.target = "_blank"
|
||||
let thumbnail = document.createElement("img")
|
||||
thumbnail.src = apiURL + "/file/" + id + "/thumbnail?width=80&height=80"
|
||||
thumbnail.alt = title
|
||||
let titleSpan = document.createElement("span")
|
||||
titleSpan.classList = "file_button_title"
|
||||
titleSpan.innerText = title
|
||||
let br = document.createElement("br")
|
||||
let subtitleSpan = document.createElement("span")
|
||||
subtitleSpan.classList = "file_button_subtitle"
|
||||
subtitleSpan.innerText = subtitle
|
||||
|
||||
btn.appendChild(thumbnail)
|
||||
btn.appendChild(titleSpan)
|
||||
btn.appendChild(br)
|
||||
btn.appendChild(subtitleSpan)
|
||||
return btn
|
||||
}
|
||||
|
||||
function getCookie(name) {
|
||||
var result = new RegExp('(?:^|; )' + encodeURIComponent(name) + '=([^;]*)').exec(document.cookie)
|
||||
return result ? result[1] : null
|
||||
}
|
||||
|
||||
function printDate(date, hours, minutes, seconds) {
|
||||
let dateStr = date.getFullYear()
|
||||
+ "-" + ("00" + (date.getMonth() + 1)).slice(-2)
|
||||
+ "-" + ("00" + date.getDate()).slice(-2)
|
||||
|
||||
if (hours) { dateStr += " " + ("00" + date.getHours()).slice(-2) }
|
||||
if (minutes) { dateStr += ":" + ("00" + date.getMinutes()).slice(-2) }
|
||||
if (seconds) { dateStr += ":" + ("00" + date.getMinutes()).slice(-2) }
|
||||
return dateStr
|
||||
}
|
||||
|
||||
// Get the uploads from localstorage
|
||||
let uploadsStr = localStorage.getItem("uploaded_files")
|
||||
if (uploadsStr === null) { uploadsStr = "" }
|
||||
|
||||
let uploads = Array()
|
||||
if (uploadsStr != "") {
|
||||
// Strip the trailing comma
|
||||
uploads = uploadsStr.slice(0, -1).split(",")
|
||||
}
|
||||
|
||||
// Get the uploads from a cookie
|
||||
uploadsStr = getCookie("pduploads")
|
||||
if (uploadsStr === null) { uploadsStr = "" }
|
||||
|
||||
if (uploadsStr != "") {
|
||||
uploadsStr = uploadsStr.slice(0, -1) // Strip the trailing dot
|
||||
uploads.push(uploadsStr.split(".").reverse())
|
||||
}
|
||||
|
||||
// Render all the items
|
||||
function getHistoryItem() {
|
||||
let item = uploads.shift()
|
||||
if (item === undefined || item === "") { return }
|
||||
|
||||
fetch(
|
||||
apiEndpoint + "/file/" + item + "/info"
|
||||
).then(resp => {
|
||||
if (!resp.ok) {
|
||||
return Promise.reject()
|
||||
}
|
||||
return resp.json()
|
||||
}).then(resp => {
|
||||
document.getElementById("uploaded_files").appendChild(
|
||||
renderFileButton(
|
||||
apiEndpoint,
|
||||
resp.id,
|
||||
resp.name,
|
||||
printDate(new Date(resp.date_upload), true, true, true),
|
||||
)
|
||||
)
|
||||
getHistoryItem()
|
||||
}).catch(err => {
|
||||
console.log("Fetch failed: " + err)
|
||||
getHistoryItem()
|
||||
})
|
||||
}
|
||||
|
||||
getHistoryItem()
|
||||
</script>
|
||||
{{template "analytics"}}
|
||||
</body>
|
||||
</html>{{end}}
|
||||
19
res/template/upload_history.html
Normal file
19
res/template/upload_history.html
Normal file
@@ -0,0 +1,19 @@
|
||||
{{define "upload_history"}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{template "meta_tags" "Upload history"}}
|
||||
|
||||
<script>
|
||||
window.api_endpoint = '{{.APIEndpoint}}';
|
||||
window.server_hostname = "{{.Hostname}}";
|
||||
</script>
|
||||
<script defer src='/res/svelte/upload_history.js?v{{cacheID}}'></script>
|
||||
</head>
|
||||
<body>
|
||||
{{template "menu" .}}
|
||||
<div id="page_body" class="page_body"></div>
|
||||
{{template "analytics"}}
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user