From 053567d2ad81fefbd5e52e3ba15cf7511205a963 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Tue, 28 Jun 2022 11:05:39 +1000
Subject: Add getImagePath() to lib.ts

---
 backend/README.md                | 6 +++---
 backend/cgi-bin/data.py          | 1 -
 src/components/SettingsModal.vue | 2 +-
 src/components/Tile.vue          | 6 +++---
 src/components/TileInfoModal.vue | 5 +++--
 src/lib.ts                       | 4 ++++
 vite.config.js                   | 1 +
 7 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/backend/README.md b/backend/README.md
index 3efa585..3a56f76 100644
--- a/backend/README.md
+++ b/backend/README.md
@@ -3,6 +3,6 @@
 -   data: Contains scripts for generating the tree-of-life database
 
 # During development
-Having generated the database as data/data.db, and with this as the current
-directory, running `python3 -m http.server --cgi 8000` allows the client to access
-the CGI script, and hence the database, via `localhost:8000/cgi-bin/data.py`.
+Having generated the database as data/data.db, running `python3 -m http.server --cgi 8000`,
+in this directory, allows the client to access the CGI script, and hence the database,
+via `localhost:8000/cgi-bin/data.py`.
diff --git a/backend/cgi-bin/data.py b/backend/cgi-bin/data.py
index 05ed81b..b152c14 100755
--- a/backend/cgi-bin/data.py
+++ b/backend/cgi-bin/data.py
@@ -6,7 +6,6 @@ import sqlite3
 import gzip, jsonpickle
 
 dbFile = "data/data.db"
-imgDir = "data/img/"
 DEFAULT_SUGG_LIM = 5
 MAX_SUGG_LIM = 50
 CORS_ANY_ORIGIN = True # Used during development to avoid Cross-Origin Resource Sharing restrictions
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 46433f7..4f9165f 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -56,7 +56,7 @@
 					@change="onSettingChg('transitionDuration')" class="my-auto" name="animationTimeInput"/>
 				<div class="my-auto text-right">{{uiOpts.transitionDuration}} ms</div>
 				<!-- Row 2 -->
-				<label for="autoModeDelayInput">Auo-mode Delay</label>
+				<label for="autoModeDelayInput">Auto-mode Delay</label>
 				<input type="range" min="0" max="3000" v-model.number="uiOpts.autoActionDelay"
 					@change="onSettingChg('autoActionDelay')" class="my-auto" name="autoModeDelayInput"/>
 				<div class="my-auto text-right">{{uiOpts.autoActionDelay}} ms</div>
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 15b8a0b..2a59d94 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -51,7 +51,7 @@
 <script lang="ts">
 import {defineComponent, PropType} from 'vue';
 import InfoIcon from './icon/InfoIcon.vue';
-import {TolNode, TolMap, UiOptions} from '../lib';
+import {TolNode, TolMap, getImagePath, UiOptions} from '../lib';
 import {LayoutNode, LayoutOptions} from '../layout';
 import {capitalizeWords} from '../util';
 
@@ -215,7 +215,7 @@ export default defineComponent({
 				styles = {
 					...styles,
 					backgroundImage: this.tolNode.imgName != null ?
-						`${scrimGradient},url('/img/${(this.tolNode.imgName as string).replaceAll('\'', '\\\'')}')` :
+						`${scrimGradient},url('${getImagePath(this.tolNode.imgName as string)}')` :
 						'none',
 					backgroundColor: this.uiOpts.bgColorDark,
 					backgroundSize: 'cover',
@@ -499,7 +499,7 @@ export default defineComponent({
 				height: '100%',
 				// Image (and scrims)
 				backgroundImage: (this.tolNode.imgName![idx]! != null) ?
-					`${scrimGradient},url('/img/${(this.tolNode.imgName![idx] as string).replaceAll('\'', '\\\'')}')` :
+					`${scrimGradient},url('${getImagePath(this.tolNode.imgName![idx]! as string)}')` :
 					'none',
 				backgroundColor: this.uiOpts.bgColorDark,
 				backgroundSize: '125%',
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index a85fa72..82db5d4 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -59,7 +59,8 @@
 import {defineComponent, PropType} from 'vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import {LayoutNode, LayoutOptions} from '../layout';
-import {TolNode, TolMap, getServerResponse, DescInfo, ImgInfo, NodeInfo, InfoResponse, UiOptions} from '../lib';
+import {TolNode, TolMap, getServerResponse, getImagePath,
+	DescInfo, ImgInfo, NodeInfo, InfoResponse, UiOptions} from '../lib';
 import {capitalizeWords} from '../util';
 
 export default defineComponent({
@@ -111,7 +112,7 @@ export default defineComponent({
 				width: this.lytOpts.maxTileSz + 'px',
 				height: this.lytOpts.maxTileSz + 'px',
 				backgroundImage: imgName != null ?
-					'url(\'/img/' + imgName.replaceAll('\'', '\\\'') + '\')' :
+					`url('${getImagePath(imgName as string)}')` :
 					'none',
 				backgroundColor: this.uiOpts.bgColorDark,
 				backgroundSize: 'cover',
diff --git a/src/lib.ts b/src/lib.ts
index be3b6d6..cad51c4 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -42,6 +42,10 @@ export async function getServerResponse(params: string){
 	}
 	return responseObj;
 }
+const SERVER_IMG_PATH = '/img/'
+export function getImagePath(imgName: string): string {
+	return SERVER_IMG_PATH + imgName.replaceAll('\'', '\\\'');
+}
 // For server search responses
 export type SearchSugg = { // Represents a search-string suggestion
 	name: string,
diff --git a/vite.config.js b/vite.config.js
index 40f62d7..f1e7552 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -2,6 +2,7 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
+	base: '/',
 	plugins: [vue()],
 	server: {
 		watch: {
-- 
cgit v1.2.3