diff options
| -rw-r--r-- | backend/README.md | 6 | ||||
| -rwxr-xr-x | backend/cgi-bin/data.py | 1 | ||||
| -rw-r--r-- | src/components/SettingsModal.vue | 2 | ||||
| -rw-r--r-- | src/components/Tile.vue | 6 | ||||
| -rw-r--r-- | src/components/TileInfoModal.vue | 5 | ||||
| -rw-r--r-- | src/lib.ts | 4 | ||||
| -rw-r--r-- | 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', @@ -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: { |