From 96805eeb9edbbdde2277d155090c955cfa664506 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 14 Jan 2023 16:10:31 +1100
Subject: Allow showing events without images

Add setting for showing such events
Fix searches not always avoiding filtered categories
---
 src/components/InfoModal.vue     |  4 ++--
 src/components/SearchModal.vue   | 14 +++++++++++---
 src/components/SettingsModal.vue |  4 ++++
 src/components/TimeLine.vue      |  5 ++++-
 4 files changed, 21 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/components/InfoModal.vue b/src/components/InfoModal.vue
index f709676..cd067e1 100644
--- a/src/components/InfoModal.vue
+++ b/src/components/InfoModal.vue
@@ -16,7 +16,7 @@
 		</div>
 		<!-- Main content -->
 		<div class="border-t border-stone-400 p-2 md:p-3">
-			<div class="mt-1 mr-2 md:mb-2 md:mr-4 md:float-left">
+			<div v-if="eventInfo.imgInfo != null" class="mt-1 mr-2 md:mb-2 md:mr-4 md:float-left">
 				<!-- Image -->
 				<a :href="eventInfo.imgInfo.url" target="_blank" class="block w-fit mx-auto" :style="imgStyles"></a>
 				<!-- Image Source -->
@@ -153,7 +153,7 @@ const imgStyles = computed(() => {
 	return {
 		width: '200px',
 		height: '200px',
-		backgroundImage: `url(${getImagePath(event.value.imgId)})`,
+		backgroundImage: event.value.imgId == null ? 'none' : `url(${getImagePath(event.value.imgId)})`,
 		backgroundColor: store.color.bgDark,
 		backgroundSize: 'cover',
 		borderRadius: store.borderRadius + 'px',
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index 0ed2888..0673f59 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -157,11 +157,16 @@ async function resolveSearch(eventTitle: string){
 	}
 	// Check if the event data is already here
 	if (props.titleToEvent.has(eventTitle)){
-		if (visibleCtgs != null && !visibleCtgs.includes(props.titleToEvent.get(eventTitle).ctg)){
+		let event = props.titleToEvent.get(eventTitle)!;
+		if (visibleCtgs != null && !visibleCtgs.includes(event.ctg)){
 			console.log('INFO: Ignoring search for known event due to category filter');
 			return;
 		}
-		emit('search', props.titleToEvent.get(eventTitle));
+		if (store.reqImgs && event.imgId == null){
+			console.log('INFO: Ignoring search for known event due to image-only display');
+			return;
+		}
+		emit('search', event);
 		return;
 	}
 	// Query server for event
@@ -169,11 +174,14 @@ async function resolveSearch(eventTitle: string){
 	let responseObj: EventInfoJson | null = await queryServer(urlParams);
 	if (responseObj != null){
 		let eventInfo = jsonToEventInfo(responseObj);
-		// Check if event category is disabled
 		if (visibleCtgs != null && !visibleCtgs.includes(eventInfo.event.ctg)){
 			console.log('INFO: Ignoring search result due to category filter');
 			return;
 		}
+		if (store.reqImgs && eventInfo.event.imgId == null){
+			console.log('INFO: Ignoring search result due to image-only display');
+			return;
+		}
 		emit('search', eventInfo.event);
 	} else {
 		// Trigger failure animation
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 21ac7b8..d9caa34 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -26,6 +26,10 @@
 		</div>
 		<div class="pb-2" :class="borderBClasses">
 			<h2 class="font-bold md:text-xl text-center pt-1 md:pt-2 md:pb-1">Display</h2>
+			<div class="px-2">
+				<label> <input type="checkbox" v-model="store.reqImgs"
+					@change="onSettingChg('reqImgs')"/> Only show events with images </label>
+			</div>
 			<div class="px-2">
 				<label> <input type="checkbox" v-model="store.showEventCounts"
 					@change="onSettingChg('showEventCounts')"/> Show event count indicators </label>
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 8aeb883..bab6e5e 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -448,6 +448,9 @@ const idToEvent = computed(() => { // Maps visible event IDs to HistEvents
 		if ((store.ctgs as {[ctg: string]: boolean})[event.ctg] == false){
 			continue;
 		}
+		if (store.reqImgs && event.imgId == null){
+			continue;
+		}
 		map.set(event.id, event);
 	}
 	return map;
@@ -1288,7 +1291,7 @@ function eventImgStyles(eventId: number){
 	return {
 		width: store.eventImgSz + 'px',
 		height: store.eventImgSz + 'px',
-		backgroundImage: `url(${getImagePath(event.imgId)})`,
+		backgroundImage: event.imgId == null ? 'none' : `url(${getImagePath(event.imgId)})`,
 		backgroundColor: store.color.bgDark,
 		backgroundSize: 'cover',
 		borderColor: color,
-- 
cgit v1.2.3