Basic file details page
This commit is contained in:
parent
71a03b30f0
commit
f35d52f287
|
@ -233,6 +233,7 @@ const user_details = struct {
|
||||||
|
|
||||||
const drive = struct {
|
const drive = struct {
|
||||||
const dir_tmpl = @embedFile("./web/drive/directory.tmpl.html");
|
const dir_tmpl = @embedFile("./web/drive/directory.tmpl.html");
|
||||||
|
const file_tmpl = @embedFile("./web/drive/file.tmpl.html");
|
||||||
fn servePage(req: anytype, res: anytype, srv: anytype) !void {
|
fn servePage(req: anytype, res: anytype, srv: anytype) !void {
|
||||||
const info = try srv.driveGet(req.args.path);
|
const info = try srv.driveGet(req.args.path);
|
||||||
defer util.deepFree(srv.allocator, info);
|
defer util.deepFree(srv.allocator, info);
|
||||||
|
@ -246,6 +247,14 @@ const drive = struct {
|
||||||
try breadcrumbs.append(if (p.len != 0) p else continue);
|
try breadcrumbs.append(if (p.len != 0) p else continue);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO: put this into the db layer
|
||||||
|
const FileClass = enum {
|
||||||
|
image,
|
||||||
|
video,
|
||||||
|
audio,
|
||||||
|
other,
|
||||||
|
};
|
||||||
|
|
||||||
switch (info) {
|
switch (info) {
|
||||||
.dir => |dir| try res.template(.ok, srv, dir_tmpl, .{
|
.dir => |dir| try res.template(.ok, srv, dir_tmpl, .{
|
||||||
.dir = dir,
|
.dir = dir,
|
||||||
|
@ -253,7 +262,16 @@ const drive = struct {
|
||||||
.mount_path = req.mount_path,
|
.mount_path = req.mount_path,
|
||||||
.base_drive_path = "drive",
|
.base_drive_path = "drive",
|
||||||
}),
|
}),
|
||||||
else => unreachable,
|
.file => |file| try res.template(.ok, srv, file_tmpl, .{
|
||||||
|
.file = file,
|
||||||
|
.breadcrumbs = breadcrumbs.items,
|
||||||
|
.mount_path = req.mount_path,
|
||||||
|
.base_drive_path = "drive",
|
||||||
|
.class = if (std.mem.eql(u8, file.meta.content_type orelse "", "image/jpeg"))
|
||||||
|
FileClass.image
|
||||||
|
else
|
||||||
|
FileClass.other,
|
||||||
|
}),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,67 @@
|
||||||
|
<div class="drive">
|
||||||
|
<ol class="breadcrumbs">
|
||||||
|
<li>
|
||||||
|
<a href="{.mount_path}/{.base_drive_path}/">
|
||||||
|
<i class="fa-solid fa-cloud"></i>
|
||||||
|
<span class="directory">/</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{#for .breadcrumbs |$crumb, $i| =}
|
||||||
|
<i class="fa-solid fa-chevron-right"></i>
|
||||||
|
<li>
|
||||||
|
<a href="{.mount_path}/{.base_drive_path}
|
||||||
|
{= #for @slice(.breadcrumbs, 0, $i) |$c|}/{$c}{/for =}
|
||||||
|
/{$crumb}">
|
||||||
|
{$crumb}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{/for =}
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<div class="popup-buttons">
|
||||||
|
<div class="popup" id="delete-{.file.name.?}">
|
||||||
|
<a href="#delete-{.file.name.?}">
|
||||||
|
<i class="fa-solid fa-trash"></i>
|
||||||
|
</a>
|
||||||
|
<form class="popup-dialog" action="?action=delete" method="post">
|
||||||
|
<div>Are you sure you want to delete this file?</div>
|
||||||
|
<input type="hidden" name="action" value="delete" />
|
||||||
|
<button type="submit">Yes, Delete</button>
|
||||||
|
<a href="#">No, Cancel</a>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="details">
|
||||||
|
<h2>{.file.name.?}</h2>
|
||||||
|
<div class="content">
|
||||||
|
{#if @isTag(.class, image) =}
|
||||||
|
<img src="/media/{.file.meta.id}" />
|
||||||
|
{#elif @isTag(.class, video) =}
|
||||||
|
<video src="/media/{.file.meta.id}" />
|
||||||
|
{#elif @isTag(.class, audio) =}
|
||||||
|
<audio src="/media/{.file.meta.id}" />
|
||||||
|
{#else =}
|
||||||
|
<a download href="/media/{.file.meta.id}"><i class="fa-solid fa-download"></i>{.file.name.?}</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="meta">
|
||||||
|
<h3>Metadata</h3>
|
||||||
|
|
||||||
|
<h4>Drive Path</h4>
|
||||||
|
<div>{.file.path}</div>
|
||||||
|
|
||||||
|
<h4>Filename</h4>
|
||||||
|
<div>{.file.meta.filename}</div>
|
||||||
|
|
||||||
|
<h4>Content Type</h4>
|
||||||
|
<div>{.file.meta.content_type}</div>
|
||||||
|
|
||||||
|
<h4>Sensitive?</h4>
|
||||||
|
<div>{.file.meta.sensitive}</div>
|
||||||
|
|
||||||
|
<h4>Description</h4>
|
||||||
|
<div>{.file.meta.description}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
Loading…
Reference in New Issue