let createMasterFilterFrame=()=>{ let me=window.myMasterFilter = document.createElement("div"); me.setAttribute("id","frmMasterFilter"); me.className="container-fluid " window.document.getElementById('app').append(me); me.innerHTML=`

SELECT SYMBOL!

*

*

*

*

`; let _filterContext={}; // TODO: This is bad, grown design - should be replaced with a proper object oriented structure and observer pattern. Object.defineProperty(me,"selectedDate",{ get:_=>{ return (_filterContext.theDate);} }) Object.defineProperty(me,"selectedTime",{ get:_=>{ return (_filterContext.selectedTime);} }) Object.defineProperty(me,"selectedSymbol",{ get:_=>{ return (_filterContext.theSymbol);} }) me.beforeShowDay=(theDate)=>{ let isoDate=theDate.toISOString().substr(0,10); //console.log("BeforeShow",isoDate,theDate); let isDateFound=false; for (let i=0;i<_filterContext.availableDates.length;i++){ if (_filterContext.availableDates[i].Date===theDate.toISOString().substr(0,10)){ isDateFound=true; break; }; } if (!isDateFound) { return {enabled:false, tooltip:"No data"}; } } me.fetchSymbols=()=>{ $("#spinner-symbol").show(); $.get({ url:"/getSymbols" }).done(response=>{ let allSymbols=response; console.log(allSymbols); let aAllSymbols=[]; for (let i=0;i{ return(_filterContext.theSymbol); } me.symbolChanged=(newSymbol)=>{ localStorage["defaults"]=JSON.stringify({Symbol:newSymbol}); newSymbol=me.toBrokerName(newSymbol); console.log("symbolChanged",newSymbol); _filterContext.theSymbol=newSymbol document.title=me.getCurrentSymbol(); $("#tbSymbol").text(me.toFriendlyName(me.getCurrentSymbol())); me.getAvailDatesForSymbol(me.getCurrentSymbol()).done(_=>{ $("#datePicker").datepicker('destroy'); $("#datePicker").datepicker({beforeShowDay:me.beforeShowDay}); if (document.getElementById("datePicker").hasHandler !== true) { // work around multiple binding of the eventhandler - it seems that destroy doesn't remove the old handler.... $("#datePicker").datepicker().on('changeDate', (e)=>{ if (e.date !== undefined) { console.log("DatePicker changed date",e.date); _filterContext.theDate=e.date.toISOString().substr(0,10); me.showTimesForDay(_filterContext.theDate); } }); document.getElementById("datePicker").hasHandler= true; } if (_filterContext.theDate === undefined) { console.log("no date in contest, setting date to the last in chain."); _filterContext.theDate=_filterContext.availableDates[_filterContext.availableDates.length-1].Date; } currentTZDate = new Date(Date.parse(_filterContext.theDate) + new Date().getTimezoneOffset()*60000); console.log("setting datepicker date to ", _filterContext.theDate, currentTZDate); $("#datePicker").datepicker('setDate',currentTZDate); }); } me.timeChanged=(newTime)=>{ if ((_filterContext.selectedTime!==newTime) || (_filterContext.theDateOfTime!==_filterContext.theDate)) { _filterContext.selectedTime=newTime; _filterContext.theDateOfTime=_filterContext.theDate; $("#tbSelectedTime").text(newTime); console.log("Time changed", newTime); } me.requestOptionChain(); } me.requestOptionChain=()=>{ $("#spinner-optionChain").show(); $.ajax({ url:"/getOptionChain?Date=" + _filterContext.theDate + "&Symbol=" + _filterContext.theSymbol + "&Time="+ _filterContext.selectedTime }).done(response=>{ dta=JSON.parse(response[0].Data); //console.log("received",dta); displayOptionChain(); $("#tbUnderlyingPrice").text(dta.underlyingPrice.toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2})); $("#spinner-optionChain").hide(); }); } me.showTimesForDay=()=>{ $("#spinner-time").show(); return $.ajax({ url:"/getTimes?Date=" + _filterContext.theDate + "&Symbol=" + _filterContext.theSymbol }).done(response=>{ let availableTimes=response; //console.log(availableTimes); let lbTime=$("#lbTime"); lbTime.empty(); allTimes = availableTimes; let presetTime=undefined; for (let i=0;i= theTime.substring(0,4)){ presetTime = theTime; } } else { if (i==4) { // this is usually upon open - initializing the selected time... // select the 4th time in the day... that's usually around 9:30 presetTime = theTime; } } //lbTime.append($(``)) lbTime.append($(``)) } me.timeChanged(presetTime); $("#lbTime").change(); $("#spinner-time").hide(); }); } me.getAvailDatesForSymbol=(theSymbol)=>{ $("#spinner-date").show(); return $.ajax({ url:"/getDates?Symbol=" + theSymbol }).done(response=>{ let availableDates=response; //console.log(availableDates); _filterContext.availableDates=availableDates; $("#spinner-date").hide(); }); } me.toFriendlyName=(symbol)=>{ // not really required anymore because I replace the name on DB now. let symbolDisplayName=symbol; /* if (symbolDisplayName==="$XSP.X") { symbolDisplayName="XSP"; } */ return(symbolDisplayName); } me.toBrokerName=(symbol)=>{ // not really required anymore because I replace the name on DB now. let symbolBrokerName=symbol; /*if (symbolBrokerName==="XSP") { symbolBrokerName="$XSP.X"; } */ return(symbolBrokerName); } me.refreshSymbolList=(allSymbols)=>{ let lbSymbol=$("#lbSymbol"); lbSymbol.empty(); for (let i=0;i${symbolDisplayName}`)) } } me.fetchSymbols(); return true; }