Add getServerResponse()

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 @@
 				<label for="minTileSizeInput">Min Tile Size</label>
 				<input type="range" min="0" max="400" v-model.number="lytOpts.minTileSz"
 					@input="onSettingChg('minTileSz')" name="minTileSizeInput" ref="minTileSzInput"/>
-				<div class="my-auto text-right">{{pxToMm(lytOpts.minTileSz)}} mm</div>
+				<div class="my-auto text-right">{{pxToDisplayStr(lytOpts.minTileSz)}}</div>
 				<!-- Row 2 -->
 				<label for="maxTileSizeInput">Max Tile Size</label>
 				<input type="range" min="0" max="400" v-model.number="lytOpts.maxTileSz"
 					@input="onSettingChg('maxTileSz')" name="maxTileSizeInput" ref="maxTileSzInput"/>
-				<div class="my-auto text-right">{{pxToMm(lytOpts.maxTileSz)}} mm</div>
+				<div class="my-auto text-right">{{pxToDisplayStr(lytOpts.maxTileSz)}}</div>
 				<!-- Row 3 -->
 				<label for="tileSpacingInput">Tile Spacing</label>
 				<input type="range" min="0" max="20" v-model.number="lytOpts.tileSpacing"
 					@input="onSettingChg('tileSpacing')" name="tileSpacingInput"/>
-				<div class="my-auto text-right">{{pxToMm(lytOpts.tileSpacing)}} mm</div>
+				<div class="my-auto text-right">{{pxToDisplayStr(lytOpts.tileSpacing)}}</div>
 			</div>
 		</div>
 		<div class="border rounded p-1">
@@ -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;
-}