From 2b9cb003fbcf2a6aa2cc6b340a439e7e09c72aad Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Mon, 27 Jun 2022 14:26:34 +1000 Subject: Add getServerResponse() --- src/App.vue | 37 +++++++++----------------- src/components/SearchModal.vue | 38 ++++++++++----------------- src/components/SettingsModal.vue | 10 +++---- src/components/TileInfoModal.vue | 18 ++++--------- src/util.ts | 56 ++++++++++++++++++++++++++-------------- 5 files changed, 73 insertions(+), 86 deletions(-) diff --git a/src/App.vue b/src/App.vue index f1641b1..d4c51b1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -86,7 +86,7 @@ import HelpIcon from './components/icon/HelpIcon.vue'; import {TolNode, TolMap, Action, UiOptions} from './lib'; import {LayoutNode, LayoutOptions, LayoutTreeChg} from './layout'; import {initLayoutTree, initLayoutMap, tryLayout} from './layout'; -import {arraySum, randWeightedChoice, getScrollBarWidth, getBreakpoint} from './util'; +import {getServerResponse, getBreakpoint, getScrollBarWidth, arraySum, randWeightedChoice} from './util'; // Type representing auto-mode actions type AutoAction = 'move across' | 'move down' | 'move up' | Action; @@ -312,14 +312,10 @@ export default defineComponent({ // Check if data for node-to-expand exists, getting from server if needed let tolNode = this.tolMap.get(layoutNode.name)!; if (!this.tolMap.has(tolNode.children[0])){ - let responseObj: {[x: string]: TolNode}; - try { - let urlPath = '/data/node?name=' + encodeURIComponent(layoutNode.name) - urlPath += this.uiOpts.useReducedTree ? '&tree=reduced' : ''; - let response = await fetch(urlPath); - responseObj = await response.json(); - } catch (error){ - console.log('Error with retreiving tol-node data: ' + error); + let urlParams = 'name=' + encodeURIComponent(layoutNode.name); + urlParams += this.uiOpts.useReducedTree ? '&tree=reduced' : ''; + let responseObj: {[x: string]: TolNode} = await getServerResponse('/data/node', urlParams); + if (responseObj == null){ return false; } Object.getOwnPropertyNames(responseObj).forEach(n => {this.tolMap.set(n, responseObj[n])}); @@ -410,14 +406,10 @@ export default defineComponent({ // Check if data for node-to-expand exists, getting from server if needed let tolNode = this.tolMap.get(layoutNode.name)!; if (!this.tolMap.has(tolNode.children[0])){ - let responseObj: {[x: string]: TolNode}; - try { - let urlPath = '/data/node?name=' + encodeURIComponent(layoutNode.name) - urlPath += this.uiOpts.useReducedTree ? '&tree=reduced' : ''; - let response = await fetch(urlPath); - responseObj = await response.json(); - } catch (error){ - console.log('Error with retreiving tol-node data: ' + error); + let urlParams = 'name=' + encodeURIComponent(layoutNode.name); + urlParams += this.uiOpts.useReducedTree ? '&tree=reduced' : ''; + let responseObj: {[x: string]: TolNode} = await getServerResponse('/data/node', urlParams); + if (responseObj == null){ return false; } Object.getOwnPropertyNames(responseObj).forEach(n => {this.tolMap.set(n, responseObj[n])}); @@ -872,14 +864,9 @@ export default defineComponent({ // For initialisation async initTreeFromServer(){ // Query server - let responseObj: {[x: string]: TolNode}; - try { - let urlPath = '/data/node'; - urlPath += this.uiOpts.useReducedTree ? '?tree=reduced' : ''; - let response = await fetch(urlPath); - responseObj = await response.json(); - } catch (error) { - console.log('Error with retrieving tree data: ' + error); + let urlParams = this.uiOpts.useReducedTree ? '?tree=reduced' : ''; + let responseObj: {[x: string]: TolNode} = await getServerResponse('/data/node', urlParams); + if (responseObj == null){ return; } // Get root node name diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue index 7d86a76..86712ef 100644 --- a/src/components/SearchModal.vue +++ b/src/components/SearchModal.vue @@ -40,6 +40,7 @@ import LogInIcon from './icon/LogInIcon.vue'; import InfoIcon from './icon/InfoIcon.vue'; import {TolNode, TolMap, UiOptions, SearchSugg, SearchSuggResponse} from '../lib'; import {LayoutNode, LayoutOptions} from '../layout'; +import {getServerResponse} from '../util'; export default defineComponent({ props: { @@ -51,7 +52,7 @@ export default defineComponent({ return { // For search-suggestion requests lastSuggReqTime: 0, // Set when a search-suggestions request is initiated - pendingSuggReqUrl: '', // Used by a search-suggestion requester to use the latest user input + pendingSuggReqParams: '', // Used by a search-suggestion requester to use the latest user input pendingDelayedSuggReq: 0, // Set via setTimeout() for a non-initial search-suggestions request // Search-suggestion data searchSuggs: [] as SearchSugg[], @@ -102,21 +103,16 @@ export default defineComponent({ this.focusedSuggIdx = null; return; } - // Get URL to use for querying search-suggestions - let url = new URL(window.location.href); - url.pathname = '/data/search'; - url.search = '?name=' + encodeURIComponent(input.value); - url.search += this.uiOpts.useReducedTree ? '&tree=reduced' : ''; - url.search += '&limit=' + this.uiOpts.searchSuggLimit; + // Get URL params to use for querying search-suggestions + let urlParams = 'name=' + encodeURIComponent(input.value); + urlParams += '&limit=' + this.uiOpts.searchSuggLimit; + urlParams += this.uiOpts.useReducedTree ? '&tree=reduced' : ''; // Query server, delaying/skipping if a request was recently sent - this.pendingSuggReqUrl = url.toString(); + this.pendingSuggReqParams = urlParams; let doReq = async () => { - let responseObj: SearchSuggResponse; - try { - let response = await fetch(this.pendingSuggReqUrl); - responseObj = await response.json(); - } catch (error){ - console.log('Error with getting search suggestions from server: ' + error) + let responseObj: SearchSuggResponse = + await getServerResponse('/data/search', this.pendingSuggReqParams); + if (responseObj == null){ return; } this.searchSuggs = responseObj.suggs; @@ -175,16 +171,10 @@ export default defineComponent({ return; } // Ask server for nodes in parent-chain, updates tolMap, then emits search event - let url = new URL(window.location.href); - url.pathname = '/data/chain'; - url.search = '?name=' + encodeURIComponent(tolNodeName); - url.search += (this.uiOpts.useReducedTree ? '&tree=reduced' : ''); - let responseObj: {[x: string]: TolNode}; - try { - let response = await fetch(url.toString()); - responseObj = await response.json(); - } catch (error){ - console.log('Error with getting tolnode chain: ' + error); + let urlParams = 'name=' + encodeURIComponent(tolNodeName); + urlParams += this.uiOpts.useReducedTree ? '&tree=reduced' : ''; + let responseObj: {[x: string]: TolNode} = await getServerResponse('/data/chain', urlParams); + if (responseObj == null){ return; } let keys = Object.getOwnPropertyNames(responseObj); diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue index 11beb4c..46433f7 100644 --- a/src/components/SettingsModal.vue +++ b/src/components/SettingsModal.vue @@ -34,17 +34,17 @@ -
{{pxToMm(lytOpts.minTileSz)}} mm
+
{{pxToDisplayStr(lytOpts.minTileSz)}}
-
{{pxToMm(lytOpts.maxTileSz)}} mm
+
{{pxToDisplayStr(lytOpts.maxTileSz)}}
-
{{pxToMm(lytOpts.tileSpacing)}} mm
+
{{pxToDisplayStr(lytOpts.tileSpacing)}}
@@ -133,8 +133,8 @@ export default defineComponent({ // this.$emit('setting-chg', setting); }, - pxToMm(px: number): number{ - return (px / 3.78).toFixed(); + pxToDisplayStr(px: number): string { + return (px / 3.78).toFixed() + ' mm'; } }, components: {SButton, CloseIcon, }, diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue index f8c4c4e..7d402bb 100644 --- a/src/components/TileInfoModal.vue +++ b/src/components/TileInfoModal.vue @@ -60,7 +60,7 @@ import {defineComponent, PropType} from 'vue'; import CloseIcon from './icon/CloseIcon.vue'; import {LayoutNode, LayoutOptions} from '../layout'; import {TolNode, TolMap, UiOptions, DescInfo, ImgInfo, NodeInfo, InfoResponse} from '../lib'; -import {capitalizeWords} from '../util'; +import {getServerResponse, capitalizeWords} from '../util'; export default defineComponent({ props: { @@ -157,18 +157,10 @@ export default defineComponent({ }, async created(){ // Query server for tol-node info - let url = new URL(window.location.href); - url.pathname = '/data/info'; - url.search = '?name=' + encodeURIComponent(this.nodeName); - if (this.uiOpts.useReducedTree){ - url.search += '&tree=reduced'; - } - let responseObj: InfoResponse; - try { - let response = await fetch(url.toString()); - responseObj = await response.json(); - } catch (error){ - console.log("Error with retrieving data from server: " + error); + let urlParams = 'name=' + encodeURIComponent(this.nodeName); + urlParams += this.uiOpts.useReducedTree ? '&tree=reduced' : ''; + let responseObj: InfoResponse = await getServerResponse('/data/info', urlParams); + if (responseObj == null){ return; } // Set fields from response diff --git a/src/util.ts b/src/util.ts index 9a4b2b7..6d713a8 100644 --- a/src/util.ts +++ b/src/util.ts @@ -2,7 +2,25 @@ * General utility functions */ -export type Breakpoint = 'sm' | 'md' | 'lg'; // These represent screen sizes +// For server requests +export async function getServerResponse(path: string, params: string){ + // Construct URL + let url = new URL(window.location.href); + url.pathname = path; + url.search = params; + // Query server + let responseObj; + try { + let response = await fetch(url.toString()); + responseObj = await response.json(); + } catch (error){ + console.log(`Error with querying ${url}: ${error}`); + return null; + } + return responseObj; +} +// For detecting screen size +export type Breakpoint = 'sm' | 'md' | 'lg'; export function getBreakpoint(): Breakpoint { let w = window.innerWidth; if (w < 768){ @@ -13,6 +31,24 @@ export function getBreakpoint(): Breakpoint { return 'lg'; } } +// Dynamically obtains scroll bar width +// From stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript +export function getScrollBarWidth(){ + // Create hidden outer div + let outer = document.createElement('div'); + outer.style.visibility = 'hidden'; + outer.style.overflow = 'scroll'; + document.body.appendChild(outer); + // Create inner div + let inner = document.createElement('div'); + outer.appendChild(inner); + // Get width difference + let scrollBarWidth = outer.offsetWidth - inner.offsetWidth; + // Remove temporary divs + outer.parentNode!.removeChild(outer); + // + return scrollBarWidth; +} // Returns [0 ... len] export function range(len: number): number[] { @@ -115,21 +151,3 @@ export function capitalizeWords(str: string){ str = str.replace(/(\w)'S/, '$1\'s'); // Avoid cases like "traveler's tree" -> "Traveler'S Tree" return str; } -// Dynamically obtains scroll bar width -// From stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript -export function getScrollBarWidth(){ - // Create hidden outer div - let outer = document.createElement('div'); - outer.style.visibility = 'hidden'; - outer.style.overflow = 'scroll'; - document.body.appendChild(outer); - // Create inner div - let inner = document.createElement('div'); - outer.appendChild(inner); - // Get width difference - let scrollBarWidth = outer.offsetWidth - inner.offsetWidth; - // Remove temporary divs - outer.parentNode!.removeChild(outer); - // - return scrollBarWidth; -} -- cgit v1.2.3