joe/OptiTrainer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better usability and nicer look: Change buttons to bootstrap standard

Browse Source
This commit is contained in:
Joe Tretter
2020-04-25 14:18:07 -05:00
parent b600d0b5ba
commit b5f71423b3
2 changed files with 67 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
client/css/optiTrainer.css
View File

@@ -15,33 +15,49 @@ body {
list-style-type: none; list-style-type: none;
} }
#lbSymbol { #grpSymbol {
position: absolute; position:absolute;
top: 0; left:300px;
left: 300;
width: 100px;
} }
#lbTime { .ddMnuBtn {
width:245px
}
#lbSymbol {
width: 150px;
}
#grpTime {
position: absolute; position: absolute;
top: 0; left:300px;
left: 410; top:40px;
width: 100px; }
#lbTime {
} }
#tbSymbol { #tbSymbol {
position: absolute; position: absolute;
top: 0; top: 0;
left: 550; left: 550px;
width: 100px; width: 100px;
margin-top:0 margin-top:0px;
} }
#tbUnderlyingPrice { #tbUnderlyingPrice {
position: absolute; position: absolute;
top: 30; top: 00;
left: 550; left: 660px;
width: 100px; width: 100px;
margin-top:3px;
}
#tbSelectedTime {
position: absolute;
top: 00;
left: 550px;
width: 100px;
margin-top:43px;
} }
#frmMasterFilter { #frmMasterFilter {
@@ -76,7 +92,7 @@ body {
background-color: #EEEEFF; background-color: #EEEEFF;
position:absolute; position:absolute;
left:300; left:300;
top:100px; top:80px;
width:800px; width:800px;
} }

55
client/js/masterFilter.js
View File

@@ -9,16 +9,30 @@ let createMasterFilterFrame=()=>{
theFrameDiv.innerHTML=` theFrameDiv.innerHTML=`
<div id='datePicker'></div> <div id='datePicker'></div>
<select size='5' onchange='symbolChanged()' id='lbSymbol'> <div class="dropdown" id="grpSymbol">
<option>[LOADING]</option> <button class="btn btn-secondary dropdown-toggle ddMnuBtn" type="button" id="ddMnuBtnSymbol" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</select> Symbol
</button>
<select size='5' onchange='timeChanged()' id='lbTime'> <div class="dropdown-menu" aria-labelledby="ddMnuBtnSymbol" id='lbSymbol'>
<option>[WAITING]</option> <a class="dropdown-item" href="#">Dummy</a>
</select> </div>
</div>
<h1 id='tbSymbol'></h1> <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='tbUnderlyingPrice'></h2>
<h2 id='tbSelectedTime'></h2>
<!--button onclick='rq()'>LOAD</button--> <!--button onclick='rq()'>LOAD</button-->
`; `;
@@ -55,10 +69,11 @@ let fetchSymbols=()=>{
} }
let getCurrentSymbol=()=>{ let getCurrentSymbol=()=>{
return(filterContext.theSymbol=$("#lbSymbol").val()); return(filterContext.theSymbol);
} }
let symbolChanged=_=>{ let symbolChanged=(newSymbol)=>{
console.log("symbolChanged",getCurrentSymbol()); console.log("symbolChanged",newSymbol);
filterContext.theSymbol=newSymbol
document.title=getCurrentSymbol(); document.title=getCurrentSymbol();
$("#tbSymbol").text(getCurrentSymbol()); $("#tbSymbol").text(getCurrentSymbol());
getAvailDatesForSymbol(getCurrentSymbol()).done(_=>{ getAvailDatesForSymbol(getCurrentSymbol()).done(_=>{
@@ -75,10 +90,11 @@ let symbolChanged=_=>{
}); });
} }
let timeChanged=()=>{ let timeChanged=(newTime)=>{
if (filterContext.selectedTime!==$("#lbTime").val()){ if (filterContext.selectedTime!==newTime){
filterContext.selectedTime=$("#lbTime").val(); filterContext.selectedTime=newTime;
console.log("Time changed", ); $("#tbSelectedTime").text(newTime);
console.log("Time changed", newTime);
requestOptionChain(); requestOptionChain();
} }
} }
@@ -107,9 +123,12 @@ let showTimesForDay=()=>{
theTime=allTimes[i].Time; theTime=allTimes[i].Time;
let selectedFlag=""; let selectedFlag="";
if (i==4) { if (i==4) {
selectedFlag="selected"; // select the 4th time in the day... that's usually around 9:30
timeChanged(theTime);
} }
lbTime.append($(`<option ${selectedFlag}>${theTime}</option>`)) //lbTime.append($(`<option ${selectedFlag}>${theTime}</option>`))
lbTime.append($(`<button onclick="timeChanged('${theTime}');" class="dropdown-item" type="button">${theTime}</button>`))
} }
$("#lbTime").change(); $("#lbTime").change();
}); });
@@ -132,6 +151,6 @@ let refreshSymbolList=(allSymbols)=>{
for (let i=0;i<allSymbols.length;i++){ for (let i=0;i<allSymbols.length;i++){
theSymbol=allSymbols[i].Symbol; theSymbol=allSymbols[i].Symbol;
console.log(theSymbol); console.log(theSymbol);
lbSymbol.append($(`<option>${theSymbol}</option>`)) lbSymbol.append($(`<button onclick="symbolChanged('${theSymbol}');" class="dropdown-item" type="button">${theSymbol}</button>`))
} }
} }