From 21b5e5ee7bb933fa8235430aa63382b70dbe3d1b Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 14 Jan 2023 11:26:10 +1100
Subject: Improve date display in info modal

Make desc field of EventInfo optional
Don't require desc in type=info result
Fix image not showing in info modal
---
 src/components/InfoModal.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

(limited to 'src/components/InfoModal.vue')

diff --git a/src/components/InfoModal.vue b/src/components/InfoModal.vue
index 3e03187..d2ac425 100644
--- a/src/components/InfoModal.vue
+++ b/src/components/InfoModal.vue
@@ -57,7 +57,8 @@
 					</template>
 				</s-collapsible>
 			</div>
-			<div>{{eventInfo.desc}}</div>
+			<div v-if="eventInfo.desc != null">{{eventInfo.desc}}</div>
+			<div v-else class="text-center text-stone-500 text-sm">(No description found)</div>
 			<div class="text-sm text-right">
 				<a :href="'https://en.wikipedia.org/?curid=' + eventInfo.wikiId" target="_blank">From Wikipedia</a>
 				(via <a :href="'https://www.wikidata.org/wiki/Q' + event.id" target="_blank">Wikidata</a>)
@@ -74,7 +75,7 @@ import SCollapsible from './SCollapsible.vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import DownIcon from './icon/DownIcon.vue';
 import ExternalLinkIcon from './icon/ExternalLinkIcon.vue';
-import {EventInfo} from '../lib';
+import {EventInfo, boundedDateToStr, getImagePath} from '../lib';
 import {useStore} from '../store';
 
 // Refs
@@ -93,7 +94,9 @@ const emit = defineEmits(['close']);
 // For data display
 const event = computed(() => props.eventInfo.event)
 const datesDisplayStr = computed(() => {
-	return event.value.start.toString() + (event.value.end == null ? '' : ' to ' + event.value.end.toString())
+	const startStr = boundedDateToStr(event.value.start, event.value.startUpper);
+	const endStr = event.value.end == null ? null : boundedDateToStr(event.value.end, event.value.endUpper);
+	return 'Start: ' + startStr + (endStr == null ? '' : ', End: ' + endStr);
 });
 function licenseToUrl(license: string){
 	license = license.toLowerCase().replaceAll('-', ' ');
@@ -143,9 +146,9 @@ const imgStyles = computed(() => {
 	return {
 		width: '200px',
 		height: '200px',
-		//backgroundImage:
+		backgroundImage: `url(${getImagePath(event.value.imgId)})`,
 		backgroundColor: store.color.bgDark,
-		//backgroundSize: 'cover',
+		backgroundSize: 'cover',
 		borderRadius: store.borderRadius + 'px',
 	};
 });
-- 
cgit v1.2.3