commit 0461ea099954eadf33e9f08aea116a8c39697166
parent 7767aa14e055f5e8e6428502140b9e7af32f1189
Author: William Lindholm <william_lindholm@outlook.com>
Date: Sun, 5 Nov 2023 23:45:22 +0100
Bug fixing.
Diffstat:
5 files changed, 82 insertions(+), 20 deletions(-)
diff --git a/WebInterface/tableFactory.py b/WebInterface/tableFactory.py
@@ -11,13 +11,18 @@ class TableFactory:
def delete_link(row_data):
return f'<a href="/message/delete/{row_data[0]}" class="delete-icon"><i class="material-icons">delete</i></a>'
+ @staticmethod
+ def flag_link(row_data):
+ return f'<a href="/message/flag/{row_data[0]}" class="flag-icon" title="Flag Message"><i class="material-icons">flag</i></a>'
+
def get_message_table(self, page=0, page_size=10):
headers = [
- ("ID", "8%"),
- ("Sender", "10%"),
- ("Relevance", "10%"),
- ("Message", "67%"),
- ("Delete", "5%")
+ ("ID", "70px"),
+ ("Sender", "100px"),
+ ("Relevance", "100px"),
+ ("Message", "ifr"),
+ ("", "50px"),
+ ("", "50px")
]
messages, total_pages = self.db.get_messages(page, page_size)
@@ -30,7 +35,8 @@ class TableFactory:
.set_current_page(page)
.set_sortable(["ID"])
.set_on_click("/message/{0}")
+ .add_callback_column(self.flag_link)
.add_callback_column(self.delete_link)
.get_table_data())
- return table_data
-\ No newline at end of file
+ return table_data
diff --git a/static/css/main.css b/static/css/main.css
@@ -1,5 +1,4 @@
:root {
- /* Define your color scheme */
--primary-color: #629da7;
--secondary-color: #301621;
--gradient-start: rgb(57,75,166);
@@ -9,7 +8,8 @@
--text-gradient-end: #333;
--sidenav-width: 250px;
--header-font-family: 'Roboto', sans-serif;
- --header-font-size: 52px;
+ --header-font-size: 4em;
+ --header-font-size-mobile: 3em;
--header-line-height: 1.2;
--truncate-max-width: 200px;
--content-margin: 150px;
@@ -39,6 +39,12 @@ h1 {
padding: 0.2em 0;
}
+h1.mobile {
+ font-size: var(--header-font-size-mobile);
+ text-align: center;
+ flex-grow: 1;
+}
+
.truncate-td {
max-width: var(--truncate-max-width);
white-space: nowrap;
@@ -76,15 +82,32 @@ h1 {
height: 100%;
}
-h1.mobile {
- text-align: center;
- flex-grow: 1;
-}
-
.delete-icon {
color: red;
+ transition: transform 0.2s ease, color 0.2s ease;
}
-td, td {
- min-width: 100px;
-}
-\ No newline at end of file
+.delete-icon:hover {
+ color: darkred;
+}
+
+.flag-icon {
+ color: orange;
+ transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.flag-icon:hover {
+ color: grey;
+}
+
+.table-instance {
+ table-layout: fixed;
+ width: 100%;
+ min-width: 500px;
+ cursor: pointer;
+}
+
+table tr, table td {
+ padding: 0;
+ margin: 0 !important;
+}
diff --git a/static/js/pagination.js b/static/js/pagination.js
@@ -0,0 +1,26 @@
+var currentPage;
+var totalPages;
+
+document.addEventListener('DOMContentLoaded', function () {
+ var paginationElement = document.querySelector('.pagination');
+ if (paginationElement) {
+ currentPage = parseInt(paginationElement.getAttribute('data-current-page'), 10);
+ totalPages = parseInt(paginationElement.getAttribute('data-total-pages'), 10);
+ }
+});
+
+function changePage(direction) {
+ if (typeof currentPage === 'undefined' || typeof totalPages === 'undefined') {
+ console.error('currentPage or totalPages is undefined');
+ return;
+ }
+
+ var newPage = currentPage;
+ if (direction === 'next' && currentPage < totalPages) {
+ newPage = currentPage + 1;
+ } else if (direction === 'prev' && currentPage > 1) {
+ newPage = currentPage - 1;
+ }
+
+ window.location.href = '?page=' + newPage;
+}
+\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -10,6 +11,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
+ <script src="{{ url_for('static', filename='js/pagination.js') }}"></script>
</head>
<body>
diff --git a/templates/table.html b/templates/table.html
@@ -1,4 +1,4 @@
-<table style="table-layout: fixed;" id="table-instance" class="highlight">
+<table class="highlight table-instance">
<thead>
<tr>
{% for header, width in table.headers %}
@@ -27,11 +27,17 @@
</table>
{% if table.pagination_enabled %}
-<ul class="pagination">
+<ul class="pagination" data-current-page="{{ table.current_page }}" data-total-pages="{{ table.total_pages }}">
+ <li class="{% if table.current_page == 1 %}disabled{% else %}waves-effect{% endif %}">
+ <a href="javascript:void(0);" onclick="changePage('prev')"><i class="material-icons">chevron_left</i></a>
+ </li>
{% for i in range(1, table.total_pages + 1) %}
<li class="{% if table.current_page == i %}active{% else %}waves-effect{% endif %}">
<a href="?page={{ i }}">{{ i }}</a>
</li>
{% endfor %}
+ <li class="{% if table.current_page == table.total_pages %}disabled{% else %}waves-effect{% endif %}">
+ <a href="javascript:void(0);" onclick="changePage('next')"><i class="material-icons">chevron_right</i></a>
+ </li>
</ul>
{% endif %}
\ No newline at end of file
