From b09a5e7fe19c481b266e9ef7b8b3443ea374f4d5 Mon Sep 17 00:00:00 2001
From: Lucas <lucas@domain.invalid>
Date: Sun, 19 Feb 2023 20:22:29 +0000
Subject: [PATCH] backend: add partial support for viewing media

---
 lib/PoorBooru.pm      | 22 +++++++++++++++++++---
 public/css/style.css  | 27 +++++++++++++++++++++++++++
 views/layouts/main.tt |  2 ++
 views/media.tt        | 21 +++++++++++++++++++++
 4 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 views/media.tt

diff --git a/lib/PoorBooru.pm b/lib/PoorBooru.pm
index 56d849c..e054a5c 100644
--- a/lib/PoorBooru.pm
+++ b/lib/PoorBooru.pm
@@ -129,10 +129,26 @@ get "/tag/:tag_id_or_name" => sub {
 	};
 };
 
+get "/view/:media_id" => sub {
+	my $media_id = route_parameters->get("media_id");
+
+	my $res = api_get("/media/$media_id");
+	send_error("API error", 500) if !$res->{success};
+
+	my $data = decode_json($res->{content});
+
+	template "media" => {
+		no_title       => 1,
+		title          => $data->{id},
+		image_src      => "$POORBOORU_API/download/" . $data->{id},
+		media_id       => $data->{id},
+		media_filename => $data->{filename},
+		media_size     => $data->{size},
+		media_tags     => [],
+	};
+};
+
 get "/random" => sub {
 };
 
-get "/view/:media_id" => sub {
-};
-
 true;
diff --git a/public/css/style.css b/public/css/style.css
index 747e90b..a82fc38 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -29,7 +29,11 @@
   box-sizing: border-box;
 }
 
+dd,
+dl,
+dt,
 h1,
+h2,
 p {
   margin: 0;
 }
@@ -44,7 +48,13 @@ body {
   line-height: 2.4;
 }
 
+main {
+  padding-top: 1.5rem;
+}
+
+dl,
 h1,
+h2,
 p {
   margin-bottom: 1.5rem;
 }
@@ -59,6 +69,11 @@ h1 {
   line-height: 2;
 }
 
+h2 {
+  font-size: 2.5rem;
+  line-height: 1.2;
+}
+
 a {
   color: var(--accent-color-0);
 }
@@ -73,6 +88,14 @@ a:active {
   color: var(--accent-color-1);
 }
 
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 3rem;
+}
+
 .viewport {
   margin-left: auto;
   margin-right: auto;
@@ -135,6 +158,10 @@ a:active {
   width: 100%;
 }
 
+.media-image {
+  max-width: 100%;
+}
+
 .flex-c-horizontal {
   display: flex;
 }
diff --git a/views/layouts/main.tt b/views/layouts/main.tt
index f08388d..e1fef2b 100644
--- a/views/layouts/main.tt
+++ b/views/layouts/main.tt
@@ -18,7 +18,9 @@
   </header>
   <main class="border-bottom border-top border-accent flex-i-fullsize flex-c-vertical">
     <div class="viewport flex-i-fullsize flex-c-vertical">
+[% UNLESS no_title %]
       <h1>[% title %]</h1>
+[% END %]
       <div class="viewport flex-i-fullsize">[% content %]</div>
 [% IF pager %]
       <footer>
diff --git a/views/media.tt b/views/media.tt
new file mode 100644
index 0000000..b986531
--- /dev/null
+++ b/views/media.tt
@@ -0,0 +1,21 @@
+<div class="text-center">
+<a href="[% image_src %]"><img class="media-image" src="[% image_src %]" /></a>
+</div>
+
+<h2>metadata</h2>
+
+<dl>
+  <dt>ID</dt>
+  <dd>[% media_id %]</dd>
+  <dt>Filename</dt>
+  <dd>[% media_filename %]</dd>
+  <dt>Size</dt>
+  <dd>[% media_size %]</dd>
+  <dt>Tags</dt>
+[% UNLESS media_tags %]
+  <dd>no tags</dd>
+[% END %]
+[% FOREACH tag IN media_tags -%]
+  <dd><a href="[% tag.uri %]">[% tag.name %]</a></dd>
+[% END -%]
+</dl>