friendly translation of XSP

client/css/optiTrainer.css

@@ -40,7 +40,7 @@ body {
 }
 
 #lbTime {
-	width:260px;
+	width:340px;
 }
 #lbTime>.dropdown-item {
     width: 80px;

client/js/masterFilter.js

@@ -67,7 +67,12 @@ let createMasterFilterFrame=()=>{
 		}).done(response=>{
 			let allSymbols=response;
 			console.log(allSymbols);
-			me.refreshSymbolList(allSymbols);
+			let aAllSymbols=[];
+			for (let i=0;i<allSymbols.length;i++){
+				aAllSymbols.push(me.toFriendlyName(allSymbols[i].Symbol));
+			}	
+			aAllSymbols=aAllSymbols.sort();
+			me.refreshSymbolList(aAllSymbols);
 		});
 	}
 	
@@ -75,10 +80,11 @@ let createMasterFilterFrame=()=>{
 		return(_filterContext.theSymbol);
 	}
 	me.symbolChanged=(newSymbol)=>{
+		newSymbol=me.toBrokerName(newSymbol);
 		console.log("symbolChanged",newSymbol);
 		_filterContext.theSymbol=newSymbol
 		document.title=me.getCurrentSymbol();
-		$("#tbSymbol").text(me.getCurrentSymbol());
+		$("#tbSymbol").text(me.toFriendlyName(me.getCurrentSymbol()));
 		
 		me.getAvailDatesForSymbol(me.getCurrentSymbol()).done(_=>{
 			$("#datePicker").datepicker('destroy');
@@ -167,13 +173,30 @@ let createMasterFilterFrame=()=>{
 		});
 	}
 
+	me.toFriendlyName=(symbol)=>{
+		let symbolDisplayName=symbol;
+		if (symbolDisplayName==="$XSP.X") { 
+			symbolDisplayName="XSP"; 
+		}
+		return(symbolDisplayName);
+	}
+
+	me.toBrokerName=(symbol)=>{
+		let symbolBrokerName=symbol;
+		if (symbolBrokerName==="XSP") { 
+			symbolBrokerName="$XSP.X"; 
+		}
+		return(symbolBrokerName);
+	}
+
 	me.refreshSymbolList=(allSymbols)=>{
 		let lbSymbol=$("#lbSymbol");
 		lbSymbol.empty();
 		for (let i=0;i<allSymbols.length;i++){
-			theSymbol=allSymbols[i].Symbol;
+			theSymbol=allSymbols[i];
 			console.log(theSymbol);
-			lbSymbol.append($(`<button onclick="myMasterFilter.symbolChanged('${theSymbol}');" class="dropdown-item" type="button">${theSymbol}</button>`))
+			let symbolDisplayName=me.toFriendlyName(theSymbol);
+			lbSymbol.append($(`<button onclick="myMasterFilter.symbolChanged('${theSymbol}');" class="dropdown-item" type="button">${symbolDisplayName}</button>`))
 		}
 	}