From 485b152bebfd49166b48b31097c4f4c3cdf335db Mon Sep 17 00:00:00 2001
From: Alex Tran <alex.tran1502@gmail.com>
Date: Sat, 25 Jun 2022 13:28:36 -0500
Subject: [PATCH] Improved info panel on web

---
 .../asset-viewer/detail-panel.svelte          | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 95ce78ac98..728b298e99 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -95,7 +95,11 @@
 	</div>
 
 	<div class="px-4 py-4">
-		<p class="text-sm pb-4">DETAILS</p>
+		{#if !asset.exifInfo}
+			<p class="text-sm pb-4">NO EXIF INFO AVAILABLE</p>
+		{:else}
+			<p class="text-sm pb-4">DETAILS</p>
+		{/if}
 
 		{#if asset.exifInfo?.dateTimeOriginal}
 			<div class="flex gap-4 py-4">
@@ -104,7 +108,7 @@
 				</div>
 
 				<div>
-					<p>{moment(asset.exifInfo.dateTimeOriginal).format('MMM DD')}</p>
+					<p>{moment(asset.exifInfo.dateTimeOriginal).format('MMM DD, YYYY')}</p>
 					<div class="flex gap-2 text-sm">
 						<p>
 							{moment(
@@ -141,9 +145,20 @@
 					<p>{asset.exifInfo.make || ''} {asset.exifInfo.model || ''}</p>
 					<div class="flex text-sm gap-2">
 						<p>{`f/${asset.exifInfo.fNumber}` || ''}</p>
-						<p>{`1/${Math.floor(1 / asset.exifInfo.exposureTime)}` || ''}</p>
-						<p>{`${asset.exifInfo.focalLength}mm` || ''}</p>
-						<p>{`ISO${asset.exifInfo.iso}` || ''}</p>
+
+						{#if asset.exifInfo.exposureTime}
+							<p>{`1/${Math.floor(1 / asset.exifInfo.exposureTime)}`}</p>
+						{/if}
+
+						{#if asset.exifInfo.focalLength}
+							<p>{`${asset.exifInfo.focalLength} mm`}</p>
+						{/if}
+
+						{#if asset.exifInfo.iso}
+							<p>
+								{`ISO${asset.exifInfo.iso}`}
+							</p>
+						{/if}
 					</div>
 				</div>
 			</div>