From 6bb1d2e369512bec91ecc0c63238f4ad4c54c528 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Thu, 5 May 2022 13:17:13 +1000
Subject: Display common names

Also add capitalizeWords() in util.ts, for more capitalization control
---
 src/components/TileInfoModal.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

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

diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 7cd75b7..275dd08 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -4,6 +4,7 @@ import CloseIcon from './icon/CloseIcon.vue';
 import {LayoutNode} from '../layout';
 import type {TolMap} from '../tol';
 import {TolNode} from '../tol';
+import {capitalizeWords} from '../util';
 
 // Displays information about a tree-of-life node
 export default defineComponent({
@@ -23,6 +24,13 @@ export default defineComponent({
 		tolNode(): TolNode {
 			return this.tolMap.get(this.node.name)!;
 		},
+		displayName(): string {
+			if (this.tolNode.commonName == null){
+				return capitalizeWords(this.node.name);
+			} else {
+				return `${capitalizeWords(this.tolNode.commonName)} (aka ${capitalizeWords(this.node.name)})`;
+			}
+		},
 		imgStyles(): Record<string,string> {
 			return {
 				backgroundImage: this.tolNode.imgName != null ?
@@ -71,7 +79,7 @@ export default defineComponent({
 		bg-stone-50 rounded-md shadow shadow-black">
 		<close-icon @click.stop="onCloseClick" ref="closeIcon"
 			class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
-		<h1 class="text-center text-xl font-bold mb-2 capitalize">{{node.name}}</h1>
+		<h1 class="text-center text-xl font-bold mb-2">{{displayName}}</h1>
 		<hr class="mb-4 border-stone-400"/>
 		<div class="flex">
 			<div>
-- 
cgit v1.2.3