Add debounce and stylize

WebServer/Components/Pages/Home.razor

@@ -29,6 +29,7 @@
     <!-- User Frame -->
     }else{
         <div class="gridFrame">
+            <div><h2>Account</h2></div>
             <span>UserName: @Session.UserName</span><br />
             <div>
                 @foreach(PurchasedStock cur in Session.TrackedStocks){
@@ -42,10 +43,16 @@
     <!-- Tool Frame -->
         <div class="gridFrame">
             <div>
-                <span>Actions</span>
+                <div><h2>Actions</h2></div>
+                @if (Debounce){
                     <button @onclick="pull">@pullButtonText</button>
                     <button @onclick="train">@trainButtonText</button>
                     <button @onclick="predict">@predictButtonText</button>
+                }else{
+                    <button disabled>@pullButtonText</button>
+                    <button disabled>@trainButtonText</button>
+                    <button disabled>@predictButtonText</button>
+                }
                 <span>@PredictError</span>
             </div>
         </div>
@@ -54,23 +61,27 @@
     <!-- AI Frame -->
     <div class="gridFrame">
         <div>
+            <h2>Current Signal</h2>
+        </div>
+        @foreach (stockPredictionPair cur in predictions){
+            <div class="signalBlock">
+                <div>
+                    <p>@cur.Symbol</p>
+                </div>
+                <div>
+                    <span>-></span>
+                </div>
+                @if (cur.Movement == -1){
+                    <div style="background-color: red;"><p style=>Sell</p></div>
+                } else if (cur.Movement == 1){
+                    <div style="background-color: green;"><p>Buy</p></div>
+                } else{
+                    <div style="background-color: #444;"><p>Hold</p></div>
+                }
                 
             </div>
-        <div>
-            @foreach (stockPredictionPair cur in predictions){
-                <div>
-                    <h1>Symbol: @cur.Symbol</h1><br />
-                @if (cur.Movement == -1){
-                    <p>Sell</p>
-                } else if (cur.Movement == 1){
-                    <p>Buy</p>
-                } else{
-                    <p>Hold</p>
         }
     </div>
-            }
-        </div>
-    </div>
 
 </div>
 
@@ -127,11 +138,11 @@
     string predictButtonText = "Predict AI";
     string PredictError = "";
 
-    bool pullDebounce = true;
+    bool Debounce = true;
     async Task pull(){
         PredictError = "";
-        if (pullDebounce){
+        if (Debounce){
-            pullDebounce = false;
+            Debounce = false;
             pullButtonText = "Do not refresh the page. The data is pulling.";
             await Task.Delay(1);
             Task thread = new Task(async () => {
@@ -141,17 +152,16 @@
                 await Task.Delay(2000);
                 pullButtonText = "Pull Data";
                 await InvokeAsync(StateHasChanged);
-                pullDebounce = true;
+                Debounce = true;
             });
             thread.Start();
         }
     }
 
-    bool trainDebounce = true;
     async Task train(){
         PredictError = "";
-        if (trainDebounce){
+        if (Debounce){
-            trainDebounce = false;
+            Debounce = false;
             trainButtonText = "Do not refresh the page. The AI is training.";
             await Task.Delay(1);
             Task thread = new Task(async () => {
@@ -161,7 +171,7 @@
                 await Task.Delay(2000);
                 trainButtonText = "Train AI";
                 StateHasChanged();
-                trainDebounce = true;
+                Debounce = true;
             });
             thread.Start();
         }
@@ -169,6 +179,8 @@
 
     async Task predict(){
         PredictError = "";
+        if (Debounce){
+            Debounce = false;
             predictButtonText = "Do not refresh the page. The AI is predicting";
             await Task.Delay(1);
             List<Task> threadpool = new List<Task>();
@@ -189,6 +201,8 @@
             predictButtonText = "Predictions loaded";
             await Task.Delay(2000);
             predictButtonText = "Predict AI";
+            Debounce = true;
+        }
     }
 
     // Data Types

WebServer/Components/Pages/Home.razor.css

@@ -5,7 +5,6 @@
     grid-auto-columns: auto;
     grid-auto-flow: column;
     grid-template-columns: max-content;
-    overflow: scroll;
 }
 
 .gridFrame {
@@ -60,3 +59,29 @@
 .loginRow button:last-of-type{
     float: right;
 }
+
+.signalBlock {
+    display: flex;
+}
+
+.signalBlock > :nth-child(1) {
+    border: solid #040 1px;
+    border-radius: 15px;
+    width: 40px;
+    padding: 0px 20px;
+    background-color: greenyellow;
+}
+
+.signalBlock > :nth-child(2) {
+    padding: 0 30px;
+    font-size: 30px;
+    align-content: center;
+}
+
+.signalBlock > :nth-child(3) {
+    color: white;
+    padding: 0 30px;
+    width: 40px;
+    border: solid #000 1px;
+    border-radius: 15px;
+}