add info page for files
This commit is contained in:
@@ -90,7 +90,9 @@ class ConvexDB(ConvexDbBase):
|
||||
)
|
||||
return data
|
||||
|
||||
async def get_file_access(self, file_id: str):
|
||||
async def get_file_access(self, file_id:str, user_id:str):
|
||||
return []
|
||||
|
||||
data = await self.run_query_with_reconnection(
|
||||
self.client.query_single,
|
||||
"""
|
||||
|
||||
+1
-1
@@ -58,7 +58,7 @@ async def file_info(file_id, user):
|
||||
if not file_data:
|
||||
abort(404)
|
||||
|
||||
access_data = await current_app.convex.get_file_access(file_id=file_id) or []
|
||||
access_data = await current_app.convex.get_file_access(file_id=file_id, user_id=user["sub"]) or []
|
||||
share_url = request.url_root.rstrip("/") + f"/-{file_id}"
|
||||
return await render_template(
|
||||
"views/webpage/files/info.htm",
|
||||
|
||||
@@ -0,0 +1,203 @@
|
||||
{% extends "base.htm" %}
|
||||
|
||||
{% block title %}NanoShare - File info{% endblock %}
|
||||
|
||||
{% block meta %}
|
||||
<meta name="description" content="NanoShare file details and access information.">
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<style>
|
||||
.file-info-page { padding: clamp(16px, 3vw, 28px); }
|
||||
.top-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
|
||||
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 10px 14px; margin-top: 14px; }
|
||||
.kv dt { color: var(--muted); font-weight: 700; }
|
||||
.kv dd { margin: 0; word-break: break-word; }
|
||||
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
|
||||
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .92rem; }
|
||||
.preview-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
|
||||
.preview-head { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .9rem; font-weight: 700; }
|
||||
.preview-body { min-height: 230px; display: grid; place-items: center; padding: 10px; }
|
||||
.preview-body img, .preview-body video, .preview-body audio, .preview-body iframe { width: 100%; max-width: 100%; border: 0; border-radius: 8px; }
|
||||
.preview-body video { max-height: 260px; }
|
||||
.preview-body pre { width: 100%; max-height: 260px; overflow: auto; margin: 0; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: rgba(0,0,0,.16); white-space: pre-wrap; word-break: break-word; }
|
||||
.preview-note { color: var(--muted); font-size: .88rem; text-align: center; }
|
||||
@media (max-width: 980px) { .top-grid { grid-template-columns: 1fr; } }
|
||||
@media (max-width: 720px) { .kv { grid-template-columns: 1fr; gap: 4px; } }
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main class="file-info-page">
|
||||
<section class="card" style="padding: clamp(18px, 2.6vw, 28px);">
|
||||
<div class="top-grid">
|
||||
<div>
|
||||
<h1 class="page-title">File details</h1>
|
||||
<p class="subtle">Everything about this file, including expiration date and recent accesses.</p>
|
||||
|
||||
<dl class="kv">
|
||||
<dt>Filename</dt>
|
||||
<dd>{{ file.file_name }}</dd>
|
||||
|
||||
<dt>Note</dt>
|
||||
<dd>{{ file.note or 'No note' }}</dd>
|
||||
|
||||
<dt>Size</dt>
|
||||
<dd><span class="badge">{{ file.file_size }}</span></dd>
|
||||
|
||||
<dt>Uploaded at</dt>
|
||||
<dd><time class="local-time" data-ts="{{ file.uploaded_at }}"></time></dd>
|
||||
|
||||
<dt>Expires at</dt>
|
||||
<dd>
|
||||
{% if file.expires_at %}
|
||||
<time class="local-time" data-ts="{{ file.expires_at }}"></time>
|
||||
{% else %}
|
||||
Never
|
||||
{% endif %}
|
||||
</dd>
|
||||
|
||||
<dt>Public URL</dt>
|
||||
<dd><a class="mono" href="{{ share_url }}">{{ share_url }}</a></dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<aside class="preview-card" aria-label="File preview">
|
||||
<div class="preview-head">Preview</div>
|
||||
<div id="previewBody" class="preview-body">
|
||||
<p class="preview-note">Loading preview...</p>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="toolbar">
|
||||
<a class="btn" href="{{ url_for('side_main.file_edit', file_id=file.file_id) }}">Edit</a>
|
||||
<button id="copyUrlBtn" class="btn btn-ghost" type="button">Copy link</button>
|
||||
<a class="btn btn-ghost" href="{{ url_for('side_main.files_list') }}">Back to files</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card" style="padding: clamp(18px, 2.6vw, 28px); margin-top: 16px;">
|
||||
<h2 style="margin:0 0 8px;">Access history</h2>
|
||||
<p class="subtle">Latest request metadata for this file.</p>
|
||||
|
||||
<div class="table-wrap" role="region" aria-label="Access history" tabindex="0">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Time</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">IP</th>
|
||||
<th scope="col">User Agent</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% if accesses %}
|
||||
{% for access in accesses %}
|
||||
<tr>
|
||||
<td><time class="local-time" data-ts="{{ access.accessed_at }}"></time></td>
|
||||
<td><span class="badge">{{ access.status }}</span></td>
|
||||
<td>{{ access.ip or '-' }}</td>
|
||||
<td>{{ access.user_agent or '-' }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="4">No access records yet.</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function formatDate(value) {
|
||||
if (!value) return '';
|
||||
const raw = String(value);
|
||||
let date;
|
||||
if (/^\d+$/.test(raw)) {
|
||||
date = new Date(Number.parseInt(raw, 10));
|
||||
} else {
|
||||
date = new Date(raw);
|
||||
}
|
||||
if (Number.isNaN(date.getTime())) return raw;
|
||||
return date.toLocaleString(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
});
|
||||
}
|
||||
|
||||
document.querySelectorAll('time.local-time').forEach((el) => {
|
||||
const raw = el.dataset.ts || '';
|
||||
el.textContent = formatDate(raw) || '-';
|
||||
});
|
||||
|
||||
async function loadPreview() {
|
||||
const previewBody = document.getElementById('previewBody');
|
||||
if (!previewBody) return;
|
||||
|
||||
const url = '{{ share_url }}';
|
||||
try {
|
||||
const response = await fetch(url, { method: 'GET' });
|
||||
if (!response.ok) {
|
||||
previewBody.innerHTML = '<p class="preview-note">Preview unavailable.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const contentType = (response.headers.get('content-type') || '').toLowerCase();
|
||||
|
||||
if (contentType.startsWith('image/')) {
|
||||
previewBody.innerHTML = `<img src="${url}" alt="File preview">`;
|
||||
return;
|
||||
}
|
||||
if (contentType.startsWith('video/')) {
|
||||
previewBody.innerHTML = `<video controls src="${url}"></video>`;
|
||||
return;
|
||||
}
|
||||
if (contentType.startsWith('audio/')) {
|
||||
previewBody.innerHTML = `<audio controls src="${url}"></audio>`;
|
||||
return;
|
||||
}
|
||||
if (contentType.includes('pdf')) {
|
||||
previewBody.innerHTML = `<iframe src="${url}" title="PDF preview" height="260"></iframe>`;
|
||||
return;
|
||||
}
|
||||
if (contentType.startsWith('text/') || contentType.includes('json') || contentType.includes('xml')) {
|
||||
const text = await response.text();
|
||||
const safe = text
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
previewBody.innerHTML = `<pre>${safe.slice(0, 6000) || 'Empty text file.'}</pre>`;
|
||||
return;
|
||||
}
|
||||
|
||||
previewBody.innerHTML = `<p class="preview-note">No inline preview for this file type.<br><a href="${url}" target="_blank" rel="noopener">Open file</a></p>`;
|
||||
} catch {
|
||||
previewBody.innerHTML = '<p class="preview-note">Preview unavailable.</p>';
|
||||
}
|
||||
}
|
||||
|
||||
loadPreview();
|
||||
|
||||
document.getElementById('copyUrlBtn')?.addEventListener('click', async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText('{{ share_url }}');
|
||||
const btn = document.getElementById('copyUrlBtn');
|
||||
if (!btn) return;
|
||||
const label = btn.textContent;
|
||||
btn.textContent = 'Copied';
|
||||
setTimeout(() => { btn.textContent = label; }, 1200);
|
||||
} catch {
|
||||
alert('Could not copy link.');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user