prettify (but still ugly) the giveaway table

requirements.txt

@@ -3,8 +3,9 @@ beautifulsoup4==4.11.1
 urllib3==1.26.9
 sqlalchemy==1.4.36
 sqlalchemy_utils==0.38.2
+paginate-sqlalchemy==0.3.1
+alembic==1.7.7
 python-dateutil==2.8.2
 Flask==2.1.2
 Flask-BasicAuth==0.2.0
 pyopenssl==22.0.0
-alembic==1.7.7

src/bot/database.py

@@ -1,6 +1,7 @@
 import os
 from datetime import datetime, timedelta
 
+import paginate_sqlalchemy
 import sqlalchemy
 from alembic import command
 from alembic.config import Config
@@ -92,7 +93,16 @@ class GiveawayHelper:
     @classmethod
     def get(cls):
         with Session(engine) as session:
-            return session.query(TableGiveaway).options(joinedload('steam_item')).order_by(TableGiveaway.giveaway_ended_at.desc()).all()
+            return session.query(TableGiveaway).options(joinedload('steam_item'))\
+                .order_by(TableGiveaway.giveaway_ended_at.desc()).all()
+
+    @classmethod
+    def paginate(cls, page=1):
+        with Session(engine) as session:
+            paginated_giveaways = paginate_sqlalchemy.SqlalchemyOrmPage(session.query(TableGiveaway)
+                                                                        .options(joinedload('steam_item'))
+                                                                        .order_by(TableGiveaway.giveaway_ended_at.desc()), page=page)
+            return paginated_giveaways
 
     @classmethod
     def unix_timestamp_to_utc_datetime(cls, timestamp):

src/web/static/css/main.css

@@ -74,3 +74,33 @@ h3 {
   color: #444;
   text-decoration: none;
 }
+.styled-table {
+    border-collapse: collapse;
+    margin: 25px 0;
+    font-size: 0.9em;
+    font-family: sans-serif;
+    min-width: 400px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+}
+.styled-table thead tr {
+    background-color: #009879;
+    color: #ffffff;
+    text-align: left;
+}
+.styled-table th,
+.styled-table td {
+    padding: 12px 15px;
+}
+.styled-table tbody tr {
+    border-bottom: 1px solid #dddddd;
+}
+.styled-table tbody tr:nth-of-type(even) {
+    background-color: #f3f3f3;
+}
+.styled-table tbody tr:last-of-type {
+    border-bottom: 2px solid #009879;
+}
+.styled-table tbody tr.active-row {
+    font-weight: bold;
+    color: #009879;
+}

src/web/templates/giveaways.html

@@ -22,7 +22,19 @@
     </div>
 </header>
 <div class="container">
-    <table>
+                <ul class="pagination">
+                    {% if content.previous_page %}
+                      <li class="page-item"> <a class="page-link" href="{{ url_for('db_giveaways', page=content.previous_page) }}">Previous</a></li>
+                    {% else %}
+                      <li class="page-item">Previous</li>
+                    {% endif %}
+                    {% if content.next_page %}
+                      <li class="page-item"> <a class="page-link" href="{{ url_for('db_giveaways', page=content.next_page) }}">Next</a></li>
+                    {% else %}
+                      <li class="page-item">Next</li>
+                    {% endif %}
+                </ul>
+    <table class="styled-table">
         <thead>
         <tr>
             <th>Giveaway ID</th>
@@ -40,7 +52,7 @@
         </tr>
         </thead>
         <tbody>
-        {% for row in content %}
+        {% for row in content.items %}
         <tr>
             <td>{{row.giveaway_id}}</td>
             <td>{{row.steam_id}}</td>

src/web/webserver_thread.py

@@ -16,7 +16,7 @@ class WebServerThread(threading.Thread):
         Thread.__init__(self)
         self.exc = None
         self.config = config
-        self.name = config['NOTIFICATIONS'].get('notification.prefix')
+        self.prefix = config['NOTIFICATIONS'].get('notification.prefix')
         self.host = config['WEB'].get('web.host')
         self.port = config['WEB'].getint('web.port')
         self.ssl = config['WEB'].getboolean('web.ssl')
@@ -43,19 +43,19 @@ class WebServerThread(threading.Thread):
         def config():
             with open(f"{os.getenv('BOT_CONFIG_DIR', './config')}/config.ini", 'r') as f:
                 content = f.read()
-            return render_template('configuration.html', name=self.name, content=content)
+            return render_template('configuration.html', name=self.prefix, content=content)
 
         @app.route(f"{self.app_root}log_info")
         def log_info():
             with open(f"{os.getenv('BOT_CONFIG_DIR', './config')}/info.log", 'r') as f:
                 content = f.read()
-                return render_template('log.html', name=self.name, log_type='info', content=content)
+                return render_template('log.html', name=self.prefix, log_type='info', content=content)
 
         @app.route(f"{self.app_root}log_debug")
         def log_debug():
             with open(f"{os.getenv('BOT_CONFIG_DIR', './config')}/debug.log", 'r') as f:
                 content = f.read()
-                return render_template('log.html', name=self.name, log_type='debug', content=content)
+                return render_template('log.html', name=self.prefix, log_type='debug', content=content)
 
         @app.route(f"{self.app_root}alive")
         def alive():
@@ -63,11 +63,12 @@ class WebServerThread(threading.Thread):
 
         @app.route(f"{self.app_root}notifications")
         def db_notifications():
-            return render_template('notifications.html', content=NotificationHelper.get())
+            return render_template('notifications.html', name=self.prefix, content=NotificationHelper.get())
 
-        @app.route(f"{self.app_root}giveaways")
+        @app.route(f"{self.app_root}giveaways", methods=['GET'], defaults={"page": 1})
-        def db_giveaways():
+        @app.route(f"{self.app_root}giveaways/<int:page>", methods=['GET'])
-            return render_template('giveaways.html', content=GiveawayHelper.get())
+        def db_giveaways(page):
+            return render_template('giveaways.html', name=self.prefix, content=GiveawayHelper.paginate(page=page))
 
         if self.enabled:
             logger.info("Webserver Enabled. Running")