Better usability and nicer look: Change buttons to bootstrap standard

client/css/optiTrainer.css

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

client/js/masterFilter.js

@@ -9,16 +9,30 @@ let createMasterFilterFrame=()=>{
     theFrameDiv.innerHTML=`
         <div id='datePicker'></div>
 
-		<select size='5' onchange='symbolChanged()' id='lbSymbol'>
-			<option>[LOADING]</option>
-        </select>	
-        
-        <select size='5' onchange='timeChanged()' id='lbTime'>
-            <option>[WAITING]</option>
-        </select>
+		<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>
 
-        <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='tbSelectedTime'></h2>
+		
 		<!--button onclick='rq()'>LOAD</button-->
     `;
     
@@ -55,10 +69,11 @@ let fetchSymbols=()=>{
 }
 
 let getCurrentSymbol=()=>{
-    return(filterContext.theSymbol=$("#lbSymbol").val());
+    return(filterContext.theSymbol);
 }
-let symbolChanged=_=>{
-    console.log("symbolChanged",getCurrentSymbol());
+let symbolChanged=(newSymbol)=>{
+    console.log("symbolChanged",newSymbol);
+	filterContext.theSymbol=newSymbol
     document.title=getCurrentSymbol();
     $("#tbSymbol").text(getCurrentSymbol());
     getAvailDatesForSymbol(getCurrentSymbol()).done(_=>{
@@ -75,10 +90,11 @@ let symbolChanged=_=>{
     });
 }
 
-let timeChanged=()=>{
-    if (filterContext.selectedTime!==$("#lbTime").val()){
-        filterContext.selectedTime=$("#lbTime").val();
-        console.log("Time changed", );
+let timeChanged=(newTime)=>{
+    if (filterContext.selectedTime!==newTime){
+        filterContext.selectedTime=newTime;
+		$("#tbSelectedTime").text(newTime);
+        console.log("Time changed", newTime);
         requestOptionChain();
     }
 }
@@ -107,9 +123,12 @@ let showTimesForDay=()=>{
             theTime=allTimes[i].Time;
             let selectedFlag="";
             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();
     });
@@ -132,6 +151,6 @@ let refreshSymbolList=(allSymbols)=>{
     for (let i=0;i<allSymbols.length;i++){
         theSymbol=allSymbols[i].Symbol;
         console.log(theSymbol);
-        lbSymbol.append($(`<option>${theSymbol}</option>`))
+		lbSymbol.append($(`<button onclick="symbolChanged('${theSymbol}');" class="dropdown-item" type="button">${theSymbol}</button>`))
     }
 }