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 ++++++++-----
 src/components/TimeLine.vue  |  4 ++--
 2 files changed, 10 insertions(+), 7 deletions(-)

(limited to 'src/components')

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',
 	};
 });
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 6d0f632..8aeb883 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -43,7 +43,7 @@
 				x="0" y="0" :text-anchor="vert ? 'start' : 'middle'" dominant-baseline="middle"
 				:fill="store.color.textDark" :style="tickLabelStyles(tick)"
 				class="text-sm animate-fadein cursor-default select-none">
-				{{tick.date.toDisplayString()}}
+				{{tick.date.toTickString()}}
 			</text>
 		</template>
 	</svg>
@@ -1289,7 +1289,7 @@ function eventImgStyles(eventId: number){
 		width: store.eventImgSz + 'px',
 		height: store.eventImgSz + 'px',
 		backgroundImage: `url(${getImagePath(event.imgId)})`,
-		backgroundColor: 'black',
+		backgroundColor: store.color.bgDark,
 		backgroundSize: 'cover',
 		borderColor: color,
 		borderWidth: '1px',
-- 
cgit v1.2.3