#5 Changed styling and added product ranking in category to the stats page

templates/stats.html

@@ -1,25 +1,27 @@
 <link rel="stylesheet" href="{{ url_for('static', filename='css/products.css') }}">
 <link rel="stylesheet" href="{{ url_for('static', filename='css/stats.css') }}">
+<link rel="stylesheet" href="{{ url_for('static', filename='css/loginform.css') }}">
  
 <div class="stats">
     <div>
         <canvas id="myChart" width="800px" height="500px"></canvas>
         <br >
-        <form method="GET">
-            <input type="radio" id="7days" name="prev_days" value=7>
-            <label for="7days">7 Days</label><br>
-            <input type="radio" id="31days" name="prev_days" value=31>
-            <label for="31days">31 Days</label><br>
-            <input type="radio" id="1year" name="prev_days" value=365>
-            <label for="1year">1 Year</label>
-            <input type="submit">
+        <form method="GET" action='' id="timeframe_form">
+            <div class="input-form-row">
+                <input type="radio" class="hidden" id="7days" name='prev_days' value=7>
+                <label for="7days">1 Week</label><br>
+                <input type="radio" class="hidden" id="14days" name="prev_days" value=14>
+                <label for="14days">2 Weeks</label><br>
+                <input type="radio" class="hidden" id="1month" name="prev_days" value=31>
+                <label for="1month">1 Month</label>
+            </div>
         </form>
     </div>
     <div>
-        <p>Age: {{data['age']}}</p>
-        <p>Ranking: {{data['ranking']}}</p>
-        <p>Stock Level: {{data['stocklevel']}}</p>
-        <p>Total Views: {{data['views']['total']}}</p>
+        <p><b>Age:</b> {{data['age']}}</p>
+        <p><b>Ranking:</b> {{data['ranking']}}</p>
+        <p><b>Stock Level:</b> {{data['stocklevel']}}</p>
+        <p><b>Total Views:</b> {{data['views']['total']}}</p>
     </div>
 </div>
 
@@ -58,4 +60,16 @@
             }
         }
     });
+
+
+    // Remove the need for a submit button on the graph buttons
+    const form = document.getElementById("timeframe_form");
+    const rbs = form.querySelectorAll("input[type='radio']");
+    console.log(rbs)
+    console.log(form)
+    rbs.forEach((input) => {
+        input.addEventListener("change", () => {
+            form.submit();
+        });
+    });
 </script>