From 367b818992699ab76d75ce2c84b0cbde5ff2a5e5 Mon Sep 17 00:00:00 2001
From: arkohut <39525455+arkohut@users.noreply.github.com>
Date: Mon, 29 Jul 2024 16:39:48 +0800
Subject: [PATCH] feat(web): show datetime

---
 web/src/lib/Figure.svelte   | 14 +++++++++++++-
 web/src/routes/+page.svelte |  1 +
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/web/src/lib/Figure.svelte b/web/src/lib/Figure.svelte
index cfc53b9..8ce74c9 100644
--- a/web/src/lib/Figure.svelte
+++ b/web/src/lib/Figure.svelte
@@ -11,6 +11,10 @@
 	 * @type {number}
 	 */
 	export let library_id;
+	/**
+	 * @type {number}
+	 */
+	export let created_at;
 	/**
 	 * @type {number}
 	 */
@@ -101,7 +105,9 @@
 		<div class="flex flex-col md:flex-row h-full">
 			<!-- Image container -->
 			<div class="flex-none w-full md:w-1/2 h-full">
-				<img class="w-full h-full object-contain" src={image} alt={title} />
+				<a href={image} target="_blank" rel="noopener noreferrer">
+					<img class="w-full h-full object-contain" src={image} alt={title} />
+				</a>
 			</div>
 			<!-- Description container -->
 			<div class="mt-4 md:mt-0 md:ml-6 overflow-y-auto max-h-full">
@@ -122,6 +128,12 @@
 					<span class="mt-1 text-sm leading-tight font-medium text-gray-500 font-mono">
 						{folder_id}
 					</span>
+					<span class="uppercase tracking-wide text-sm text-indigo-600 font-bold ml-4"
+						>DATETIME</span
+					>
+					<span class="mt-1 text-xs leading-tight font-xs text-gray-500 font-mono">
+						{new Date(created_at * 1000).toLocaleString()}
+					</span>
 					<div>
 						<span class="mt-1 text-xs leading-tight font-xs text-gray-500 font-mono">
 							{filepath}
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 1ca382c..816364e 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -146,6 +146,7 @@
 		library_id={searchResults[selectedImage].library_id}
 		folder_id={searchResults[selectedImage].folder_id}
 		image={`${apiEndpoint}/files/${searchResults[selectedImage].filepath}`}
+		created_at={searchResults[selectedImage].file_created_at}
 		filepath={searchResults[selectedImage].filepath}
 		title={filename(searchResults[selectedImage].filepath)}
 		tags={searchResults[selectedImage].tags}