commit 364af681f4fa788591caa65784a9820983fe4f3e
parent 85fdb4e1e82c2f3a20369f1399dd13050b2d43b2
Author: William Lindholm <william_lindholm@outlook.com>
Date: Sun, 5 Nov 2023 13:57:19 +0100
Added template inheritance.
Diffstat:
4 files changed, 112 insertions(+), 160 deletions(-)
diff --git a/WebInterface/routes.py b/WebInterface/routes.py
@@ -29,7 +29,7 @@ def home():
for message in messages
]
- return render_template('newhome.html', messages=formatted_messages)
+ return render_template('home.html', messages=formatted_messages)
@web_interface.route('/login', methods=['GET', 'POST'])
diff --git a/templates/base.html b/templates/base.html
@@ -0,0 +1,81 @@
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Messages</title>
+
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <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') }}">
+</head>
+
+<body>
+
+<ul id="slide-out" class="sidenav">
+ <li>
+ <div class="user-view">
+ <i class="material-icons medium" style="color: white;">account_circle</i>
+ <a href="#name"><span class="white-text name">John Doe</span></a>
+ <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
+ </div>
+ </li>
+ <li><a class="waves-effect" href="#!">Messages</a></li>
+ <li>
+ <div class="divider"></div>
+ </li>
+ <li><a class="subheader">Settings</a></li>
+ <li><a class="waves-effect" href="#!">Account</a></li>
+ <li><a class="waves-effect" href="#!">Admin</a></li>
+</ul>
+
+<ul class="sidenav sidenav-fixed">
+ <li>
+ <div class="user-view">
+ <i class="material-icons medium" style="color: white;">account_circle</i>
+ <a href="#name"><span class="white-text name">John Doe</span></a>
+ <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
+ </div>
+ </li>
+ <li><a class="waves-effect" href="#!">Messages</a></li>
+ <li>
+ <div class="divider"></div>
+ </li>
+ <li><a class="subheader">Settings</a></li>
+ <li><a class="waves-effect" href="#!">Account</a></li>
+ <li><a class="waves-effect" href="#!">Admin</a></li>
+</ul>
+
+<div class="header">
+ <div class="content">
+ <div class="container hide-on-med-and-down">
+ <h1>Messages</h1>
+ </div>
+ <div class="hide-on-large-only">
+ <div class="container" style="display: flex; justify-content: space-between; align-items: center;">
+ <a href="#" data-target="slide-out" class="sidenav-trigger" style="flex-shrink: 0;"><i class="material-icons">menu</i></a>
+ <h1 class="mobile">Messages</h1>
+ <div style="width: 24px;"></div>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+<div class="content">
+ <div class="container">
+ {% block content %}
+ <!-- content goes here -->
+ {% endblock %}
+ </div>
+</div>
+
+<script>
+ document.addEventListener('DOMContentLoaded', function() {
+ var elems = document.querySelectorAll('.sidenav');
+ var instances = M.Sidenav.init(elems);
+ });
+</script>
+</body>
+\ No newline at end of file
diff --git a/templates/home.html b/templates/home.html
@@ -1,55 +1,29 @@
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
- <title>Messages</title>
-</head>
-<body>
+{% extends 'base.html' %}
-<div id="sidebar-toggle-btn-open" onclick="openSidebar()">
- <i class="fas fa-bars"></i> <!-- Hamburger icon -->
-</div>
-
-<div id="sidebar">
- <div id="sidebar-toggle-btn-close" onclick="closeSidebar()">
- <i class="fas fa-arrow-right"></i> <!-- Close icon -->
- </div>
- <ul class="nav flex-column">
- <li class="nav-item">
- <a class="nav-link text-white" href="/logout">Logout</a>
- </li>
- </ul>
-</div>
-
-<div class="container" style="padding-left: 260px;">
- <h1 class="mt-5">Messages</h1>
- <ul class="list-group mt-3">
- {% for message in messages %}
- <li class="list-group-item">
- <strong>{{ message.subject }}</strong> from {{ message.name }} ({{ message.email }})@{{ message.timestamp }}
- relevance: {{ message.relevance }}:
- <p>{{ message.message_content }}</p>
- </li>
- {% endfor %}
- </ul>
-</div>
-
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
-<script src="https://kit.fontawesome.com/a076d05399.js"></script> <!-- Font Awesome script -->
-<script>
- function openSidebar() {
- var sidebar = document.getElementById('sidebar');
- sidebar.classList.remove('active');
- }
-
- function closeSidebar() {
- var sidebar = document.getElementById('sidebar');
- sidebar.classList.add('active');
- }
-</script>
-
-</body>
-</html>
-\ No newline at end of file
+{% block content %}
+<br>
+<table class="highlight responsive-table">
+ <thead>
+ <tr>
+ <th>Subject</th>
+ <th>Sender</th>
+ <th>Email</th>
+ <th>Timestamp</th>
+ <th>Relevance</th>
+ <th class="truncate">Message</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for message in messages %}
+ <tr>
+ <td>{{ message.subject }}</td>
+ <td>{{ message.name }}</td>
+ <td>{{ message.email }}</td>
+ <td>{{ message.timestamp }}</td>
+ <td>{{ message.relevance }}</td>
+ <td class="truncate-td">{{ message.message_content }}</td>
+ </tr>
+ {% endfor %}
+ </tbody>
+</table>
+{% endblock %}
+\ No newline at end of file
diff --git a/templates/newhome.html b/templates/newhome.html
@@ -1,103 +0,0 @@
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Messages</title>
-
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <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') }}">
-</head>
-
-<body>
-
-<ul id="slide-out" class="sidenav">
- <li>
- <div class="user-view">
- <i class="material-icons medium" style="color: white;">account_circle</i>
- <a href="#name"><span class="white-text name">John Doe</span></a>
- <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
- </div>
- </li>
- <li><a class="waves-effect" href="#!">Messages</a></li>
- <li>
- <div class="divider"></div>
- </li>
- <li><a class="subheader">Settings</a></li>
- <li><a class="waves-effect" href="#!">Account</a></li>
- <li><a class="waves-effect" href="#!">Admin</a></li>
-</ul>
-
-<ul class="sidenav sidenav-fixed">
- <li>
- <div class="user-view">
- <i class="material-icons medium" style="color: white;">account_circle</i>
- <a href="#name"><span class="white-text name">John Doe</span></a>
- <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
- </div>
- </li>
- <li><a class="waves-effect" href="#!">Messages</a></li>
- <li>
- <div class="divider"></div>
- </li>
- <li><a class="subheader">Settings</a></li>
- <li><a class="waves-effect" href="#!">Account</a></li>
- <li><a class="waves-effect" href="#!">Admin</a></li>
-</ul>
-
-<div class="header">
- <div class="content">
- <div class="container hide-on-med-and-down">
- <h1>Messages</h1>
- </div>
- <div class="hide-on-large-only">
- <div class="container" style="display: flex; justify-content: space-between; align-items: center;">
- <a href="#" data-target="slide-out" class="sidenav-trigger" style="flex-shrink: 0;"><i class="material-icons">menu</i></a>
- <h1 class="mobile">Messages</h1>
- <div style="width: 24px;"></div>
- </div>
- </div>
- </div>
-</div>
-
-
-<div class="content">
- <div class="container">
- <br>
- <table class="highlight responsive-table">
- <thead>
- <tr>
- <th>Subject</th>
- <th>Sender</th>
- <th>Email</th>
- <th>Timestamp</th>
- <th>Relevance</th>
- <th class="truncate">Message</th>
- </tr>
- </thead>
- <tbody>
- {% for message in messages %}
- <tr>
- <td>{{ message.subject }}</td>
- <td>{{ message.name }}</td>
- <td>{{ message.email }}</td>
- <td>{{ message.timestamp }}</td>
- <td>{{ message.relevance }}</td>
- <td class="truncate-td">{{ message.message_content }}</td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
- </div>
-</div>
-
-<script>
- document.addEventListener('DOMContentLoaded', function() {
- var elems = document.querySelectorAll('.sidenav');
- var instances = M.Sidenav.init(elems);
- });
-</script>
-</body>
-\ No newline at end of file
