diff options
| -rw-r--r-- | .gitignore | 5 | ||||
| -rwxr-xr-x | backend/server.py | 21 | ||||
| -rw-r--r-- | src/components/Tile.vue | 4 | ||||
| -rw-r--r-- | src/components/TileInfoModal.vue | 32 | ||||
| -rw-r--r-- | src/tol.ts | 10 |
5 files changed, 51 insertions, 21 deletions
@@ -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> @@ -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; } } |