From 764e5668d54e9af96dddcc8dd386d4cd8958d75a Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 30 Apr 2022 14:20:46 +1000
Subject: Make TileInfoModal display more data

---
 .gitignore                       |  5 ++++-
 backend/server.py                | 21 ++++++++++++++-------
 src/components/Tile.vue          |  4 ++--
 src/components/TileInfoModal.vue | 32 +++++++++++++++++++++++---------
 src/tol.ts                       | 10 ++++++++--
 5 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2357fe7..c75df9e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,5 +4,8 @@ node_modules/
 dist/
 public/img/
 backend/data/otol
-backend/data/otol.db
+backend/data/data.db
 backend/data/eol
+backend/data/imgsForReview/
+backend/data/imgsReviewed/
+backend/data/img/
diff --git a/backend/server.py b/backend/server.py
index 178d95c..d5c6006 100755
--- a/backend/server.py
+++ b/backend/server.py
@@ -38,20 +38,27 @@ def lookupNode(name):
 	# Check for image file
 	match = re.fullmatch(r"\[(.+) \+ (.+)]", name)
 	if match == None:
-		nodeObj["imgFile"] = nodeNameToFile(name, cur)
+		nodeObj["img"] = nodeNameToFile(name, cur)
 	else:
-		nodeObj["imgFile"] = nodeNameToFile(match.group(1), cur)
-		if nodeObj["imgFile"] == None:
-			nodeObj["imgFile"] = nodeNameToFile(match.group(2), cur)
+		nodeObj["img"] = nodeNameToFile(match.group(1), cur)
+		if nodeObj["img"] == None:
+			nodeObj["img"] = nodeNameToFile(match.group(2), cur)
 	return nodeObj;
 def nodeNameToFile(name, cur):
 	row = cur.execute("SELECT name, eol_id FROM names WHERE name = ?", (name,)).fetchone()
 	if row == None:
 		return None
-	imgFile = str(row[1]) + ".jpg"
-	if not os.path.exists(imgDir + imgFile):
+	eolId = row[1]
+	filename = str(eolId) + ".jpg"
+	if not os.path.exists(imgDir + filename):
 		return None
-	return imgFile
+	row = cur.execute(
+		"SELECT eol_id, source_url, license, copyright_owner FROM images WHERE eol_id = ?", (eolId,)).fetchone()
+	if row == None:
+		print("ERROR: No 'images' entry for image file {}".format(imgDir + filename), file=sys.stderr)
+		return None
+	[eolId, sUrl, license, cOwner] = row
+	return {"filename": filename, "eolId": eolId, "sourceUrl": sUrl, "license": license, "copyrightOwner": cOwner}
 def lookupName(name):
 	cur = dbCon.cursor()
 	cur.execute("SELECT name, alt_name FROM names WHERE alt_name = ?", (name,))
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 2ab1df1..3dd4146 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -88,9 +88,9 @@ export default defineComponent({
 		leafStyles(): Record<string,string> {
 			return {
 				// Image (and scrims)
-				backgroundImage: this.tolNode.imgFile != null ?
+				backgroundImage: this.tolNode.img?.filename != null ?
 					'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%),' +
-						'url(\'/img/' + this.tolNode.imgFile.replaceAll('\'', '\\\'') + '\')' :
+						'url(\'/img/' + this.tolNode.img.filename.replaceAll('\'', '\\\'') + '\')' :
 					'none',
 				backgroundColor: '#1c1917',
 				backgroundSize: 'cover',
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 9805b48..4718c88 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -2,6 +2,8 @@
 import {defineComponent, PropType} from 'vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import {LayoutNode} from '../layout';
+import type {TolMap} from '../tol';
+import {TolNode} from '../tol';
 
 // Displays information about a tree-of-life node
 export default defineComponent({
@@ -16,9 +18,9 @@ export default defineComponent({
 		},
 		imgStyles(): Record<string,string> {
 			return {
-				backgroundImage: this.tolNode.imgFile != null ?
+				backgroundImage: this.tolNode.img?.filename != null ?
 					'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%),' +
-						'url(\'/img/' + this.tolNode.imgFile.replaceAll('\'', '\\\'') + '\')' :
+						'url(\'/img/' + this.tolNode.img.filename.replaceAll('\'', '\\\'') + '\')' :
 					'none',
 				width: this.uiOpts.infoModalImgSz + 'px',
 				height: this.uiOpts.infoModalImgSz + 'px',
@@ -47,14 +49,26 @@ export default defineComponent({
 			class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
 		<h1 class="text-center text-xl font-bold mb-2">{{node.name}}</h1>
 		<hr class="mb-4 border-stone-400"/>
-		<div :style="imgStyles" class="float-left mr-4" alt="an image"></div>
-		<div>
-			Lorem ipsum dolor sit amet, consectetur adipiscing
-			elit, sed do eiusmod tempor incididunt ut labore
-			et dolore magna aliqua. Ut enim ad minim veniam,
-			quis nostrud exercitation ullamco laboris nisi ut
-			aliquip ex ea commodo consequat.
+		<div class="flex">
+			<div>
+				<div :style="imgStyles" class="mr-4" alt="an image"></div>
+				<div v-if="tolNode.img != null">
+					<ul>
+						<li>License: {{tolNode.img.license}}</li>
+						<li><a :href="tolNode.img.sourceUrl" class="underline">Source URL</a></li>
+						<li>Copyright Owner: {{tolNode.img.copyrightOwner}}</li>
+					</ul>
+				</div>
+			</div>
+			<div>
+				Lorem ipsum dolor sit amet, consectetur adipiscing
+				elit, sed do eiusmod tempor incididunt ut labore
+				et dolore magna aliqua. Ut enim ad minim veniam,
+				quis nostrud exercitation ullamco laboris nisi ut
+				aliquip ex ea commodo consequat.
+			</div>
 		</div>
+		
 	</div>
 </div>
 </template>
diff --git a/src/tol.ts b/src/tol.ts
index bfc778f..46dccd7 100644
--- a/src/tol.ts
+++ b/src/tol.ts
@@ -10,12 +10,18 @@ export class TolNode {
 	parent: string | null;
 	tips: number;
 	pSupport: boolean;
-	imgFile: string | null;
+	img: null | {
+		filename: string,
+		eolId: string,
+		sourceUrl: string,
+		license: string,
+		copyrightOwner: string
+	};
 	constructor(children: string[] = [], parent = null, tips = 0, pSupport = false){
 		this.children = children;
 		this.parent = parent;
 		this.tips = tips;
 		this.pSupport = pSupport;
-		this.imgFile = null;
+		this.img = null;
 	}
 }
-- 
cgit v1.2.3