diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/InfoModal.vue | 4 | ||||
| -rw-r--r-- | src/components/SearchModal.vue | 14 | ||||
| -rw-r--r-- | src/components/SettingsModal.vue | 4 | ||||
| -rw-r--r-- | src/components/TimeLine.vue | 5 | ||||
| -rw-r--r-- | src/lib.ts | 10 | ||||
| -rw-r--r-- | src/store.ts | 2 |
6 files changed, 28 insertions, 11 deletions
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 @@ -27,6 +27,10 @@ <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> </div> 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, @@ -315,8 +315,8 @@ export class EventInfo { event: HistEvent; desc: string | null; wikiId: number; - imgInfo: ImgInfo; - constructor(event: HistEvent, desc: string, wikiId: number, imgInfo: ImgInfo){ + imgInfo: ImgInfo | null; + constructor(event: HistEvent, desc: string, wikiId: number, imgInfo: ImgInfo | null){ this.event = event; this.desc = desc; this.wikiId = wikiId; @@ -459,7 +459,7 @@ export type EventInfoJson = { event: HistEventJson, desc: string, wikiId: number, - imgInfo: ImgInfoJson, + imgInfo: ImgInfoJson | null, } export type ImgInfoJson = { url: string, @@ -490,8 +490,8 @@ export function jsonToHistEvent(json: HistEventJson): HistEvent { export function jsonToEventInfo(json: EventInfoJson): EventInfo { return new EventInfo(jsonToHistEvent(json.event), json.desc, json.wikiId, jsonToImgInfo(json.imgInfo)); } -export function jsonToImgInfo(json: ImgInfoJson): ImgInfo { - return new ImgInfo(json.url, json.license, json.artist, json.credit); +export function jsonToImgInfo(json: ImgInfoJson | null): ImgInfo | null { + return json == null ? null : new ImgInfo(json.url, json.license, json.artist, json.credit); } // For dates in a timeline diff --git a/src/store.ts b/src/store.ts index a366894..3778649 100644 --- a/src/store.ts +++ b/src/store.ts @@ -30,6 +30,7 @@ export type StoreState = { dragInertia: number, // Multiplied by final-drag-speed (pixels-per-sec) to get extra scroll distance disableShortcuts: boolean, // Other feature-specific + reqImgs: boolean, // Only show events with images showEventCounts: boolean, searchSuggLimit: number, ctgs: { // Specifies event categories, and which ones should be visible @@ -104,6 +105,7 @@ function getDefaultState(): StoreState { dragInertia: 0.1, disableShortcuts: false, // Other feature-specific + reqImgs: true, showEventCounts: true, searchSuggLimit: 10, ctgs: { |