OptiTrainer/client/js/masterFilter.js

var filterContext={};

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

		<div class="dropdown" id="grpSymbol">
		  <button class="btn btn-secondary dropdown-toggle ddMnuBtn" type="button" id="ddMnuBtnSymbol" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			Symbol
		  </button>
		  <div class="dropdown-menu" aria-labelledby="ddMnuBtnSymbol" id='lbSymbol'>
			<a class="dropdown-item" href="#">Dummy</a>
		  </div>
		</div>

		<div class="dropdown" id="grpTime">
		  <button class="btn btn-secondary dropdown-toggle ddMnuBtn" type="button" id="ddMnuBtnTime" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			Time
		  </button>
		  <div class="dropdown-menu" aria-labelledby="ddMnuBtnTime" id='lbTime'>
			<a class="dropdown-item" href="#">Select Date</a>
		  </div>
		</div>


        <h1 id='tbSymbol'>SELECT SYMBOL!</h1>
		<h2 id='tbUnderlyingPrice'></h2>
		
		<h2 id='tbSelectedTime'></h2>
		
		<!--button onclick='rq()'>LOAD</button-->
    `;
    
    fetchSymbols();

	return true;
}

let 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"};
    }
}

let fetchSymbols=()=>{
	$.get({
		url:"/getSymbols"
	}).done(response=>{
		let allSymbols=response;
		console.log(allSymbols);
		refreshSymbolList(allSymbols);
	});
}

let getCurrentSymbol=()=>{
    return(filterContext.theSymbol);
}
let symbolChanged=(newSymbol)=>{
    console.log("symbolChanged",newSymbol);
	filterContext.theSymbol=newSymbol
    document.title=getCurrentSymbol();
    $("#tbSymbol").text(getCurrentSymbol());
    getAvailDatesForSymbol(getCurrentSymbol()).done(_=>{
        $("#datePicker").datepicker('destroy');
        $("#datePicker").datepicker({beforeShowDay:beforeShowDay})
        .on('changeDate', (e)=>{
            if (e.date !== undefined) {
                console.log("DatePicker changed date",e.date);
                filterContext.theDate=e.date.toISOString().substr(0,10);
                showTimesForDay(filterContext.theDate);
            }
        });
        $("#datePicker").datepicker('setDate',new Date(filterContext.theDate));
    });
}

let timeChanged=(newTime)=>{
    if (filterContext.selectedTime!==newTime){
        filterContext.selectedTime=newTime;
		$("#tbSelectedTime").text(newTime);
        console.log("Time changed", newTime);
        requestOptionChain();
    }
}

let requestOptionChain=()=>{
	$.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}));
	});
}

let showTimesForDay=()=>{
    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;
        for (let i=0;i<allTimes.length;i++){
            theTime=allTimes[i].Time;
            let selectedFlag="";
            if (i==4) {
                // select the 4th time in the day... that's usually around 9:30
				timeChanged(theTime);
            }
            //lbTime.append($(`<option ${selectedFlag}>${theTime}</option>`))
			lbTime.append($(`<button onclick="timeChanged('${theTime}');" class="dropdown-item" type="button">${theTime}</button>`))

        }
        $("#lbTime").change();
    });
    
}

let getAvailDatesForSymbol=(theSymbol)=>{
    return $.ajax({
		url:"/getDates?Symbol=" + theSymbol
	}).done(response=>{
		let availableDates=response;
		//console.log(availableDates);
		filterContext.availableDates=availableDates;
	});
}

let refreshSymbolList=(allSymbols)=>{
    let lbSymbol=$("#lbSymbol");
    lbSymbol.empty();
    for (let i=0;i<allSymbols.length;i++){
        theSymbol=allSymbols[i].Symbol;
        console.log(theSymbol);
		lbSymbol.append($(`<button onclick="symbolChanged('${theSymbol}');" class="dropdown-item" type="button">${theSymbol}</button>`))
    }
}