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

controllers/database/stats.py

@@ -90,6 +90,34 @@ class StatsController(DatabaseController):
 
         return self.get_one(query, params, int)
 
+    def read_ranking(self, id: int):
+        params = [
+            id
+        ]
+
+        query = """
+            SELECT
+                ranking
+            FROM
+            (
+                SELECT
+                    p.id as id,
+                    RANK() OVER (
+                        PARTITION BY p.categoryID
+                        ORDER BY COUNT(v.productID) DESC
+                    )AS ranking
+                FROM
+                    Products p
+                LEFT JOIN
+                    Views v ON p.id = v.productID
+                GROUP BY
+                    p.id, p.categoryID
+            )
+            WHERE id = ?
+        """
+
+        return self.get_one(query, params, int)
+
     def update(self):
         print("Doing work")
 

controllers/web/stats.py

@@ -42,18 +42,12 @@ def view_product_stats(id: int):
     # Total Views
     total_views = db.read_product_views(id)
 
+    # Ranking in category
+    ranking = db.read_ranking(id)
+
     db = ProductController()
     product = db.read_id(id)
 
-    # Ranking in category
-    query = """
-        SELECT id, count(id) FROM stats WHERE id = (
-            SELECT id FROM Products WEHRE id = (
-                SELECT categoryID FROM Products WHERE id = ?
-            )
-        )
-    """
-
     # Stock Level
     product.quantityAvailable
 
@@ -62,7 +56,7 @@ def view_product_stats(id: int):
 
     data = {
         "age": time_since_posted,
-        "ranking": 0,
+        "ranking": ranking,
         "views": {
             "total": total_views,
             "headings": list(reversed(product_view_frequency_data.keys())),

static/css/stats.css

@@ -1,5 +1,6 @@
 .stats {
     display: flex;
+    flex-direction: row;
     justify-content: center;
     align-items: center;
     gap: 1rem;

static/css/style.css

@@ -182,3 +182,10 @@ a:active {
     flex-grow: 1;
     height: 1%;
 }
+
+.hidden {
+    display: none;
+    visibility: hidden;
+    width: 0;
+    height: 0;
+}

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>