Skip to content

Commit 6542fb8

Browse files
jstuckejstucke
committed
refactor: simplidied navbar creation with macros
1 parent d5466a8 commit 6542fb8

File tree

1 file changed

+64
-92
lines changed

1 file changed

+64
-92
lines changed

‎src/web_interface/templates/base.html‎

Lines changed: 64 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,39 @@
11
<!DOCTYPE html>
2-
{% set navigation_bar = [
3-
("Home", "/", '<i class="fas fa-home"></i>'),
4-
("Database", None, None),
5-
("Upload", "/upload", '<i class="fas fa-upload"></i>'),
6-
("Info", None, '<i class="fas fa-info-circle"></i>'),
7-
("Feedback", None, '<i class="fas fa-bullhorn"></i>'),
8-
("Admin", None, '<i class="fas fa-users-cog"></i>')
9-
] -%}
102

113
{% if ("string only here to have input to " | auth_enabled) %}
124
{% do navigation_bar.append(("Login", None, None)) %}
135
{% endif %}
146

157
{% set active_page = active_page | default('Home') %}
168

9+
{% macro navbar_item(caption, link, icon, options=None) %}
10+
<li class="pr-3">
11+
<a href="{{ link }}"
12+
{% if caption == active_page %}style="color: #fff; font-weight: 500;"{% endif %}
13+
{% if options %}{{ options | safe }}{% endif %}
14+
><i class="fas fa-{{ icon }}"></i><span class="hideable_caption">&nbsp;{{ caption }}</span></a>
15+
</li>
16+
{%- endmacro %}
17+
18+
{% macro navbar_dropdown_menu(caption, icon) %}
19+
<li class="dropdown pr-3">
20+
<a class="dropdown-toggle"
21+
data-toggle="dropdown"
22+
href="#"
23+
{% if caption == active_page %}style="color: #fff; font-weight: 500;" {% endif %}
24+
><i class="fas fa-{{ icon }}"></i><span class="hideable_caption">&nbsp;{{ caption }}</span><span class="caret"></span></a>
25+
<div class="dropdown-menu">
26+
{{ caller() }}
27+
</div>
28+
</li>
29+
{%- endmacro %}
30+
31+
{% macro navbar_dropdown_item(link, icon, caption) %}
32+
<a class="dropdown-item" href="{{ link }}" style="font-size: 14px">
33+
<i class="fas fa-{{ icon }}"></i> {{ caption }}
34+
</a>
35+
{%- endmacro %}
36+
1737
<html>
1838
<head lang="en">
1939
<meta charset="UTF-8">
@@ -58,6 +78,7 @@
5878

5979
<body>
6080

81+
{# Navbar #}
6182
<nav role="navigation" class="navbar navbar-expand-lg navbar-light flex-column flex-md-row bg-fact">
6283
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggler">
6384
<span class="sr-only">Toggle navigation</span>
@@ -70,91 +91,42 @@
7091
<div id="navbarCollapse" class="collapse navbar-collapse">
7192
<!-- Navbar Elements -->
7293
<ul class="navbar-nav" style="padding-right: 5px">
73-
{% for caption, href, icon in navigation_bar %}
74-
{% if caption == "Database" %}
75-
<li class="dropdown pr-3">
76-
<a {% if caption== active_page %}style="color: #fff; font-weight: 500;" {% endif %}
77-
class="dropdown-toggle" data-toggle="dropdown" href="#"><i
78-
class="fas fa-tasks"></i><span class="hideable_caption">&nbsp;Database</span><span class="caret"></span></a>
79-
<div class="dropdown-menu">
80-
<a class="dropdown-item" href="/database/browse" style="font-size: 14px"><i
81-
class="fas fa-list-ul"></i> Browse Firmware</a>
82-
<a class="dropdown-item" href="/database/browse_compare" style="font-size: 14px"><i
83-
class="far fa-copy"></i> Browse Compares</a>
84-
<a class="dropdown-item" href="/database/search" style="font-size: 14px"><i
85-
class="fas fa-search"></i> Basic Search</a>
86-
<a class="dropdown-item" href="/database/advanced_search" style="font-size: 14px"><i
87-
class="fas fa-search-plus"></i> Advanced Search</a>
88-
<a class="dropdown-item" href="/database/graphql" style="font-size: 14px"><i
89-
class="fas fa-search-plus"></i> GraphQL Search</a>
90-
<a class="dropdown-item" href="/database/binary_search" style="font-size: 14px"><i
91-
class="fas fa-search-dollar"></i> Binary Pattern Search</a>
92-
<a class="dropdown-item" href="/database/browse_binary_search_history" style="font-size: 14px"><i
93-
class="fas fa-search-dollar"></i> Browse Binary Pattern Search History</a>
94-
</div>
95-
</li>
96-
{% elif caption == "Info" %}
97-
<li class="dropdown pr-3">
98-
<a {% if caption== active_page %}style="color: #fff; font-weight: 500;" {% endif %}
99-
class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fas fa-info-circle"></i><span class="hideable_caption">&nbsp;{{
100-
caption }}</span><span class="caret"></span></a>
101-
<div class="dropdown-menu">
102-
<a class="dropdown-item" href="/statistic" style="font-size: 14px"><i class="fas fa-chart-bar"></i>
103-
Statistics</a>
104-
<a class="dropdown-item" href="/system_health" style="font-size: 14px"><i
105-
class="fas fa-heartbeat"></i> System</a>
106-
<a class="dropdown-item" href="/plugins" style="font-size: 14px"><i class="fas fa-puzzle-piece"></i> Plugins</a>
107-
<a class="dropdown-item" href="/doc" style="font-size: 14px"><i class="fas fa-terminal"></i> Rest API</a>
108-
<a class="dropdown-item" href="/about" style="font-size: 14px"><i class="fas fa-beer"></i> About</a>
109-
</div>
110-
</li>
111-
{% elif caption == "Feedback" %}
112-
<li class="pr-3">
113-
<a {% if caption== active_page %}style="color: #fff; font-weight: 500;" {% endif %}
114-
data-toggle="modal" data-target="#feedbackModal" href="#"> <i class="fas fa-bullhorn"></i><span class="hideable_caption">&nbsp;Feedback</span></a>
115-
</li>
116-
{% elif caption == "Admin" %}
117-
<li class="dropdown pr-3">
118-
<a {% if caption== active_page %}style="color: #fff; font-weight: 500;" {% endif %}
119-
class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fas fa-user-shield"></i><span class="hideable_caption">&nbsp;{{
120-
caption }}</span><span class="caret"></span></a>
121-
<div class="dropdown-menu">
122-
{% if current_user | user_has_role('manage_users') %}
123-
<a class="dropdown-item" href="/admin/manage_users" style="font-size: 14px"><i
124-
class="fas fa-users-cog"></i> Manage Users</a>
125-
{% endif %}
126-
<a class="dropdown-item" href="/admin/missing_analyses" style="font-size: 14px"><i
127-
class="fas fa-search"></i> Find Missing Analyses</a>
128-
<a class="dropdown-item" href="/admin/logs" style="font-size: 14px"><i
129-
class="fas fa-exclamation-circle"></i> Logs</a>
130-
</div>
131-
</li>
132-
{% elif caption == "Login" %}
133-
{% if current_user.is_authenticated %}
134-
<li class="dropdown pr-3">
135-
<a {% if caption== active_page %}style="color: #fff; font-weight: 500;" {% endif %}
136-
class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fas fa-user"></i><span class="hideable_caption">&nbsp;{{
137-
current_user.email|truncate(12) }}</span><span class="caret"></span></a>
138-
<div class="dropdown-menu">
139-
<a class="dropdown-item" href="/user_profile" style="font-size: 14px"><i
140-
class="fas fa-user-cog"></i> Profile</a>
141-
<a class="dropdown-item" href="/logout" style="font-size: 14px"><i class="fas fa-sign-out-alt"></i>
142-
Logout</a>
143-
</div>
144-
</li>
145-
{% else %}
146-
<li>
147-
<a {% if caption== active_page %}style="color: #fff; font-weight: 500;" {% endif %} href="/login"><i
148-
class="fas fa-sign-in-alt"></i><span class="hideable_caption">&nbsp;Login</span></a>
149-
</li>
94+
{{ navbar_item("Home", "/", "home") }}
95+
{% call navbar_dropdown_menu("Database", "tasks") %}
96+
{{ navbar_dropdown_item("/database/browse", "list-ul", "Browse Firmware") }}
97+
{{ navbar_dropdown_item("/database/browse_compare", "copy", "Browse Comparisons") }}
98+
{{ navbar_dropdown_item("/database/search", "search", "Basic Search") }}
99+
{{ navbar_dropdown_item("/database/advanced_search", "search-plus", "Advanced Search") }}
100+
{{ navbar_dropdown_item("/database/graphql", "search-plus", "GraphQL Search") }}
101+
{{ navbar_dropdown_item("/database/binary_search", "search-dollar", "Binary Pattern Search") }}
102+
{{ navbar_dropdown_item("/database/browse_binary_search_history", "search-dollar", "Browse Binary Pattern Search History") }}
103+
{% endcall %}
104+
{{ navbar_item("Upload", "/upload", "upload") }}
105+
{% call navbar_dropdown_menu("Info", "info-circle") %}
106+
{{ navbar_dropdown_item("/statistic", "chart-bar", "Statistics") }}
107+
{{ navbar_dropdown_item("/system_health", "heartbeat", "System") }}
108+
{{ navbar_dropdown_item("/plugins", "puzzle-piece", "Plugins") }}
109+
{{ navbar_dropdown_item("/doc", "terminal", "Rest API") }}
110+
{{ navbar_dropdown_item("/about", "beer", "About") }}
111+
{% endcall %}
112+
{{ navbar_item("Feedback", "#", "bullhorn", options='data-toggle="modal" data-target="#feedbackModal"') }}
113+
{% call navbar_dropdown_menu("Admin", "shield") %}
114+
{% if current_user | user_has_role('manage_users') %}
115+
{{ navbar_dropdown_item("/admin/manage_users", "users-cog", "Manage Users") }}
116+
{% endif %}
117+
{{ navbar_dropdown_item("/admin/missing_analyses", "search", "Find Missing Analyses") }}
118+
{{ navbar_dropdown_item("/admin/logs", "exclamation-circle", "Logs") }}
119+
{% endcall %}
120+
{% if ("" | auth_enabled) %}
121+
{% if current_user.is_authenticated %}
122+
{% call navbar_dropdown_menu(current_user.email | truncate(12), "user") %}
123+
{{ navbar_dropdown_item("/user_profile", "user-cog", "Profile") }}
124+
{{ navbar_dropdown_item("/logout", "sign-out-alt", "Logout") }}
125+
{% endcall %}
126+
{% else %}
127+
{{ navbar_item("Login", "/login", "sign-in-alt") }}
128+
{% endif %}
150129
{% endif %}
151-
{% else %}
152-
<li class="pr-3">
153-
<a {% if caption== active_page %}style="color: #fff; font-weight: 500;" {% endif %} href={{ href }}>{{
154-
icon|safe }}<span class="hideable_caption">&nbsp;{{ caption }}</span></a>
155-
</li>
156-
{% endif %}
157-
{% endfor %}
158130
</ul>
159131

160132
{# dark mode switch #}

0 commit comments

Comments
 (0)