#10 Started on creating front end pages for the admin

controllers/database/user.py

@@ -63,6 +63,12 @@ class UserController(DatabaseController):
 
         return self.convert_type(self.get_one(query, params))
 
+    def read_all(self) -> list[User] | None:
+        params = []
+        query = """ SELECT * FROM Users """
+
+        return self.get_many(query, params)
+
     def update(self):
         print("Doing work")
 

controllers/web/admin.py

@@ -1,9 +1,10 @@
-""" The user controller to manage all of the user related endpoints
+""" The admin controller to manage all of the admin related endpoints
     in the web app
 """
-from flask import Blueprint
 
-# from flask import render_template
+from flask import render_template, Blueprint
+
+from controllers.database.user import UserController
 
 # Blueprint to append user endpoints to
 blueprint = Blueprint("admin", __name__, url_prefix="/admin")
@@ -18,4 +19,8 @@ def main_admin():
 @blueprint.route('/users/')
 def admin_users():
     """ Endpoint responsible for managing a users permissions """
-    return "Hello, Worlds"
+    # Get all users to create admin table on frontend
+    db = UserController()
+    users = db.read_all()
+
+    return render_template("index.html", content="admin.html", users=users)

static/css/admin.css

@@ -0,0 +1,50 @@
+/* Resetting default table styles */
+table {
+    border-collapse: collapse;
+    width: 100%;
+    margin-bottom: 20px;
+  }
+  
+  /* Styling table headers */
+  th {
+    background-color: #f2f2f2;
+    color: #333;
+    font-weight: bold;
+    padding: 10px;
+    text-align: left;
+  }
+  
+  /* Styling table rows */
+  tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }
+  
+  tr:hover {
+    background-color: #f2f2f2;
+  }
+  
+  /* Styling table data cells */
+  td {
+    padding: 10px;
+  }
+  
+  /* Add a border to the bottom of the header row */
+  th {
+    border-bottom: 2px solid #ddd;
+  }
+  
+  /* Add a border to all other rows and cells */
+  tr:not(:first-child) {
+    border-top: 1px solid #ddd;
+  }
+  
+  td {
+    border-bottom: 1px solid #ddd;
+  }
+  
+  /* Responsive table */
+  @media (max-width: 768px) {
+    table {
+      overflow-x: auto;
+    }
+  }

templates/admin.html

@@ -0,0 +1,33 @@
+<link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}">
+
+{% if users != None %}
+    <p>Showing {{users|count}} users</p>
+    <div class="user-container">
+        <table>
+            <thead>
+              <tr>
+                <th>Username</th>
+                <th>E-Mail</th>
+                <th>Phone Number</th>
+              </tr>
+            </thead>
+            <tbody>
+                {% for user in users %}
+                    <tr>
+                        <td>{{user.username}}</td>
+                        <td>{{user.email}}</td>
+                        <td>{{user.phone}}</td>
+                    </tr>
+                    <!-- <a href="/products/{{user.id}}" class="product product-link">
+                        <div class="product-title">{{user.username}}</div>
+                        <div class="product-content-container">
+                        </div>
+                        <input type="submit" class="product-add-to-cart" value="Add to Cart" />
+                    </a> -->
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+{% else %}
+    <p>Sorry... We have nothing to show here!</p>
+{% endif %}